@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(themeColor.css);

body {
    font-family: "Nunito Sans", sans-serif;
}

    body.main-bg {
        background-color: var(--main-bg-color);
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
    }

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
    margin: 0;
    letter-spacing: .3px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg-color) inset !important; /* yaha apna bg color */
    box-shadow: 0 0 0 1000px var(--input-bg-color) inset !important;
    -webkit-text-fill-color: #444050 !important; /* text color */
    transition: background-color 5000s ease-in-out 0s;
}

button:focus:not(:focus-visible),
:focus-visible {
    outline: none;
    border-color: #00baf2 !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="time"] {
    position: relative;
    padding-right: 40px;
    background: var(--light-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 12h3.5'/%3E%3Cpath d='M12 7v5'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 18px;
    cursor: pointer;
}

.form-select:focus {
    border-color: #00baf2;
    outline: 0;
    box-shadow: unset;
}
/* hide default icon visually but keep clickable */
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Firefox */
input[type="time"] {
    appearance: none;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

p {
    margin: 0;
}

a, span {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

    a:hover {
        color: var(--primary-theme-color);
    }

.btn-style {
    font-size: 13px;
    line-height: 1;
    padding: 6px 12px 5px;
    border-radius: 5px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    border: none;
    background-color: var(--primary-theme-color);
}

a.btn-style {
    color: var(--secondary-theme-color) !important;
}

.login-btn {
    width: 100%;
    background-color: #00baf2;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    border: 1px solid transparent;
    color: #FFF;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 15px;
}

.btn-style.btn-md {
    padding: 12px 30px 11px;
    font-size: 15px;
}

.btn-style.btn-reject {
    background-color: var(--status-block-color);
}

.btn-style.btn-update {
    background-color: var(--status-unblock-color);
}

.btn-style.btn-cancel {
    border: 1px solid var(--primary-theme-color);
    color: var(--primary-theme-color);
    background-color: transparent;
}

.login-page {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../../assets/images/bg.jpg);
}

.login-box {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 60px 0px rgba(94, 92, 154, 0.12);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    position: relative;
    z-index: 100000;
}

    .login-box h4 {
        color: #0d1961;
        font-size: 26px;
        font-weight: 700;
    }
/* .login-box h4 span{
    color: var(--primary-theme-color);
} */
.login-logo {
    position: absolute;
    top: 73px;
    right: 128px;
    padding: 20px;
    background-color: #fff;
}

.login-box p {
    font-size: 15px;
    font-weight: 500;
    color: #8794a9;
    margin-top: 18px;
    position: relative;
}

    .login-box p:before {
        position: absolute;
        content: "";
        height: 1px;
        width: 50%;
        bottom: -23px;
        background-color: #f0f0f0;
    }

.login-box form {
    margin-top: 70px;
    position: relative;
}

.label-style {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    margin-bottom: 7px;
    /*text-transform: capitalize;*/
    color: var(--label-color);
    line-height: 1;
}

#txnDateParent .date-range-input {
    background-color: var(--input-bg-color);
    height: 45px;
    border: 1px solid var(--input-border-color);
    box-shadow: none;
}

.input-style {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    padding: 8px 13px;
    height: 45px;
    font-size: 15px;
    font-weight: 500;
    color: #444050;
    background-color: var(--input-bg-color);
}

    .input-style:disabled {
        cursor: no-drop;
    }

textarea.input-style {
    height: auto;
}

.input-style::placeholder {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 300;
    /*text-transform: capitalize;*/
    color: #8794a9;
}

.input-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

    .input-icon svg,
    .input-icon .eye-close,
    .input-icon .eye-open {
        color: var(--secondary-theme-color);
    }

.login-box .input-style {
    padding-right: 45px;
}

.main-header {
    border-bottom: 1px solid var(--light-border-color);
}

header {
    padding: 15px 5px;
    border-bottom: 1px solid var(--light-border-color);
    background-color: var(--light-color);
}

.inputGroup .input-style {
    height: 40px;
    padding-right: 35px;
    width: auto;
    border: none;
    font-size: 14px;
    border: 1px solid var(--light-border-color);
    background-color: transparent;
}

.inputGroup {
    position: relative;
}

    .inputGroup svg {
        position: absolute;
        top: 50%;
        opacity: .3;
        right: 11px;
        transform: translateY(-50%);
    }

.profile-container {
    position: relative;
    display: inline-block;
}

.profile-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid var(--primary-theme-color);
    object-fit: cover;
}

.profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-theme-color);
}


.dropdown-menu {
    position: absolute;
    top: 45px;
    left: 50%;
    background: var(--light-color);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) translateX(-50%);
    border: none;
    transition: all 0.3s ease;
    z-index: 1000;
}

    .dropdown-menu a {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        color: var(--secondary-theme-color);
        transition: background 0.2s ease;
    }

        .dropdown-menu a span {
            display: inline-block;
            margin-right: 10px;
        }

        .dropdown-menu a:hover {
            background: var(--grey-02);
        }

        .dropdown-menu a:focus {
            color: var(--primary-theme-color);
            background-color: var(--primary-light-theme-color);
        }

    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) translateX(-60%) !important;
    }

.nav-pills .dropdown-menu {
    min-width: 150px;
    width: auto;
}

    .nav-pills .dropdown-menu.show {
        left: 50% !important;
        transform: translateY(42px) translateX(-50%) !important;
    }

td .dropdown-menu.show {
    transform: translateY(15%) translateX(-30%) !important;
    max-height: 225px;
    overflow: auto;
    padding: 5px;
}

td .dropdown-menu {
    width: auto;
    padding: 0;
}

    td .dropdown-menu li {
        margin: 5px;
    }

        td .dropdown-menu li:first-child {
            margin-top: 0;
        }

        td .dropdown-menu li:last-child {
            margin-bottom: 0;
        }

    td .dropdown-menu a {
        padding: 8px 10px;
        transition: all .3s ease;
        background-color: var(--grey-01);
    }

.dropdown-item.disabled {
    background-color: var(--grey-01);
}

td .dropdown-menu a svg {
    margin-right: 5px;
}

td .dropdown-menu a:hover {
    color: var(--primary-theme-color);
    background-color: var(--primary-light-theme-color);
}

.theme-toggle {
    border-radius: 50px;
    height: 45px;
    width: 45px;
    background: var(--grey-02);
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
}

    .theme-toggle:hover {
        background: var(--light-color);
        box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
    }

#themeIcon {
    font-size: 20px;
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease;
    margin-top: -2px;
}

.fade {
    transition: opacity 0.3s ease;
}

    .fade.hide {
        opacity: 0;
    }

    .fade.show {
        opacity: 1;
    }

.modal.fade.show {
    backdrop-filter: blur(6px);
}

.modal-backdrop.show {
    opacity: .5;
    backdrop-filter: blur(10px);
}

body:has(.offcanvas.show) .modal-backdrop.show {
    z-index: 99 !important;
}

ul, ol {
    margin-bottom: 0 !important;
    line-height: 1;
}

.breadcrumb-item {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-theme-color);
}

    .breadcrumb-item.active {
        color: var(--primary-theme-color);
    }

.subHeader {
    background-color: var(--light-color);
}

    .subHeader ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 0;
        overflow: visible;
    }

.MainAdmin .subHeader ul {
    justify-content: space-between;
}

.subHeader ul li {
    position: relative;
    white-space: nowrap;
}

    .subHeader ul li a {
        line-height: 1;
        display: flex;
        padding: 15px 12px;
        align-items: center;
        border-radius: 5px;
        transition: all .3s ease;
        color: var(--secondary-theme-color);
    }

        .subHeader ul li a .menu-text {
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: .5px;
            margin-top: 2px;
        }

        .subHeader ul li a.active,
        .subHeader ul li a.open-parent,
        .subHeader ul li a:hover {
            background-color: var(--menu-active-bg-color);
        }

        .subHeader ul li a svg rect,
        .subHeader ul li a svg path {
            transition: all .3s ease;
        }

        .subHeader ul li a .menu-text {
            display: inline-block;
            margin-left: 7px;
        }

.subHeader ul.sub-menu-dropdown li > a .menu-text {
    margin-left: 7px;
}

.mobileLogo,
.closeBtn,
.mobileMenu {
    display: none !important;
}

.menu-text + svg {
    transform: rotate(0);
    margin-left: 7px;
    transition: all .3s ease;
}

.sub-menu:has(.sub-menu-dropdown.open) .menu-text + svg {
    transform: rotate(180deg);
}

.nested-menu .menu-text + svg {
    transform: rotate(0) !important;
    margin-left: auto;
    transition: all .3s ease;
}

.nested-menu:has(.sub-menu-dropdown.open) .menu-text + svg,
.nested-menu.nested-open > a .menu-text + svg {
    transform: rotate(180deg) !important;
}

.sub-menu {
    position: relative;
}

    .sub-menu li,
    .subHeader ul.sub-menu-dropdown.nested-menu-dropdown-floating > li {
        width: 100%;
    }

.subHeader ul .sub-menu-dropdown {
    position: absolute;
    flex-direction: column;
    background: var(--light-color);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    min-width: 100%;
    height: auto;
    overflow: hidden;
    opacity: 0;
    z-index: 999;
    visibility: hidden;
    transition: height 0.3s ease, padding 0.1s ease;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
}

/* Nested navigation must open beside its parent item.  Keeping the top-level
   50% centering here places the child panel back inside the Promotion menu. */
@media (min-width: 992px) {
    .subHeader ul .nested-menu > .sub-menu-dropdown {
        top: 0;
        left: calc(100% + 8px);
        transform: none;
        min-width: 220px;
        z-index: 1000;
    }

    .subHeader ul.sub-menu-dropdown.nested-menu-dropdown-floating {
        position: fixed;
        left: auto;
        right: auto;
        transform: none;
        width: 260px;
        min-width: 260px;
        max-width: 260px;
        overflow-y: auto;
        z-index: 1100;
    }
}

.subHeader ul .nested-menu .sub-menu-dropdown {
    top: 0;
}

.subHeader ul .sub-menu-dropdown.open {
    max-height: 430px;
    overflow: auto;
    opacity: 1;
    visibility: visible;
}

.subHeader ul .sub-menu-dropdown li a {
    padding: 15px;
}

.subHeader ul li > a {
    padding: 15px 15px;
}

.main-menu {
    padding: 5px 0;
}

    .main-menu > ul > li {
        margin: 0 3px;
    }

        .main-menu > ul > li > a {
            padding: 10px 12px;
        }

.logo-box {
    position: relative;
}

.logo-dark {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .3s ease;
}

.more-menu .sub-menu .menu-text + svg {
    margin-left: auto;
}

.subHeader ul .more-menu .sub-menu-dropdown {
    left: unset;
    top: 0%;
    transform: unset;
    max-height: 430px;
    overflow: auto;
}

.sub-menu-dropdown {
    transition: left 0.3s ease, opacity 0.3s ease, height 0.3s ease;
    opacity: 1;
}


.main-content {
    padding: 15px;
    height: calc(100% - 165px);
    overflow: auto;
}

.dashboard-section .card-box .card-box,
.card-box {
    background-color: var(--light-color);
    border-radius: 10px;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    position: relative;
}

.card-title {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    padding: 20px;
}

.card-title small {
    color: var(--light-secondary-text-color);
}

.card-title h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

.title-btn {
    line-height: 1;
    display: inline-block;
    color: var(--light-grey-00);
    position: relative;
}

    .title-btn svg {
        position: relative;
        z-index: 99;
    }

    .title-btn:before {
        position: absolute;
        content: "";
        height: 40px;
        width: 40px;
        background-color: var(--grey-01);
        border-radius: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 9;
        opacity: 0;
        transition: all .3s ease;
    }

.dt-input {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

    .dt-input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
        appearance: auto;
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

.dt-input {
    -webkit-appearance: auto;
}

    .dt-input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
        display: none;
    }

.title-btn:focus:before,
.title-btn:hover:before {
    opacity: 1;
}

.table-data .table {
    margin-bottom: 0;
}

    .table-data .table thead {
        background-color: var(--grey-00);
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-color: var(--light-color);
    }

    .table-data .table th {
        font-size: 14px;
        padding: 10px 20px;
        opacity: .6;
        color: var(--dark-color);
        font-weight: 600;
        white-space: nowrap;
    }

    .table-data .table td {
        font-size: 13px;
        padding: 10px 20px;
        color: var(--dark-color);
        opacity: .8;
        border: none;
        text-transform: capitalize;
        font-weight: 600;
        white-space: nowrap;
    }

    .table-data .table tbody tr:nth-of-type(odd) {
        background-color: var(--grey-00);
    }

    .table-data .table tbody tr:hover {
        background-color: var(--grey-02);
    }

    .table-data .table tr th:last-child,
    .table-data .table tr td:last-child {
        text-align: center;
    }

.priority,
.status {
    display: inline-block;
    padding: 3px 6px 2px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
}

.status {
    min-width: 70px;
    text-align: center;
}

    .status.not-added {
        background-color: var(--status-notAdded-bg);
        color: var(--status-notAdded-text);
        border: 1px solid var(--status-notAdded-border);
    }

    .alert-warning,
    .status.pending {
        background-color: var(--status-pending-bg);
        color: var(--status-pending-text);
        border: 1px solid var(--status-pending-border);
    }

    .status.cancelled{
        background-color: var(--status-cancelled-bg);
        color: var(--status-cancelled-text);
        border:1px solid var(--status-cancelled-border);
    }
    .status.changed{
        background-color: var(--status-changed-bg);
        color: var(--status-changed-text);
        border:1px solid var(--status-changed-border);
    }
    .alert-danger,
    .status.rejected{
        background-color: var(--status-rejected-bg);
        color: var(--status-rejected-text);
        border:1px solid var(--status-rejected-border);
    }
    .alert-success,
    .status.completed{
        background-color: var(--status-completed-bg);
        color: var(--status-completed-text);
        border:1px solid var(--status-completed-border);
    }
    .status.canceled{
        background-color: var(--status-canceled-bg);
        color: var(--status-canceled-text);
        border:1px solid var(--status-canceled-border);
    }


.box-data h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-slate-700);
}

.box-data span {
    color: var(--color-slate-700);
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin-top: 12px;
    text-transform: capitalize;
}

.help-ticket-box {
    border: 1px solid var(--light-border-color);
    padding: 15px;
    background-color: var(--grey-00);
    border-radius: 10px;
}

    .help-ticket-box h6 {
        font-size: 15px;
        font-weight: 700;
        color: var(--dark-color);
        text-transform: capitalize;
    }

    .help-ticket-box > div {
        line-height: 1;
    }

    .help-ticket-box span {
        font-size: 12px;
        opacity: .5;
        margin-top: 10px;
        display: inline-block;
        line-height: 1;
        color: var(--dark-color);
    }

    .help-ticket-box h6 span {
        display: inline-block;
        height: 20px;
        width: 25px !important;
        min-width: unset;
        border-radius: 10px;
        text-align: center;
        font-size: 10px;
        opacity: 1;
        margin: 0 5px 0 0px;
        text-transform: uppercase;
        padding: 0;
        line-height: 19px;
        position: relative;
    }

        .help-ticket-box h6 span:last-child {
            margin-right: 10px;
        }

    .help-ticket-box h6.department.support {
        color: var(--primary-theme-color);
    }

    .help-ticket-box span.priority.medium,
    .help-ticket-box span.status.open {
        background-color: var(--status-cancelled-bg);
        color: var(--status-cancelled-text);
        border: 1px solid var(--status-cancelled-text);
    }

    .help-ticket-box span.status.close {
        background-color: var(--status-closed-bg);
        color: var(--status-closed-text);
        border: 1px solid var(--status-closed-text);
    }

    .help-ticket-box span.priority.urgent,
    .help-ticket-box span.priority.high {
        background-color: var(--status-rejected-bg);
        color: var(--status-rejected-text);
        border: 1px solid var(--status-rejected-text);
    }

    .help-ticket-box span.priority.low,
    .help-ticket-box span.priority.normal {
        background-color: var(--status-closed-bg);
        color: var(--status-closed-text);
        border: 1px solid var(--status-closed-text);
    }

    .help-ticket-box button {
        background-color: var(--light-color);
        border: none;
        box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
        padding: 5px 7px;
        border-radius: 50px;
        width: 34px;
    }

.tooltip-inner {
    padding: 3px 5px;
    font-size: 12px;
    color: var(--dark-color);
    word-break: break-word;
    border-radius: 5px;
    background-color: var(--light-color) !important;
    border: 1px solid var(--input-border-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab4a 0px 12px 24px -4px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--light-color);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--light-color);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--light-color);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--light-color);
}

.title-btn + .dropdown-menu {
    top: 34px !important;
    transform: translateY(0) translateX(0%) !important;
}

.support-tracker-data h3 {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-theme-color);
}

.support-tracker-data p {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-theme-color);
    margin-top: 3px;
}

.bg-label-primary {
    background-color: color-mix(in sRGB, #fff 84%, #7367f0) !important;
    color: #7367f0 !important;
}

.bg-label-info {
    background-color: color-mix(in sRGB, #fff 84%, #00bad1) !important;
    color: #00bad1 !important;
}

.bg-label-warning {
    background-color: color-mix(in sRGB, #fff 84%, #ff9f43) !important;
    color: #ff9f43 !important;
}

.text-body-secondary {
    --bs-text-opacity: 1;
    color: #acaab1 !important;
}

small, .small {
    font-size: 0.8125rem;
}

.support-tracker-ticket-data h6 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 3px;
    white-space: nowrap;
}

.support-tracker-data {
    margin-top: 10px;
}

.support-tracker-ticket-data {
    margin-top: 25px;
}

.page-details .main-heading {
    padding: 0 0 15px;
    border-bottom: 1px solid var(--light-border-color-001);
}

    .page-details .main-heading .user-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--secondary-theme-color);
    }

    .page-details .main-heading h4 {
        font-size: 24px;
        font-weight: 700;
        color: var(--secondary-theme-color);
    }

.table-filter {
    padding: 15px 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

    .custom-select-display,
    .table-filter input,
    .table-filter select {
        padding: 7.1px 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        border: 1px solid var(--input-border-color);
        box-shadow: 0 0px 4px #919eab1f;
        color: var(--dark-color);
        background-color: var(--light-color);
        border-radius: .375rem;
        border: 1px solid var(--input-border-color);
    }

.custom-select-display {
    height: 34px;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.TargetSourceFilterWrapper .custom-select-display,
.DesignationFilterWrapper .custom-select-display,
.MonthFilterWrapper .custom-select-display,
.YearFilterWrapper .custom-select-display,
.UserWrapper .custom-select-display,
.MemberCodeFilterWrapper .custom-select-display {
    padding: 9.6px 12px;
}

.table-filter input:focus,
.table-filter select:focus {
    box-shadow: none;
    border-color: var(--input-border-color);
}

.table-filter input:focus-visible,
.table-filter select:focus-visible {
    border-color: var(--input-border-color) !important;
}

.table-filter select#ddlCustomDate,
.table-filter select.presetDropdown {
    width: 150px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.table-filter input#dateRangeAmpDash,
.table-filter input#dateRangeAmpTr,
.table-filter input#dateRangeAmpTxn,
.table-filter input#dateRangeAmpWd,
.table-filter input#dateRangeMgr,
.table-filter input#pnlDateRange,
.table-filter input#dateRangeAudit,
.table-filter input#dateRangeTr,
.card-body input#dateRangeRpt {
    padding-left: 40px;
}

.table-filter input#dateRangeAmpDash,
.table-filter input#dateRangeAmpTxn,
.table-filter input#dateRangeAmpTr,
.table-filter input#dateRangeAmpWd,
.table-filter input#dateRangeAudit,
.table-filter input#dateRangeTr,
.table-filter input#pnlDateRange,
.table-filter input#dateRange,
.table-filter input.dateRange {
    width: 250px;
    padding-left: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.table-filter h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

.date-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    line-height: 1;
    display: inline-block;
}

.time-icon {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 13px;
}

.custom-select-wrapper {
    position: relative;
    min-width: 200px;
    cursor: pointer;
}
    .custom-select-wrapper.open .custom-select-dropdown {
        display: block;
    }
    .custom-select-wrapper.UserWrapper,
    .custom-select-wrapper.RewardTypeFilterWrapper,
    .custom-select-wrapper.TransationFilterWrapper {
        min-width: 300px;
    }

    .custom-select-wrapper.MemberCodeFilterWrapper {
        min-width: 400px;
    }

.select-dropdown-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    right: 11px;
    transition: all 0.3s ease;
}

.download-btn .dt-buttons {
    position: relative;
}

.dt-button-collection {
    top: 120% !important;
    left: 50% !important;
    transform: translateX(-50%);
}

.select-dropdown-arrow.rotate-arrow {
    transform: translateY(-50%) rotate(-180deg);
}
.custom-select-wrapper.open .select-dropdown-arrow {
    transform: translateY(-50%) rotate(-180deg);
}
.search-list li.selected {
    background-color: var(--primary-theme-color);
    color: var(--light-color);
}
.custom-select__list {
    max-height: 220px;
    overflow-y: auto;
}
.custom-select-dropdown {
    position: absolute;
    padding: 5px;
    top: 115%;
    left: 0;
    width: 100%;
    background: var(--light-color);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}
    .custom-select-dropdown.open {
        display: block;
    }

    .custom-select-dropdown input {
        width: 100%;
        border-radius: 5px;
        padding: 7px 8px;
        font-size: 12px;
        font-weight: 600;
        border: none !important;
        background-color: var(--grey-01);
        outline: none;
        position: sticky;
        top: 0;
    }

    .custom-select-dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .custom-select-dropdown ul li {
            padding: 8px 10px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            color: var(--color-slate-700);
            transition: all 0.2s ease;
            border-radius: 5px;
            max-width: 100%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .custom-select-dropdown ul li:hover {
                background: var(--primary-light-theme-color);
                color: var(--primary-theme-color);
            }

.selected-tag {
    display: inline-block;
    background: var(--primary-theme-color);
    color: var(--light-color);
    padding: 7px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 5px;
    font-size: 12px;
    position: relative;
    line-height: 1;
}

    .selected-tag .remove-tag {
        margin-left: 6px;
        cursor: pointer;
        font-weight: bold;
        color: var(--light-color);
    }

div.dt-container.dt-empty-footer tbody > tr:last-child > *,
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
    border: none;
}

table.dataTable > thead > tr > th {
    background-color: var(--table-th-bg);
    padding: 6px 15px;
    white-space: nowrap;
    border-right: 1px solid #ffffff;
}

    table.dataTable > thead > tr > th span {
        font-size: 13px;
        font-weight: 600;
        color: var(--th-text-color);
    }

table.dataTable > tbody > tr > td {
    color: var(--td-text-color);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--light-border-color);
    padding: 8px 15px;
}

    table.dataTable > tbody > tr > td:has(span.status) {
        text-align: center;
    }

table.dataTable > thead > tr > th:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

table.dataTable > thead > tr > th:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 0;
}

.table-box {
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
    background: var(--light-color);
    position: relative;
    max-height: calc(100vh - 225px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    border: 1px solid var(--input-border-color);
}

    .table-box.table-responsive {
        overflow: auto !important;
    }

.time-start .timer-icon svg {
    stroke: #37cd2b;
}

.time-start .info-chip-value {
    color: #34b62b !important;
}

.time-start .timer-icon {
    background: rgb(91 255 80 / 15%) !important;
}

.time-end .timer-icon svg {
    stroke: #ffc92b;
}

.time-end .info-chip-value {
    color: #ffc92b !important;
}

.time-end .timer-icon {
    background: rgb(236 255 80 / 15%) !important;
}

#imgQR img {
    max-width: 100%;
}

.table-box h6 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--secondary-theme-color);
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.2;
    line-height: 7px;
    font-size: 0.6em;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: .7;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date,
th.dt-type-numeric,
td.dt-type-numeric {
    text-align: center !important;
}

    table.dataTable th.dt-type-numeric div.dt-column-header, table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header, table.dataTable th.dt-type-date div.dt-column-footer, table.dataTable td.dt-type-numeric div.dt-column-header, table.dataTable td.dt-type-numeric div.dt-column-footer, table.dataTable td.dt-type-date div.dt-column-header, table.dataTable td.dt-type-date div.dt-column-footer {
        flex-direction: row;
    }

.dt-length label {
    display: none !important;
}

.dt-buttons, .table-top-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dt-length select.dt-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dt-length {
    position: relative;
    display: inline-block;
}

.custom-select__button::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    pointer-events: none;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M6 9l6 6l6 -6"></path> </svg>');
    background-repeat: no-repeat;
    background-size: contain;
    user-select: none;
    transition: all 0.3s ease;
}

.custom-select.open .custom-select__button::after {
    transform: translateY(-50%) rotate(-180deg);
}

.modal-body .custom-select__button::after {
    right: 13px;
}

div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button {
    padding: 7px 10px 7px !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: .375rem;
    line-height: 1.4;
    border: 1px solid var(--input-border-color);
    box-shadow: 0 0px 4px #919eab1f;
    color: var(--dark-color);
    background: transparent;
    margin: 0;
    transition: all .2s ease;
    background-color: var(--light-color);
}

.table-filter select.dt-input {
    border-radius: .375rem;
    line-height: 1.4;
    padding: 7px 25px 7px 10px !important;
}

.table-filter input.dt-input {
    border-radius: .375rem;
}

div.dt-container .dt-search input {
    padding: 7px 10px 7px 8px !important;
}

.dt-button.buttons-collection .dt-button-down-arrow {
    display: none !important;
}

div.dt-buttons > .dt-button:hover:not(.disabled), div.dt-buttons > div.dt-button-split .dt-button:hover:not(.disabled) {
    border: 1px solid var(--input-border-color);
    background-color: var(--light-color);
    background: var(--light-color);
    color: var(--primary-theme-color);
}

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

    .table-bottom-content .dt-info {
        font-size: 14px;
        color: var(--light-text-color) !important;
        font-weight: 600;
    }

div.dt-container .dt-paging .dt-paging-button {
    color: var(--secondary-theme-color) !important;
    font-size: 14px;
    font-weight: 600;
}

div.dt-container .dt-paging .dt-paging-button {
    padding: 3px 10px;
    transition: all 0.3s ease;
}

    div.dt-container .dt-paging .dt-paging-button:hover, div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
        border: 1px solid var(--input-border-color);
        box-shadow: 0 0px 4px #919eab1f;
        color: var(--primary-theme-color) !important;
        background-color: var(--light-color);
        background: var(--light-color);
        border-radius: 3px;
    }

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--table-th-bg);
    border-radius: 10px;
    background-color: var(--grey-02);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: var(--grey-02);
}

div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: 0;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--primary-theme-color);
}

.dt-button-background {
    display: none !important;
}

div.dt-button-collection {
    border: none;
    background: var(--light-color);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin: 0;
    padding: 0;
    width: 100%;
}

    div.dt-button-collection:has(.buttons-columnVisibility), .dt-button-collection:has(.dt-button.buttons-colvisGroup) {
        left: 22% !important;
        width: auto;
        max-height: 288px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    div.dt-button-collection:has(.buttons-columnVisibility) {
        padding: 0 5px;
    }

    div.dt-button-collection .dt-button-active:after {
        display: none;
    }

    div.dt-button-collection .dt-button {
        font-size: 13px;
        color: var(--color-slate-700);
        font-weight: 600;
        padding: 7px 16px;
        text-align: center;
    }

        div.dt-button-collection .dt-button span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        div.dt-button-collection.dtb-b2 .dt-button:hover,
        div.dt-button-collection .dt-button.dt-button-active {
            background: var(--primary-light-theme-color) !important;
            color: var(--primary-theme-color);
        }

.dt-button.buttons-columnVisibility {
    margin: 5px 0 !important;
}

.btn-table {
    background: var(--light-color);
    border-radius: 5px;
    height: 26px;
    width: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: var(--primary-theme-color);
    border: 1px solid var(--light-border-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    margin: 0;
    padding: 0;
}

    .btn-table svg {
        height: 16px;
        width: 16px;
    }

    .btn-table.status-block {
        color: var(--status-block-color);
    }

    .btn-table.status-unblock {
        color: var(--status-unblock-color);
    }

.details .btn-table {
    height: 43px;
    width: 43px;
}

.dt-scroll-body {
    max-height: calc(100vh - 445px) !important;
    min-height: 46vh !important;
    overflow-y: auto !important;
}

    .dt-scroll-body:has(.dt-empty) {
        max-height: 46vh !important;
        min-height: 46vh !important;
    }

.offcanvas.offcanvas-end {
    width: 40%;
}

.offcanvas-backdrop.show {
    opacity: .7 !important;
}

.offcanvas-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

.offcanvasBtn {
    padding: 5px;
    border-radius: 50px;
    border: none;
    background-color: var(--light-color);
    transition: all 0.3s ease;
}

    .offcanvasBtn:hover {
        box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
    }

.offcanvas-header {
    border-bottom: 1px solid var(--light-border-color);
}

.offcanvas-footer {
    padding: 16px;
    border-top: 1px solid var(--light-border-color);
}

.button-group {
    display: flex;
    gap: 10px;
}

    .button-group > * {
        flex: 1;
    }

    .button-group:has(> :nth-child(1):nth-last-child(1)) > * {
        width: 100%;
    }

    .button-group:has(> :nth-child(1):nth-last-child(2)) > * {
        width: 50%;
    }

    .button-group:has(> :nth-child(1):nth-last-child(3)) > * {
        width: 33.33%;
    }

.details-head h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-theme-color);
}

.details {
    padding: 20px;
    border-radius: 5px;
    background-color: var(--grey-00);
    border: 1px solid var(--light-border-color);
}

    .details h5 {
        font-size: 16px;
        font-weight: 700;
        color: var(--secondary-theme-color);
    }

    .details .input-style {
        background-color: var(--light-color);
    }

    .details .sharing-box .custom-select-display, .details .sharing-box .custom-select__button,
    .details .sharing-box .input-style {
        background-color: var(--input-bg-color);
    }

    .details .sharing-box {
        background-color: var(--light-color);
        padding: 20px;
        border-radius: 10px;
    }
.chevron-icon{
    line-height:1;
}
.details .sharing-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    cursor:pointer;
}
        .details .label-style {
            font-weight: 500;
            margin-bottom: 0;
            border-radius: 5px;
        }

.dob-date-picker .date-icon {
    left: unset;
    cursor: pointer;
    right: 13px;
}

.custom-select-display.input-style {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    padding: 8px 13px;
    height: 43px;
    font-size: 15px;
    font-weight: 500;
    color: var(--dark-color);
    background-color: var(--light-color);
    box-shadow: none;
    line-height: 26px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 30px;
}

.multi-select .custom-select-display.input-style {
    padding: 5.5px 13px;
}

.multi-select .selected-tags {
    line-height: 29px;
    max-width: 93%;
    overflow: auto;
}

    .multi-select .selected-tags::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

.custom-select-display.input-style.not-selected {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 300;
    color: var(--light-text-color);
}

.image-upload-wrapper {
    width: 100%;
    position: relative;
    font-family: sans-serif;
}

.upload-box {
    position: relative;
    width: 100%;
    height: 180px;
    border: 2px dashed var(--input-border-color);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--light-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--secondary-theme-color);
    font-size: 14px;
    text-align: center;
    pointer-events: none;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reupload-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--light-color);
    color: var(--secondary-theme-color);
    border: none;
    border-radius: 50px;
    height: 30px;
    width: fit-content;
    padding: 0 10px;
    overflow: hidden;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    font-size: 12px;
}

.tab-bg {
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    background-color: var(--light-color);
    border-radius: 5px;
    margin-top: 15px;
    padding: 5px;
    max-width: 100%;
}

.nav-pills {
    background-color: var(--grey-01);
    border-radius: 5px;
    padding: 5px;
    margin: 0;
    justify-content: space-between;
}

    .nav-pills .nav-link {
        font-size: 14px;
        margin: 0 10px;
        font-weight: 600;
        border-radius: 5px;
        padding: 7px 11px;
        color: var(--dark-grey);
        display: flex;
        align-items: center;
        position: relative;
        transition: all .3s ease;
        white-space: nowrap;
    }

    .nav-pills .nav-item:first-child .nav-link {
        margin-left: 0;
    }

    .nav-pills .nav-link:before {
        position: absolute;
        content: "";
        height: 50%;
        background-color: var(--dark-color);
        width: 1px;
        right: -10px;
        opacity: .15;
    }

    .nav-pills .nav-item:last-child .nav-link:before {
        display: none;
    }

    .nav-pills .nav-link svg {
        margin-right: 5px;
    }

    .nav-pills .nav-link:hover, .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: var(--light-color);
        opacity: 1;
        color: var(--primary-theme-color);
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    }

    .nav-pills .dropdown-menu .nav-link:hover, .nav-pills .dropdown-menu .nav-link.active, .nav-pills .dropdown-menu.show > .nav-link {
        background-color: var(--menu-active-bg-color);
        box-shadow: none;
    }

    .nav-pills .nav-item.dropdown .dropdown-toggle::after {
        content: "";
        display: block;
        margin: -4px 0px 0 10px;
        width: 7px;
        height: 7px;
        border-top: 1.5px solid var(--secondary-theme-color);
        border-left: 1.5px solid var(--secondary-theme-color);
        transform: rotate(225deg);
        border-right: 0 !important;
        transition: all .3s ease;
    }

    .nav-pills .nav-item.dropdown .dropdown-toggle.show::after {
        transform: rotate(45deg);
        margin: 3px 0 0 10px;
    }

    .nav-pills .nav-item.dropdown .dropdown-menu .nav-link {
        width: 100%;
        margin: 0;
        padding: 10px 15px;
    }

        .nav-pills .nav-item.dropdown .dropdown-menu .nav-link:before {
            content: unset;
        }

.tab-pane .user-panel-main {
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    background-color: var(--light-color);
    max-height: calc(100vh - 279px);
    overflow: auto;
}

.user-panel-header h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-color);
    line-height: normal;
    word-break: break-all;
}

.user-panel-header .card-box {
    height: 100%;
}

.user-panel-header a {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-theme-color);
    text-decoration: underline;
    white-space: nowrap;
}

.user-panel-header h6 {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-grey);
    padding: 0 30px;
    border-right: 1px solid var(--light-border-color-001);
}

    .user-panel-header h6:last-child {
        border: none;
        padding-right: 0;
    }

.user-panel-details {
    margin-top: 20px;
}

    .user-panel-details .card-box {
        background-color: var(--grey-01);
        border-radius: 10px;
        box-shadow: none;
        overflow: hidden;
    }

    .user-panel-details .card-title h4 {
        font-size: 16px;
    }

.tradeNwin-box {
    background-color: var(--light-color);
    border-radius: 10px;
    padding: 15px;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
}

.tradnwin-image {
    background-color: var(--grey-01);
    padding: 30px;
    border-radius: 10px;
    width: 100%;
    position: relative;
    height: 170px;
}

    .tradnwin-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.tradnwin-details {
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .tradnwin-details h5 {
        font-size: 14px;
        font-weight: 700;
        color: var(--dark-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .tradnwin-details h5:first-child {
            width: 60%;
        }

        .tradnwin-details h5:last-child {
            color: var(--secondary-theme-color);
            width: 40%;
        }

.tradeNwin-price {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    background-color: var(--light-color);
    color: var(--primary-theme-color);
    position: absolute;
    right: 10px;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    top: 10px;
}

.tradeNwin .slick-next, .tradeNwin .slick-prev {
    background-color: var(--light-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    height: 25px;
    width: 25px;
    top: -29px;
    border-radius: 5px;
}

.slick-next:before, .slick-prev:before {
    opacity: 1;
    font-size: 16px;
    color: var(--primary-theme-color);
}

.tradeNwin .slick-next {
    right: -1px;
}

.tradeNwin .slick-prev {
    left: unset;
    right: 30px;
}

.next-win-main {
    background-color: var(--grey-01);
    padding: 10px;
    border-radius: 10px;
}

.next-win-img {
    background-color: var(--light-color);
    padding: 15px;
    border-radius: 10px;
    height: 206px;
}

    .next-win-img h5 {
        font-weight: 700;
        font-size: 16px;
        color: var(--secondary-theme-color);
    }

.next-badge {
    display: inline-block;
    background-color: var(--primary-theme-color);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: 700;
    color: var(--light-color);
}

.next-win-img img {
    width: 100%;
    height: calc(100% - 34px);
    object-fit: contain;
    margin-top: 10px;
}

.next-win-details {
    padding: 15px 10px 5px;
}

    .next-win-details h5 {
        font-size: 16px;
        font-weight: 700;
        color: var(--secondary-theme-color);
    }

        .next-win-details h5 span {
            font-size: 14px;
            font-weight: 400;
            display: inline-block;
            color: var(--light-text-color);
            opacity: .7;
        }

    .next-win-details h6 {
        font-size: 12px;
        background-color: var(--light-color);
        font-weight: 400;
        display: block;
        padding: 8px;
        border-radius: 3px;
        margin-top: 15px;
        text-align: center;
        color: var(--dark-color);
    }

.dt-empty {
    /*height: calc(100vh - 390px) !important;*/
    height: calc(100vh - 800px) !important;
    vertical-align: middle !important;
    opacity: .3;
    font-weight: 300;
}

.tx-hash, .memo-msg {
    display: inline-block;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tippy-box {
    max-width: 40vw !important;
}

.currancy-group {
    position: relative;
}

    .currancy-group .currancy-sign {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary-theme-color);
    }

#copiedMsg {
    position: absolute;
    font-size: 12px;
    color: var(--dark-color);
    right: 0;
    top: -20px;
}

.modal-content {
    border: none;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.3);
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-theme-color);
}

.modal-header {
    border: none;
    justify-content: center;
    position: relative;
    padding: 30px 0 0;
}

.modelCloseBtn {
    background-color: var(--light-color);
    border: none;
    right: -10px;
    top: -10px;
    padding: 5px;
    border-radius: 50px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
}

.modal-close-btn, .modal-save-data-btn {
    display: inline-block;
    font-size: 15px;
    padding: 8px 25px;
    font-weight: 700;
    color: var(--light-color);
    border: none;
    border-radius: 5px;
    border: 2px solid var(--primary-theme-color);
    background-color: var(--primary-theme-color);
}

.modal-close-btn {
    background-color: transparent;
    color: var(--primary-theme-color);
    font-weight: 700;
}

.instruction-head {
    font-size: 17px;
    text-align: center;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 5px;
    color: var(--secondary-theme-color);
}

.instruction-text {
    font-size: 14px;
    display: block;
    text-align: center;
    color: var(--light-text-color);
}

.modal-body {
    padding: 30px;
}

.modal-approve-btn, .modal-reject-btn {
    border: none;
    font-size: 15px;
    padding: 10px 20px;
    font-weight: 600;
    color: var(--secondary-theme-color);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.1);
    background-color: var(--light-color);
    color: var(--modal-approve-btn-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 5px;
}

.modal-reject-btn {
    color: var(--modal-reject-btn-text-color);
}

.transaction-mode.withdraw {
    color: var(--transaction-mode-withdraw);
}

.transaction-mode.deposit {
    color: var(--transaction-mode-deposit);
}

.transaction-mode.MT5deposit {
    color: var(--transaction-mode-MT5deposit);
}

.transaction-mode.MT5withdraw {
    color: var(--transaction-mode-MT5withdraw);
}

.modal-btn-group {
    display: flex;
    gap: 7px;
    justify-content: center;
}

.custom-radio {
    position: relative;
    padding: 8px;
    width: 50%;
    border-radius: 5px;
    border: 1px solid transparent;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-grey);
    background-color: var(--grey-01);
}

    .custom-radio input {
        opacity: 0;
        position: absolute;
    }

.radio-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#modalPNLManagemnt .custom-radio {
    width: 49%;
}

.custom-radio:has(input:checked) {
    color: var(--primary-theme-color);
    border-color: var(--primary-theme-color);
}

.custom-checkbox {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-grey);
    display: inline-block;
    user-select: none;
    line-height: 1;
}

    .custom-checkbox input {
        opacity: 0;
        position: absolute;
        cursor: pointer;
    }

    .custom-checkbox::before {
        content: '';
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        left: 4px;
        width: 17px;
        height: 17px;
        border: 1.5px solid var(--light-border-color-001);
        border-radius: 4px;
        background-color: var(--light-color);
        transition: all 0.2s ease;
    }

    .custom-checkbox:hover::before {
        border-color: var(--primary-theme-color);
    }

    .custom-checkbox:has(input:checked)::before {
        border-color: var(--primary-theme-color);
    }

    .custom-checkbox::after {
        content: '';
        position: absolute;
        left: 9.6px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid var(--primary-theme-color);
        border-width: 0 2px 2px 0;
        opacity: 0;
        transform: rotate(45deg) scale(0.9);
        transition: opacity 0.2s ease;
    }

    .custom-checkbox:has(input:checked)::after {
        opacity: 1;
    }

.sharing-box {
    background-color: var(--grey-01);
    padding: 10px;
    border-radius: 5px;
}

.sharing-box-body {
    border-top: 1px solid var(--light-border-color-001);
    padding: 10px;
}

.currancy-group small.text-danger,
.dob-date-picker small.text-danger {
    position: absolute;
    display: block;
}

#tradeSharing.sharing-box, #depositSharing.sharing-box {
    height: 44px;
    overflow: hidden;
    transition: height 0.3s ease;
}

#tradeSharing .sharing-box-body, #depositSharing .sharing-box-body {
    border-top: none;
    transition: border-top 0.3s ease;
    margin-top: 10px;
}

.modal-body .sharing-box .custom-select__list, .modal-body .sharing-box .custom-select__button {
    border: 1px solid var(--input-border-color);
    background-color: var(--light-color);
}

#PnLManagement .modal-dialog {
    max-width: 700px;
}

.sharing-box-body .custom-select-wrapper {
    min-width: unset;
}

.modal-body .custom-select-display.input-style {
    background-color: var(--input-bg-color);
}

.modal-body .sharing-box-body .input-style {
    background-color: var(--light-color);
}

#pills-userpanel .dt-scroll-body {
    max-height: calc(100vh - 488px) !important;
    /*min-height: calc(100vh - 488px) !important;*/
    overflow-y: auto !important;
}

.passwordNote {
    background-color: var(--grey-01);
    font-size: 10px;
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    opacity: .7;
    color: var(--color-slate-700);
    border: 1px solid var(--light-border-color-001);
}

.details .custom-radio {
    background-color: var(--light-color);
    box-shadow: 0 0px 4px #919eab1f;
    width: 32.33%;
}
.details .col-md-6 .custom-radio{
    width:48%;
}
.rule-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 20px;
}

.rule-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 12px 12px 0 0;
}

    .rule-card-header.collapsed {
        border-bottom: 0;
        border-radius: 12px 12px 12px 12px;
    }

    .rule-card-header .chevron-icon svg {
        transition: all 0.3s ease;
    }

    .rule-card-header.collapsed .chevron-icon svg {
        transform: rotate(-180deg);
    }

    .rule-card-header h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.rule-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.rule-icon-blue {
    background-color: #2563eb;
}

.rule-icon-green {
    background-color: #10b981;
}

.rule-icon-purple {
    background-color: #7c3aed;
}

.rule-icon-red {
    background-color: #ef4444;
}

.rule-card-body {
    padding: 20px;
}

.info-tooltip-icon {
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    margin-left: 4px;
}

.instrument-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.instrument-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    margin-bottom: 0;
}

.details #collapseTradingRules .custom-checkbox::after {
    top: 1px;
}

.details .sharing-box .custom-radio {
    background-color: var(--grey-00);
}
.contest-details h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    margin-bottom: 15px;
}

.contest-image {
    width: 100%;
    height: 288px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.05);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--input-border-color);
    background-color: var(--grey-00);
    padding: 10px;
}

    .contest-image img {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background-repeat: no-repeat;
        background-size: cover;
    }

.contest-data {
    padding: 15px 20px;
    border-radius: 5px;
    background-color: var(--grey-00);
    line-height: 1;
    height: 100%;
}

    .contest-data span {
        font-size: 12px;
        color: var(--light-grey-00);
        line-height: 1;
    }

    .contest-data h5 {
        margin-top: 5px;
        font-weight: 700;
        line-height: 1;
        font-size: 16px;
        color: var(--color-slate-700);
    }

.balance-box {
    padding: 15px;
    border-radius: 8px;
    background-color: var(--grey-00);
}

    .balance-box h6 {
        font-size: 14px;
        color: var(--color-slate-700);
    }

    .balance-box .custom-checkbox::after {
        top: -5.9px;
        left: 10.1px;
    }

.details .custom-checkbox::after {
    top: -5.5px;
}

.content-body-heading h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    margin-bottom: 3px;
}

.content-body-heading span {
    font-size: 14px;
    color: var(--light-text-color);
}

.tradeNwin {
    margin-top: 15px;
    max-height: 355px;
    overflow: auto;
    padding-right: 15px;
}

    .tradeNwin ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .tradeNwin ul li {
            background-color: var(--grey-00);
            padding: 15px;
            border-radius: 10px;
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            border: 1px solid transparent;
        }

            .tradeNwin ul li .prize-image {
                height: 75px;
                min-width: 75px;
                max-width: 75px;
                background-color: var(--light-color);
                border-radius: 5px;
                padding: 10px;
            }

            .tradeNwin ul li h6 {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 2px;
                color: var(--heading-text-color);
            }

            .tradeNwin ul li .d-flex span {
                font-size: 13px;
                color: var(--secondary-theme-color);
            }

                .tradeNwin ul li .d-flex span span {
                    opacity: 0.7;
                    color: var(--heading-text-color);
                }

    .tradeNwin .reward-status button, .tradeNwin .reward-status span {
        padding: 3px 8px;
        display: inline-block;
        border-radius: 5px;
        font-size: 12px;
    }

    .tradeNwin .reward-status.received span {
        background-color: #c6e6cb !important;
        color: #10811f !important;
    }

    .tradeNwin ul li.current {
        border: 1px solid #00297042;
    }

    .tradeNwin .reward-status.claim button {
        background-color: var(--primary-theme-color);
        color: var(--light-color);
        border: none;
    }

    .tradeNwin .reward-status.pending span {
        background-color: #fbebdb !important;
        color: #814910 !important;
    }

    .tradeNwin:has(.nextPrizeImage) {
        max-height: unset;
        padding-right: 0px;
        height: calc(100% - 65px);
    }

    .tradeNwin .card {
        box-shadow: none;
        padding: 20px;
        height: 100%;
        width: 100%;
        justify-content: space-between;
        border: none;
        background-color: var(--grey-00);
        border-radius: 15px;
    }

        .tradeNwin .card .nextPrizeImage {
            width: 100%;
            height: 178px;
            padding: 15px;
            text-align: center;
            position: relative;
            background-color: var(--light-color);
            border-radius: 10px;
        }

            .tradeNwin .card .nextPrizeImage span {
                position: absolute;
                font-size: 10px;
                font-weight: 500;
                right: 15px;
                top: 15px;
                margin: 0;
                background-color: var(--primary-theme-color);
                color: var(--light-color);
                border-radius: 5px;
                opacity: 1;
            }

            .tradeNwin .card .nextPrizeImage img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

        .tradeNwin .card h4 {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--secondary-theme-color);
            white-space: nowrap;
            text-transform: capitalize;
        }

        .tradeNwin .card h5 {
            font-size: 17px;
            font-weight: 600;
            margin: 0;
            color: var(--heading-text-color);
            margin-top: 15px;
        }

        .tradeNwin .card span {
            font-size: 13px;
            color: var(--light-text-color);
            display: inline-block;
            margin-top: 8px;
        }

        .tradeNwin .card small {
            margin-top: 20px;
            font-size: 12px;
            display: inline-block;
            padding: 5px 10px;
            background-color: var(--light-color);
            color: var(--heading-text-color);
        }

    .tradeNwin ul li .prize-image img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

.contest-prize {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

    .contest-prize h6 {
        background-color: var(--grey-00);
        color: var(--secondary-theme-color);
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        padding: 10px 20px;
        border-radius: 50px;
        line-height: 1;
        display: flex;
        align-items: center;
    }

    .contest-prize .joinButton {
        width: 90px;
        position: absolute;
        right: 30px;
        top: -20px;
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center 0;
        transform: rotate(45deg);
    }

#myTabs {
    overflow: auto;
    flex-wrap: nowrap;
}

@keyframes swing {
    0% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

.contest-prize button {
    border: 0;
    background-color: transparent;
    padding: 0;
}

.contest-prize .joinButton button {
    position: relative;
    color: var(--primary-theme-color);
}

    .contest-prize .joinButton button span {
        font-size: 16px;
        font-weight: 700;
        position: absolute;
        display: inline-block;
        top: 55%;
        left: 50%;
        line-height: 17px;
        transform: translate(-50%, -50%) rotate(-5deg);
    }

.contest-prize .joinButton img {
    width: 100%;
}

.contest-details {
    margin-top: 20px;
}

    .contest-details h5 {
        font-size: 18px;
        font-weight: 700;
        color: var(--secondary-theme-color);
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .contest-details span {
        font-size: 14px;
        font-weight: 400;
        color: var(--light-text-color);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .contest-details h6 {
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: 600;
        color: var(--heading-text-color);
    }

.timer-box {
    background-color: var(--grey-00);
    padding: 12px 15px;
    width: 100%;
    border-radius: 10px;
    line-height: 1;
    font-size: 14px;
    text-align: center;
    color: var(--light-text-color);
    display: flex;
    text-transform: capitalize;
    align-items: center;
}

.contest-details .timer-box span.count {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-theme-color);
    margin-right: 10px;
}

.contest-condition span {
    color: var(--light-text-color);
}

.contest-details .progress, .daily-contest-condition .progress {
    --bs-progress-height: .5rem;
}

.details .custom-checkbox:has(#isActive)::after,
.details .custom-checkbox:has(#chkIsActive)::after,
.details .custom-checkbox:has(#chkActive)::after,
.details .custom-checkbox:has(#chkStatus)::after {
    top: 0;
}

.mini-toggle-wrapper {
    display: inline-block;
}

.mini-toggle-input {
    display: none;
}

.mini-toggle {
    display: block;
    width: 40px;
    height: 20px;
    background: #f6cfcf;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset -2px -2px 5px rgba(255,255,255,0.6), inset 2px 2px 5px rgba(0,0,0,0.1);
}

    .mini-toggle::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: linear-gradient(to bottom, #fff, #bbb);
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: -1px -1px 2px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.2);
    }

.mini-toggle-input:checked + .mini-toggle {
    background: #c1ffd7;
    box-shadow: inset -2px -2px 5px rgba(255,255,255,0.8), inset 2px 2px 5px rgba(0,128,0,0.2);
}

    .mini-toggle-input:checked + .mini-toggle::before {
        transform: translateX(20px);
        background: linear-gradient(to bottom, #2ecc71, #27ae60);
    }

.mini-toggle-input:not(:checked) + .mini-toggle {
    background: #f8d0d0;
    box-shadow: inset -2px -2px 5px rgba(255,255,255,0.8), inset 2px 2px 5px rgba(255,0,0,0.2);
}

    .mini-toggle-input:not(:checked) + .mini-toggle::before {
        transform: translateX(0);
        background: linear-gradient(to bottom, #f55, #d00);
    }

.sidebar {
    width: 35%;
    background-color: var(--grey-01);
    border-right: 1px solid var(--light-border-color);
    overflow-y: auto;
    display: flex;
    margin-right: 20px;
    padding: 20px;
    border-radius: 15px;
    flex-direction: column;
    height: 100%;
}

.ticket-list {
    flex: 1;
    overflow-y: auto;
}

.ticket-item {
    padding: 20px;
    background-color: var(--light-color);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding-left: 40px;
    margin-bottom: 15px;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .ticket-item h5 {
        font-size: 18px;
        font-weight: 700;
        color: var(--heading-text-color);
    }

    #chatHeader span, .ticket-item span {
        display: inline-block;
        padding: 6px 10px;
        font-size: 11px;
        line-height: 1;
        border-radius: 50px;
        font-weight: 700;
        text-transform: capitalize;
        display: flex;
        align-items: center;
        gap: 3px;
    }

        #chatHeader span.ticket-id, .ticket-item span.ticket-id {
            background-color: var(--primary-light-theme-color);
            color: var(--primary-theme-color);
        }

        #chatHeader span.priority, .ticket-item span.priority {
            position: relative;
            padding: 0;
            padding-left: 25px !important;
        }

            #chatHeader span.priority.high, .ticket-item span.priority.high {
                color: var(--suport-chat-priority-high);
            }

            #chatHeader span.priority.low, .ticket-item span.priority.low {
                color: var(--suport-chat-priority-low);
            }

            #chatHeader span.priority.medium, .ticket-item span.priority.medium {
                color: var(--suport-chat-priority-medium);
            }

            #chatHeader span.priority:before, .ticket-item span.priority:before {
                position: absolute;
                content: "";
                height: 12px;
                left: 9px;
                top: 50%;
                transform: translateY(-50%);
                width: 12px;
                border-radius: 50px;
                opacity: .2;
            }

            #chatHeader span.priority:after, .ticket-item span.priority:after {
                position: absolute;
                content: "";
                height: 6px;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                width: 6px;
                border-radius: 50px;
            }

            #chatHeader span.priority.high:before, #chatHeader span.priority.high:after, .ticket-item span.priority.high:after, .ticket-item span.priority.high:before {
                background-color: var(--suport-chat-priority-high);
            }

            #chatHeader span.priority.low:before, #chatHeader span.priority.low:after, .ticket-item span.priority.low:after, .ticket-item span.priority.low:before {
                background-color: var(--suport-chat-priority-low);
            }

            #chatHeader span.priority.medium:before, #chatHeader span.priority.medium:after, .ticket-item span.priority.medium:after, .ticket-item span.priority.medium:before {
                background-color: var(--suport-chat-priority-medium);
            }

        .ticket-item span.ticket-status {
            padding: 0;
            margin-top: 3px;
            font-size: 12px;
            left: -29px;
            top: 45%;
            padding: 3px 0;
            width: 80px;
            text-align: center;
            border-radius: 0 0 5px 5px;
            position: absolute;
            transform: translateY(-50%) rotate(-90deg);
        }

            #chatHeader span.ticket-status.open, .ticket-item span.ticket-status.open {
                color: var(--status-pending-text);
                background-color: var(--status-pending-bg);
            }

        #chatHeader span.otherDetails, .ticket-item span.otherDetails {
            border-radius: 5px !important;
            font-weight: 600;
            opacity: .8;
            color: var(--color-slate-700);
            background-color: var(--grey-02);
            position: relative;
            z-index: 99;
        }

        #chatHeader span.ticket-status.closed, .ticket-item span.ticket-status.closed {
            color: var(--status-closed-text);
            background-color: var(--status-closed-bg);
        }

    #chatHeader p, .ticket-item p {
        font-size: 13px;
        color: var(--color-slate-700);
        font-weight: 500;
        margin: 7px 0 12px 0;
        height: 100px;
        overflow: auto;
        /* display: -webkit-box;
        line-height: 18px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;*/
    }

    .ticket-item:hover {
        box-shadow: none;
    }

    .ticket-item div {
        position: relative;
        z-index: 9999;
    }

    .ticket-item .dropdown-menu.show {
        padding: 0;
        transform: translateY(0) translateX(7%) !important;
        top: 21px !important;
    }

    .ticket-item .dropdown-menu a.re-open {
        color: var(--status-completed-text);
    }

    .ticket-item .dropdown-menu a.close {
        color: var(--status-rejected-text);
    }

    .ticket-item .dropdown-menu a {
        padding: 10px;
        font-size: 12px;
        gap: 0 5px;
    }

    .ticket-item .dropdown-menu {
        width: fit-content;
        min-width: unset;
    }
/* Chat Section */
.chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--grey-00);
}

.chat-header {
    border-bottom: 1px solid var(--light-border-color);
    padding-bottom: 15px;
    background-color: var(--light-color);
}

.chat-box {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 499px;
    min-height: calc(100vh - 580px);
    overflow: auto;
}

.messageSender {
    opacity: 0;
    background: var(--light-color);
    padding: 2px 5px 4px;
    border-radius: 5px 0 5px 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    display: inline-block;
    position: absolute;
    right: 0px;
    bottom: 0;
    opacity: 0;
    transition: all 0.2s ease-in;
    line-height: 1;
}

    .messageSender small {
        font-size: 10px;
        color: var(--color-slate-700);
        opacity: .7;
    }

.message:hover .messageSender {
    bottom: -24px;
    opacity: 1;
}

.message {
    max-width: 60%;
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    word-wrap: break-word;
}

.outgoing {
    align-self: flex-end;
    background-color: var(--support-chat-ongoing-message);
    color: var(--heading-text-color);
    border-radius: 15px 15px 0 15px;
}

.incoming {
    align-self: flex-start;
    background-color: var(--support-chat-incoming-message);
    color: #333;
    border-radius: 15px 15px 15px 0px;
    flex-direction: row-reverse;
}

.app {
    display: flex;
    height: calc(100vh - 265px);
}
/* Chat Input */
.chat-input {
    display: flex;
    padding-top: 1rem;
    border-top: 1px solid var(--light-border-color);
    background-color: var(--light-color);
}

    .chat-input input {
        flex: 1;
        padding: 10px 15px;
        border: 1px solid var(--input-border-color);
        border-radius: 10px;
        outline: none;
        font-size: 14px;
    }

#chatHeader h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--heading-text-color);
}

#chatHeader span:not(.ticket-status) {
    display: inline-block;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1;
    border-radius: 50px;
    font-weight: 700;
    text-transform: capitalize;
}

#chatHeader span.ticket-status {
    padding: 0;
    margin-top: 3px;
    font-size: 12px;
    padding: 3px 10px;
    text-align: center;
    border-radius: 5px;
}

.SupportChatBtn {
    background: var(--light-color);
    border-radius: 5px;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: var(--primary-theme-color);
    border: 1px solid var(--light-border-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    padding: 0;
}

.chat-image {
    width: 250px;
    cursor: pointer;
}

.chat-input button {
    height: 45px;
    width: 45px;
    background-color: var(--primary-theme-color);
    border: none;
    color: var(--light-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    overflow: hidden;
    padding: 0;
}

    .chat-input button.autoMsgBtn, .chat-input button.filerUploadButton {
        background-color: var(--light-color);
        color: var(--primary-theme-color);
        border: 1px solid var(--light-border-color);
        box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    }

.filerUploadButton input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.date-badge {
    display: inline-block;
    margin: 0 auto;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 10px 2px;
    border-radius: 5px;
    color: var(--color-slate-700);
    background: var(--light-color);
    border: 1px solid var(--light-border-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
}

.msg-time {
    font-size: 10px;
    display: flex;
    line-height: 1;
    opacity: .7;
    white-space: nowrap;
    margin-top: 8px;
}

.message-text {
    line-height: 26px;
}

.message.incoming .msg-time {
    justify-content: flex-start;
}

.message.outgoing .msg-time {
    justify-content: flex-end;
}

.message a:hover {
    color: inherit !important;
}

#HelpTicketPagination .dt-info {
    font-size: 12px;
    font-weight: 400;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
    left: 50%;
    transform: translateX(-50%);
}

.flatpickr-months {
    position: relative;
    z-index: 9;
}

    .flatpickr-months .flatpickr-month {
        overflow: unset;
    }

    .flatpickr-months .custom-select {
        width: 50%;
    }

    .flatpickr-months .custom-select__list {
        max-height: 190px;
        overflow: auto;
    }

    .flatpickr-months .custom-select__button {
        padding: 2px 25px 3px 10px !important;
        font-size: 12px !important;
        height: 25px !important;
        line-height: 21px !important;
    }

    .flatpickr-months .custom-select__item {
        padding: 6px 8px 5px;
    }

#modalPNLManagemnt .modal-dialog {
    max-width: 700px;
}

.custom-select__item {
    padding: 9px 10px 8px;
}

.NetworkFilterWrapper {
    height: 100%;
}

table.dataTable > tbody > tr:hover td {
    background-color: var(--table-th-bg);
}

#spnRate {
    font-size: 12px;
    background: #fff;
    display: inline-block;
    padding: 2px 8px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-weight: 700;
}

#expand {
    position: absolute;
    background: var(--light-color);
    color: var(--template-primary);
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    gap: 5px;
    top: 10px;
    right: 15px;
}

.view-more-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-theme-color);
}

table.dataTable > tbody > tr > td:has(span a) {
    text-align: left;
}

#toast-container > .toast-error {
    background-color: #fff !important;
    color: #cb0505 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 0 5px 0 rgb(255 0 0 / 18%) !important;
    border: none !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    position: relative;
}

    #toast-container > .toast-error .toast-progress {
        background-color: #cb0505 !important;
        opacity: 1 !important;
    }

    #toast-container > .toast-error .toast-close-button {
        background: #f3d4d4 !important;
        height: 20px !important;
        width: 20px !important;
        color: red !important;
        border-radius: 50%;
        top: -9px;
        right: -9px;
    }

#toast-container > .toast-error {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cb0505'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-5 11.66a1 1 0 0 0 -1 1v.01a1 1 0 0 0 2 0v-.01a1 1 0 0 0 -1 -1m0 -7a1 1 0 0 0 -1 1v4a1 1 0 0 0 2 0v-4a1 1 0 0 0 -1 -1'/></svg>") !important;
    background-size: 24px 24px !important;
}

#toast-container > .toast-success {
    background-color: #fff !important;
    color: #279f0a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 0 5px 0 rgb(15 141 26 / 41%) !important;
    border: none !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    position: relative;
}

    #toast-container > .toast-success .toast-progress {
        background-color: #279f0a !important;
        opacity: 1 !important;
    }

    #toast-container > .toast-success .toast-close-button {
        background: #ccefc3 !important;
        height: 20px !important;
        width: 20px !important;
        color: #279f0a !important;
        border-radius: 50%;
        top: -9px;
        right: -9px;
        opacity: 1 !important;
    }

#toast-container > .toast-success {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23279f0a'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z'/></svg>") !important;
    background-size: 24px 24px !important;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border: 1px solid var(--input-border-color);
    box-shadow: 0 0px 4px #919eab1f;
    background-color: var(--light-color);
    width: 275px;
    border-radius: .375rem;
    justify-content: space-between;
}

.file-name {
    font-size: 14px;
    color: #176ab3;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    color: var(--dark-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.upload-btn {
    font-size: 12px !important;
    color: var(--primary-theme-color);
    border: none;
    padding: 0;
    background: transparent;
    font-weight: 700;
    white-space: nowrap;
}

.upload-btn-wrapper input[type=file] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

button.card-box.card-title {
    flex: 1 1 calc(20% - 15px);
    min-width: 200px;
    background: var(--light-color);
    padding: 12px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    border: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    justify-content: center;
}

.btn-group-box {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    border: 0;
    align-items: flex-start;
    justify-content: flex-start;
}
/*.custom-select.disabled .custom-select__button {
    cursor: not-allowed;
    background: #f5f5f5;
}*/
.custom-switch {
    position: relative;
    padding: 6px 10px 6px !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: .375rem;
    line-height: 1.4;
    border: 1px solid var(--input-border-color);
    box-shadow: 0 0px 4px #919eab1f;
    background: transparent;
    margin: 0;
    transition: all .2s ease;
    background-color: var(--light-color);
    margin-left: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .custom-btn.enabel, .custom-switch.activated {
        color: var(--status-closed-text);
    }

    .custom-btn.disabel, .custom-switch.deactivated {
        color: var(--status-rejected-text);
    }

    .custom-switch input {
        opacity: 0;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        cursor: pointer;
        margin: 0;
        left: 0;
    }

body:has(#tblPNL_wrapper) .custom-tooltip-primary .tooltip-inner {
    background: #111827;
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    text-align: left;
    max-width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    font-size: 13px;
}

body:has(#tblPNL_wrapper) .custom-tooltip-primary.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #111827;
}

.tooltip-head {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: #f87171;
}

.tooltip-intro {
    font-size: 13px;
    margin-bottom: 6px;
    opacity: .9;
    color: #313131;
}

.tooltip-list {
    padding-left: 18px;
    margin: 0;
}

    .tooltip-list li {
        margin-bottom: 4px;
        color: #313131;
        font-size: 12px;
        font-weight: 600;
        line-height: 19px;
    }

#acmRateTicker, #UserPartnerSummaryName, #UserPartnerSummaryEmail, #UserPartnerEmail {
    background: var(--light-color);
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-theme-color);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-left: 10px;
}

#EditPartnerForm .custom-select.disabled .custom-select__button {
    opacity: 1 !important;
}

.custom-details {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    padding: 9px 13px !important;
    height: 45px;
    box-shadow: none;
    background-color: var(--input-bg-color);
}

    .custom-details label {
        font-size: 14px;
        font-weight: 600;
        color: var(--dark-grey);
        line-height: 1;
    }

.outgoing:has(.edit-wrapper) {
    width: 50%;
}

.edit-wrapper {
    width: 100%;
}

.edit-input:focus, .edit-input {
    border: none;
    font-size: 14px;
    height: 100%;
    background-color: var(--support-chat-ongoing-message);
    margin: 0;
    resize: none;
    border-radius: 10px 10px 0px 10px !important;
    padding: 0;
    overflow: auto;
    height: 100%;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.btnEditMessage {
    position: absolute;
    border: none;
    background: var(--primary-theme-color);
    padding: 0px 5px;
    font-weight: 500;
    border-radius: 5px 5px 0 5px;
    font-size: 12px;
    color: var(--light-color);
    right: 3px;
    bottom: 3px;
}

.login-box .field-validation-error, .login-box .field-validation-valid {
    position: absolute;
    bottom: -20px;
    font-size: 12px;
    right: 0;
}

.loginError {
    position: absolute;
    top: -33px;
    font-size: 14px;
}

#pnlDragFile {
    position: relative;
    width: 100%;
    height: 160px;
    border: 2px dashed var(--input-border-color);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--input-bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upi-box {
    overflow: hidden;
    padding: 50px;
    border-radius: 10px;
    background: var(--light-color);
    position: relative;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    height: 100%;
}

    .upi-box h5 {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-theme-color);
        margin-bottom: 40px;
    }

.upi-form .custom-select__button {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    padding: 14px 13px !important;
    line-height: 1;
    height: 45px;
    font-size: 15px;
    font-weight: 500;
    background-color: var(--input-bg-color);
    box-shadow: none;
}

.custom-upload {
    display: block;
    padding: 20px;
    border: 2px dashed #eee;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    background-color: #fafafa;
}

    .custom-upload span {
        display: block;
        color: #bababa;
        font-size: 14px;
        font-weight: 400;
    }

.upi-form input#QRCode {
    width: 100%;
    padding: 6px;
    border: 1.5px dashed #dfdfdf;
    border-radius: 8px;
    background: #fafafa;
}

#btnBankTransfer {
    width: 100%;
    padding: 15px;
    font-size: 15px;
}

.qrCodePreview {
    margin-top: 10px;
    width: 100%;
    height: 118.5px;
    object-fit: contain;
    border-radius: 8px;
    background: #fafafa;
    border: 1px solid #eee;
}

    .qrCodePreview img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

.upi-form input[type="file"] {
    display: none;
}

.misc-data {
    position: relative;
}

    .misc-data button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }

.custom-btn {
    position: relative;
    padding: 6px 10px 6px !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: .375rem;
    line-height: 1.4;
    border: 1px solid var(--input-border-color);
    box-shadow: 0 0px 4px #919eab1f;
    background: transparent;
    margin: 0;
    transition: all .2s ease;
    background-color: var(--light-color);
    margin-left: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 5px;
}

.role-wrapper {
    position: relative;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.primary-role {
    color: #212529;
}

.more-roles {
    margin-left: 6px;
    font-size: 12px;
    color: #6c757d;
}

.role-wrapper::after {
    content: attr(title);
    position: absolute;
    left: 0;
    top: 130%;
    background: #000;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.role-wrapper:hover::after {
    opacity: 1;
    transform: translateY(0);
}

@keyframes flip {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(-180deg);
    }
}

.page-loader {
    position: fixed;
    inset: 0;
    background-color: #eaf8fb94;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none;
    backdrop-filter: blur(8px);
}

.loader {
    width: 65px;
}

.loader__image {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader__coin {
    animation: flip 0.5s ease-in-out infinite alternate-reverse both;
}

    .loader__coin img, .loader__hand img {
        max-width: 100%;
        display: block;
    }

.dashboard-section .card-box {
    background-color: var(--grey-00);
    border: 1px solid var(--light-border-color);
    box-shadow: none;
}

.metric-line {
    padding: 12px 0;
    position: relative;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    text-transform: uppercase;
}

.metric-value {
    font-size: 18px;
    font-weight: 600;
}

.metric-bar {
    height: 3px;
    width: 100%;
    border-radius: 6px;
    margin-top: 8px;
}

.with-sign {
    padding-right: 28px;
}

.calc-sign {
    position: absolute;
    right: -29px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--light-color);
    color: var(--dark-color);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, .15);
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    z-index: 99;
}

.dashboard-section {
    background: var(--light-color);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--light-border-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    overflow: hidden;
}

.section-header h6 {
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
}

.section-header h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    margin-bottom: 18px;
}

.card-select {
    width: 150px;
}

#helpdeskTicketContainer .help-ticket-box:first-child {
    margin-top: 0 !important;
}

.dashboard-section .card-box.deposit-box .box-data span, .sales-dashboard .card-box.deposit-box .box-data span, .dashboard-section .card-box.deposit-box .box-data h3, .sales-dashboard .card-box.deposit-box .box-data h3 {
    color: var(--deposit-box-text-color)
}

.sales-dashboard .card-box.withdraw-box .box-data span, .sales-dashboard .card-box.withdraw-box .box-data h3, .dashboard-section .card-box.withdraw-box .box-data span, .dashboard-section .card-box.withdraw-box .box-data h3 {
    color: var(--withdraw-box-text-color);
}

.dashboard-section .card-box.equity-box .box-data span, .dashboard-section .card-box.equity-box .box-data h3 {
    color: var(--equity-box-text-color);
}

.sales-dashboard .card-box.wallet-balance-box .box-data h3, .sales-dashboard .card-box.wallet-balance-box .box-data span, .dashboard-section .card-box.wallet-balance-box .box-data span, .dashboard-section .card-box.wallet-balance-box .box-data h3 {
    color: var(--wallet-box-text-color);
}

.dashboard-section .card-box.payable-box .box-data span, .dashboard-section .card-box.payable-box .box-data h3 {
    color: var(--payable-box-text-color);
}

.dashboard-section .card-box.first-deposit-bonus-box .box-data span, .dashboard-section .card-box.first-deposit-bonus-box .box-data h3 {
    color: var(--first-deposit-bonus-box-text-color);
}

.dashboard-section .card-box.pending-deposit-box .box-data span, .dashboard-section .card-box.pending-deposit-box .box-data h3 {
    color: var(--pending-deposit-box-text-color);
}

.box-icon-circle {
    background: var(--light-color);
    height: 40px;
    width: 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: #919eab52 0px 0px 2px 0px, #919eab47 0px 12px 24px -4px;
    color: var(--secondary-theme-color);
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #e9e9e9;
}
/*.sales-dashboard .card-box.deposit-box .box-icon-circle svg, .dashboard-section .card-box.deposit-box .box-icon-circle svg {
        fill: green;
    }*/ /*.sales-dashboard .card-box.withdraw-box .box-icon-circle svg, .dashboard-section .card-box.withdraw-box .box-icon-circle svg {
        fill: #cd1e1e;
    }*/

.dashboard-section .card-box.equity-box .box-icon-circle svg {
    fill: #4f39f6;
}
/* .sales-dashboard .card-box.wallet-balance-box .box-icon-circle svg, .dashboard-section .card-box.wallet-balance-box .box-icon-circle svg {
        fill: #0894bd;
    }*/

.dashboard-section .card-box.payable-box .box-icon-circle svg {
    fill: #bb6f0d;
}

.dashboard-section .card-box.first-deposit-bonus-box .box-icon-circle svg {
    fill: #19af9b;
}

.dashboard-section .card-box.pending-deposit-box .box-icon-circle svg {
    fill: #f59200;
}

.dt-table-btn-export {
    padding: 6px 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Dropdown container */
.dt-button-collection {
    min-width: 100px !important;
    border-radius: 6px;
}
    /* Dropdown items */
    .dt-button-collection .dt-button {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
    /* SVG alignment */
    .dt-button-collection svg {
        width: 16px;
        height: 16px;
    }

.dashboard-btn {
    background: var(--light-color);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--light-border-color);
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

    .dashboard-btn img {
        width: 30px;
    }

    .dashboard-btn.deposit-wallet {
        color: var(--deposit-box-text-color);
    }

    .dashboard-btn.withdraw-wallet {
        color: var(--withdraw-box-text-color);
    }

.flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
}

small.error {
    /*position: absolute;*/
    /*bottom: -20px;*/
    /*left: 13px;*/
    font-size: 13px;
    color: var(--error-text) !important;
    text-transform: capitalize;
}

.currancy-group small.error {
    position: absolute;
}

div:has(> input + small.error) {
    position: relative;
}

.dashboard-filter .custom-select__button {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    padding: 8px 13px !important;
    height: 45px;
    box-shadow: none;
    line-height: 1.8;
    font-size: 15px;
    font-weight: 500;
    color: #444050;
    background-color: var(--input-bg-color);
}

    .dashboard-filter .custom-select__button::after {
        width: 18px;
        height: 18px;
        right: 15px;
    }

#salesReffreralLink div {
    background-color: var(--light-color);
    border-radius: 5px;
    box-shadow: #919eab33 0px 0px 2px 0px, #919eab1f 0px 12px 24px -4px;
    position: relative;
    padding: 5px 15px;
    color: var(--primary-theme-color);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#salesReffreralLink #copyButton {
    border: none;
    padding: 5px;
    border-radius: 5px;
    color: var(--light-color);
    background: var(--primary-theme-color);
    line-height: 1;
}

foreignObject, #targetChart * {
    outline: none !important;
}

.lead-info-data span {
    margin-top: 0 !important;
    display: inline-block;
    padding: 5px;
    background: var(--light-color) !important;
    opacity: 0.8;
    border: 1px solid var(--input-border-color) !important;
    border-radius: 5px;
    color: var(--dark-color) !important;
}

#divLeads {
    max-height: 350px;
    overflow: auto;
}

.progress-message {
    font-size: 14px;
    text-align: center;
    color: var(--color-slate-700);
}

#leadTargetTotal, #setProgressTotal {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pipeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.lead-step {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .lead-step span {
        display: inline-block;
        font-size: 15px;
        font-weight: 700;
        color: var(--color-slate-700);
    }

.modal-table-box {
    padding: 5px 15px;
    border-radius: 10px;
    background-color: var(--grey-01);
}

    .modal-table-box table th {
        font-size: 14px;
        font-weight: 600;
        color: var(--light-text-color);
    }

    .modal-table-box table td {
        color: var(--color-slate-700);
        font-size: 14px;
        white-space: nowrap;
        font-weight: 600;
        border-bottom: 1px solid var(--light-border-color);
        padding: 8px 15px;
        background: var(--light-color);
    }

#modalCommissionFlow .card-box {
    box-shadow: none;
    background: #f7f7f7;
    border: 1px solid var(--input-border-color);
}

.confirm-amount, .total-commision {
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--input-border-color);
    box-shadow: 0 0px 4px #919eab1f;
    color: var(--primary-theme-color);
    background-color: var(--light-color);
    border-radius: .375rem;
    line-height: 1.4;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

    .total-commision span {
        display: inline-block;
        margin-left: 3px;
    }

#leadDetailsSection h6 {
    font-size: 14px;
    color: var(--color-slate-700);
    font-weight: 500;
}

    #leadDetailsSection h6 span {
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-top: 8px;
    }

.lead-page-wrap .card-title h4 {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 15px;
}

.lead-footer {
    display: flex;
    gap: 10px;
}

    .lead-footer button {
        flex: 1;
        padding: 7px 12px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        gap: 6px;
        font-weight: 600;
    }

.note-item, .timeline-item {
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    padding: 15px;
    border-radius: 9px;
    margin-bottom: 14px;
}

    .note-item:last-child, .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-item > div {
        font-size: 13px;
        color: var(--label-color);
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .timeline-item > div span {
            display: inline-block;
            padding: 4px 7px 2px;
            border: 1px solid var(--primary-theme-color);
            border-radius: 5px;
            color: var(--primary-theme-color);
            line-height: 1;
            font-weight: 600;
        }

    .timeline-item h6 {
        font-size: 15px;
        font-weight: 600;
        color: var(--color-slate-700);
        margin-top: 5px;
    }

#timelineSection {
    max-height: 250px;
    overflow: auto;
}

.note-type-picker {
    display: flex;
    justify-content: space-between;
}

    .note-type-picker button {
        border-radius: 5px;
        background-color: var(--input-bg-color);
        border: 1px solid var(--input-border-color);
        color: var(--color-slate-700);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        gap: 6px;
        font-weight: 600;
        padding: 5px 15px;
    }

#notesContainer > div {
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    padding: 15px;
}

.note-actions button {
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--light-color);
    border: none;
    color: var(--primary-theme-color);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.note-icon {
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
}

.note-text {
    font-weight: 600;
    color: var(--color-slate-700);
    font-size: 15px;
    line-height: 22px;
}

.note-actions button.btn-delete {
    color: var(--withdraw-box-text-color);
}

.note-meta {
    position: absolute;
    right: 0;
    bottom: -16px;
    font-size: 12px;
}

.type-btn.icon-issue {
    border-color: #68091021;
    background: #d7303c0d;
    color: #680910;
}

.type-btn.icon-general {
    border-color: #1c88a917;
    background: #1c88a917;
    color: #135b71;
}

.type-btn.icon-important {
    border-color: #cb6d281c;
    background: #cb6d281c;
    color: #813e0d;
}

.type-btn.icon-followup {
    border-color: #a78d2c1c;
    background: #a78d2c1c;
    color: #574811;
}

.type-btn.icon-call {
    border-color: #24a77e17;
    background: #24a77e17;
    color: #115741;
}

.type-btn.icon-email {
    border-color: #2152af17;
    background: #2152af17;
    color: #112957;
}

.note-icon.icon-issue {
    color: #680910;
}

.note-icon.icon-email {
    color: #112957;
}

.note-icon.icon-call {
    color: #115741;
}

.note-icon.icon-followup {
    color: #574811;
}

.note-icon.icon-important {
    color: #813e0d;
}

.note-icon.icon-general {
    color: #135b71;
}

#notesContainer {
    max-height: 307px;
    overflow: auto;
}

.bulk-step {
    font-size: 13px;
    color: var(--color-slate-700);
    opacity: .5;
}

.fr-qi-helper a.fr-btn.fr-floating-btn {
    padding-top: 0 !important;
}

.login-box:has(.change-password) .login-text {
    display: none;
}

.login-box .change-password h4 {
    position: relative;
}

    .login-box .change-password h4:before {
        position: absolute;
        content: "";
        height: 1px;
        width: 50%;
        bottom: -23px;
        background-color: #f0f0f0;
    }

#importModalTabs {
    padding: 30px;
    background: var(--primary-light-theme-color);
    border-radius: 10px;
    border: none;
    justify-content: center;
    display: flex;
    flex-wrap:wrap;
}

.common-svg {
    fill: var(--light-color);
}

.mobileLogo .logo-dark {
    position: unset;
    display: none;
}

.mobileLogo .logo-light {
    display: inline-block;
}

div.input-style {
    padding: 10px 13px;
}

.modal-body .details .custom-select__list,
.modal-body .details .custom-select__button {
    background-color: var(--light-color) !important;
}

.modal-body .details .custom-select .custom-select__search,
.modal-body .details .custom-select__no-data {
    background-color: var(--grey-01);
    width: 95.5%;
}

.slab-remove {
    margin-top: 30px;
}

.details .accordion-button {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    border: none;
    background: var(--light-color);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    border-radius: 6px;
}

.details .accordion-body {
    padding: 0;
    border: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M6 9l6 6l6 -6"></path> </svg>');
}

.accordion-button::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M6 9l6 6l6 -6"></path> </svg>');
    transform: rotate(0deg);
}

#groupTargetContainer h6 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-slate-700);
    margin-bottom: 0px;
}

    #groupTargetContainer h6 span {
        color: var(--primary-theme-color);
    }

#groupTargetContainer h4 {
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    color: var(--primary-theme-color);
}

#groupTargetContainer p:not(empty) {
    line-height: 15px;
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
}

#groupTargetContainer th {
    background-color: var(--table-th-bg);
    padding: 6px 15px;
    white-space: nowrap;
    border: 1px solid var(--input-border-color);
    font-size: 14px;
    font-weight: 600;
    color: var(--th-text-color);
}

#groupTargetContainer td {
    color: var(--td-text-color);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--input-border-color);
    padding: 8px 15px;
}

.footer-line {
    text-align: center;
    padding: 4px 0 2px;
    font-size: 12px;
    color: #7A9AB5;
}

#tblTiers tr th,
#tblRewards tr th {
    white-space: nowrap;
}

#tblTiers tr th,
#tblRewards tr th,
#tblTiers tr td,
#tblRewards tr td {
    border-color: transparent;
    border-width: 15px;
    min-width: 100px;
}

#btnGenerateTradingName {
    position: absolute;
    right: 12px;
    padding: 5px 8px;
    BORDER: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.date-error {
    position: absolute;
}

.sub-title-ie {
    margin-bottom: 15px;
}

    .sub-title-ie p {
        font-size: 14px;
        color: var(--ie-muted);
        margin-top: 5px;
        margin-bottom: 0;
    }

.trading-contest .join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff6600 0%, #ff4400 50%, #ff2200 100%);
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff !important;
    letter-spacing: .5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(255,80,0,0.5), 0 0 0 1px rgba(255,120,0,0.3);
    transition: all 0.2s ease;
    text-decoration: none;
}

    .trading-contest .join-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 40px rgba(255,80,0,0.7), 0 0 0 1px rgba(255,120,0,0.5);
    }

    .trading-contest .join-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: shimmer 2.5s infinite;
    }

@keyframes shimmer {
    to {
        left: 160%;
    }
}

.viewBtn.btn-table {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}


.one-million-club-box {
    position: relative;
    padding: 25px;
    width: 95%;
    display: inline-block;
    margin: 0;
    margin-top: 40px;
    padding-top: 45px;
    background-color: var(--main-bg-color);
    border-radius: 10px;
}

.one-million-club-heading {
    display: inline-block;
    background: #00BDFF;
    padding: 10px 25px;
    position: absolute;
    top: -41px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 0px 0px;
    width: 300px;
    text-align: center;
}

.silver-club .one-million-club-heading {
    background: linear-gradient(135deg, #9d9d9d 0%, #b5b5b5 25%, #f2f2f2 50%, #b5b5b5 75%, #9d9d9d 100%);
}

.gold-club .one-million-club-heading {
    background: linear-gradient(135deg, #7a5c00 0%, #cfa12f 25%, #ffd777 50%, #cfa12f 75%, #7a5c00 100%);
}

    .silver-club .one-million-club-heading img, .gold-club .one-million-club-heading img {
        width: 155px;
    }

.not-eligible {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    background: #ffdede;
    border-radius: 0 0 15px 15px;
    padding: 8px 0;
    width: 300px;
}

    .not-eligible > span {
        font-size: 14px;
        display: inline-block;
        color: red !important;
        font-weight: 400;
        transform: scale(1);
        animation: blink .5s ease-in alternate-reverse infinite;
    }

@keyframes blink {
    0% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1.2);
    }
}

.text-center:has(> .trueLogo) {
    margin-left: -100px;
    margin-top: -20px;
}

.one-million-body .trueLogo {
    padding: 8px;
    border-radius: 500px;
    width: 150px;
    margin: auto;
    background: #fff;
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
}

.one-instruction {
    font-size: 13px;
    color: #4d4d4d;
    display: block;
    padding: 5px 15px;
    background: var(--light-color);
    margin: 15px 5px 0;
    border-radius: 6px;
}

.next-club .one-million-club-heading {
    width: unset;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 25px;
    top: -44px;
    justify-content: center;
}

    .next-club .one-million-club-heading h4 {
        margin: 0;
        line-height: 1;
        font-weight: 800;
        color: #15234f;
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: 0.5px;
    }

.one-million-club-heading img {
    width: 230px;
}

.club-details.condition-unfilled {
    border-radius: 10px;
    background: #fff3f3;
}

    .club-details.condition-unfilled span {
        color: #5b1818;
    }

    .club-details.condition-unfilled h3 {
        color: #831313;
    }

.box-data h3 {
    min-height: 30px;
}

.contest-timer ul li {
    margin-right: 25px;
    position: relative;
}

.box-data h3 p svg {
    width: 18px;
    height: 18px;
}

.grey-box {
    background-color: var(--grey-00);
}

.timer {
    font-size: 3.2rem;
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
}

.snap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--light-border-color);
    font-size: 13px;
}

    .snap-row strong, .snap-row span {
        color: var(--secondary-theme-color);
    }

    .snap-row:last-of-type {
        border-bottom: none;
    }

.contest-timer ul li .timer {
    position: absolute;
    top: -6px;
    left: 69px;
}

.contest-timer ul li > p {
    font-size: 14px;
    font-weight: 500;
    color: #ADA9C4;
    text-align: center;
    margin: 0;
    line-height: 25px;
}

.contest-timer p span:nth-child(2) {
    display: none;
}

.color-box {
    display: inline-block;
    height: 25px;
    width: 100px !important;
    border-radius: 50px;
    border: 1px solid #fff;
}

    .color-box.pink-black {
        background: linear-gradient(90deg, #ff0080, #ff56a2);
        box-shadow: 0 0 3px rgba(255, 0, 128, 0.25), 0 0 6px rgba(255, 0, 128, 0.18), 0 0 12px rgba(255, 77, 157, 0.15);
    }

    .color-box.pruple-black {
        background: linear-gradient(90deg, #b32dff, #8342ff);
        box-shadow: 0 0 3px rgba(176, 38, 255, 0.25), 0 0 6px rgba(176, 38, 255, 0.18), 0 0 12px rgba(95, 0, 255, 0.15);
    }

    .color-box.blue-black {
        background: linear-gradient(90deg, #0044cf, #006aff);
        box-shadow: 0 0 3px rgba(34, 132, 251, 0.25), 0 0 6px rgba(34, 132, 251, 0.18), 0 0 12px rgba(34, 132, 251, 0.15);
    }

    .color-box.green-black {
        background: linear-gradient(90deg, #0edd00, #0a9b00);
        box-shadow: 0 0 3px rgba(0, 230, 118, 0.25), 0 0 6px rgba(0, 230, 118, 0.18), 0 0 12px rgba(0, 200, 83, 0.15);
    }

    .color-box.golden-brown {
        background: linear-gradient(90deg, #cc7a00, #c9a62b);
        box-shadow: 0 0 3px rgba(255, 159, 0, 0.25), 0 0 6px rgba(255, 159, 0, 0.18), 0 0 12px rgba(255, 204, 51, 0.15);
    }

    .color-box.skyblue-black {
        background: linear-gradient(90deg, #00c2cc, #008fb3);
        box-shadow: 0 0 3px rgba(0, 255, 255, 0.25), 0 0 6px rgba(0, 255, 255, 0.18), 0 0 12px rgba(0, 170, 255, 0.15);
    }

    .color-box.red-black {
        background: linear-gradient(90deg, #ff2d2d, #a72222);
        box-shadow: 0 0 3px rgb(255 0 0 / 25%), 0 0 6px rgb(255 0 0 / 18%), 0 0 12px rgb(255 0 0 / 15%);
    }

    .color-box.magenta-black {
        background: linear-gradient(90deg, #ff00fc, #91088f);
        box-shadow: 0 0 3px rgb(255 0 255 / 25%), 0 0 6px rgb(255 0 255 / 18%), 0 0 12px rgb(255 0 255 / 15%);
    }

    .color-box.orange-black {
        background: linear-gradient(90deg, #ff6a00, #9f4200);
        box-shadow: 0 0 6px rgb(241 100 0 / 25%), 0 0 12px rgb(241 100 0 / 18%), 0 0 24px rgb(241 100 0 / 15%);
    }

    .color-box.multi-color {
        background: linear-gradient(135deg, #ff9426 0%, #d86b5f 20%, #8441ff 35%, #b83fb5 55%, #ff157e 75%, #35ffa2 100%);
        box-shadow: 0 0 6px rgb(241 100 0 / 25%), 0 0 12px rgb(241 100 0 / 18%), 0 0 24px rgb(241 100 0 / 15%);
    }

    .color-box.lime-green-black {
        background: linear-gradient(90deg, #9ec500, #637b00);
        box-shadow: 0 0 6px rgb(158 197 0 / 25%), 0 0 12px rgb(158 197 0 / 18%), 0 0 24px rgb(158 197 0 / 15%);
    }

.custom-select__item:has(.color-box) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offcanvas .details .custom-select:has(.color-box) .custom-select__button span:not(.color-box) {
    width: unset;
}

.offcanvas .details .custom-select:has(.color-box) .custom-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 33px !important;
}

.trueSpread-eligible-box {
    padding: 10px;
    background: var(--main-bg-color);
    position: relative;
    border-radius: 5px;
}

    .trueSpread-eligible-box p {
        font-size: 14px;
        color: var(--color-slate-700);
    }

span.not-eligible-badge {
    display: inline-block;
    font-size: 10px;
    padding: 5px 7px;
    border-radius: 50px;
    background: #ffdddd;
    color: #cd4646;
    line-height: 1;
    cursor: pointer;
}

.trueSpread-eligible-box .flex-column span {
    display: inline-block;
    background: var(--light-color);
    padding: 3px 7px;
    font-weight: 600;
    border-radius: 5px;
    font-size: 12px;
    color: var(--secondary-theme-color);
}

.ts-tooltip {
    position: absolute;
    top: 34px;
    right: 10px;
    background: #ffdddd;
    color: #b93636;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 14px;
    width: auto;
    z-index: 9999;
    border: 1px solid #e3bebe;
}

#trueSpreadBonus .box h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

.table-filter label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

.table-filter .custom-switch label {
    margin-bottom: 0;
}

.table-filter .btn-style {
    padding: 7px 12px 7px;
}

#winnersPodium {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#winnerBgImage {
    width: 100%;
    display: block;
}

#winner1 {
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    height: 47.4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
}

#winner2 {
    position: absolute;
    top: 38.3%;
    left: 26%;
    transform: translateX(-50%);
    text-align: center;
    height: 39.6%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
}

#winner3 {
    position: absolute;
    top: 38.5%;
    left: 74%;
    transform: translateX(-50%);
    text-align: center;
    height: 39.4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
}

.winner-name {
    font-size: clamp(12px, 2vw, 22px);
    font-weight: 800;
    text-transform: capitalize;
    line-height: 1.1;
    word-break: break-word;
}

.winner-prize {
    font-size: clamp(10px, 1.7vw, 20px);
    font-weight: 700;
    color: #54ff00;
}

#modalViewWinners .modal-lg {
    --bs-modal-width: 900px;
}

.force-desktop-download .winner-name {
    font-size: 22px !important;
}

.force-desktop-download .winner-prize {
    font-size: 20px !important;
}

.table-filter:has(#ddlClubBonusType27) .custom-select:has(select):not(:has(.dt-input)),
.table-filter:has(#ddlClubBonusType26) .custom-select:has(select):not(:has(.dt-input)) {
    min-width: 200px;
}

.dt-column-order:empty {
    position: absolute;
}

.custom-date-width .custom-select {
    min-width: auto !important;
}

.user-panel-main:has(.current-contest .owl-stage:empty) {
    display: none;
}

div.dt-button-info {
    background-color: var(--light-color);
    box-shadow: 0px 0px 10px 1px var(--dark-color);
}

    div.dt-button-info > div,
    div.dt-button-info h2 {
        color: var(--secondary-theme-color);
    }

.card-header,
.card {
    border-color: var(--light-border-color);
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: var(--light-color) !important;
}

.tox-tinymce {
    border: 1px solid var(--light-border-color) !important;
}

.tox {
    color: var(--secondary-theme-color) !important;
}

    .tox .tox-toolbar-overlord {
        background-color: var(--light-color) !important;
    }

    .tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary {
        background-color: var(--light-color) !important;
    }

    .tox .tox-tbtn {
        color: var(--dark-color) !important;
    }

        .tox .tox-tbtn--disabled, .tox .tox-tbtn--disabled:hover, .tox .tox-tbtn:disabled, .tox .tox-tbtn:disabled:hover {
            color: var(--dark-color) !important;
            opacity: 0.5;
        }

            .tox .tox-tbtn--disabled svg, .tox .tox-tbtn--disabled:hover svg, .tox .tox-tbtn:disabled svg, .tox .tox-tbtn:disabled:hover svg {
                fill: var(--dark-color) !important;
            }

        .tox .tox-tbtn svg {
            fill: var(--dark-color) !important;
        }

    .tox .tox-edit-area__iframe {
        background-color: var(--input-bg-color) !important;
    }

.details .tox .tox-edit-area__iframe {
    background-color: var(--light-color) !important;
}

.tox .tox-sidebar {
    background-color: var(--light-color) !important;
}

.tox .tox-statusbar {
    background-color: var(--light-color) !important;
    border-top: 1px solid var(--light-border-color) !important;
}

    .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount {
        color: var(--dark-color) !important;
    }

.tox .tox-statusbar__branding svg {
    fill: var(--dark-color) !important;
}

.tox .tox-statusbar__resize-handle svg {
    fill: var(--dark-color) !important;
}

#acmRateTicker strong {
    color: var(--status-completed-text);
}

#acmRateTicker {
    color: var(--secondary-theme-color);
}

.tab-bg-color {
    background-color: var(--grey-01);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0px 0;
    border-radius: 5px;
}

#btnGenPassword {
    position: absolute;
    right: 12px;
    padding: 5px 8px;
    BORDER: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px !important;
}

.assignIB-data .details,
#auditDetailBody .details,
#ampViewTxnBody .details,
#viewTxnBody .details,
#viewMgrBody .details {
    padding: 15px;
    font-weight: 600;
    color: var(--secondary-theme-color);
    font-size: 14px;
    word-break: break-all;
    height: 100%;
}

    .assignIB-data .details h5,
    #auditDetailBody .details h5,
    #ampViewTxnBody .details h5,
    #viewTxnBody .details h5,
    #viewMgrBody .details h5 {
        margin-bottom: 5px;
        font-size: 12px;
        color: var(--label-color);
    }
#viewTxnBody a.status {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#modalAddTransaction .custom-radio span {
    font-size: 12px;
    vertical-align: 1px;
    color: var(--dark-color);
}

#modalAddTransaction .custom-radio {
    width: calc(100% - 52%);
}

#btnGenerateReport {
    padding: 10px 20px 9px;
}

#rateCardsContainer .card-box {
    height: 100%;
}

#rateCardsContainer p {
    font-size: 12px;
    color: var(--dark-grey);
    margin-bottom: 8px;
}

#rateCardsContainer h6 {
    color: var(--dark-grey);
}

.club-members-list .details {
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

    .club-members-list .details h5 {
        font-size: 12px;
        font-weight: 500;
        color: var(--label-color);
        margin-bottom: 5px;
    }

#modalDetailBody .card-body span {
    font-size: 12px;
    color: var(--dark-grey);
}

#modalDetailBody .card-body small {
    font-size: 11px;
}

#modalDetailBody .card-body span.badge {
    font-size: 10px;
}


.table-filter .tab-bg .club-pill:before {
    position: absolute;
    content: "";
    height: 50%;
    background-color: var(--dark-color);
    width: 1px;
    right: -10px;
    opacity: .15;
}

.table-filter .tab-bg .club-pill {
    font-size: 14px;
    margin: 0 10px;
    font-weight: 600;
    border-radius: 5px;
    padding: 4.5px 11px;
    color: var(--dark-grey);
    display: flex;
    align-items: center;
    position: relative;
    transition: all .3s ease;
    white-space: nowrap;
    line-height: normal;
}

.table-filter .tab-bg .nav-pills {
    flex-wrap: nowrap;
    overflow: auto;
}

    .table-filter .tab-bg .nav-pills .club-pill:last-child:before {
        content: unset;
    }

    .table-filter .tab-bg .nav-pills .club-pill:last-child {
        margin-right: 0;
    }

    .table-filter .tab-bg .nav-pills .club-pill:first-child {
        margin-left: 0;
    }

.table-filter .tab-bg .club-pill:hover {
    background-color: var(--light-color);
    opacity: 1;
    color: var(--primary-theme-color);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}

.table-filter .tab-bg .active {
    background-color: var(--light-color);
    opacity: 1;
    color: var(--primary-theme-color);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}

.flatpickr-wrapper {
    position: unset;
    display: unset;
}
.grand-total .dashboard-section {
    background: var(--primary-light-theme-color);
}

    .grand-total .dashboard-section .card-box {
        background-color: var(--light-color);
    }

    .grand-total .dashboard-section .section-header h5 {
        color: var(--primary-theme-color);
    }

.preview-documents {
    text-align: center;
    margin: 10px 0 0;
    background: var(--primary-light-theme-color);
    padding: 10px;
}

#divReferrerFilterRow .custom-select .custom-select__search {
    width: 100%;
    margin: 5px 0px 9px;
}

#divReferrerFilterRow .custom-select {
    min-width: 220px;
}

#lblTxnCrBox.cr-active {
    color: var(--status-completed-text);
    border: 1px solid var(--status-completed-text);
    background-color: var(--status-completed-bg);
}

#lblTxnDrBox.dr-active {
    color: var(--status-rejected-border);
    border: 1px solid var(--status-rejected-border);
    background-color: var(--status-rejected-bg);
}

#lblTxnTransferBox.transfer-active {
    background-color: var(--status-cancelled-bg);
}

.radio-group:has(#lblTxnTransferBox) {
    flex-wrap: nowrap;
}

    .radio-group:has(#lblTxnTransferBox) .custom-radio span {
        display: block;
    }

.tab-bg:has(.nav:empty) {
    display: none;
}

#contestBannerName {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 35px;
    color: #fff;
    width: 100%;
    text-align: center;
    font-weight: 700;
}
    #contestBannerName.long-text {
        font-size: 27px;
        width: 80%;
        line-height: 30px;
    }

    #contestBannerName.short-text {
        font-size: 35px;
        top: 34px;
    }
@media(max-width:374px){
    #contestBannerName {
        top: 5%;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
}
@media(min-width:375px) and (max-width:768px) {
    #contestBannerName {
        top: 6%;
        font-size: 18px;
        width: 100%;
        text-align: center;
    }
}
#trueSpreadBonusContent .owl-nav .owl-prev {
    background: #ffffff;
    padding: 0px 9px;
    height: auto;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #777;
    line-height: normal;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
}
#trueSpreadBonusContent .owl-nav .owl-next {
    background: #ffffff;
    padding: 0px 9px;
    height: auto;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #777;
    line-height: normal;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}
#divReferrerFilterRow .custom-select .custom-select__search {
    width: 100%;
    margin: 5px 0px 9px;
}
#divReferrerFilterRow .custom-select {
    min-width: 220px;
}
#dccTrigger {
    box-shadow: none;
    background-color: var(--light-color);
    height: 45px;
}

.club-card-stripe {
    height: 4px;
    width: 100%;
}

.club-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.club-logo-wrap {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 6px;
}

    .club-logo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.club-logo-fallback {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
    text-align: center;
    padding: 4px;
    flex-shrink: 0;
    padding: 6px;
}


/* ── SVG Title Badge ────────────────────────────────────────── */
.club-svg-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ── Stats boxes ────────────────────────────────────────────── */
.club-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.stat-box {
    background: var(--grey-02);
    border-radius: 8px;
    padding: 10px 12px;
}

.stat-lbl {
    font-size: 10.5px;
    color: var(--dark-grey);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}

.stat-val {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

/* ── Status & member count row ──────────────────────────────── */
.club-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-count {
    font-size: 12px;
    color: var(--dark-color);
}

/* ── Empty state ─────────────────────────────────────────────── */
.clubs-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    color: var(--dark-color);
}

    .clubs-empty h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 6px;
    }

/* ── Form section heading ───────────────────────────────────── */


.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-hint {
    font-size: 11.5px;
    color: var(--light-grey-00);
    margin-top: 2px;
}

.form-err {
    font-size: 11.5px;
    color: var(--error-text);
    margin-top: 2px;
    display: none;
}

.form-control-club.is-invalid ~ .form-err {
    display: block;
}

/* ── Logo / Image Upload ────────────────────────────────────── */
.logo-upload-area {
    position: relative;
    width: 100%;
    height: 180px;
    border: 2px dashed var(--input-border-color);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--light-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-upload-area.dragover {
        border-color: var(--primary-theme-color);
        background: rgba(0,180,216,.06);
    }

    .logo-upload-area input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

.logo-preview-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.logo-preview-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--input-border-color);
    background: var(--light-color);
    display: none;
    padding: 7px;
}

.logo-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    font-size: 13px;
}

    .logo-upload-placeholder svg {
        opacity: .5;
    }

.logo-file-name {
    font-size: 12px;
    color: var(--primary-theme-color);
    font-weight: 600;
    margin-top: 4px;
    display: none;
}

.btn-remove-logo {
    font-size: 12px;
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: none;
}

/* ── SVG Title preview ──────────────────────────────────────── */
.svg-title-preview-wrap {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.svg-preview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    min-width: 80px;
    transition: all .2s;
}

/* ── Color Swatches ─────────────────────────────────────────── */
.color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 6px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}

    .color-swatch:hover {
        transform: scale(1.15);
    }

    .color-swatch.selected {
        border-color: var(--text-color, #1e293b);
        transform: scale(1.15);
    }

.color-swatch-custom {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px dashed #cbd5e1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
    color: #94a3b8;
    flex-shrink: 0;
}

    .color-swatch-custom:hover {
        border-color: var(--primary-theme-color);
        transform: scale(1.15);
        color: var(--primary-theme-color);
    }

    .color-swatch-custom input[type="color"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        border: none;
        padding: 0;
    }

/* ── Gradient Builder — compact 2-row layout ──────────────── */
.gradient-builder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.grad-color-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.grad-color-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--light-border-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .15s, border-color .15s;
    flex-shrink: 0;
    width: 100%;
    max-width: 56px;
}

    .grad-color-thumb:hover {
        transform: scale(1.05);
        border-color: var(--primary-theme-color);
    }

    .grad-color-thumb input[type="color"] {
        position: absolute;
        inset: -4px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        opacity: 0;
        cursor: pointer;
        border: none;
        padding: 0;
    }

.grad-hex-mini {
    width: 100%;
    max-width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--input-border-color);
    border-radius: 6px;
    font-size: 11px;
    font-family: monospace;
    text-align: center;
    background: var(--light-color);
    color: #444050;
    outline: none;
    transition: border-color .2s;
}

    .grad-hex-mini:focus {
        border-color: var(--primary-theme-color);
    }

/* Mid color "Use" toggle — pill style */
.grad-mid-use-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--light-border-color);
    background: var(--body-bg, #f0f4f8);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--dark-color);
    transition: all .15s;
    user-select: none;
    margin-top: 2px;
}

    .grad-mid-use-toggle.active {
        background: var(--primary-theme-color, #00b4d8);
        border-color: var(--primary-theme-color, #00b4d8);
        color: #fff;
    }

    .grad-mid-use-toggle input {
        display: none;
    }

/* Direction grid — centered in its column */
.grad-dir-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.grad-direction-grid {
    display: grid;
    grid-template-columns: repeat(3, 24px);
    grid-template-rows: repeat(3, 24px);
    gap: 2px;
    flex-shrink: 0;
}

.grad-dir-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color);
    background: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: var(--secondary-theme-color);
    transition: all .15s;
    padding: 0;
}

    .grad-dir-btn:hover {
        background-color: transparent;
        color: var(--primary-theme-color);
        border-color: var(--primary-theme-color);
    }

    .grad-dir-btn.active-dir {
        background: var(--primary-theme-color);
        color: #fff;
        border-color: var(--primary-theme-color);
    }

    .grad-dir-btn.dir-center {
        background: transparent;
        border-color: transparent;
        pointer-events: none;
        font-size: 7px;
        color: #cbd5e1;
    }

/* Preview bar — full width below the 3-col row */
.gradient-bar-preview {
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--light-border-color);
    margin-bottom: 10px;
    transition: background .2s;
    width: 100%;
}

/* Remove old grad-hex-row — hex inputs are now inside each col */
.grad-hex-row {
    display: none;
}

/* ── Toggle Switch ──────────────────────────────────────────── */
.club-toggle-sw {
    position: relative;
    display: inline-block;
    width: 39px;
    height: 21px;
}

    .club-toggle-sw input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.club-slider {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 24px;
    cursor: pointer;
    transition: background .25s;
}

    .club-slider::before {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform .25s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.club-toggle-sw input:checked + .club-slider {
    background: var(--primary-theme-color);
}

    .club-toggle-sw input:checked + .club-slider::before {
        transform: translateX(18px);
    }

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



/* ════════════════════════════════════════════════════════════
        DETAIL DRAWER
        ════════════════════════════════════════════════════════════ */



#detailDrawer h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-theme-color);
    margin-bottom: 10px;
}

#detailDrawer .details {
    padding: 10px;
}

.detail-lbl {
    font-size: 12px;
    font-weight: 500;
    color: var(--label-color);
    margin-bottom: 5px;
}

.detail-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary-theme-color);
}

/* ── Toast ───────────────────────────────────────────────────── */
.clubs-toasts {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.club-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    min-width: 250px;
    transform: translateX(120%);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: all;
}

    .club-toast.show {
        transform: translateX(0);
    }

    .club-toast .t-ico-s {
        color: #4ade80;
    }

    .club-toast .t-ico-e {
        color: #f87171;
    }

/* ── Spinner ────────────────────────────────────────────────── */
.spin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.3);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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





.audit-who {
    font-size: 12px;
    color: var(--label-color);
}

.audit-when {
    font-size: 11.5px;
    color: var(--label-color);
}

.audit-diff {
    margin-top: 6px;
    font-size: 11.5px;
    background: var(--light-color);
    border-radius: 6px;
    border: 1px solid var(--light-border-color-001);
    overflow: hidden;
}

.diff-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--light-border-color-001);
    font-size: 11.5px;
}

    .diff-row:last-child {
        border-bottom: none;
    }
    .diff-row:has(> div:nth-child(2):last-child) {
        grid-template-columns: 120px 1fr;
    }
.diff-field {
    padding: 5px 8px;
    color: var(--dark-color);
    font-weight: 600;
    border-right: 1px solid var(--light-border-color-001);
}

.diff-old {
    padding: 5px 8px;
    color: var(--status-rejected-text);
    background: var(--status-rejected-bg);
    border-right: 1px solid var(--light-border-color-001);
    word-break: break-all;
}

.diff-new {
    padding: 5px 8px;
    color: var(--status-completed-text);
    background: var(--status-completed-bg);
    word-break: break-all;
}

.diff-header {
    background: var(--grey-02);
}

    .diff-header .diff-field,
    .diff-header .diff-old,
    .diff-header .diff-new {
        color: var(--dark-color);
        font-weight: 700;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .4px;
        background: transparent;
    }

.audit-empty {
    text-align: center;
    padding: 40px 0;
    color: #94a3b8;
}

    .audit-empty p {
        font-size: 13px;
        margin-top: 6px;
    }

/* ── SVG Text Color Picker ──────────────────────────────────── */
.svg-text-color-row,
.svg-bg-style-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}


.svg-tc-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.svg-tc-swatch {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    position: relative;
    overflow: hidden;
}

    .svg-tc-swatch:hover {
        transform: scale(1.15);
        box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }

    .svg-tc-swatch.active-tc {
        border-color: var(--text-color, #1e293b);
        transform: scale(1.15);
        box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }

.svg-tc-auto {
    background: linear-gradient(135deg, #8b5cf6 50%, #00b4d8 50%);
    color: #fff;
}

.svg-tc-custom {
    background: transparent;
    color: #94a3b8;
}

    .svg-tc-custom input[type="color"] {
        position: absolute;
        inset: -4px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        opacity: 0;
        cursor: pointer;
        border: none;
        padding: 0;
    }

    .svg-tc-custom:hover {
        border-color: var(--primary-theme-color) !important;
        color: var(--primary-theme-color);
    }

/* ── SVG Badge Background Buttons ───────────────────────────── */
.svg-bg-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.svg-bg-btn {
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: var(--grey-02);
    color: var(--dark-grey);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

    .svg-bg-btn:hover,
    .svg-bg-btn.active-bg {
        color: var(--primary-theme-color);
        border-color: var(--primary-theme-color);
    }

/* ── Gradient Stop Position Selector ───────────────────────── */
.grad-stop-track-wrap {
    margin-top: 12px;
}

.grad-stop-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}


.grad-stop-reset {
    font-size: 11px;
    color: var(--primary-theme-color, #00b4d8);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    transition: opacity .15s;
}

    .grad-stop-reset:hover {
        opacity: .7;
    }

/* The visual gradient track */
.grad-stop-track {
    position: relative;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--light-border-color);
    cursor: crosshair;
    user-select: none;
    overflow: visible;
}

/* Draggable handle */
.grad-stop-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.28), 0 0 0 1.5px rgba(0,0,0,.12);
    cursor: grab;
    transition: box-shadow .15s, transform .1s;
    z-index: 3;
    touch-action: none;
}

    .grad-stop-handle:hover,
    .grad-stop-handle.dragging {
        box-shadow: 0 3px 14px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.6);
        transform: translate(-50%, -50%) scale(1.18);
        cursor: grabbing;
    }

/* Midpoint diamond handle */
.grad-mid-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #94a3b8;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    cursor: grab;
    z-index: 2;
    transition: border-color .15s, transform .1s;
    touch-action: none;
}

    .grad-mid-handle:hover,
    .grad-mid-handle.dragging {
        border-color: var(--primary-theme-color, #00b4d8);
        transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
        cursor: grabbing;
    }

/* Position readout pill beneath each handle */
.grad-stop-pill {
    position: absolute;
    top: calc(100% + 7px);
    transform: translateX(-50%);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 4;
}

.grad-stop-track:hover .grad-stop-pill,
.grad-stop-handle.dragging ~ .grad-stop-pill,
.grad-mid-handle.dragging ~ .grad-stop-pill {
    opacity: 1;
}

/* Always show pills while dragging */
.grad-stop-pill.always-show {
    opacity: 1 !important;
}


/* Color type hint badges */
.grad-pos-hint {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    align-items: center;
}

.grad-pos-hint-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    flex-shrink: 0;
}

.dcc-empty-msg {
    text-align: center;
    display: none;
}
#lblTxnCrBox.cr-active {
    color: var(--status-completed-text);
    border: 1px solid var(--status-completed-text);
    background-color: var(--status-completed-bg);
}
#lblTxnDrBox.dr-active {
    color: var(--status-rejected-border);
    border: 1px solid var(--status-rejected-border);
    background-color: var(--status-rejected-bg);
}
#lblTxnTransferBox.transfer-active {
    background-color: var(--status-cancelled-bg);
}
.radio-group:has(#lblTxnTransferBox) {
    flex-wrap: nowrap;
}
    .radio-group:has(#lblTxnTransferBox) .custom-radio span{
        display: block;
    }
.tab-bg:has(.nav:empty) {
    display: none;
}
@media(max-width:767px) {
    .leaderboard-boxed {
        flex-direction: column;
    }

    .leader-extra {
        flex-wrap: wrap;
        gap: 5px;
    }

    .pofit-loss {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .delete-account-btn,
    .view-trades-btn {
        height: 30px;
        width: 30px;
    }

        .delete-account-btn svg,
        .view-trades-btn svg {
            height: 16px;
            width: 16px;
        }

    .rank-username h6 {
        font-size: 13px;
    }
    .rank-badge{
        text-align:left;
    }
    .leaderboard-pagination{
        justify-content:center;
    }
    .rank-username h6 {
        font-size: 14px;
    }
    }

@media(min-width:768px) and (max-width:1199px){
    .leader-extra {
        flex-wrap: wrap;
        gap: 5px;
    }
}
#modalRejoinHistory .download-btn {
    display: none;
}