label.error { display:block; flex-basis:100%; color:#ff0000; font-size:11px; margin-top:3px; width:100%}
input.error, select.error { border-color:#ff0000 }

.pos-relative { position:relative }

.tab-ico { display:inline-block; text-align:center; width:100% }

.btn-submit[disabled] {background:#cccccc; box-shadow:none}

.field-input { position:relative }
.otp-button { position:absolute; text-transform:uppercase; background:linear-gradient(to bottom, #FCD757 0%, #FCD757 100%); font-size:14px; border:0px; font-weight:700; color:#000000; padding:0px 15px; right:3px; top:8%; height:84%; border-radius:35px}

.wi-input { position:relative }
     .wi-input .captcha-img { max-height: 32px; top:3px; position:absolute; right:20px}

.pretable table { width:100% }
.pretable table tr th {
	color:#fff;
	background:#2c3038;
	padding:4px;
	border:1px solid #454850;
}
.pretable table tr td {
	border:1px solid #454850;
	padding:5px;
	color:#fff;
}

.downloadbox .iimg { display:inline-block; text-align:center }

.login_btn.s2 { display:none }
.login-page.s2 { width:auto; margin:0px; background:transparent; min-height:auto; padding:15px }
    .login-page.s2 .btn-submit { margin-left:0; width:100% }
    .login-page.s2 .info-text { text-align:center; padding:5px }
    .login-page.s2 .info-text a { color:#FCD757; text-decoration:underline; font-weight:bold }

.form-item { position:relative }
    .form-item label.error { position:absolute; right:15px; width:auto; top:0px; margin-top:0px; line-height:38px }

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color:#ffffff!important }
.dataTables_wrapper select { width:auto }

.app-qr-img canvas, .app-banner-qr-img canvas { width:100% }

.note { color:#df0e0b; font-size:11px; font-weight:bold; display:block; margin-top:7px; text-align:center }

.af-table tr td { color:#ffffff }

.reward-col { filter:grayscale(0.8); pointer-events:none }
    .reward-col.ready { filter:none; pointer-events:auto; cursor:pointer; animation-name:claimbtn;animation-duration:2s;animation-timing-function:ease;animation-direction:normal;animation-iteration-count:infinite; overflow: hidden; }
    .reward-col.claimed { filter:none; pointer-events:auto; }

.seo-sec{ padding:20px 0; border-top:1px dashed; font-size:12px}
.seo-sec a {color:#FCD757}
.seo-sec h1,.seo-sec h2,.seo-sec h3,.seo-sec h4,.seo-sec h5 {font-weight:bold;padding:8px 0; margin:0}
.seo-sec h1 {font-size:20px;}
.seo-sec h2 {font-size:18px;}
.seo-sec h3 {font-size:16px;}
.seo-sec h4 {font-size:14px;}
.seo-sec h5 {font-size:12px;}

.payment-sel ul { flex-wrap:wrap; margin-bottom:40px }
.payment-sel ul li { margin-bottom:10px; }
.payment-sel ul li a { display:block }

.reward-note { text-align:center; padding:5px 0px 15px }

#modalpopupAnnouncementModal .modal-content, #modalPoGame .modal-content { background:0; border:0 }

.af-wrap.s2 { width:auto }
.af-wrap.s2 .rw-step { max-width:880px; margin:0px auto }

.rw-wrap { display:flex; justify-content:center; align-items:center; margin:0px 10px }
.rwcol { position:relative; padding:10px; filter:grayscale(1); pointer-events:none }
    .rwcol.ready { filter:none; pointer-events:auto; cursor:pointer; animation-name:claimbtn;animation-duration:2s;animation-timing-function:ease;animation-direction:normal;animation-iteration-count:infinite; }
    .rwcol.claimed { filter:none; pointer-events:auto; }
    .rwcol .iimg { position:relative }
    .rwcol .dpbox { top:17%;}
        .rwcol .dpbox small { color:#f9d55c; }
        .rwcol .dpbox span { color:#ffffff; }
    .rwcol .rwbox { top:56%; }
        .rwcol .rwbox small { color:#624624; }
        .rwcol .rwbox span { color:#0a141d; }
    .rwcol .bbtn { position:absolute; bottom:-20px; left:0; width:100%; text-align:center }

.rwcol .dpbox, .rwcol .rwbox { text-align:center; position:absolute; left:0; width:100%; }
.rwcol .dpbox small, .rwcol .rwbox small { text-transform:uppercase; display:block; font-size:16px; line-height:16px; font-weight:700 }
.rwcol .dpbox span, .rwcol .rwbox span { font-weight:800; font-size:46px; line-height:46px;  }

.af-extra-area { margin:-30px 0px 20px }
    .af-extra-area button { background: linear-gradient(to bottom, #f9bc06 0%, #dca603 0%, #dca603 100%); color: #fff; font-weight: 800; text-transform: uppercase; border: none; border-radius: 20px; height: 30px; font-size: 13px; box-shadow: inset 0px 0px 5px #fff; padding:0px 20px }

.vid-wrapper { text-align:center }
.vid-wrapper video { width:100%; height:100%; max-height:720px }

.af-top-tab ul li a.nav-reward img { filter:brightness(1) invert(0); height:50px; margin:-8px 0px }

.msddp-wrapper { margin-bottom:20px; display:none }
.msddp-wrapper.aaa { display:block }
    .msddp-wrapper .ttitle { display:flex; gap:8px; align-items:center; margin-bottom:8px }
        .msddp-wrapper .ttitle h5 { font-weight:bold; text-transform:uppercase; font-size:20px; margin:0 }
        .msddp-wrapper .ttitle i { opacity:0.3; cursor:pointer }
        .msddp-wrapper .ttitle i:hover { opacity:1 }
    .msddp-wrapper .ccon {  }
.msddpbox { background:linear-gradient(to bottom, #153243 0%, #0c1e28 100%); border:2px solid #153242; display:inline-flex; align-items:center; padding:6px 12px; color:#FCD757; gap:8px; font-size:24px; line-height:24px; font-weight:bold }
    .msddpbox .act { filter:grayscale(1); margin-bottom:-6px }
    .msddpbox .act.ready { filter:grayscale(0); cursor:pointer }

.layout-footer .footer-bottom .footer-content-bottom .bottom-element { border-width:0 }
.layout-footer .footer-middle { flex-direction:column } 
.license-wrap { display: flex; width:100%; justify-content: center; gap: 80px; border-bottom: 1px dashed #ffffff; padding: 24px 0px; }
    .license-wrap .tt { white-space:nowrap; }
    .license-wrap .cons { display: flex; gap: 16px; flex-wrap:wrap}
        .license-wrap .cons img { max-height: 30px; }

.ic-close.small { top:0; width:22px; height:22px }

.modal-dialog.modal-fullscreen { max-width:100%; margin:0; max-height:100% }
.modal-dialog-scrollable.modal-fullscreen .modal-content { max-height:100% }

.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%; border:0 }
    .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 }

.glbox { display:none }
.glbox.aaa { display:block }
    .glbox .games { display:flex; flex-wrap:wrap }
        .glbox .games .gl { width:calc(12.5% - 16px); margin:8px; cursor:pointer; position:relative }
            .glbox .games .gl .iimg { border-radius:8px; overflow:hidden; display:block; position:relative; }
                .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 .ppic .badges { position:absolute; max-width:33%; top:-5%; right:-5% }
        .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:#cc1d55; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2 }
.glinfo { }
    .glinfo .tt { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px }
    .glinfo .gt { display:flex; gap:8px; align-items:center; font-weight:bold; font-size:16px }
    .glinfo .gt svg { height:28px; }

.promo-bx { filter:brightness(0.5); }
.promo-bx.aaa { filter:brightness(1); }
.promo-act .aaabtn { pointer-events:none; filter:grayscale(1) }
.promo-act .aaabtn.aaa { pointer-events:auto; filter:grayscale(0) }

.modal-s1 {  }
    .modal-s1 .modal-header { background: linear-gradient(180deg, #65008e 0%, #ea0191 100%); border-color:#de00b5; padding:12px; color:#ffffff; display:flex; justify-content:center; align-items:center; font-size:16px; gap:8px; font-weight:bold }
    .modal-s1 .modal-content { border:2px solid #de00b5; color:#ffffff; background-color:#0d0127; }
    .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(--syscolor-title); font-size:30px; font-weight:bold; text-transform:uppercase; margin-bottom:12px; text-align:center; line-height:normal }
    .modal-s1 a {color:#de00b5; font-weight:bold }
    .modal-s1 a.btn-modal-close { color:#ffffff }
    .modal-s1.videos {  }
        .modal-s1.videos video { width:100% }
.btn-modal-close { position:absolute; z-index:1; font-size:28px; color:#ffffff; right:-6px; top:-6px; line-height:normal }
.modal-s2 {  }
    .modal-s2 .modal-content { background:transparent }

.pann-wrapper { display:block; border-radius:5px; overflow:hidden }
.pann-sidemenu { background-color:#111111; min-width:auto; max-width:none; width:100%; padding:10px; overflow-x:auto; white-space:nowrap; font-size:0 }
    .pann-sidemenu a { color:#ffffff; background-color:#363636; display:inline-block; padding:8px 16px; font-size:14px; border-radius:5px; margin:0px 3px; font-weight:bold }
    .pann-sidemenu a.aaa { background:#ff781f; color:#ffffff }
.pann-content { width:100%; }
    .pann-content.more { background-color:#0d0127; padding:10px; }

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

.ps-wrapper { padding:16px 0px } 
    .ps-wrapper .ccon { display:flex; flex-wrap:wrap; justify-content:center; align-items:start }
.psbox { width:calc(20% - 12px); margin:6px; position:relative; }
    .psbox .tt { border:2px solid #453b8b; border-radius:8px; background-color:#000000; padding:8px; text-align:center; display:flex; flex-direction:column; gap:4px; font-weight:bold; line-height:normal }
        .psbox .tt h5 { font-size:14px; color:var(--syscolor-secondary); margin:0 }
        .psbox .tt img { margin:8px 0px }
        .psbox .tt span { font-size:12px; text-transform:uppercase; color:#ff781f }
    .psbox .act { margin-top:6px; text-align:center; filter:grayscale(1); pointer-events:none }
        .psbox .act.ready { filter:grayscale(0); pointer-events:auto }
        .psbox .act .bbtn { background-color:#ff781f; color:#ffffff; font-weight:bold; text-transform:uppercase; border:0; border-radius:20px; padding:4px 24px; display:inline-block }
        .psbox .act .bbtn:hover { filter:brightness(1.5) }

.pscon-wrapper {  }
.pscon { text-transform:uppercase; display:flex; flex-direction:column; line-height:normal }
    .pscon h5 { color:var(--syscolor-title); font-size:18px; font-weight:bold; text-transform:uppercase; margin:0px; text-align:center; line-height:normal }
    .pscon span { color:var(--syscolor-secondary); 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-color:#ff781f; color:#ffffff; font-weight:bold; text-transform:uppercase; border:0; border-radius:20px; padding:4px 24px; }
        .pscon .act a.nono { background-color:#bbbbbb }

.ms-wrapper { padding:16px 0px; display:flex; justify-content:center; align-items:start; gap:12px; flex-wrap:wrap }
.msbox { display:flex; gap:8px; border:2px solid #453b8b; background-color:#111111; padding:8px 16px; border-radius:8px; align-items:center; width:calc(25% - 12px) }
    .msbox .infos { display:flex; flex-direction:column; gap:6px; width:100%; }
        .msbox .infos .tt {  }
        .msbox .infos .progress { position:relative; height:1.8rem; border-radius:12px  }
            .msbox .infos .progress .progress-bar {  }
            .msbox .infos .progress .ttext { width:100%; height:100%; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:1; font-size:12px; font-weight:bold; text-shadow:0px 0px 3px #000000, 0px 0px 6px #000000  }
        .msbox .infos .rewards { display:flex; gap:2px; align-items:center; }
            .msbox .infos .rewards i { color:#ff781f }
            .msbox .infos .rewards span { font-size:12px; font-weight:bold; }
    .msbox .act {  }
        .msbox .act a { filter:grayscale(1); pointer-events:none; border-radius:50%; width:60px; height:60px; display:flex; justify-content:center; align-items:center; font-size:30px; background-color:#ff781f }
.msbox.done .act a { filter:grayscale(0); background-color:#28a745}
.msbox.ready .act a { filter:grayscale(0); pointer-events:auto; animation-name:msclaim;animation-duration:1.5s;animation-timing-function:ease;animation-direction:normal;animation-iteration-count:infinite; }

@keyframes msclaim{
	50% { filter:grayscale(0) brightness(1.4) drop-shadow(0px 0px 8px #ff781f); }
}

.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; }
    .access-info .btn-submit { margin-left:0 }
.download-wrapper {  }
.downloadbox { display:flex; gap:20px; justify-content:center; width:100% }
.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 }
table.access-table tr td {
    background:#000;
    padding:5px 10px;
    font-size:12px;
    border:1px solid #de00b5;
}

.header-right-adds { padding-left:8px }
.lang img { max-height:30px }

.langbox-wrapper { display:flex; flex-direction:column; gap:12px; }
.langbox { display:flex; gap:12px; width:100%; align-items:center }
    .langbox .iicon {  }
        .langbox .iicon img { max-width:46px; }
    .langbox .ccon {  }
        .langbox .ccon .country { font-weight:bold; font-size:16px; text-transform:uppercase }
        .langbox .ccon .ttext { font-size:12px }
        .langbox .ccon .ttext a { color:#ffffff }

@media only screen and (max-width: 1280px) {
    .glbox .games .gl { width:calc(16.66% - 16px); margin:8px; cursor:pointer; position:relative }
    .msbox { width:calc(33.33% - 12px) }
}

@media only screen and (max-width: 767px) {
    .glbox .games .gl { width:calc(25% - 12px); margin:6px }
    .msbox { width:calc(50% - 12px) }
}

@media only screen and (max-width: 479px) {
    .glbox .games .gl { width:calc(33.33% - 12px); }
    .msbox { padding:6px 12px }
    .msbox { width:calc(100% - 12px) }
    .msbox .act a { width:48px; height:48px; font-size:26px }
}

@media (max-width:1280px) {

    .rwcol .dpbox small, .rwcol .rwbox small { font-size:1.2vw; line-height:1.2vw; }
    .rwcol .dpbox span, .rwcol .rwbox span { font-size:3.6vw; line-height:3.6vw;  }
    .rwcol .bbtn { bottom:-3% }
    .rwcol .bbtn img { max-width:55% }

}

@media (max-width:1023.5px) {
    .login_btn { display:none }
    .login_btn.s2 { display:block }
}

@media (max-width: 768px) { 
    .home-contact-item { width:33.33% }
    .home-contact-txt { font-size:2.6vw; }

    .rw-wrap { flex-wrap:wrap }
    .rwcol { width:33.33%; margin-bottom:20px }
    .rwcol .dpbox small, .rwcol .rwbox small { font-size:2vw; line-height:2vw; }
    .rwcol .dpbox span, .rwcol .rwbox span { font-size:5.6vw; line-height:5.6vw;  }

    .msddpbox { font-size:20px; line-height:22px; }

    .license-wrap { flex-direction: column; gap:24px; font-size: 12px; align-items:center; width:auto }

    .psbox { width:calc(33.33% - 12px);}
}

@media (max-width: 479px) { 
    .home-contact-item { width:50% }
    .home-contact-txt { font-size:3.8vw; }

    .rwcol { width:50%; }
    .rwcol .dpbox small, .rwcol .rwbox small { font-size:3vw; line-height:3vw; }
    .rwcol .dpbox span, .rwcol .rwbox span { font-size:8vw; line-height:8vw;  }

    .psbox { width:calc(50% - 12px);}
}

@keyframes claimbtn{
    0% { transform: scale3d(1, 1, 1); filter:brightness(1); }
	40% { transform: scale3d(1.05, 1.05, 1.05); filter:brightness(1.4); }
    80% { transform: scale3d(1, 1, 1); filter:brightness(1); }
}

.daily-checkin-button{
    max-height:50px;
    margin-right:10px;
}

/* Transparent modal */
.transparent-modal {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Darken backdrop slightly */
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Wrapper positions everything relative to the image */
.daily-checkin-wrapper {
    position: relative;
    width: 100%;
    /*height: 100vh;*/
    overflow: hidden;
    text-align: center;
}

/* Full-size responsive background image */
.checkin-bg {
    width: 100%;
    height: 100%;
    object-fit: contain; /* shows full image, no crop */
    object-position: center;
}

/* Grid positioned over the image */
.checkin-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 58%;
    margin-top: 5%;
}

/* Check-in items */
.checkin-item {
    text-align: center;
    filter:brightness(0.5);
    position:relative;
}

    .checkin-item.ready {
        cursor: pointer;
        pointer-events: auto;
        filter: brightness(1);
        animation: blinkShadow2 2s ease infinite;
    }

    .checkin-item.done {
        filter: brightness(1);
    }

    .checkin-item.done::before {
        content:''; position:absolute; width:100%; height:100%; background:url(../images/common/dailycheckin/check.png) center center no-repeat; background-size:100% auto; top:0; left:0
    }

    .checkin-item img {
        width: 100%;
        max-width: 110px;
        border-radius: 12px;
    }
.checkin-close {
    top: 12%!important;
    width: 10%;
    height: 10%;
}
.daychecked{
    position:absolute;left:21%;
}

@keyframes blinkShadow2 {
    50% {
        filter: brightness(1.2) drop-shadow(0 0 8px #14AD10);
        transform: scale(1.03)
    }
}

/* Last item centered at bottom */
.bottom-center {
    grid-column: 2 / span 1;
}

@media (max-width: 992px) { 
    .checkin-grid { width:48% }
}