/* referral */
.referral-wrapper {
    padding: 16px 0;
}
.referral-banner > img {
    border-radius: 10px 10px 0 0;
}
.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: #292929;
    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;
}

/* 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;
}
.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;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-bar-btn {
    background-color: #00CE45;
    font-weight: 600;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.download-bar-btn span {
    margin-left: 8px;
}
.download-bar-close {
    color: #FFFFFF80;
    font-size: 24px;
    margin-left: 10px;
}

a.logo{
    display: block;
    width: 100%;
}
.logo-text{
    font-family: 'Exo';
    font-weight: 900;
    font-style: italic;
    font-size:5.5vw;
    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:7vw;
}
/*review*/
.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-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;
}


/* af custom */
.form-box,
.viptabs .form-box,
.vip-benefit{
    border: 1px solid #FFFFFF1A;
}
.viptabs .form-box{
    border-top: none;
}
.af-box {
    max-width: 800px;
    margin-bottom: 50px;
}
.fav-game{
    justify-content: center;
}
.af-form .input-group{
    border-bottom: 1px solid #dee3f026;
}
.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;
}
.social-acc .mtbox{
    max-width: 360px;
    margin: 0 auto;
}
.error-msg, .help-msg,
.form-check{
    text-align: left;
}
.rstep{
    border-color: #FFFFFF1A;
}
.rstep::after{
    background-color: #FFFFFF1A;
}
/*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;
}
.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;
    margin-bottom: 10px;
    justify-content: space-between;
}
.tab_wrapper_inn_mobile .mobile_dropdown{
    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;
}

.arrow_slider_wrp.arrow_slider_wrp_slots_custom{
    display: none;
}

/*game thumb*/
.hotgame-main-img_pro {
    height: 70px;
}
.hotgame-main-img_pro img{
    height: 50px;
}
.inn_product_wrap a{
    border-radius: 10px;
    overflow: hidden;
}
.inn_product_wrap a img{
    border-radius: 0px;
}
.inn_product_wrap a .game-name{
    text-transform: capitalize;
    text-align: center;
    padding: 5px 10px;
    width: 100%;
    white-space:nowrap;
    text-overflow: ellipsis;
}
.btn-fav{
    background-color: #000;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    position: absolute;
    top:3px;
    right:5px;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.btn-fav.active{
    color: #ffb612;
}
.inn_product_wrap a .provider-small {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: #000000;
  }

/*special promo button*/
.promo-special-wrapper{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #ffffff4a;
}
.promo-btn,
.refer-btn{
    background: transparent linear-gradient(90deg, #7a4aff 0%, #6a71f7 100%) 0% 0% no-repeat padding-box;
    padding:10px;
    text-align: center;
    border-radius: 5px;
    font-weight: 900;
    display: flex;
    align-items: center;
}
.promo-btn img,
.refer-btn img{
    width: 30px;
    display:block;
    margin-right: 5px;
}
/*providers modal*/
.view-all-btn{
    margin-right: 5px;
    background-color: #001e3e;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 13px;
    border-radius: 8px;
    color: #93acd3;
}
.providermodal-wrapper{
    background-color: #011e3f;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 20px;
    padding: 10px;
    border: 1px #ffffff23 solid;
}
.providermodal-wrapper .provider-list{
    background-color: #003470;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px #ffffff23 solid;
}
.providermodal-wrapper .provider-list:hover{
    border: 1px solid #ffb612;
    box-shadow: inset 0 0 5px #ffb612;
}
.providermodal-wrapper .provider-list img{
    height: 50px;
    width: auto;
    max-width: inherit;
}
#providerselectmodal .close{
    top:-50px;
    float: none;
    width: 100%;
    text-align: center;
    right: 0;
    left: 0;
    font-size: 2rem;
    color: #fff;
}
#providerselectmodal .modal_body_share{
    margin: 0 auto;
}

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

/*partner floating*/
.partner{
    position: fixed;
    right:0px;
    top:50%;
    transform: translateY(-50%);
    background-color: #000000;
    border-radius: 10px 0 0 10px;
    width: 40px;
    z-index: 10;
    text-align: center;
    border: 1px solid rgb(43, 43, 43);
    border-right: 0;
    padding: 3px;
    overflow: hidden;
    cursor: pointer;
}
.partner .icon{
    padding: 3px;
    border-radius:5px;
    background-color: #1b1b1b;
}
.partner .icon img{
    width: 100%;
}
.partner span{
    font-size: 0.8rem;
    writing-mode: vertical-lr;
    margin: 5px 0 15px 0;
    color: #fff;
}
.partner .arrow{
    color: #fff;
    font-size: 0.8rem;
    background-color: #2d2d2d;
    margin: -5px;
    padding:5px 3px;
}
.partner .icon-wrapper{
    display: block;
}
.partner.close{
    width: 20px;
}
.partner.close .icon-wrapper{
    display: none;
}
.partner.close .arrow{
    color: #fff;
    font-size: 0.8rem;
    background-color: #000;
    margin: 0px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-partner .modal-content{
    background:url(../images/partner-modal-bg-b.svg),#000;
    background-repeat: no-repeat;
    background-position: top;
    background-size: auto 50%;
    width:100%;
    max-width: 600px;
    padding: 15px;
    margin: 0 auto;
    border: 2px solid #1b1b1b;
    border-radius: 15px;
}
#modal-partner .modal-dialog{
    background: none;
    max-width: 600px;
}
.partner-title{
    text-align: center;
    color: var(--theme-color);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}
.partner-logo-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.partner-logo-wrapper .partner-logo{
    margin: 5px;
    overflow: hidden;
    width:calc(25% - 10px);
    border: 1px solid #1b1b1b;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(56, 56, 56, 0.5);
    transition: all 0.3s ease-in-out;
}
.partner-logo-wrapper .partner-logo:hover{
    transform: translateY(-10px);
}
.partner-logo-wrapper .partner-logo img{
    width: 100%;
}
#modal-partner .btn-close{
    font-size: 1rem;
    position: absolute;
    top:10px;
    right:10px;
    --bs-btn-close-color: #fff;
}
@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: 768px) {
    .hotgame-main-img_pro {
        height: 70px;
    }
    .logo_desktop .logo-text{
        text-align: center;
        font-size:1.5vw;
    }
    .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;
    }
    .providermodal-wrapper{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 999px) {
    .data-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chart2-wrapper{
        width: 500px !important;
        margin-right: 15px;
    }
    .ranking-wrapper{
        padding-right: 30px;
        width: 50%;
    }
    .live{
        width: 560px;
        height: 315px;
    }
    .app-download, .download-bar {
        display: none;
    }
    .searchinput{
        max-width: 200px;
    }
    /*game thumb*/
    .inn_product_wrap a .provider-small {
        width: 40px;
        height: 40px;
    }
    .providermodal-wrapper{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    } 
    .providermodal-wrapper .provider-list{
        padding: 10px;
        margin: 10px;
    } 
    .providermodal-wrapper .provider-list img{
        height: 50px;
        width: auto;
        max-width: inherit;
    }
    .arrow_slider_wrp.arrow_slider_wrp_slots_custom{
        display: flex;
    }
    /*game filter*/
    .detect_id_tab{
        position: initial;
    }
    .dropdown-wrapper{
        width: 100%;
    }
    .tab_wrapper_inn_mobile{
        flex-wrap: wrap;
        justify-content: end;
        margin-bottom: 10px;
    }
    .search-wrapper{
        margin-top: 15px;
    }

    /* rewards */
    @keyframes upDown {
        0%, 100% {
            bottom: 16px;
        }
        50% {
            bottom: 26px; 
        }
    }
    .reward img {
        height: 120px;
    }
}

@media (min-width: 1400px) {
    /* 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: 13px 16px;
        border-radius: 10px;
    }
    .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;
    }
}