body{
    background-color: #1C1F24;
    /*background-image: url("../img/bg_gradient.svg");*/
    /*background-size: cover;*/
    color: #0098EA;
    text-align: center;
    font-family: "Inter", "Turret Road", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    margin: 0;
}
.green, .blue{
    color: #0098EA;
}
.white{
    color: #fff;
}
.gray{
    color: #CACACA;
}
.uppercase{
    text-transform: uppercase;
}
.bold{
    font-weight: 700;
}
button, #blockedBtn, .button{
    background-color: #0098EA;
    border-radius: 10px;
    line-height: 40px;
    border: 0;
    width: 300px;
    font-size: 1em;
    color: #fff;
    cursor: pointer;
    font-family:  "Inter", "Poppins", "Turret Road", "Ubuntu Mono", sans-serif;
    font-weight: 400;
    display: inline-block;
}
button[disabled]{
    background: #CACACA;
}
button.invert{
    border: 1px solid #0098EA;
    background-color: transparent;
}
.button.silver{
    background-color: #22252A;
}
#grind{
    max-width: 340px;
    margin: 0 auto;
}
.grindFinalHeader{
    font-size: 63px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}
.grindFinalText{
    font-size: 16px;
    margin: 20px 0;
}
#page div.button img{
    height: 25px;
    vertical-align: middle;
    margin: 0 0 6px 0;
}
#page div.button img.video-icon{
    height: 20px;
    vertical-align: middle;
    margin: 0;
}
tc-root button{
    border-radius: 10px !important;
}
#loading, #blocked{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
    background: #1C1F24;
}
#page, #welcome, #invite, #earn, #blocked, #welcome-friends, #game, #leaderboard, #nft-purchase,
#nft-payment, #boost-page, #nft-payment-pay-btn, #grind-hour-boost, #list-of-friends-layover,
#profile, #balance-credits, #alpha-warning, #game-list, #game1, #game2, #game3, #tutorial-video, #welcome-slider{ /* #balance, #grind, #invite */
    display: none;
}
#earn, #leaderboard, #invite, #game2, #game3, #game-2d{
    max-width: 700px;
    margin: 0 auto;
}
#header-bar{
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    background: rgba(40, 43, 48, 0.5);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10;
    font-weight: 700;
}

#header-bar img{
    height: 26px;
}
#header-bar div img{
    height: 22px;
    margin-right: 5px;
}
#header-bar div#nft-current-head img{
    height: 35px;
    margin: 0;
}
#header-bar .mystery-box, #header-bar .balance{
    background: #1F1F1F;
    height: 24px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 3px 10px;
}
#page{
    padding-top: 50px;
    padding-bottom: 76px;
}
#home, #boost-page{
    background-image: url("../img/background-gradient.svg");
    background-size: cover;
    height: calc(100vh - 126px);
    box-sizing: border-box;
    padding-top: 30px;
    background-position-y: -30px;
}
#nft-purchase{
    background-image: url("../img/background-gradient.svg");
}
#status-bar{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    background-color: #0098EA;
    transition: height 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#status-bar.active{
    height: 60px;
}
#status-bar.active.error{
    background-color: #850500;
}
#status-bar-text{
    padding: 0 10px;
    display: block;
    color: #ffffff;
}
#welcome, #blockedWrapper, #welcome-friends{
    padding: 20px;
    margin: 80px 20px;
    border: 1px solid #0098EA;
    border-radius: 10px;
}
#welcomeBtn, #grindBtn, #blockedBtn, #welcome-friendsBtn, #blockedCheckBtn{
    width: 200px;
}
#balance{
    /*margin-top: 30px;*/
}
#balance p{
    margin: 0;
}
#balance span, #welcome-friends span{
    font-size: 40px;
    vertical-align: middle;
}
#balance img, #welcome-friends img{
    height: 70px;
    vertical-align: middle;
}
#balance .mystery-box img{
    height: 45px;
}
#premium-header{
    text-transform: uppercase;
}
#premium-header img{
    height: 30px;
    padding-right: 6px;
}
#premium-header span{
    font-size: 12px;
    color: #fff;
}
#premium-header .premiumBtn{
    width: auto;
    padding: 0 30px;
    /*font-size: 0.7em;*/
    /*line-height: 30px;*/
    margin-top: 5px;
    background: rgb(226,190,32);
    background: linear-gradient(0deg, rgba(0,152,234,1) 0%, rgba(226,190,32,1) 100%);
    border-radius: 20px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
#grindBoostBtn{
    width: auto;
    padding: 0 20px;
    line-height: 30px;
    font-size: 0.7em;
    background: rgb(236,46,46);
    background: linear-gradient(90deg, rgba(236,46,46,1) 0%, rgba(62,174,219,1) 100%);
    margin: 3px 0 15px 0;
}
.nft-color-1{
    color: #B87333 !important;
}
.nft-color-2{
    color: #A9A9A9 !important;
}
.nft-color-3{
    color: #FFC300 !important;
}
#nft-purchase-content{
}
.nft-descr{
    display: flex;
    border: 2px solid #0098EA;
    border-radius: 20px;
    margin: 0 3% 10px;
    flex-wrap: wrap;
}
.nft-descr .nft-descr-img{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3%;
}
.nft-descr .nft-descr-img img{
    width: 100%;
}
.nft-descr .nft-descr-text{
    width: 69%;
    text-align: left;
    margin: 10px 0;
}
.nft-descr .nft-descr-text p{
    font-size: 12px;
    margin-bottom: 0;
    min-height: 60px;
}
.nft-descr .nft-descr-btn{
    width: 100%;
    margin-bottom: 10px;
}
.nft-descr-1{
    border-color: #B87333;
}
.nft-descr-2{
    border-color: #A9A9A9;
}
.nft-descr-3{
    border-color: #FFC300;
}

#boost-page img{
    height: 130px;
    margin-top: 10px;
}
#boost-page p{
    padding: 0 60px;
}

#grind{
    margin-top: 40px;
}
#grind-active .gray{
    margin-bottom: 5px;
}
#grind #grind-amount{
    font-size: 35px;
    vertical-align: middle;
}
#grind-active > .white{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 20px 0;
}
#grind img{
    height: 38px;
    vertical-align: middle;
}
#grind .red{
    color: #FF5656;
}
#grind #home-incomplete-multiplier{
    font-size: 70px;
    font-weight: 800;
}
.invite-bar{
    border-radius: 10px;
    background: #282B30;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
}
.invite-bar img{
    height: 40px;
    margin: 10px 0;
}
.invite-bar img.invite-bar-icon{
    height: 50px;
    margin: 0;
}
.invite-bar span{
    margin: 0 20px;
}
#invite-url{
    font-size: 10px;
}
#affiliate-wrapper, #base-address-wrapper{
    margin: 10px;
    border: 1px solid #0098EA;
    border-radius: 10px;
    padding-bottom: 10px;
}
#base-address-wrapper{
    margin: 20px auto;
    max-width: 350px;
    padding: 10px;
}
#invite-list-of{
    cursor: pointer;
}
#list-of-friends-layover{
    position: absolute;
    width: 100%;
}
#list-of-friends{
    border: 1px solid #0098EA;
    border-radius: 10px;
    padding: 5px 20px;
    background: #282B30;
    margin: 0 60px;
}
#menu-bar{
    position: fixed;
    bottom: 4px;
    color: #ffffff;
    font-size: 10px;
    background: #282B30;
    border-radius: 10px;
    padding-bottom: 6px;
    padding-top: 3px;
    width: calc(100% - 20px);
    margin: 0 10px;
    font-weight: 500;
}

#menu-bar div.menu-items{
    display: flex;
    align-items: end;
    justify-content: space-evenly;
}
#menu-bar img{
    height: 50px;
}
#menu-friends img{
    height: 42px;
    padding-bottom: 4px;
}
#menu-grinding img{
    height: 38px;
    padding-bottom: 4px;
}
#menu-earn img{
    height: 36px;
    margin-bottom: 4px;
}
#menu-leaderboard img{
    height: 36px;
    margin-bottom: 5px;
}

/**** EARN ******/
#earn-list p{
    text-align: left;
    padding-left: 10px;
}
#earn ul, #leaderboard ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
#earn ul li, #leaderboard ul li{
    background: #282B30;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#earn ul img{
    height: 50px;
}
#earn ul img.icon{
    height: 50px;
}
#earn ul li .earn-todo{
    display: flex;
    align-items: center;
    justify-content: center;
}
#earn ul li.done .earn-todo, #earn ul li .earn-done{
    display: none;
}
#earn ul li.done{
    cursor: auto;
}
#earn ul li.done .earn-done{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
}
#earn ul li.done .earn-done img{
    height: 25px;
}
#earn ul li span.gray{
    display: inline-block;
    width: 130px;
    padding: 0 10px;
}
#earn ul li span.green{
    display: inline-block;
    width: 80px;
}
#earn-layover, #game #game-result-layover, #game2 #game2-result-layover, #game3 #game3-result-layover{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #1C1F24;
}
#earn-layover-info, #game #game-result-layover-info, #game2 #game2-result-layover-info, #game3 #game3-result-layover-info{
    padding: 20px;
    margin: 80px 20px;
    border: 1px solid #0098EA;
    border-radius: 10px;
    max-width: 700px;
    min-width: 250px;
}
#earn-layover-info img, #game-result-layover-info img, #game2 #game2-result-layover-info img, #game3 #game3-result-layover-info img{
    height: 94px;
    vertical-align: middle;
}
#earn-layover-info span, #game-result-layover-info span, #game2 #game2-result-layover-info span, #game3 #game3-result-layover-info span{
    font-size: 46px;
    vertical-align: middle;
}
#game2 #game2-result-layover-info p{
    color: #ffffff;
    font-size: 30px;
}
#game3 #game3-result-layover-info{
    display: flex;
    flex-flow: column;
    align-items: center;
}
#game3 #game3-result-layover-img{
    border: 1px solid #ffffff;
    border-radius: 3px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#game3 #game3-result-layover-img img{
    height: auto;
}
#earn-layover-info button{
    width: 200px;
}

/* Game */
#game, #game3{
    color: #ffffff;
    position: relative;
}
#game-3d iframe{
    width: 100%;
    height: calc(100vh - 50px);
    border: 0;
}
#game-3d #game-3d-predict{
    position: absolute;
    bottom: 90px;
    width: 100%;
}
#game-3d #game-3d-warning{
    width: 100%;
    font-size: 9px;
    padding: 5px 20px;
    box-sizing: border-box;
}
#game-3d #game-3d-predict button{
    background-color: rgba(40, 43, 48, 0.5);
}
#game #game-return-button button{
    background-color: rgba(40, 43, 48, 0.5);
    margin-top: 3px;
}
#game #game-3d-current-round{
    position: absolute;
    cursor: pointer;
    width: 86px;
    height: 46px;
    top: 16px;
    left: 17px;
    background: transparent;
}
#game #game-3d-next-round{
    position: absolute;
    top: 70px;
    left: 17px;
    font-size: 12px;
    padding: 8px;
    width: 70px;
    border-radius: 8px;
    background-color: rgba(40, 43, 48, 0.5);
    cursor: pointer;
}
#game #game-3d-next-round #game-lines-layover, #game #game-3d-current-round #game-lines-layover{
    margin-top: 0;
    left: 100px;
    top: 0;
    width: 130px;
}
#game #game-3d-current-round #game-lines-layover{
    top: 55px;
}
#game #game-3d-next-round #game-lines-layover .layover-content, #game #game-3d-current-round #game-lines-layover .layover-content{
    border-radius: 8px;
    font-size: 12px;
    padding: 8px;
    border: 0;
    background-color: rgba(40, 43, 48, 0.5);
}
#game.show2d #game-3d{
    display: none;
}
#game-2d{
    display: none;
    /*height: calc(100vh - 50px);*/
}
#game.show2d #game-2d{
    display: block;
}
#game #game-percentages-list{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 2px 4px 0 4px;
    margin: 0;
    column-gap: 2%;
    row-gap: 3px;
}
#game #game-percentages-list li{
    flex: 1 0 48%;
    display: flex;
    align-items: center;
    background-color: #282B30;
    border-radius: 8px;
    justify-content: flex-start;
    font-weight: 400;
    box-sizing: border-box;
    padding: 5px;
    font-size: 14px;
}
#game #game-percentages-list li span{
    width: 50px;
    text-align: left;
}
#game #game-percentages-list li .game-place{
    width: 20px;
}
#game #game-percentages-list li .game-percent-bets{
    color: #909090;
    font-weight: 800;
}
#game #game-percentages-list li .game-percent{
    margin-left: auto;
    padding: 5px 5px;
}

#game #game-percentages-list li.down .game-percent{
    color: #FF0000;
}
#game #game-percentages-list .moved-up{
    animation: color-change-2x-green 3s linear 1 alternate both;
}
#game #game-percentages-list .moved-down{
    animation: color-change-2x-red 3s linear 1 alternate both;
}

#game #game-percentages-list .position-1{ order: 1; }
#game #game-percentages-list .position-2{ order: 3; }
#game #game-percentages-list .position-3{ order: 5; }
#game #game-percentages-list .position-4{ order: 7; }
#game #game-percentages-list .position-5{ order: 2; }
#game #game-percentages-list .position-6{ order: 4; }
#game #game-percentages-list .position-7{ order: 6; }
#game #game-percentages-list .position-8{ order: 8; }

#game #game-lines{
    display: flex;
    align-items: center;
    justify-content: center;
}
#game .game-line{
    width: 100%;
    padding: 10px 0;
    height: calc(100vh - 535px);
    min-height: 70px;
}

#game #game-buttons-group-b .pool-a:before, #game .game-percent-bets.pool-a.betted-b::before{
    content: 'A';
    position: absolute;
    background-image: url("../img/circle.svg");
    width: 20px;
    background-size: cover;
    height: 20px;
    line-height: 20px;
    font-weight: 800;
    color: #ffffff;
    left: 10%;
}
#game #game-buttons-group-b .pool-a{
    background-color: #E1B34B;
}
#game #game-buttons-group-b .pool-b{
    background-color: #A3A3A3;
}
#game #game-buttons-group-b .pool-a:before, #game #game-buttons-group-b .pool-b:before{
    margin-top: 4px;
}
#game .game-percent-bets.pool-a.betted-b::before{
    left: auto;
    margin-left: -4px;
}
#game #game-buttons-group-b .pool-b:before, #game .game-percent-bets.pool-b.betted-b::before{
    content: 'B';
    position: absolute;
    right: 10%;
    background-image: url("../img/circle.svg");
    width: 20px;
    background-size: cover;
    height: 20px;
    line-height: 20px;
    font-weight: 800;
    color: #ffffff;
}
#game .game-percent-bets.pool-b.betted-b::before{
    right: auto;
    margin-left: -4px;
}
/*#game .pool-a{*/
/*    background: #0E013F;*/
/*}*/
/*#game .pool-b{*/
/*    background: #01051E;*/
/*}*/
#game .game-line.leader.pool-a{
    background: #0A4D38;
}
#game .game-line.leader.pool-b{
    background: #015021;
}
#game .game-percent-bets.betted-a::after{
    content: '';
    background: url("../img/bet-group-a.svg");
    width: 19px;
    height: 19px;
    background-size: cover;
    margin-left: 10px;
    position: absolute;
}
/*#game .game-percent-bets.betted-b::before{*/
/*    content: '';*/
/*    background: url("../img/bet-group-b.svg");*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background-size: cover;*/
/*    margin: 24px 0 0 6px;*/
/*    position: absolute;*/
/*}*/
#game .game-line img{
    width: 30px;
    padding-top: 10px;
}
#game .game-percent{
    font-size: 12px;
    padding: 5px 0 15px;
    color: #00FF29;
    border-bottom: 2px dashed #03D08F;
    cursor: pointer;
}
#game .game-percent.down{
    color: #FF0000;
}

#game #game-info, #game3 #game3-info{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}
#game #game-info > div, #game3 #game3-info > div{
    width: 33.3%;
    padding: 2px 5px;
}
#game #game-info > div:first-child, #game3 #game3-info > div:first-child{
    text-align: left;
}
#game #game-info > div:last-child, #game3 #game3-info > div:last-child{
    text-align: right;
}
#game .round-btn, #game3 .round-btn{
    border: 1px solid #24303F;
    border-radius: 7px;
    font-size: 14px;
    line-height: 26px;
    cursor: pointer;
    color: #FFFFFF;
    padding: 0 10px 0 30px;
    display: inline-block;
    background-color: #1F1F1F;
}
#game #game-next-round, #game3 #game3-next-round{
    cursor: pointer;
}
#game #game-buttons{
    padding: 0 4px;
}
#game #game-buttons-group-a, #game #game-buttons-group-b, #game #game-buttons-amount, #game3 #game3-buttons-amount{
    display: flex;
    flex-wrap: wrap;
    gap: 3px 3px;
    padding: 8px 0 0 0;
}
#game #game-buttons .error{
    color: #FF2D20;
}
#game #game-buttons-group-a > span, #game #game-buttons-group-b > div,
#game #game-buttons-group-b > span, #game #game-buttons-amount > span, #game3 #game3-buttons-amount > span{
    flex: 0 0 49%;
}
#game3 #game3-buttons-amount > span{
    flex: 0 0 49%;
}
#game #game-buttons-group-a > div{
    flex-basis: calc(25% - 5px);
}
#game #game-buttons-amount > div, #game3 #game3-buttons-amount > div{
    flex-basis: calc(16.5% - 4px);
}
#game #game-buttons-amount > div.bit-bigger, #game3 #game3-buttons-amount > div.bit-bigger{
    flex-basis: calc(25% - 5px);
}
#game #game-buttons-group-a img{
    width: 16px;
    vertical-align: middle;
    padding-right: 3px;
}
#game .game-symbol-btn, #game .game-amount-btn, #game3 .game-symbol-btn, #game3 .game-amount-btn{
    border: 1px solid #24303F;
    border-radius: 5px;
    font-size: 14px;
    line-height: 26px;
    height: 28px;
    cursor: pointer;
    background-size: 26px;
    background-color: #1A222C;
}
#game #game-current-round, #game3 #game3-current-round{
    background-image: url("../img/play-icon-white.png");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 6px 2px;
}
#game #game-next-round-id, #game3 #game3-next-round-id{
    background-image: url("../img/track-icon-white.svg");
    background-size: 29px;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    border: 1px solid #24303F;
    color: #ffffff;
}
#game .game-amount-btn, #game3 .game-amount-btn{
    line-height: 29px;
}
#game3 .game-symbol-btn{
    height: 36px;
    line-height:36px;
}
#game3 .game-symbol-btn.pool-up{
    background: #3DEA00;
    color: #01051E;
    border: 0;
    margin-bottom: 3px;
}
#game3 .game-symbol-btn.pool-down{
    background: #D71111;
    color: #ffffff;
    border: 0;
}
#game3 #game3-price{
    position: absolute;
    left: 5px;
    top: 3px;
    text-align: right;
}
#game3 #game3-percentage{
    position: absolute;
    right: 5px;
    top: 3px;
}
#game3 #game3-percentage.down{
    color: #D71111;
}
#game3 #game3-percentage.up{
    color: #3DEA00;
}
#game .game-symbol-btn.active, #game .game-amount-btn.active,
#game3 .game-symbol-btn.active, #game3 .game-amount-btn.active{
    background: #0098EA;
    color: #01051E;
}

#game .game-symbol-btn span{
    vertical-align: middle;
    display: inline-block;
    width: 45px;
    padding-top: 2px;
}
#game .game-bet-buttons, #game #game-history-mini, #game3 .game-bet-buttons, #game3 #game3-history-mini{
    margin-top: 8px;
}
#game #game-prediction-layover, #invite #invite-leaderboard-layover, #profile-twitter-layover, #profile-base-address-layover{
    position: absolute;
    border: 2px solid #0098EA;
    border-radius: 20px;
    width: 99%;
    min-height: 100px;
    padding: 15px 0 25px 0;
    background: #1E2337;
    z-index: 1;
    margin-top: 65px;
}
#profile-base-address-layover{
    margin-top: 240px;
}
#game #game-prediction-layover .layover-content{
}
#game #game-prediction-layover .layover-content p.gray{
    font-size: 30px;
}
#game #game-prediction-layover .layover-content p.white{
    font-size: 30px;
}
#invite #invite-leaderboard-layover p.gray, #profile-twitter-layover p.gray{
    padding: 20px 60px;
}
#game #game-history-mini-list, #game3 #game3-history-mini-list{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    gap: 3px 3px;
    padding: 0;
    flex-direction: row-reverse;
    margin: 0;
}
#game #game-history-mini-list li, #game3 #game3-history-mini-list li{
    border: 1px solid #ffffff;
    border-radius: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#game #game-history-mini-list img, #game3 #game3-history-mini-list img{
    width: 20px;
}
#game .game-bet-buttons, #game3 .game-bet-buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px 5px;
}
#game3 #game3-history-mini-list .pool-up, #game3-result-layover-img.pool-up{
    background-color: #3DEA00;
}
#game3 #game3-history-mini-list .pool-down, #game3-result-layover-img.pool-down{
    background-color: #D71111;
}
#game3 #game3-history-mini-list .pool-draw, #game3-result-layover-img.pool-draw{
    background-color: #0098EA;
}
.tutorialBtn{
    background: url("../img/graduation-cap.svg");
    width: 45px;
    height: 45px;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px #F7931A solid;
}
.tutorialBtn-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px 5px;
}
#nft-buy .tutorialBtn-wrapper .button{
    width: 250px;
}
#game #game-result-layover, #game2 #game2-result-layover, #game3 #game3-result-layover{
    display: none;
}
#game #game-result-layover.active, #game2 #game2-result-layover.active, #game3 #game3-result-layover.active{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#game #game-result-layover .layover-tutorial p{
    margin: 0;
    color: #0098EA;
}
#game #game-result-layover .layover-tutorial p label{
    margin: 0 0 10px 5px;
    display: inline-block;
}
input[type="checkbox"]{
    accent-color: #0098EA;
    width: 14px;
    height: 14px;
}
input[type="text"]{
    border-radius: 10px;
    line-height: 40px;
    border: 0;
    width: 300px;
    font-size: 1em;
    color: #000;
    cursor: pointer;
    font-family: "Inter", "Poppins", "Turret Road", "Ubuntu Mono", sans-serif;
    font-weight: 400;
    padding: 0 20px;
    box-sizing: border-box;
}
#game #game-result-layover .layover-tutorial input[type="checkbox"]{
    vertical-align: top;
}
#game #game-lines-layover, #game3 #game3-lines-layover{
    position: absolute;
    margin-top: 35px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
    left: 0;
}

#game #game-lines-layover .layover-content, #game3 #game3-lines-layover .layover-content{
    border: 1px solid #0098EA;
    border-radius: 10px;
    background: #1C1F24;
    padding: 10px;
}

#leaderboard .header{
    font-size: 30px;
    margin-top: 20px;
}
#leaderboard p{
    margin: 0;
}
#leaderboard p.green{
    font-size: 14px;
}
#leaderboard #leaderboard-count, #leaderboard #leaderboard-count-next, #leaderboard #leaderboard-count-end{
    margin: 5px 0;
}
#leaderboard #leaderboard-list{
    overflow: scroll;
    max-height: calc(100vh - 145px);
}
#leaderboard ul li{
    line-height: 30px;
    text-align: right;
}
#leaderboard ul li .lb-nr{
    width: 10%;
    padding-right: 3%;
}
#leaderboard ul li .lb-name{
    width: 65%;
    text-align: left;
    overflow: hidden;
    background: url("../img/lb-4.png") no-repeat left;
    background-size: 26px;
    padding-left: 35px;
}
#leaderboard ul li#lb-nr-1 .lb-name{
    background-image: url("../img/lb-1.png");
}
#leaderboard ul li#lb-nr-2 .lb-name{
    background-image: url("../img/lb-2.png");
}
#leaderboard ul li#lb-nr-3 .lb-name{
    background-image: url("../img/lb-3.png");
}
#leaderboard ul li .green{
    width: 22%;
    padding-right: 2%;
}
#leaderboard .lb-own, #leaderboard .lb-own-last{
    background: #1B6F5B;
}
#leaderboard .lb-list-split{
    border-top: dashed 1px #1B6F5B;
    padding: 0;
    margin: 0 5px;
}
#leaderboard .lb-rewards{
    background: url("../img/mystery_box.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px;
    padding: 0 5px 0 25px;
}
#leaderboard .lb-price{
    background: url("../img/usdt.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px;
    padding: 0 5px 0 25px;
    width: 60px;
}

#nft-payment{
    position: fixed;
    bottom: 0;
    z-index: 1;
    background: #1C1F24;
    border: 2px solid #0098EA;
    border-radius: 20px;
    width: 99%;
    min-height: 100px;
    padding: 15px 0 25px 0;
}
#nft-payment .nft-payment-content{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}
#nft-payment .nft-payment-content p{
    width: 100%;
    margin: 10px 0;
}
#nft-payment .nft-payment-content p.gray{
    font-size: 30px;
}
#nft-payment.withdraw .nft-payment-content .purchase{
    display: none;
}
#nft-payment .nft-payment-content .withdraw{
    display: none;
}
#nft-payment.withdraw .nft-payment-content .withdraw{
    display: block;
}
#nft-payment .nft-payment-content p.white, #affiliate-wrapper p.white{
    margin-bottom: 10px;
}
#nft-payment.withdraw .nft-payment-content p.white{
    display: none;
}
#nft-payment img, #affiliate-wrapper img{
    height: 25px;
    padding-right: 10px;
}
#nft-payment #nft-price, #affiliate-wrapper #affiliate-balance{
    font-size: 30px;
}
#affiliate-wrapper .small{
    font-size: 0.5em;
}
#nft-payment .close, #tutorial-video .close, #game-prediction-layover .close, #invite-leaderboard-layover .close, #profile-twitter-layover .close, #profile-base-address-layover .close{
    position: absolute;
    border: 1px solid #0098EA;
    top: 15px;
    right: 15px;
    padding: 3px;
    border-radius: 5px;
    width: 18px;
    cursor: pointer;
}
#nft-payment-disconnect-btn{
    font-size: 12px;
    line-height: 20px;
    width: auto;
    margin-left: 10px;
}
#nft-payment-pay-sub{
    line-height: 25px;
}

.coming-soon{
    padding-top: 40px;
    font-size: 20px;
}

#profile-img img{
    height: 100px;
    padding: 10px;
}
#profile-name{
    font-size: 20px;
}
#profile-membership{
    font-size: 14px;
    padding: 5px 0 10px;
}
.profile-select{
    text-align: left;
    padding: 0 20px;
}
.profile-select ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-flow: row wrap;
}
.profile-select ul li{
    background: #25313C;
    line-height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.profile-select ul li.active{
    display: flex;
}
.profile-select ul li.visible{
    display: flex;
}
.profile-select ul li img {
    height: 25px;
}
.profile-select ul li span{
    flex-grow: 1;
    text-align: left;
    margin-left: 20px;
}
#profile-currency, #profile-assets, #profile-3d-game, #profile-twitter{
    padding-top: 10px;
}
#profile-assets ul li{
    margin-bottom: 5px;
}

#balance-credits div{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 20px;
}
#balance-credits div.row1{
    justify-content: space-between;
    font-size: 30px;
    padding-top: 20px;
}
#balance-credits div.row2{
    justify-content: start;
    font-size: 25px;
}
#balance-credits div.row2 img{
    height: 25px;
}
#balance-credits div.row3{
    padding-top: 30px;
    column-gap: 10px;
}

#tutorial-video{
    position: absolute;
    top: 40px;
    width: 100%;
    height: calc(100% - 40px);
    z-index: 10;
    background: #1C1F24;
}

#game-list ul, #invite ul{
    padding: 0;
    margin: 0 auto;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    flex-flow: row wrap;
    padding: 0 20px;
    row-gap: 15px;
    max-width: 700px;
}
#game-list ul li, #invite ul li{
    border-radius: 10px;
    background-color: #282B30;
    flex: 1 1 100%;
}
#game-list ul img, #invite ul img{
    max-width: 100%;
    width: 100%;
}
#game-list ul .game-list-content, #invite ul .game-list-content{
    padding: 10px 15px;
    font-family:  "Inter", "Poppins", "Turret Road", "Ubuntu Mono", sans-serif;
}
#game-list ul .game-list-content p, #invite ul .game-list-content p{
    margin: 0;
    font-weight: 200;
    line-height: 1.2em;
    font-size: 0.9em;
}
#invite ul li{
    margin-bottom: 20px;
}

#game2 .spin-wheel{
    position: relative;
    max-width: 100vw;
    overflow: hidden;
}
#game2 .wheel {
    width: 100%;
    height: 100%;
}
#game2 .marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: auto;
    z-index: 2;
}
#game2 .white{
    padding: 30px;
}
#game2 .spin-button{
    background: rgb(236,46,46);
    background: linear-gradient(90deg, rgba(236,46,46,1) 0%, rgba(62,174,219,1) 100%);
}
#game2 .spin-button[disabled]{
    background: #858585;
}

.blur {
    animation: blur 10s;
}

/*** Slider ***/
#welcome-slider #slider-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-image: url('../img/background-gradient.svg');
    background-size: cover;
    height: calc(100vh - 126px);
}

#welcome-slider #slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    max-height: calc(100vh - 230px);
    color: #ffffff;
}

#welcome-slider .slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

#welcome-slider .slide img {
    max-width: 90%;
    max-height: calc(100% - 130px);
    height: auto;
    margin-bottom: 20px;
}

#welcome-slider .slide span {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

#welcome-slider .slide p {
    font-size: 14px;
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto;
}

#welcome-slider .slider-nav {
    display: flex;
    justify-content: center;
    margin: 20px;
    gap: 8px;
}

#welcome-slider .nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#welcome-slider .nav-dot.active {
    background-color: #007bff;
}
#welcome-slider .done-button {
    display: none;
}
#welcome-slider .done-button.visible {
    display: inline-block;
}

@keyframes blur {
    0% {
        filter: blur(1.5px);
    }
    80% {
        filter: blur(1.5px);
    }
    100% {
        filter: blur(0px);
    }
}

@media ( max-height: 650px ) {
    #game #game-percentages-list{
        row-gap: 1.5px;
    }
    #game #game-percentages-list li{
        padding: 2px 2px 2px 5px;
    }
    #game #game-buttons-group-a, #game #game-buttons-group-b, #game #game-buttons-amount{
        padding: 2px 0 0 0;
    }
    #game #game-return-button button{
        line-height: 30px;
    }
    #grind{
        margin-top: 10px;
    }
    #grind-active > .white{
        margin: 10px 0;
    }
    #home{
        height: 100vh;
        min-height: 650px;
    }
}

@media ( max-height: 580px ) {
    #game #game-info > div, #game3 #game3-info > div{
        padding-bottom: 0;
    }
    #game #game-buttons-group-a, #game #game-buttons-group-b, #game #game-buttons-amount{
        padding-top: 3px;
    }
    #balance{
        margin-top: 20px;
    }
    #game .game-bet-buttons, #game #game-history-mini{
        margin-top: 3px;
    }
    #earn-list p{
        margin: 5px 0;
    }
    #earn ul li {
        margin: 8px 5px;
    }
    #leaderboard #leaderboard-list{
        max-height: calc(100vh - 140px);
    }
}

/* For small screens, make the whole screen scrollable */
@media ( max-height: 550px ) {
    #page{
        padding-bottom: 75px;
    }
}