/**********************************
            Lottery
**********************************/

/* Sidebar area */

/* Content area */

.lottery-header {
    align-items: center;
    background: var(--c-shade);
    display: flex;
    height: 40px;
}
#mainDiv:not(.mobile) .lottery-header {
    padding-left: 16px;
}
.lottery-header .lottery-title {
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 24px;
    font-size: 1.25em;
    padding-left: 30px;
}
.lottery-header .lottery-title .draw-dash1,
.lottery-header .lottery-title .draw-dash2 {
    display: none;
}
.lottery-header .lottery-title .draw-tournament,
.lottery-header .lottery-title .draw-category {
    margin-left: 8px;
}
.small .lottery-header .lottery-title {
    font-size: 13px;
}
.small .lottery-header .lottery-title .draw-tournament {
    display: block;
    margin: 0;
}
.lottery-header .lottery-time {
    align-items: center;
    background: var(--c-background-header-menu);
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    margin-left: auto;
    padding: 0 16px;
}
.lottery-header .lottery-time span:last-child {
        margin-left: 4px;
}
.lottery-main { /* might be ok as block also */
    display: flex;
    flex-wrap: wrap;
}
.numbers-title {
    align-items: center;
    background: var(--c-tint-b);
    display: flex;
    height: 32px;
    letter-spacing: .5px;
    margin-top: 1px;
    padding: 0 16px;
    text-transform: uppercase;
    width: 100%;
}
.numbers-container {
    flex: 1 1 80%
}
.numbers-container .row {
    display: flex;
    flex-wrap: wrap;
}
.numbers-container .row .number-element {
    margin: 0;
    text-align: center;
}
/* different size for the lottery number if not mobile */
.lottery-widget:not(.small) .numbers-container .row .number-element {
    width: 10%;
}
.lottery-widget.small .numbers-container .row .number-element {
    width: 20%;
}
.number-element button {
    border-radius: 50%;
    height: 40px;
    margin: 4px;
    width: 40px;
}
.number-element button:not(:hover):not(.selected) {
    border-}
/*
.number-element button:hover:not(.selected) {
  }
*/
.number-element button.selected {
        }
.desktop .number-element button:hover{
        }
.place-bet-container {
    padding: 4px;
    flex: 1 1 20%
}
/*
.number-and-bonus .lottery-main .place-bet-container {
  display: flex;
  flex: 1;
}
.number-and-bonus .bets-container,
.number-and-bonus .actions-container {
  display: flex;
}
.normal .number-and-bonus .actions-container button,
.large .number-and-bonus .actions-container button {
  margin: 0 4px;
}
.compact .number-and-bonus .actions-container {
  flex: 1;
}
.number-and-bonus .bets-container {
  flex: 1;
}
.number-and-bonus .bets-container app-lottery-bet {
  flex: 1;
}
.normal .number-and-bonus .bets-container app-lottery-bet,
.large .number-and-bonus .bets-container app-lottery-bet {
  margin: 0 4px;
}
*/
.small .lottery-main .place-bet-container,
.compact .lottery-main .place-bet-container {
    flex-wrap: wrap;
    width: 100%;
}
.compact .number-and-bonus .place-bet-container {
    display: block;
}
.small .lottery-main .bets-container,
.compact .lottery-main .bets-container,
.small .lottery-main .actions-container,
.compact .lottery-main .actions-container {
    display: flex;
}
.small .lottery-main .bets-container,
.compact .lottery-main .bets-container {
    flex-wrap: wrap;
}
.small .lottery-main .actions-container {
    width: 100%;
}
.small .actions-container button {
    margin: 0 4px;
}
.compact .lottery-main .bets-container {
    flex: 1;
    margin-bottom: 8px;
}
.compact .lottery-main .bets-container app-lottery-bet {
    flex: 1;
    margin: 0;
    padding: 0 4px;
}
.lottery-main .place-bet-container button {
    display: block;
    min-height: 32px;
    min-width: auto;
    white-space: nowrap;
}
.compact .lottery-main .place-bet-container button .number-selection-dash {
    display: none;
}
.compact .lottery-main .actions-container button {
    margin: 0 4px;
}
.lottery-main .place-bet-container button:not(.random-selection) {
    /* flex: 1; */
    flex-shrink: 0;
    /*width: 100%;*/

}
.normal .normal-board .actions-container button,
.large .normal-board .actions-container button {
    /* width: 100%; */
    margin-right: 8%;
}
.compact .lottery-main .place-bet-container button:not(.random-selection) {
    padding: 0 4px;
}
.compact .lottery-main .place-bet-container button .number-selection-text {
    margin-right: 4px;
}
.compact .lottery-main .place-bet-container button .random-selection-text {
    font-size: 12px;
}
.lottery-main .place-bet-container .random-selection {
    min-width: 42px;
}
.normal .normal-board .lottery-main .place-bet-container button:not(.place-bet),
.large .normal-board .lottery-main .place-bet-container button:not(.place-bet) {
    margin-bottom: 8px;
}
.lottery-main .bets-container .number-selection-container {
    display: flex;
}
.lottery-main .place-bet-container button.active {
        }
.lottery-main .place-bet-container .actions-container button.place-bet{
        position: relative
}
.desktop .lottery-main .place-bet-container .actions-container button.place-bet:hover:before {
    content: "";
    display: block;
    width: 0;
    height: 86%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    box-shadow: 0 0 10px 3px rgb(255 255 255 / 70%);
    transform: skewX(-45deg);
    animation: e-shine .35s linear;
}
@keyframes e-shine{from{opacity:0;left:0}50%{opacity:1}to{opacity:0;left:100%}}

/* .normal-board app-lottery-bet .number-selection-container > button{
    margin: 0 5px
}*/
.lottery-content .normal-board,
.lottery-content .empty-board{
    padding-bottom: 15px
}

.normal .empty-board .place-bet-container,
.large .empty-board .place-bet-container {
    display: flex;
    flex: 1;
}
.normal .empty-board .bets-container,
.normal .empty-board .actions-container,
.large .empty-board .bets-container,
.large .empty-board .actions-container {
    display: flex;
    flex: 1 1 20%;
}
.normal .empty-board .bets-container,
.large .empty-board .bets-container {
    flex: 1 1 80%;
}
.normal .empty-board app-lottery-bet,
.large .empty-board app-lottery-bet {
    flex: 1;
    margin: 0 4px;
}
.normal .empty-board .actions-container button,
.large .empty-board .actions-container button {
    margin: 0 4px;
}
.draws-menu-title {
    align-items: center;
    background: var(--c-shade);
    display: flex;
    font-size: 1.1em;
    font-weight: bold;
    height: 40px;
    letter-spacing: 1px;
    padding: 0 8px;
    text-transform: uppercase;
}
.lottery-draws-submenu,
.lottery-results-submenu {
    margin: 0;
    padding: 0;
    width: 100%;
}
.draws-group-date,
.results-group-date {
    align-items: center;
    background: var(--c-shade-b);
    display: flex;
    flex-wrap: wrap;
    min-height: 32px;
    padding: 0 8px;
}
.draws-group-date:before,
.results-group-date:before {
    background: url(/v2.11/r/images/site/icons/CalendarIcon.svg) center center no-repeat;
    background-size: contain;
    content: '';
    height: 16px;
    margin-right: 8px;
    width: 16px;
}
.lottery-draws,
.lottery-results {
    margin-top: 1px;
}
.lottery-draws span:first-child,
.lottery-results span:first-child{
    display: block;
    padding:8px;
    text-align:center;
}
.lottery-draws > div,
.lottery-results > div {
    border-bottom: 1px solid var(--c-tint);
}
.draw-details,
.result-details {
    align-items: center;
    background-position: 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    display: flex;
    height: 28px;
    padding: 0 8px 0 24px;
}
.desktop .draw-details:hover,
.desktop .result-details:hover {
        }
.draw-details span:first-child,
.result-details span:first-child {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 100%;
    justify-content: center;
    width: 52px;
}
.draw-details span:nth-child(2),
.draw-details span:nth-child(4),
.result-details span:nth-child(2),
.result-details span:nth-child(4) {
    display: none;
}
.draw-details span:nth-child(3),
.result-details span:nth-child(3) {
    font-weight: bold;
    letter-spacing: 1px;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.draw-details span:last-child,
.result-details span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 5px
}
.mobile .draw-details span:last-child,
.mobile .result-details span:last-child{
    flex: 1;
    text-align: right
}
/*#root .mobile .lottery-draws-menu li.draw-details:after{
    content: "";
    background-image: url(/v2.11/r/images/site/icons/Arrow_Down.svg);
    width: 25px;
    height: 25px;
    transform: rotate(-90deg);
        border-radius: 50%;
    margin-left: auto;
    transition: all .5s ease-in-out;
    background-position: center center;
    background-repeat: no-repeat
}*/

.lottery-draws-menu,
.lottery-results-menu {
    position: relative;
}
.lottery-results-title {
    background: var(--c-background-betslip-title);
        align-items: center;
    display: flex;
    font-size: 1.1em;
    font-weight: bold;
    height: 40px;
    letter-spacing: 1px;
    padding: 0 8px;
    text-transform: uppercase
}
.lottery-results-title .result-time {
    margin-right: 8px;
}
.lottery-results-menu .lottery-results-title {
    padding: 0 8px;
}
.lottery-results-header .lottery-results-title {
    background-image: unset;
    padding-right: 8px;
}
.expand-collapse-draws,
.expand-collapse-results {
        font-size: 20px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}
.expand-collapse-draws:before,
.expand-collapse-results:before {
    align-items: center;
            cursor: pointer;
    display: flex;
    height: 100%;
    justify-content: center;
}
.expand-collapse-draws.expand:before,
.expand-collapse-results.expand:before {
    content: '+';
}
.expand-collapse-draws.collapse:before,
.expand-collapse-results.collapse:before {
    content: '-';
}
.lottery-results-title span:first-child {
    align-items: center;
    background: var(--c-shade);
    display: flex;
    height: 100%;
    justify-content: center;
    margin-right: 12px;
    width: 160px;
}
.lottery-results-title span:nth-child(3),
.lottery-results-title span:nth-child(5) {
    display: none;
}
.lottery-results-title span:nth-child(3) {
    font-weight: bold;
}
.lottery-results-title span:last-child {
    margin-left: auto;
}
.lottery-results-body {
    border-radius: 8px;
    display: flex;
    margin: 16px;
    overflow: hidden;
}
.lottery-results-body .lottery-numbers,
.lottery-results-body .lottery-bonus {
    background: var(--c-shade);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.lottery-results-body .lottery-bonus {
    margin-left: 1px;
}
.lottery-results-body .lottery-numbers {
    flex: 1;
}
.lottery-results-body .lottery-numbers > span,
.lottery-results-body .lottery-bonus > span {
    align-items: center;
    background: var(--c-shade);
    display: flex;
    height: 36px;
    justify-content: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
}
.lottery-results-body .lottery-numbers > span:before {
        content: 'WINNING';
    margin-right: 8px;
}
.lottery-results-body .lottery-bonus > span {
    }
.winning-number,
.winning-bonus {
    align-items: center;
    border: 1px solid var(--c-tint-b);
    border-radius: 50%;
    display: flex;
    font-size: 1.5em;
    /*font-weight: bold;*/
    height: 40px;
    justify-content: center;
    margin-bottom: 16px;
    margin-top: 16px;
    width: 40px;
}
.winning-number {
    }
.winning-bonus {
    }

/* Mobile */

.mobile .draw-details.selected + app-lottery .lottery-title {
    display: none;
}
.mobile .lottery-header .lottery-time {
    justify-content: center;
    width: 100%;
}
/* should be the same for small */
.mobile .numbers-container .row .number-element {
    width: 14%;
}
.mobile .place-bet-container {
    flex-wrap: wrap;
    width: 100%;
}
.mobile .actions-container {
    display: flex;
    margin-bottom: 4px;
    width: 100%;
}
.mobile .actions-container .clear-selections {
    margin-bottom: 5px;
}
.small app-lottery-bet {
    margin: 4px 4px 8px;
    width: calc(50% - 8px);
}
.mobile app-lottery-bet {
    display: block;
    margin-bottom: 8px;
}
.mobile .bets-container {
    flex: 1;
}
.mobile .lottery-results-header {
    display: none;
}
.lottery-draws-menu .draw-details,
.lottery-results-menu .result-details,
.lottery-menu .draw-details,
.lottery-menu .result-details{
    border-bottom: 1px solid var(--c-emphasis);
    height: 36px;
    padding-left: 20px
}

#root .mobile .lottery-nav-tabs > app-widget-host{
    flex-direction: row;
    height: 46px;
    align-items: center;
    padding: 5px;
}
.mobile .lottery-schedule-tab,
.mobile .lottery-results-tab{
    border-radius: 0
}
.mobile .lottery-results-tab{
    background: linear-gradient(45deg, var(--c-primary), var(--c-primary-c));
}
.mobile .lottery-schedule-tab > app-widget-host,
.mobile .lottery-results-tab > app-widget-host{
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
body.lottery-tap .mobile .lottery-schedule-tab{
    background: linear-gradient(45deg, var(--c-primary), var(--c-primary-c));
}

/*
body.schedule .lottery-menu-widget,
body:not(.schedule) .lottery-results-widget{
    display: none;    
}

body:not(.schedule) .lottery-menu-widget,
body.schedule .lottery-results-widget{
    display: block
}
body:not(.schedule) .lottery-schedule-tab,
body.schedule .lottery-results-tab{
    border-bottom: 3px solid var(--c-emphasis);
    transition: all .1s ease-in-out;
}
*/

/* misssing flags */
.united.kingdom:not(.lottery-results-title) {
    background-image: url(/assets/themes/betomall/images/icons/flags/united-kingdom.svg);
}
.russian:not(.lottery-results-title) {
    background-image: url(/assets/themes/betomall/images/icons/flags/russia.svg);
}
.italian:not(.lottery-results-title) {
    background-image: url(/assets/themes/betomall/images/icons/flags/italy.svg);
}
.french:not(.lottery-results-title) {
    background-image: url(/assets/themes/betomall/images/icons/flags/france.svg);
}
.greese:not(.lottery-results-title) {
    background-image: url(/assets/themes/betomall/images/icons/flags/greece.svg);
}
.rsa:not(.lottery-results-title), .south.africa:not(.lottery-results-title) {
    background-image: url(/assets/themes/betomall/images/icons/flags/south-africa.svg);
}




/* Design Changes Stan */

.lottery-nav-tabs > app-widget-host{
    flex-direction: row
}
body .lottery-schedule-tab,
body .lottery-results-tab{
    display: flex;
    flex: 1;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: .5px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 2px;
    color: var(--c-black)
}

.lottery-schedule-tab > app-widget-host,
.lottery-results-tab > app-widget-host{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
}

body:not(.lottery-tap) .lottery-schedule-tab,
body.lottery-tap .lottery-results-tab{
    transition: all .1s ease-in-out;
    border-radius: var(--r-border-radius-medium);
    background-color: var(--c-emphasis-c);
    color: var(--c-white)
}

body.lottery-tap .lottery-menu-widget,
body .lottery-results-widget{
    display: none
}

body .lottery-menu-widget,
body.lottery-tap .lottery-results-widget{
    display: block;
    background-color: var(--c-white);
    color: var(--c-black)
}
.draws-menu-title{
    background: var(--c-background-betslip-title);
            border-bottom: 1px solid var(--c-background-footer-middle);
    height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--r-border-radius-small);
    margin-bottom: 2px;
    box-shadow: 0px 0px 10px 5px rgb(24 26 37 / 9%);
    font-weight: bold
}
.draws-group-date, .results-group-date{
    justify-content: center
}
.mobile .draws-group-date,.mobile .results-group-date,
.mobile .draw-details,.mobile .result-details{
    height: unset
}
.draws-group-date span, .results-group-date span{
    height: 32px;
    line-height: 32px
}
.draw-details.selected, .result-details.selected{
            margin-bottom: 5px
}
.lottery-header .lottery-title{
    background-image: none
}
.numbers-title{
    margin-top: 15px;
            height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    border-top-left-radius: var(--r-border-radius-big);
    border-top-right-radius: var(--r-border-radius-big);
    border-bottom: 2px solid var(--c-border-sport-coupon)
}
.numbers-container{
    padding: 20px 0;
        border-bottom-left-radius: var(--r-border-radius-big)
}
.place-bet-container{
    padding: 20px 0;
        border-bottom-right-radius: var(--r-border-radius-big)
}
.actions-container{
    display: flex;
    flex-direction: column
}
.number-element button{
        box-shadow: inset 0px 0px 10px 1px var(--c-background-header) , 2px 2px 4px 1px rgb(0 0 0 / 30%);
        font-size: 18px;
    border: 0
}
.number-element button:not(:hover):not(.selected){
    border: 0
}
.desktop .number-element button:hover{
            box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%)
}
.number-element button.selected{
            font-weight: bold;
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%)
}
.place-bet-container button{
            flex: 0 0 45%;
    margin-right: 2%;
    border-radius: var(--r-border-radius-medium);
    height: auto;
    border: 1px solid var(--c-text-primary)
}
.lottery-main .place-bet-container button.active{
        border-        font-weight: bold
}
.desktop .lottery-main .place-bet-container button:not(.number-selection):hover{
        border-        border-        margin-bottom: 8px
}
.mobile .draw-details{
    height: 40px;
    border-radius: 0
}
.mobile .draws-group-date span,
.mobile .results-group-date span{
    line-height: 40px;
    height: 40px;
    border-radius: 0
}
.mobile .lottery-main .place-bet-container button:not(.random-selection){
    flex: 1
}
.mobile .lottery-main .place-bet-container button:not(.number-selection){
    margin-right: 0
}
body .mobile .lottery-results-tab,
body .mobile .lottery-schedule-tab{
    font-weight: normal;
            border-radius: 6px
}
.desktop .lottery-results-header .lottery-results-title > span{
            box-shadow: inset 0px 0px 10px 1px #2f377b, 2px 2px 4px 1px rgb(0 0 0 / 30%);
    font-size: 18px;
    border: 0
}
.winning-bonus{
            box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%)
}
.lottery-results-body{
    margin: 0;
    padding: 0 15px;
        justify-content: space-around
}
.draws-group-date,
.results-group-date{
    padding: 0
}
.draw-details.selected,
.result-details.selected{
            align-items: center;
    justify-content: center;
            margin: 0 1px
}
#root .mobile .lottery-tabs .lottery-tab.tab-selected{
            object-fit: contain
}

@media screen and (max-width: 1440px){
    .place-bet-container{
        flex: 1 1 30%;
        padding: 20px 5px
    }
    .numbers-container {
        flex: 1 1 70%
    }
}