@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body { font-family: "Inter", sans-serif; font-size: 14px; color:#ffffff; overflow-x: hidden; margin:0 auto; line-height:1.2; background-color: var(--body-bg);}

*, ::after, ::before {box-sizing: border-box;}

a {text-decoration: none; color: inherit;}
a.ss1 { font-weight:bold; color:var(--href-color) }
    a.ss1:hover { color:var(--href-colorHover) }

img {max-width: 100%;}
hr { color: var(--color-border); margin: 0.5rem 0; }
.des { display: block; }
.mob { display: none; }
.btn-submit { font-size:14px; font-weight:bold; padding:10px; border-radius:50px; color:var(--cta-text); background: linear-gradient(180deg, var(--bgcolor-btns) 0%, var(--bgcolor-btns2) 100%); border:0; cursor:pointer; text-align:center }
    .btn-submit:hover { filter:brightness(1.2) }

.btns { font-size:14px; font-weight:bold; padding:4px 24px; border-radius:50px; color:var(--color-btns); border:2px solid transparent; display:flex; gap:8px; align-items:center}
    .btns img { max-height:22px }
    .btns.aaa, .btns:hover { border-color:var(--color-primary); color:var(--color-btnsActive); background: var(--color-btnsBg); }
    .btns img, .btns2 img { filter:var(--greyscale); }
    .btns.aaa img, .btns:hover img, .btns2.aaa img, .btns2:hover img { filter:var(--hue-adjust);}

.mg-btns { border: 2px solid var(--color-primary); border-radius: 16px; padding: 4px 10px; background: var(--color-btnsBg); color: var(--color-btnsActive);}
.mg-btns:hover { border: 2px solid var(--color-primary); background: var(--color-primary); color: var(--color-btnsBg);}
.mg-btns img { filter: none; max-height: 40px;}
.mg-btns:hover img { filter: none;}

.btns2 { font-size:12px; font-weight:bold; color:var(--color-btns); display:flex; align-items:center; justify-content:center; flex-direction:column; }
    .btns2 img { max-height:26px }
    .btns2.aaa, .btns2:hover { border-color:var(--bg-colorBorder2)!important; color:var(--color-btnsActive);}
    .btns2.wb { border-radius:8px; border:1px solid var(--bg-colorBorder); padding:8px; background:var(--color-btnsBg);}
    .btns2.wb.aaa { border-radius:8px; border:1px solid var(--bg-colorBorder); padding:8px; background:var(--color-btnsBg2);}

.topnav { position:fixed; top:0; left:0; width:100%; z-index:4; background:var(--bgcolor-navtop); justify-content:space-between; align-items:center; height:60px; display:none; padding:0 12px }
    .topnav .logo, .topnav .logo-text { margin-bottom:0; max-width:40vw }

.btmnav { position:fixed; bottom:0; left:0; width:100%; z-index:4; background:var(--bgcolor-navmob); justify-content:space-evenly; align-items:center; height:60px; display:none }
    .btmnav .btnsvg2 { gap:2px } 
    .btmnav .btnsvg2 svg {  }

.subnav { position:relative; display:none; padding-top:8px }

.main-wrap { position:relative }

.logo, .logo-text  { margin-bottom:24px }
.logo-text { font-size: 28px; font-weight: 900; font-style: italic; text-align: center;v}
    .logo-text span:first-child { color: var(--logo-text); }
    .logo-text span:last-child { color: var(--logo-text2); }

.sidebar { padding:16px; position:fixed; z-index:10; left:0; top:0px; width:230px; height:100%; overflow-y:auto; background:linear-gradient(90deg, var(--bgcolor-sidebar), var(--bgcolor-sidebar2)); }
    .sidebar .items { display:flex; flex-direction:column; gap:8px; flex-wrap:wrap; margin-bottom:24px; padding: 0 12px }
    .sidebar .items .ex-menu .nav-link { color: var(--color-text); font-size: 12px; padding: 5px var(--bs-nav-link-padding-x); }
    .sidebar .items .ex-menu .nav-link:hover { color: var(--color-primary); }
    .sidebar::-webkit-scrollbar { height: 2px; width: 3px; background: var(--bgcolor-content2);}
.sidebar::-webkit-scrollbar-thumb { background: var(--color-primary); -webkit-border-radius: 1ex; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);}

.lang { display: flex; gap: 20px; color: var(--lang-text); text-align: center; font-size: 12px; line-height: 20px;}
    .lang a { padding-top: 8px; border-radius: 20px; width: 40px; }
    .lang a:hover, .lang a.active { background: var(--lang-bg); color: var(--lang-text2); }
    .lang img {max-width: 30px;}

.content-wrap { width:100%; padding-left:230px} 
    .content-wrap .con { max-width:960px; margin:0px auto; padding:32px 24px; }
.content-top { background:var(--bg-content) }
.content-btm { background-color:var(--bgcolor-content2) }

.conwrap { margin:14px 0px }

.ann { cursor: pointer; font-size:11px; height:30px; position:relative; display:flex; justify-content:center; align-items:center; padding:4px 16px; border-radius:50px; background-color:var(--ann-bgcolor);}
    .ann .iicon { color: var(--ann-colorIcon); font-size:12px; }
    .ann .ttext { color: var(--ann-colorText); width:100% }

.banner-wrap { margin: 0px 0px 16px; border-radius:16px; display:flex; gap:18px; }
.splide__slide img { width:100%; }
.banwrap { width:100%; border-radius:16px; overflow:hidden }
    .banwrap.s2 { display:flex; flex-direction:column; width:32%; justify-content:space-between }
    .banwrap.s2 img { border-radius:16px; overflow:hidden }

.gamewrap { margin: 0px 0px 16px; border-radius:16px; background-color:var(--bg-color); box-shadow:0px 0px 4px var(--shadow); padding-bottom: 15px; }
.gametabs { padding:12px 24px; display:flex; justify-content:space-between; align-items:center; gap:24px; overflow-x:auto; font-size:14px; border-bottom:2px solid var(--bg-colorBorder2) }
    .gametabs a { color:var(--color-text); white-space:nowrap; font-weight: bold; }
    .gametabs a.aaa, .gametabs a:hover { color:var(--color-primary); }
.gamecons { margin:14px 0px; padding-top: 15px; }
.gcc { display:none }
    .gcc.aaa { display:block }
.gggl { position:relative; box-shadow:0px 2px 6px var(--shadow); padding:4px; margin:4px; border-radius:6px; background-color: var(--bg-color2); }
    .gggl .iimg { /*background:var(--miss-thumb);*/ background-size: 80%;  border-radius:8px; overflow:hidden; display:block; position:relative; padding-top:100%; cursor:pointer; }
        .gggl .iimg img { width:100%; position:absolute; top:0; left:0 }
    .gggl .name { font-size:10px; text-align:left; width: 85%; padding-top:4px; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .gggl .fav { position:absolute; font-size:12px; right:5px; bottom:5px; color:var(--unfav-thumb); cursor:pointer }
        .gggl .fav.aaa { color:var(--fav-thumb); }
.gggl:hover .iimg::before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.7); top:0; left:0; z-index:1 }
.gggl:hover .iimg::after { position:absolute; font-family:"FontAwesome"; content:"\f04b"; font-size:30px; color:var(--color-primary); top:50%; left:50%; transform:translate(-50%, -50%); z-index:2 }
.globby { display: grid; grid-template-columns: repeat(6, 1fr); padding: 20px; }
    .globby.s2 { padding:0 20px }
.glinfo { }
    .glinfo .tt { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px }
    .glinfo .gt { display:flex; gap:8px; align-items:center; font-weight:bold; font-size:16px }
    .glinfo .gt svg { height:28px; }

.glmenu { position:relative }
.glpro-swiper .iimg { text-align: center; }
.glpro-swiper img { max-height: 30px; width: auto !important; }

.g-pro { cursor:pointer; position:relative; padding:4px; margin:4px; border-radius:6px; background: var(--tab-bg); border: 1px solid transparent;}
.g-pro:hover, .g-pro.active { background: var(--tab-bg2); border: 1px solid var(--tab-border); }

.lobby .glpro-swiper img { max-height: 50px; width: auto !important; }
.nbswi .nbswi-swiper { margin:0px 20px }
.nbswi .swiper-button-next, .nbswi .swiper-button-prev { color:var(--arrows); width:20px; z-index:1 }
.nbswi .swiper-button-next::after, .nbswi .swiper-button-prev::after { font-size:14px; }
.nbswi .swiper-button-prev { left:0px; }
.nbswi .swiper-button-next { right:0px; }

.glfunc { position:relative; display:flex; justify-content:space-between; padding:16px 16px 0px }
.glfav { width:30px; height:30px; display:flex; justify-content:center; align-items:center; border-radius:50%; background-color:var(--fav-thumb); cursor:pointer; font-size:16px }

.glwrap { margin-bottom:16px; }
    .glwrap .tt { font-size:20px; font-weight:bold; color:var(--color-primary); margin-bottom:4px }

.glist { display:flex; overflow-x:auto;}
    .glist .gggl { min-width:20%; padding:0; width: 80px; }

.glist.s2 { flex-wrap:wrap }
    .glist.s2 .gggl { width:calc(33.33% - 8px); padding:4px }

.glnew-wrap { width:calc(66.66% - 8px); box-shadow:0px 2px 6px var(--shadow); background-color:var(--bg-color2); border-radius:6px; margin:4px }
.glnew-title { color:var(--color-primary); font-size:16px; font-weight:bold; padding:6px 12px; }
.glnew-cons { display:flex; overflow-x:auto; padding:0px 12px }
    .glnew-cons .gggl { min-width:36%; padding:0px; width:80px!important }

.newswrap { margin: 0px 0px 14px; border-radius: 0px; background-color: var(--bg-color); box-shadow: 0px 0px 4px var(--shadow); display: flex; gap: 16px; padding: 8px; }
    .newswrap .info { width:65%; color:var(--color-text); display:flex; flex-direction:column; gap:6px; padding:16px }
        .newswrap .info h5 { color:var(--color-primary); margin:0; font-size:16px; font-weight:bold }
    .newswrap .iimg { width:35% }
        .newswrap .iimg img { border-radius:0;}

.seo-wrap { color:var(--color-textSeo) }
    .seo-wrap h1 { font-size:24px; }
    .seo-wrap h2 { font-size:22px; }
    .seo-wrap h3 { font-size:20px; }
    .seo-wrap h4 { font-size:18px; }
    .seo-wrap h5 { font-size:16px; }
    .seo-wrap #readMore { display: none; }
    #moreBtn { width: 140px; }

.copyright-wrap, .follow-us, .powered { text-align:center; text-transform:uppercase; font-size:12px; margin-top:30px; padding-top:30px; color:var(--color-text); border-top:1px solid var(--color-border) }
    .copyright-wrap span { font-weight:bold; color:var(--color-primary) }
.follow-us .nav { justify-content: center; }
.powered img { max-height: 36px; filter: var(--ft-greyscale); margin: 10px;}

.appsdl { background:var(--apps-bgcolor); border-radius:16px; position:fixed; z-index:3; left:8px; bottom:68px; width:calc(100% - 16px); padding:18px 24px; font-size:3.4vw; font-weight:bold; border:1px solid var(--apps-colorBorder)}
    .appsdl .cc { position:absolute; right:12px; top:12px; font-size:20px; z-index:1; cursor:pointer; color: var(--apps-close); }
    .appsdl .tt { display:flex; gap:12px; color:var(--apps-desc); border-bottom:1px solid var(--apps-colorLine); margin-bottom:12px; padding-bottom:12px; align-items:center; flex-direction: column;}
    .appsdl .tt .logo-text {margin-bottom: 0;}
        .appsdl .tt img { width:15vw }
    .appsdl .bb {  }
        .appsdl .bb strong { margin:0; padding-bottom:12px; color:var(--apps-title); display:block; text-align:center }
        .appsdl .btnsss { display:flex; gap:12px; }
.btn-apps { border-radius:8px; background-color:var(--apps-s1bg); border:1px solid var(--apps-s1border); color:var(--apps-s1text); padding:8px;  width:100%; display:flex; gap:8px; justify-content:center; align-items:center  }
    .btn-apps.s2 { background-color:var(--apps-s2bg); border:1px solid var(--apps-s2border); color:var(--apps-s2text); }

.nbdes, .nbdesb { }
.nbmob, .nbmobb  { display:none!important }

.modal-ann { max-width:900px }
.modal-ann .modal-content { background: transparent; border: none; }
.modal-ann .modal-header { border-bottom: 0px; text-align: center; padding: 10px; background: var(--bg-modal); border-radius: 16px 16px 0px 0px;}
.modal-ann .modal-title { color: var(--modaltitle-text); background: var(--modaltitle); width: fit-content; margin: 0px auto; padding: 10px 40px; border-radius: 50px;}
.modal-ann .btn-close { --bs-btn-close-bg: none; position: absolute; right: 20px; z-index: 1; background: var(--bg-close); opacity: 1; border-radius: 50%; padding: 0; height: 30px; width: 30px; }

.annbox { position: relative; background: var(--bg-modal); border-radius: 0px 0px 16px 16px;}
        .annbox .bbg .mob { display:none }
    .annbox .ccon { width:100%; padding:10px }
    .annbox .annimg { border-radius:8px; width:100% }
.anncon { height:100%; display:flex; align-items:flex-start }
    .anncon .nav { max-width:25%; margin-right:12px; height:100% }
        .anncon .nav .nav-link { background-color:var(--ann-tab2); color:var(--ann-tabtext2); text-align:left; font-size:14px; font-weight:bold; border-radius:8px; width:100%; height:calc(20% - 8px); min-height: 60px; margin:4px 0px }
        .anncon .nav .nav-link p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; text-overflow: ellipsis; margin: 0px;}
        .anncon .nav .nav-link.active { background-color:var(--ann-tab); color: var(--ann-tabtext);}
    .anncon .tab-content { width:75% }
        .anncon .tab-content h5 { font-weight:bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 90%; color: var(--color-primary);}
.annpagi { display:flex; justify-content:center; align-items:center; gap:4px; margin-top:8px; width:100%; }
    .annpagi .pitem { background-color:var(--ann-tab2); color:var(--ann-tabtext2); width:20px; height:20px; font-size:12px; font-weight:bold; display:flex; justify-content:center; align-items:center; cursor: pointer; }
    .annpagi .pitem.active, .annpagi .pitem:hover { color: var(--modaltitle-text); background-color:var(--modaltitle);}

.realtime-trans { display:flex; background-color:var(--realtime-bg); align-items:center; height: 60px ;border-radius:10px; margin:0px; overflow:hidden; margin-bottom:10px; }
    .realtime-trans .ccon { width:100%; }

.rtt-wrap { width:100% }
.rttbox { display:flex; justify-content: center;}
    .rttbox .rimg { width:40px; min-width:40px; }
    .rttbox .rcon { display:flex; flex-direction:column; color:var(--realtrans-text); font-size:12px; line-height:normal; justify-content:center }
        .rttbox .rcon div { display:flex; align-items:center }
        .rttbox .rcon span { padding-left:5px; }
        .rttbox .rcon .time { color:var(--realtrans-time); font-size:10px }
        .rttbox .rcon .amo { color:var(--realtrans-amo); font-weight:bold; font-size:12px; }

/*promo*/
.pfilter {
    margin: 20px 0px ;
    display: flex;
    overflow-x: scroll;
}
.pfilter::-webkit-scrollbar { display: none; }
.ptab {
    border-radius: 50px;
    background: var(--bg-color);
    box-shadow: var(--shadow);
    color: var(--color-primary);
    font-size: 16px;
    display: inline-block;
    text-align: center;
    padding: 5px 18px;
    margin: auto 5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ptab:hover, .ptab.active {
    background: var(--cta-bg);
    color: var(--cta-text);
    text-decoration: none;
    cursor: pointer;
}
.promo-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--color-text);
}
.promo-box {
    box-shadow: var(--shadow);
    cursor: pointer;
    margin-bottom: 15px;
    background: var(--bg-color);
    border-radius: 20px;
}
.promo-box: last-child; { margin-bottom: 0px; }
.promo-box .accordion-body { padding: 20px; }
.ptitle { color: var(--color-primary); }
.promo-tumbnail img { border-radius: 0; }
.promo-box.mix { display: none }

/*promo-end*/

.progress .progress-bar { background: var(--bs-progress-bar-bg); }

/*info-page*/
.ex-info {
    display: flex;
    background: var(--bgcolor-sidebar);
    color: var(--color-text);
    margin-top: 2rem;
    border-radius: 20px;
    padding: 20px;
    line-height: 1.5;
    text-align: justify;
}
.ex-l { width: auto; margin-right: 1.5rem; }
.ex-r { width: 75%; }
.ex-l .ex-menu { display: flex; flex-direction: column;}
.ex-info .ex-menu { font-size: 14px; font-weight: bold; }
.ex-info .ex-menu .nav-item { background-color: var(--bgcolor-content); border-radius: 10px; margin: 5px 0px;}
.ex-info .ex-menu .nav-item .nav-link { color: var(--color-primary); }
.ex-info .ex-menu .nav-item.active, .ex-info .ex-menu .nav-item:hover { background: var(--cta-bg);}
.ex-info .ex-menu .nav-item.active .nav-link, .ex-info .ex-menu .nav-item:hover .nav-link { color: var(--cta-text);}
.table-info { background-color: var(--bgcolor-table); }
.table-info .table  { margin: 0px; }
.table-info .table >:not(caption)>*>* { background-color: transparent; padding: 10px 15px; color: var(--table-text);}
.table-info .table th { background-color: var(--table-bg); color: var(--cta-text); font-size: 14px; }
/*info-page end*/

/*af*/
input:-webkit-autofill {
    -webkit-text-fill-color: var(--form-text-light) !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
img { max-width: 100%; }

.error-msg, .help-msg {
    width: 100%;
    margin-top: -1rem;
    margin-bottom: 0.75rem;
    margin-left: 0.5rem;
    font-size: .875em;
    color: var(--form-failed);
    text-align: left;
}
.help-msg {
    color: var(--form-input-text);
}

.text-success { color: var(--form-success) !important; }
.text-warning { color: var(--form-pending) !important; }
.text-danger { color: var(--form-failed) !important; }

.af-box { max-width: 700px; margin: 0px auto; }
    .af-box h4 { text-align: center; padding:40px 0px; color: var(--color-primary); }

.reg-step { display:flex; gap:60px; justify-content:center }
    .rstep { border-radius:8px; width:40px; height:40px; font-size:20px; font-weight:bold; display:flex; justify-content:center; align-items:center; background-color:var(--form-input-bg); border:1px solid var(--form-input-bg2); color:var(--form-input-text); position:relative }
    .rstep::after { content:""; position:absolute; right:-61px; width:60px; height:1px; background-color:var(--color-border); }
    .rstep:last-child::after { display:none }
    .rstep.active { color:var(--cta-text); background:var(--form-cta-bg); border: none;}

.regbox { display: none }
.regbox.active { display: block }

.af-form {   }
    .af-form .input-group { padding:4px 12px; border-radius: 8px; background-color: var(--form-input-bg2); border:1px solid var(--form-border); }
    .af-form .input-group .input-group-text { background-color: transparent; font-size: 14px;  color:var(--form-input-text); border:0; border-radius: 0px; }
    .af-form .input-group .form-control { border:0; font-size: 14px; color: var(--color-text); outline: none; background-color: transparent; }
    .af-form .input-group .form-control::placeholder { color:var(--form-input-text) !important; }
    .af-form .input-group .form-control:focus { box-shadow: none !important; }
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active  { transition: background-color 5000s;}
    .af-form .form-check-input { background-color: var(--form-trans-bg); border-color: var(--form-text); margin-top: 0px;}
    .form-check { text-align: left; display: flex; align-items: center; gap:5px }
    .form-select { --bs-form-select-bg-img: var(--form-select-arrow); }
    .af-form .form-check-input:checked {
        background-color: var(--cta-bg); border-color: var(--form-text);
    }
    .af-form .form-check-label { color: var(--form-text); }
    .af-form .form-check-label b { color: var(--form-remark); }
    .af-form .form-remark { color: var(--form-remark); }
    .af-form .remark-group { display: flex; justify-content: space-between; }
.af-balance { text-align: center; }
    .af-balance .s-label { margin-left: 5px; }
    .af-balance .btn-submit { display: flex; justify-content: space-between; align-items: center; gap:5px; padding: 5px 8px; margin-top: 3px; background: var(--cta-bg); border:1px solid var(--form-border);}
    .topnav .af-balance { display: flex; align-items: center; gap:5px; text-align: left; justify-content: end;}
    .topnav .af-balance .avatar { max-width: 20%; }
    .topnav .af-balance .btn-submit {padding: 2px 5px;}
    .arrow { color: var(--color-text); }
.acc-status { color: var(--color-text); font-weight: bold; }
.green { color: var(--form-success) !important; }
.red { color: var(--form-failed) !important; }

.btnform { font-size: 16px; font-weight: bold; padding: 8px 24px; border-radius: 8px; color: var(--cta-text); background: var(--form-cta-bg); border: 0; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btnform:hover {background: var(--form-cta-bg); }
.social-acc { padding:24px 0px }
    .social-acc .tt { color: var(--form-text); text-align: center; padding-bottom: 12px; }
    .social-acc .mtbox { display: flex; justify-content: space-evenly; align-items: center; }

.actarea { color: var(--form-text); text-align: center; font-size: 12px; }
    .actarea a { color: var(--form-remark); font-weight: bold; }

.form-label { font-weight: bold; color: var(--color-text); }

.pincode-input-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
.pincode-input-text, .form-control.pincode-input-text {
    text-align: center;
    flex-grow: 1;
    background: var(--form-input-bg);
    border: none;
    color: var(--form-text-light);
}
.pincode-input-container input.first {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.pincode-input-container input.mid {
    border-radius: 0px;
    border-left-width: 0px;
}
.pincode-input-container input.last {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left-width: 0px;
}
.return-bar { display: flex; gap:20px; font-size: 20px; padding: 10px; color: var(--color-primary); align-items: center;}
.account .profile {
    display: flex;
    align-items: center;
}
.account .profile .p-info {
    margin-left: 20px;
    align-items: flex-start;
}
.vip-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vip-bar a {color: var(--color-primary);}
.vip-bar .progress {
    width: 97%;
    --bs-progress-bg: var(--form-input-bg2);
    --bs-progress-bar-bg: var(--form-cta-bg);
}
.vip-bar .progress .progress-bar { color: var(--progressbar-text); background: var(--bs-progress-bar-bg); }
.w-bar .progress {
    --bs-progress-bg: var(--form-input-bg2);
    --bs-progress-bar-bg: var(--form-cta-bg);
}
.vip-next {
    display: flex;
    justify-content: space-between;
}
.bal-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bal-h p { margin: 0px; }
.bal { font-weight: bold; font-size: 20px; color: var(--form-remark); }
.wallet {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px;
}
.w-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: var(--color-text);
    cursor: pointer;
}
.w-menu img {
    background: var(--bgcolor-wmenu);
    padding: 15px;
    border-radius: 20px;
    border:  1px solid var(--form-border);
}
.w-menu.active img, .w-menu:hover img {background: var(--wmenu-cta)}
.menu-list .form-til { cursor: pointer; padding: 10px; }
.profile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.profile a { color: var(--color-primary); }
.profile .vip-lv { display: flex; flex-direction: column; align-items: center; color: var(--color-text);}
.profile .vip-lv img {
    max-width: 40px;
}
.profile .p-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--form-text);
    margin: 0px auto;
}
    .profile .p-info .username { color: var(--color-primary); font-size: 18px; font-weight: bold; }
    .avatar img { border-radius: 50%; }
    .p-info { color: var(--color-text); }

.form-box {
    background: var(--form-input-bg);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    border:1px solid var(--form-border);
}
.form-til { font-weight: bold; color: var(--color-primary); font-size: 18px; text-align: left;}

.statistic {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
    .statistic .s-data {
    background: var(--bgcolor-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    border:  1px solid var(--form-border);
    cursor: pointer;
}
    .statistic .s-data.active, .statistic .s-data:hover { background: var(--form-cta-bg); }
    .statistic .s-data.active .s-amount, .statistic .s-data:hover .s-amount { color: var(--progressbar-text); font-weight: bold; }
    .statistic .s-data .s-amount { color: var(--color-primary); }
.s-label { font-size: 12px; color: var(--form-text); text-align: left; }
.s-label b { color: var(--color-primary); }
.s-amount { font-size: 16px; font-weight: bold; color: var(--color-text); }

#contain { height: 110px; overflow-y: scroll; scrollbar-width: none;}

.fav-game {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.fav-game-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.fav-game-thumb img {border-radius: 10px; max-width: 90%;}
.fg-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 5px;
}
.fg-name { font-weight: bold; font-size: 12px; }
.fg-provider { font-size: 10px; }
.top-bal {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
    font-size: 20px;
}
.top-bal .t-live { color: var(--form-input-text); }
.tab-menu {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-weight: bold;
    gap: 15px;
    color: var(--color-text);
    font-size: 14px;
}
.tab-menu a { 
    background: var(--form-input-bg);
    padding: 10px;
    border-radius: 50px;
    width: 100%;
    border:1px solid var(--form-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-menu a.active { 
    background: var(--cta-bg);
    color: var(--cta-text);
}
.w-depo svg, .w-depo i { color: var(--form-success) !important; }
.w-with svg, .w-with i { color: var(--form-failed) !important; }
.payment .w-menu img { padding:20px 5px ; }

.d-amount {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.d-amount a {
    background: var(--form-input-bg2);
    padding: 10px;
    border-radius: 8px;
    width: 20%;
    text-align: center;
    color: var(--color-primary);
    border:  1px solid var(--form-border);
}
.d-amount a.active, .d-amount a:hover { background: var(--form-cta-bg); color: var(--progressbar-text); font-weight: bold; }
.d-promo .form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.d-promo .form-check-label {
    background: var(--form-input-bg2);
    width: 100%;
    border-radius: 8px;
    padding: 10px 10px 10px 20px;
    border:  1px solid var(--form-border);
    text-align: left;
    font-size: 12px;
}
.d-promo .form-check-label.active, .d-promo .form-check-label:hover { background: var(--form-cta-bg); color: var(--progressbar-text); font-weight: bold; }
.w-type {}
.w-type .input-group {background: var(--form-input-bg2);}

.t-type {
    display: flex;
    justify-content: space-between;
    background: var(--form-input-bg2);
    padding: 7px 20px;
    border-radius: 8px;
    margin-bottom: 5px;
    color: var(--color-text);
}
.t-type.bal {
    background: transparent;
    font-size: inherit;
    margin-bottom: 0px;
    color: var(--color-primary);
}
.h-record {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.h-type {
    display: flex;
    flex-direction: column;
    color: var(--color-primary);
}
.af-form .input-group .btnform:last-child {
    width: auto;
    margin-right: -12px;
    margin-top: -4px;
    margin-bottom: -4px;
}
.af-form .input-group .btnform:first-child {
    width: auto;
    margin-left: -12px;
    margin-top: -4px;
    margin-bottom: -4px;
}

.b-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--form-input-bg2);
    padding: 2px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    gap: 10px;
    color: var(--color-text);
}
.b-type .bal { font-size: inherit; }
 .b-table table { width: 100%; font-size: 12px; text-align: left; color: var(--form-text);}
    .b-table table thead { font-size:14px; color: var(--color-primary); }
    .b-table table th, .b-table table td { white-space:nowrap; padding:5px 10px; }
    .b-table .btn-claim { font-size: 12px; background: var(--form-input-bg2); border-radius: 30px; padding: 5px 10px; }

.w-type .pincode-input-text, .form-control.pincode-input-text {
    background: var(--form-input-bg2);
}
.n-more{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.act-dash {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
}
.act-dash .form-box .act-data {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.act-dash .form-box .act-data .s-amount { color: var(--color-primary); }
.act-data img { max-width: 25% ; }

.act-details {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.act-details img { max-width: 40px ; }
.act-details .s-label {
    font-size: 18px;
}
.act-details-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.act-details-list .form-til { color: var(--form-text); }

.vipbox { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding:12px; background:var(--gradient-bg); border-radius: 20px; color: var(--color-text); border: 1px solid var(--color-border); }
    .vipbox .badges { display: flex; flex-direction: column; max-width: 100px; justify-content: center; align-items: center; font-size: 20px; color: var(--color-primary); }
    .vipbox .info { width:100% }
        .vipbox .info .tt { font-size: 16px; }
        .vipbox .info .desc { font-size: 12px; }
        .vipbox .info .levelinfo { font-size: 12px; }
        .vipbox .info .vip-bar { margin:8px 0px }

.tabss1 { display: flex; flex-direction: column; gap:8px; align-items: center; }
    .tabss1 img { width:50px }
    .tabss1 span { color: var(--form-text); }

.viptabs .nav-tabs { border-bottom: 0; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -ms-overflow-style: none; scrollbar-width: none;}
.viptabs .nav-tabs::-webkit-scrollbar { display: none; }
.viptabs .nav-tabs .nav-link { display: flex; justify-content: center; min-width: 88px; padding: 5px; border-bottom: none; }
.viptabs .nav-tabs .nav-item.show .nav-link, 
.viptabs .nav-tabs .nav-link.active,
.viptabs .nav-tabs .nav-link:focus, 
.viptabs .nav-tabs .nav-link:hover
{ background-color: var(--form-input-bg); color:var(--color-text); border-color: var(--form-input-bg2); }

.viptabs .nav-tabs .nav-item.show .nav-link .tabss1 span, .viptabs .nav-tabs .nav-link.active .tabss1 span
{ display: block; color: var(--color-text); }
.viptabs .form-box {
    border-radius: 0px 0px 8px 8px;
    border: 1px solid var(--form-input-bg2);
    border-top: none;
}
.vip-label {
    display: flex;
    align-items: center;
}
.vip-label img {
    max-height: 40px;
}
.vip-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--form-input-bg2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 1rem;
}

.vip-binfo {
    display: flex;
    flex-direction: column;
}

.vip-info .accordion-item { border-color:var(--form-input-bg2); color: var(--form-text-light); background-color: var(--form-input-bg); }
.vip-info .accordion-button {
    padding: 5px 10px;
    background-color: var(--form-input-bg);
}
/*af-end*/

@media (min-width: 768px) {
    body.hnb {  }
    body.hnb .sidebar { padding:0; width:56px; }
    body.hnb .sidebar .items { flex-direction:column; gap:12px }
    body.hnb .sidebar .items a { width:100% }
    body.hnb .sidebar .items a span { display:none }
    body.hnb .content-wrap { padding-left:80px }

    .d-promo .form-check-label {
        font-size: 14px;
    }
}

@media only screen and (max-width: 960px) {

}

@media only screen and (max-width: 767px) {

    .nbdes { display:none!important }
    .nbmob { display:flex!important }
    .nbmobb { display:block!important }

    .sidebar { left:-230px }
    .content-wrap { padding:60px 0; font-size:2.4vw}
    .content-wrap .con { padding:16px }
    .btmnav { display:flex; justify-content: space-around; }
    .powered img { max-height: 24px;}

    .banwrap { width:100% }

    .newswrap { gap:8px }
    .newswrap .info { padding:4px 8px; gap:4px; width:55% }
    .newswrap .iimg { width:45% }
    .newswrap .info h5 { font-size:3vw }
    .newswrap .info span { overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    
    .seo-wrap { font-size:2.8vw }
    .seo-wrap h1 { font-size:5.4vw }
    .seo-wrap h2 { font-size:5vw }
    .seo-wrap h3 { font-size:4.6vw }
    .seo-wrap h4 { font-size:4.2vw }
    .seo-wrap h5 { font-size:3.8vw }

    .gamecons { margin:8px 0px }
    .gametabs { font-size:3vw }
    .des { display: none; }
    .mob { display: block; }
    /*info-page*/
    .ex-info { flex-direction: column;}
    .ex-l { margin: 0px; }
    .ex-r { width: 100%; margin-top: 1rem; }
    .ex-l .ex-menu { flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow: scroll;}
    .ex-l .ex-menu li a { width: max-content; }
    /*info-page end*/
    .lobby .glpro-swiper img { max-height: 30px; width: auto !important;}
    .globby { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 0px; }

    body.hnb .sidebar { left:0; transition: all 0.3s; }
    body.hnb .main-wrap::before { content:''; position:fixed; z-index:5; width:100%; height:100%; left:0px; top:0px; background:rgba(0,0,0,0.5) }

.modal-ann .modal-title { padding: 5px 30px; font-size: 14px; }
    .anncon { flex-direction:column }
    .anncon .nav { max-width:none; margin-right:0; margin-bottom:2vw; height:auto flex-diredtion:row; width: 100%; }
    .annbox .ccon { top: 12%; margin-bottom: 1vw;}
    .anncon .nav .nav-link { font-size:2vw; padding:4px 5px; margin:2px; width:calc(20% - 4px); height:auto; border-radius: 5px; min-height: 30px; }
    .anncon .tab-content { width:100%; margin:0 auto; }
    .anncon .tab-content h5 { font-size:2.8vw; margin-bottom:1vw; text-align: left; }
    .annbox .bbg .des { display:none }
    .annbox .bbg .mob { display:block }
    .annpagi .pitem { width:3vw; height:3vw; font-size:2vw }

    .realtime-trans { height: 40px; }
    .realtime-trans .ccon { width: 100% }
    .rttbox .rimg { min-width: 7vw; width: 7vw }
    .rttbox .rcon { font-size: 2.2vw }
    .rttbox .rcon .time { font-size: 1.6vw }
    .rttbox .rcon .amo { font-size: 2vw }

}

@media only screen and (max-width: 479px) {


}

.login-div .af-box {
    max-width: 600px;
    margin: auto;
}
.topnav .btn-submit,
.sidebar .items .btn-submit {
    width: 80px;
}

.af-balance .btn-submit {
    width: unset !important;
}

/* rewards */
.reward {
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 3;
    animation: upDown 1s ease-in-out infinite;
}
.reward a {
    display: block;
}
.reward-close {
	cursor: pointer;
    line-height: 1;
    position: absolute;
    top: -32px;
    right: 0;
    font-size: 24px;
}
@keyframes upDown {
    0%, 100% {
        bottom: 80px;
    }
    50% {
        bottom: 86px; 
    }
}
.reward img {
    height: 80px;
}  

@media (min-width: 1200px) {
    /* rewards */
    @keyframes upDown {
        0%, 100% {
            bottom: 16px;
        }
        50% {
            bottom: 26px; 
        }
    }
    .reward img {
        height: 120px;
    }
}

/*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: var(--theme-color);
    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:  var(--theme-color);
    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;
}
.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;
	cursor: pointer;
    --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);
    }
}

/* table.table,
.b-table table,
.form-box table {
    display: table;
}
.b-table table thead {
    background-color: transparent;
}
.table-info .table {
    white-space: wrap;
    border-color: var(--bs-table-border-color) !important;
}
.table-info .table.table-bordered {
    border-color: var(--bs-table-border-color) !important;
}
.form-box table .t-type td {
    padding: 1px;
} */

/*table default*/
.promo-box table{
    --bs-table-bg:transparent;
    border-radius: 10px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
    table-layout: auto;
    border:0 !important;
}
.promo-box table thead{
    background-color:var(--table-bg);
    color: var(--cta-text);
}
.promo-box table thead th{
    padding: 10px 15px;
    background-color:rgba(0,0,0,0.05);
}
.promo-box table thead th:last-child{
    border-radius: 0 10px 0 0;
}
.promo-box table tbody td{
    padding: 7px 15px;
    background-color: var(--bgcolor-table);
    color: var(--table-text);
}
.promo-box table tbody tr:last-child td:last-child{
    border-radius: 0 0 10px 0;
}
.promo-box table>:not(caption)>*>*{
    width: 1%;
}

/* referral */
.referral-wrap {
	padding: 16px 0;
    max-width: 800px;
    margin: 0 auto;
	line-height: 1.5;
}
.referral-item {
    margin-bottom: 16px;
}
.referral-item h1 {
    color: var(--color-theme);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}
.referral-item h1 span {
    color: var(--black);
    font-size: 20px;
    padding: 0 8px;
}
.referral-item h2 {
    color: var(--color-theme);
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}
.referral-item h2 span {
    color: var(--black);
    text-transform: uppercase;
}
.referral-item p {
    color: var(--black2);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}
.referral-benefit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    padding-top: 30px;
    position: relative;
}
.referred-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid var(--color-theme);
    color: var(--color-theme);
    background: var(--bgcolor-box);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.benefit-item {
    background: var(--bgcolor-box);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-box);
    position: relative;
}
.benefit-icon {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.benefit-icon img {
    height: 60px;
}
.benefit-cash {
    padding-top: 30px;
}
.benefit-cash h6 {
    text-transform: uppercase;
    text-align: center;
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.benefit-cash h4 { 
    text-align: center;
    color: var(--color-theme);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0;
}
.glow-line {
    height: 2px;
    width: 75%;
    margin: 16px auto;
    background: transparent linear-gradient(90deg, #FFFFFF00 0%, var(--color-theme) 50%, #FFFFFF00 100%);
}
.benefit-item p {
    color: var(--black);
    margin-bottom: 0;
}
.referral-step {
    padding: 16px 0;
}
.step-item {
    margin-bottom: 20px;
}
.step-item:last-child {
    margin-bottom: 0;
}
.step-wrap {
    color: var(--color-theme);
    display: flex;
    align-items: center;
    padding: 0 28px;
    margin-bottom: 6px;
}
.step-wrap img {
    height: 30px;
}
.step-wrap span {
    font-weight: 700;
	font-size: 14px;
}
.step-wrap span.dot {
    padding: 0 10px;
    font-size: 20px;
}
.referral-step p {
    color: var(--black);
    font-weight: 500;
    text-align: start;
    padding: 0 10px;
}
.referral-share {
    background: var(--bgcolor-box2);
    box-shadow: var(--shadow-box);
    border-radius: 16px;
    position: relative;
    border-radius: 16px;
    margin-bottom: 12px;
    background-image: var(--bg-img);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}
.referral-share img {
    position: absolute;
}
.referral-share img.earn-bg {
    border-radius: 16px 16px 0 0;
}
.referral-share img.earn-arrow {
    left: 10px;
    top: -14px;
}
.referral-share img.earn-rocket {
    right: 10px;
    top: -20px;
}
.referral-share img.earn-arrow,
.referral-share img.earn-rocket {
    height: 50px;
}
.share-earn {
    padding: 32px 16px;
    z-index: 1;
    position: relative;
    border-radius: 16px;
}
.share-earn p {
    color: var(--black);
}
.btn-earn {
    background: var(--color-theme);
    border-radius: 5px;
    color: var(--white);
    padding: 7px 12px;
    box-shadow: inset -2px -2px 4px -1px #00000080;
	font-size: 14px;
}
.referral-wrap button.btn-tnc {
    background: var(--bgcolor-box) !important;
    border: 1px solid var(--color-theme);
    color: var(--color-theme) !important;
    padding: 7px 12px;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: 500;
	text-align: center;
	font-size: 14px;
    white-space: nowrap;
}
.referral-wrap button.btn-tnc::after {
	display: none;
}
.referral-news {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: 0 auto;
}
.referral-news svg,
.referral-news i {
    color: var(--color-theme);
    font-size: 22px;
}
.referral-news p {
    font-weight: 500;
    padding-left: 8px;
}
.referral-copy {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-theme);
    margin-bottom: 16px;
}
.copy-info h6 {
    color: var(--color-theme);
    font-weight: 700;
    text-transform: uppercase;
}
.copy-info p {
    text-align: start;
}
.btn-copy .btn-tnc {
    padding: 5px 12px;
    text-transform: uppercase;
    font-size: 12px;
}
.referral-summary {
    background: var(--bg-color2);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-box);
}
.referral-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.referral-head p {
    text-transform: capitalize;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-theme);
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.referral-head p span {
    color: var(--black);
    padding-left: 4px;
    text-transform: capitalize;
}
.referral-head img {
    height: 35px;
}
.referral-body p {
    color: var(--color-theme);
    text-align: start;
    font-weight: 500;
}
.referral-row {
    color: var(--black2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    border-bottom: 1px solid var(--color-theme);
    padding-bottom: 12px;
    margin-bottom: 12px;
	font-size: 14px;
}
.referral-row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.referral-summary.record .referral-row {
    border-bottom: 0;
    margin-bottom: 0;
}
#tnc-referral {
	line-height: 1.5;
}
#tnc-referral .modal-dialog {
    height: initial;
}
#tnc-referral .modal-header,
#tnc-referral .modal-body {
    background: var(--bg-modal2);
}
#tnc-referral .modal-body {
    margin: 0;
    padding: 16px;
    border-radius: 0 0 10px 10px;
}
#tnc-referral .modal-header .btn-close {
    color: var(--color-theme);
    background: none;
    opacity: 1;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tnc-referral .modal-content {
    background-color: var(--bg-modal2);
    box-shadow: 2px 5px 16px 0 var(--black3);
	border-radius: 10px;
}
.tnc-referral {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tnc);
}
.tnc-referral h6 {
    font-weight: 700;
    font-size: 14px;
	color: var(--black2);
}
.tnc-referral ol {
    padding-left: 16px;
}
.tnc-referral ol > li {
    list-style: decimal;
    margin-bottom: 10px;
    padding-left: 8px;
}
.tnc-referral ul {
    padding-left: 16px;
}
.tnc-referral ul > li {
    list-style: disc;
    margin-bottom: 10px;
}
ul.dash {
    padding-left: 16px;
}
ul.dash > li {
    list-style: none; 
    margin-bottom: 2px;
}

ul.dash > li::before {
    content: "-";
    margin-right: 8px;
    margin-left: -12px;
}

@media (min-width: 768px) {
	.referral-wrap {
		padding: 32px 0;
	}
    .referral-item h1 {
        font-size: 26px;
    }
    .benefit-cash h4,
    .referral-item h1 span {
        font-size: 24px;
    }
    .referral-item h2 {
        font-size: 22px;
    }
    .tnc-referral h6 {
        font-size: 20px;
    }
    .step-wrap span,
    .benefit-cash h6 {
        font-size: 16px;
    }
    .referral-item p {
        font-size: 14px;
    }
    .tnc-referral {
        font-size: 13px;
    }
    .referral-benefit {
        padding-top: 50px;
    }
    .benefit-icon {
        top: -50px;
    }
    .benefit-icon img {
        height: 80px;
    }
    .glow-line {
        width: 60%;
    }
    .referral-share img.earn-arrow, 
    .referral-share img.earn-rocket {
        height: 70px;
    }
	.referral-share img.earn-arrow {
        top: -18px;
    }
    .referral-share img.earn-rocket {
        top: -30px;
    }
    #tnc-referral .modal-dialog {
        margin: 28px auto;
    }
    #tnc-referral .modal-header {
        height: inherit;
        border-radius: 10px 10px 0 0;
    }
    #tnc-referral .modal-body {
        padding: 0 32px 16px;
    }
}

@media (min-width: 992px) {
    #tnc-referral .modal-dialog {
        max-width: 800px;
    }
}

/* leaderboard */
.leaderboard-wrap {
    /* margin: 0 auto; */
	padding: 16px 0;
}
.leaderboard-banner {
    position: relative;
}
.leaderboard-trophy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.banner-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    padding: 12px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.banner-text h6 {
    white-space: nowrap;
    font-size: 12px;
    margin-bottom: 4px;
}
.banner-text h1 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-theme);
    margin-bottom: 4px;
}
.banner-text p {
    font-size: 8px;
    margin-bottom: 4px;
	color: #FFFFFF !important;
}
.banner-text p:last-child {
    margin-bottom: 0;
}
.banner-text p.small {
    font-size: 6px;
	white-space: nowrap;
}
.leaderboard-info {
    padding: 16px 0;
}
.leaderboard-info h3 {
    color: var(--color-theme) !important;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
.leaderboard-info > p {
    font-size: 10px;
    font-weight: 500;
    width: 95%;
    margin: 0 auto;
    text-align: center;
    color: var(--black2);
}
.leaderboard-reward {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-top: 16px;
}
@media (max-width: 360px) {
    .leaderboard-reward {
        grid-template-columns: 1fr;
    }
}
.leaderboard-item {
    display: flex;
    box-shadow: 0 16px 35px 0 var(--shadow-box2);
    background: var(--bgcolor-box2);
    background-image: var(--bg-leaderboard);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    position: relative;
}
.reward-detail {
    width: 75%;
    padding: 16px 12px;
	z-index: 1;
}
.reward-detail h4 {
    color: var(--color-theme);
    font-weight: 700;
    font-size: 12px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    position: relative;
}
.reward-detail h4::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-theme);
    height: 1px;
    width: 50%;
}
.reward-detail p {
    font-size: 8px;
    font-weight: 500;
    text-align: start;
    color: var(--black2);
}
.reward-icon {
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4px;
}
.reward-icon img {
    height: 80px;
}
a.leaderboard-more,
a.leaderboard-more:hover,
a.leaderboard-more:focus {
    color: var(--color-theme);
}
a.leaderboard-more {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    line-height: 1;
}
.tournament-wrap h3 {
    color: var(--color-theme);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
.tornament-head {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 8px;
    padding: 0 12px;
    font-size: 12px;
}
.tornament-head .form-select {
    font-size: 12px;
    border-color: var(--black2);
    padding: 4px 12px;
	background-image: var(--bgform-select) !important;
}
.tornament-head .form-select:focus {
    box-shadow: none;
}
.tournament-term {
    background: var(--color-theme);
    color: var(--white);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
}
.tornament-body  {
    margin-top: 16px;
}
.tournament-ranking {
    font-size: 12px;
}
.icon-top3 img {
    height: 30px;
	max-width: inherit;
}
.icon-rank {
    background: var(--color-theme);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 10px;
    cursor: pointer;
}
.tournament-ranking table {
    font-size: 10px;
    font-weight: 500;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.tournament-ranking table tr {
    border-bottom: 1px solid var(--border-line);
}
.tournament-ranking table th {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--black2);
    background-color: transparent;
    white-space: nowrap;
    border-bottom: 0;
}
.tournament-ranking table td {
    color: var(--black2);
    font-weight: 500;
    vertical-align: middle;
    background-color: transparent;
}
.tournament-ranking .table>:not(caption)>*>* {
    padding: 4px 8px;
}
.tournament-ranking table tr th:first-child,
.tournament-ranking table tr td:first-child {
    text-align: center;
}
.icon-prize img {
    height: 24px;
	max-width: inherit;
}
.tournament-ranking table tbody tr:nth-child(n+4) .icon-prize img {
    filter: grayscale(100%);
}
.tournament-ranking table tbody tr:first-child,
.tournament-ranking table tbody tr:nth-child(2),
.tournament-ranking table tbody tr:nth-child(3) {
    background: var(--bg-rank);
}
.tournament-ranking table tbody tr:first-child td,
.tournament-ranking table tbody tr:nth-child(2) td,
.tournament-ranking table tbody tr:nth-child(3) td {
    color: var(--white);
}
.tournament-ranking table tbody tr:first-child td:first-child,
.tournament-ranking table tbody tr:nth-child(2) td:first-child,
.tournament-ranking table tbody tr:nth-child(3) td:first-child {
    border-radius: 10px 0 0 10px;
}
.tournament-ranking table tbody tr:first-child td:last-child,
.tournament-ranking table tbody tr:nth-child(2) td:last-child,
.tournament-ranking table tbody tr:nth-child(3) td:last-child {
    border-radius: 0 10px 10px 0;
}
.prize-wrap {
    text-align: center;
    color: var(--color-theme);
}
.prize-wrap h5 {
    margin-top: 16px;
    font-weight: 700;
}
.prize-wrap p {
    font-weight: 500;
    margin-bottom: 0;
}
.modal-tournament .modal-header .btn-close {
    color: var(--color-theme);
    background: none;
    opacity: 1;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-tournament .modal-content {
    background-color: var(--bg-modal);
    box-shadow: 2px 5px 16px 0 var(--black3);
	border-radius: 10px;
}
.tnc-tournament {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-tnc);
}
.tnc-tournament h6 {
    font-weight: 700;
    font-size: 14px;
	color: var(--black2);
}
.tnc-tournament ol {
    padding-left: 16px;
}
.tnc-tournament ol > li {
    list-style: decimal;
    margin-bottom: 10px;
    padding-left: 8px;
}

@media (min-width: 768px) {
	.leaderboard-wrap {
		margin: 0 auto;
		max-width: 800px;
		padding: 32px 0;
	}
    .banner-text {
        padding-left: 24px;
    }
    .banner-text h1 {
        font-size: 28px;
        margin-bottom: 4px;
    }
	.tnc-tournament h6 {
		font-size: 20px;
	}
    .banner-text h6 {
        font-size: 18px;
    }
    .prize-wrap p {
        font-size: 16px;
    }
    .banner-text p,
    .reward-detail p {
        font-size: 14px;
    }
	.tnc-tournament {
        font-size: 13px;
    }
    .banner-text p span {
        display: block;
    }
    .banner-text p.small {
        font-size: 10px;
    }
    .leaderboard-info {
        padding: 32px 0;
    }
    .leaderboard-info h3,
    .tournament-wrap h3 {
        font-size: 26px;
    }
    .leaderboard-info > p {
        font-size: 14px;
        width: 75%;
    }
    .leaderboard-reward {
		grid-template-columns: 1fr;
    }
    .reward-detail h4 {
        font-size: 20px;
        padding-bottom: 12px;
        margin-bottom: 12px;
		width: 85%;
    }
    .reward-detail {
        width: 63%;
        padding: 20px;
    }
    .reward-icon {
        right: 32px
    }
    .reward-icon img {
        height: 140px;
    }
    a.leaderboard-more {
        margin-top: 16px;
        font-size: 14px;
    }
    .tornament-head {
        font-size: 16px;
        margin-top: 16px;
        padding: 0 20px;
    }
    .tornament-head .form-select {
        padding: 6px 12px;
        font-size: 16px;
    }
    .tournament-ranking table {
        font-size: 14px;
    }
    .tournament-ranking .table>:not(caption)>*>* {
        padding: 8px 8px;
    }
    .icon-top3 img {
        height: 40px;
    }
    .icon-rank {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .icon-prize img {
        height: 36px;
    }
}

@media (min-width: 992px) {
    #tournament-tnc .modal-dialog {
        max-width: 800px;
    }
	.reward-detail h4 {
		width: 80%;
    }
	.modal-tournament .modal-body {
		padding: 0 32px 16px;
	}
	.leaderboard-reward {
		grid-template-columns: repeat(2, 1fr);
    }
	.banner-text h1 {
		font-size: 36px;
		margin-bottom: 8px;
	}
	.banner-text h6 {
        font-size: 22px;
    }
}

/*lang temp css*/
.anncon .tab-content h1,
.anncon .tab-content h2,
.anncon .tab-content h3,
.anncon .tab-content h4,
.anncon .tab-content h5,
.anncon .tab-content p {
    word-break: break-all;  
}

/* login */
.custom-forgot-wrapper {
    margin-bottom: 0;
    text-align: end;
}
.form-check,
.custom-forgot-wrapper {
    flex: 1 1 auto;
}
.custom-forgot-wrapper {
    margin: 0 !important;
}
[class*=color11-] .custom-forgot-wrapper a {
    font-size: 12px;
}    
[class*=color11-] .form-check .form-check-label {
    font-size: 12px;
}
@media (max-width: 490px) {
  .ESP .custom-forgot-wrapper a {
    display: block;
  }
}
@media (max-width: 460px) {
  .RUS .custom-forgot-wrapper a {
    display: block;
  }
}
@media (max-width: 410px) {
  [class*=color11-] .custom-forgot-wrapper a {
      display: block;
  }    
}
@media (max-width: 360px) {
  .ESP .af-form .remark-group,
  .RUS .af-form .remark-group {
    flex-direction: column;
  }
  .ESP .form-check, 
  .ESP .custom-forgot-wrapper,
  .RUS .form-check, 
  .RUS .custom-forgot-wrapper {
    text-align: start;
  }
  .ESP .custom-forgot-wrapper a,
  .RUS .custom-forgot-wrapper a {
    display: initial;
  }
}
@media (min-width: 576px) {
  [class*=color11-] .custom-forgot-wrapper a {
      display: initial;
      font-size: 14px;
  }    
  [class*=color11-] .form-check .form-check-label {
      font-size: 14px;
  }
}
@media (min-width: 768px) {
  .ESP .custom-forgot-wrapper a {
      display: block;
      text-align: end;
      line-height: 24px;
  }    
}

/* sidebar menu (language) */
.lang {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

/* error message too small */
.error-msg,
form .error {
    font-size: 12px;
}

/* header login text */
.ESP .topnav .btn-submit,
.RUS .topnav .btn-submit {
    width: inherit;
    font-size: 11px;
}
.ESP .sidebar .items .btn-submit,
.RUS .sidebar .items .btn-submit {
    width: inherit;
}
.ESP .sidebar .items .btn-submit {
    font-size: 10px;
}

/* Homepage's product game gaps */
.glist.s2 .gggl {
    width: 100%;
}

/* deposit payment info */
.wallet2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
.wallet2 .box-wrapper {
    background: var(--bg-boxwrapper);
    border-radius: 10px;
    padding: 15px;
    width: 100%;
}
.wallet2 .w2-logo {
    height: 30px;
    margin-bottom: 5px;
    filter: var(--filter-payment);
    opacity: var(--opacity-payment);
}
.wallet2 .box-wrapper .box-text {
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 12px;
	color: var(--text-boxpayment);
}
.wallet2 .box-wrapper .box-text .copy-btn {
    margin-left: 5px;
    font-size: 1rem;
    background-color: var(--color-theme);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 600px) {
    .wallet2 {
        flex-direction:row;
    }
    .wallet2 .box-wrapper {
        width: 50%;
    }
}

/* leaderboard campaign modal */
.modal-tournament-campaign .modal-header .btn-close {
    color: var(--color-theme);
    background: none;
    opacity: 1;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-tournament-campaign .modal-content {
    background-color: var(--bg-modal);
    box-shadow: 2px 5px 16px 0 var(--black3);
	border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
}
.campaign-tournament {
    font-size: 14px;
    font-weight: 500;
    color: var(--black2);
    margin: 15px 0;
    border-radius: 10px;
    box-shadow: 0 16px 35px 0 var(--shadow-box2);
    background: var(--bgcolor-box);
    background-image: var(--bg-leaderboard);
    background-size: cover;
    padding: 15px;
}
.campaign-tournament:last-child {
    margin-bottom: 0;
}
.campaign-tournament h1 {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: bold;
    color: var(--color-theme);
    margin: 15px 0;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.campaign-tournament h1::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-theme);
    height: 1px;
    width: 50%;
}
.tournament-info {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tournament-info h6 {
    font-size: 14px;
    font-weight: bold;
    width: 50%;
    position: relative;
    padding-right: 5px;
    margin: 0;
}
.tournament-info h6:after {
    content: ":";
    float: right;
}
.tournament-info p {
    margin: 0;
    text-align: left;
    width: 50%;
    padding-left: 5px;
}
.tournament-term {
    cursor: pointer;
}
.modal-tournament-campaign .modal-dialog {
    max-width: 600px;
}
@media (min-width: 992px) {
    .modal-tournament-campaign .modal-body {
        padding: 0 32px 16px;
    }
}

/* vietnamese, malay & nepali issues */
.topnav .btn-submit {
    width: inherit;
}
.logo-text {
    text-wrap: inherit;
    line-height: 1;
}
.ann-title {
    white-space: nowrap;
}
.btn-submit {
    white-space: nowrap;
}
.sidebar .items .btn-submit {
    width: 82px;
}
.VI .sidebar .items .btn-submit,
.MS .sidebar .items .btn-submit {
    font-size: 12px;
}
.btns2.wb {
    text-align: center;
}
#modal-partner .btn-close {
    top: 0;
    right: 0;
}