@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: 12px; 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 {color:var(--href-color)}
    a.ss1:hover { color:var(--href-colorHover) }

img {max-width: 100%;}
hr { color: var(--fnav-colorBorder); margin: 0.5rem 0; opacity: 1; }
.des { display: block; }
.mob { display: none; }
.btn-submit { font-size:20px; font-weight:bold; padding:6px 24px; border-radius:8px; color:var(--btns-color5); background: var(--btns-color1); border:0; width:100%; cursor:pointer; text-align:center }
    .btn-submit:hover { filter:brightness(1.2) }

.btns { font-size:14px; padding:10px 16px;border-radius:8px; color:var(--btns-color5); background:var(--btns-color1); display:flex; gap:8px; align-items:center; justify-content:center; white-space:nowrap; flex-direction: column;}
    .btns img { max-height:28px }
    .btns.aaa, .btns:hover,.btns.s2:hover {filter:brightness(1.4)}
    .btns.s2 { color:var(--btnnav-color2); background:var(--btns-color4); border-color:var(--btns-color6) }
    .btns img, .btns2 img { filter:var(--greyscale); }
    .btns.aaa img, .btns:hover img, .btns2.aaa img, .btns2:hover img { /*filter:var(--hue-adjust);*/}
.mg { display: flex; flex-direction: column; gap: 12px; text-transform: uppercase; font-weight: bold; font-size: 18px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--fnav-colorBorder);}
    .mg-btns { border: 1px solid var(--color-primary); border-radius: 8px; padding: 4px 10px; background: var(--btns-color2); color: var(--mg-text);}
    .mg-btns img { filter: none; max-height: 70px;}
    .mg-btns:hover img { filter: none;}
    .mission { background: var(--mg-mission-bg); border: 2px solid var(--mg-mission-border);}
    .wheel { background: var(--mg-wheel-bg); border: 2px solid var(--mg-wheel-border); }
    .tournament { background: var(--mg-tournament-bg); border: 2px solid var(--mg-tournament-border);}

.btns2 { font-size:12px; font-weight:bold; color:var(--color-btns); display:flex; align-items:center; justify-content:space-evenly; 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);}

.btnnav { color:var(--btnnav-color1); border-bottom:3px solid transparent; font-size:12px; padding: 0 8px; font-weight:bold; height:56px; display:flex; justify-content:center; align-items:center }
    .btnnav.aaa, .btnnav:hover { background-color:var(--btnnav-color2); border-color:var(--btnnav-color3) }

.btnimg { display:flex; gap:4px; color:var(--btnimg-color1); font-size:14px; font-weight:bold; justify-content:center; align-items:center }
    .btnimg img { max-height:30px }

.topnav { position:fixed; top:0; left:0; width:100%; z-index:11; background:var(--bgcolor-navtop);}
    .topnav .logo { margin-bottom:0; max-width:220px }
    .topnav .con { width:100%; margin:0 auto; padding:0px 16px }

.btmnav { position:fixed; bottom:0; left:0; width:100%; z-index:11; background:var(--bgcolor-navmob); justify-content:space-evenly; align-items:center; height:60px; display:none; overflow:hidden }
    .btmnav .btns2 { width:100%; height:100%; }

.subnav { display:flex; overflow-x:auto; gap:6px }
    .subnav a { padding:0px 26px; width:100%; height:40px; background:var(--subnav-bgcolor); color: var(--subnav-text); border:1px solid var(--subnav-colorBorder); border-radius:6px; display:flex; justify-content:center; align-items:center; font-weight:bold; white-space:nowrap; font-size:14px}
    .subnav a.active, .subnav a:hover { background:var(--btns-active); color: var(--btns-active-text); border:1px solid var(--btns-active-border); }

.main-wrap { position:relative }

.logo-text { font-size: 34px; font-weight: 900; font-style: italic; text-align: center;}
    .logo-text span:first-child { color: var(--logo-text); }
    .logo-text span:last-child { color: var(--logo-text2); }

.topnavbar { display: flex; align-items: center; padding: 0px 20px 0px 80px; box-shadow: 0px 5px 10px #00000042;}
    .topnavbar .con { display:flex; justify-content:space-between; align-items:center; gap:12px; height:70px }
    
.nlbar { display:flex; gap:6px; justify-content:center; align-items:center }
    .nlbar .nnav { display:flex; gap:16px; padding-left:16px; color: var(--color-text); }
        .nlbar .nnav a { text-transform:uppercase; font-size:16px }
    .nnav img { max-height:28px; filter:brightness(8) }
.nvbar { display:flex; justify-content:end; align-items:center; gap:6px }
.nvbar .nbin { display:flex; justify-content:end; align-items:center; gap:6px; }
.nbin .btns { min-width: 110px; flex-direction: row;}
.nbin.af .btns { min-width: inherit; }

.language-wrap { margin-right: 5px; }
    button.language-btn {background: none;border: none;padding: 0;height: 30px;width: 30px;}
    .lang-c {display: flex;align-items: center;font-size: 14px;gap: 2px;cursor: pointer; color: var(--color-text);}
    button.language-btn img { max-height: 20px; }
    .dropdown-menu.language {background: black;max-width: 30px;min-width: auto;border: none;margin: 0;padding: 0; }
    button.language-btn.dropitem { margin: 2px 0;}
    button.language-btn.dropitem:hover { transform: scale(1.03); filter: brightness(1.05); }

.sidebar { padding:16px 12px; position:fixed; z-index:18; left:0px; top:0px; width:80px; height:100%; overflow-y:auto; background:linear-gradient(90deg, var(--bgcolor-sidebar), var(--bgcolor-sidebar2));transition: all 0.3s; }
    .sidebar .items { display:flex; gap:16px; flex-direction:column; margin-bottom:24px; padding: 0 0px 12px; border-bottom:1px solid rgba(255,255,255,0.1); }
    .sidebar .items:last-child { border-bottom:0 }
    .sidebar .items .btns { padding: 5px; background: var(--btns-color3); color: var(--color-primary);}
    .sidebar .items .btns span, .sidebar .items .btnimg span { display:none }

.sidebar-menu { font-size:26px; text-align:center; padding-bottom:12px; margin-bottom:12px; color: var(--color-primary); }
.hnb .sidebar-menu { text-align: right; }
.hnb .sidebar-menu svg { transform:scaleX(-1) }
.content-wrap { width:100%; padding-top:70px; padding-left:80px} 
    .content-wrap .con { max-width:1140px; margin:0px auto; padding:32px 24px; }

.content-header {  }

.content-top { background:var(--bg-content);background-size:cover; background-position: top center; }
    .content-top .con { padding:16px }
.content-btm { background-color:var(--bgcolor-content2) }
.footer-wrap { background-color:var(--bgcolor-content2) }
    .footer-wrap .con { max-width:100%; padding:16px; display:flex; gap:24px }
    .footer-wrap .con .bbox { width:50% }
.ex-menu .nav-link { color: var(--color-text);}
.ex-menu .nav-link:hover { color: var(--color-primary); }

.collapse-wrap { padding:16px; display:flex; gap:12px; flex-wrap:wrap }
.collapbox { width:calc(50% - 6px) }
    .collapbox .ttop { border-radius:4px; background-color:var(--collapse-bg); color:var(--collapse-text); font-size:14px; display:flex; justify-content:space-between; align-items:center; padding:12px }
        .collapbox .ttop h6 { margin:0; font-size:14px }
        .collapbox .ttop span { font-size:20px }
    .collapbox .ccon { background-color:var(--collapse-bg2); padding:12px; border-radius:0 0 4px 4px }

.conwrap { margin:0px }

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

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

.gamecats-wrap { padding:16px }
    .gamecats-wrap .gctop { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px }
        .gamecats-wrap .gctop h5 { color:var(--gamecats-text); padding:0; margin:0 }
        .gamecats-wrap .gctop a { color:var(--gamecats-text); font-size:14px }
    .gamecats-wrap .gccon {  }

.gamewrap { margin: 0px 0px 16px; border-radius:16px; background:var(--lobby-bg);  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; border-radius:8px; background-color: var(--gamelist-bgcolor); cursor:pointer; border:1px solid var(--gamelist-border); }
    .gggl .iimg { /*background:var(--miss-thumb);*/ background-size: 90%;  border-radius:8px; overflow:hidden; display:block; position:relative; padding-top:100%;}
        .gggl .iimg img { width:100%; position:absolute; top:0; left:0 }
    .gggl .name { font-size:12px; text-align:center; width: 100%; padding:8px; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .gggl .fav { position:absolute; font-size:16px; right:5px; top:5px; color:var(--unfav-thumb); cursor:pointer; background: var(--unfav-bg); border-radius: 50px; padding: 5px; filter: drop-shadow(-2px 3px 1px black); z-index: 9; }
        .gggl .fav.aaa { background: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: 0px; gap:12px }
    .globby.s2 { padding: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; }

.hlobby .globby { padding: 0px; gap:5px }
.hlobby .gggl { cursor:pointer; position:relative; padding:0px; margin:4px; border-radius:8px; background-color:var(--gamelist-bgcolor) }
    .hlobby .gggl .iimg { border-radius:8px; overflow:hidden; display:block; position:relative; padding-top: 0px; }
        .hlobby  .gggl .iimg img { width:100%; position: relative; }
    .hlobby .gggl .name { font-size:12px; text-align:center; padding-top:4px; color:var(--gamelist-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:absolute; bottom:0; width:100%; z-index:1; display:flex; flex-direction:column; padding:35px 0px 5px 0px; background: linear-gradient(180deg, #00000000, #000000); }
        .hlobby .gggl .name span { margin: 0px auto; font-weight:bold; overflow: hidden; width: 90%; white-space: nowrap; text-overflow: ellipsis; }
        .hlobby .gggl .name small { font-size:10px; }
.hlobby .gggl:hover .iimg::before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.7); top:0; left:0 }
.hlobby .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%) }

.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 var(--tab-border);}
.g-pro:hover, .g-pro.active { background: var(--tab-bg2); border: 1px solid transparent; }

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


.glprovider { display: flex; justify-content: space-between; padding: 0px 15px;}
    .glprovider .dropdown .dropdown-menu {background: var(--subnav-bgcolor); width: 210px; z-index: 10;}
    .glprovider .dropdown .dropdown-menu .dropdown-item { color: var(--subnav-text); display: flex; align-items: center; justify-content: flex-start; font-weight: bold; min-height: 40px;}
    .glprovider .dropdown .dropdown-menu .dropdown-item:focus,.glprovider .dropdown .dropdown-menu .dropdown-item:active, .glprovider .dropdown .dropdown-menu .dropdown-item:hover {background: var(--btns-active); color: var(--btns-active-text);}
    .glprovider .dropdown .dropdown-menu .dropdown-item:focus .iimg, .glprovider .dropdown .dropdown-menu .dropdown-item:hover .iimg { }
    .gl-pro { display: flex; background: var(--subnav-bgcolor); color: var(--subnav-text2); border: 1px solid var(--subnav-colorBorder); border-radius: 8px; height: 50px; min-width: 140px; max-width: 170px; align-items: center; justify-content: space-evenly;}
    .dropdown .dropdown-item .iimg img { max-height: 30px; margin-right: 10px; }
    .gl-pro p {color: var(--subnav-text); margin: 0px; font-size: 16px; font-weight: bold; overflow: hidden;}
    .g-cat { color: var(--color-secondary); text-align: center; font-size: 40px; font-weight: 700; border-bottom: 1px solid var(--fnav-colorBorder); margin-bottom: 20px; padding-bottom: 15px;}

.modal-provider { max-width:700px }
.modal-provider .modal-content { background: var(--bg-modal); border: none; }
.provider-list { display: flex; flex-wrap: wrap; }
.provider-list img { max-height: 50px; }

.glfunc { position:relative; display:flex; justify-content:space-between; padding:15px 15px 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 }

.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:auto!important }

.winner-wrap { display:flex; gap:18px; padding:24px 0px; align-items:center }
    .winner-wrap .ll, .winner-wrap .rr { width:50% }

.wlist-wrap { border-radius:16px; background-color:var(--winner-bgcolor); padding:16px; height: 390px; }
    .wlist-wrap h3 { margin:0px; padding:0; color:var(--winner-title); text-align:center; font-size:16px; font-weight:bold }

.wlist { padding:8px; border-radius:8px; background:var(--wlist-bgcolor); border:2px solid var(--wlist-colorBorder); font-size:12px; margin-top:12px }
    .wlist .ww { display:flex; align-items:center; justify-content:space-between; padding:2px 0px }
    .wlist .nname { color:var(--wlist-color) }
    .wlist .time { color:var(--wlist-color) }
    .wlist .prov { color:var(--wlist-color) }
        .wlist .prov strong { color:var(--wlist-color2) }
        .wlist .amounts { color:var(--wlist-color3); font-weight: bold; }
.winner-swiper {
    height: 320px;
    overflow: hidden;
    margin-top: 20px;
}

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

.copyright-wrap { text-align:center; font-size:12px; color:var(--color-text); margin:16px; padding:16px; border-top:1px solid var(--fnav-colorBorder);  }
    .copyright-wrap span { font-weight:bold; color:var(--color-secondary) }

.provider-wrap { display:flex; justify-content:space-evenly; align-items:center; gap:6px; flex-wrap:wrap;}
    .provider-wrap img { max-width:100px; filter: var(--ft-greyscale); }

.license { display: flex; justify-content: center; gap: 8px; font-size:10px; align-items:center; margin: 0px auto; }
    .license img { margin: 0px 10px; max-height: 30px; }
    .license b { color:var(--color-secondary) }

.fnav-wrap { padding-bottom:20px; color: var(--color-text); }
    .fnav-wrap:last-child { margin-bottom:0 }
    .fnav-wrap .ttitle { font-size:12px; font-weight:bold; padding-bottom:12px; }
    .fnav-wrap .cons { display:flex; align-items:center; gap:12px; flex-wrap: wrap; }
    
.fnav { display:flex; align-items:center; gap:6px }
    .fnav .iimg {  }
        .fnav .iimg img { max-height:40px; }
        .fnav.s2 .iimg img { max-height:28px; }
    .fnav .ttext { font-size:10px; font-weight:bold; color:#ffffff }

.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:24px; color:var(--apps-desc); border-bottom:1px solid var(--apps-colorLine); margin-bottom:12px; padding-bottom:12px; align-items:center }
        .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: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:var(--apps-s2bg); border:1px solid var(--apps-s2border); color:var(--apps-s2text); }

body.hnb .sidebar { left:0 }
/*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) }*/

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

/*pop up ann*/
.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: 10px;}
.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:var(--ann-tab); color: var(--ann-tabtext);}
    .anncon .tab-content { width:100% }
        .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);}
/*pop up ann - end*/

/*rtt*/
.realtime-trans { display:flex; background-color:var(--realtime-bg); align-items:center; height: 60px ; 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; }
/*rtt - end*/

.realtime-wins { display:flex; align-items:center; margin:0px; overflow:hidden; margin-bottom:10px; padding:16px }
    .realtime-wins .ccon { width:100%; }
    .realtime-wins .rtop { display:flex; justify-content:space-between; margin-bottom:16px }

.rtw-wrap { width:100% }
.rtwbox { display:inline-flex; justify-content: center; position:relative; padding:0px 6px}
    .rtwbox .iimg {  }
    .rtwbox .iinfo { display:flex; flex-direction:row; font-size:12px; line-height:normal; justify-content:start; align-items:center; position:absolute; bottom:8px; left:8px; width:calc(100% - 16px); gap:8px; background-color:rgba(0,0,0,0.8); border-radius:4px; padding:6px 18px }
        .rtwbox .iinfo .iicon { font-size:24px; color:#ffb900 }
        .rtwbox .iinfo .ddesc { display:flex; flex-direction:column }
            .rtwbox .iinfo .ddesc span { display:flex; flex-direction:column }
            .rtwbox .iinfo .ddesc strong { color:var(--color-primary) }

.menu-wtabs { background-color:var(--tabs-bg); border-radius:6px; font-size:14px; display:flex; padding:4px }
    .menu-wtabs a { padding:8px 24px; border-radius:6px; color:var(--tabs-text) }
    .menu-wtabs a.active, .menu-wtabs a:hover { background-color:var(--tabs-bg-active); }
    
.menu-wsel { background-color:var(--tabs-bg); border-radius:6px; font-size:14px; display:flex; padding:4px; align-items:center; gap:8px }
    .menu-wsel span { padding-left:8px }
    .menu-wsel select { background-color:var(--tabs-bg-active); border:0; color:var(--tabs-text); padding:6px 18px; border-radius:6px }

/*promo*/
.pfilter {
    margin: 20px 0px ;
    display: flex;
    overflow-x: scroll;
    justify-content: space-around;
}
.pfilter::-webkit-scrollbar { display: none; }
.ptab {
    border-radius: 8px;
    background: var(--subnav-bgcolor);
    color: var(--subnav-text);
    border: 1px solid var(--subnav-colorBorder);
    font-size: 16px;
    display: inline-block;
    text-align: center;
    padding: 10px 18px;
    margin: auto 5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ptab:hover, .ptab.active {
    background: var(--btns-active);
    color: var(--btns-active-text);
    border: 1px solid var(--btns-active-border);
    text-decoration: none;
    cursor: pointer;
}
.promo-content {
    display: flex;
    flex-wrap: wrap;
    color: var(--color-text);
    justify-content: space-between;
    gap: 20px 0px;
}
.promo-box {
    cursor: pointer;
    border-radius: 20px;
    width: 49%;
}
.promo-box:last-child { margin-bottom: 0px; }
.promo-box .accordion-body { padding: 20px; }
.ptitle { color: var(--color-primary); }
.promo-tumbnail img { border-radius: 20px; }
.promo-box.mix { display: none }

.modal-promo { max-width:700px }
.modal-promo .modal-content { background: var(--bg-modal); border: none; }
.modal-promo .modal-header { border-bottom: 0px; text-align: center; padding: 10px; background: var(--bg-modal); border-radius: 16px 16px 0px 0px;}
.modal-promo .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; }

/*promo-end*/

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

/*info-page*/
.fex-menu {display: flex;justify-content: space-around;font-size: 14px;}
.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-text2);}
.table-info .table thead { background: var(--table-bg); vertical-align: top;}
.table-info .table thead td { color: var(--table-text); font-size: 14px; font-weight: bold; }
.table-info .table th { background: var(--table-bg); color: var(--table-text);}
.table-info .table th, .table-info .table tr, .table-info .table td { border-color: var(--color-border); border-width: 1px; }
/*info-page end*/

/*af*/
input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active  { transition: background-color 5000s;}
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: -0.5rem;
    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; background: var(--afbg); background-size: cover; background-color: var(--afbg-base); padding: 15px; border-radius: 16px;}
    .af-box h4 { text-align: center; padding:40px 0px; color: var(--color-secondary); }

.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(--form-input-text); outline: none; background-color: transparent; }
    .af-form .input-group select.form-control {background-color: var(--form-input-bg2) !important;}
    .af-form .input-group .form-control::placeholder { color:var(--form-input-text); }
    .af-form .input-group .form-control:focus { box-shadow: none }
    .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);--bs-form-check-bg-image: var(--form-input-checked);}
    .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; }
    .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: 14px; 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: 5px;
}
.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-secondary);}
.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(--form-cta-bg)}
.menu-list .form-til { cursor: pointer; padding: 10px; }
.profile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.profile a { color: var(--color-secondary); }
.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-secondary); 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);
}
.wallet-bal {width: 60%; margin: 0px auto;}
    .wallet-bal .form-box {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background: var(--afbg);}
    .wallet-bal .form-box .form-til { color: var(--btn-color1); }
    .wallet-bal .form-box .statistic .s-data { min-width: 70px; }
    .wallet-bal .form-box .statistic .s-data img {filter: var(--greyscale);max-height: 30px;}
    .wallet-bal .form-box .statistic .s-data:hover .s-label { color: var(--btns-color2); }
    .wallet-bal .form-box .statistic .s-data:hover img { filter: brightness(0); }


.form-til { font-weight: bold; color: var(--color-secondary); font-size: 18px; text-align: left;}

.statistic {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
    .statistic .s-data {
    background: var(--btn-color3);
    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 .s-label { white-space: nowrap; }
    .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);
}
.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;
}
.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(--form-input-text);
    border: 1px solid var(--form-border);
}
.t-type.bal {
    background: transparent;
    font-size: inherit;
    margin-bottom: 0px;
    color: var(--color-secondary);
    border: none;
}
.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);
    border: 1px solid var(--form-border);
}
.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); border: 1px solid var(--form-border); }
.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);
}
.accordion-button:not(.collapsed)::after { background-image: var(--accordion-active);}
.accordion-button::after { background-image: var(--accordion-before); }
/*af-end*/

@media (min-width: 768px) {
    body.hnb {  }
    body.hnb .sidebar { width:200px }
    body.hnb .sidebar .items { flex-direction:column; }
    body.hnb .sidebar .items a { width:100%; flex-direction:row; justify-content:left }
    body.hnb .sidebar .items a span { display:block }
    body.hnb .content-wrap, body.hnb .topnavbar { padding-left:200px }
}

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

    .nlbar .nnav { display:none }

}

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

}

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

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

    .sidebar { left:-280px }
    .content-wrap { padding: 60px 0; font-size: 12px;}
    .content-wrap .con {  }
    .content-top .con {  }
    .content-btm .con {  }
    .footer-wrap .con { flex-wrap:wrap }
    .btmnav { display:flex }

    .topnavbar { padding: 0px; }
    .topnav .logo { margin-bottom: 0; max-width: 160px;}
    .topnavbar .con  { padding:0 6px; height: 60px; }
    .nbin .btns { min-width: 40px;}
    .nbin.af .btns { padding: 10px; }

    .wallet-bal {width: 100%;}
    .wallet-bal .form-box { flex-direction: column; align-items: stretch; }
    .wallet-bal .form-box .form-til { display: flex; align-items: center; }

    .promo-box{ width: 100%; }


    .payment-wrap img { max-width:18vw }
    
    .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 }

    .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); }
    .gamecons { margin:8px 0px }
    .gametabs { font-size:3vw }

    .winner-wrap { flex-wrap:wrap; }
    .winner-wrap .ll, .winner-wrap .rr { width:100%; text-align:center }

    .fnav-wrap .cons { flex-wrap:wrap }
    .fnav .iimg img { max-height:32px }
    .fnav.s2 .iimg img { max-height:24px }

    .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; text-align:center }
    .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 }
    .statistic { flex-wrap: wrap; justify-content: flex-start; }
    .statistic .s-data { width: auto; min-width: 105px; }

    .rtwbox .iinfo { font-size:2.2vw; padding:6px}
        .rtwbox .iinfo .iicon { font-size:4vw;}

    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) }

    .menu-wtabs, .menu-wsel { font-size:2.6vw; }
        .menu-wtabs a { padding:6px 12px }

    .gamecats-wrap .gctop h5 { font-size:4vw }
    .gamecats-wrap .gctop a { font-size:2.4vw }

    .collapbox { width:100% }
    .collapbox .ttop h6 { font-size:2.8vw }

    .footer-wrap .con .bbox { width:100% }

}

@media only screen and (max-width: 430px) {
     .wallet { display: grid; grid-template-columns:repeat(3, 1fr) }


}

@media only screen and (max-width: 330px) {
    .gl-pro { min-width: 110px; }
    .glfunc { padding: 15px 5px 0px; }
    .gl-fav .glfav { margin-right: 10px ; }
    .wallet { display: grid; grid-template-columns:repeat(2, 1fr) }


}

/* swiper main banner */
.banner-wrap .swiper-slide {
    border-radius: 0;
}
.banner-wrap .swiper-slide img {
    width: 100%;
}
.swiper-pagination-bullet {
    background: #ccc;
    opacity: .7;
}
.swiper-pagination-bullet-active {
    background: #ffffff;
    transform: scale(1.4);
}

.topnav .nvbar .nbin.logged-in .btns:first-child {
    display: none;
}

@font-face {
    font-family: 'Exo';
    src: url('../webfonts/Exo-BlackItalic.woff') format('woff2'),
        url('../webfonts/Exo-BlackItalic.woff2') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Exo';
    src: url('../webfonts/Exo-Black.woff') format('woff2'),
        url('../webfonts/Exo-Black.woff2') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* logo text */
.logo-text {
    font-family: 'Exo';
    font-weight: 900;
    font-style: italic;
    font-size: 28px;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    text-wrap: nowrap;
    display: flex;
    align-items: center;
}

.sidebar .items a.btns.btn-special img {
    filter: none;
    max-height: 36px;
}
.af-form .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* rewards */
.reward {
    position: fixed;
    bottom: 100px;
    right: 16px;
    z-index: 1001;
    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: 100px;
    }
    50% {
        bottom: 106px; 
    }
}
.reward img {
    height: 80px;
}

@media (max-width: 374px) {
    .logo-text {
        font-size: 24px;
    }
}

@media (max-width: 344px) {
    .logo-text {
        font-size: 18px;
    }
}

@media (min-width: 440px) {
    .topnav.logged-in .nvbar .nbin .btns:first-child {
        display: block;
    }
}

@media (min-width: 768px) {
    .topnav .logo img {
        height: 48px;
    }
    .logo-text {
        font-size: 36px;
    }
}

@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,
.leaderboard-wrapper 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;
}
.b-table table td {
    background-color: transparent;
} */

/*table default*/
.modal-promo 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;
}
.modal-promo table thead{
    background-color:var(--table-bg);
    color: var(--table-text);
}
.modal-promo table thead th{
    padding: 10px 15px;
    background-color:rgba(0,0,0,0.05);
}
.modal-promo table thead th:last-child{
    border-radius: 0 10px 0 0;
}
.modal-promo table tbody td{
    padding: 7px 15px;
    background-color: var(--bgcolor-table);
}
.modal-promo table tbody tr:last-child td:last-child{
    border-radius: 0 0 10px 0;
}

/* new referral */

/* referral */
.referral-wrap {
    max-width: 800px;
    margin: 0 auto;
}
.referral-item {
    margin-bottom: 16px;
}
.referral-item h1 {
    color: var(--refer-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(--refer-color-theme);
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}
.referral-item h2 span {
    color: var(--refer-black);
    text-transform: uppercase;
}
.referral-item p {
    color: var(--refer-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(--refer-color-theme);
    color: var(--refer-color-theme);
    background: var(--refer-bgcolor-box);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.benefit-item {
    background: var(--refer-bgcolor-box);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--refer-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(--refer-black);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.benefit-cash h4 { 
    text-align: center;
    color: var(--refer-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(--refer-color-theme) 50%, #FFFFFF00 100%);
}
.benefit-item p {
    color: var(--refer-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(--refer-color-theme);
    display: flex;
    align-items: center;
    padding: 0 28px;
    margin-bottom: 6px;
}
.step-wrap img {
    height: 30px;
}
.step-wrap span {
    font-weight: 700;
}
.step-wrap span.dot {
    padding: 0 10px;
    font-size: 20px;
}
.referral-step p {
    color: var(--refer-black);
    font-weight: 500;
    text-align: start;
    padding: 0 10px;
}
.referral-share {
    background: var(--refer-bgcolor-box2);
    box-shadow: var(--refer-shadow-box);
    border-radius: 16px;
    position: relative;
    border-radius: 16px;
    margin-bottom: 12px;
    background-image: var(--refer-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(--refer-black);
}
.btn-earn {
    background: var(--refer-color-theme);
    border-radius: 5px;
    color: var(--white);
    padding: 7px 12px;
    box-shadow: inset -2px -2px 4px -1px #00000080;
	width: 100%;
    border: none;
}
.referral-wrap button.btn-tnc {
    background: var(--refer-bgcolor-box) !important;
    border: 1px solid var(--refer-color-theme);
    color: var(--refer-color-theme) !important;
    padding: 7px 12px;
    border-radius: 5px;
    text-transform: capitalize;
    font-weight: 500;
	text-align: center;
}
.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(--refer-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(--refer-color-theme);
    margin-bottom: 16px;
}
.copy-info h6 {
    color: var(--refer-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(--refer-bg-color);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--refer-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(--refer-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(--refer-color-theme);
    text-align: start;
    font-weight: 500;
}
.referral-row {
    color: var(--refer-black2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    border-bottom: 1px solid var(--refer-color-theme);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.referral-row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.referral-summary.record .referral-row {
    border-bottom: 0;
    margin-bottom: 0;
}
#tnc-referral .modal-dialog {
    height: initial;
}
#tnc-referral .modal-header,
#tnc-referral .modal-body {
    background: var(--refer-bg-modal);
}
#tnc-referral .modal-body {
    margin: 0;
    padding: 16px;
    border-radius: 0 0 10px 10px;
}
#tnc-referral .modal-header .btn-close {
    color: var(--refer-color-theme);
    background: none;
    opacity: 1;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tnc-referral .modal-content {
    background-color: var(--refer-bg-modal);
    box-shadow: 2px 5px 16px 0 var(--refer-black3);
	border-radius: 10px;
}
.tnc-referral {
    font-size: 11px;
    font-weight: 500;
    color: var(--refer-color-text-tnc);
}
.tnc-referral h6 {
    font-weight: 700;
    font-size: 14px;
}
.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-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;
    }
}

/* login */
.login-div .custom-forgot-wrapper {
    margin-bottom: 0;
}
.login-div .form-check,
.login-div .custom-forgot-wrapper {
    flex: 1 1 auto;
    text-align: end;
}
.login-div .form-check .form-check-label {
    transform: translateY(1px);
}
.login-div .custom-forgot-wrapper {
    margin: 0 !important;
}
[class*=color16-] .login-div .custom-forgot-wrapper a {
    display: block;
}  
 
#button-addon2{
    padding: 8px;
    max-width: 80px;
    font-size: 12px;
    line-height: 12px;
}

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