.casino{
   background-color: var(--c-background-body)
}
.casino .body > app-widget-host{
    flex-direction: column
}
.mobile .casino .body > app-widget-host {
    /*padding-top: 60px;*/
}

.casino-page > app-widget-host{
    flex-direction: row;
}
.casino-left-sidebar{
    display: flex;
    max-width: 200px;
    min-width: 170px;
    padding-right: 10px
}
.casino-shortcuts-tabs{
    flex-direction: column
}
#root .casino-shortcuts-tabs .window-tab.casino-shortcut-tab{
   /* border-bottom: 1px solid var(--c-background-footer-middle); */
    height: 33px;
    font-size: 12px;
    font-weight: bold;
    color: var(--c-text-primary);
    background-color: var(--c-background-primary);
    border-radius: var(--r-border-radius-big);
    margin-bottom: 2px;
    border-bottom: 0
}
#root .casino-shortcuts-tabs .window-tab.casino-shortcut-tab:hover,
#root .casino-shortcuts-tabs .window-tab.casino-shortcut-tab.tab-selected{
    background-color: var(--c-background-odds-active)
}
#root .casino-shortcuts-tabs .window-tab.casino-shortcut-tab.tab-selected {
    border-bottom: 1px solid var(--c-background-footer-middle)
}
.casino-content{
    display: flex;
    width: 100%;
    margin-left: 10px
}
.casino-filter{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px
}
.casino-filter input{
    border: 0;
    border-radius: 8px;
    background-color: var(--c-background-input);
    color: var(--c-text-input);
    height: 33px;
    padding: 0 16px
}
.casino-container .loading-spinner{
    position: relative
}
.casino-container .ui-progress-spinner{
    position: relative
}
.casino-container  .ui-progress-spinner-circle{
    stroke: var(--c-background-header)!important
}
.no-games,
.loading-games{
    display: flex;
    justify-content: center;
    color: var(--c-text-primary)
}
.casino-page .casino-game{
        display: flex;
    flex-direction: column-reverse;
    background-color: white;
    overflow: hidden
}
#root .casino-page .game-name{
    margin: 0;
    padding: 10px;
    background-color: var(--c-background-header-menu);
    color: var(--c-text-header);
    /* text-transform: uppercase; */
    /* font-weight: bold; */
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c-text-primary);
}
#root .casino-page .game-image{
    /* height: 213px; */ 
    /* object-fit: contain; */
    height: 100%;
    object-fit: cover;
}
#root .casino-container .casino-tab-button{
    background-color: var(--c-background-betslip);
    /*color: var(--c-text-header);*/
    border: 1px solid var(--c-background-footer-top)
}
#root .casino-container .casino-tab-button:hover,
#root .casino-container .casino-tab-button.selected-provider{
    background-color: var(--c-background-betslip-betting-header);
    color: var(--c-text-header)
}

.casino-iframe .casino-lobby{
    min-height: calc(100vh - 180px)
}

.mobile .virtual-page .casino-lobby {
    position:fixed;
    width:100%;
    height:100%;
    min-height:unset;
    height:calc(100% - 120px);
    top:60px;
}
.mobile.os-ios .virtual-page .casino-lobby {
    height:calc(100% - 140px)
}
.betgames .body{
    margin-top: 0
}
.betgames  .virtual-page iframe{
    height: 1500px;
}
.aviator .casino-main-menu{
    display: none
}



.mobile .casino-container .games{
    padding: 20px 8px;
}




.games > app-casino-navigation{
    width: 100%;
    display: flex;
    justify-content: center;
}
.games .show-games-wrapper button{
    padding: 15px 20px;
    height: unset;
    color: var(--c-text-header);
    background-color: var(--c-background-header);
    border-radius: var(--r-border-radius-medium);
}

/* Casino subheader */

.casino-subheader > app-widget-host {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}
.mobile .casino-subheader > app-widget-host {
    padding-top: 16px;
}
.desktop .casino-subheader > app-widget-host {
    padding-block: .5rem 0;
    padding-inline: 1.5rem .75rem;
}
.casino-subheader .casino-filter {
    padding-bottom: 0;
}
.casino-subheader .casino-shortcuts-tabs {
    gap: .5rem;
    margin-left: 8px;
}
.desktop .casino-subheader .casino-shortcuts-tabs {
    flex-direction: row;
}
#root .casino-subheader .casino-shortcuts-tabs .casino-shortcut-tab:nth-child(2),
#root .casino-subheader .casino-shortcuts-tabs .casino-shortcut-tab:nth-child(3) {
    display: none;
}
.casino-subheader + .body {
    margin-top: 0;
}
.casino-container .games .casino-group .casino-title {
    background: var(--c-background-header);
    border-radius: 16px;
    color: white;
    margin-right: 1.5rem;
}
.casino-container .games .game {
    background-color: white;
    /*background-color: black;*/
    
}
.casino-container .games .game.fake-game {
    min-height:200px;
    position:relative;
    background-image:linear-gradient(to top, transparent, rgba(255,255,255,1));
   box-shadow:1px 1px 2px lightgrey,-1px -1px 2px lightgrey;
    border-radius:5px;
    opacity:1;
}
#root .casino-container .games .game.fake-game .game-name {
    color:lightgrey;
    margin:0;
}
#root .casino-container .games .game.fake-game .game-name::after {
    display:none;
}
.casino-container .games .game > app-casino-game,
.casino-container .games .game > app-casino-game > div{
    height: 100%
}

#root .mobile .casino-subheader .casino-shortcuts-tabs .window-tab.casino-shortcut-tab {
    margin-inline: 0;
}
.mobile .casino-subheader .casino-filter {
    /*margin: 0 16px 0 0;*/
    flex: 1;
    margin: 0 16px 0 8px;
    padding: 0;
}
.mobile .casino-subheader .casino-shortcuts {
    margin: 0;
}
.mobile .show-providers {
    display: flex;
}
.mobile .show-providers > div {
    background: var(--c-background-odds-active);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    flex: 1;
    font-weight: bold;
    justify-content: space-between;
    margin: 8px 16px 8px 8px;
    padding: 6px 6px 6px 12px;
}
.mobile .show-providers > div::after {
    /*background-color: white;*/
    background: url(/v1.431/r/images/site/icons/Arrow_Down.svg) center center / contain no-repeat;
    content: '';
    display: inline-flex;
    height: 20px;
    transition: all .25s;
    width: 20px;
}
.visible-providers-all .mobile.view-page-casino-all .show-providers > div::after,
.visible-providers-casino .mobile.view-page-casino .show-providers > div::after,
.visible-providers-bingo .mobile.view-page-casino-bingo .show-providers > div::after,
.visible-providers-cards .mobile.view-page-casino-cards .show-providers > div::after,
.visible-providers-livecasino .mobile.view-page-casino-live-casino .show-providers > div::after,
.visible-providers-oriental .mobile.view-page-casino-oriental .show-providers > div::after,
.visible-providers-poker .mobile.view-page-casino-poker .show-providers > div::after,
.visible-providers-prive .mobile.view-page-casino-prive .show-providers > div::after,
.visible-providers-roulettes .mobile.view-page-casino-roulettes .show-providers > div::after,
.visible-providers-scratch .mobile.view-page-casino-scratch .show-providers > div::after,
.visible-providers-slots .mobile.view-page-casino-slots .show-providers > div::after,
.visible-providers-featured .mobile.view-page-casino .show-providers > div::after {    /*,*/
/*.visible-providers .mobile .show-providers > div::after {*/
    transform: rotate(180deg);
}
#root .mobile .casino-container .games {
    padding: 8px;
}
.mobile .casino-container .brands-menu {
    height: 0;
    overflow: hidden;
}
.visible-providers-all .mobile.view-page-casino-all .casino-container .brands-menu,
.visible-providers-casino .mobile.view-page-casino .casino-container .brands-menu,
.visible-providers-bingo .mobile.view-page-casino-bingo .casino-container .brands-menu,
.visible-providers-cards .mobile.view-page-casino-cards .casino-container .brands-menu,
.visible-providers-livecasino .mobile.view-page-casino-live-casino .casino-container .brands-menu,
.visible-providers-oriental .mobile.view-page-casino-oriental .casino-container .brands-menu,
.visible-providers-poker .mobile.view-page-casino-poker .casino-container .brands-menu,
.visible-providers-prive .mobile.view-page-casino-prive .casino-container .brands-menu,
.visible-providers-roulettes .mobile.view-page-casino-roulettes .casino-container .brands-menu,
.visible-providers-scratch .mobile.view-page-casino-scratch .casino-container .brands-menu,
.visible-providers-slots .mobile.view-page-casino-slots .casino-container .brands-menu,
.visible-providers-featured .mobile.view-page-casino .casino-container .brands-menu {    /*,*/
/*.visible-providers .mobile .casino-container .brands-menu {*/
    height: auto;
}
.mobile .casino.crash .casino-container .brands-menu {
    height:auto;
    margin-top:16px;
}
/* Casino game hover effect */

#root .casino-page .casino-game {
    position: relative;
}
#root .casino-container .game .game-name {
    background-color: transparent;
    color: transparent;
    /*color: white;*/
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .25s;
    width: 100%;
}
#root .desktop .casino-container .game:hover .game-name {
    color: black;
}
#root .desktop .casino-container .games .game p:after {
    content: 'PLAY NOW';
    display: block;
    font-size: 24px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 20px;
    text-decoration: overline;
    white-space: pre;
    width: auto;
}
#root .desktop .casino-container .game-image:hover {
    filter: blur (2px);
    opacity: 0.7;
    transform: scale(1.05);
    transition: all 300ms ease-in-out;
}

.desktop .casino-header > app-widget-host {
    background-color: var(--c-background-header);
    padding-inline: 8px 16px;
}
#root .desktop .casino-header .casino-filter {
    margin: 0px;
    padding: 0px;
}

/* Aviator fix */

.mobile.view-page-aviator .casino-header {
    margin-top: 60px;
}

/* iOS menu scrolling background color issue  */

.mobile .casino-main-menu {
    background-color: var(--c-background-primary);
}

/* fix show more positioning */

.mobile app-casino-navigation {
    display: block;
    width: 100%;
}

/* DS - Casino iFrame */
.casino-iframe #game-iframe {
    height: calc(100vh - 182px)
}
.close-game-iframe {
    position:absolute;
    z-index:20;
    top:60px;
    height:42px;
    right:0;
    width:40px;
    font-size:0;
    background-color: var(--c-background-header);
    background-image: url(/v1.329/r/images/soccabet/icons/close-white.svg);
    padding:0;
    background-size:  24px;
    background-repeat:no-repeat;
    background-position:center;
}
#root .mobile ul.menu {
    padding-right: 40px
}
.mobile .casino-iframe + app-casino-games-desktop {
    display: none
}
/* DS - Overrides of existing code */
.mobile .casino-subheader > app-widget-host {
    padding-top: 0px;
}
.mobile .casino-subheader .casino-filter {
    margin-top: 16px;
}