@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

body { font-family: "Figtree", sans-serif; font-size: 14px; background:var(--body-bgcolor); color:var(--body-fontcolor); overflow-x: hidden; margin:0 auto;}

* {transition: all 0.3s;}
*, ::after, ::before {box-sizing: border-box;}

img { max-width:100% }

.w100px { width:100px }
.w150px { width:150px }

.hide { display:none }

label.error { font-size:11px; padding-top:3px; color:var(--color-red); font-weight:bold; display:block }

.text-green { color:var(--color-green) }
.text-red { color:var(--color-red) }

.font-10 { font-size:10px!important }

a {text-decoration: none; color:var(--a-color) }

.cons { padding:0px 12px }
    .cons.s2 { max-width:1080px; margin:0 auto }

.btns {border-radius:80px;font-size:18px;font-weight:bold;display:flex;justify-content:center;align-items:center;background:var(--btns-bgcolor);color:var(--btns-textcolor);text-transform:uppercase;width:100%;padding:6px;border:0;border: 1px solid #f7e1a5;box-shadow: inset 0 0 5px 1px #ff9100;}
    .btns.s2 { background:var(--btns2-bgcolor); color:var(--btns2-textcolor) }
    .btns.s3 { background:var(--btns3-bgcolor); color:var(--btns3-textcolor) }
    .btns:hover { filter:brightness(1.2) }
    .btns.ani { animation-name:buttonGlowing; animation-duration:1.5s; animation-timing-function:linear; animation-direction:normal; animation-iteration-count:infinite; }
    .btns[disabled] { filter:grayscale(1) brightness(0.5); pointer-events:none } 

@keyframes buttonGlowing {
  60% {filter:brightness(1.4) drop-shadow(0px 0px 12px var(--btns-glowcolor)) }
}

.btnswi { border-radius:80px; font-size:18px; font-weight:bold; display:flex; justify-content:space-between; align-items:center; background:var(--btnswi-bgcolor); color:var(--btnswi-textcolor); text-transform:uppercase; width:100%; padding:6px 18px }
    .btnswi span { width:100%; text-align:center }
    .btnswi i {  }
    .btnswi:hover { filter:brightness(1.2) }

.btnimg {display:flex;gap:8px;flex-direction:column;justify-content:center;align-items:center;color:var(--btnimg-textcolor);background:var(--btnimg-bgcolor);font-size:12px;font-weight:bold;border-radius:24px;padding:6px;position:relative;border: 1px solid #000000;}
    .btnimg span { white-space:nowrap }
    .btnimg:hover, .btnimg.aaa {color: #f7e1a5;background:var(--btnimg-bgcolor-hover);box-shadow: inset 0 0 5px 1px #ff9100;border: 1px solid #f7e1a5;}
    .btnimg:hover img, .btnimg.aaa img { filter:var(--btnimg-img-hover) }

.btnimglr { display:flex; gap:8px; justify-content:center; align-items:center; color:var(--btnimglr-textcolor); background:var(--btnimglr-bgcolor); height:60px; padding:0 16px; border-radius:80px; font-weight:bold; line-height:normal; position:relative }
    .btnimglr img { max-width:34px; }
    .btnimglr:hover, .btnimglr.aaa {background:var(--btnimglr-bgcolor-hover);color: #f7e1a5;border: 1px solid #f7e1a5;box-shadow: inset 0 0 5px 1px #ff9100;}
    .btnimglr:hover img, .btnimglr.aaa img { filter:var(--btnimglr-img-hover) }

#loading { z-index: 1080; position: fixed; width: 100%; top: 0; bottom: 0; display:none }
#loading.aaa { display:block }
#loading .mask { height: 100%; width: 100%; background: #000; opacity: .6;}
#loading .mask img { position: absolute; top: 50%; left: 50%; width: 100px; margin: -50px; -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear;}
#loading .logo { position: absolute; top: 50%; left: 50%; height: 80px; width: 80px; margin: -40px; background-size: cover; background-position: center; background-color: #000; border-radius: 100%;}

@keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

.startgame-wrapper { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1079; display:none }
.startgame-wrapper.aaa { display:block }
.startgame { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#ffffff }
    .startgame .frame { width:100%; height:calc(100% - 46px) }
        .startgame .frame iframe { width:100%; height:100%; }
    .startgame .frame-close { height:46px; font-size:16px; font-weight:bold; color:#ffffff; background-color:#222222; display:flex; justify-content:center; align-items:center; cursor:pointer; text-transform:uppercase }
        .startgame .frame-close:hover { filter:brightness(1.3) }
.startgame-close { display:none; position:absolute; width:100%; height:100%; top:0; left:0; justify-content:center; align-items:center; background:rgba(0,0,0,0.6); z-index:1 }
.startgame-close.aaa { display:flex }
.sgc { padding:24px; background-color:#111111; color:#ffffff }
    .sgc h5 { font-size:16px; }
    .sgc .sgc-btn { margin-top:20px; display:flex; justify-content:center; align-items:center; gap:12px }
    .sgc .sgc-btn button { border:2px solid #ffffff; color:#ffffff; background:transparent; width:100%; padding:2px; text-transform:uppercase }
    .sgc .sgc-btn button:hover { color:#ffc107; border-color:#ffc107 }

.download-pop-wrapper {  }
.prov-title-img { text-align: center; padding-bottom: 10px; }
.access-info { text-align: center; overflow: auto; margin: 10px auto 15px; font-size: 14px; }
.download-wrapper {  }
.downloadbox { display:flex; gap:20px; justify-content:center }
.dlbox { max-width:160px; }
    .dlbox .iimg { padding:10px; background-color:#ffffff }
    .dlbox .iimg img, .dlbox .iimg canvas { width:100% }
    .dlbox .bbtn { padding-top:3px; text-align:center }

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color:var(--body-fontcolor)!important }

.langs { border-radius:50px; display:inline-block; cursor:pointer; position:relative; z-index:8; font-weight:bold; }
    .langs .hh { display:flex; gap:4px; align-items:center; justify-content:space-between; cursor:pointer }
        .langs .hh span {  }
        .langs .hh i { font-size:12px; color:#666666 }
    .langs .cc { position:absolute; right:0; margin-top:4px; background-color:#ffffff; border:1px solid #ececec; border-radius:8px; overflow:hidden; display:none; padding:2px}
        .langs .cc .ll { display:flex; gap:8px; align-items:center; cursor:pointer; padding:2px;}
        .langs .cc .ll:hover { background-color:#ececec } 
            .langs .cc .ll span {  }
    .langs.aaa {  }
        .langs.aaa .cc { display:block }
    .langs img { max-width:32px }

.fullwrap { display:flex; flex-direction:column; height:100dvh  }

.topnav {display:flex;justify-content:space-between;align-items:center;background:var(--topnav-bgcolor);height:60px;padding: 0 12px;border-bottom: 1px solid #6f0d0e;}
    .topnav .tcon { flex: 0 0 auto; }
    .topnav .logo { position:absolute; left:50%; transform:translateX(-50%); }
        .topnav .logo img { max-height:54px }
        .topnav .partnership img { max-height:48px }

.main-wrap { display:flex; flex-direction:row-reverse; flex:1; position:relative; }
    .main-wrap .mwrap1 { min-width: 430px; max-width:430px; height:calc(100dvh - 120px); overflow-y:auto }
    .main-wrap .mwrap2 { width:calc(100% - 430px); height:calc(100dvh - 120px); overflow-y:auto }

    .main-wrap .mwrap1::-webkit-scrollbar, .main-wrap .mwrap2::-webkit-scrollbar { height: 2px; width: 2px; background: transparent;}
    .main-wrap .mwrap1::-webkit-scrollbar-thumb, .main-wrap .mwrap2::-webkit-scrollbar-thumb { background: var(--scrollbar-bgcolor); -webkit-border-radius: 1ex; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);}

.float-nav { position:fixed; right:8px; bottom:68px; display:flex; flex-direction:column; gap:8px; z-index:8 }
    .float-nav .fnav {  }
        .float-nav .fnav img { max-width:16vw; width:90px }

.quickwrap { position:relative }
    .quickwrap .cbbg { background:var(--quickwrap-bgcolor); position:absolute; z-index:2; width:100%; min-height:170px; border-radius:0 0 2.4rem 2.4rem }
    .quickwrap.afl .cbbg { min-height:245px }

.badges { position:absolute; top: 0; right: 0; width:12px; height:12px; line-height:12px; font-weight:bold; color:#ffffff; font-size:9px; border-radius:50%; background-color:var(--badges-bgcolor); display:none; justify-content:center; align-items:center; font-family:Arial; }
    .badges.s2 { top:2%; right:6%; width:18px; height:18px; line-height:18px; font-size:14px }
    .badges.aaa { display:flex }

.annwrap { display:flex; justify-content:center; align-items:center; background:var(--ann-bgcolor); color:var(--ann-textcolor); padding-top:8px; position:relative; z-index:3; gap:4px }
    .annwrap .ttext { width:100%; }
    .annwrap .iicon { max-width:34px; padding:8px; border-radius:50%; height:34px; display:flex; justify-content:center; align-items:center; background:var(--ann-iconbgcolor); position:relative }
        .annwrap .iicon:hover { filter:brightness(1.2) }

.quick-btnwrap { display:flex; justify-content:center; align-items:center; gap: 2%; padding:8px 0px; position:relative; z-index:3}
.quick-navwrap {display:flex;justify-content:space-evenly;align-items:center;padding:8px 0px;border-radius:16px;background:var(--quick-nav-bgcolor);box-shadow: 0px 0px 8px #2f0103;padding:12px 0px;flex-wrap:wrap;max-width:98%;margin:4% auto 0;position:relative;z-index:2}
    .quick-navwrap a img { max-height:32px }

.quick-refwrap { margin:-20% -12px 0; position:relative; z-index:0 }
    .quick-refwrap .iimg {  }
        .quick-refwrap .iimg img { max-width:auto; width:100% }
    .quick-refwrap .cont { position:absolute; z-index:1; bottom:3%; left:4%; width:92%; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap }
        .quick-refwrap .cont a { width:calc(50% - 5px); }

.quick-snav { padding-top:6px }

.content-wrap {  }

.banner-wrap {  }
.banwrap {  }
    .banwrap img { max-width:none; width:100% }
.quickwrap .banner-wrap { margin:0px -12px 0px; z-index:1; position:relative }

.conwrap  { padding:18px 0px }
    .conwrap h2 { text-transform:uppercase; color:var(--content-titlecolor); margin:0; font-size:32px; font-weight:bold; text-transform:uppercase; text-align:center }
    .conwrap h3 { color:var(--content-titlecolor2); margin:0; font-size:18px; font-weight:bold; text-align:center }
    .conwrap h4 { text-transform:uppercase; color:var(--content-textcolor); margin:0; font-size:18px; font-weight:bold }

.highlightmenu { margin-top:18px }
    .highlightmenu .gggl { position:relative; border-radius:16px; overflow:hidden; background:var(--quick-nav-bgcolor) }
    .highlightmenu .gggl .iimg {  }
        .highlightmenu .gggl .iimg img { max-width:auto; width:100% }
    .highlightmenu .gggl .infos { position:relative; color:#ffffff; z-index:1; padding-bottom:5%; left:3%; width:94%; text-align:center }
        .highlightmenu .gggl .infos small { font-size:12px; display:block; padding-bottom:4px; }
        .highlightmenu .gggl .infos p { font-size:22px; font-weight:bold; margin:0; line-height:normal; }
        .highlightmenu .gggl .infos a { text-transform:uppercase; background:var(--highlight-infobutton-bgcolor); color:var(--highlight-infobutton-textcolor); border-radius:80px; padding:4px 0px; text-transform:uppercase; font-size:18px; font-weight:bold; display:block }

.gamewrap {  }
.gametabs { display:flex; align-items:center; gap: 8px; padding:8px 0px; overflow-x:auto; flex-wrap: nowrap}
    .gametabs a { flex:0 0 auto;width: 4vw; aspect-ratio: 1 / 1;  }
    .gametabs a img { max-height:32px }
.gamecons { margin:8px 0px }
.glbox { display:none }
.glbox.aaa { display:block }
    .glbox .games { display:flex; flex-wrap:wrap }
        .glbox .games .gl { width:calc(10% - 8px); margin:4px; cursor:pointer; position:relative }
            .glbox .games .gl .iimg { border-radius:8px; overflow:hidden; display:block; position:relative; margin-bottom:0 }
                .glbox .games .gl .iimg.s2 { width:100%; padding-top:100%; background-color: #000000 }
                .glbox .games .gl .iimg.s2 img { min-height:100% }
                .glbox .games .gl .iimg img { width:100% }
            .glbox .games .gl .name { font-size:12px; text-align:center; padding-top:8px }
            .glbox .games .gl .ppic { position:absolute; width:100%; height:100%; top:50%; transform: translateY(-50%); z-index:1 } 
        .glbox .games .gl:hover .iimg::before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.8); top:0; left:0; z-index:2 }
        .glbox .games .gl:hover .iimg::after { position:absolute; font-family:"FontAwesome"; content:"\f04b"; font-size:30px; color:var(--playbutton-color); top:50%; left:50%; transform:translate(-50%, -50%); z-index:2 }

.content-btm {  }
.smwrapbox { display:flex; gap:16px; padding:8px 0px }
.smcons {  }
    .smcons h5 { font-size:14px }
    .smcons .smbox { display:flex; gap:8px; flex-wrap:wrap }
        .smcons .smbox div { width:42px; justify-content:center; align-items:center; display:flex }
        .smcons .smbox.s2 div { width:auto; }
            .smcons .smbox.s2 img { max-height:32px; max-width:108px }

.seo-wrap { border-top:1px solid var(--seo-bordercolor); color:var(--textcolor); font-size:12px; padding-top:16px; margin-top:16px }
    .seo-wrap h1, .seo-wrap h2, .seo-wrap h3, .seo-wrap h4, .seo-wrap h5 { color:var(--seo-titlecolor) }
    .seo-wrap h1 { font-size:28px }
    .seo-wrap h2 { font-size:26px }
    .seo-wrap h3 { font-size:24px }
    .seo-wrap h4 { font-size:22px }
    .seo-wrap h5 { font-size:20px }

.btmnav { background:var(--btmnav-bgcolor); display:flex; justify-content:center; align-items:center; height:60px; padding: 0 12px; gap:3%  }

.modal-s1 {  }
    .modal-s1 .modal-header { background: var(--modal-header-bgcolor); padding:12px; color:var(--modal-header-textcolor); display:flex; justify-content:center; align-items:center; font-size:20px; gap:8px; font-weight:bold; border:0 }
    .modal-s1 .modal-content { color:var(--modal-content-textcolor); background-color:var(--modal-content-bgcolor); }
    .modal-s1 .modal-body { background-size:cover; background-repeat:no-repeat; background-position:center }
    .modal-s1 .modal-footer { border:0; background-color:#000000 }
    .modal-s1 .modal-title-cus { color:var(--modal-header-titlecolor); font-size:24px; font-weight:bold; text-transform:uppercase; margin:0 auto 12px; text-align:center; line-height:normal; max-width:90%; }
    .modal-s1 a.btn-modal-close { position:absolute; z-index:1; font-size:24px; bottom:-48px; right:50%; transform:translateX(50%); line-height:normal; border-radius:80px; background:var(--modal-close-bgcolor); color:var(--modal-close-textcolor); padding:8px 32px}
    .modal-s1 a.btn-modal-close:hover { filter:brightness(1.2) }
    .modal-s1 a.btn-modal-close.tr { transform:none; bottom:auto; right:-3px; top:-3px; font-size:16px; padding:6px 12px  }
.modal-s2 {  }
    .modal-s2 .modal-content { background:transparent }

.pann-wrapper { display:block; border-radius:5px; overflow:hidden }
.pann-sidemenu { padding:16px; width:100%; padding:10px; overflow-x:auto; white-space:nowrap; font-size:0 }
    .pann-sidemenu a { color:var(--ann-pop-button-textcolor); background-color:var(--ann-pop-button-bgcolor); display:inline-block; padding:8px 16px; margin:0 4px; border-radius:16px; font-weight:bold; font-size:16px }
    .pann-sidemenu a.aaa { background:var(--ann-pop-button-bgcolor-hover); color:var(--ann-pop-button-textcolor-hover) }
.pann-content { padding:10px; width:100%; border-radius: 8px }

.pannbox { display:none }
.pannbox.aaa { display:block }

.customlobby-wrap {  }
    .customlobby-wrap .heads {  }
        .customlobby-wrap .heads .iimg { text-align:center }
            .customlobby-wrap .heads .iimg img { max-height:70px }
        .customlobby-wrap .heads h5 { color:var(--modal-header-textcolor); text-transform:uppercase; font-weight:bold; font-size:12px; text-align:center }
    .customlobby-wrap .searchbar { margin:12px 0px }

.searchbar {  }
    .searchbar .input-group { border: 1px solid var(--search-btnbgcolor); border-radius: 8px; overflow: hidden; padding: 0px 0 0 16px; background-color: var(--search-bgcolor); border-radius: 100rem; }
    .searchbar .input-group .input-group-text { background-color: var(--search-btnbgcolor); color:var(--search-btntextcolor); border:0; border-radius:100rem!important; width: 18vw; max-width:74px; justify-content:center; font-size:18px; cursor:pointer}
    .searchbar .input-group .input-group-text:hover { filter:brightness(1.2) }
    .searchbar .input-group .form-control { border: 0; font-size: 14px; color: var(--search-textcolor); outline: none; background-color: transparent; padding: 8px 0px; }
        
.customlobby { height:50dvh; overflow-y:auto }

.form-label { margin-bottom:3px; color:var(--form-label-textcolor) }
.form-control { padding:8px 16px; border:1px solid var(--form-field-bordercolor); color:var(--form-field-textcolor); background:var(--form-field-bgcolor); border-radius:80rem; font-size:14px }
    .form-control::placeholder { color:#aaaaaa } 
    .form-control:disabled { background:var(--form-field-bgcolor-disabled); }
    .form-control:focus { border-color:var(--form-field-textcolor); color:var(--form-field-textcolor); background:var(--form-field-bgcolor); box-shadow:none }
.input-group.s1.wr { border-radius: 100rem; overflow:hidden }
.input-group.s1.wr .btns {  position: absolute; z-index: 6; right: 0; top: 0; width: auto; border:0; border-radius:100rem!important; padding:0 24px; justify-content:center; font-size:18px; cursor:pointer; height:100%; }
    .input-group.s1.wr .bbtn { position:absolute; z-index:6; right:0; top:0; width:auto; border-radius:8px 0px 0px 8px!important }
        .input-group.s1.wr .bbtn img { max-height:40px }
    .input-group.s1.wr label.error { position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:5  }

table { width:100%; line-height:1; border:1px solid var(--table-border-color)}
table th { background:var(--table-head-bgcolor); color:var(--table-head-textcolor); position:relative; }
table td, table th { padding:10px 12px }
table td { border:1px solid var(--table-border-color); background:var(--table-body-bgcolor) }
table.s2 { font-size:16px }
table.s2 td, table.s2 th { padding:16px }

.daterangepicker {  }
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { padding:0; background:transparent; color:#000000 }
.daterangepicker .calendar-table table { border:0 }

.promo-wrap { margin-top:20px }
.prmenu { display:flex; align-items:center; justify-content:left; border-radius:12px; padding:0px; overflow-x:auto; height:48px; gap:8px }
    .prmenu a { color:var(--promo-button-textcolor);  background:var(--promo-button-bgcolor); padding:12px 18px; font-weight:bold; white-space:nowrap; border-radius:12px; width:100%; text-align:center }
    .prmenu a.aaa, .prmenu a:hover { color:var(--promo-button-textcolor-hover);  background:var(--promo-button-bgcolor-hover); }
.prcon { margin:18px 0px; display:flex; gap:12px; flex-wrap:wrap; position:relative }
.prbox { background:var(--promo-box-bgcolor); border-radius:12px; overflow:hidden; width:0; opacity:0; visibility:hidden; height:0; position:absolute; padding:8px; cursor:pointer; transform: translateY(20px); transition: transform 0.5s ease, opacity 0.3s ease; }
    .prbox .iimg { border-radius:12px; overflow:hidden }
        .prbox .iimg img { width:100% }
    .prbox .ccon { padding:12px;}
        .prbox .ccon h6 { margin:0; font-size:16px }
        .prbox .ccon small { font-size:10px; display:block; color:#888888 }
        .prbox .ccon .act { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:8px }
    .prbox.aaa {opacity:0.5; visibility:visible; height:100%; width:calc(50% - 6px); position:relative; transform: translateY(0); visibility:visible}
    .prbox.aaa.noo {opacity:1;}
    .prbox.ready { opacity:1; animation: glow 1.6s linear infinite;}
.prbox.s2 { background:var(--infobox-bgcolor); border-radius:18px; border:1px solid var(--infobox-bordercolor); padding:12px; align-items:center; display:flex; line-height:normal; gap:12px; cursor:default }
    .prbox.s2 .iimg { width:55%; max-width:120px; }
    .prbox.s2 .ccon { padding:0; width:100%; }
.prbox.s3 { width:100%; background:transparent }
    .prbox.s3.aaa { opacity:1 }
    .prbox.s3 .iimg { text-align:center }
    .prbox.s3 .iimg img { max-width:100%; width:auto }
.prdetail {  }
    .prdetail .iimg { border-radius:12px; overflow:hidden; margin-bottom:16px }
        .prdetail .iimg img { width:100% }
    .prdetail .ddesc { max-height:38dvh; overflow-y:auto }
    .prdetail .cta { margin:8px 0px 16px; text-align:center; display:flex; gap:12px }
    .prdetail .cta .hide { display:none }

   .sys-ms .prbox.s2 .iimg { width:100%; max-width:none; }

@keyframes glow {
    50% { filter:brightness(1.3) drop-shadow(0 0 3px var(--promo-button-bgcolor-hover)) drop-shadow(0 0 3px var(--promo-button-bgcolor-hover)) }
}

.missiontitle{text-align:center;display:none;}
.missiontitle.aaa{display:block;}
.specialmission {margin-top:20px;}
    .missiontitle .missiontitle-image{margin-top:20px;width:90%;}
    .missiontitle .progress {background:var(--progressbar-bgcolor); border:1px solid var(--progressbar-bordercolor); border-radius:100rem; width:54%;left:23%;position:relative;height:20px; margin:0;}
    .missiontitle .progress .progressbar { background:var(--progressbar-barcolor); position:absolute; height:100%; border-radius:100rem;display:flex; }
    .missiontitle .progress .ttext { display:flex; justify-content:center; align-items:center; height:100%; width:100%; position:absolute; font-size:14px; font-weight:bold;  }
    .missiontitle .reward{display:flex;justify-content:center;align-items:center;gap:60px;margin:0;margin-top:10px;}
    .missiontitle .reward .reward-item{display:flex;justify-content:center;align-items:center;}
    .missiontitle .reward .reward-item.done{ filter:grayscale(1); cursor:default;}
    .missiontitle .reward .reward-item img{max-width:120px;display:block;}
    .missiontitle .reward .reward-item .act span{border:1px solid var(--infobox-bordercolor);text-transform:uppercase;border-radius:20px;background-color:#000;white-space:nowrap;}
    .missiontitle .reward .reward-item .act a{border-radius:8px; padding:3px 20px;opacity:0.5;cursor:default;pointer-events:none;}
    .missiontitle .reward .reward-item .act{display:flex;flex-direction:column;gap:10px;}
    .missiontitle .reward .reward-item .act.ready a{opacity:1; animation: glow 1.6s linear infinite;cursor:pointer; pointer-events:auto;}
    .missiontitle .reward .reward-item .act.done a{opacity:1;filter:grayscale(1);cursor:default;pointer-events:none;}
.missioniimg{}
.missioniimg span{position: absolute;bottom: 8%;left: 18%;border:1px solid var(--infobox-bordercolor);border-radius:20px;padding:1px 10px;font-size:16px;background-color:#000;}

.pshop { line-height:normal; display:flex; flex-direction:column; gap:8px; text-align:center }
    .pshop .tt {  }
    .pshop .cc {  }
        .pshop .cc strong { font-size:18px; color:var(--balsbox-textcolor2) }
        .pshop .cc small { font-size:12px; }
    .pshop .act {  }
        
.pshop .progress { margin-top:12px; background:var(--progressbar-bgcolor); border:1px solid var(--progressbar-bordercolor); border-radius:100rem; width:100%; position:relative }
    .pshop .progress .progressbar { background:var(--progressbar-barcolor); position:absolute; height:100%; border-radius:100rem; }
    .pshop .progress .ttext { display:flex; justify-content:center; align-items:center; height:100%; width:100%; position:absolute; font-size:11px; font-weight:bold;  }

.balsinfo-wrap { position:relative; z-index:3; color:var(--balsinfo-textcolor); line-height:1.4 }
    .balsinfo-wrap .tt { font-size:26px; font-weight:bold }
    .balsinfo-wrap .cc {  }
    .balsinfo-wrap .br { position:absolute; right:0; bottom:0; }
    .balsinfo-wrap a { color:var(--balsinfo-textcolor); font-weight:bold }

.balsbox-wrap { display:flex; flex-direction:column; background:var(--infobox-bgcolor); border-radius:18px; border:1px solid var(--infobox-bordercolor); padding:12px 18px; align-items:start; margin:18px 0px; background:var(--balsbox-bgcolor); line-height:normal }
#modalWithdrawal .balsbox-wrap { display:flex; flex-direction:row; justify-content:space-between; background:var(--infobox-bgcolor); border-radius:18px; border:1px solid var(--infobox-bordercolor); padding:12px 18px; align-items:start; margin:18px 0px; background:var(--balsbox-bgcolor); line-height:normal }
    .balsbox-wrap .labels { font-size:14px; color:var(--balsbox-textcolor)  }
    .balsbox-wrap .values { font-size:32px; font-weight:bold; color:var(--balsbox-textcolor2); display:flex; align-items:center; gap:3px  }
    .balsbox-wrap .acts { display:flex; justify-content:end; width:100%; }
        .balsbox-wrap .acts a, .balsbox-wrap .acts button { width:auto; min-width:40% }


.accinfo-wrap { }

.accpinfo { display:flex; gap:12px; background:var(--infobox-bgcolor); border-radius:18px; border:1px solid var(--infobox-bordercolor); padding:12px 18px; align-items:center; margin:18px 0px }
    .accpinfo .iimg { border-radius:50%; overflow:hidden; border:4px solid var(--infobox-imgbordercolor); max-width:120px  }
        .accpinfo .iimg img { max-width:none; width:140%; margin:-20% }
    .accpinfo .infos { width:100% }
        .accpinfo .infos .cc { border-bottom:1px solid var(--infobox-breakline); display:flex; flex-direction:column; gap:3px; line-height:normal; padding:8px 0px }
            .accpinfo .infos .cc small { font-size:14px; color:var(--infobox-textcolor) }
            .accpinfo .infos .cc span { font-size:18px; font-weight:bold; color:var(--infobox-textcolor2) }
            .accpinfo .infos .cc:last-child { border-bottom:0 }
.accpinfo.s2 { align-items:start  }
.accpinfo.s2 .iimg { border-radius:20px; overflow:hidden; border:0; width:38%; max-width:110px; background:var(--infobox-imgbgcolor); padding:6px; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center }
    .accpinfo .iimg img { max-width:100%; width:auto; margin:0 }

.accmenu {  }
    .accmenu .menurow { display:flex; justify-content:space-between; align-items:center; font-size:16px; height:48px; background:var(--menulist-bgcolor); font-weight:bold; gap:18px; padding:0px 22px; line-height:normal; color:var(--menulist-textcolor); border-radius:100rem; margin-bottom:12px }
    .accmenu .menurow:hover { filter:brightness(1.3); cursor:pointer; }
    .accmenu .menurow .iicon { color:var(--menulist-textcolor); font-size:18px }
    .accmenu .menurow .ttext { width:100%; color:var(--menulist-textcolor) }
    .accmenu .menurow .aarrow { color:var(--menulist-textcolor) }

.req-wrap { position:relative }
.reqbox {  }
    .reqbox div { display:flex; align-items:center; gap:2px }
    .reqbox small { color:var(--infobox-textcolor)!important; font-size:14px; }
    .reqbox span { color:var(--infobox-textcolor3)!important; font-size:20px; font-weight:bold; }
.reqnote { color:var(--infobox-notecolor); font-style:italic; font-size:12px; text-align:center; margin-top:12px }
.reqact { position:absolute; right:0; top:0; width:35%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px }
    .reqact .reqstatus { text-align:center; font-weight:bold; color:var(--color-red); text-transform:uppercase }
    .reqact .reqbtn { width:100%; filter:grayscale(1); pointer-events:none }
    .reqact.done .reqbtn { filter:grayscale(0); pointer-events:auto }
    .reqact.done .reqstatus { color:var(--color-green) }

.req-targetwrap { position:relative }
.reqtargetbox { display:flex; flex-direction:column;}
    .reqtargetbox small { color:var(--infobox-textcolor)!important; font-size:14px; }
    .reqtargetbox span { color:var(--infobox-textcolor3)!important; font-size:20px; font-weight:bold; }
.reqtargetbar { margin-top:12px; background:var(--progressbar-bgcolor); border:1px solid var(--progressbar-bordercolor); border-radius:100rem; width:100%; height:8px; position:relative }
    .reqtargetbar .progressbar { background:var(--progressbar-barcolor); position:absolute; height:100%; border-radius:100rem; }
.reqtargetact { position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center; gap:4px; text-transform:uppercase; background:var(--btns-bgcolor); font-size:14px; font-weight:bold; padding:8px 12px; border-radius:100rem; white-space:nowrap; color:var(--color-red) }
    .reqtargetact.done { color:var(--color-green) }

.referral {display: flex; margin-top:20px; margin-bottom: 20px; flex-direction:row;padding:0 5%; }
.refqr { display: flex; flex-direction: column; text-align: center; width: 40%; max-width:250px; margin: 0px auto;}
    .refqr a { color: #ffffff; margin-top: 10px; }
    .refqr .iimg { padding:8px; background-color:#ffffff }
    .refqr .iimg img, .refqr .iimg canvas { width:100% }
.refshare {width:60%;align-self:center; }
.refsm { text-align:center }
.refsm .cons { display:flex; gap:8px; justify-content:center; align-items:center }
    .refsm .cons a img { max-width:48px}

.vip-wrap { margin:16px 0px; display:flex; flex-direction:column; justify-content:center; align-items:center }
    .vip-wrap .iimg { max-width:50vw; }
    .vip-wrap .nname { margin-top:12px; font-size:24px; font-weight:bold }
    .vip-wrap .notes { font-size:12px; margin-top:6px }
.vipbar { margin-top:12px; background:var(--progressbar-bgcolor); border:1px solid var(--progressbar-bordercolor); border-radius:100rem; width:90%; height:16px; position:relative }
    .vipbar .progressbar { background:var(--progressbar-barcolor); position:absolute; height:100%; border-radius:100rem; }
    
.depo-wrap { margin-top:24px }
.depopm {  }
.depopmsel { display:flex; gap:12px; padding:12px; border-radius:16px; overflow-x:auto; white-space: nowrap; margin:16px 0px; background:var(--promo-button-bgcolor); justify-content:space-evenly; align-items:center; }
    .depopmsel .dps { display:flex; flex-direction:column; gap:4px; justify-content:center; align-items:center; flex:0 0 auto; font-size:20px; cursor:pointer }
        .depopmsel .dps img { max-height:68px }
        .depopmsel .dps.aaa, .depopmsel .dps:hover { color:var(--color-green); filter:brightness(1.1) }
.depoinfo { margin:16px 0px }
.depoamo { margin-bottom:8px; display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap:6px } 
    .depoamo a { border:1px solid var(--promo-button-textcolor-hover); background-color:var(--promo-button-bgcolor); color:var(--promo-button-textcolor); font-size:14px; font-weight:bold; border-radius:100rem; width:calc(20% - 6px); cursor:pointer; position:relative; height:40px; display:flex; align-items:center; justify-content:center }
    .depoamo a.aaa, .depoamo a:hover { background-color:var(--promo-button-bgcolor-hover); color:var(--promo-button-textcolor-hover) }

.accordion {  }
.accordion-item { margin-bottom:12px; border-radius:16px!important; overflow:hidden; border:1px solid var(--accordion-bordercolor)!important; background:var(--accordion-bgcolor); color:var(--accordion-textcolor) }
.accordion-button { padding:6px 24px; display:flex; gap:12px; background:var(--accordion-bgcolor); color:var(--accordion-textcolor) }
    .accordion-button img { max-height:48px }
.accordion-button::after { filter:brightness(100) }
.accordion-button:not(.collapsed) { background:var(--accordion-bgcolor-active); color:var(--accordion-textcolor-active); box-shadow:none }
.accordion-button:focus { box-shadow:none }

.history-wrap { margin-top:12px }
.hissel { margin-bottom:20px; display:flex; flex-wrap: wrap; gap:8px }
    .hsel {background-color: #ffffff;color: #111111;font-size:14px;border-radius:12px;padding:0px 18px;width:calc(50% - 4px);cursor:pointer;position:relative;height:40px;display:flex;align-items:center}
    .hsel:hover, .hsel.aaa {background-color: var(--btns3-bgcolor);color: var(--btns3-textcolor);} 
    .hsel.aaa::before { content:""; position:absolute; font-family:"FontAwesome"; content:"\f14a"; font-size:26px; color:var(--btns3-textcolor); top:50%; right:24px; transform:translateY(-50%) }

.file-input-wrapper { position: relative; overflow: hidden; display: flex; justify-content:space-between; align-items:center; background:var(--form-field-bgcolor); color:var(--form-field-textcolor); border:1px solid var(--form-field-bordercolor); border-radius:80rem; font-size:14px; }
.file-input-wrapper button { border: 0px; color: var(--btns3-textcolor); background: var(--btns3-bgcolor); padding: 8px 16px; cursor: pointer; font-size:18px; font-weight:bold; text-transform:uppercase; border-radius:100rem !important;}
.file-input-wrapper input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; height:100%; width:100%;}
.file-input-wrapper .filename { margin-left: 16px; font-style: italic; max-width:50%}

.pscon-wrapper {  }
.pscon { text-transform:uppercase; display:flex; flex-direction:column; line-height:normal }
    .pscon h5 { color:var(--body-fontcolor); font-size:18px; font-weight:bold; text-transform:uppercase; margin:0px; text-align:center; line-height:normal }
    .pscon span { color:var(--body-fontcolor); display:block; text-align:center; font-size:24px; font-weight:bold; text-transform:uppercase; margin:8px 0px }
    .pscon .act { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:6px; text-align:center }
        .pscon .act a { width:100%; max-width:180px; background:var(--btns3-bgcolor); color:var(--btns3-textcolor); font-weight:bold; text-transform:uppercase; border:0; border-radius:20px; padding:4px 24px; }
        .pscon .act a.nono { background-color:#bbbbbb }

.msbox .ccon .act { display:none }
.msbox.ready .ccon .act, .msbox.done .ccon .act { display:flex }
.msbox.ready .ccon .pshop .progress, .msbox.done .ccon .pshop .progress { display:none }
.msbox.done .ccon .act { filter:grayscale(1); pointer-events:none }

.profile-wrap { display:flex; gap:6px; display:flex; align-items:center; flex-wrap:wrap }
.profilebox { border-radius:8px; border:1px solid var(--profilebox-bordercolor); display:flex; flex-direction:column; justify-content:center; align-items:center; width:calc(33.33% - 4px); padding:8px; gap:8px;  }
    .profilebox .ttitle { color:var(--profilebox-titlecolor); font-weight:bold }
    .profilebox .iimg {  }
    .profilebox .acts { display:flex; gap:4px; width:100%; }
        .profilebox .acts a { font-size:8px; border-radius:6px; padding:8px 1px; line-height:normal }

.isdes {  }
.ismob { display:none }

.widgetframe {position:relative;z-index:1;  }
    .widgetframe iframe { width:100%; border:0; min-height:300px; border-radius:8px;  }

.modal-mw600 .modal-dialog{max-width:600px;}
.modal-mw700 .modal-dialog{max-width:700px;}

/*modal*/
.share_modal .modal-body {background-color: #111111;padding: 0;border-radius: 17px;}
.share_modal .close {float: right;font-size: 2.5rem;font-weight: 400;line-height: 1;color: #ffffff;text-shadow: 0 1px 0 #000000;opacity: .5;top: 0;position: absolute;right: 0;background:transparent; border:0;}
.share_modal .modal-dialog {max-width: 700px;/* margin: 1.75rem auto;*/}
.share_modal .modal-content {background-color: transparent;border: none;}
.share_modal.size-xl .modal-dialog { max-width:1200px; }
.share_modal.size-lg .modal-dialog { max-width:800px; }

@media only screen and (max-width: 1920px) {
    .gametabs a { width: 6vw; }
    .glbox .games .gl { width:calc(12.5% - 8px); }
}

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

    .highlightmenu .gggl .infos small { font-size:0.8vw; }
    .highlightmenu .gggl .infos p { font-size:1.4vw; }
    .highlightmenu .gggl .infos a { font-size:1.4vw; padding:0.4vw 0 }
    .glbox .games .gl { width:calc(16.66% - 8px); }
    .gametabs a { width: 8vw; }
}

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

    .highlightmenu .gggl .infos small { font-size:1vw; }
    .highlightmenu .gggl .infos p { font-size:2vw; }
    .highlightmenu .gggl .infos a { font-size:2vw; padding:0.4vw 0 }
    .glbox .games .gl { width:calc(25% - 8px) }
    .smwrapbox { flex-direction:column }
    .referral {flex-direction:column;}
    .refqr {width:60%;}
    .refshare {width:100%;}
}
@media only screen and (max-width: 768px) {
    .sys-ms .prcon .prbox.s2.aaa { width:100% }
    .missiontitle .reward{gap:0;}
    .missiontitle .reward .reward-item img{max-width:80px;}
    .missiontitle .reward .reward-item span{font-size:12px;}
    .missiontitle .reward .reward-item .act a{border-radius:8px;font-size:12px;}
    .missiontitle .progress{margin:0;}

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

    .isdes { display:none }
    .ismob { display:block }
    .ishome { display:none }
    body.home .ishome { display:block }
    .quickwrap { margin-bottom:10px }
    .quickwrap .cbbg, .quickwrap.afl .cbbg { min-height:52px; border-radius:0 0 1.6rem 1.6rem }
    body.home .quickwrap .cbbg { min-height:170px; border-radius:0 0 2.4rem 2.4rem }
    body.home .quickwrap.afl .cbbg { min-height:245px }
    .topnav .partnership img { max-height:32px }
    .btmnav { flex-wrap:wrap; justify-content:space-evenly; gap:0; padding:0 }
    .btnimglr { flex-direction:column; gap:4px; font-size:2.4vw; padding:0; width:18vw }
    .btnimglr img { max-width:none; max-height:22px }
    .main-wrap { flex-direction:column; height:calc(100dvh - 120px); overflow-y:auto }
    .main-wrap .mwrap1, .main-wrap .mwrap2 { height:auto; min-width:auto; max-width:none; overflow-y:unset }
    .main-wrap .mwrap2 { width:100% }
    .highlightmenu .gggl .infos small { font-size:2vw; }
    .highlightmenu .gggl .infos p { font-size:3.6vw; }
    .highlightmenu .gggl .infos a { font-size:3.6vw; padding:0.4vw 0 }
    .glbox .games .gl { width:calc(33.33% - 12px); margin:6px }
    .quick-refwrap .cont a { font-size:4vw }
    .gametabs a { width: 13vw; }
    .accpinfo .infos .cc span { font-size:4.8vw }
    .accpinfo .infos .cc small, .reqtargetact, .reqact, .reqact .reqbtn .btns { font-size:3.2vw }
    .sys-ms .prcon .prbox.s2.aaa { width:calc(50% - 6px) }
    .missiontitle .reward .reward-item span{font-size:12px;}
    #modalWithdrawal .balsbox-wrap .values{font-size:5vw;}
}

@media only screen and (max-width: 479px) {
    .gametabs a { width: 20vw; }
    .prbox.s2.aaa { width:100% }
    .profilebox .acts a { font-size:1.4vw }
    .sys-ms .prcon .prbox.s2.aaa { width:100% }
    .missiontitle .reward{gap:5px;}
    .missiontitle .reward .reward-item img{max-width:100px;}
    .missiontitle .reward .reward-item span{font-size:12px;}
    .missiontitle .reward .reward-item .act a{border-radius:8px;font-size:12px;}
}