/**********************************
            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;
 
  display: flex;
  height: 100%;
  flex-wrap: nowrap;
  margin-left: auto;
  padding: 0 16px;
  
}
.lottery-header .lottery-time span:last-child {
  color: var(--c-emphasis);
  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-color: var(--c-tint-b);
}
/*
.number-element button:hover:not(.selected) {
  background-color: var(--c-shade-b);
}
*/
.number-element button.selected {
        background: var(--c-diagonal-gradient);
    color: var(--c-white-e);
}
.desktop .number-element button:hover{
    background-color: var(--c-emphasis);
    color: var(--c-primary-b);
}
.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 {
  background-color: var(--c-emphasis);
  color: var(--c-white-e);
}
.lottery-main .place-bet-container .actions-container button.place-bet{
    background-color: var(--c-green);
    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(/v1.03/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;
  color: var(--c-white-e)
}
.lottery-draws span:first-child {
  display: block;
  padding: 4px 8px;
  color: var(--c-black)
}
.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 {
    background-color: var(--c-background-sidebar-menu-3)
}
.draw-details.selected,
.result-details.selected {
  background-color: var(--c-shade);
  color: var(--c-emphasis);
}
.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(/v1.03/r/images/site/icons/Arrow_Down.svg);
    width: 25px;
    height: 25px;
    transform: rotate(-90deg);
    background-color: #0f122e;
    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 {
    
    color: var(--c-white-e);
    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 {
  color: var(--c-white-e);
  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;
  background-color: var(--c-shade);
  color: var(--c-white);
  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 {
  color: var(--c-yellow);
  content: 'WINNING';
  margin-right: 8px;
}
.lottery-results-body .lottery-bonus > span {
  color: var(--c-emphasis);
}
.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 {
  color: var(--c-yellow);
}
.winning-bonus {
  color: var(--c-emphasis);
}

/* 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;
}
.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{
  
}

/*
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;
    color: var(--c-black-e);
    font-weight: bold;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--c-primary-b);
    border-radius: 8px 8px 0 0;
    margin-bottom: 2px;
}

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

body:not(.lottery-tap) .lottery-schedule-tab,
body.lottery-tap .lottery-results-tab{
        background: var(--c-diagonal-gradient);
    color: var(--c-black-e);
    transition: all .1s ease-in-out
} 

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

body .lottery-menu-widget,
body.lottery-tap .lottery-results-widget{
    display: block
}
.draws-menu-title{
        background: var(--c-diagonal-gradient-b);
    color: var(--c-black-e);
}
.draws-group-date:before, .results-group-date:before{
    display: none
}
.draws-group-date, .results-group-date,
.draw-details, .result-details{
    background-color: var(--c-background-sidebar-menu);
    color: var(--c-white-e);
    border-bottom: 1px solid var(--c-emphasis);
    height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--r-md);
    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{
    background-color: var(--c-background-sidebar-menu-3)
}

.lottery-header{
    
    color: var(--c-white-e);
    margin-bottom: 5px
}
.lottery-header .lottery-title{
    background-image: none
}
.numbers-title{
    m    margin-top: 15px;
    background: var(--c-diagonal-gradient);
    color: var(--c-white-e);
    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-lg);
    border-top-right-radius: var(--r-lg)
}
.numbers-container{
    padding: 20px 0;
        background-color: var(--c-primary-b);
    border-bottom-left-radius: var(--r-lg);
}
.place-bet-container{
    padding: 20px 0;
    background-color: var(--c-primary);
    border-bottom-right-radius: var(--r-lg)
}
.actions-container{
    display: flex;
    flex-direction: column
}
.number-element button{
        background-color: var(--c-shade);
    box-shadow: inset 0px 0px 10px 1px var(--c-background) , 2px 2px 4px 1px rgb(0 0 0 / 30%);
    color: var(--c-white-e);
    font-size: 18px;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.number-element button:not(:hover):not(.selected){
    border: 0
}
.desktop .number-element button:hover{
    background: var(--c-diagonal-gradient);
    color: #fff;
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%)
}
.number-element button.selected{
         background: var(--c-diagonal-gradient);
    color: var(--c-white-e);
    font-weight: bold;
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%)
}
.place-bet-container button{
        background-color: transparent;
    color: var(--c-white-e);
    flex: 0 0 45%;
    margin-right: 2%;
    border-radius: var(--r-md);
    height: auto;
    border: 1px solid var(--c-emphasis);
}
.lottery-main .place-bet-container button.active{
        background: var(--c-diagonal-gradient);
    border-color: var(--c-shade);
    color: var(--c-white-e);
    font-weight: bold;
}
.desktop .lottery-main .place-bet-container button:not(.number-selection):hover{
        background-color: var(--c-emphasis);
    border-color: var(--c-emphasis-c);
    color: #fff
}
.lottery-main .place-bet-container .actions-container button.place-bet,
.desktop .large .normal-board .lottery-main .place-bet-container button.place-bet:hover{
    background-color: var(--c-primary);
    border-color: var(--c-emphasis-b);
    color: var(--c-white-e);
}
.normal .empty-board .actions-container button, .large .empty-board .actions-container button{
    margin-right: 8%;
    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;
    
}
body:not(.lottery-tap) .mobile .lottery-schedule-tab,
body.lottery-tap .mobile .lottery-results-tab{
   
}

/* Design Changes Valeri */

.desktop .lottery-results-header .lottery-results-title {
    padding: 0 15px;
    background-color: #111032;
    border-radius: 6px
}
.desktop .lottery-results-header .lottery-results-title > span{
    color: var(--c-white-e)
}
.desktop .lottery-results-title span:first-child{
    width: auto
}
.desktop .lottery-results-title span:nth-child(3),
.desktop .lottery-results-title span:nth-child(5){
    display: block
}
.desktop .lottery-results-title .result-category,
.desktop .lottery-results-title .result-tournament{
    margin: 0 5px
}
.lottery-results-body .lottery-numbers > span,
.lottery-results-body .lottery-bonus > span{
    display: none
}
.winning-number{
    color: var(--c-white-e);
    background-color: #0e1346;
    box-shadow: inset 0px 0px 10px 1px #2f377b, 2px 2px 4px 1px rgb(0 0 0 / 30%);
    font-size: 18px;
    border: 0
}
.winning-bonus{
    background-color: #880fa8;
    color: #fff;
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%)
}
.lottery-results-body{
    margin: 0;
    padding: 0 15px;
    background-color: #1e2352
}
.lottery-results-body .lottery-numbers,
.lottery-results-body .lottery-bonus{
    background-color: #1e2352;
    justify-content: space-around
}
.draws-group-date,
.results-group-date{
    padding: 0
}
.draw-details.selected,
.result-details.selected{
    background-color: var(--c-background-header);
    color: #fff
}
.mobile .lottery-tabs{    
    height: 40px
}
#root .mobile .lottery-tabs .lottery-tab{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-background-betslip);
    color: var(--c-text-primary);
    margin: 0 1px
}
#root .mobile .lottery-tabs .lottery-tab.tab-selected{
    background-color: var(--c-background-header-menu);
    color: var(--c-text-header-menu)
}
body .mobile .lottery-schedule-tab{
    font-weight: normal
}
.lottery-banner img{
    max-width: 100%;
    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%
    }
}
/*  Fixes  */
.lottery-header .lottery-time > span{
    color: var(--c-text-betslip-betting-body)
}
.mobile .lottery-draws span:first-child{
    padding: 0
}
.mobile .lottery-draws .place-bet-message{
    color: var(--c-text-betslip-betting-body);
}