@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --btn-gradient: linear-gradient(90deg, #7e0000, #dc0000, #7e0000);
    --border-color: #ff0024;
    --text-color: #fff;
    --text-color2: #000;
    --text-color3: #ff0000;
    --text-color4: #ffb300;
    --main-color: #ff0000;
    --bg-color: #000;
    --bg-color1: #fff;
    --bg-color2: #44090e;
    --bg-color3: #ca0505;
    --btn-gradient2: linear-gradient(180deg, #900101, #3c0101);
    --btn-gradient3: linear-gradient(180deg, #820017, #680010);
    --btn-gradient4: linear-gradient(180deg, #cb0505, #960404);
    --border-gradient: linear-gradient(var(--bg-color2), var(--bg-color2)) padding-box,    linear-gradient(90deg, #ffb300, #ff0024, #ffb300) border-box;
    --box-gradient: linear-gradient(180deg, #8f0000a3, #190000);
}

body {
    font-family: "Montserrat", sans-serif;
    line-height: 1.6;
    font-size: 15px;
    margin: 0 auto;
    color: #ffffff;
    background-color: #191b1e;
}

select:focus-visible {
    outline: unset;
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: unset;
}

a {
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: #fff;
}

a:hover,
a:focus {
    text-decoration: none;
    color: unset;
}

img {
    max-width: 100%;
}

ul,
ol,
li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
    color: #fff;
    width: 100%;
}

button:focus {
    outline: unset
}

.container {
    max-width: 1400px;
    padding-left: 18px;
}

body.body_main_wrap {
    padding-left: 0;
    padding-top: 88px;
    width: 100%;
    transition: padding .1s ease-in-out;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.body_main_wrap.al-header {
    padding-top: 60px;
    background: #000;
}

.t-body {
    display: flex;
    align-items: flex-start;
    width: 100%;
    flex: 1 0 auto;
}

body.body_main_wrap.body_main_container .t-body {
    padding-left: 0;
}

.t-body > .main_wrapper {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.t-footer {
    position: relative;
    z-index: 1;
    width: 100%;
}

/*index*/
.body_main_wrap {
    width: 100%;
    min-height: 100vh;
    background-image: url("../assets/images/bg.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 75px;
    background: url("../assets/images/header/header.webp") top center no-repeat;
}

.header-inner {
    position: relative;
    width: 1120px;
    max-width: calc(100% - 40px);
    height: 80%;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px;
    position: sticky;
    top: 0px;
    z-index: 9999;
}

.header-logo img {
    width: 220px;
}

.header-login {
    display: flex;
    align-items: center;
    gap: 8px;
    /* padding-bottom: 20px; */
}

.header-input {
    width: 150px !important;
    height: 40px;
    padding: 0 10px;
    background-color: #ffffff;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    font-size: 12px;
    outline: none;
    color: #000 !important;
}

.header-login-button {
    /* height: 40px; */
    padding: 10px 15px;
    color: #ffffff;
    background: var(--btn-gradient);
    border: 1px solid #ff5353;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.main-content {
    min-height: calc(100vh - 80px);
    padding: 0px 50px 20px;
}

.announcement-bar {
    width: 100%;
    min-height: 35px;
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg,
            #ffd6d6 0%,
            #ffc4c4 55%,
            #ff969c 100%);
    /* border: 2px solid #d40000; */
    /* box-shadow:
        0 0 8px rgba(255, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.35); */
    overflow: hidden;
}

.announcement-title {
    width: 280px;
    /* min-width: 245px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    color: #000000;
    background: linear-gradient(90deg,
            #b60000 0%,
            #d90000 100%);
    font-size: 15px;
    font-weight: 500;
}

.announcement-title i {
    font-size: 15px;
}

.announcement-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0px;
    color: #000000;
    font-size: 13px;
    font-weight: 400;
}

/* content */
.content-wrapper {
    width: 100%;
    /* margin: 0 auto; */
    padding: 12px 0 40px;
    display: grid;
    grid-template-columns:
        minmax(190px, 23%) minmax(0, 1fr);
    gap: 20px;
    border: 2px solid #e00000;
    background: #4f0308c4;
    margin-bottom: 20px;
    /* margin-top: 5px; */
}

/* =========================
           Left sidebar
        ========================= */

.left-sidebar {
    min-width: 0;
    padding: 0px 20px;
}

.sidebar-menu {
    margin-top: 15px;
    padding: 0px;
    list-style: none;
    /* padding-left: 20px; */
}

.sidebar-menu img {
    width: 25px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 0, 0, 0.8);
    font-size: 14px;
    /* transition: 0.2s ease; */
    font-weight: 600;
}

.sidebar-menu a:hover {
    /* padding-left: 20px; */
    background: linear-gradient(90deg, #dc0000, #7e0000);
}

.sidebar-menu a:hover img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(223deg) brightness(102%) contrast(100%);
}

.sidebar-menu a:hover i {
    color: #fff;
}

.sidebar-menu i {
    width: 18px;
    color: #ff1a1a;
    text-align: center;
}

.sidebar-button {
    display: block;
    margin: 10px 0px;
    padding: 9px;
    color: #ffffff;
    background: linear-gradient(to bottom,
            #f00000,
            #720000);
    border: 1px solid #ff3434;
    border-radius: 3px;
    font-weight: 700;
    text-align: center;
}

/* sidebar-info */
.result-card {
    width: 100%;
    /* max-width: 265px; */
    padding: 10px;
    background: linear-gradient(135deg, #c9252f 0%, #a0292f 100%);
    border: 2px solid #e00000;
    border-radius: 7px;
    box-shadow:
        0 0 10px rgba(255, 0, 40, 0.7),
        inset 0 0 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.result-header {
    margin-bottom: 10px;
}

.result-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000000;
    font-size: 15px;
    font-weight: 500;
}

.result-title i {
    font-size: 17px;
}

.result-header-bottom {
    margin-top: 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.result-date {
    color: #000000;
    font-size: 14px;
}

.result-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.result-arrow {
    width: 25px;
    height: 25px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: #050505;

    border: 0;
    border-radius: 50%;

    font-size: 11px;
    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.result-arrow:hover {
    color: #000000;
    background: #ffffff;
    transform: scale(1.08);
}

.result-content {
    position: relative;
    overflow: hidden;
}

.result-page {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 4px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s linear 0.4s;
}

.result-page.active {
    position: relative;

    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    pointer-events: auto;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0s;
}

.result-page.active.move-up {
    animation: smoothMoveUp 0.1s ease;
}

.result-page.active.move-down {
    animation: smoothMoveDown 0.1s ease;
}

@keyframes smoothMoveUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes smoothMoveDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-page {
    flex-direction: column;
    gap: 4px;
}

.result-item {
    min-height: 39px;
    padding: 8px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: #ffffff;
    background: #030303;

    border-radius: 4px;
}

.result-name {
    min-width: 0;

    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-number {
    flex-shrink: 0;

    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 5px;

    text-shadow:
        1px 0 #35aaff,
        -1px 0 #ff4545;
}

/* berita + hotmatch */
.sidebar-stack {
    width: 100%;
    max-width: 270px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =========================
           Shared card
        ========================= */

.sidebar-card {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg,
            #d62d3b 0%,
            #ad1c29 100%);
    border: 2px solid #ff1635;
    border-radius: 6px;
    box-shadow:
        0 0 9px rgba(255, 0, 40, 0.65),
        inset 0 0 10px rgba(0, 0, 0, 0.15);
    margin: 15px 0px;
}

.sidebar-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: #000000;
    font-size: 15px;
    font-weight: 500;
}

.sidebar-card-title i {
    font-size: 17px;
}


.left_container_bonus {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
}

.left_container_bonus_box {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
}

.left_container_bonus_txt {
    position: absolute;
    flex-direction: column;
    display: flex;
}

.left_container_bonus_txt_top {
    font-weight: 700;
}

.left_container_bonus_txt_btm {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    padding: 0px 18px;
}

.left_container_bonus_box img {
    width: 100%;
}

/* =========================
           Berita Terakhir
        ========================= */

.news-scroll {
    max-height: 143px;
    padding: 8px 14px;

    color: #ffffff;
    background: #030303;

    border-radius: 3px;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: auto;
    scrollbar-color: #999999 #f4f4f4;
}

.news-item {
    margin-bottom: 10px;
}

.news-item:last-child {
    margin-bottom: 0;
}

.news-title {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.news-date {
    margin: 0;

    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

/* Chrome scrollbar */

.news-scroll::-webkit-scrollbar {
    width: 10px;
}

.news-scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.news-scroll::-webkit-scrollbar-thumb {
    background: #9c9c9c;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
}

.news-scroll::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

/* Hotmatch scrollbar */
#hotmatchScroll {
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

#hotmatchScroll::-webkit-scrollbar {
    width: 7px;
}

#hotmatchScroll::-webkit-scrollbar-track {
    background: transparent;
}

#hotmatchScroll::-webkit-scrollbar-thumb {
    background: #000;
    border: 0;
    border-radius: 10px;
}

#hotmatchScroll::-webkit-scrollbar-thumb:hover {
    background: #000;
}

/* =========================
           Hotmatch header
        ========================= */

.hotmatch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 10px;
}

.hotmatch-header .sidebar-card-title {
    margin-bottom: 0;
}

.hotmatch-select {
    max-width: 105px;
    padding: 6px 15px 6px 5px;
    color: #ffffff;
    background: #ff4d63;
    border: 1px solid #ffb4bd;
    border-radius: 5px;
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.8),
        0 0 9px rgba(255, 0, 50, 0.7);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

.hotmatch-select option {
    color: #fff;
    background: #ff4d63;
}

/* =========================
           Hotmatch scrolling
        ========================= */

.hotmatch-scroll {
    position: relative;
    width: 100%;
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: auto;
    scrollbar-color: #000000a6 #ffffff;
}

.hotmatch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-card {
    flex-shrink: 0;
    padding: 10px 10px 0;
    color: #ffffff;
    background: #030303;
    border-radius: 8px;
    overflow: hidden;
}

.match-league {
    margin: 0 0 4px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-date {
    margin: 0 0 10px;

    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
}

.team-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 8px;
}

.team-status {
    width: 25px;
    height: 25px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #000000;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
}

.team-status.home {
    background: #16dd69;
}

.team-status.away {
    background: #e7001a;
}

.team-name {
    min-width: 0;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-odds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;

    margin-top: 9px;
    margin-bottom: 8px;
}

.odd-box {
    padding: 5px 1px;
    color: #000000;
    background: #e6001a;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.match-play {
    width: calc(100% + 20px);
    margin-left: -10px;
    padding: 7px;

    color: #ffffff;
    background: linear-gradient(to bottom,
            #ff183c 0%,
            #ed0026 45%,
            #7c0012 100%);

    border: 0;

    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;

    cursor: pointer;
}

.match-play:hover {
    filter: brightness(1.2);
}

.main-right-content {
    padding: 0px 15px;
}

.main-right-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px;
    margin-bottom: 10px;
}

/* .main-right-content img {
    display: block;
    width: 100%;
    height: auto;
} */

.daftar-blink-text {
    animation: daftarTextBlink 0.8s infinite;
}

@keyframes daftarTextBlink {

    0%,
    100% {
        color: #ffffff;
        opacity: 1;
        text-shadow: none;
    }

    50% {
        color: #fff;
        opacity: 0.25;
        text-shadow:
            0 0 5px #ffffff,
            0 0 10px #fff;
    }
}


/* Main banner */

.main-banner-swiper {
    width: 100%;
    /* margin-bottom: 8px; */
}

.main-banner-swiper .swiper-slide {
    width: 100%;
}

.main-banner-swiper .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.7;
}

.main-banner-swiper .swiper-pagination-bullet-active {
    background: #ff0000;
    opacity: 1;
}


/* Shared navigation */

.swiper-button-prev,
.swiper-button-next {
    width: 30px;
    height: 38px;
    margin-top: -19px;

    color: #ffffff;
    background: rgba(80, 0, 0, 0.8);

    border: 1px solid #ff2424;
    border-radius: 3px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}


/* Cashback */

.cashback-section {
    width: 100%;
    overflow: hidden;
    margin: 15px 0px;
}

.cashback-section img{
    width: 100%;
}


/* Lottery */

.lottery-section {
    width: 100%;
    margin-bottom: 8px;
    padding: 6px;
    /* border: 2px solid #e30000; */
    /* background: linear-gradient(to bottom,
            rgba(190, 0, 0, 0.95),
            rgba(80, 0, 0, 0.95)); */
}

.lottery-swiper {
    width: 100%;
}

.lottery-item {
    display: block;
    width: 100%;
    /* border: 1px solid #ff2525; */
    /* background: #390000; */
    overflow: hidden;
}


/* Social media */

.social-section {
    width: 100%;
    margin-bottom: 8px;
}

.social-list+.social-list {
    margin-top: 5px;
}

.social-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.social-list>li {
    padding: 0 3px;
}

.social-item {
    width: 100%;
    padding: 10px 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(to bottom,
            #df1616,
            #820000);
    border: 1px solid #ff3535;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
}

.social-item:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.15);
}

.social-icon {
    width: 37px;
    height: 37px;
    margin-bottom: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    border-radius: 6px;
    font-size: 21px;
}

.social-item small {
    font-size: 13px;
    line-height: 1.2;
}

.social-item img {
    width: 55px;
    margin-bottom: 5px;
}

/* Bottom promotion */

.bank-section {
    width: 100%;
    padding: 6px;
}

.bank-swiper {
    width: 100%;
}

.bank-swiper .swiper-slide {
    overflow: hidden;
}

.bank-swiper ul {
    gap: 0px;
}

/* footer */
.main-footer {
    width: 100%;
    padding: 0 20px 0px;
    color: #ffffff;
    background: #000000;
    border-top: 9px solid #f0001e;
    text-align: center;
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
    padding-top: 15px;
}

.footer-nav a {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

.footer-nav a:hover {
    color: #ff1838;
    text-shadow: 0 0 8px rgba(255, 0, 45, 0.9);
}

.footer-divider {
    color: #ffffff;
    font-size: 17px;
    line-height: 1;
}

.footer-title {
    margin: 25px 0 27px;

    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 21px;
    text-decoration: none;

    transform-origin: center;
    animation: socialShakeSmooth 4s ease-in-out infinite;
}

@keyframes socialShakeSmooth {

    0%,
    25%,
    100% {
        transform: rotate(0deg);
    }

    4% {
        transform: rotate(-8deg);
    }

    8% {
        transform: rotate(8deg);
    }

    12% {
        transform: rotate(-6deg);
    }

    16% {
        transform: rotate(6deg);
    }

    20% {
        transform: rotate(-3deg);
    }
}

.footer-social a:hover {
    color: #ff1736;
    transform: translateY(-3px);
    text-shadow: 0 0 8px rgba(255, 0, 45, 0.9);
}

.footer-copyright {
    margin: 20px 0px;
    font-size: 12px;
}


/* pop out announcement */
.announcementpopupimg img {
    margin: auto;
    border-radius: 5px;
}

#announcementpopup .carousel-control-prev {
    left: -22px;
}

#announcementpopup .carousel-control-next {
    right: -22px;
}

.announcementmodal.modal {
    z-index: 999999;
}

.announcementmodal .modal-content {
    position: relative;
}

.announcementmodal .close {
    right: 0;
    bottom: -35px;
    color: var(--text-color);
    opacity: 1;
    position: absolute;
    z-index: 111;
    text-align: center;
    left: 48%;
    font-size: 27px;
    font-weight: 100;
    border: 2px solid var(--main-color);
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.announcementmodal.detectannouncementmodal02 .close {
    position: absolute;
    right: 55px;
    top: 20px;

}

.announcementmodal .modal-content {
    background: none;
    border: none;
}


.announcementmodal .modal-dialog {
    max-width: 500px;
}

.annou-pop {
    border-radius: 20px;
    background: var(--bg-color);
    border: 1px solid var(--main-color);
    padding: 20px;
    color: var(--text-color);
    border: 1px solid var(--main-color);
}

.annou-ttle {
    color: var(--text-color);
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 7px;
}

.annou-content {
    padding-top: 25px;
    font-size: 12px;
}

.announcementmodal .modal_close {
    z-index: 10;
    color: var(--text-color);
    opacity: 1;
}

.annou-content img {
    display: block;
    margin: 0px auto;
}

.annou-pop p {
    margin-top: 20px;
    margin-bottom: 0px;
    color: var(--text-color);
}

.round {
    position: relative;
    margin-right: 10px;
    height: 16px;
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    height: 16px;
    left: 0;
    position: absolute;
    top: 0;
    width: 16px;
    margin: 0px;
}

.round label:after {
    border: 2px solid var(--text-color);
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 1px;
    opacity: 0;
    position: absolute;
    top: 3px;
    transform: rotate(-45deg);
    width: 12px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.round input[type="checkbox"]:checked+label:after {
    opacity: 1;
}

.cls-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-size: 12px;
    color: #fff;
}

/* end pop out announcement */

/* index-product */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.filter-button {
    cursor: pointer;
    padding: 4px 11px;
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--text-color);
    font-weight: 500;
    border-radius: 10px;
    font-size: 13px;
}

.filter-button.active,
.filter-button:hover {
    background: var(--btn-gradient);
    color: var(--text-color);
    /* box-shadow: 0 0 2px 2px inset var(--main-color); */
    border: 1px solid var(--border-color);
}

.filter-button.active img,
.filter-button:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(223deg) brightness(102%) contrast(100%);
}

.filter-button img {
    width: 23px;
    margin-right: 5px;
}

.tabs_product {
    margin: 20px 0;
}

.tab_wrapper {
    display: flex;
    align-items: center;
    /* background-color: #000e097d; */
    /* backdrop-filter: blur(5px); */
    border-radius: 10px;
    padding: 10px 0px;
    justify-content: space-between;
}

.tab_wrapper_inn {}

.searchinput {
    background-color: #44090e;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 4px 10px;
}

.hotgame-main-img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.top_icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
}

.arrow_slider {
    display: flex;
    grid-gap: 6px;
    margin: 10px 0;
}

.arrow_slider .slide-arrow {
    cursor: pointer;
    background: var(--btn-gradient);
    padding: 6px 13px;
    border-radius: 8px;
    color: var(--text-color);
    box-shadow: 0 0 2px 2px inset var(--main-color);
}

.slider_title {
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-weight: 600;
}

.slider_title i {
    margin-right: 10px;
}

.arrow_slider_wrp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.arrow_slider_wrp.slot-all {
    justify-content: flex-end;
}

.view_btn {
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-weight: 600;
    background: var(--btn-gradient);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12px;
    box-shadow: 0 0 2px 2px inset var(--main-color);
}

.hotgame-main-img_pro {
    background: #081e15;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #1da470;
}

.daily_icon {
    width: 25px;
    margin-right: 10px;
}

.tournament_sec {
    margin: 15px 0;
}

.daily_wrap {
    padding: 0;
}

.daily_wrap_img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    /* margin-bottom: -10px; */
    position: relative;
}

.daily_table_wrap {
    background: var(--bg-color2);
    backdrop-filter: blur(5px);
    padding: 20px 10px 10px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* border: 1px solid var(--border-color); */
    border-top: none;
}

.battle_card_title {
    font-size: 20px;
    max-height: 52px;
    max-width: 160px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 17px;
}

.daily_wrap_img_inn {
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.battle_card_timer {
    padding: 9px 15px;
    width: 160px;
    height: 51px;
    background: hsla(0, 0%, 100%, .18);
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.battle_card_label {
    position: absolute;
    left: -1px;
    top: -2px;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000;
    opacity: .9;
    background: #fed700;
    border-radius: 8px 8px 8px 0;
    padding: 2px 6px;
    white-space: nowrap;
}

.battle_card_timer_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.battle_card_block_value {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" on, "lnum" on;
    color: #fff;
}

.battle_card_block_name {
    color: #ffffffb8;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
}

.battle_card_timer_dot {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" on, "lnum" on;
    color: #fff;
    align-self: flex-start;
}

.battle_card_prize {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    background: #fed700;
    box-shadow: 0 6.88237px 13.1093px -6.88237px rgba(0, 0, 0, .08);
    border-radius: 8px;
    font-weight: 800;
    color: #000;
    height: 36px;
    width: fit-content;
}

.battle_card_prize_title {
    font-size: 12px;
    line-height: 120%;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
    width: 32px;
    margin-right: 6px;
    white-space: pre-line;
    flex-shrink: 0;
}

.battle_card_prize_amount {
    font-size: 24px;
    line-height: 110%;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" on, "lnum" on;
    font-weight: 800;

}

.daily_table_wrap table thead tr {
    color: var(--text-color);
    font-size: 11px;
    font-weight: 600;
}

.daily_table_wrap table img {
    width: 27px;
}

.table_user {
    display: inline-flex;
    align-items: center;
    grid-gap: 10px;
}

.table_user_content {
    display: flex;
    flex-direction: column;
}

.table_user_content span {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: -.02em;
    color: #e5d26e;
    font-weight: 500;
}

.table_user_content span.name {
    color: #fff;
}

.daily_table_wrap table tr th {
    padding: 5px;
    color: var(--main-color);
}

.daily_table_wrap table tr {
    border-bottom: 1px solid var(--border-color);
}

.daily_view {

    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px 5px 5px;
    gap: 10px;
}

.daily_view a {
    font-weight: 600;
    font-size: 12px;
    min-width: 120px;
}

.btn-more {
    background: var(--btn-gradient);
    color: var(--text-color);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    /* box-shadow: 0 0 2px 2px inset var(--main-color); */
    font-weight: 500;
}

.btn-challenge {
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 5px;
    padding: 5px 10px;
    background: var(--bg-color2);
}

.mobile_dropdown {
    background-color: #1b140b;
    padding: 14px 18px;
    display: none;
    align-items: center;
    grid-gap: 20px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

.mobile_dropdown.open:after {
    transform: rotate(180deg);
}

.mobile_dropdown img {
    width: 33px;
}

.detect_id_tab {
    margin-bottom: 15px;
}

.mobile_dropdown:after {
    content: '\f078';
    font-size: 13px;
    line-height: 1;
    position: absolute;
    right: 17px;
    transition: all 0.3s;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    z-index: 1;
    color: #93acb6;
}

.mobile_dropdown-slots:after {
    content: '\f078';
    font-size: 13px;
    line-height: 1;
    position: absolute;
    right: 17px;
    transition: all 0.3s;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    z-index: 1;
    color: #93acb6;
}

.mobile_dropdown-slots {
    background-color: #171f2b;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    grid-gap: 20px;
    border-radius: 10px;
    display: none;
    position: relative;
}

.mobile_dropdown-slots img {
    height: 33px;
}

.tab_wrapper-slots {
    display: flex;
    align-items: center;
    background-color: #171f2b;
    border-radius: 10px;
    padding: 10px;
    justify-content: space-between;
}

.tab_wrapper-slots img {
    height: 35px;
    margin: 0px;
}

.filter-button-slots img {
    width: auto;
    filter: drop-shadow(1px 1px 0 black);
}

.slot-wrap .filter-button {
    padding: 4px 10px;
    border: none;
    min-width: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab_wrapper-slots {
    align-items: baseline;
}

.tab_wrapper_inn.slot-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.slot-wrap .filter-button {
    padding: 4px 0px;
    border: none;
}

.transaction_container {
    position: relative;
    margin-top: 20px;
    background-color: #23262B;
    padding: 10px;
    border-radius: 10px;
    background: #44090e url(../assets/images/index/live-transaction.webp) bottom right no-repeat;
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    background-size: contain;
}

.transaction_title_box {
    display: grid;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
    /* padding: 10px; */
    grid-template-columns: repeat(2, 1fr);
}

.transaction_title {
    display: flex;
    align-items: center;
}

.transaction_title img {
    width: 25px;
    margin-right: 10px;
}

.transaction_title .text {
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 20px;
    color: #A6A9B2;
}

.transaction_time {
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: var(--text-color);
    padding: 10px;
    /* text-shadow: 0px 3px #000000; */
}

.transaction_box {
    display: grid;
    flex-wrap: wrap;
    /* margin-left: -10px; */
    /* margin-right: -10px; */
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
}

.transaction_content {
    width: 100%;
    /* margin: 10px; */
    /* background-color: #1D2025; */
    /* border-bottom-left-radius: 10px; */
    /* border-bottom-right-radius: 10px; */
    /* padding: 15px; */
    /* overflow: hidden; */
    position: relative;
}

.transaction_content_box_title {
    display: flex;
    align-items: center;
}

.transaction_content_box {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.transaction_content_1_title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color);
    width: 50%;
}

.transaction_content_2_title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color);
    width: 50%;
}

.transaction_content_1 {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    width: 50%;
}

.transaction_content_1 img {
    width: 30px;
    margin-right: 10px;
}

.transaction_content_2 {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    width: 50%;
}

.light .transaction_container {
    background-color: #fff;
}

.light .transaction_title .text {
    color: #111111;
}

.light .transaction_time {
    color: #111111;
}

.light .transaction_content {
    background-color: #F6F7FB;
}

.light .transaction_content_1_title {
    color: #111111;
}

.light .transaction_content_2_title {
    color: #111111;
}

.light .transaction_content_1 {
    color: #111111;
}

.light .transaction_content_2 {
    color: #111111;
}

.wrap-live {
    width: calc(100% - 20px);
    background: #42040be3;
    border-radius: 10px;
    padding: 15px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

img.img-sh {
    position: absolute;
    z-index: 0;
    left: -20px;
}

img.img-sh2 {
    z-index: 2;
    position: relative;
}

.transc-l img {
    display: block;
    margin: 0px auto;
}

.btn-live {
    display: flex;
    align-items: center;
}

.text-trs {
    color: var(--main-color);
    font-size: 20px;
    line-height: 21px;
}

.fnt-wh {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.m-view {
    display: none;
}

.d-view {
    display: block;
}

.daily_wrap_img img {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 24px;
    padding: 5px 10px;
    cursor: pointer;
}

.mobile-menu-modal .modal-dialog {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    transform: translateX(-100%);
}

.mobile-menu-modal.show .modal-dialog {
    transform: translateX(0);
}

.mobile-menu-modal .modal-content {
    height: 100vh;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
}

.mobile-menu-modal .modal-body {
    padding: 20px !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--btn-gradient3);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu-logo img {
    max-width: 130px;
    height: auto;
}

.mobile-menu-close {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 18px;
    cursor: pointer;
}

.mobile-menu-modal.fade .modal-dialog {
    transition: transform 0.3s ease;
    border-right: 1px solid var(--border-color);
}

.modal-backdrop.show {
    opacity: 0.7;
}

/* login-box */
.mobile-login-box {
    /* width: 350px; */
    padding: 10px;
}

.login-input-group {
    /* height: 38px; */
    margin-bottom: 12px;
    border: 2px solid #e10c23;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
}

.login-input-group .input-group-prepend {
    margin-right: 0;
}

.login-input-icon {
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid #e10c23;
    border-radius: 0;
    background: #006873;
    color: #ffd82e;
    font-size: 16px;
}

.login-input {
    height: 34px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #555 !important;
    font-size: 13px;
    text-align: center;
    padding-right: 44px;
    box-shadow: none !important;
}

.login-input:focus {
    border: 0;
    box-shadow: none;
}

.login-input::placeholder {
    color: #777;
    opacity: 1;
}

.show-password {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.show-password input {
    display: none;
}

.show-password i {
    margin-right: 5px;
    font-size: 14px;
}

.login-option-row {
    position: relative;
    margin-bottom: 9px;
}

.forgot-password {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.forgot-password:hover {
    color: #fff;
}

.login-submit {
    padding: 10px 0px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: var(--btn-gradient);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.login-submit:hover,
.login-submit:focus {
    background: linear-gradient(to bottom, #f02739 0%, #db0016 100%);
    color: #fff;
}

.login-title {
    text-align: center;
    margin-bottom: 10px;
}

.forgot-pass {
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* afterlogin header */
.desktop-header-left {
    /* height: 100%; */
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: space-between;
}

.desktop-header-right {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.header-menu-icon {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #f00016;
    font-size: 21px;
}

.header-menu-icon:hover {
    color: #ff263a;
    text-decoration: none;
}

.header-nav-item {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    padding: 0;
}

.header-nav-item>i {
    color: #f00016;
    font-size: 17px;
}

.header-nav-item>span:not(.memo-count) {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 3px;
    background: #565656;
    gap: 10px;
}

.header-nav-item:hover {
    color: #fff;
    text-decoration: none;
}

.header-nav-item:hover>span:not(.memo-count) {
    background: #81868c;
}

.memo-item {
    gap: 6px;
}

.memo-count {
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.bonus-button {
    height: 37px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 12px;
    padding: 0 16px;
    border-radius: 20px;
    background: #b7000b;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.bonus-button i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dotted #fff;
    border-radius: 50%;
    color: #fff;
}

.bonus-button:hover {
    color: #111;
    background: #d0000d;
    text-decoration: none;
}

.header-avatar {
    margin-right: 5px;
    margin-left: 7px;
}

.header-avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.header-username {
    margin-right: 10px;
    color: #f00016;
    font-size: 14px;
    font-weight: 600;
    margin-left: 7px;
    color: #fff;
    font-size: 12px;
}

.header-username:hover {
    color: #ff263a;
    text-decoration: none;
}

.header-balance {
    margin-right: 12px;
}

.balance-button {
    border: 0;
    background: transparent;
    color: #f00016;
    font-size: 13px;
    font-weight: 600;
}

.balance-button:focus {
    outline: 0;
}

.refresh-balance {
    width: 44px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #111;
    color: #aa0711;
    font-size: 22px;
}

.refresh-balance:hover {
    color: #e60013;
    text-decoration: none;
}

.afterlogin-token {
    display: flex;
    flex-direction: column;
    padding: 5px 0px;
    gap: 5px;
}

.afterlogin-token button {
    font-size: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-weight: 600;
}

.footer-copyright p {
    font-weight: bold;
    font-size: 20px;
}

/* footer-seo */
.seo-section {
    width: 100%;
    position: relative;
    padding: 20px;
    margin: 0;
    background: #000;
    color: #fff;
    box-sizing: border-box;
}

.seo-content {
    width: 100%;
    position: relative;
    color: #fff;
    text-align: left;
}

.seo-content p {
    margin: 0 0 15px;
    padding: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.seo-content strong {
    color: #fff;
    font-weight: 700;
}

.seo-content h2 {
    margin: 22px 0 12px;
    padding: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.seo-content h3 {
    margin: 20px 0 10px;
    padding: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.seo-hidden-content {
    display: none;
    width: 100%;
    position: relative;
}

.seo-readmore-wrap {
    width: 100%;
    display: block;
    margin-top: 15px;
}

.seo-close-wrap {
    width: 100%;
    display: block;
    margin-top: 25px;
}

.seo-toggle-btn {
    width: 100%;
    height: 36px;
    display: block;
    padding: 0 15px;
    margin: 0;
    border: 1px solid #ff001c;
    border-radius: 6px;
    outline: none;
    background: #df0018;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background .2s ease;
}

.seo-toggle-btn:hover {
    border-color: #ff001c;
    background: #f0001a;
    color: #fff;
    text-decoration: none;
}

.seo-toggle-btn:focus,
.seo-toggle-btn:active {
    border-color: #ff001c;
    outline: none;
    background: #c90015;
    color: #fff;
    box-shadow: none;
}

.seo-section .table-responsive {
    width: 100%;
    margin: 18px 0 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.seo-section .seo-table {
    width: 100%;
    min-width: 600px;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid #bbb;
    background: #000;
    color: #fff;
}

.seo-section .seo-table thead {
    background: #ddd;
}

.seo-section .seo-table thead th {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: var(--main-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
}

.seo-section .seo-table tbody tr {
    background: #000;
}

.seo-section .seo-table tbody td {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    background: #000;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
}

.seo-section .seo-table tbody td:first-child {
    width: 22%;
    font-weight: 600;
}

.seo-section a {
    color: inherit;
}

/* afterlogin-header */
.top-header {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0px;
  right: 0px;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background: #000;
  padding: 0px 10px;
  min-width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 10px;
}

.sidebar-toggle {
  height: 100%;
  border: 0;
  color: #ff003c;
  background: transparent;
  font-size: 18px;
  text-align: right;
  padding: 0 10px;
  cursor: pointer;
}


/* header menu */

.header-menu {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: visible;
}

.header-link {
  min-height: 22px;
  margin-right: 6px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid #5a5a5a;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(#0f0f0f, #3b3b3b);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  font-size: 12px;
  transition: .2s;
}

.header-link:hover,
.header-link.active {
  border-color: #e3002e;
  background: linear-gradient(#df002b, #9f001d);
}

.header-link:hover i, .header-link.active i{
    color: var(--text-color) !important;
}

.header-link i:first-child {
  margin-right: 5px;
  color: var(--text-color);
}

.header-link.active i:first-child {
  color: #fff;
}

.header-link .arrow {
  margin-left: 5px;
  font-size: 12px;
}

.header-badge {
  margin-left: 4px;
  color: #ff3153;
}


/* header user */

.header-user {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 7px;
}

.header-point {
  margin-left: 5px;
  padding: 5px 8px;
  border-radius: 3px;
  color: #fff;
  background: #bd0022;
  font-size: 12px;
  cursor: pointer;
}

.header-avatar img {
  width: 35px;
  height: 35px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.header-balance {
  margin-left: 0px;
  color: #ff003c;
  font-size: 12px;
  font-weight: 700;
}

.header-balance i {
  margin-left: 3px;
}

.header-logout {
  margin-left: 7px;
  color: #e40031;
  font-size: 12px;
}

.left-sidebar.afterlogin-sidebar {
  position: sticky;
  top: 60px;
  align-self: flex-start;
  flex: 0 0 0;
  width: 250px;
  max-width: 0;
  height: calc(100vh - 60px);
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--btn-gradient3);
  border-right: 0;
  padding-top: 20px;
  opacity: 0;
  pointer-events: none;
  transition: max-width .3s ease, opacity .3s ease, border .3s ease, flex-basis .3s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0px;
}

.left-sidebar.afterlogin-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.left-sidebar.afterlogin-sidebar.show {
  flex-basis: 250px;
  max-width: 250px;
  border-right: 1px solid #ff002e;
  opacity: 1;
  pointer-events: auto;
  padding: 10px;
}

.sidebar-toggle {
  border: 0;
  padding: 10px;
  color: #ff003c;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}

.sidebar-toggle:hover {
  color: #ff3156;
}

.sidebar-toggle:focus {
  outline: none;
}

.sidebar-toggle i {
  transition: transform .3s ease;
}

.header-dropdown {
  position: relative;
  margin-right: 6px;
}

.header-dropdown .header-link {
  margin-right: 0;
}

.header-dropdown .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: 2px;
  border-top: 5px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.header-dropdown-menu {
  min-width: 200px;
  margin-top: 5px;
  padding: 8px 0;
  border: 1px solid #ff0038;
  border-radius: 0;
  background: #050505;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .45);
}

.header-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 9px 18px;
  color: #eee;
  background: transparent;
  font-size: 15px;
  white-space: nowrap;
}

.header-dropdown-menu .dropdown-item i {
  width: 22px;
  margin-right: 8px;
  color: #fff;
  text-align: center;
  font-size: 15px;
}

.header-dropdown-menu .dropdown-item:hover,
.header-dropdown-menu .dropdown-item:focus {
  color: #fff;
  background: #be0025;
}

.header-dropdown.show .header-link {
  border-color: #e3002e;
  background: linear-gradient(#df002b, #9f001d);
}

/* afterlogin-index */
.afterlogin-home {
  /* min-height: 100vh; */
  padding: 10px;
  background: var(--bg-color)
    url("../assets/images/afterlogin/idn-index-afterlogin-bg.webp")
    top center / 100% auto no-repeat;
  color: var(--text-color);
}


/* =========================
   LATEST INFO
========================= */

.latest-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.latest-info-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.latest-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  background: var(--main-color);
  border-radius: 3px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
}

.latest-label i {
  margin-right: 6px;
}

.latest-marquee {
  min-width: 0;
  flex: 1;
  margin-left: 12px;
  overflow: hidden;
  color: var(--text-color);
  font-size: 12px;
}

.latest-marquee marquee {
  display: block;
}

.free-chip-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  padding: 7px 15px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-color);
  background: var(--btn-gradient);
  box-shadow: 0 0 12px rgba(255, 0, 0, .5);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.free-chip-btn:hover {
  color: var(--text-color);
  text-decoration: none;
}


/* =========================
   CATEGORY
========================= */

.game-category {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.game-category::-webkit-scrollbar {
  display: none;
}

.game-category-item {
  flex: 0 0 auto;
  min-width: 82px;
  padding: 4px 7px 7px;
  color: var(--text-color);
  text-align: center;
  text-decoration: none;
  opacity: .8;
  transition: .2s ease;
}

.game-category-item img {
  display: block;
  max-width: 55px;
  margin: 0 auto 4px;
}

.game-category-item span {
  display: block;
  font-size: 11px;
}

.game-category-item:hover,
.game-category-item.active {
  color: var(--text-color);
  opacity: 1;
  text-decoration: none;
}

.game-category-item.active img {
  transform: translateY(-3px);
}


/* =========================
   PROVIDER SECTION
========================= */

.provider-section {
  display: grid;
  grid-template-columns: 40% 60%;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(145,0,0,.95), rgba(90,0,0,.85));
  margin-top: 50px;
}


/* LEFT VISUAL */

.provider-visual {
  position: relative;
}

.provider-visual img {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
}


/* RIGHT CONTENT */

.provider-content {
  padding: 12px 15px 18px 0;
}

.provider-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.provider-title img {
  max-width: 42px;
  margin-right: 8px;
}

.provider-title h2 {
  margin: 0;
  color: var(--text-color);
  font-size: clamp(22px, 2vw, 20px);
  font-weight: 800;
}


/* =========================
   PROVIDER GRID
========================= */

.provider-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 7px;
  row-gap: 12px;
}

.provider-item {
  min-width: 0;
  color: var(--text-color);
  text-align: center;
  text-decoration: none;
}

.provider-item:hover {
  color: var(--text-color);
  text-decoration: none;
}

.provider-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: rgba(135, 0, 0, .65);
  transition: .2s ease;
}

.provider-item:hover .provider-logo {
  background: var(--btn-gradient2);
  transform: translateY(-2px);
  box-shadow: 1px 1px 7px 1px #ff4949;
}

.provider-logo img {
  max-width: 100%;
  max-height: 45px;
  object-fit: contain;
}

.provider-item span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.provider-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.provider-all-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

.provider-all-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.provider-group {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: rgba(68, 9, 14, .8);
}

.provider-group-fill {
  flex: 1;
}

.header-balance-toggle {
  color: var(--text-color3);
  text-decoration: none;
}

.header-balance-toggle:hover {
  color: var(--text-color);
  text-decoration: none;
}

.header-balance-toggle::after {
  display: none;
}

.balance-dropdown-menu {
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 0;
  background: var(--bg-color);
  top: 20px !important;
}

.balance-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--bg-color2);
  color: var(--text-color);
  font-size: 12px;
}

.balance-dropdown-item:last-child {
  border-bottom: 0;
}

.balance-dropdown-item strong {
  color: var(--text-color3);
}

/* deposit */
.deposit-page {
  padding: 6px;
}

.wallet-panel,
.deposit-box {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--box-gradient);
}

.wallet-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 160px;
  padding: 10px 20px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: linear-gradient(180deg, #8f0000e6, #190000) padding-box, linear-gradient(90deg, #ffb300, #ff0024, #ffb300) border-box;
}

.wallet-left {
  display: flex;
  align-items: self-start;
}

.wallet-left > img {
  margin-right: 25px;
}

.wallet-info h3,
.deposit-box h3 {
  margin: 0 0 8px;
  color: var(--text-color);
  font-size: 18px;
  font-weight: 600;
}

.wallet-info h3,
.deposit-summary h3 {
  color: #ffd74d;
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(180deg, #fafab7, #e2b744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.wallet-balance {
  margin-bottom: 15px;
  color: var(--text-color);
  font-size: 35px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wallet-balance a {
  color: var(--text-color);
  font-size: 20px;
}

.wallet-transfer-btn,
.deposit-submit {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.wallet-transfer-btn {
  padding: 6px 25px;
}

.wallet-points {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wallet-point-btn {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--text-color);
  background: var(--bg-color2);
}

.wallet-point-btn img {
  max-width: 28px;
  margin-right: 5px;
}

.deposit-main,
.deposit-bottom {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.deposit-bottom {
  grid-template-columns: 400px 1fr;
}

.deposit-box {
  padding: 12px;
}

.deposit-tabs,
.bank-list,
.deposit-to-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 10px;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;
}

.deposit-tab,
.bank-item,
.deposit-to {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  background: var(--bg-color2);
  text-decoration: none;
  white-space: nowrap;
}

.deposit-tab.active, .bank-item.active,.deposit-to.active {
  color: #ffd900;
  background: var(--btn-gradient2);
}

.deposit-tab:hover,
.bank-item:hover {
  color: var(--text-color);
  text-decoration: none;
}

.deposit-tab i {
  margin-right: 5px;
}

.deposit-label {
  margin: 25px 0 6px;
  color: var(--text-color);
  font-weight: 600;
}

.deposit-label span {
  color: var(--text-color3);
}

.bank-item img {
  max-width: 70px;
  max-height: 22px;
  margin-right: 5px;
  object-fit: contain;
}

.bank-item, .deposit-to {
  position: relative;
  overflow: visible;
}

.bank-item.active::after, .deposit-to.active::after {
  content: "✓";
  width: 15px;
  height: 15px;
  position: absolute;
  top: -7px;
  right: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  background: var(--main-color);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  border-radius: 10px;
  z-index: 2;
}

.bank-table-wrap {
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.bank-table {
  width: 100%;
  color: var(--text-color);
  text-align: center;
  font-size: 11px;
  border-radius: 10px;
  min-width: 650px;
  border-collapse: collapse;
}

.bank-table th,
.bank-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}

.bank-table img {
  max-width: 65px;
  max-height: 20px;
}

.deposit-to img {
  max-width: 80px;
  max-height: 25px;
}

.deposit-box .tab-content{
    display: block;
} 
.amount-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-color2);
}

.amount-input input {
  width: 100%;
  padding: 12px 15px;
  border: 0;
  outline: 0;
  color: var(--text-color);
  background: transparent;
}

.amount-input span {
  padding-right: 12px;
  color: var(--text-color3);
  font-size: 11px;
  white-space: nowrap;
}

.quick-amount {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.quick-amount button {
  padding: 12px 5px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--text-color);
  background: var(--bg-color2);
  font-weight: 500;
}

.quick-amount button.active {
  color: #ffd900;
  background: var(--btn-gradient2);
}

.receipt-upload {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-left: 15px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--text-color3);
  background: var(--bg-color2);
  cursor: pointer;
}

.receipt-upload i {
  margin-right: 10px;
}

.receipt-name {
  flex: 1;
}

.receipt-upload strong {
  padding: 6px 20px;
  color: var(--text-color);
  background: var(--btn-gradient2);
  margin: 5px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.receipt-upload input {
  display: none;
}

.bonus-dropdown {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 9px;
  border: 0;
  border-radius: 5px;
  color: var(--text-color);
  background: var(--btn-gradient2);
  text-align: left;
}

.bonus-dropdown i {
  margin-right: 10px;
  font-size: 22px;
}

.bonus-dropdown span {
  flex: 1;
}

.bonus-dropdown strong,
.bonus-value {
  color: #ffd900;
}

.bonus-dropdown-menu {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
}

.bonus-dropdown-menu .dropdown-item {
  color: var(--text-color);
}

.bonus-dropdown-menu .dropdown-item:hover {
  color: var(--text-color);
  background: var(--btn-gradient);
}

.summary-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-list {
  display: flex;
  align-items: center;
}

.summary-item {
  min-width: 190px;
  position: relative;
  padding: 5px 25px;
  color: var(--text-color);
  text-align: center;
}

.summary-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 55%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    var(--border-color),
    transparent
  );
}

.summary-item span,
.summary-item strong {
  display: block;
}

.summary-item span {
  margin-bottom: 4px;
}

.bonus-value {
  color: #ffd900;
}

.deposit-submit {
  margin-left: 25px;
  margin-right: 10px;
  padding: 10px 22px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: var(--main-color);
  font-size: 17px;
  font-weight: 700;
}

.deposit-submit:hover{
    box-shadow: 2px -2px 5px 1px #a70002;
}

.wallet-info span {
    font-size: 20px;
    font-weight: 500;
}

.bank-header {
    background: var(--btn-gradient2);
}

.fortune-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* min-height: 48px; */
  margin-bottom: 18px;
  /* padding: 8px 14px; */
  /* border: 1px solid var(--border-color); */
  /* border-radius: 4px; */
  /* background: linear-gradient(180deg, #6a0008 0%, #3a0004 100%); */
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 35px;
}

.fortune-heading img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.fortune-heading span {
  line-height: 1;
  white-space: nowrap;
}

.fortune-page {
  position: relative;
  /* min-height: 620px; */
  overflow: visible;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: url("../assets/images/wheel/fw-bg.webp") center / cover no-repeat;
  /* margin-top: 80px; */
}

.fortune-top-title {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  width: min(700px, 72%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fortune-top-title img {
  display: block;
  width: 100%;
  height: auto;
}

.fortune-content {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 5px;
}

.fortune-wheel-area {
  position: relative;
  z-index: 2;
  width: min(570px, 70%);
  margin: 0 auto;
  padding: 70px 0 15px;
  text-align: center;
}

.fortune-wheel {
  max-width: 570px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.fortune-girl {
  position: absolute;
  left: 57%;
  bottom: -2%;
  z-index: 1;
  width: min(600px, 62%);
  transform: translateX(6%);
  pointer-events: none;
}

.fortune-girl img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
}

.fortune-spin-btn {
  /* width: 210px; */
  position: relative;
  margin-top: -5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.fortune-spin-btn img {
  width: 100%;
  display: block;
}

.fortune-spin-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-color);
  font-size: 30px;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.fortune-bottom-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.fortune-token,
.fortune-more-btn {
  min-height: 34px;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  background: linear-gradient(180deg, #8f0000a3, #190000);
}

.fortune-token {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
}

.fortune-token img {
  width: 20px;
  margin-right: 6px;
}

.fortune-token strong {
  margin-left: 5px;
  color: #ffd900;
}

.fortune-more-btn {
    padding: 10px 20px;
    border-radius: 5px;
}

.vip_modal .modal-content {
    background-color: var(--bg-color);
    backdrop-filter: blur(5px);
    color: #ffffff;
    box-shadow: 0px 0px 10px var(--border-color);
    }

ul.vip-tnc {
    padding-left: 20px;
}

ul.vip-tnc li {
    list-style: circle;
    font-size: 14px;
    margin-bottom: 10px;
}

.vip_modal .modal-dialog, #downloadModal .modal-dialog {
    max-width: 700px;
}

.vip_modal .close {
    color: #fff;
    font-size: 34px;
    opacity: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}

.vip_modal h4 {
    border-bottom: 1px solid var(--border-color);
    display: inline-flex;
    padding-bottom: 5px;
    margin-bottom: 20px;
    color: #fff;
}
/* =========================
   MISSION BONUS
========================= */

.mission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 0 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  min-height: 0;
}

.mission-heading-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mission-heading-icon {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 0;
}

.mission-heading-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.mission-tnc-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid #ff4d4d;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(180deg, #6a0008, #2a0003);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}

.mission-tnc-btn:hover {
  color: #ffd74d;
  text-decoration: none;
}

.mission-page {
  position: relative;
  padding: 30px 10px 22px;
  overflow: hidden;
}

.mission-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1607 / 479;
  margin: 0 auto 18px;
  overflow: visible;
}

.mission-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.mission-hero-inner {
  position: absolute;
  left: 14%;
  right: 7%;
  top: 58%;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  padding: 0;
  transform: translateY(-46%);
}

.mission-hero-copy {
  /* flex: 1 1 auto; */
  /* min-width: 0; */
  padding-left: 4%;
  /* text-align: left; */
}

.mission-hero-title {
  display: block;
  margin-bottom: 4px;
}

.mission-hero-subtitle {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  /* text-align: center; */
}

.mission-reward-panel {
  flex: 0 0 auto;
  width: min(400px, 46%);
}

.mission-reward-label {
  margin-bottom: 6px;
  text-align: left;
  color: #ffd74d;
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(180deg, #fafab7, #e2b744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.mission-reward-row {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.mission-reward-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 15px 10px;
  border: 1px solid #ff3b3b;
  border-radius: 6px;
  background: var(--btn-gradient2);
  box-shadow: 0 0 8px rgba(255, 40, 40, 0.28);
  min-width: 230px;
}

.mission-reward-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.mission-reward-item img.mission-reward-target {
  width: 50px;
  height: 50px;
  object-fit: cover;
  object-position: right center;
  border-radius: 50%;
  border: 1px solid #ffd74d;
}

.mission-reward-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mission-reward-text span {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
}

.mission-reward-text strong {
  color: #ffd74d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reward-card {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(143, 0, 0, .55), rgba(25, 0, 0, .65)) padding-box;
}

.reward-card-top {
  display: flex;
  align-items: self-start;
  min-height: 135px;
}

.reward-icon {
  max-width: 140px;
  max-height: 140px;
  margin-right: 10px;
  object-fit: contain;
}

.reward-info {
  color: var(--text-color);
  line-height: 2.5;
}

.reward-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 0px 20px;
  border-radius: 15px;
  background: var(--bg-color3);
  font-size: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 1px 1px 8px 1px #ff7272;
}

.reward-info h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.reward-amount {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #fafab7, #e2b744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-top: 10px;
}

.reward-btn {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.reward-btn img {
  width: 100%;
  display: block;
}

.reward-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-color);
  font-size: 23px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.mission_modal .modal-content {
    background-color: var(--bg-color);
    box-shadow: 0px 0px 10px var(--bg-color3);
}

.mission_modal .modal-dialog {
    max-width: 800px;
}

.mission_modal .close {
    position: absolute;
    right: 0px;
    color: #fff;
}

.mission_modal ul, .mission_modal ol {
    padding-left: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #787878;
    font-size: 12px;
}

.mission_modal ul li {
    list-style: circle;
    margin-bottom: 15px;
}

.mission_modal ol li {
    list-style: auto;
    margin-bottom: 10px;
}

.mission_modal .modal-body {
    padding: 20px 30px;
}

.mission_modal h4 {
    border-bottom: 1px solid var(--border-color);
    display: inline-flex;
    padding-bottom: 5px;
    margin-bottom: 20px;
    color: #fff;
}

.mission_modal table tr td, .mission_modal table tr th {
    padding: 10px;
    text-align: center;
    font-size: 12px;
}

.mission_modal .close {
    color: #fff;
    font-size: 34px;
    opacity: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}

.clm-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.clm-btn button {
    background: var(--btn-gradient);
    color: var(--text-color);
    border-radius: 10px;
    font-size: 12px;
    padding: 10px 14px;
    font-weight: 600;
    border: none;
    margin: 0 5px;
    box-shadow: 0 0 2px 2px inset var(--bg-color3);
}

.reptnc_modal .modal-content {
    background: none;
    padding: 0px;
}

.reptnc_modal .modal_body_view {
    background: var(--bg-color);
    box-shadow: 0px 0px 19px 4px var(--bg-color3);
}

.reptnc_modal .tnc-content ul, .reptnc_modal .tnc-content ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.reptnc_modal .tnc-content ul li {
    list-style: circle;
}
.reptnc_modal .tnc-content ol li {
    list-style: auto;
}
.reptnc_modal .close {
    position: absolute;
    right: 30px;
    top: 18px;
    color: #fff;
    opacity: 1;
    font-size: 47px;
}

.reptnc_modal .modal_body_view h5 {
    color: #fff;
}

.tnc-content {
    padding-top: 13px;
    margin: 15px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: #ffffff;
    padding-bottom: 5px;
}

.modal_body_view h5 {
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin: 0px;
    padding-top: 10px;
}

.redemption-banner {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.redemption-banner img {
  width: 100%;
  display: block;
}

.redemption-balance {
  display: flex;
  justify-content: center;
  margin-top: -30px;
  position: relative;
  z-index: 2;
  gap: 15px;
}

.redemption-balance-item {
  min-width: 290px;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  background: var(--btn-gradient);
  color: var(--text-color);
}

.redemption-balance-item:first-child {
  border-radius: 10px;
}

.redemption-balance-item:last-child {
  border-radius: 10px;
}

.redemption-balance-item img {
  max-width: 35px;
  margin-right: 8px;
}

.redemption-balance-item span {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
}

.redemption-balance-item strong {
  color: #ffd900;
  font-size: 25px;
}

.redemption-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  row-gap: 36px;
  margin-top: 35px;
  margin-bottom: 20px;
}

.redemption-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 18px 10px 36px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--box-gradient);
  text-align: center;
}

.redemption-card-icon {
  max-width: 25px;
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.redemption-card h3 {
  margin: 10px 0 10px;
  font-size: 35px;
  background: linear-gradient(180deg, #fafab7, #e2b744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
}

.redemption-card p {
  margin: 0;
  color: var(--text-color);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 10px;
}

.redemption-claim {
  width: 80%;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, 50%);
  z-index: 2;
}

.redemption-claim img {
  /* width: 100%; */
  display: block;
}

.redemption-claim span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.daily-reward {
  width: 100%;
}

.daily-banner {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.daily-banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.daily-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.daily-title {
  width: 600px;
  max-width: calc(100% - 40px);
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 1;
  text-align: center;
  transform: translate(-50%, -50%);
}

.daily-title > img {
  width: 100%;
  max-width: 565px;
  display: block;
  margin: 0 auto;
}

.daily-title p {
  margin: 10px 0 12px;
  color: var(--text-color);
  font-size: 16px;
}

.daily-claim-btn {
  width: 320px;
  max-width: 100%;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.daily-claim-btn img {
  width: 100%;
  display: block;
}

.daily-claim-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-color);
  font-size: 25px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.daily-status {
  width: 28%;
  position: absolute;
  top: 50%;
  right: 2%;
  z-index: 1;
  transform: translateY(-50%);
}

.daily-status h3 {
  margin: 0 0 17px;
  font-size: 25px;
  text-align: center;
  background: linear-gradient(180deg, #fafab7, #e2b744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}

.daily-status-item {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
  padding: 10px 30px 10px 12px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient2);
  border: 1px solid var(--border-color);
}

.daily-status-item img {
  width: 35px;
  margin-right: 10px;
}

.daily-status-item span {
  flex: 1;
  font-weight: 600;
}

.daily-status-item strong {
  font-size: 18px;
}

.daily-status-item b {
  color: #ffd900;
  font-size: 24px;
}

.daily-days {
  margin-top: 20px;
}

.daily-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  margin-bottom: 8px;
}

.progress-line {
  height: 1px;
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  background: var(--border-color);
}

.progress-icon {
  position: relative;
  z-index: 2;
  text-align: center;
}

.progress-icon img {
  max-width: 25px;
}

.daily-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.day-card {
  position: relative;
  text-align: center;
}

.day-card-bg {
  width: 100%;
  display: block;
}

.day-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 8px 18%;
}

.day-card h4 {
  margin: 0 0 6px;
  color: var(--text-color);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.day-card.locked h4, .day-card.locked strong{
    color: var(--text-color3);
}

.day-card.current h4,
.day-card.current strong {
  color: #ffd900;
}

.day-card.locked {
  opacity: .65;
}

.day-reward-img {
  object-fit: contain;
  max-width: 80%;
  margin: 0 auto 6px;
  flex-shrink: 0;
}

.day-card strong {
  display: block;
  margin: 4px 0 8px;
  color: var(--text-color);
  font-size: 18px;
  flex-shrink: 0;
}

.day-status {
  width: 78%;
  position: absolute;
  left: 50%;
  bottom: 7.5%;
  margin: 0;
  padding: 8px;
  border-radius: 20px;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-color);
  transform: translateX(-50%);
}

.claimed-status {
  background: var(--btn-gradient);
}

.locked-status {
  background: #555;
  color: #999;
  border: none;
}

.day-claim-btn {
  width: 78%;
  height: 14%;
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.day-claim-btn img {
  width: 100%;
  display: block;
}

.day-claim-btn span {
  color: var(--text-color);
  font-size: clamp(11px, 1.15vw, 22px);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.modal-congrat h5 {
    color: #fff;
    font-size: 38px;
    font-weight: bold;
    text-align: center;
}

.congrat-text {
    text-align: center;
    font-size: 20px;
}

.image-wrap img {
    display: block;
    margin: 0px auto;
    position: relative;
}

.color-text1 {
    color: var(--main-color);
    font-weight: bold;
}

.color-text2 {
    color: #edb543;
    font-weight: bold;
}

.img-wrap-top {
    position: absolute !important;
    bottom: -27px;
    left: 0;
    right: 0;
    margin: 0px auto;
}

img.img-wrap {
    height: 80%;
    margin-top: 20px;
}

.tokenredeem {
    display: block;
    margin: 0px auto;
    margin-top: 35px;
    background: #ed1d49;
    border: none;
    z-index: 10;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 18px;
}

.token-pt {
    z-index: 10;
}

.image-wrap {
    height: 250px;
    position: relative;
}

.daily-wrap-in {
    background: var(--bg-color);
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px var(--main-color);
}

.daily_modal .close {
    position: absolute;
    right: 30px;
    top: 35px;
    color: #fff;
    opacity: 1;
    font-size: 47px;
    z-index: 2;
}

.daily_modal .modal-body {
    background: none;
}

.daily_modal .modal-content {
    background: none;
    border: none;
}

.p2e-page {
  position: relative;
  overflow: visible;
  padding: 10px 15px 0px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--box-gradient);
}

.p2e-fire {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.p2e-title {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.p2e-title img {
  display: block;
  height: auto;
}

.p2e-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  padding-top: 90px;
}

.p2e-banner img {
  display: block;
  border-radius: 5px;
}

.p2e-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.p2e-info-item {
  display: flex;
  align-items: center;
  padding: 10px;
  color: var(--text-color);
  position: relative;
}

.p2e-info-item:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 60%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    var(--border-color),
    transparent
  );
}

.p2e-info-item img {
  margin-right: 10px;
}

.p2e-info-item span,
.p2e-info-item strong {
  display: block;
}

.p2e-info-item strong {
  color: var(--text-color3);
}

.p2e-progress-wrap {
  display: flex;
  align-items: center;
  margin: 8px 0 15px;
}

.p2e-progress {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 20px;
  background: #3b0000;
}

.p2e-progress span {
  height: 100%;
  display: block;
  border-radius: 20px;
  background: var(--main-color);
}

.p2e-progress-wrap small {
  margin-left: 5px;
  color: var(--text-color3);
  font-size: 12px;
}

.p2e-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.p2e-action {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  background: var(--bg-color2);
  font-weight: 600;
}

.p2e-action.active {
  background: var(--btn-gradient2);
}

.p2e-summary h3 {
  margin: 0 0 8px;
  text-align: center;
  background: linear-gradient(180deg, #fafab7, #e2b744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}

.p2e-total,
.p2e-summary-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--text-color);
  background: var(--btn-gradient2);
}

.p2e-total {
  margin-bottom: 6px;
}

.p2e-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.p2e-summary-item {
  font-size: 13px;
  background: var(--bg-color2);
}

.p2e-summary-icon {
  width: 32px;
  margin-right: 7px;
  color: #ffd000;
  font-size: 18px;
  text-align: center;
}

.p2e-total span,
.p2e-total strong,
.p2e-summary-item span,
.p2e-summary-item strong {
  display: block;
  font-weight: 600;
}

.p2e-total strong,
.p2e-summary-item strong {
  color: #ffd000;
}

.p2e-play-btn {
  width: 100%;
  position: relative;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.p2e-play-btn img {
  width: 100%;
  display: block;
}

.p2e-play-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text-color);
  font-size: 35px;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.p2e-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.p2e-game-card {
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(143,0,0,.45), rgba(25,0,0,.65));
}

.p2e-game-banner img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.p2e-game-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.p2e-game-info::after {
  content: "";
  width: 78%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-color),
    transparent
  );
}

.p2e-game-item {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 8px;
  color: var(--text-color);
}

.p2e-game-item:nth-child(even)::before {
  content: "";
  width: 1px;
  height: 65%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, var(--border-color), transparent);
}

.p2e-game-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  border: 1px solid #ffd000;
  border-radius: 50%;
  color: #ffd000;
  background: var(--main-color);
}

.p2e-game-item span,
.p2e-game-item strong {
  display: block;
}

.p2e-game-item strong {
  color: var(--text-color3);
}

.p2e-card-progress {
  display: flex;
  align-items: center;
  margin: 5px 0 15px;
}

.p2e-card-progress .p2e-progress {
  flex: 1;
}

.p2e-card-progress small {
  margin-left: 5px;
  color: var(--text-color3);
}

.p2e-card-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  background: var(--bg-color2);
}

.p2e-card-btn.primary {
  background: var(--btn-gradient2);
}

.p2e-btn-group {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.p2e-btn-group a {
    background: var(--btn-gradient);
    color: #ffffff !important;
    padding: 5px 10px;
    display: block;
    text-align: center;
    width: 40%;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
}

.btn-p2e {
    color: #cbc1ff;
    font-weight: bold;
}

.dataTables_wrapper {
    color: #fff;
}

table.dataTable.compact thead th,
table.dataTable.compact thead td {
    background: var(--bg-color3);
    color: #fff;
    padding: 6px;
    text-align: center;
    font-size: 12px;
}

.dataTables_length label {
    display: flex;
    grid-gap: 10px;
    align-items: center;
    max-width: 30%;
    color: #fff;
}

.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td {
    border: 1px solid var(--border-color);
    text-align: center;
    color: #ffffff;
}

.dataTables_paginate {
    display: flex;
    gap: 10px;
}

.p2e .a.paginate_button {
    color: #000;
    display: block;
}

.p2e a.paginate_button.current {
    color: #fff;
}

.p2e .btn-apply {
    background: linear-gradient(to bottom, rgba(84, 63, 22, 1) 0%, rgba(173, 132, 57, 1) 99%);
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px 20px;
}

.dataTables_length label select {
    background: #fff;
    border: none;
    padding: 8px;
    border-radius: 5px;
    width: 100px;
    color: #000;
}

.dataTables_scroll {
    margin-top: 25px;
}

.p2e-table {
    max-width: 1000px !important;
}

.promo-list {
  display: grid;
  gap: 10px;
}

.promo-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--box-gradient);
  gap: 10px;
}

.promo-image img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

.promo-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-left: 10px;
  color: var(--text-color);
}

.promo-content h3 {
  margin: 0;
  color: var(--main-color);
  font-size: 20px;
  font-weight: bold;
}

.promo-content > span {
  font-size: 13px;
}

.promo-content p {
  margin: 12px 0;
  font-size: 15px;
}

.promo-action {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.promo-btn {
  padding: 7px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  text-align: center;
  text-decoration: none;
  background: var(--bg-color2);
}

.promo-btn.claim {
  background: var(--btn-gradient4);
}

.promo-btn:hover {
  color: var(--text-color);
  text-decoration: none;
}

.blc-amt {
    display: flex;
    gap: 20px;
}

.blc-inout {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-out {
    border: none;
    border-radius: 5px;
    background: #48dd30;
    color: #fff;
    min-width: 45px;
}

.btn-out:hover {
    background: #40c62b;
}

.btn-in {

    background: #ed1d49;
    border: none;
    border-radius: 5px;
    color: #fff;
    min-width: 45px;
    padding: 5px;
}

.balance-modal .modal-body {
    padding: 0px;
}

.btn-bln-all {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 10px 15px;
    background: var(--btn-gradient);
    border-radius: 10px 10px 0px 0px;
}

.btn-amt {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: bold;
}

button.btnall {
    padding: 5px 20px;
    border-radius: 10px;
    background: #ed1d49;
    color: #fff;
    border: none;
}

button.btnall:hover {
    background: #b20e30;
}

.bln-all ul {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 466px;
}

.bln-in {
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bln-all ul li {
    margin: 3px 0px;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
    list-style: none;
    background: var(--bg-color2);
    border: 1px solid #007bff00;
}

.bln-all {
    padding: 10px;
}

.bln-all ul li:hover {
    border: 1px solid var(--border-color);
    background: var(--bg-color3);
}

.balance-modal .modal-content {
    background: var(--bg-color);
    border-radius: 10px 10px 0px 0px;
    border: 1px solid var(--border-color);
}

.balance-modal .close {
    float: right;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #007bff;
    opacity: 1;
    top: -33px;
    position: absolute;
    right: 5px;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.left_menu_container::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.table_vip_responsive::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--main-color);
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.bank-account-section {
  padding: 25px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-color2);
}

.bank-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.add-bank-btn {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-weight: 700;
}

.add-bank-btn i {
  margin-right: 7px;
}

.bank-account-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.bank-account-card {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--box-gradient);
}

.bank-account-card.active {
  border-color: var(--text-color4);
}

.bank-card-top,
.bank-card-bottom,
.bank-name {
  display: flex;
  align-items: center;
}

.bank-card-top,
.bank-card-bottom {
  justify-content: space-between;
}

.bank-logo {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border-radius: 50%;
  color: var(--text-color);
  background: var(--main-color);
  font-weight: 700;
}

.bank-name strong {
  color: var(--text-color);
  font-size: 18px;
}

.default-badge {
  padding: 4px 9px;
  border: 1px solid var(--text-color4);
  border-radius: 20px;
  color: var(--text-color4);
  font-size: 11px;
}

.bank-detail {
  margin-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.bank-detail span,
.bank-detail strong {
  display: block;
}

.bank-detail span {
  margin-bottom: 5px;
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
}

.bank-detail strong {
  color: var(--text-color);
  font-size: 17px;
}

.bank-card-bottom {
  margin-top: 18px;
}

.set-default,
.delete-bank {
  border: 0;
  color: #aaa;
  background: transparent;
}

.set-default.active {
  color: var(--text-color4);
}

.set-default i {
  margin-right: 5px;
}

.delete-bank {
  width: 40px;
  height: 40px;
  border: 1px solid #6d1b26;
  border-radius: 8px;
}

.delete-bank:hover {
  color: var(--text-color);
  background: var(--main-color);
}

.add-bank-modal-dialog {
  max-width: 600px;
}

.add-bank-modal {
  padding: 28px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(80,0,10,.95), rgba(20,0,0,.98)) padding-box,
    linear-gradient(90deg, #ffb300, #ff0024, #ffb300) border-box;
}

.add-bank-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.add-bank-modal-header h2 {
  margin: 0;
  color: var(--text-color);
  font-size: 28px;
}

.add-bank-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-color);
  background: var(--bg-color2);
  font-size: 20px;
}

.add-bank-group {
  margin-bottom: 20px;
}

.add-bank-group label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.add-bank-control {
  width: 100%;
  min-height: 55px;
  padding: 0 16px;
  border: 1px solid #6d1b26;
  border-radius: 10px;
  outline: 0;
  color: var(--text-color);
  background: var(--bg-color2);
}

.add-bank-control:focus {
  border-color: var(--border-color);
}

.add-bank-control::placeholder {
  color: #8f7f85;
}

.add-bank-submit {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-size: 17px;
  font-weight: 700;
}

.transaction-history {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--box-gradient);
}

.transaction-title h2 {
  margin: 0;
  color: var(--text-color);
  font-size: 25px;
}

.transaction-title p {
  margin: 5px 0 25px;
  color: #aaa;
}

.transaction-filter {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 15px;
  align-items: end;
}

.filter-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 700;
}

.filter-group select,
.filter-group input {
  width: 100%;
  height: 55px;
  padding: 0 15px;
  border: 1px solid #7d1a24;
  border-radius: 8px;
  outline: 0;
  color: var(--text-color);
  background: var(--bg-color2);
}

.filter-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.filter-group input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  filter: none;
}

.transaction-submit {
  height: 55px;
  padding: 0 25px;
  border: 0;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--bg-color3);
  font-weight: 700;
}

.transaction-submit i {
  margin-right: 6px;
}

.transaction-info {
  display: flex;
  justify-content: space-between;
  margin: 25px 0;
  color: #aaa;
}

.transaction-reset {
  border: 0;
  color: var(--text-color3);
  background: transparent;
}

.transaction-table-wrap {
  overflow-x: auto;
  border: 1px solid #7d1a24;
  border-radius: 8px;
}

.transaction-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  color: var(--text-color);
}

.transaction-table th {
  padding: 16px 20px;
  background: var(--main-color);
  text-align: left;
  font-size: 12px;
}

.transaction-table td {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}

.transaction-table tbody tr:last-child td {
  border-bottom: 0;
}

.transaction-type {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.transaction-type.deposit i {
  color: #00e586;
}

.transaction-type.bet i {
  color: #a27cff;
}

.transaction-type.reward i {
  color: #ffd000;
}

.transaction-type.withdrawal i {
  color: var(--main-color);
}

.transaction-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.transaction-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.transaction-status.completed {
  border: 1px solid #00a866;
  color: #00e586;
  background: rgba(0,168,102,.08);
}

.transaction-status.completed i {
  background: #00e586;
}

.transaction-status.pending {
  border: 1px solid #ff8a00;
  color: #ff9b24;
  background: rgba(255,138,0,.08);
}

.transaction-status.pending i {
  background: #ff9b24;
}

.transaction-load {
  margin-top: 25px;
  text-align: center;
}

.transaction-load button {
  min-width: 250px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: transparent;
}

.page-title h2 {
  margin: 0;
  color: var(--text-color);
  font-size: 28px;
}

.page-title p {
  margin: 3px 0 25px;
  color: #aaa;
}

.transfer-wallet,
.transfer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.transfer-group label,
.transfer-label label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
}

.transfer-group select {
  width: 100%;
  padding: 12px;
  padding-right: 40px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: 0;
  color: var(--text-color);
  background: var(--bg-color2);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.transfer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
}

.transfer-label span,
.transfer-label strong {
  color: var(--text-color3);
}

.transfer-label small {
  color: #aaa;
}

.transfer-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0, 0, 0, .4);
}

.transfer-value {
  display: flex;
  align-items: center;
}

.transfer-value span {
  margin-right: 20px;
  color: var(--main-color);
  font-size: 32px;
  font-weight: 700;
}

.transfer-value input {
  width: 180px;
  border: 0;
  outline: 0;
  color: var(--text-color);
  background: transparent;
  font-size: 32px;
  font-weight: 700;
}

.transfer-amount-action {
  display: flex;
  gap: 8px;
}

.transfer-amount-action button,
.transfer-submit {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--bg-color3);
  font-weight: 700;
}

.transfer-quick {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 12px 0 25px;
}

.transfer-quick button {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: rgba(0, 0, 0, .35);
  font-weight: 600;
}

.transfer-quick button.active {
  background: var(--btn-gradient);
}

.transfer-bottom {
  align-items: end;
}

.transfer-submit {
  width: 100%;
}

.transfer-submit i {
  margin-left: 10px;
}

.box {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--box-gradient);
}

.withdraw-group label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
}

.withdraw-group label span {
  color: var(--text-color3);
}

.withdraw-bank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 25px;
}

.withdraw-bank {
  min-height: 85px;
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
}

.withdraw-bank img {
  max-width: 110px;
  max-height: 55px;
}

.withdraw-bank.active {
  border-color: #ffb300;
  box-shadow: 0 0 10px rgba(255,0,36,.35);
}

.withdraw-bank.active::after {
  content: "✓";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-color);
  background: var(--main-color);
  font-weight: 700;
}

.withdraw-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 25px;
}

.withdraw-bank-detail,
.withdraw-amount-box {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
}

.withdraw-bank-detail {
  padding: 20px;
}

.withdraw-bank-name {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.withdraw-bank-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  gap: 12px;
}

.withdraw-bank-logo {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 7px;
  color: var(--text-color2);
  background: #ffd000;
  font-weight: 700;
}

.withdraw-detail-item {
  margin-top: 15px;
}

.withdraw-detail-item span,
.withdraw-detail-item strong {
  display: block;
}

.withdraw-detail-item span {
  margin-bottom: 5px;
  color: #aaa;
  font-size: 11px;
}

.withdraw-detail-item strong {
  color: var(--text-color);
}

.withdraw-account-number {
  color: var(--main-color) !important;
}

.withdraw-detail-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 15px;
}

.withdraw-add-bank {
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: transparent;
}

.withdraw-add-bank i {
  margin-right: 7px;
}

.withdraw-total-title {
  display: flex;
  justify-content: space-between;
}

.withdraw-total-title small {
  color: #aaa;
}

.withdraw-total-title strong {
  color: var(--text-color3);
}

.withdraw-amount-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.withdraw-value {
  display: flex;
  align-items: center;
}

.withdraw-value span {
  margin-right: 20px;
  color: var(--main-color);
  font-size: 32px;
  font-weight: 700;
}

.withdraw-value input {
  width: 180px;
  border: 0;
  outline: 0;
  color: var(--text-color);
  background: transparent;
  font-size: 32px;
  font-weight: 700;
}

.withdraw-all,
.withdraw-submit {
  border: 0;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--bg-color3);
  font-weight: 700;
}

.withdraw-all {
  padding: 10px 18px;
}

.withdraw-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.withdraw-quick button {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: rgba(0,0,0,.35);
  font-weight: 600;
}

.withdraw-quick button.active {
  background: var(--btn-gradient);
}

.withdraw-limit {
  margin: 20px 0;
}

.withdraw-limit div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #aaa;
}

.withdraw-limit strong {
  color: var(--main-color);
}

.withdraw-submit {
  width: 100%;
  padding: 15px;
  font-size: 17px;
}

.withdraw-submit i {
  margin-left: 10px;
}

.pending-list {
  display: grid;
  gap: 15px;
}

.pending-item {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--box-gradient);
}

.pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  cursor: pointer;
}

.pending-info p {
  margin: 0 0 8px;
  color: #aaa;
}

.pending-info p:last-child {
  margin-bottom: 0;
}

.pending-info strong {
  color: var(--text-color);
}

.pending-status {
  min-width: 150px;
  padding: 10px 20px;
  border-radius: 25px;
  color: var(--text-color);
  text-align: center;
  font-weight: 700;
}

.pending-status i {
  margin-right: 7px;
}

.pending-status.done {
  background: #00e586;
}

.pending-status.processing {
  background: #ffb235;
}

.pending-status.failed {
  background: #d71920;
}

.pending-detail {
  padding: 0 18px 18px;
}

.pending-detail h3 {
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 6px;
  color: var(--text-color);
  background: var(--bg-color3);
  text-align: center;
  font-size: 16px;
}

.pending-detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 12px 15px;
  border-radius: 6px;
  color: var(--text-color);
  background: var(--bg-color);
}

.pending-note {
  margin: 15px 5px 0;
  color: var(--text-color3);
  font-style: italic;
}

.voucher-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: end;
}

.voucher-group label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
}

.voucher-group input {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: 0;
  color: var(--text-color);
  background: rgba(0, 0, 0, .35);
}

.voucher-group input::placeholder {
  color: #888;
}

.voucher-group input:focus {
  border-color: #ffb300;
}

.voucher-submit {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-weight: 700;
}

.voucher-submit i {
  margin-left: 12px;
}

.profile-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.form-group-custom {
  margin-bottom: 18px;
}

.form-group-custom label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
  font-weight: 700;
}

.form-group-custom input {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: 0;
  color: var(--text-color);
  background: rgba(0, 0, 0, .35);
}

.form-group-custom input::placeholder {
  color: #999;
}

.form-group-custom input:focus {
  border-color: #ffb300;
}

.form-submit-btn {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-size: 16px;
  font-weight: 700;
}

.referral-filter {
  display: grid;
  grid-template-columns: 1.5fr .8fr .8fr 1fr;
  gap: 15px;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--box-gradient);
}

.referral-group label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 11px;
  font-weight: 700;
}

.referral-group > input,
.referral-link {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: rgba(0, 0, 0, .35);
}

.referral-group > input {
  padding: 0 15px;
}

.referral-link {
  display: flex;
  overflow: hidden;
}

.referral-link input {
  min-width: 0;
  flex: 1;
  padding: 0 15px;
  border: 0;
  outline: 0;
  color: var(--text-color);
  background: transparent;
}

.referral-link button {
  padding: 0 15px;
  border: 0;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.qr-view-btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: rgba(0, 0, 0, .35);
  text-align: left;
}

.qr-view-btn > i {
  margin: 0 12px;
  color: var(--main-color);
  font-size: 22px;
}

.qr-view-btn span,
.qr-view-btn strong,
.qr-view-btn small {
  display: block;
}

.qr-view-btn small {
  margin-top: 2px;
  color: #999;
}

.qr-modal-dialog {
  max-width: 450px;
}

.qr-modal {
  padding: 25px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--box-gradient);
}

.qr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qr-modal-header h2 {
  margin: 0;
  color: var(--text-color);
  font-size: 22px;
}

.qr-modal-close {
  border: 0;
  color: #aaa;
  background: transparent;
  font-size: 20px;
}

.qr-modal-body {
  padding-top: 20px;
  text-align: center;
}

.qr-code {
  width: 250px;
  max-width: 100%;
  margin: auto;
  padding: 20px;
  border-radius: 15px;
  background: var(--bg-color1);
}

.qr-code img {
  width: 100%;
  display: block;
}

.qr-modal-body p {
  margin: 20px 0 0;
  color: #aaa;
}

.inbox-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.inbox-tab {
  padding: 12px 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  text-decoration: none;
}

.inbox-tab i {
  margin-right: 8px;
}

.inbox-tab:hover,
.inbox-tab.active {
  color: var(--text-color);
  background: var(--btn-gradient);
  text-decoration: none;
}

.inbox-tabs + .tab-content {
  display: block;
}

.inbox-list {
  display: grid;
  gap: 12px;
}

.inbox-item {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(0,0,0,.3);
}

.inbox-checkbox {
  margin-right: 15px;
}

.inbox-message {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  color: var(--text-color);
  background: transparent;
  text-align: left;
}

.inbox-message strong {
  color: var(--main-color);
  font-size: 18px;
}

.inbox-message p {
  margin: 0px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-item-right {
  min-width: 120px;
  margin-left: 20px;
  color: var(--text-color);
  text-align: right;
}

.inbox-item-right span {
  display: block;
}

.inbox-delete {
  margin-top: 18px;
  border: 0;
  color: var(--text-color);
  background: transparent;
}

.inbox-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.inbox-pagination button {
  min-width: 42px;
  padding: 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: transparent;
}

.inbox-pagination button.active {
  background: var(--btn-gradient);
}

.inbox-empty {
  padding: 30px;
  color: #aaa;
  text-align: center;
}


/* MODAL */

.inbox-modal-dialog {
  max-width: 700px;
}

.inbox-modal {
  padding: 25px 30px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--box-gradient);
}

.inbox-modal-header {
  display: flex;
  justify-content: space-between;
}

.inbox-modal-header h2 {
  margin: 0 0 8px;
  color: var(--text-color);
}

.inbox-modal-header span {
  color: #aaa;
}

.inbox-modal-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-color);
  background: rgba(0,0,0,.4);
}

.inbox-modal-body p {
  margin: 25px 0;
  color: var(--text-color);
}

.inbox-modal-ok {
  min-width: 120px;
  float: right;
  padding: 10px 25px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-weight: 700;
}

.info-title h2 {
  font-style: italic;
  font-weight: 900;
}

.info-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--box-gradient);
}

.info-menu a {
  padding: 12px 20px;
  border-radius: 6px;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.info-menu a:hover,
.info-menu a.active {
  color: var(--text-color);
  background: var(--btn-gradient);
}

.contact-box {
  padding: 30px;
}

.contact-heading {
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.contact-heading-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border-radius: 10px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.contact-heading h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 22px;
}

.contact-desc {
  max-width: 950px;
  margin: 18px 0 25px;
  color: #ccc;
  line-height: 1.7;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-color);
  background: rgba(0,0,0,.35);
  text-decoration: none;
}

.contact-item:hover {
  color: var(--text-color);
  background: rgba(126,0,0,.4);
  text-decoration: none;
}

.contact-icon {
  width: 55px;
  height: 55px;
  flex: 0 0 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  border-radius: 12px;
  color: var(--main-color);
  background: var(--bg-color2);
  font-size: 24px;
}

.contact-info {
  min-width: 0;
  flex: 1;
}

.contact-info strong,
.contact-info span {
  display: block;
}

.contact-info strong {
  color: var(--text-color);
  font-size: 15px;
}

.contact-info span {
  margin-top: 4px;
  color: #aaa;
  font-size: 12px;
}

.contact-status {
  margin-left: 10px;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: #ccc;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.contact-status.online {
  color: #ffd200;
}

.contact-status.fast {
  color: var(--text-color3);
}

.about-box {
  padding: 15px;
}

.about-heading {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.about-heading i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.about-heading h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 18px;
}

.about-section {
  margin-bottom: 25px;
}

.about-section h4 {
  margin-bottom: 10px;
  color: var(--main-color);
  font-size: 16px;
}

.about-section h4 i {
  width: 20px;
  margin-right: 5px;
}

.about-section p {
  margin: 0;
  color: #ccc;
  font-size: 13px;
  line-height: 1.8;
}

.about-commit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.about-commit {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
}

.about-commit strong {
  display: block;
  margin-bottom: 6px;
  color: var(--main-color);
  font-size: 14px;
}

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.about-feature {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--box-gradient);
}

.about-feature i {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--bg-color3);
}

.about-feature strong,
.about-feature span {
  display: block;
}

.about-feature strong {
  color: var(--text-color);
  font-size: 13px;
}

.about-feature span {
  margin-top: 3px;
  color: #aaa;
  font-size: 12px;
}

.info-center {
    padding: 10px;
}

.banking-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.banking-title i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.banking-title h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 20px;
}

.banking-desc {
  margin-bottom: 25px;
  color: #ccc;
}

.banking-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.banking-guide {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
}

.banking-guide h4 {
  margin: 0 0 18px;
  color: var(--main-color);
  font-size: 15px;
}

.banking-guide h4 i {
  margin-right: 10px;
}

.banking-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}

.banking-row span {
  color: #aaa;
}

.banking-row strong {
  color: var(--text-color);
  text-align: right;
}

.banking-subtitle {
  margin: 30px 0 12px;
  color: var(--text-color);
  font-size: 14px;
}

.banking-bank-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.banking-bank {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
}

.banking-bank-logo {
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  border-radius: 8px;
  color: #00529c;
  background: #fff;
  font-weight: 800;
  padding: 10px;
}

.banking-bank-logo.maybank {
  color: var(--text-color2);
  background: #ffd000;
}

.banking-bank-logo.bni {
  background: #fff;
  color: #f37021;
}

.banking-bank strong,
.banking-bank span {
  display: block;
}

.banking-bank strong {
  color: var(--text-color);
}

.banking-bank span {
  margin-top: 3px;
  color: #aaa;
  font-size: 12px;
}

.responsible-gaming {
  padding: 20px;
}

.responsible-heading {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.responsible-heading i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.responsible-heading h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 18px;
}

.responsible-section {
  margin-bottom: 25px;
}

.responsible-section:last-child {
  margin-bottom: 0;
}

.responsible-section h4 {
  margin: 0 0 12px;
  color: var(--main-color);
  font-size: 14px;
}

.responsible-section h4 i {
  width: 20px;
  margin-right: 5px;
}

.responsible-section .warning-title {
  color: var(--text-color4);
}

.responsible-section p,
.responsible-content-box li {
  color: #ccc;
  font-size: 12px;
  line-height: 1.8;
}

.responsible-section p {
  margin: 0 0 5px;
}

.responsible-content-box {
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
}

.responsible-content-box ul {
  margin: 0;
  padding-left: 20px;
}

.responsible-content-box li {
  margin-bottom: 8px;
}

.responsible-content-box li:last-child {
  margin-bottom: 0;
}

.responsible-link {
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}

.responsible-link:hover {
  color: var(--main-color);
  text-decoration: none;
}

.privacy-box {
  padding: 25px;
}

.privacy-heading {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.privacy-heading i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.privacy-heading h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 18px;
}

.privacy-content h4 {
  margin: 0 0 15px;
  color: var(--main-color);
  font-size: 14px;
}

.privacy-content h4 i {
  margin-right: 8px;
}

.privacy-content p {
  margin: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 1.8;
}

.btn-tnc {
    align-items: center;
    background: var(--bg-color2);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px;
    text-align: left;
    width: 100%;
    border: none;
}

.btn-tnc:after {
    border-bottom: 2px solid var(--text-color);
    border-right: 2px solid var(--text-color);
    content: "";
    flex-shrink: 0;
    height: 8px;
    margin-top: -4px;
    transform: rotate(45deg);
    transition: transform .2s ease;
    width: 8px;
}

.btn-tnc[aria-expanded="true"]:after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.info-wrapper {
    width: 100%;
}

.tnc-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tnc-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.tnc-panel[hidden] {
    display: none;
}

.tnc-body {
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.7;
    padding: 16px;
}

.modal-dialog.promo {
    max-width: 800px !important;
    border-radius: 20px;
    margin-top: 100px;
}

.modal-content.promo {
    border: none;
    background: #191b1e;
    border-top-left-radius: 20px;
    box-shadow: 0px 0px 10px var(--border-color);
    border-top-right-radius: 20px;
}

button.close-promo {
    background: none;
    border: none;
    font-size: 33px;
    padding: 11px;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 0;
    color: var(--text-color);
}

.grlist {
    color: var(--text-color);
}

.pm-title-wrapper {
    font-size: 16px;
    font-weight: 700;
    background: var(--main-color);
    padding: 15px 20px;
    color: var(--text-color);
    border-radius: 20px 20px 0px 0px;
}

.pmtable-wrapper {
}

table.promo-table tr th {
    color: #fff;
    background: #d9353d;
    padding: 4px;
    text-align: center;
    border: 1px solid var(--text-color);
}

table.promo-table tr td {
    border: 1px solid var(--text-color);
    padding: 5px;
    color: var(--text-color);
    text-align: center;
}

.gr-title {
    margin-top: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #d9353d;
}

.grlist ul {
    padding-left: 20px;
    margin-top: 5px;
}

.grlist ul li {
    padding-bottom: 8px;
    font-size: 14px;
    list-style: disc;
}

.promo-pop-cont {
    padding: 15px;
    border: 1px solid #d9353d;
    border-radius: 0px 0px 20px 20px;
}

.promo-nav button {
    background: #1e2024;
    padding: 10px 30px;
    color: #fff;
    border-radius: 20px;
}

.promo-modal-tnc {
    font-size: 14px;
    font-family: Calibri;
    color: #ffffff;
    list-style: none!important;
}

.promo-modal-tnc li span {
    color: orangered;
    margin-right: 10px;
}

.promo_table tr th {
    background: #ed1d49;
    padding: 10px;
    border: 1px solid #000;
    text-align: center;
    font-size: 12px;
    color: #fff;
}

.promo_table tr td {
    font-size: 12px;
    color: #000;
    padding: 10px;
    border: 1px solid #000;
    background: #d7d7d7;
    text-align: center;
}

.basic-text {
    font-size: 12px;
    color: #fff;
}

.promo_table {
    width: 100%;
}

.promo-text {
    padding: 20px;
    background-color: #000c07;
    backdrop-filter: blur(5px);
    color: #ffffff;
}

.promo h4 {
    font-size: 16px;
    font-weight: bold;
}

.promo {
    font-size: 12px;
}

.promo h5 {
    font-size: 14px;
    font-weight: bold;
}

.promo ul li, .promo ol li {
    margin-bottom: 10px;
}

.promo ul, .promo ol {
    padding-left: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #727272;
}

.promo ul li {
    list-style: circle;
}

.promo ol li {
    list-style: auto;
}

.promo table tr th, .promo table tr td {
    padding: 10px;
    text-align: center;
}

.event-content {
    background: var(--box-gradient);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 10px;
}

/* vip page */
.vip-container {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.vip-lvl-box {
    flex: 1;
    background: var(--box-gradient);
    border-radius: 10px;
    padding: 15px;
    position: relative;
    border: 1px solid var(--border-color);
}

.vip-deco-starfish {
    position: absolute;
    bottom: -10px;
    left: -10px;
    max-width: 70px;
}

.vip-deco-shell {
    position: absolute;
    bottom: -14px;
    right: -12px;
    max-width: 90px;
}

.vip-lvl-header {
    font-size: 18px;
    font-weight: bold;
    font-family: "apexmk2", sans-serif;
}

.vip-lvl-header span {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 10px;
    color: var(--text-color4);
}

.vip-lvl-header span .lvl-text {
    color: var(--text-color4);
    margin: 0;
    padding: 0;
}

.vip-diamond {
    margin: 20px auto 20px;
    max-width: 130px;
    text-align: center;
}

.vip-lvl-text {
    text-align: center;
}

.vip-lvl-text h2 {
    color: #ff9d81;
    font-size: 32px;
    font-weight: 700;
    margin: 10px 0;
    text-align: center;
    font-family: "apexmk2", sans-serif;
    text-transform: uppercase;
}

.vip-current-lvl {
    display: inline-block;
    background: var(--main-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-family: "apexmk2", sans-serif;
}

.vip-progress-box {
    flex: 2;
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background: var(--box-gradient);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    font-family: "apexmk2", sans-serif;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-number {
    padding: 5px;
    background: var(--text-color1);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 12px;
    font-weight: bold;
    width: 30px;
    height: 30px;
}

.step-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--main-color);
}

.step-divider {
    height: 2px;
    width: 3vw;
    background: var(--main-color);
    margin: 0 10px;
}

.vip-lvl-progress {
    background: var(--box-gradient);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    font-family: "apexmk2", sans-serif;
}

.level-icons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.level-icon {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.level-icon img {
    max-width: 80px;
}

.level-icon span {
    font-size: 14px;
    color: var(--text-color);
    font-weight: bold;
}

.progress-bar.vip-progress {
    height: 8px;
    background: var(--bg-color2);
    border: 1px solid var(--main-color);
    border-radius: 4px;
    margin: 15px 0 25px;
    position: relative;
}

.vip-progress .progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 75%;
    background: var(--main-color);
    border-radius: 4px;
}

.vip-lvl-req {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lvl-req {
    text-align: left;
}

.lvl-req h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--main-color);
    font-weight: bold;
}

.amount {
    color: var(--text-color4);
    font-weight: 700;
}

.terms-btn {
    color: var(--text-color);
    background: var(--main-color);
    font-family: "apexmk2", sans-serif;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.terms-btn:hover {
    filter: brightness(1.2);
}

.vip-table-wrap {
    margin-top: 30px;
}

.vip-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vip-table {
    width: 100%;
    min-width: 900px;
    background: var(--box-gradient);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    border-spacing: 0;
    border-collapse: separate;
    font-family: "apexmk2", sans-serif;
}

.vip-table-header {
    display: flex;
    align-items: flex-end;
    padding-bottom: 30px;
}

.vip-table th.privilege {
    color: var(--main-color);
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    min-width: 200px;
    vertical-align: bottom;
    padding: 5px;
}

.vip-table th.privilege span {
    color: var(--text-color4);
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    font-size: 20px;
}

.vip-table th,
.vip-table td {
    padding: 15px;
    text-align: center;
    color: var(--text-color);
    border: none;
    font-size: 14px;
    font-weight: bold;
}

.vip-table th {
    padding: 10px;
}

.vip-table th:not(:first-child),
.vip-table td:not(:first-child) {
    min-width: 120px;
}

.vip-table th:first-child,
.vip-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    min-width: 180px;
    max-width: 220px;
    background: transparent;
}

.vip-table-container.is-scrolled .vip-table th:first-child,
.vip-table-container.is-scrolled .vip-table td:first-child {
    background-color: #620006;
    /* box-shadow: 6px 0 10px rgba(0, 0, 0, .35); */
}

.vip-table thead th:first-child {
    z-index: 3;
}

.vip-table th img {
    display: block;
    margin: 0 auto 8px;
    max-width: 80px;
    height: auto;
}

.vip-table th span {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.vip-table th:nth-child(2) span,
.level-icon.bronze span {
    color: #ff9d81;
}

.vip-table th:nth-child(3) span,
.level-icon.silver span {
    color: #a4a4a4;
}

.vip-table th:nth-child(4) span,
.level-icon.gold span {
    color: #fbc817;
}

.vip-table th:nth-child(5) span,
.level-icon.platinum span {
    color: #2787d3;
}

.vip-table th:nth-child(6) span,
.level-icon.diamond span {
    color: #1a7ebd;
}

.vip-table th:nth-child(7) span,
.level-icon.elite span {
    color: var(--main-color1);
}

.section-header td {
    padding: 10px 15px;
    font-weight: bold;
    color: var(--main-color);
    text-transform: uppercase;
    text-align: left;
}

.section-header td:not(:first-child) {
    color: transparent;
}

/* end vip page */

.point-wrp {
    display: flex;
    gap: 15px;
}

span.img-point img {
    height: 30px;
}

.point-btm {
    border-top: 1px solid var(--main-color);
    width: 92%;
    padding-bottom: 20px;
}

.ply-point {
    text-align: center;
    padding: 15px;
    color: #fff;
    font-weight: bold;
}

.point-btm ul {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-token {
    background: var(--bg-color);
    min-width: 150px;
    padding: 10px;
    text-align: center;
    display: flex;
    gap: 14px;
    justify-content: center;
    border-radius: 8px;
    align-items: center;
    font-size: 17px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-tk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.btn-tk h5 {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding-bottom: 10px;
    padding: 15px;
    background: var(--btn-gradient);
    border-radius: 10px 10px 0px 0px;
    color: var(--text-color);
}

.wheel-tnc li {
    margin-bottom: 10px;
    list-style: disc;
    padding-left: 10p;
}

.wheel-tnc {
    padding-left: 30px;
}

#vip-modal .modal-dialog{
  max-width: 800px;
}

.register-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.register-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 12px;
}

.register-row label {
  margin: 0;
  color: var(--text-color);
  text-align: right;
}

.register-row label span {
  color: var(--text-color3);
}

.register-row input,
.register-row select {
  width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: 0;
  font-size: 13px;
  color: #000;
}

.phone-input,
.captcha-wrap {
  display: flex;
}

.phone-input > span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-color2);
  background: var(--text-color4);
  border-radius: 5px 0 0 5px;
}

.phone-input input {
  border-radius: 0 5px 5px 0;
}

.bank-title {
  margin-top: 25px;
  padding-bottom: 10px;
}

.bank-title p{
  margin-bottom: 5px;
}

.captcha-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.captcha-top {
  display: flex;
  gap: 8px;
  width: 200px;
}

.captcha-code {
  flex: 1;
  padding: 0px;
}

.captcha-code img {
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.captcha-refresh {
  width: 45px;
  border: 0;
  border-radius: 5px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.captcha-wrap > input {
  width: 100%;
}

.register-check {
  margin-top: 20px;
  color: var(--text-color);
}

.register-check label {
  display: block;
  margin-bottom: 5px;
}

.register-submit {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-weight: 700;
}

.reg-title h2 {
    font-size: 20px;
}

.reg-title p {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.reg-m-title {
    color: var(--text-color4);
    font-weight: 600;
    text-align: center;
}

.download-title {
  max-width: 650px;
  margin: 0 auto 35px;
  text-align: center;
}

.download-title > i {
  margin-bottom: 10px;
  color: var(--main-color);
  font-size: 26px;
}

.download-title h1 {
  margin: 0;
  color: var(--text-color);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: 6px;
}

.download-title h1 span {
  color: var(--main-color);
}

.download-title p {
  margin: 10px 0 0;
  color: #ccc;
  line-height: 1.6;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  padding: 0px 30px;
}

.download-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-color);
  cursor: pointer;
  transition: .2s;
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 15px rgba(255, 0, 36, .4);
}

.download-card img {
  width: 100%;
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}


/* MODAL */
.download-modal .modal-dialog {
  max-width: 700px;
}

.download-modal .modal-content {
  position: relative;
  padding: 25px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: linear-gradient(145deg, #060610, var(--bg-color2));
}

.download-modal-close {
  position: absolute;
  top: 12px;
  right: 15px;
  z-index: 2;
  border: 0;
  color: var(--text-color);
  background: transparent;
  font-size: 18px;
}

.download-modal-title {
  margin-bottom: 20px;
  text-align: center;
}

.download-modal-title h3 {
  margin: 0;
  color: var(--text-color);
  font-size: 22px;
}

.download-modal-title p {
  margin: 5px 0 0;
  color: #aaa;
  font-size: 12px;
}


/* QR */
.download-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px;
  max-width: 590px;
  margin: auto;
}

.download-qr-image {
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-color1);
  max-width: 200px;
}

.download-qr-image img {
  width: 100%;
  display: block;
}

.download-btn {
  display: block;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-color);
  background: rgba(0, 0, 0, .4);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.download-btn i {
  margin-right: 8px;
}

.download-btn:hover {
  color: var(--text-color);
  background: var(--btn-gradient);
  text-decoration: none;
}


/* ACCESS */
.download-access {
  margin: 25px 10px 10px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(0, 0, 0, .35);
}

.download-access-title {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  color: var(--text-color);
}

.download-access-title > i {
  margin-right: 10px;
  color: var(--main-color);
}

.download-access-title span {
  color: #888;
  font-size: 10px;
}

.download-access-content {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 15px;
  margin-top: 15px;
}

.access-group label {
  display: block;
  margin-bottom: 6px;
  color: #ccc;
  font-size: 11px;
  font-weight: 700;
}

.access-value {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--text-color);
  background: rgba(0, 0, 0, .3);
}

.access-value i {
  margin-right: 10px;
  color: var(--main-color);
}

.access-value span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.copy-access-btn {
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--text-color);
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.copy-access-btn i {
  margin-right: 6px;
}

.modal_body_view {
    background: var(--bg-color2);
    padding: 10px 0px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

#viewmore .modal-body, .tnc-challenge .modal-body{
  padding: 0px;
  background: none;
}

#viewmore .modal-content, #tnc-challenge .modal-content{
  padding: 0px;
  background: none;
}

#viewmore .close, #tnc-challenge .close{
  color: var(--text-color);
    opacity: 1;
}

.side-menu-wallet {
    width: 100%;
}

.side-menu-wallet .side-menu-info {
    margin: 0px 0px 20px;
}

.side-menu-dropdown {
    background: var(--bg-color);
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
}

.side-menu-dropdown .dep-grid-item {
    flex-direction: row;
    margin-bottom: 5px;
    padding: 8px 5px;
    border: 1px solid transparent;
}

.side-menu-dropdown .dep-grid-item:hover{
    background: var(--bg-color3);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
}

.side-menu-dropdown  .dep-grid-item img{
    width: 30px;
    height: 30px;
}

.side-menu-dropdown .dep-grid-item span{
    text-align: left;
    font-size: 14px;
    font-weight: normal;
}

.side-menu-arrow{
  font-size: 12px !important;
  transition:.2s;
  flex: 1;
  margin-left:auto;
  text-align: right;
}

.side-menu-info{
  width:100%;
  display:flex;
  align-items:center;
}

.dep-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 8px;
    background:
        linear-gradient(#151a24, #151a24) padding-box,
        radial-gradient(ellipse 90% 130% at 0% 50%, rgba(54, 75, 172, 0.95) 0%, transparent 72%),
        radial-gradient(ellipse 90% 130% at 100% 50%, rgba(4, 104, 104, 0.95) 0%, transparent 72%),
        radial-gradient(ellipse 70% 28% at 50% 0%, rgba(0, 0, 0, 0.95) 0%, transparent 70%),
        radial-gradient(ellipse 70% 28% at 50% 100%, rgba(0, 0, 0, 0.95) 0%, transparent 70%),
        linear-gradient(#243556, #243556) border-box;
    border: 1px solid transparent;
    border-radius: 14px;
}

.dep-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    width: 100%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
}

.dep-grid-item span {
    display: block;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dep-grid-item img {
    display: block;
    width: 42px;
    height: 42px;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.dep-grid-item.active span {
    color: var(--main-color1);
}

.side-menu-info {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 10px;
    margin: 20px 0px 10px;
    background: var(--btn-gradient);
    border: 1px solid var(--text-color4);
    width: 100%;
}

.side-menu-info i {
    font-size: 22px;
    color: var(--text-color);
}

.side-menu-info-text {
    color: var(--text-color);
    font-weight: bold;
    flex:1;
}

.side-menu-info-text p {
    margin-bottom: 0px;
    color: var(--text-color);
}

.side-menu-info-text h2 {
    font-size: 13px;
    margin-bottom: 0px;
    color: var(--text-color);
    font-weight: bold;
}

.side-divider {
    height: 1px;
    border: 1px solid var(--main-color);
    margin: 10px 0px;
}

.side-menu-box {
    display: grid;
    grid-template-columns: 15% 85%;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    margin-bottom: 5px;
}

.side-menu-box span {
    color: var(--text-color);
}

.side-menu-box.active, .side-menu-box:hover {
    background: var(--bg-color1);
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.password-wrap {
  position: relative;
}

.password-wrap .password-input {
  width: 100%;
  padding-right: 65px;
}

.forgot-link {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--main-color);
  font-size: 12px;
  text-decoration: none;
}

.forgot-link:hover {
  color: var(--text-color3);
  text-decoration: none;
}

.forgot-card {
  max-width: 530px;
  margin: 30px auto 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
}

.forgot-card-title {
  padding: 12px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.forgot-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.forgot-row label {
  margin: 0;
  padding: 15px;
  color: var(--text-color);
  font-weight: 600;
  text-align: left;
}

.forgot-row > input,
.forgot-captcha > input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: 0;
}

.forgot-row > input {
  width: calc(100% - 30px);
  margin: 10px 15px;
}

.forgot-captcha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 15px;
}

.forgot-captcha-code {
  flex: 1;
  /* min-width: 140px; */
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  text-align: center;
  background: #000;
}

.forgot-refresh {
  width: 45px;
  border: 0;
  border-radius: 5px;
  color: var(--text-color);
  background: var(--btn-gradient);
}

.forgot-captcha > input {
  flex-basis: 100%;
}

.forgot-note {
  padding: 15px 25px;
  color: #ccc;
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.forgot-submit-wrap {
  padding: 12px;
  text-align: center;
}

.forgot-submit {
  padding: 10px 30px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  background: var(--btn-gradient);
  font-weight: 700;
}