input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-internal-autofill-selected{
  transition: background-color 5000s;
  -webkit-text-fill-color: #fff !important;
}

/*game filter*/
.dropdown-wrapper{
    width: 50%;
    position: relative;
}
.search-wrapper{
    display: flex;
    align-items: center;
}
.mobile_dropdown{
    position: relative;
}
.mobile_dropdown img{
    margin-right: 10px;
    width: 25px;
}
.detect_id_tab {
    width: 100%;
    position: absolute;
    top:43px;
    z-index: 10;
    left:0;
}
.search-wrapper .searchinput {
    max-width: 200px;
    padding: 5px 15px;
    border: none;
    display: flex;
    align-items: center;
}
.search-wrapper .tab_search {
    display: flex;
    align-items:center;
    justify-content: end;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0;
}
.tab_wrapper_inn_mobile{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tab_wrapper_inn_mobile .mobile_dropdown{
    width: 100%;
    padding: 5px 10px;
}
.search-wrapper .btn-fav{
    font-size: 20px;
    color:rgb(160, 160, 160);
    position: relative;
    background-color: transparent;
    box-shadow: none;
    width: auto;
    height: auto;
    -webkit-appearance: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    top:inherit;
    right: inherit;
}
/*game thumb*/
.tab_wrapper_inn{
    width: 100%;
}
.right-wrapper{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.tab_search {
    flex-grow: 1;
    border: 1px solid rgba(255,255,255,0.3);
    background-color: #0000008d ;
}
.searchinput:focus{
    box-shadow: none;
    border: none;
    outline: none;
}
.btn-favourite{
    background-color: transparent;
    color: rgb(255 255 255);
    border: 2px solid #ffffff47;
    border-radius: 25px;
    padding: 0 15px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.btn-favourite:hover{
    color: rgb(105,108,255);
    border: 2px solid rgb(105,108,255);
}
.btn-favourite.active{
    background-color:rgb(105,108,255) ;
    color: rgb(255, 255, 255);
    border: 2px solid rgb(105,108,255);
}
.btn-favourite svg,
.btn-favourite i{
    margin-right: 10px;
}
.slot-menu-wrapper {
    background-color: #1b1b1b;
    border-radius: 10px;
    padding: 5px 10px;
    margin-top: 5px;
}
.slot-menu {
    padding: 0px 0 0;
    position: relative;
}
.slot-menu .swiper-wrapper {
    padding: 2px 0;
}
.slot-menu .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    cursor: pointer;
    width: auto;
    padding:0px 10px;
}
.slot-menu .swiper-button-prev, 
.slot-menu .swiper-button-next {
    display: none;
}
.slot-menu-pic{
    padding:5px;
}
.slot-menu-pic img {
    height:45px;
    width: auto;
    max-width:inherit;
}
.slot-menu .swiper-slide.active,
.slot-menu .swiper-slide:hover{
    background-color: #696cff;
}
.hotgame-content {
    margin: 0 -12px;
    padding: 14px 0 0;
}
.hotgame-content .row {
    margin: 0 7px;
}
.game-list-wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.hotgame-single .game-item{
    padding: 10px;
}
.hotgame-single {
    position: relative;
    padding: 10px;
}
.hotgame-single-top {
    position: relative;
    background-color: #ffffff0e;
    border-radius: 10px;
    /* overflow: hidden; */
}
.hotgame-single-top img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.hotgame-single-top > img {
    width: 100%;
    border-radius: 10px;
}
.hotgame-single-top .bg-img {
    position: relative;
    top:0;
    left:0;
    height: auto;
}
.hotgame-overlay{
    background-color: rgba(17, 17, 17, 0.89);
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.hotgame-single:hover .hotgame-overlay{
    opacity: 1;
}
.hotgame-hover-btn{
    color:#696cff;
    font-size: 38px;
}
.hotgame-overlay .game-provider{
    display: block;
    width: 30px;
    margin: 0 auto;
}
.hotgame-overlay .game-provider img{
    position:initial;
    width: 100%;
}
.hotgame-single-bottom{
    text-transform: capitalize;
    font-size: 12px;
}
.hotgame-favourite{
    position: absolute;
    top: 15px;
    right:15px;
    font-size: 14px;
    background-color: #000;
    width: 25px;
    height: 25px;
    border-radius:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
}
.hotgame-favourite.selected{
    color:#ff0080;
}

/* app download */
.app-download {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    font-family: "Roboto Flex", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, sans-serif;
}
.offset{
    padding-top: 138px;
}
.app-content {
    padding: 16px 24px;
    position: fixed;
    bottom: 0;
    border-radius: 20px 20px 0px 0px;
    background-color: #fffffff2;
    width: 100%;
}
.app-close {
    position: absolute;
    top: 8px;
    right: 12px;
    color: #ACACAC;
    font-size: 28px;
}
.app-content-top {
    display: flex;
    align-items: center;
    width: 95%;
}
.app-content-top .logo-app {
    margin-right: 16px;
}
.app-content-top .logo-app img {
    height: 65px;
}
.app-description {
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    font-weight: 600;
    width: calc(100% - 75px);
}
.app-continue {
    color: #00A8FF;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
    text-align: center;
}
.app-content-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}
.app-content-bottom .btn {
    border-radius: 5px;
    width: 130px;
    margin: 0 6px;
    font-size: 24px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-content-bottom .btn span {
    text-transform: uppercase;
    font-size: 14px;
    margin-left: 8px;
}
.download-bar {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: #000000;
    font-family: "Roboto Flex", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, sans-serif;
}
.download-bar .logo-app {
    margin-right: 10px;
}
.download-bar .logo-app img {
    height: 50px;
}
.app-name {
    color: #FFFFFF;
    font-size: 14px;
}
.download-bar-btn {
    background-color: #00CE45;
    font-weight: 600;
    border-radius: 5px;
    font-size: 14px;
}
.download-bar-btn span {
    margin-left: 8px;
}
.download-bar-close {
    color: #FFFFFF80;
    font-size: 24px;
    margin-left: 10px;
}

/* referral */
.referral-wrapper {
    padding: 16px 0;
}
.referral-banner > img {
    border-radius: 10px 10px 0 0;
    width: 100%;
}
.referral-top {
    background: #24262b;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #FFFFFF1A;
    border-radius: 20px;
}
.referral-qr {
    display: flex;
    flex-direction: column;
}
.referral-qr-code {
    border-radius: 10px;
    padding: 6px;
    display: inline-flex;
    align-self: center;
    background-color: #ffffff20;
}
.referral-qr-code > img {
    height: 78px;
    border-radius: 10px;
}
.referral-qr-share {
    display: flex;
    flex-direction: column;
    padding: 0 16px 32px;
}
.referral-share-text {
    font-size: 13px;
    text-align: center;
    margin: 8px 0;
}
.referral-share-link {
    border-radius: 10px;
    padding: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #ffffff20;
}
.referral-link {
    width: calc(100% - 112px);
    border-radius: 10px;
    background-color: #00000080;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
}
.referral-btn {
    margin-left: 7px;
}
.btn-referral {
    text-transform: uppercase;
    font-size: 12px;
    padding: 8px 12px;
    width: 105px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent linear-gradient(180deg, #54A4FF 0%, #2589F8 7%, #116BCF 94%, #0D4C92 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000082;
    border-radius: 10px;
    border: 0;
    font-weight: 700;
    color: #FFFFFF;
}
.referral-detail {
    padding: 16px 0 0;
}
.referral-detail-single {
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid #FFFFFF1A;
    background: #24262b;
}
.referral-detail-single:last-child {
    margin-bottom: 0;
}
.referral-detail-top {
    text-align: center;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    background: #ffffff0f;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 20px 20px 0px 0px;
    border-bottom: 1px solid #FFFFFF1A;
}
.referral-detail-bottom {
    display: flex;
    flex-direction: column;
}
.referral-statistic {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 6px 6px;
}
.referral-statistic-single {
    flex:  1 0 0%;
    padding: 0 6px;
}
.statistic-single-top {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.statistic-single-bottom {
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    color: #FFA200;
}
.btn-referral-detail {
    background-color: #ffffff70;
    text-transform: capitalize;
    display: inline-flex;
    align-self: center;
    justify-content: center;
    min-width: 150px;
    padding: 8px 12px;
    color: #ffffff;
    border-radius: 30px;
    border: 0;
}
.btn-referral-detail.active {
    background-color: #1069CC;
}
.table-referral-wrapper {
    padding: 10px 12px 0;
    margin-top: 16px;
    border-top: 1px solid #FFFFFF1A;
}
.table-referral-wrapper .table-responsive {
    border: 0;
}
.table-referral {
    --bs-body-bg: transparent;
}
.table-referral tr > th {
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    border-bottom-width: 0;
}
.table-referral tr > td {
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    border-bottom-width: 0;
}

/* af custom */
.af-box{
    width: 95%;
}
.af-box .progress-bar{
    height: auto;
    margin: 0;
}
.af-box .avatar{
    position:initial;
    left: 0;
    overflow: auto;
    width:auto;
    height: auto;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.form-box,
.viptabs .form-box,
.vip-benefit{
    border: 1px solid #FFFFFF1A;
    box-shadow: 2px 2px 5px #0000005a;
}
.viptabs .form-box{
    border-top: none;
}
.af-box {
    max-width: 800px;
    margin-bottom: 50px;
}
.fav-game{
    justify-content: center;
}
.af-form .input-group{
    border: 1px solid #ffffff17;
}
.af-form .input-group .form-control{
    min-height: auto;
}
.af-form .input-group .form-control:focus{
    background: transparent;
    box-shadow: none;
    outline: none;
    border: none;
}
.af-form .form-control option{
    appearance: none;
    -webkit-appearance: none;
}
.h-record{
    border-bottom: 1px solid #FFFFFF1A;
}
.b-table .btn-claim{
    background-color: #00000060;
}
.af-box .accordion-button::after,
.af-box .accordion-button:not(.collapsed)::after {
    -webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);
    opacity: 0.3;
}
.vip-bar .progress{
    background-color: #ffffff33;
}
.af-box .tab-content{
    display: block;
}
.s-label,
.profile .p-info,
.b-table table{
    color: #ffffff75;
}
.social-acc .mtbox{
    max-width: 360px;
    margin: 0 auto;
}
.form-check{
    text-align: left;
}
.actarea,
.tabss1 span{
    color: #ffffff75;
}
.af-form .input-group .form-control{
    background-color: transparent !important;
}
.af-form .input-group .form-control::placeholder,
.af-form .input-group .input-group-text { 
    color: #ffffff75;
}

.form-select,
.form-select:focus-visible{
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff75'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    background-repeat: no-repeat !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: .375rem 2.25rem .375rem .75rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.error-msg, 
.help-msg{
    text-align: left;
}
.rstep{
    border-color: #FFFFFF1A;
}
.rstep::after{
    background-color: #FFFFFF1A;
}
.w-type .af-form{
    padding: 0;
}
/* text logo */
a.logo{
    display: block;
    width: 100%;
}
.logo-text{
    font-family: 'Exo';
    font-weight: 900;
    font-style: italic;
    font-size:26px;
    text-shadow: 0 3px 5px rgba(0,0,0,0.5);
    color:#50f6ff;
    text-transform: uppercase;
    text-align:left;
    text-wrap: nowrap;
}
.logo-text span{
    color:#fff;
}
.logo_desktop .logo-text{
    text-align:left;
    font-size:26px;
}

/* review page */
.review-card{
    padding:20px;
    border-radius: 20px;
    border: 1px rgba(255,255,255,0.1) solid;
    background-color:#24262b;
    color:#fff;
    position: relative;
}
.review-title{
    font-size: 18px;
    font-weight: bold;
}
.review-card p{
    font-size: 12px;
}
.review-card .time{
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.stars-wrapper{
    color: #ffb833;
}
.data-wrapper{
    display: block;
    padding:20px;
    border-radius: 20px;
    border: 1px rgba(255,255,255,0.1) solid;
    background-color:#24262b;
    color:#fff;
}
.ranking-wrapper{
    color:#fff;
    padding-right: 0px;
}
.ranking-list{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 7px 10px;
    border-radius: 10px;
}
.ranking-list .no{
    width: 25px;
    height: 25px;
    border-radius: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
}
.ranking-list .no.gold{
    background: rgb(128,81,0);
    background: linear-gradient(0deg, rgba(128,81,0,1) 0%, rgba(255,203,112,1) 100%);
}
.ranking-list .no.silver{
    background: rgb(94,94,94);
    background: linear-gradient(0deg, rgba(94,94,94,1) 0%, rgba(181,181,181,1) 100%);
}
.ranking-list .no.bronze{
    background: rgb(94,61,55);
    background: linear-gradient(0deg, rgba(94,61,55,1) 0%, rgba(159,102,91,1) 100%);
}
.ranking-list .username{
    flex-grow: 1;
    line-height: 18px;
}
.ranking-list span{
    color:rgba(255,255,255,0.5);
    display: block;
}
.chart2-wrapper{
    position: relative;
    width:100%;
    height: 600px;
    min-width: 280px;
    min-height: 280px;
    max-width: 1200px;
    max-height: 600px;
}
.chart-container{
  position: relative;
  height: 90%;
  width: 100%;
}

.chart2-wrapper #chart{
    margin-top: 15px;
}
.review_title{
    font-size: 22px;
    font-weight: bold;
    margin: 30px 0px 20px 0;
}
.live-wrapper{
    background-color: #000;
    border-radius: 10px;
}
.live{
    width: 380px;
    height: 214px;
}

/* news page */
.news-card{
    padding:30px;
    border-radius: 20px;
    border: 1px rgba(255,255,255,0.1) solid;
    background-color:#24262b;
    color:#fff;
    position: relative;
    margin: 15px 0;
}
.news-card-inner{
    display: block;
    border-radius: 20px;
}
.news-card .img-wrapper{
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 15px;
    margin: 0 auto;
}
.news-card .img-wrapper img{
    border-radius: 20px;
}
.news-card-inner .news-content{
    margin-left: 0px;
    margin-top: 30px;
    width: 100%;
}
.news-card-inner h1{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
}
.news-card-inner p{
    font-size: 14px;
}
.btn-readmore{
    background-color: #1cc980;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(0,0,0,.3);
    color: #fff;
    border: none;
    font-weight: 700;
    padding: 0 30px;
}

/*promo page*/
.desktop_promo{
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-wrap: nowrap;
}
.desktop_promo::-webkit-scrollbar{
    display: none;
}
.filter-list li{
    white-space: nowrap;
}

/*special promo button*/
.promo-special-wrapper{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding:0 0 16px 0;
}
.promo-btn,
.refer-btn{
    padding:10px;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: 1px #ffffff47 solid;
}
.promo-btn:hover,
.refer-btn:hover {
    box-shadow: 0px 0px 3px 1px rgb(105, 108, 255);
    border: 1px rgb(105,108,255) solid;
}
.promo-btn img,
.refer-btn img{
    width: 30px;
    display:block;
    margin-right: 5px;
}
/*ann bar*/
.ann-wrap{
    margin-bottom: 0;
}
.ann-wrap svg {
    background: rgb(105, 108, 255);
    border-radius: 50%;
    padding: 5px;
    font-size: 10px;
    color: #fff;
}
/*login modal*/
#loginmodal.share_modal .modal-dialog{
    max-width: 480px;
}
#loginmodal .modal_body_share{
    display: block;
}
#loginmodal .modal_body_right{
    width: 100%;
}
#loginmodal .modal_head{
    justify-content: center;
}
#loginmodal .modal_head h4{
    font-size: 20px;
}
#loginmodal .input_inner_forgot{
    display: flex;
    justify-content: space-between;
}
#loginmodal .form-check-input:checked + .form-check-label{
    background: none !important;
}
#loginmodal .form-check-input[type=checkbox] {
    border: 1px rgba(255, 255, 255, 0.5) solid;
}
#loginmodal .form-check-label{
    font-size: 12px;
}
#loginmodal .no-account{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
#loginmodal .btn-small-signup{
    border: 1px solid #ffffff26;
    background-color: #0000002a;
    border-radius: 15px;
    padding: 5px 14px;
    color: #FFFFFF;
    margin-left: 16px;
    text-transform: capitalize;
}
@media (min-width: 420px) {
    /*partner*/
    #modal-partner .modal-content{
        padding: 25px;
    }
    .partner-logo-wrapper .partner-logo{
        margin: 10px;
        width:calc(25% - 20px);
    }
}

@media (min-width: 560px) {
    .hotgame-hover-btn{
        font-size: 48px;
    }
    .hotgame-overlay .game-provider{
        width: 50px;
    }
    .hotgame-single-bottom{
        text-transform: capitalize;
        font-size: 16px;
    }
}
@media (min-width: 768px) {
    .game-list-wrapper{
        grid-template-columns: repeat(4, 1fr);
    }
    .logo_desktop .logo-text{
        text-align: center;
        font-size:26px;
    }
    .news-card-inner{
        display: flex;
        justify-content: center;
        border-radius: 20px;
    }
    .news-card-inner .news-content{
        margin-left: 25px;
        margin-top: 0px;
        width: 75%;
    }
    .news-card .img-wrapper{
        width: 250px;
        height: auto;
        border-radius: 15px;
    }
    /* referral */
    .referral-qr {
        width: 70%;
        margin: 0 auto;
    }
}
@media (min-width: 1200px) {
    .slot-menu{
        padding: 0 30px;
    }
    .slot-menu .swiper-button-prev, 
    .slot-menu .swiper-button-next {
        display: flex;
        z-index: 2;
    }
    .slot-menu-pic {
        padding: 0 10px;
    }
    .slot-menu-pic img {
        height: 50px;
    }
    .game-list-wrapper{
        grid-template-columns: repeat(6, 1fr);
    }
    .slot-menu .swiper-button-prev, 
    .slot-menu .swiper-button-next {
        display: flex;
        z-index: 2;
    }
    .slot-menu .swiper-button-prev::after {
        font-size: 13px;
        line-height: 1;
        position: absolute;
        left: 0px;
        transition: all 0.3s;
        font-weight: 900;
        font-family: 'Font Awesome 5 Free';
        z-index: 1;
        content: '\f0d9';
    }
    .slot-menu .swiper-button-next::after {
        font-size: 13px;
        line-height: 1;
        position: absolute;
        right: 0px;
        transition: all 0.3s;
        font-weight: 900;
        font-family: 'Font Awesome 5 Free';
        z-index: 1;
        content: '\f0da';
    }
    .slot-menu .swiper-button-next::after, 
    .slot-menu .swiper-button-prev::after {
        font-size: 24px;
        color: #FFFFFF40;
    }
    .hotgame-favourite{
        font-size: 16px;
        width: 30px;
        height: 30px;
    }

    /*review*/
    .data-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .level-status-wrapper{
        display: flex;
    }
    .level-status{
        margin-right: 20px;
    }
    .level-desc-row{
        margin-bottom: 20px;
        font-size: 16px;
    }
    .level-desc{
        margin-top: 0;
    }
    .chart2-wrapper{
        width: 500px !important;
        margin-right: 15px;
    }
    .ranking-wrapper{
        padding-right: 30px;
        width: 50%;
    }
    .live{
        width: 560px;
        height: 315px;
    }
 
    .modal-ann {
        max-width: 1090px;
    } 
    .app-download,
    .download-bar {
      display: none;
    }
    .offset{
        padding-top: 75px;
    }
    /* gamelist filter*/
    .detect_id_tab{
        position: initial;
    }
    .dropdown-wrapper{
        width: auto;
    }
    .dropdown-wrapper .filter-button{
        border-radius: 30px;
        white-space: nowrap;
    }
    .arrow_slider_wrp.arrow_slider_wrp_slots_custom{
        display: flex;
    }
    .tabs_product{
        margin: 20px 0px;
    }
    .slot-menu .swiper-slide{
        border-radius: 30px;
    }
    .slot-menu-wrapper{
        margin-top: 20px;
    }
    /*ann bar*/
    .ann-wrap svg {
        padding: 13px;
        font-size: 13px;
    }
    .ann-wrap{
        margin-bottom: 15px;
    }

    /* rewards */
    @keyframes upDown {
        0%, 100% {
            bottom: 16px;
        }
        50% {
            bottom: 26px; 
        }
    }
    .reward img {
        height: 120px;
    }
}
@media (min-width: 1400px) {
    .logo_desktop .logo-text{
        font-size: 36px;
    }

    .slot-menu-wrapper {
        margin-top: 50px;
        padding: 15px;
    }
    .right-wrapper{
        margin-top: 0;
    }
    .btn-favourite{
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .btn-favourite svg,
    .btn-favourite i {
        margin-right: 0px;
    }
    .btn-favourite span{
        display: none;
    }
    .tab_search{
        margin-top: 0px;
    }
    .game-list-wrapper{
        grid-template-columns: repeat(7, 1fr);
    }
    .hotgame-favourite{
        font-size: 18px;
        width: 35px;
        height: 35px;
    }
    /* referral */
    .referral-wrapper {
        padding: 0;
    }
    .referral-qr {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px 32px;
        width: 65%;
    }
    .referral-qr-code {
        padding: 16px;
        border-radius: 20px;
    }
    .referral-qr-code > img {
        height: 117px;
    }
    .referral-share-text {
        font-size: 16px;
        text-align: left;
    }
    .referral-qr-share {
        width: calc(100% - 149px);
        padding-left: 32px;
        padding-right: 0;
    }
    .referral-share-link {
        padding: 10px;
    }
    .referral-link {
        padding: 13px 16px;
        border-radius: 10px;
        font-size: 16px;
        width: calc(100% - 190px);
    }
    .referral-btn {
        margin-left: 10px;
    }
    .btn-referral {
        width: 180px;
        font-size: 16px;
        padding: 0px 16px;
        border-radius: 10px;
        color: #FFFFFF;
        background: transparent linear-gradient(180deg, #278BFB 0%, #0655AE 100%) 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000082;
        border-radius: 10px;
        height: 40px;
        font-weight: 600;
        text-transform: capitalize;
        appearance: none;
        -webkit-appearance: none;
        border: none;
    }
    .btn-referral:hover {
        background: transparent linear-gradient(0deg, #54A4FF 0%, #2589F8 7%, #116BCF 94%, #0D4C92 100%) 0% 0% no-repeat padding-box;
    }
    .referral-detail {
        padding: 24px 0;
        display: flex;
        flex-direction: row;
        margin: 0 -12px;
    }
    .referral-detail-single {
        flex: 1 0 0%;
        margin: 0 12px 0;
    }
    .referral-detail-top {
        font-size: 18px;
        padding: 10px 16px;
    }
    .statistic-single-top {
        font-size: 14px;
    }
    .btn-referral-detail {
        min-width: 170px;
    }
    .table-referral tr > th {
        font-size: 14px;
    }
    .table-referral tr > td {
        font-size: 14px;
    }
    .btn-referral {
        width: 180px;
        font-size: 16px;
        padding: 0px 16px;
        border-radius: 10px;
    }
    .tab_wrapper_inn_mobile{
        flex-wrap: wrap;
    }
}
@media (min-width: 1600px) {
    .game-list-wrapper{
        grid-template-columns: repeat(8, 1fr);
    }
}