@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root{
--form-base: #000000;  
--form-input-bg: #151515; 
--form-input-bg2: #292929;
--form-input-text: #888888; 
--form-trans-bg: #0000001A;
--form-remark: #ff0000;
--form-success: #06ff00;
--form-pending: #ffd70c;
--form-failed: #ff4c44;
--form-cta-bg: #ff0000;
--form-text: #888888;
--form-text-light: #ffffff;
--form-text-dark: #000000;
--gradient-bg: linear-gradient( 135deg, #7500ff, #cd36fa);

}

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

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

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

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

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

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

.af-form {   }
    .af-form .input-group { padding:4px 12px; border-radius: 8px; background-color: var(--form-input-bg); }
    .af-form .input-group .input-group-text { background-color: transparent; font-size: 14px;  color:var(--form-input-text); border:0; border-radius: 0px; }
    .af-form .input-group .form-control { border:0; font-size: 14px; color: var(--form-text-light); outline: none; background-color: transparent; }
    .af-form .input-group .form-control::placeholder { color:var(--form-input-text); }
    .af-form .input-group .form-control:focus { box-shadow: none }
    .af-form .form-check-input:checked, .af-form .form-check-input {
        background-color: transparent; border-color: var(--form-text);
    }
    .af-form .form-check-label { color: var(--form-text); }
    .af-form .form-check-label b { color: var(--form-remark); }
    .af-form .form-remark { color: var(--form-remark); }
    .af-form .remark-group { display: flex; justify-content: space-between; }

.btnform { font-size: 16px; font-weight: bold; padding: 8px 24px; border-radius: 8px; color: var(--form-text-light); background: var(--form-cta-bg); border: 0; width: 100%; cursor: pointer;}

.social-acc { padding:24px 0px }
    .social-acc .tt { color: var(--form-text); text-align: center; padding-bottom: 12px; }
    .social-acc .mtbox { display: flex; justify-content: space-evenly; align-items: center; }

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

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

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

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

.statistic {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
    .statistic .s-data {
    background: var(--form-trans-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
}
.s-label { font-size: 12px; color: var(--form-text); text-align: left; }
.s-label b { color: var(--form-text-light); }
.s-amount { font-size: 16px; font-weight: bold; color: var(--form-text-light); }

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

.d-amount {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.d-amount a {
    background: var(--form-input-bg);
    padding: 10px;
    border-radius: 8px;
    width: 20%;
    text-align: center;
}
.d-promo .form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.d-promo .form-check-label {
    background: var(--form-input-bg);
    width: 100%;
    border-radius: 8px;
    padding: 10px 10px 10px 20px;
}
.w-type {}
.w-type .input-group {background: var(--form-input-bg2);}

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

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

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

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

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

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

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

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

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

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