.navbar-fixed-top .swiper-container{
        overflow: visible;
    }
    .o-live-logo {
        width: 68px;
        top: 3px;
        margin-left: -30px;
    }
    .nav-ul {
        margin: 5px 0 0 10px;
    }
    .game-icon.pointer{
        display: none;
    }
    html{
        height: auto;
        overflow-y: scroll!important;
        background: #000000;
    }
    html.is-active{
        background: #ededed;
    }
    body,
    .page-wrapper {
        background-color: transparent;
        background-image: none!important;
    }
    .page-wrapper {
        background-image: url(../../assets/img/lobby_bg.jpg?v=0001)!important;  
        padding-bottom: 65px;      
    }

    html.is-active .page-wrapper {
        background-image: none!important; 
        background: #ffffff;       
    }
    .page-wrapper:after {
        position:fixed;
        top:0;
        display:block;
        content: '';
        width:100%;
        height:3px;
        z-index: 2;
        animation: gradient 5s ease infinite;
        background: linear-gradient(-45deg, #ee7752, #a818de, #e73c7e, #e1b338, #1083bf, #ffffff, #b78846);
        background-size: 400% 400%;
    }
    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    } 
    .marquee {
        display: block;
        position: relative;
        top:0;
        height: 15px;
        letter-spacing: 0;
        color: #ffc61d;
        font-size: 14px;
        padding: 4px 0;
        margin-bottom: 10px;
        line-height: 1;
        background: rgba(50, 50, 50, .7);
        z-index: 9;
    }
    html.is-active .marquee {
        background: #f7f7f7;
        color: #0c756b;
    }
    .ui-widget.ui-widget-content,
    .ui-widget-header,
    .ui-widget-content{
        background: none;
        border: 0;
        padding: 0;
        text-align: center;
    }
    .ui-tabs .ui-tabs-nav {
        padding: 0;
        width: 100%;
    }
    .sidebar-btn {
        position: absolute;
        top: 3px;
        right: 0;
    }
    .sidebar {
        position: absolute;
    }
    .sub-nav-hover {
        left: 45px;
    }
    .sub-nav-check-area{
        position:fixed;
        top: 43px;
    }
    .logged-user-icon {
        display: inline-block;
    }
    .navbar-fixed-top {
        left: auto;
        right: auto;
        margin-top: 3px;
        background: linear-gradient(-220deg, rgb(0 194 255 / 80%) 0%, rgb(0, 0, 0, 0) 35%, rgb(0, 0, 0, 0) 68%, rgb(255 138 0 / 80%) 100%);
    }
    html.is-active .navbar-fixed-top {
        background: linear-gradient(-220deg, rgb(153 153 153 / 36%) 0%, rgb(0, 0, 0, 0) 35%, rgb(0, 0, 0, 0) 68%, rgb(153 153 153 / 36%) 100%);
    }

    html.is-active .nav-ul li label span,
    html.is-active .top-tabs .nav-pills > li {
        color: #707070;
    }

    #lobby-tabs-1 ul.lobby-game-list.funny li{
        width: calc(50% - 18px);
        margin: 0 2.5px 5px 2.5px;        
    }
    #lobby-tabs-1 ul.lobby-game-list.funny.all-game-tab li,
    #lobby-tabs-1 ul.lobby-game-list.funny.games li{
        width: calc(33.3% - 12px);
        margin: 0 1px 5px 1px;   
        text-align: center;     
    }
    /*#lobby-tabs-1 ul.lobby-game-list.funny.games.fix li:first-child{
        width: calc(100% - 25px);       
    }*/
    #lobby-tabs-1 ul.lobby-game-list.funny.games.live li:first-child,
    #lobby-tabs-1 ul.lobby-game-list.funny.games.live li:last-child{
        width: calc(100% - 25px); 
    }

    @media screen and (min-width: 480px) {
        .navbar-fixed-top {
            z-index: 1;
            position: relative;
        }
    }
    ul.lobby-game-list li{
        width: calc(33.3% - 10px);
        border-radius: 10px;
        margin: 0 2.5px 7px 2.5px;
        vertical-align: top;
    }
    ul.lobby-game-list.funny{
        margin: 0 auto;
    }
    ul.lobby-game-list.funny.all-game-tab,
    ul.lobby-game-list.funny.games{
        margin: 10px auto 0 auto;
    }
    html.is-active ul.lobby-game-list.funny li{
        width: calc(50% - 14px);
        margin: 0 2.5px 5px 0;
    }
    html.is-active ul.lobby-game-list.funny.games.three li:last-child{
        width: calc(100% - 20px);
        margin: 0;
    }
    ul.lobby-game-list.funny.games.three li:last-child{
        width: calc(100% - 27px);
        margin: 0 0 5px 0;
    }

    ul.lobby-game-list.funny li{
        width: calc(50% - 18px);
        margin: 0 3px 10px 3px;
    }
    ul.lobby-game-list.funny.all-game-tab{
        padding: 0 5px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    html.is-active ul.lobby-game-list.funny.all-game-tab li{
        width: calc(50% - 10px);
        margin: 0 auto 5px auto;
        border: 0;
    }
    ul.lobby-game-list.funny.all-game-tab li{
        width: calc(50% - 15px);
        margin: 0 3px 12px 3px;
        border: 0;
    }
    html.is-active ul.lobby-game-list.funny.all-game-tab li:nth-child(5n-2) {
        width: calc(100% - 12px);
    }
    ul.lobby-game-list.funny.all-game-tab li:nth-child(5n-2) {
        width: calc(100% - 20px);
    }
    ul.lobby-game-list.funny.all-game-tab li img {
        border-radius: 22px;
    }

    ul.lobby-game-list li img{
        display: block;
        width: 100%;
        border-radius: 30px;
        margin: 0;
    }
    ul.lobby-game-list.funny li img{
        border-radius: 16px;
    }
    ul.lobby-game-list.game {
        padding: 0 10px;
        margin: 0;
    }
    ul.lobby-game-list.game li {
        width: calc(25% - 10px);
        margin: 0 2.5px 7px 2.5px;
        vertical-align: top;
    }
    ul.lobby-game-list.game li span.game-title{
        color: #cccccc;
        font-size: 14px;
        height: 16px;
        overflow: hidden;
        display: block;
    }
    html.is-active ul.lobby-game-list.game li span.game-title{
        color: #222222;
    }
    #lobby-tabs-6 ul.lobby-game-list.game li span.game-title{
        color: #ffffff;
    }
    html.is-active #lobby-tabs-6 ul.lobby-game-list.game li span.game-title{
        color: #222222;
    }
    ul.lobby-game-list.game li img{
        border-radius: 16px;
        margin-bottom: 5px;
        outline: 6px solid #222;
        outline-offset: -6px;
    }
    html.is-active ul.lobby-game-list.game li img{
        outline: 6px solid #e9e9e9;
    }
    ul.lobby-game-list.new-lobby{
        column-width: 290px;
        -webkit-column-width: 290px;
        -moz-column-width: 290px;
        -o-column-width: 290px;
        column-gap: 10px;
        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        -o-column-gap: 10px;
        padding: 0 10px;
        margin: 10px auto 0 auto;
    }
    ul.lobby-game-list.new-lobby li{
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        column-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        page-break-inside: avoid;
        -webkit-page-break-inside: avoid;
        -moz-page-break-inside: avoid;
        -o-page-break-inside: avoid;
        break-inside: avoid;
        -webkit-break-inside: avoid;
        -moz-break-inside: avoid;
        -o-break-inside: avoid;
        width: unset;
        margin: 0 0 10px 0;  
    }
    ul.lobby-game-list.first{
        padding: 0;
        margin: 15px auto 0 auto;
    } 
    ul.lobby-game-list.last{
        padding: 0;
        margin: 0 auto;
    }   
    ul.lobby-game-list.first li,  
    ul.lobby-game-list.last li{
        position: relative;
        display: inline-block;
        width: 100%;
        margin: 0;
        padding: 0 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-radius: 15px;
    } 
    ul.lobby-game-list.last li,
    ul.lobby-game-list.first li{
/*       display: none;*/
    }
    ul.lobby-game-list.last li:last-child,
    ul.lobby-game-list.first li:first-child{
       display: block;
    }  
    ul.lobby-game-list.first li:first-child{
       margin-bottom: 10px;
    } 
    ul.lobby-game-list.first li,
    ul.lobby-game-list.first li img,   
    ul.lobby-game-list.last li,
    ul.lobby-game-list.last li img,
    ul.lobby-game-list.new-lobby li,
    ul.lobby-game-list.new-lobby li img{
        border-radius: 15px;
    }
    ul.lobby-game-list.first li a.game-disable span.bg,
    ul.lobby-game-list.last li a.game-disable span.bg,
    ul.lobby-game-list.new-lobby li a.game-disable span.bg{
        height: calc(100% + 1px);
        border-radius: 15px;
    }
    ul.lobby-game-list.first li a.game-disable span.bg,
    ul.lobby-game-list.last li a.game-disable span.bg{
        width: calc(100% - 20px);
    }
    ul.lobby-game-list.first li a.game-disable span.note,
    ul.lobby-game-list.last li a.game-disable span.note,
    ul.lobby-game-list.new-lobby li a.game-disable span.note {
        top: calc(50% - 40px);
    }
    @media screen and (max-width: 768px){
        ul.lobby-game-list.first li a.game-disable span.note,
        ul.lobby-game-list.last li a.game-disable span.note,
        ul.lobby-game-list.new-lobby li a.game-disable span.note{
            top: calc(50% - 20px);
            font-size: 14px;
        }
    }
    @media screen and (max-width: 640px) {
        .page-wrapper {
            background-image:none!important;        
        }
        ul.lobby-game-list.first{
            margin: 10px auto 0 auto;
        } 
        ul.lobby-game-list.new-lobby{
            column-width: 180px;
            -webkit-column-width: 180px;
            -moz-column-width: 180px;
            -o-column-width: 180px;
            margin: 5px auto 0 auto;
            column-gap: 6px;
            -webkit-column-gap: 6px;
            -moz-column-gap: 6px;
            -o-column-gap: 6px;
        }
        ul.lobby-game-list.first li,  
        ul.lobby-game-list.last li,
        ul.lobby-game-list.first li img,
        ul.lobby-game-list.last li img,
        ul.lobby-game-list.new-lobby li,
        ul.lobby-game-list.new-lobby li img,
        ul.lobby-game-list.first li a.game-disable span.bg,
        ul.lobby-game-list.last li a.game-disable span.bg,
        ul.lobby-game-list.new-lobby li a.game-disable span.bg {
            border-radius: 5px;
        }
        ul.lobby-game-list.new-lobby li{
            margin: 0 0 3px 0;  
        }
    }
    .video-bg{
        display: block;    
        width: 100%;
        height: inherit;
        margin: 0 auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        opacity: .5;
    }  
    html.is-active .video-bg{
        display: none;    
    }  
    @media screen and (min-width: 640px) {
        .video-bg{
            display: none;
        }
        .ui-tabs .ui-tabs-nav{
            padding: 0 0 0 10px;
            max-width: 768px;
        }
        .ui-tabs .ui-tabs-nav li {
            margin: 0 5px;
            width: calc(16% - 11px);
        }
    }
    ul#category-nav{
        display: block;
        width: 100%;
        max-width: 768px;
        margin: 0 0 10px 0;
        padding: 0 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    ul#category-nav li{
        display: inline-block;
        width: calc(16.6% - 3px);
        text-align: center;
    }
    ul#category-nav li a{
        display: block;
        padding: 10px 0;
        font-size: 15px;
        border-radius: 15px;
    }
    ul#category-nav li a{
        background: linear-gradient(320deg, #040a33, #2bd0d1);
    }
    ul#category-nav li.current a{
        background: linear-gradient(320deg, #dd5825, #fff23e) !important;
    }

    html.is-active ul#category-nav li a{
        background: linear-gradient(320deg, #00a4c9, #91ff77);
    }
    html.is-active ul#category-nav li.current a{
        background: linear-gradient(320deg, #ffc863, #ffe69d) !important;
    }
    
    ul#category-nav li a, 
    ul#category-nav li a:link{
        color: #ffffff;
    }
    html.is-active ul#category-nav li a, 
    html.is-active ul#category-nav li a:link{
        text-shadow: 1px 1px 6px rgba(0, 0, 0, .6); 
    }
    .ui-state-active a, 
    .ui-state-active a:link{
        color: yellow;  
        text-shadow: 1px 1px 6px rgba(0, 0, 0, .6);   
    } 
    html.is-active .ui-state-active a, 
    html.is-active .ui-state-active a:link{
        text-shadow: 1px 1px 6px #954c19;   
    } 
    ul.lobby-type-list{
        display: block;
        text-align: left;
        padding: 0 0 0 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    ul.lobby-type-list li{
        display: inline-block;
        width: calc(25% - 19px);
        margin: 0 15px 10px 0;
        text-align: center;
    }
    ul.lobby-type-list.live li:nth-child(1),
    ul.lobby-type-list.live li:nth-child(2),
    ul.lobby-type-list.live li:nth-child(3){
        width: calc(33.3% - 18px);
    }
    .overflow{
        width: 100%;
        height: 250px;
        padding: 0 10px;
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }  
    .overflow ul.lobby-type-list{
        width: 750px;
    }
    .overflow ul.lobby-game-list.game{
        display: inline-block;
        width: 3730px;
        height: 220px;
        padding: 0;
        text-align: left;
    }
    .overflow ul.lobby-type-list li{
        width: 70px;
        margin: 0 10px 10px 0;
    }
    .overflow ul.lobby-game-list.game li{
        width: 80px;
        margin: 0 5px 8px 0;
        text-align: center;
    }
    ul.lobby-game-list.sports{
        text-align: left;
        margin: 5px auto;
        padding: 0 3px 0 13px;
    }
    ul.lobby-game-list.sports i{
        color: #000;
        font-size: 60px;
    }
    html.is-active ul.lobby-game-list.sports li{
        position: relative;
        margin: 0 5px 7px 0;
        width: calc(50% - 10px);
    }
    ul.lobby-game-list.sports li{
        position: relative;
        width: calc(50% - 10px);
        margin: 0 7px 12px 0;
    }
    html.is-active ul.lobby-game-list.sports.zoom li:nth-child(5n-2) {
        width: calc(100% - 11px);
    }
    ul.lobby-game-list.sports.zoom li:nth-child(5n-2) {
        width: calc(100% - 10px);
    }
    ul.lobby-game-list.sports li img{
        border-radius: 12px;
    }
    ul.lobby-game-list.sports li a label {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% - 13.5px);
        background: rgb(39 67 115 / 75%);
        text-shadow: 1px 1px 1px rgb(0 0 0 / 100%);
        color: #ffffff;
        font-size: 15px;
        width: auto;
        border-radius: 16px;
        padding: 4px 7px;
        display: inline-table;
        margin: 0 auto;
    }
    html.is-active ul.lobby-game-list.sports li a label {
        background: rgb(121 121 121 / 63%);
    }


    ul.lobby-game-list.sports li img{
        border-radius: 10px;
        background-color: rgb(0, 0, 0 / 1.0);
    }
    ul.lobby-game-list.sports li a label {
        left: 6px;
        right: auto;
        top: 6px;
        padding: 6px 10px;
        display: inline;
        font-size: 18px;
    }
    #lobby-tabs-1 ul.lobby-game-list.sports li a label {
        position: relative;
        left: 0;
        right: 0;
        top: auto;
        bottom:0;
        padding: 6px 0;
        display: block;
        font-size: 16px;
        background: transparent;
        color: #ffffff;
        text-shadow: 1px 1px 1px rgb(0 0 0 / 0%);
    }
    html.is-active #lobby-tabs-1 ul.lobby-game-list.sports li a label {
        color: #222222;
    }
    #lobby-tabs-1 ul.lobby-game-list.sports li img {
        border-radius: 30px;        
        background: linear-gradient(320deg, #1e1e1e, #c1c1c1, #ffffff);
    }
    html.is-active #lobby-tabs-1 ul.lobby-game-list.sports li img {
        background: #f5f5f5;
        box-shadow: rgba(0, 0, 0, 0) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0) 0px 2px 1px, rgba(0, 0, 0, 0) 0px 4px 2px, rgba(0, 0, 0, 0) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }

@media screen and (min-width: 640px) {    
    ul.lobby-type-list.live li:nth-child(1), 
    ul.lobby-type-list.live li:nth-child(2),
    ul.lobby-type-list.live li:nth-child(3) {
        width: calc(33.3% - 30px);
    }
    .overflow ul.lobby-game-list.game li,
    .overflow ul.lobby-type-list{
        width: 900px;
    }
    .overflow{
        height: 255px;
    }
    .overflow ul.lobby-game-list.game li{
        width: calc(80px - 5px);
        margin: 0 15px 10px 0;
    }  
    .overflow ul.lobby-type-list li{
        width: calc(9% - 5px);
        margin: 0 15px 10px 0;
    }
    .overflow ul.lobby-game-list.game li{
        width: 80px;
        margin: 0 5px 8px 0;
        text-align: center;
    }

}   
@media screen and (max-width: 480px) {
    .overflow ul.lobby-type-list{
        width: 730px;
    }
    ul.lobby-game-list.game li img{
        border-radius: 10px;
        outline: 3px solid #000000;
        outline-offset: -3px;
    }
    html.is-active ul.lobby-game-list.game li img{
        outline: 3px solid #dfdfdf;
    }
    .overflow{
        height: 230px;
    }  
    .ui-tabs #lobby-tabs-1.ui-tabs-panel {
        padding: 5px 0 0 0;
    }
    .overflow ul.lobby-type-list li {
        margin: 0 1.5vw 5px 0
    }
    ul.lobby-type-list li span {
        font-size: 14px;
    }
    .ui-tabs #lobby-tabs-1.ui-tabs-panel ul.lobby-type-list li img{
        border: 0;
    }
}  
    ul.lobby-game-list.funny.games b,
    ul.lobby-type-list li span{
        display: block;
        font-size: 15px;
        color: #ffffff;
        font-weight: normal;
        margin: 10px auto 5px auto;
    }
    html.is-active ul.lobby-game-list.funny.games b,
    html.is-active ul.lobby-type-list li span{
        color: #707070;
    }

    ul.lobby-type-list li img{
        display: block;
        width: 100%;
        border-radius: 100%;
        border: 4px solid rgb(134 240 238 / 30%);
    }

    html.is-active ul.lobby-type-list li img{
        border: 4px solid #f1f1f1;
    }

    ul.lobby-type-list li img{
        border: 4px solid rgb(134 240 238 / 30%);
    }

    ul.lobby-type-list.live li:nth-child(1) img, 
    ul.lobby-type-list.live li:nth-child(2) img,
    ul.lobby-type-list.live li:nth-child(3) img{
        border-radius: 30px;
    }

    @media screen and (max-width: 414px) {
        ul.lobby-game-list.new-lobby{
            column-width: 150px;
            -webkit-column-width: 150px;
            -moz-column-width: 150px;
            -o-column-width: 150px;
        }
    }
    @media screen and (max-width: 360px) {
        ul.lobby-type-list li span {
            font-size: 3.5vw;
        }
    }
    @media screen and (max-width: 320px) {
        ul.lobby-game-list.new-lobby{
            column-width: 120px;
            -webkit-column-width: 120px;
            -moz-column-width: 120px;
            -o-column-width: 120px;
        }
        .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
            font-size: 12px;
        }
    }
    .video-lobby{
        display: none;
        height: inherit;
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    ul.lobby-game-list {
        z-index: 1;
        position: relative;
        margin: 15px auto 6px auto;
    }
    #content{
        min-height: 100vh;
    }  

@media screen and (min-width: 480px) {

  body{
    position: relative;
  }
  body:before{
    position: absolute;
    content: '';
    width: 20%;
    height: 100%;
  }
}


  body {
    position: relative;
  }
  body:before{
    position: fixed;
    content: '';
    width: 100%;
    height: 35%;
  }
  body:before{
    bottom: 0;
    background: -moz-linear-gradient(top, rgb(0, 0, 0, 0) 0%,#000000 60%,#000000 100%);
    background: -webkit-linear-gradient(top, rgb(0, 0, 0, 0) 0%,#000000 60%,#000000 100%);
    background: linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%,#000000 60%,#000000 100%);
  }
  html.is-active body:before{
    display: none;
  }

.only-one img{
    display: block;
    width: calc(100% - 30px);
    border-radius: 16px;
    border: 5px solid rgb(70 112 185 / 70%);
    margin: 8px auto;
}
html.is-active .only-one img{
    border: 5px solid #dddddd;
} 
.only-one img.race-m{
    border-radius: 20px;
}

@media screen and (min-width: 640px) {
    ul.lobby-game-list.sports {
        margin: 17px auto;
    }
    .only-one img {
        width: calc(100% - 35px);
    }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background: linear-gradient(320deg, #1a1a1a, #818181);
    }
    .ui-tabs .ui-tabs-nav li {
        font-size: 18px;
    }
    ul.lobby-game-list li {
        width: calc(33.3% - 20px);
        margin: 0 5px 12px 5px;
    }
    ul.lobby-game-list.funny{
        text-align: left;
    }
    ul.lobby-game-list.funny li{
        margin: 0 22px 0 0;
        width: calc(50% - 32px);
    }
    ul.lobby-game-list.funny.games.three li {
        width: calc(33.3% - 20px);
        margin: 0 5px 12px 5px;
        text-align: center;
    }

    ul.lobby-game-list.funny li img{
        border-radius: 30px;
        border: 3px solid rgb(100, 100, 101);
    }
    html.is-active ul.lobby-game-list.funny li img{
        border: 6px solid #ffffff;
    }
    ul.lobby-game-list.sports {
        margin: 10px 0 0 0;
        padding: 0 3px 0 0;
        text-align: center;
    }
    ul.lobby-game-list.sports li{
        margin: 0 10px 12px 0;
    }
    ul.lobby-game-list.sports li {
        width: calc(50% - 20px);
    }
    ul.lobby-game-list.sports li img{
        border-radius: 20px;
        border: 4px solid #333333;
    }
    html.is-active ul.lobby-game-list.sports li img{
        border: 4px solid #ffffff;
    }
    .nav-ul {
        margin: 4px 0 0 25px;
    }
    .ui-tabs .ui-tabs-nav li {
        border-radius: 6px;
    }
    .sidebar-btn {
        right: 10px;
    }
    .only-one  {
        text-align: center;
    }
    .only-one img {
        border-radius: 30px;
        border: 6px solid rgb(100, 100, 101);
        margin: 10px auto;
    }

    ul.lobby-type-list li {
        width: calc(25% - 30px);
        margin: 0 25px 10px 0;
    }
    ul.lobby-type-list li img {
        border: 4px solid rgb(71, 71, 71);
    }
    html.is-active ul.lobby-type-list li img {
        border: 4px solid #f1f1f1;
    }
    #content{
        padding: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    } 
}
ul.lobby-game-list.funny li img.race-m,
.only-one img.race-m{
    display: none;
}
ul.lobby-game-list.funny.all-game-tab li img.race-m{
    display: block;
}



ul.lobby-game-list.funny li span{
    width: calc(100% - 10px);
    padding: 5px;
    background: rgb(51 51 51 / 70%);
    color: #ffffff;
    font-size: 18px;
    display: block;
    border-radius: 0 0 16px 16px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
}
html.is-active ul.lobby-game-list.funny li span{
    background: rgb(145 145 145 / 85%);
}


@media screen and (max-width: 640px) {
    #lobby-tabs-1 ul.lobby-game-list.sports li {
        width: calc(33.3% - 9px);
        padding: 8px 8px 0 8px;
        margin: 0 5px 0 0;
    }
    ul.lobby-game-list.funny li span {
        background: rgb(58 92 151 / 80%);
    }
    #lobby-tabs-1 ul.lobby-game-list.funny li span {
        background: rgb(39 67 115 / 85%);
        font-size: 16px;
    }
    html.is-active #lobby-tabs-1 ul.lobby-game-list.funny li span {
        background: rgb(145 145 145 / 85%);
    } 
    ul.lobby-game-list.funny li img.race-m,
    .only-one img.race-m{
        display: block;
    }
    ul.lobby-game-list.funny li img.race-d,
    .only-one img.race-d{
        display: none;
    }
    ul.lobby-game-list.funny {
        padding: 0;
        text-align: center;
    }
}
@media screen and (min-width: 640px) {
    ul.lobby-game-list.funny li span{
        border-radius: 0 0 24px 24px;
        text-align: center;
        left: 6px;
        bottom: 6px;
    }
}
.games-box,
.sports-box{
    display: block;
    margin: 10px auto;
    width: calc(100% - 20px);
    border-radius: 15px;
    padding: 5px 0;
    font-size: 21px;
    font-weight: bold;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: rgb(46 85 151 / 90%);
    color: rgb(142 218 255 / 100%);
    text-align: center;
}
html.is-active .games-box,
html.is-active .sports-box{
    background: linear-gradient(320deg, #00a4c9, #91ff77);
    color: #ffffff;
}

.games-box{
    margin: 5px auto 10px auto;
    background: rgb(40 151 142 / 90%);
    color: rgb(182 255 198);
}
@media screen and (min-width: 640px) {
    .games-box, .sports-box {
        width: calc(100% - 28px);
        margin: 10px auto;
        background: rgb(117 117 117 / 60%);
        color: #ffffff;
    }
}
.mode-icon{
    position: absolute;
    top: 0;
    right: 40px;
    border: 0;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    display: block;
    z-index: 9997;
    width: 38px;
    height: 40px;
    outline: 0;
}
.mode-icon:after {
    position: absolute;
    left: 12px;
    top: 4px;
    display: inline-block;
    content: "\f186";
    color: rgb(255, 255, 255,.6);
    font-family: 'FontAwesome';
    font-size: 29px;
    z-index: 9997;
}
.mode-icon.is-active:after{
    content: '☀';
    position:absolute;
    left: 8px;
    top: 0px;
    display: inline-block;
    font-size:33px;
    color: rgb(255 191 0 / 96%);
}

html.is-active .menu-stripes {
    background-color: #707070;
}

html.is-active .mode-icon:after {
    color: #cccccc;
}
@media screen and (min-width: 640px) {
    .mode-icon{
        right: 47px;
    }
}
.mute-open{
    border: 2px solid #797979;
    border-radius: 26px;
    position: absolute;
    top: 6px;
    right: 85px;
    border: 0;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
    display: block;
    z-index: 9997;
    width: 30px;
    height: 35px;
    outline: 0;
}
.mute-open span{
    display: inline-block;
    vertical-align: middle;
}
.mute-open i{
    display: inline-block;
    vertical-align: middle;
    color: #999999;
    font-size: 27px;
}
.music{
    position: relative;
    border: 0;
    cursor: pointer;
    display: block;
    z-index: 9997;
    width: 38px;
    height: 40px;
    outline: 0;
}
.music:after {
    position: absolute;
    left: 7px;
    top: 1px;
    display: inline-block;
    content: "\f130";
    color: rgb(255, 255, 255, .4);
    font-family: 'FontAwesome';
    font-size: 26px;
    z-index: 9997;
    font-style: normal;
}
.music.is-active:after {
    position: absolute;
    left: 5px;
    top: 1px;
    display: inline-block;
    content: "\f131";
    color: rgb(255, 255, 255, .4);
    font-family: 'FontAwesome';
    font-size: 26px;
    z-index: 9997;
    font-style: normal;
}
html.is-active .music.is-active:after,
html.is-active .music:after{
    color: rgb(0, 0, 0, .15);
}
@media screen and (max-width: 640px) {
    .mute-open{
        right: 75px;
    }
}
.fix_top_bar {    
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;   
}
.bar-placeholder {
    position: relative;
    z-index: 9995;
    margin-bottom: 2.5%;
}
.placeholder {
    display: block;
    margin-top: -90px;
    height: 90px;
}  
.sub-nav-hover {
    position: relative;
    top: 3px;
    left: 8px;
    display: inline-block;
}
html.is-active .fixed-footer{
    position: fixed;
    left: auto;
    right: auto;
    bottom: 0;
    display: block;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    position: fixed;
    background: rgba(255, 255, 255, .85);
    border-top: 1px solid rgb(200,200,200, .5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 9996;
}
.fixed-footer{
    position: fixed;
    left: auto;
    right: auto;
    bottom: 0;
    display: block;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    position: fixed;
    background: rgba(0, 0, 0, .3);
    border-top: 1px solid rgb(100,100,100, .5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 9998;
}
.fixed-footer ul{
    display: block;
    margin: 0;
    padding: 5px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;  
    text-align: center;  
}
.fixed-footer ul li{
    display: inline-block;
    width: calc(20% - 5px);
    text-align: center;
}
html.is-active .fixed-footer ul li span{
    display: block;
    font-size: 12px;
    color: #222222;
}
.fixed-footer ul li span{
    display: block;
    font-size: 12px;
    color: #ffffff;
}
img.tool-icon{
    display: block;
    width: 100%;
    max-width: 40px;
    margin: 0 auto;
}

.main-pop_overlay.fix-height{
    position: fixed;
    height: 100%;
    z-index: 10001;
    background-color: rgba(50, 50, 50, .8);
}
.main-popup-body.center{
    position: fixed;
    top: 20%;
    padding: 30px;
}
ul.mainten-list li{
    display: block;
    font-size: 16px;
    color: #707070;
    margin-bottom: 10px;
}

.maintenance-icon{
    display: block;
    width: 100%;
    max-width: 97px;
    margin: 0 auto;
}

.maintenance-pop-title {
    display: block;
    width: 100%;
    margin: 15px 0;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 2px;
    text-align: center;
}

.member-signin{
    position: absolute;
    right: 5px;
    top: 4px;
    display: inline-block;
    padding: 7px 12px;
    color: #ffffff;
    font-size: 15px;
    border-radius: 10px;
    background: linear-gradient(320deg, #dd5825, #fff23e);    
    text-shadow: 1px 1px 6px rgba(0, 0, 0, .6);
}

html.is-active .member-signin{
    background: linear-gradient(320deg, #750e97, #fc92ff);     
}


.gold{
    position: relative;
}
.gold:after{
    position: absolute;
    content: '';
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    top: -3px;
    left: -3px;
    background: linear-gradient(to left, #444444, #aaaaaa, #444444);
    border-radius: 12px;
    z-index: -1;
}
html.is-active .gold:after{
    display: none;
}
@media screen and (min-width: 640px) {
    .gold:after{
        display: none;
    }
}