.reg-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--grey50);
}

.reg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--white);
    border-bottom: 1px solid var(--grey200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.reg-topbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.reg-topbar .logo .logo-ic img {
    width: 28px;
    height: 28px;
}

.reg-topbar .logo .logo-txt {
    font-size: 18px;
    font-weight: 700;
    color: var(--grey900);
}

.reg-stepper {
    display: flex;
    align-items: center;
    gap: 0;
}

.reg-stepper-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--grey400);
    position: relative;
    white-space: nowrap;
}

.reg-stepper-item .step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--grey100);
    transition: all 0.3s ease;
}

.reg-stepper-item .step-icon img,
.reg-stepper-item .step-icon svg {
    width: 16px;
    height: 16px;
}

.reg-stepper-item .step-icon svg path {
    stroke: var(--grey400);
}

.reg-stepper-item:not(.active):not(.completed) .step-icon img {
    filter: brightness(0) saturate(100%) invert(70%) sepia(8%) saturate(286%) hue-rotate(185deg) brightness(96%) contrast(89%);
}

.reg-stepper-item.active .step-icon {
    background: var(--brand50);
    border: 1px solid var(--brand200);
}

.reg-stepper-item.active .step-icon svg path {
    stroke: var(--brand600);
}

.reg-stepper-item.active {
    color: var(--brand700);
    font-weight: 600;
}

.reg-stepper-item.completed .step-icon {
    background: var(--brand100);
}

.reg-stepper-item.completed .step-icon svg path {
    stroke: var(--brand700);
}

.reg-stepper-item.completed {
    color: var(--brand700);
}

.reg-stepper-connector {
    width: 80px;
    height: 2px;
    background: var(--grey200);
    flex-shrink: 0;
    position: relative;
}

.reg-stepper-connector.completed {
    background: var(--brand300);
}

.reg-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    gap: 28px;
    flex: 1;
}

.reg-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 660px;
}

.reg-header-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--brand600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reg-header-icon img,
.reg-header-icon svg {
    width: 32px;
    height: 32px;
}

.reg-header-icon img {
    filter: brightness(0) invert(1);
}

.reg-header-icon svg path {
    stroke: var(--white);
}

.reg-header-text h1 {
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--grey800);
    margin: 0;
}

.reg-header-text p {
    font-family: var(--FontTheme);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey500);
    margin: 4px 0 0;
}

.reg-card {
    width: 100%;
    max-width: 660px;
    background: var(--white);
    box-shadow: 0px 4px 8px -2px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.reg-card-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 8px;
    border-bottom: 1px solid var(--grey200);
}

.reg-card-header h2 {
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--brand700);
    margin: 0;
}

.reg-card-body {
    padding: 20px 20px 28px 20px;
}

.reg-form-stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.reg-input-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.reg-input-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    position: relative;
}

.reg-input-field.fixed-width {
    flex: 0 0 auto;
    width: 298px;
}

.reg-input-field.w-356 {
    flex: 0 0 auto;
    width: 356px;
}

.reg-input-field .reg-label {
    font-family: var(--FontTheme);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey700);
    display: block;
}

.reg-input-field .reg-label .required {
    color: var(--error500);
}

.reg-input-field .reg-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.reg-input-field .reg-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    font-family: var(--FontTheme);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey900);
    background: var(--white);
    border: 1px solid var(--grey300);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reg-input-field .reg-input:focus {
    border-color: var(--grey300);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.reg-input-field .reg-input::placeholder {
    color: var(--grey400);
}

.reg-input-field .reg-input.has-icon-left {
    padding-left: 42px;
}

.reg-input-field .reg-input.has-icon-right {
    padding-right: 42px;
}

.reg-input-field .reg-input-icon-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--grey500);
}

.reg-input-field .reg-input-icon-left svg {
    width: 20px;
    height: 20px;
}

.reg-input-field .reg-input-icon-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--grey500);
    background: none;
    border: none;
    padding: 0;
}

.reg-input-field .reg-input-icon-right svg {
    width: 16px;
    height: 16px;
}

.reg-input-field .reg-input-icon-right:hover svg path {
    stroke: var(--grey700);
}

/* Error state - follows same pattern as style.css .form-control.is-invalid */
.reg-input.is-invalid,
.reg-input-field .reg-input.is-invalid {
    border-color: var(--error300) !important;
    background-image: url(../img/alert-circle-error-ic16x.svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.reg-input-field .reg-input.is-invalid.has-icon-right {
    background-image: url(../img/alert-circle-error-ic16x.svg);
    background-position: right 14px center;
    padding-right: 66px;
}

.reg-input-field .reg-input.is-invalid.has-icon-right ~ .reg-input-icon-right {
    right: 42px;
}

.reg-input-field .reg-input.is-invalid:focus {
    border-color: var(--error300) !important;
}

.reg-input-field .invalid-feedback,
.reg-checkbox-wrapper .invalid-feedback {
    display: block;
    font-size: 14px;
    color: var(--error700);
    line-height: 1.1;
}

.reg-verify-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    height: 40px;
    background: var(--brand50);
    border: 1px solid var(--brand50);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--brand700);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 28px;
}

.reg-verify-btn:hover {
    background: var(--brand100);
    border-color: var(--brand100);
}

.reg-verify-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.reg-verify-btn.verified {
    background: var(--success50);
    border-color: var(--success50);
    color: var(--success700);
    pointer-events: none;
}

.reg-checkbox-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.reg-checkbox-wrapper input[type="checkbox"].is-invalid {
    border-color: var(--error300);
}

.reg-checkbox-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--white);
    border: 1px solid var(--grey300);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.reg-checkbox-wrapper input[type="checkbox"]:checked {
    background: var(--brand600);
    border-color: var(--brand600);
}

.reg-checkbox-wrapper input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg) translateY(-1px);
}

.reg-checkbox-wrapper input[type="checkbox"]:focus {
    border-color: var(--grey300);
}

.reg-checkbox-wrapper > label[for="termsCheckbox"] {
    font-family: var(--FontTheme);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey700);
    cursor: pointer;
}

.reg-checkbox-wrapper > label[for="termsCheckbox"] a {
    color: var(--brand700);
    text-decoration: underline;
    font-weight: 500;
}

.reg-checkbox-wrapper > label[for="termsCheckbox"] a:hover {
    color: var(--brand500);
}

.reg-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 24px;
    background: var(--white);
    border-top: 1px solid var(--grey200);
    gap: 16px;
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.reg-footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey600);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.reg-footer-link:hover {
    background: var(--grey100);
    color: var(--grey700);
}

.reg-footer-link svg {
    width: 16px;
    height: 16px;
}

.reg-proceed-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--brand600);
    border: 1px solid var(--brand600);
    border-radius: 8px;
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.reg-proceed-btn:hover {
    background: var(--brand700);
    border-color: var(--brand700);
}

.reg-proceed-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

.reg-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    width: 100%;
    max-width: 660px;
}

.reg-alert.reg-alert-error {
    background: var(--error50);
    border: 1px solid var(--error200);
    color: var(--error700);
}

.reg-alert.reg-alert-success {
    background: var(--success50);
    border: 1px solid var(--success200);
    color: var(--success700);
}

/* ============================= Responsive ============================= */
@media (max-width: 768px) {
    .reg-topbar {
        padding: 10px 16px;
    }

    .reg-stepper {
        display: none;
    }

    .reg-body {
        padding: 20px 16px;
        gap: 20px;
    }

    .reg-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .reg-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    .reg-header-icon svg {
        width: 24px;
        height: 24px;
    }

    .reg-header-text h1 {
        font-size: 20px;
        line-height: 28px;
    }

    .reg-input-row {
        flex-direction: column;
        gap: 20px;
    }

    .reg-verify-btn {
        margin-top: 0;
        align-self: flex-end;
    }

    .reg-input-field.fixed-width {
        width: 100%;
    }

    .reg-card {
        border-radius: 12px;
    }

    .reg-card-body {
        padding: 16px;
    }

    .reg-card-header {
        padding: 12px 16px;
    }

    .reg-footer {
        padding: 12px 16px;
    }

    .reg-checkbox-wrapper > label[for="termsCheckbox"] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .reg-header-text h1 {
        font-size: 18px;
        line-height: 26px;
    }

    .reg-input-field .reg-input {
        font-size: 14px;
        height: 40px;
    }

    .reg-verify-btn {
        font-size: 13px;
        padding: 8px 12px;
        height: 36px;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

.modal-backdrop.show {
    opacity: 1;
    background: rgba(16, 24, 40, 0.4);
    backdrop-filter: blur(8px);
}

.otp-modal-dialog {
    max-width: 560px;
    margin: 64px auto;
}

.otp-modal-content {
    background: var(--white);
    box-shadow: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03);
    border-radius: 12px;
    padding: 24px;
    border: none;
    gap: 32px;
}

.otp-modal-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: none;
    padding: 0;
}

.otp-modal-title {
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: var(--grey900);
    margin: 0;
}

.otp-modal-subtitle {
    font-family: var(--FontTheme);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey600);
    margin: 0;
}

.otp-modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.otp-input-group {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
}

.otp-input {
    flex: 1;
    min-width: 0;
    height: 60px;
    border: 1px solid var(--grey300);
    border-radius: 12px;
    font-family: var(--FontTheme);
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: var(--grey900);
    background: var(--white);
    outline: none;
    transition: all 0.2s;
    padding: 0;
}

.otp-input:focus {
    border-color: var(--brand300);
}

.otp-resend {
    font-family: var(--FontTheme);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--grey600);
}

.otp-resend a {
    font-weight: 600;
    color: var(--brand600);
    text-decoration: none;
}

.otp-resend a:hover {
    color: var(--brand700);
    text-decoration: underline;
}

.otp-modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    border: none;
}

.otp-btn-cancel,
.otp-btn-verify {
    height: 44px;
    border-radius: 8px;
    font-family: var(--FontTheme);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
}

.otp-btn-cancel {
    width: 90px;
    background: var(--white);
    border: 1px solid var(--grey300);
    color: var(--grey700);
}

.otp-btn-cancel:hover {
    background: var(--grey50);
}

.otp-btn-verify {
    width: 128px;
    background: var(--brand600);
    border: 1px solid var(--brand600);
    color: var(--white);
}

.otp-btn-verify:hover {
    background: var(--brand700);
    border-color: var(--brand700);
}

@media (max-width: 480px) {
    .otp-input-group {
        gap: 12px;
    }

    .otp-input {
        height: 50px;
        font-size: 14px;
    }

    .otp-modal-dialog {
        margin: 1rem;
    }
}

/* Registration Success Page Styles */

.main-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 20px;
    width: 100%;
    min-height: calc(100vh - 80px);
    /* Fallback accounting for topbar */
}

.success-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    gap: 32px;
    width: 100%;
    max-width: 600px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px -2px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
    border-radius: 16px;
    text-align: center;
}

.illustration-group {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.text-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #252B37;
}

.subtitle {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #717680;
    max-width: 520px;
}

.btn-explore {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    gap: 8px;
    background: #7F56D9;
    border: 1px solid #7F56D9;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.btn-explore:hover {
    background: #6941C6;
    border-color: #6941C6;
    color: #FFFFFF;
    text-decoration: none;
}

.otp-feedback {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
}

.otp-feedback-error {
    color: #b91c1c;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
}

.otp-feedback-success {
    color: #15803d;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.iti {
    width: 100%;
    display: block;
}

.mobile-input-container .reg-input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #D5D7DA;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
}

.reg-input-field .iti .reg-input {
    padding-left: 124px !important;
}

.iti__country-container,
.iti__selected-country,
.iti__flag-container {
    border-right: 1px solid #D5D7DA !important;
}

.iti__selected-country,
.iti__selected-flag {
    background-color: transparent !important;
    padding: 0 10px 0 14px !important;
}

.iti__flag {
    height: var(--iti-flag-width, 20px) !important;
    border-radius: 50% !important;
    background-size: var(--iti-flag-sprite-width, 3904px) var(--iti-flag-width, 20px) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

.iti__arrow {
    width: 12px !important;
    height: 12px !important;
    border: none !important;
    background-image: url('../img/arrow-down-ic12x.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.iti__selected-country[aria-expanded="true"] .iti__arrow,
.iti__selected-flag[aria-expanded="true"] .iti__arrow,
.iti__arrow--up {
    transform: rotate(180deg) !important;
    border: none !important;
}

.iti__selected-country:hover,
.iti__selected-country:focus,
.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: #F9FAFB !important;
}

.iti__dropdown-content {
    border-radius: 8px;
}

:root{
    --grey25:#FDFDFD;
    --grey50:#FAFAFA;
    --grey100:#F5F5F5;
    --grey200:#E9EAEB;
    --grey300:#D5D7DA;
    --grey400:#A4A7AE;
    --grey500:#717680;
    --grey600:#535862;
    --grey700:#414651;
    --grey800:#252B37;
    --grey900:#101828;
    --brand25:#FCFAFF;
    --brand50:#F9F5FF;
    --brand100:#F4EBFF;
    --brand200:#E9D7FE;
    --brand300:#D6BBFB;
    --brand400:#B692F6;
    --brand500:#9E77ED;
    --brand600:#7F56D9;
    --brand700:#6941C6;
    --brand800:#53389E;
    --brand900:#42307D;
    --error25:#FFFBFA;
    --error50:#FEF3F2;
    --error100:#FEE4E2;
    --error200:#FECDCA;
    --error300:#FDA29B;
    --error400:#F97066;
    --error500:#F97066;
    --error600:#D92D20;
    --error700:#B42318;
    --error800:#912018;
    --error900:#7A271A;
    --warning25:#FFFCF5;
    --warning50:#FFFAEB;
    --warning100:#FEF0C7;
    --warning200:#FEF0C7;
    --warning300:#FEC84B;
    --warning400:#FDB022;
    --warning500:#F79009;
    --warning600:#DC6803;
    --warning700:#B54708;
    --warning800:#93370D;
    --warning900:#7A2E0E;
    --success25:#F6FEF9;
    --success50:#ECFDF3;
    --success100:#D1FADF;
    --success200:#A6F4C5;
    --success300:#6CE9A6;
    --success400:#32D583;
    --success500:#12B76A;
    --success600:#039855;
    --success700:#027A48;
    --success800:#05603A;
    --success900:#054F31;
    --blueGray25:#FCFCFD;
    --blueGray50:#F8F9FC;
    --blueGray100:#EAECF5;
    --blueGray200:#D5D9EB;
    --blueGray300:#AFB5D9;
    --blueGray400:#717BBC;
    --blueGray500:#4E5BA6;
    --blueGray600:#3E4784;
    --blueGray700:#363F72;
    --blueGray800:#293056;
    --blueGray900:#101323;
    --blueLight25:#F5FBFF;
    --blueLight50:#F0F9FF;
    --blueLight100:#E0F2FE;
    --blueLight200:#B9E6FE;
    --blueLight300:#7CD4FD;
    --blueLight400:#36BFFA;
    --blueLight500:#0BA5EC;
    --blueLight600:#0086C9;
    --blueLight700:#026AA2;
    --blueLight800:#065986;
    --blueLight900:#0B4A6F;
    --blue25:#F5FAFF;
    --blue50:#EFF8FF;
    --blue100:#D1E9FF;
    --blue200:#B2DDFF;
    --blue300:#84CAFF;
    --blue400:#53B1FD;
    --blue500:#2E90FA;
    --blue600:#1570EF;
    --blue700:#175CD3;
    --blue800:#1849A9;
    --blue900:#194185;
    --indigo25:#F5F8FF;
    --indigo50:#EEF4FF;
    --indigo100:#E0EAFF;
    --indigo200:#C7D7FE;
    --indigo300:#A4BCFD;
    --indigo400:#8098F9;
    --indigo500:#6172F3;
    --indigo600:#444CE7;
    --indigo700:#3538CD;
    --indigo800:#2D31A6;
    --indigo900:#2D3282;
    --purple25:#FAFAFF;
    --purple50:#F4F3FF;
    --purple100:#EBE9FE;
    --purple200:#D9D6FE;
    --purple300:#BDB4FE;
    --purple400:#9B8AFB;
    --purple500:#7A5AF8;
    --purple600:#6938EF;
    --purple700:#5925DC;
    --purple800:#4A1FB8;
    --purple900:#3E1C96;
    --pink25:#FEF6FB;
    --pink50:#FDF2FA;
    --pink100:#FCE7F6;
    --pink200:#FCCEEE;
    --pink300:#FAA7E0;
    --pink400:#F670C7;
    --pink500:#EE46BC;
    --pink600:#DD2590;
    --pink700:#C11574;
    --pink800:#9E165F;
    --pink900:#851651;
    --rose25:#FFF5F6;
    --rose50:#FFF1F3;
    --rose100:#FFE4E8;
    --rose200:#FECDD6;
    --rose300:#FEA3B4;
    --rose400:#FD6F8E;
    --rose500:#F63D68;
    --rose600:#E31B54;
    --rose700:#C01048;
    --rose800:#A11043;
    --rose900:#89123E;
    --orange25:#FFFAF5;
    --orange50:#FFF6ED;
    --orange100:#FFEAD5;
    --orange200:#FDDCAB;
    --orange300:#FEB273;
    --orange400:#FD853A;
    --orange500:#FB6514;
    --orange600:#EC4A0A;
    --orange700:#C4320A;
    --orange800:#9C2A10;
    --orange900:#7E2410;
    --actionHover:#9E9E9E14;
    --borderColor:#9E9E9E52;
    --white:#ffffff;
    --black:#000000;
    --FontTheme: "Inter", sans-serif;
}

html, body { min-height: 100%; min-height:100vh;}
.layout-boxed html, .layout-boxed body { height: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; font-weight: 400; font-family: var(--FontTheme); color: var(--grey600);}
a, button{ outline:none !important; text-decoration:none; transition:all .3s ease-in-out;}
a:hover, a:focus, select:focus, button:focus, .btn:focus, btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0; }
img { border:none; vertical-align:middle; max-width:100%;}
li { list-style:none; }
h1, h2, h3, h4, h5, h6 { outline:none !important; color: var(--grey900);}
input, select, textarea, button { outline:none !important; }


/*============================= Theme Components =============================*/
.mt-30{ margin-top: 30px !important;}
.mb-20{ margin-bottom: 20px !important;}
.mb-30{ margin-bottom: 30px !important;}

.img-white{ filter: brightness(0) invert(1);}

hr.line{ width: 100%; height: 1px; background: var(--grey200); opacity: 1; display: block; border: none; margin: 20px 0;}
.or{ margin: 0 0 20px; padding: 0; font-size: 14px; line-height: 20px; color: var(--grey500); position: relative; text-align: center; text-transform: uppercase;}
.or::after{ content: ""; width: 100%; height: 1px; border-top: 2px dotted var(--grey200); position: absolute; top: 0; bottom: 0; left: 0; margin: auto;}
.or span{ background: var(--white); z-index: 1; display: inline-block; padding: 0 8px; position: relative;}
.vline-divider{ width: 2px; height: 32px; background: var(--grey200);}
.vline-divider.w1{ width: 1px;}
.flex-box{ display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.asterisk-red-sign{ color: var(--error500);}

/* Colors Class */
.text-dark{ color: var(--grey900) !important;}
.text-success{ color: var(--success700) !important;}
.text-error{ color: var(--error500) !important;}

/* Buttons */
.btn-group{ display: flex; gap:5px 12px; flex-wrap: wrap;}
.btn-theme{ margin: 0; padding: 9px 18px; font-size: 16px; line-height: 24px; font-weight: 600; border-radius: 8px; border: 1px solid var(--grey300); background: var(--white); display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--grey700); transition:all .3s ease-in-out;}
.btn-theme.btn-transy:not(:hover){ background: transparent;}
.btn-theme img{ transition:all .3s ease-in-out;}
.btn-theme:not(.sm,.md,.xs) img{ width: 20px; height: 20px;}
.btn-theme.border-0:not(:disabled):hover{ background: var(--grey50);}
.btn-theme:not(:disabled):hover{ background: var(--grey50); border-color: var(--grey300); color: var(--grey700);}
.btn-theme.btn-shadow{ box-shadow: 0px 1px 2px 0px #0A0D120D !important;}
.btn-theme.border-transparent{ border-color: transparent !important; color: var(--grey600);}
.btn-theme.border-transparent:not(:disabled):hover{ background: var(--grey200); color: var(--grey700);}

.btn-theme.btn-dark.fill{ box-shadow: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D; background: var(--grey900); border-color: var(--grey900); color: var(--white);}
.btn-theme.btn-dark.fill:not(:disabled):hover{ background: var(--greyDark); border-color: var(--greyDark); color: var(--white);}

.btn-theme.btn-brand{ border-color: var(--brand600); color: var(--brand600);}
.btn-theme.btn-brand:not(:disabled):hover{ background: var(--brand700); border-color: var(--brand700); color: var(--white);}
.btn-theme.btn-brand.fill{ background: var(--brand600); border-color: var(--brand600); color: var(--white);}
.btn-theme.btn-brand.fill:not(:disabled):hover{ background: var(--brand700); border-color: var(--brand700); color: var(--white);}
.btn-theme.btn-brandlightest{ border-color: transparent; color: var(--brand700); background: var(--brand50);}
.btn-theme.btn-brandlightest:not(:disabled):hover{ border-color: transparent; color: var(--brand700); background: var(--brand100);}

.btn-theme.btn-error{ border-color: var(--error300); color: var(--error700);}
.btn-theme.btn-error:not(:disabled):hover{ background: var(--error50); border-color: var(--error300); color: var(--error700);}
.btn-theme.btn-error.fill{ background: var(--error600); border-color: var(--error600); color: var(--white);}
.btn-theme.btn-error.fill img{ filter: brightness(0) invert(1);}
.btn-theme.btn-error.fill:not(:disabled):hover{ background: var(--error700); border-color: var(--error700); color: var(--white);}
.btn-theme.btn-error8.fill{ box-shadow: none; background: #F0443814; border-color: transparent; color: var(--errorDark);}
.btn-theme.btn-error8.fill:not(:disabled):hover{ background: var(--error12); border-color: transparent; color: var(--errorDark);}

.btn-theme.btn-grey.fill{ box-shadow: none; background: var(--greyLighter); border-color: transparent; color: var(--grey900);}
.btn-theme.btn-grey.fill:not(:disabled):hover{ background: var(--greyLightest); border-color: transparent; color: var(--grey900);}

.btn-theme.btn-primary-trancy{ box-shadow: none; background: transparent; border-color: transparent; color: var(--grey900);}
.btn-theme.btn-primary-trancy:not(:disabled) img{ filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}
.btn-theme.btn-primary-trancy:not(:disabled):hover{ background: var(--greyLightest); border-color: transparent; color: var(--grey900);}

.btn-theme.btn-success.fill{ box-shadow: none; background: var(--success); border-color: transparent; color: var(--white);}
.btn-theme.btn-success.fill:not(:disabled):hover{ background: var(--successDark); border-color: transparent; color: var(--white);}

.btn-theme.btn-warning.fill{ box-shadow: none; background: var(--warning); border-color: transparent; color: var(--white);}
.btn-theme.btn-warning.fill:not(:disabled):hover{ background: var(--warningDark); border-color: transparent; color: var(--white);}

.btn-theme.lg{ padding: 9px 16px; font-size: 14px; line-height: 20px;}
.btn-theme.md{ padding: 7px 14px; font-size: 14px; line-height: 20px;}
.btn-theme.sm{ padding: 4px 8px; font-size: 12px; line-height: 20px;}
.btn-theme.xs{ padding: 3px 12px; font-size: 14px; line-height: 20px; font-weight: 500;}

.btn-theme:disabled, .btn-theme:disabled:hover, .btn-theme:disabled:focus, .btn-theme:disabled:active{ box-shadow: none !important; opacity: 0.4;}


/* Icon Button 36x */
.ic-btn{ padding: 6px; border-radius: 8px; background-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 28px; min-height: 28px;}
.ic-btn.disabled{ opacity: 0.5; pointer-events: none;}
.ic-btn:hover, .ic-btn.show{ background: var(--grey50);}
.ic-btn-grey{ background: var(--greyLighter);}
.ic-btn-grey:hover{ background: var(--grey50);}
.ic-btn-close:hover{ background: var(--error12);}
.ic-btn.lg{ padding: 6px;}
.ic-btn-bordered{ padding: 7px; border: 1px solid var(--grey300); box-shadow: 0px 1px 2px 0px #0A0D120D;}
.ic-btn-bordered.lg{ padding: 5px;}
.ic-btn-bordered.lg > img{ width: 20px;}


/* Checkbox */
.form-check:not(.form-switch, .radiocheck){ margin: 0; padding: 0 0 0 28px; position: relative; min-height: auto;}
.form-check:not(.form-switch, .radiocheck) .form-check-input[type="checkbox"]{ -webkit-appearance: none; appearance: none; padding: 0; outline: none; width: 20px; height: 20px;  margin: 0; border-radius: 6px; background: var(--white); border-color: var(--grey300); position: absolute; top: 1px; left: 0; box-shadow: none !important;}
.form-check:not(.form-switch, .radiocheck) .form-check-label{ font-size: 14px; color: var(--grey700); font-weight: 500;}
.form-check:not(.form-switch, .radiocheck) .form-check-label.xl{ font-size: 16px; line-height: 21px; padding-left: 4px;}
.form-check:not(.form-switch, .radiocheck) .form-check-input:checked[type="checkbox"]{ border-color: var(--brand600); background-color: var(--brand600); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 22px;}

.form-check.sm:not(.form-switch, .radiocheck){ padding: 0 0 0 24px; min-height: 16px;}
.form-check.sm:not(.form-switch, .radiocheck) .form-check-input[type="checkbox"]{ -webkit-appearance: none; appearance: none; padding: 0; outline: none; width: 16px; height: 16px; top: 2px; border-radius: 4px;}
.form-check.sm:not(.form-switch, .radiocheck) .form-check-input:checked[type="checkbox"]{ background-size: 18px;}

.form-check.style2:not(.form-switch, .radiocheck) .form-check-input[type="checkbox"]{ border-color: var(--brand600); background-color: var(--brand50);}
.form-check.style2:not(.form-switch, .radiocheck) .form-check-input:checked[type="checkbox"]{ border-color: var(--brand600); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%237F56D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 22px;}

.form-check.style3:not(.form-switch, .radiocheck) .form-check-input[type="checkbox"]{ border-color: var(--grey300); background-color: var(--white);}
.form-check.style3:not(.form-switch, .radiocheck) .form-check-input:checked[type="checkbox"]{ border-color: var(--brand600); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%237F56D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 22px;}


/* Radio */
.form-group-radio > label{ margin: 0 0 16px; font-size: 14px; font-weight: 500; color: var(--grey500); line-height: 20px; display: block;}
.radio-group-inline{ display: flex; gap: 10px 24px; flex-wrap: wrap;}
.form-check:not(.form-switch, .radiocheck) .form-check-input[type="radio"]{ -webkit-appearance: none; appearance: none; padding: 0; outline: none; width: 16px; min-width: 16px; height: 16px; border: 1px solid var(--grey300); border-radius: 50%; margin:0; box-shadow: none !important; position: absolute; top: 3px; left: 0;}
.form-check:not(.form-switch, .radiocheck) .form-check-input:checked[type="radio"]{ border-color: var(--brand600); background-color: var(--brand50); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='7' cy='7' r='3' fill='%237F56D9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%;}

.form-check-input.vcenter{ top: 0 !important; bottom: 0 !important; margin: auto !important;}

.radiocheck.form-check{ margin: 0; padding: 0; position: relative; display: flex; gap: 12px; min-height: 20px;}
.radiocheck.form-check .form-check-input{ -webkit-appearance: none; appearance: none; padding: 0; outline: none; width: 20px; min-width: 20px; height: 20px; border: 1px solid var(--grey300); border-radius: 50%; margin:2px 0 0 0; box-shadow: none !important; position: unset;}
.radiocheck.form-check .form-check-label{ align-self: center; font-size: 16px; font-weight: 500; color: var(--grey700);}
.radiocheck.form-check .form-check-input:checked{ border-color: var(--brand600); background-color: var(--brand50); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3e%3ccircle cx='9' cy='9' r='4' fill='%237F56D9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%;}


/* Switcher */
.form-switch{ margin: 0; padding: 0; display: flex; min-height: auto; gap: 8px;}
.form-switch .form-check-input{ margin: 0; width: 32px; height: 18px; border-radius: 50px; background-color: var(--grey200) !important; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important; border: none; box-shadow: none;}
.form-switch .form-check-input:checked{ background-color: var(--brand600) !important;}
.form-switch .form-check-label{ align-self: center; font-size: 14px; font-weight: 400; color: var(--grey900);}

.form-switch.xl .form-check-input{ width: 36px; height: 20px;}
.form-switch.xxl .form-check-input{ width: 44px; height: 24px;}
.form-switch.xxl .form-check-label{ font-size: 16px; font-weight: 500;}

/* Badge */
.badge{ padding: 5px 8px; font-size: 12px; font-weight: 500; border-radius: 16px; background: var(--brand50); color: var(--brand700); min-height: auto; min-width: max-content; display: inline-flex; gap: 4px; align-items: center;}
.badge.badge-success{ background: var(--success50); color: var(--success700);}
.badge.badge-warning{ background: var(--warning50); color: var(--warning700);}
.badge.badge-error{ background: var(--error50); color: var(--error700);}
.badge.badge-grey{ background: var(--grey50); color: var(--grey700);}
.badge.badge-grey2{ background: var(--grey100); color: var(--grey700);}
.badge.badge-blue{ background: var(--blue50); color: var(--blue700);}
.badge.xl{ font-size: 14px;}
.badge.xxl{ font-size: 14px; padding: 7px 12px;}
.badge.xxl .close img{ width: 13px;}
.badge .close:hover{ filter: brightness(50%) contrast(100%);}


/* Progress */
.progress{ border-radius: 4px; height: 8px; background: var(--grey100);}
.progress-bar{ background: var(--brand600); border-radius: 4px;}


/* Alert */
.alert-primary{ background: var(--blue50); color: var(--blue700);}
.alert-light{ background: var(--grey100); border: none; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--grey500);}


/*---------------------------------------------------------------------------------------------------------------------
                                              Theme Components End Here
---------------------------------------------------------------------------------------------------------------------*/


/*============================= Header / Sidebar / Wrapper / Content Wrapper CSS Start Here =============================*/
.container{ width: 100%; max-width: 1820px; margin: 0 auto; padding: 0;}
.container.lg{ max-width: 1240px;}
.container.md{ max-width: 1080px;}
.container.sm{ max-width: 924px;}

.wrapper{ min-height:100vh; position: relative;}
.wrapper:before, .wrapper:after{ content: " "; display: table;}
.wrapper:after{ clear: both; }

.content-wrapper{ padding:0; width: calc(100% - 280px); height: calc(100vh - 65px); z-index: 800; -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out, width 0.3s ease-in-out; margin-left: 280px; z-index: 820; display: flex; flex-direction: column;}
@media (max-width: 1279px) {
    .content-wrapper{ margin-left: 0; width: 100%;}
}

/* Content */
.content { min-height: 280px; padding: 16px; margin-right: auto; margin-left: auto;}

/* Main Header */
.main-header { width: 100%; max-height: 65px; z-index: 1030; padding: 0; background: var(--white); position: relative;}
.main-header > .navbar { -webkit-transition: margin-left 0.3s ease-in-out; -o-transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out; margin-bottom: 0; margin-left: 280px; border: none; min-height: 65px; border-radius: 0; padding: 14px 20px; background:var(--white); border-left: 1px solid var(--grey200); border-bottom: 1px solid var(--grey200);}
.main-header .brand_part{ width: 280px; padding: 18px 24px; border-bottom: 1px solid var(--grey200); margin: 0; float: left; display: flex; justify-content: space-between; align-items: center; background: var(--grey25); position: relative;}
.main-header .sidebar-toggle{ width: 28px; height: 28px; background: var(--white); border-radius: 4px; display: none; align-items: center; justify-content: center; border: 1px solid transparent;}
.main-header .sidebar-toggle img:last-child{ display: none;}
.main-header .logo { height: auto; width: auto; min-width: 28px; padding:0; overflow: hidden; display: flex; gap: 8px; align-items: center; color: var(--grey900);}
.main-header .logo > .logo-txt{ display: block; font-size: 16px; line-height: 24px; font-weight: 600; font-family: var(--FontTheme); color: var(--black);}

@media (max-width: 1279px) {
    .main-header .navbar { margin: 0;}
    .main-header .sidebar-toggle{ display: flex;}
    .main-header .sidebar-toggle img { transform: scaleX(-1);}
    .main-header .sidebar-toggle img:first-child{ display: none;}
    .main-header .sidebar-toggle img:last-child{ display: block; transform: scaleX(1);}
    .sidebar-mini.sidebar-collapse .main-header .sidebar-toggle img:first-child{ display: block;}
    .sidebar-mini.sidebar-collapse .main-header .sidebar-toggle img:last-child{ display: none;}
    .sidebar-mini.sidebar-open .main-header .sidebar-toggle img:first-child{ display: block;}
    .sidebar-mini.sidebar-open .main-header .sidebar-toggle img:last-child{ display: none;}
}

.navbar-static-top{ gap: 0 16px;}

.pagination > span{ display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--grey900);}
.pagination > span img{ filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}
.pagination > .ic-btn ~ span.current{ margin-left: 8px;}
.pagination > a.page{ display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--grey900);}
.pagination > a.page img{ width: 20px; filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(886%) hue-rotate(185deg) brightness(96%) contrast(89%);}
.pagination > a.page ~ .sub-item{ margin-left: 16px;}
.pagination > .sub-item{ display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--grey900);}
.pagination > .sub-item:before{ content: ""; width: 4px; height: 4px; border-radius: 5px; background: var(--grey600); margin: 0 4px 0 0;}
.pagination > .sub-item.current{ color: var(--brand600);}

.nav_right{ margin:0 0 0 auto; padding:0; display: inline-flex; align-self: center; align-items: center;}
.nav_right .info{ margin: 0; font-size: 14px; font-weight: 400; color: var(--grey900); line-height: 20px; display: inline-flex; gap: 10px;}
.nav_right .info span{ align-self: center;}
.nav_right .info a{ font-weight: 600; color: var(--brand700); display: inline-flex; gap: 12px; align-items: center;}
.nav_right .info a:hover{ color: var(--brand700); opacity: 0.7;}


/* Sidebar */
.main-sidebar{ position: fixed; top: 0; left: 0; padding: 70px 0 0; min-height: 100%; width: 280px; z-index: 810; background: var(--grey25); transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; }
@media (max-width: 1279px) {
    .main-sidebar{ background: var(--white); -webkit-transform: translate(-280px, 0); -ms-transform: translate(-280px, 0); -o-transform: translate(-280px, 0); transform: translate(-280px, 0);}
    .main-header .brand_part{ width: 190px; margin: 0; padding: 18px 20px; background: var(--white);}
}
@media (min-width: 1280px) {
    .sidebar-collapse .main-sidebar{ -webkit-transform: translate(-280px, 0); -ms-transform: translate(-280px, 0); -o-transform: translate(-280px, 0); transform: translate(-280px, 0);}
}
@media (max-width: 1279px) {
    .sidebar-mini.sidebar-collapse .main-sidebar{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);}
    .sidebar-open .main-sidebar{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);}
}

.sidebar{ padding-bottom: 10px; }
.sidebar-menu { list-style: none; margin: 0; padding: 10px 16px 0;}
.sidebar-menu > li { position: relative; margin: 0 0 12px; padding: 0; }
.sidebar-menu > li > a{ padding: 12px; display: flex; align-items: center; gap: 12px; font-size:16px; font-weight:400; color:var(--grey700); border-radius: 8px !important; transition:all .2s ease-in-out; position:relative;}
.sidebar-menu > li > a img:first-child{ display: none;}
.sidebar-menu > li:hover > a img:first-child{ display: block;}
.sidebar-menu > li:hover > a img + img{ display: none;}
.sidebar-menu > li.active > a img:first-child{ display: block;}
.sidebar-menu > li.active > a img + img{ display: none;}

.admin_block{ display: flex; padding: 20px 24px 20px 16px; background: var(--grey25); border-top: 1px solid var(--grey200); gap: 12px; font-size: 14px; font-weight: 600; color: var(--grey900); text-align: left; line-height: 20px; align-items: center; width: 100%;}
.admin_block figure{ width: 40px; min-width: 40px; height: 40px; border-radius: 50%; display: flex; margin: 0;}
.admin_block figure img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.admin_block span{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.admin_block small{ font-size: 14px; font-weight: 400; line-height: 20px; color: var(--grey600); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.admin_block .logout_link{ display: inline-flex; margin-left: auto; align-self: flex-start;}

.hoverbrand-img > img + img{ display: none;}
.hoverbrand-img:hover > img:first-child{ display: none;}
.hoverbrand-img:hover > img + img{ display: block;}

/* Component: Sidebar Mini */
@media (min-width: 1280px) {
    .sidebar-collapse .main-header .brand_part{ width: 100px;}
    .sidebar-collapse .main-header > .navbar{ margin-left: 100px;}
    .sidebar-collapse	.main-header .logo > .logo-txt{ display: none;}
    .sidebar-collapse .main-header .brand_part::after{ width: 45px; opacity: 0;}
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .right-side, .sidebar-mini.sidebar-collapse .main-footer { margin-left: 100px !important; z-index: 840;  width: calc(100% - 100px);}
    .sidebar-mini.sidebar-collapse .main-sidebar { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); width: 100px !important; z-index: 850;}
    .sidebar-mini.sidebar-collapse .sidebar-menu{ padding-left: 6px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li { position: relative; margin-bottom: 8px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin-right: 0; padding: 10px 14px; width: 56px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span { border-top-right-radius: 4px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li.aside-title{ display: none;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span { border-bottom-right-radius: 4px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > .submenu-drop { padding-top: 5px; padding-bottom: 5px; border-bottom-right-radius: 4px;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .submenu-drop { display: block !important; position: absolute; width: 180px; left: 100%;}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span { top: 0; margin-left:5px; padding: 9px 5px 9px 15px; background-color: var(--grey100); font-weight:700; border-radius: 4px; color: var(--brand600);}
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .submenu-drop { top: 38px; margin-left: 0;}
    .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info, .sidebar-mini.sidebar-collapse .sidebar-form, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse .sidebar-menu > li > .submenu-drop, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa, .sidebar-mini.sidebar-collapse .sidebar-menu li.header { display: none !important; -webkit-transform: translateZ(0);}
    .sidebar-collapse .main-header .sidebar-toggle{ border-color: #9E9E9E29;}
    .sidebar-collapse .main-header .sidebar-toggle img:first-child{ display: none;}
    .sidebar-collapse .main-header .sidebar-toggle img:last-child{ display: block;}
    .sidebar-mini.sidebar-collapse .sidebar-menu .submenu-drop > li > a{ padding-left:20px;}
    .sidebar-mini.sidebar-collapse .customer_dropdown button{ padding: 4px;}
    .sidebar-mini.sidebar-collapse .customer_dropdown button span, .sidebar-mini.sidebar-collapse .customer_dropdown button::after{ display: none;}
}
.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu > li.header { white-space: nowrap; overflow: hidden; }
.sidebar-menu:hover { overflow: visible; }
.sidebar-form, .sidebar-menu > li.header { overflow: hidden; text-overflow: clip; }
.sidebar-menu li > a { position: relative; }
.sidebar-menu li > a > .pull-right { position: absolute; right: 10px; top: 50%; margin-top: -7px; }

.sidebar{ height:calc(100vh - 144px) !important;}
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { color: var(--brand600); background: #FCFAFF; box-shadow: 0px 0px 0px 4px #F4EBFF, 0px 1px 2px 0px #0A0D120D; font-weight: 500;}
.sidebar-menu > li:hover > a img, .sidebar-menu > li.active > a img{ filter: none;}

.main-sidebar .mCSB_inside > .mCSB_container{ margin-right:0;}
.sidebar-collapse .main-sidebar .mCSB_container, .sidebar-collapse .main-sidebar .mCustomScrollBox{ overflow:visible!important;}
.main-sidebar #mCSB_1_scrollbar_vertical{ opacity:0; width:5px;}
.main-sidebar:hover #mCSB_1_scrollbar_vertical{ opacity:1;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{ background-color: var(--brand600);}
.mCSB_scrollTools .mCSB_draggerRail{ background: transparent;}

.open:not(.dropup) > .animated-dropdown-menu { backface-visibility: visible !important; -webkit-animation: flipInX 0.7s both; -o-animation: flipInX 0.7s both; animation: flipInX 0.7s both;}

@keyframes flipInX {
    0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function: ease-in; opacity: 0;}
    40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function: ease-in;}
    60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
    80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
    100% { transform: perspective(400px);}
}
@-webkit-keyframes flipInX {
    0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; opacity: 0;}
    40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in;}
    60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
    80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
    100% { -webkit-transform: perspective(400px);}
}

/*---------------------------------------------------------------------------------------------------------------------
                                Header / Sidebar / Wrapper / Content Wrapper CSS Start Here
---------------------------------------------------------------------------------------------------------------------*/


/*============================= Modual CSS Start Here =============================*/

.dashboard_main, .content-body{ background: var(--white); border-left: 1px solid var(--grey200); flex: 1 0 0; padding: 20px; overflow: auto;}

.content_head{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;}

.content-footer{ padding: 12px 20px; display: flex; gap: 12px; justify-content: space-between; align-items: center; border-top: 1px solid var(--grey200);}
.content-footer.sticky-bottom{ background: var(--white); box-shadow: 0px -2px 8px 1px #0A0D120F; margin: 0 -16px; padding:16px 20px !important;}
.content-actions{ display: inline-flex; gap: 10px 24px; margin-left: auto;}

.page-title{ margin: 0; padding: 0 0 0 8px; font-size: 20px; font-weight: 600; color: var(--grey900);}

.datelabel{ margin: 0; padding: 5px 12px; font-size: 16px; font-weight: 600; color: var(--grey900); display: flex; justify-content: center; align-items: center; gap: 12px; background: var(--white); border: 1px solid rgba(158, 158, 158, 0.16); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border-radius: 6px;}

.card_block{ padding: 12px; background: var(--white); border: 1px solid var(--grey200); box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A; border-radius: 12px; height: 100%;}
.card_block.style2{ box-shadow: none; padding: 0;}
.card_head{ padding: 12px 16px; border-bottom: 1px solid var(--grey200);}
.card_head h6{ margin: 0 0 8px; padding: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--grey700);}
.card_head p{ margin: 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--grey600);}
.card_body{ padding: 16px;}
.card_top{ padding: 12px;}

/* Modal */
.modal-backdrop{ background: #10182866; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.modal-backdrop.show{ opacity: 1;}
.modal.show ~ .modal-backdrop.show{ opacity: 1 !important;}
.modal .modal-dialog{ width: 94%; margin-left: auto; margin-right: auto;}
.modal .modal-content{ border: none; background: var(--white); border-radius: 12px; box-shadow: 0px 8px 8px -4px #0A0D1208, 0px 20px 24px -4px #0A0D1214;}
.modal .modal-header{ padding: 16px 44px 16px 24px; border: none;}
.modal .modal-header .modal-title{ font-size: 18px; font-weight: 600; line-height: 28px; color: var(--grey900); display: flex; align-items: center; gap: 12px;}
.modal .modal-header .btn-close{ width: 24px; height: 24px; padding: 0; opacity: 1; margin: 0; box-shadow: none !important; top: 1.2em; right: 1.2em; background-size: 10px; position: absolute;}
.modal .modal-body{ padding: 24px; border: none;}
.modal .modal-body .modal-title{ margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--grey900);}
.modal .modal-body p{ margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--grey600);}
.modal .modal-body p:last-child{ margin-bottom: 0;}
.modal .modal-footer{ padding: 8px 24px 24px; gap: 20px; border: none;}

/* Modal Export Records */
#ModalExportRecords .modal-dialog{ max-width: 480px;}
.exprecord_modal .btn-close,
.cpr_upload_modal .btn-close,
.saveasview_modal .btn-close{ margin: 0; position: absolute; top: 1em; right: 1em; box-shadow: none !important;}
.exprecord_modal .modal-body .icon{ width: 40px; min-width: 40px; height: 40px; margin: 0 0 24px; border-radius: 8px; background: var(--greyLightest); display: flex; align-items: center; justify-content: center;}
.exprecord_modal .modal-body .icon img{ width: 24px; height: 24px;}
.exprecord_modal .form-group-radio{ margin: 28px 0 0;}

/* Modal Pause Upload */
.cpr_upload_modal .modal-dialog{ max-width: 544px;}
.cpr_upload_modal .icon{ width: 56px; min-width: 56px; min-height: 56px; display: flex; align-items: flex-start;}
.cpr_upload_modal .action{ padding-top: 32px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;}

/* Modal Save As View */
.saveasview_modal .modal-dialog{ max-width: 520px;}

/* Datatable Dropdown Menu */
.dtable-dropdown{ position: relative; display: inline-block;}
.dtable-dropbtn{ border-radius: 5px;}
.dtable-dropmenu{ margin: 0 !important; padding: 0; border-radius: 8px; background: var(--white); box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A; position: absolute; display: none; z-index: 999; min-width: 146px;}
.dtable-dropmenu.md{ min-width: 114px;}
.bulkuploadtable_modal.show ~ .dtable-dropmenu{ z-index: 1080;}
.dtable-dropmenu.show{ display: block !important;}
.dtable-dropmenu li{ margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--grey700);}
.dtable-dropmenu li a{ display: flex; padding: 10px 16px; gap: 12px; line-height: 20px; color: var(--grey700); transition: all .2s ease-in-out; cursor: pointer;}
.dtable-dropmenu li a.delete{ color: var(--error600);}
.dtable-dropmenu li a i{ min-width: 16px; width: 16px; display: flex; align-self: center;}
.dtable-dropmenu li a i img{ width: 16px; height: 16px;}
.dtable-dropmenu li a:active{ background: transparent;}
.dtable-dropmenu li a:hover{ background: var(--grey100) !important;}

.sync-dtable-dropmenu{ box-shadow: 0px 4px 6px -2px #0A0D1208, 0px 12px 16px -4px #0A0D1214; border: 1px solid var(--grey200); min-width: 376px; overflow: hidden;}
.synclist-table{ width: 100%; margin: 0;}
.synclist-table th{ padding: 12px 24px; font-size: 14px; font-weight: 500; color: var(--grey600); background: var(--grey100); border: none; border-bottom: 1px solid var(--grey200);}
.synclist-table td{ padding: 10px 24px; font-size: 16px; font-weight: 500; color: var(--grey900); background: var(--white); border: none;}
.synclist-table td:first-child{ padding-left: 14px; padding-right: 14px;}
.synclist-table tr:hover td{ background: var(--grey50);}
.synclist-table .platform_info{ display: flex; align-items: center;}
.synclist-table .platform_info img{ width: 24px; height: 24px; object-fit: contain;}



/* Theme Datatable */
/* .card_block > .theme-datatable > .dt-container > .top{ border-radius: 0 0 8px 8px;} */
.theme-datatable{ margin: 0; padding: 0;}
.theme-datatable > .dt-container > .top{ overflow: auto; padding: 0; margin: 0; scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin;}
.theme-datatable table.ordering-false .dt-column-order{ display: none;}
.theme-datatable table .dt-orderable-none .dt-column-order{ display: none !important;}
.theme-datatable table:not(.ordering-false) .dt-column-order{ display: inline-flex; position: absolute; width: 16px !important; height: 16px !important; margin:3px 0 0 3px; top: unset !important; bottom: unset !important; right: unset !important; left: unset !important;}
.theme-datatable table:not(.ordering-false) .dt-column-order::before{ content: "" !important; display: none !important; width: 16px; height: 16px; background: url(../images/datatable-arrows-d.svg) no-repeat center center; position: unset !important; font-size: unset !important; line-height: unset !important; opacity: 1 !important; transform: scaleY(-1);}
.theme-datatable table:not(.ordering-false) .dt-column-order::after{ content: "" !important; display: none !important; width: 16px; height: 16px; background: url(../images/datatable-arrows-d.svg) no-repeat center center; position: unset !important; font-size: unset !important; line-height: unset !important; opacity: 1 !important;}

.theme-datatable table.dataTable:not(.ordering-false) > thead > tr > th:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order{ background: url(../images/datatable-arrows.svg) no-repeat center center;}
.theme-datatable table.dataTable > thead > tr > th:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order::before,
.theme-datatable table.dataTable > thead > tr > th:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order::after{ display: none !important;}
.theme-datatable table.dataTable > thead > tr > th.dt-ordering-asc .dt-column-order,
.theme-datatable table.dataTable > thead > tr > th.dt-ordering-desc .dt-column-order{ background: none;}

table.dataTable thead > tr > th:not(.dt-ordering-desc,.dt-ordering-asc) span.dt-column-order::after, table.dataTable thead > tr > td:not(.dt-ordering-desc,.dt-ordering-asc) span.dt-column-order::after{ display: inline-flex !important;}
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{ display: inline-flex !important;}

.theme-datatable table{ margin: 0; padding: 0; background: none; border: none; border-bottom: 1px solid var(--grey200);}
.theme-datatable table > thead > tr > th{ padding: 11px 24px; font-size: 14px; font-weight: 500; color: var(--grey600); background: var(--grey100); border:none !important; border-top: 1px solid var(--grey200) !important; outline: none !important; position: relative; white-space: nowrap;}
.theme-datatable table > thead > tr > th.freez_cell-start ~ th:not(.freez_cell-end){ box-shadow: 0 4px 4px -4px #1E1E1E0F inset;}
.theme-datatable table > thead > tr > th.freez_cell-end ~ th{ box-shadow: none !important;}
.theme-datatable table.dataTable > thead > tr > th{ padding-right: 30px;}
.theme-datatable table > thead > tr > th .dt-column-title, .theme-datatable table > thead > tr > td .dt-column-title{ white-space: nowrap; display: inline-block;}
.theme-datatable table > thead > tr > th > select option{ color: var(--grey900);}
.theme-datatable table > tbody > tr > td{ padding: 8px 24px; font-size: 14px; font-weight: 400; vertical-align: middle; color: var(--grey700); background: var(--white); border:none !important; border-top: 1px solid var(--grey200) !important; outline: none !important; white-space: nowrap; position: relative;}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date { text-align: left;}

.theme-datatable table > tbody > tr:hover > td{ background: var(--grey25) !important;}
table.dataTable > tbody > tr.selected > *{ box-shadow: none !important; background: var(--white); color: var(--grey700);}

.theme-datatable table > tbody > tr > td.detection{ background: var(--grey50) !important;}
.theme-datatable table > tbody > tr > td.tablecell-brand:hover{ background: var(--grey50) !important;}

table.dataTable input.dt-select-checkbox:indeterminate::after { display: none;}
@media(min-width:1200px){
    .theme-datatable table.dataTable > thead > tr > th.dt-select ~ th.freez_cell-start{ left: 46px !important;}
    .theme-datatable table.dataTable > tbody > tr > td.dt-select ~ td.freez_cell-start{ left: 46px !important;}
}
.theme-datatable table > thead > tr > th.dt-select,
.theme-datatable table > tbody > tr > td.dt-select{ padding-right: 7px !important; width: 46px; min-width: 46px; text-align: center;}
.theme-datatable table > thead > tr > th.dt-select ~ th:nth-child(2),
.theme-datatable table > tbody > tr > td.dt-select ~ td:nth-child(2){ padding-left: 5px !important;}
.dt-info .select-info { margin-left: 4px;}

table.dataTable input.dt-select-checkbox{ border:1px solid var(--grey300) !important; width: 20px; height: 20px; border-radius: 6px !important; margin: 0; line-height: unset; font-size: unset; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact;print-color-adjust: exact; box-shadow: none !important;}
table.dataTable input.dt-select-checkbox:checked{ border-color: var(--brand600) !important; background-color: var(--brand50); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%237F56D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 22px;}
table.dataTable input.dt-select-checkbox:checked::after{ display: none !important;}

table.dataTable > thead > tr > th.dt-select .dt-column-order, table.dataTable > thead > tr > th.dt-action .dt-column-order{ display: none;}
table > thead > tr > th.dt-action:last-child{ pointer-events: none;}
.theme-datatable table > tbody > tr.collapsed_row > td{ background: var(--grey50) !important;}
.theme-datatable table > tbody > tr > td .action{ display: flex; gap: 20px; align-items: center;}

.table-shadow{ box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 0 2px 0px #0A0D121A;}
.table-border{ border: 1px solid var(--Gray-200, #E9EAEB);}
.theme-datatable.table-rounded{ overflow: hidden; border-radius: 12px;}
.theme-datatable.table-rounded table.dataTable > thead > tr > th{ border-top: none !important;}
.theme-datatable.table-rounded table.dataTable > thead > tr > th:first-child{ border-radius: 12px 0 0 0;}
.theme-datatable.table-rounded table.dataTable > thead > tr > th:last-child{ border-radius: 0 12px 0 0;}
.theme-datatable.table-rounded table.dataTable > tbody > tr:last-child > td:first-child{ border-radius: 0 0 0 12px;}
.theme-datatable.table-rounded table.dataTable > tbody > tr:last-child > td:last-child{ border-radius: 0 0 12px 0;}

.theme-datatable table.dataTable.stripe > tbody > tr:nth-child(2n+1) > *, .theme-datatable table.dataTable.display > tbody > tr:nth-child(2n+1) > *{ box-shadow: none;}
.theme-datatable table.dataTable.hover > tbody > tr:hover > *, .theme-datatable table.dataTable.display > tbody > tr:hover > *{ box-shadow: none;}

/* Fixed Column */
.theme-datatable table.dataTable > thead > tr > th.small-column240x{ width: 240px;}
.theme-datatable table.dataTable > thead > tr > th.small-column200x{ width: 200px;}

/* Freez cell CSS */
.theme-datatable table > thead > tr > th.tablecell-prodname,
.theme-datatable table > tbody > tr > td.tablecell-prodname{ min-width: 260px;}
.theme-datatable table > thead > tr > th.tablecell-brand,
.theme-datatable table > tbody > tr > td.tablecell-brand{ min-width: 140px;}
.theme-datatable table > thead > tr > th.freez_cell-start::after,
.theme-datatable table > tbody > tr > td.freez_cell-start::after{ content: ""; width: 8px; height: 100%; position: absolute; top: 0; right: 0; box-shadow: 5px 0 4px -1px #1E1E1E0F; z-index: 6; pointer-events: none;}
.theme-datatable table > thead > tr > th.freez_cell-end{ position: sticky; right: 0; background: var(--grey100); z-index: 52;}
.theme-datatable table > tbody > tr > td.freez_cell-end{ position: sticky; right: 0; background: var(--white);}
.theme-datatable table > thead > tr > th.freez_cell-end::after,
.theme-datatable table > tbody > tr > td.freez_cell-end::after{ content: ""; width: 8px; height: 100%; position: absolute; top: 0; left: 0; box-shadow: -4px 0 3px -1px #1E1E1E0F; z-index: 6; pointer-events: none;}
.theme-datatable table > tbody > tr > td.freez_cell-end:hover{ z-index: 55;}

.theme-datatable table > thead > tr > th .platform_info img{ width: 20px; height: 20px; object-fit: contain;}
.platform_info{ display: inline-block; min-width: max-content;}
.platform_info img{ display: inline-flex; margin-right: 9px; object-fit: contain;}
.inline-data{ display: inline-flex; gap: 12px; align-items: center; min-width: max-content;}
.prod_info{ display: flex; gap: 12px; align-items: center;}
.prod_info .prod_img{ width: 24px; height: 24px; border-radius: 4px; display: flex; background: #C7B9DA;}
.prod_info .prod_img img{ border-radius: 4px; width: 100%; object-fit: cover;}
.prod_info span{ color: var(--grey900); width: 20ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}
.prod_info a{ color: var(--brand700);}
.prod_info a:hover{ color: var(--brand500);}
.t-expand-ic{ width: 20px; min-width: 20px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer;}

.theme-datatable table > tbody > tr > td > .inline-data > .prod_info{ margin-left: 32px;}
.theme-datatable table > tbody > tr > td > .inline-data > span.t-expand-ic ~ .prod_info{ margin-left: 0;}

table tbody tr td .input-group{ flex-wrap: nowrap; box-shadow: 0px 1px 2px 0px #0A0D120D; border-radius: 8px;}
table tbody tr td .input-group .input-group-text{ background: transparent; border-color: var(--grey300); padding: 5px 12px 5px 13px; font-size: 14px; font-weight: 400; color: var(--grey900); line-height: 20px; border-radius: 8px;}
table tbody tr td .input-group .form-control{ padding: 0 14px; font-size: 14px; font-weight: 400; color: var(--grey800); height: 32px; border-color: var(--grey300); border-radius: 8px; min-width: 72px; box-shadow: none;}
table tbody tr td .input-group .input-group-text ~ .form-control{ min-width: 97px;}

td.tablecell-brand .inline-data{ display: flex;}
.tablecell-brand .form-switch{ align-items: center; gap: 12px; flex-grow: 1; justify-content: flex-end;}
.tablecell-brand .form-check-input[role="switch"]{ opacity: 0; transition:all .3s ease-in-out;}
.tablecell-brand .form-check-label{ display: flex;}
.tablecell-brand:hover .form-check-input[role="switch"]{ opacity: 1;}
.tablecell-brand .form-switch input[type="checkbox"]:checked ~ .form-check-input[role="switch"]{ margin: 0 0 0 auto;}
.tablecell-brand .form-switch input[type="checkbox"]:checked ~ .form-check-label{ opacity: 0; display: none;}
.tablecell-brand .form-switch input[type="checkbox"]:not(:checked) ~ .form-check-label{ opacity: 1;}

td.tablecell-prodname .inline-data{ display: flex;}
td.tablecell-prodname .inline-data > .form-switch ~ .prod_info{ margin-left: 0 !important;}
.tablecell-prodname .form-switch{ align-items: center; gap: 12px; justify-content: flex-end;}
.tablecell-prodname .form-check-label{ display: flex;}
.tablecell-prodname .form-switch input[type="checkbox"]:checked ~ .form-check-label{ opacity: 0;}
.tablecell-prodname .form-switch input[type="checkbox"]:not(:checked) ~ .form-check-label{ opacity: 1;}

/* Expand Datatable */
.theme-datatable table > tbody > tr.expandrow > td{ padding: 16px; background: var(--brand25) !important;}
.expand-datatable.theme-datatable{ width: 100%; max-width: 1565px; position: sticky; left: 16px;}
.expand-datatable.theme-datatable table > thead > tr > th{ padding-top: 7px; padding-bottom: 7px;}
.expand-datatable.theme-datatable table > tbody > tr > td{ padding-top: 11px; padding-bottom: 11px;}
.expand-datatable.theme-datatable table > tbody > tr > td a{ font-weight: 500; color: var(--brand700);}
.expand-datatable.theme-datatable table > tbody > tr > td a:hover{ color: var(--brand500);}

/* Datatable Controls */
.table_outer_footer{ padding: 12px 24px 16px; border-top: 1px solid var(--grey200);}
.datatable-foot{ width: 100%;}
.dt-length label{ display: inline-flex; align-items: center;}
.dt-length label span{ font-size: 14px; font-weight: 500; color: var(--grey700);}
.dt-length label select.dt-input{ border:1px solid #BDBDBD; border-radius: 50px; height: 28px; font-size: 12px; font-weight: 500; padding: 4px 30px 4px 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--white) url(../images/dropdown-arrow20x.svg) no-repeat center right 10px; background-size: 16px; color: var(--grey900);}
.dt-pages-select.bootstrap-select{ width: auto !important;}
.dt-pages-select.bootstrap-select > .btn{ height: 36px; font-size: 14px; font-weight: 600; padding: 5px 42px 7px 14px; color: var(--grey700); min-width: 72px; background: var(--white); border:1px solid var(--grey300); border-radius: 8px; min-height: auto; line-height: 20px; box-shadow: 0px 1px 2px 0px #0A0D120D;}
.dt-pages-select.bootstrap-select > .btn::after{ width: 12px; height: 7px; background: url(../images/arrow-down-ic12x.svg) no-repeat center center; background-size: 12px; position: absolute; right: 16px; margin: 0;}
.dt-pages-select.bootstrap-select > .dropdown-menu{ border: none; box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; min-width: 72px; background: var(--white); border-radius: 8px;}
.dt-pages-select.bootstrap-select .dropdown-menu li a:hover, .dt-pages-select.bootstrap-select .dropdown-menu li a:focus{ background: var(--grey100); color: var(--grey700);}
.dt-pages-select.bootstrap-select .dropdown-menu li a.active, .dt-pages-select.bootstrap-select .dropdown-menu li a.selected, .dt-pages-select.bootstrap-select .dropdown-menu li.active a, .dt-pages-select.bootstrap-select .dropdown-menu li.selected a{ background: var(--grey200); color: var(--grey700);}
.dt-paging nav{ display: inline-flex; gap: 0; margin: 0; padding: 0; border-radius: 8px; border: 1px solid var(--grey300); overflow: hidden; box-shadow: 0px 1px 2px 0px #0A0D120D;}
.dt-paging nav button{ width: 40px; min-width: 40px !important; height: 40px; font-size: 14px; font-weight: 500; color: var(--grey700); border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; background: none !important; border: none !important; border-right: 1px solid var(--grey300) !important;}
.dt-paging nav button:last-child{ border-right: none !important;}
.dt-paging nav button.first, .dt-paging nav button.previous, .dt-paging nav button.next, .dt-paging nav button.last{ font-size: 0; color: transparent !important; min-width: 52px !important;}
.dt-paging nav button.first::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-left1.svg) no-repeat center center;}
.dt-paging nav button.previous::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-left2.svg) no-repeat center center;}
.dt-paging nav button.next::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-right1.svg) no-repeat center center;}
.dt-paging nav button.last::before{ content: ""; width: 14px; height: 14px; background: url(../images/table-paging-right2.svg) no-repeat center center;}
.dt-paging nav button:hover{ background: var(--brand50) !important; color: var(--grey600) !important;}
.dt-paging nav button.current{ background: var(--brand100) !important; color: var(--grey600) !important;}
.dt-info{ font-size: 14px; font-weight: 500; color: var(--grey700) !important;}

/* Datatable Rounded */
.theme-datatable.card_block{ box-shadow: none; overflow: hidden; border-top: none;}
.theme-datatable.card_block table{ border-bottom: none;}

.dt-empty{ padding: 32px 12px !important;}
.empty-state-wrapper{ margin: 0; padding: 0; text-align: center;}
.empty-state-wrapper .empty-card{ cursor: pointer; background: none; border: none;}
.empty-state-wrapper .placeholder-card-show{ margin: 0 0 10px;}
.empty-state-wrapper h6{ margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--grey700);}
.empty-state-wrapper p{ margin: 0; padding: 0; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--grey600); white-space: break-spaces;}

/* Form block */
.form_block:not(:last-child){ margin-bottom: 20px;}
.form_block .input-group{ margin-bottom: 0;}
.form_block .label{ margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--grey700); display: block;}
.form_block .form-control{ height: 44px; min-height: 44px; line-height: normal; padding: 0 14px; font-size: 16px; font-weight: 400; color: var(--grey900); box-shadow: 0px 1px 2px 0px #0A0D120D !important; outline: none !important; border-color: var(--grey300); border-radius: 8px; background-color: var(--white);}
.form_block textarea.form-control{ padding: 10px 14px;}
.form_block input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
.form_block input[type=number] { -moz-appearance: textfield;}
.form_block .form-control::placeholder{ color: var(--grey500);}
.form_block .input-group .input-group-text{ background: var(--white); border-color: var(--grey300); border-right: none !important; border-radius: 0; border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; padding: .375rem .5rem; min-width: 40px; font-size: 16px; font-weight: 400; color: var(--grey500);}
.form_block .input-group .input-group-text:first-child{ border-right: 1px solid var(--grey300) !important; position: relative; z-index: 6; justify-content: center;}
.form_block .input-group .input-group-text ~ .form-control{ border-left: none !important;}
.form_block .bootstrap-select{ width: 100% !important;}
.form_block .bootstrap-select > .dropdown-toggle::after { width: 22px;}
.form_block .input-group .form-control{ border-right: none;}
.form_block .input-group .input-group-text ~ .form-control{ border-right: 1px solid var(--grey300); justify-content: flex-end;}
.form_block .input-group .form-control ~ .input-group-text{ border-right:1px solid var(--grey300) !important; border-left: none !important; border-radius: 0 !important; border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important;}
.form_block .input-group .input-group-text .bootstrap-select{ width: auto !important;}
.form_block .input-group .input-group-text .bootstrap-select > .btn{ border: none; box-shadow: none !important; height: auto; min-height: auto; padding: 0;}

/* Form Validation */
.input-feedback{ font-size: 14px; font-weight: 400; line-height: 20px; color: var(--grey600); margin-top: 6px; display: block;}
.input-group.has-validation > .input-group-text{ border-color: var(--error300) !important;}
.form-control.is-invalid, .was-validated .form-control:invalid{ border-color: var(--error300) !important;}
.input-group.has-validation .invalid-feedback{ display: block;}
.bootstrap-select.is-invalid .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle{ border-color: var(--error300) !important;}
.invalid-feedback{ color: var(--error700); line-height: 1.1;}
.invalid-feedback img{ width: 16px; min-width: 16px; align-self: flex-start;}
.form-control.is-invalid, .was-validated .form-control:invalid{ background-image: url(../img/alert-circle-error-ic16x.svg); background-size: 16px; padding-right: 30px;}

.bootstrap-select > .btn{ height: 44px; min-height: 44px; line-height: normal; padding: 0 10px 0 14px; font-size: 16px; font-weight: 400; color: var(--grey900); box-shadow: 0px 1px 2px 0px #0A0D120D !important; outline: none !important; border-color: var(--grey300); border-radius: 8px; background-color: var(--white);}
.bootstrap-select > .btn.disabled{ border-color: #E3E3E3; background-color: var(--grey200); color: var(--grey600) !important;}
.bootstrap-select > .disabled.dropdown-toggle::after { opacity: 0.4;}
.bootstrap-select > .btn .filter-option{ display: flex; flex-direction: column; justify-content: center;}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active{ background: var(--white); color: var(--grey900); box-shadow: none; outline: none; border-color: var(--grey300);}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle{ outline: none !important;}
.bootstrap-select > .dropdown-toggle::after { content: ""; border: none; width: 20px; height: 20px; background-image: url(../images/arrow-down-20x.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%;}
.bootstrap-select > .dropdown-menu{ padding: 0; border-color: var(--grey300); border-radius: 8px;}
.bs-actionsbox, .bs-donebutton, .bs-searchbox{ padding: 5px;}
.bs-searchbox .form-control{ height: 36px; min-height: 36px; line-height: normal; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--grey900); box-shadow: none; outline: none; border-color: var(--grey300); border-radius: 8px; background-color: var(--white);}
.bootstrap-select .dropdown-menu li a{ padding: 8px 14px; font-size: 14px; font-weight: 400; color: var(--grey900);}
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li a:focus{ background: var(--grey100); color: var(--grey900);}
.bootstrap-select .dropdown-menu li a.active, .bootstrap-select .dropdown-menu li a.selected, .bootstrap-select .dropdown-menu li.active a, .bootstrap-select .dropdown-menu li.selected a{ background: var(--grey200); color: var(--grey900);}

/* Theme Dropdown */
.dropdown-theme .dropdown-menu{ margin: 5px 0 0 !important; padding: 0; border-radius: 8px; background: var(--white); box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A; inset: inherit !important; top: 100% !important; left: 0 !important; right: auto !important; transform: inherit !important; border: none; min-width: 120px; overflow: hidden;}
.dropdown-theme.top-start .dropdown-menu{ top: auto !important; bottom: 100% !important;}
.dropdown-theme.bottom-end .dropdown-menu{ left: auto !important; right: 0 !important;}
.dropdown-theme .dropdown-toggle::after{ width: 20px; height: 20px; border: none; background: url(../images/arrow-down-20x.svg) no-repeat center center; margin: 0 0 0 auto; background-size: 25px;}
.dropdown-theme .dropdown-menu li{ margin: 0; padding: 0; font-size: 14px; font-weight: 500; color: var(--grey700);}
.dropdown-theme .dropdown-menu li a{ display: flex; padding: 10px 16px; gap: 12px; line-height: 20px; color: var(--grey700); transition: all .2s ease-in-out; cursor: pointer; min-width: max-content;}
.dropdown-theme .dropdown-menu li a i{ min-width: 16px; width: 16px; display: flex; align-self: center;}
.dropdown-theme .dropdown-menu li a i img{ width: 16px; height: 16px;}
.dropdown-theme .dropdown-menu li a:hover{ background: var(--grey100) !important;}

.theme-datatable .dataTable tbody td span[data-bs-toggle="tooltip"]{ display: inline-flex; margin-left: 7px;}
.tooltip{ filter: drop-shadow(0px 4px 6px #0A0D1208) drop-shadow(0px 12px 16px #0A0D1214);}
.tooltip > .tooltip-inner { font-size: 12px !important; padding: 8px 12px; line-height: 18px; border-radius: 8px; font-weight: 500; background-color: var(--grey900);}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before{ border-bottom-color: var(--grey900);}
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before{ border-top-color: var(--grey900);}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before{ border-left-color: var(--grey900);}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before{ border-right-color: var(--grey900);}

/* Radio Button */
.radio-btn{ margin: 0; padding: 0; position: relative;}
.radio-btn > input{ margin: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; cursor: pointer;}
.radio-btn label{ margin: 0; padding: 6px 16px; font-size: 12px; font-weight: 500; color: var(--brand600); background: var(--brandLightest); border: 1px solid var(--brandLighter); border-radius: 8px; display: inline-block;}
.radio-btn > input:checked ~ label{ background: var(--brand600); color: var(--white); border-color: var(--brand600);}

/* Datepicker */
.datepicker.datepicker-dropdown.dropdown-menu{ padding: 15px; background: var(--white); min-width: 14rem; color:var(--grey900); box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; border-radius: 10px; margin-top: 5px; border: none; z-index: 9999 !important;}
.datepicker.datepicker-dropdown.dropdown-menu::before, .datepicker.datepicker-dropdown.dropdown-menu::after{ display: none;}
.datepicker.datepicker-dropdown.dropdown-menu > div{ width:100%;}
.datepicker.datepicker-dropdown.dropdown-menu > div table{ width:100%;}
.datepicker-dropdown::before{ border-top-color: var(--borderColor) !important;}
.datepicker-dropdown::after{ border-bottom-color: var(--white) !important;}
.datepicker-dropdown.datepicker-orient-top::after{ border-top-color: var(--white) !important;}
.datepicker-dropdown.datepicker thead tr th{ padding: 10px 0 10px; font-size: 10px; font-weight: 400; color: var(--grey600); border-radius: 0; text-transform: uppercase;}
.datepicker-dropdown.datepicker .datepicker-switch{ font-size: 14px; padding:0 0 10px; color: var(--grey900); font-weight: 700; height: auto; background-color: transparent !important; border-radius: 0; text-transform: none;}
.datepicker-dropdown.datepicker .prev, .datepicker-dropdown.datepicker .next { background-color: transparent !important; background-repeat: no-repeat; background-position: center center; background-size: 9px auto; cursor: pointer; text-indent: -9999px; position: relative; padding:0 0 15px; height: auto; border-radius: 0;}
.datepicker-dropdown.datepicker .prev { background-image: url('../images/chevron-left20x.svg'); background-position: top left; background-size: 18px;}
.datepicker-dropdown.datepicker .next { background-image: url('../images/chevron-right16x.svg'); background-position: top right; background-size: 20px;}
.datepicker-dropdown.datepicker td{ width: 32px; height: 32px; border-radius: 0; font-size: 12px; font-weight: 500; color: var(--grey900);}
.datepicker-dropdown.datepicker table tr td{ border-radius: 4px;}
.datepicker-dropdown.datepicker table tr td span{ height: 45px; line-height: 45px;}
.datepicker-dropdown.datepicker table tr td.day.focused, .datepicker-dropdown.datepicker table tr td.day:hover{ background: var(--brandLighter); color: var(--brand600);}
.datepicker-dropdown.datepicker table tr td.active, .datepicker-dropdown.datepicker table tr td.active.disabled, .datepicker-dropdown.datepicker table tr td.active.disabled:hover, .datepicker-dropdown.datepicker table tr td.active:hover{ background: var(--brand600); color: var(--white);}
.datepicker-dropdown.datepicker table tr td span.active, .datepicker-dropdown.datepicker table tr td span.active.disabled, .datepicker-dropdown.datepicker table tr td span.active.disabled:hover, .datepicker-dropdown.datepicker table tr td span.active:hover{ background: var(--brand600); color: var(--white);}

/* Multiple Select */
.form-select-multi.bootstrap-select > .dropdown-menu{ box-shadow: -20px 20px 40px -4px #919EAB3D, 0px 0px 2px 0px #919EAB3D; padding: 8px; border: none !important; margin: 4px 0;}
.form-select-multi.bootstrap-select .dropdown-menu li:not(:last-child){ margin-bottom: 8px;}
.form-select-multi.bootstrap-select .dropdown-menu li a{ padding: 13px; border-radius: 8px; display: flex; gap: 12px; align-items: center;}
.form-select-multi.bootstrap-select .dropdown-menu li a span.check-mark{ position: unset !important; width: 17px; height: 17px; border-radius: 4px !important; box-shadow: 0 0 1px rgba(0,0,0,0.4) !important; display: block; border: 1px solid var(--txtGrey) !important;}
.form-select-multi.bootstrap-select .dropdown-menu li a span.check-mark::after{ display: none;}
.form-select-multi.bootstrap-select .dropdown-menu li a span.text{ margin: 0;}
.form-select-multi.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark{ border-color: var(--brand600) !important; background-color: var(--brand600); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m6 10 3 3 7-7'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center center; background-size: 18px; box-shadow: 0 0 1px rgba(0, 127, 95, 0.4) !important;}
.form-select-multi.bootstrap-select .dropdown-menu li a:hover, .form-select-multi.bootstrap-select .dropdown-menu li a:focus{ background-color: var(--actionHover); color: var(--grey900);}
.form-select-multi.bootstrap-select .dropdown-menu li a.active, .form-select-multi.bootstrap-select .dropdown-menu li a.selected, .form-select-multi.bootstrap-select .dropdown-menu li.active a, .form-select-multi.bootstrap-select .dropdown-menu li.selected a{ background-color: #9E9E9E29; color: var(--grey900);}

/* Nav tabs Style 1 */
.nav-tabs.style1{ margin: 0; padding: 0; gap: 24px; border: none;}
.nav-tabs.style1 .nav-item{ margin: 0; padding: 0;}
.nav-tabs.style1 .nav-link{ margin: 0; padding: 7px 11px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; color: var(--grey600); line-height: 20px; font-weight: 500; display: flex; gap: 8px; align-items: center; justify-content: center;}
.nav-tabs.style1 .dropdown-toggle::after{ content: ""; width: 16px; height: 16px; background: url(../images/arrow-down-grey-ic16x.svg) no-repeat center center; border: none; margin:0 0 0 auto;}
.nav-tabs.style1 .nav-link:hover{ background: var(--brand50);}
.nav-tabs.style1 .active, .nav-tabs.style1 .show:not(.dropdown-menu){ background: var(--brand50); border-color: var(--brand400); font-weight: 600; color: var(--brand700);}

/* Nav tabs Style 2 */
.nav-tabs.style2{ margin: 0; padding: 0; gap: 0; display: inline-flex; border: none; flex-wrap: nowrap; box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05); border: 1px solid var(--grey300); border-radius: 8px;}
.nav-tabs.style2 .nav-item{ margin: 0; padding: 0;}
.nav-tabs.style2 .nav-link{ margin: 0; padding: 9px 17px 11px 17px;  min-width: 104px; font-size: 14px; color: var(--grey600); line-height: 20px; font-weight: 400; border-radius: 0; border: none; display: flex; gap: 8px; align-items: center; justify-content: center; background: var(--white);}
.nav-tabs.style2 .nav-link:not(.active) img{ opacity: 0.65; transition: all .3s;}
.nav-tabs.style2 .nav-item:first-child .nav-link{ border-radius: 8px 0 0 8px;}
.nav-tabs.style2 .nav-item + .nav-item .nav-link{ border-left: 1px solid var(--grey300);}
.nav-tabs.style2 .nav-item:last-child .nav-link{ border-radius: 0 8px 8px 0;}
.nav-tabs.style2 .dropdown-toggle::after{ content: ""; width: 16px; height: 16px; background: url(../images/arrow-down-grey-ic16x.svg) no-repeat center center; border: none; margin:0 0 0 auto;}
.nav-tabs.style2 .nav-link:hover{ background: var(--grey50);}
.nav-tabs.style2 .active, .nav-tabs.style2 .show:not(.dropdown-menu){ background: var(--grey50); font-weight: 600; color: var(--grey800);}

.moreview-dropdown .dropdown-menu{ margin: 0; padding: 0; border-color: var(--grey200); border-radius: 8px; box-shadow: 0px 4px 6px -2px #0A0D1208, 0px 12px 16px -4px #0A0D1214; min-width: 356px;}
.moreview-dropdown .dropdown-head{ padding: 12px 16px; border-bottom: 1px solid var(--grey100);}
.moreview-dropdown .dropdown-middle{ padding: 0 16px 8px; border-bottom: 1px solid var(--grey100);}
.moreview-dropdown .dropdown-footer{ padding: 8px 16px;}

/* Simple search bar */
.simple_search{ margin: 0; padding: 0; position: relative;}
.simple_search .form-control{ width: 100%; height: 32px; padding: 0 14px 0 42px; border: 1px solid var(--grey300); box-shadow: none; outline: none; font-size: 16px; font-weight: 400; color: var(--grey900);}
.simple_search .form-control::placeholder{ color: var(--grey500); opacity: 1;}
.simple_search button{ border: none; background: none; position: absolute; left: 13px; top: 8px; display: inline-flex;}
.simple_search.md .form-control{ height: 36px; border-radius: 8px; font-size: 14px; font-weight: 400;}
.simple_search.md button{ top: 8px;}
.simple_search.xl .form-control{ height: 44px; border-radius: 8px;}
.simple_search.xl button{ top: 12px;}

.radio-switch-list{ display: flex; gap: 10px; padding: 8px 0; align-items: center; justify-content: space-between;}

.theme-datatable table#pcusTable > tbody > tr > td{ color: var(--grey900); padding-top: 13px; padding-bottom: 13px;}
.dt-paging-shadow nav{ box-shadow: 0px 1px 2px 0px #0A0D122E;}

.table_filter_result{ border-top: 1px solid var(--grey200);}
.filt_field{ padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--grey700); border: 1px solid var(--grey300); border-radius: 8px; gap: 8px; align-items: center; display: inline-flex; background: var(--white); box-shadow: 0px 1px 2px 0px #0A0D120D; flex-wrap: wrap;}
.filt_field .close{ display: flex;}

/* Offcanvas */
.offcanvas.offcanvas-end{ width: 96% !important; max-width: 420px; box-shadow: 0px 2px 4px -2px #0A0D120F, 0px 4px 8px 0 #0A0D121A; border: none;}
.offcanvas ~ .offcanvas-backdrop{ opacity: 0 !important;}
.offcanvas .offcanvas-header{ padding: 22px 16px 21px; border: none; border-bottom: 1px solid var(--grey200); justify-content: space-between; gap: 15px;}
.offcanvas .offcanvas-title{ display: flex; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; color: var(--grey700);}
.offcanvas .offcanvas-header .btn-close{ width: 20px; height: 20px; padding: 0; opacity: 0.8; margin: 0; box-shadow: none !important; background-size: 12px;}
.offcanvas .offcanvas-body{ scroll-behavior: smooth; scrollbar-color: var(--borderColor) transparent; scrollbar-width: thin; padding: 0;}
.offcanvas .offcanvas-footer{ padding: 12px 16px; border-top: 1px solid var(--grey200);}
.offcanvas .offcanvas-footer .action{ display: flex; justify-content: flex-end; align-items: center; gap: 10px;}
.offcanvas .offcanvas-footer .action .dropdown-theme .dropdown-toggle::after{ background-size: 22px;}

.filter_sidebar .offcanvas-body{ padding: 12px 16px;}
.offcanvas .form_block .form-control{ height: 36px; min-height: 36px; font-size: 14px; padding: 0 30px 0 11px;}
.offcanvas .form_block .form-control[type="number"]{ background-image: url(../images/range-arrows-updwn12x.svg); background-repeat: no-repeat; background-position: center right 12px; box-shadow: 0px 1px 2px 0px #0A0D120D !important;}

/* Label Titles */
.lbl-title{ margin: 0 0 20px; font-size: 16px; font-weight: 500; color: var(--grey500); display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center;}

.synconof_edit_info{ margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;}
.synconof_edit_info label{ margin: 0; font-size: 14px; font-weight: 500; color: var(--black);}
.synconof_edit_info .form_block{ width: 100%; max-width: 280px;}
.synconof_edit_info .form_block .form-control{ height: 32px; min-height: 32px; width: 100%;}

.equal_btn{ margin: 0; padding: 2px 5px 2px 8px; font-size: 12px; font-weight: 500; color: var(--grey700); border: none; background: var(--grey100); border-radius: 20px; display: inline-flex; gap: 4px; align-items: center;}
.equal_btn.dropdown-toggle::after{ width: 12px; height: 12px; background: url(../images/arrow-down-ic12x.svg) no-repeat center center; background-size: 8px;}

.hyphen-divider{ width: 8px; height: 2px; background: var(--grey300); display: inline-block; margin: 0 12px 4px;}

/* Subscribe Card */
.subscribed_card{ margin: 0 0 16px; padding: 23px 23px 14px; background: var(--blueGray50) url(../images/subscribed_curve.png) no-repeat bottom right 108px; border: 1px solid var(--purple200); border-radius: 12px;}
.subscribed_card h2{ margin: 0 0 8px; padding: 0; font-size: 30px; font-weight: 600; line-height: 38px; color: var(--grey900); letter-spacing: 0.8px;}
.subscribed_card p{ margin: 0 0 16px; padding: 0; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--grey600);}


/*============================= Upload CSV Modual CSS Start Here =============================*/
.upload_csv_modal .modal-dialog{ max-width: 1664px;}
.upload_csv_modal .progress{ margin-bottom: 40px;}
.upload_csv_modal.modal .modal-footer{ border-top: 1px solid var(--grey200); padding: 12px 16px;}
.upload_csv_accordian .accordion-item{ margin: 0 0 16px; padding: 0; border: 1px solid var(--grey200); border-radius: 12px;}
.upload_csv_accordian .accordion-item:last-child{ margin-bottom: 0;}
.upload_csv_accordian .accordion-button{ margin: 0; padding: 16px 16px 16px 52px; font-size: 14px; font-weight: 600; color: var(--grey700); line-height: 20px; position: relative; justify-content: space-between; background: none !important; box-shadow: none !important; border: none !important; gap: 10px;}
.upload_csv_accordian .accordion-button small{ display: none; margin-top: 8px; font-weight: 400; color: var(--grey600); font-size: inherit;}
.upload_csv_accordian .accordion-button::before{ content: ""; width: 20px; height: 20px; border: 1px solid var(--grey300); border-radius: 50%; position: absolute; top: 16px; left: 16px;}
.upload_csv_accordian .accordion-button::after{ display: none;}
.upload_csv_accordian .accordion-button:not(.collapsed)::before{ border-color: var(--brand300); box-shadow: 0px 0px 0px 4px #F4EBFF;}
.upload_csv_accordian .accordion-button:not(.collapsed) small{ display: block;}
.upload_csv_accordian .actived .accordion-button::before, .upload_csv_accordian .completed .accordion-button::before{ border-color: var(--brand600); background: var(--brand600) url(../images/check-ic12x.svg) no-repeat center center; box-shadow: none;}
.upload_csv_accordian .accordion-body{ padding: 5px 16px 16px;}
.upload_csv_accordian .accordion-item:first-child .accordion-body{ padding: 20px 40px 32px;}

.csvaddfile_content .grid{ display: flex; gap: 28px;}
.csvaddfile_content .csvaddfile_aside{ padding: 0; background: var(--grey100); border: 1px solid var(--grey200); border-radius: 12px; width: 240px; min-width: 240px;}
.csv_option-list{ margin: 0; padding: 0;}
.csv_option-list > li{ margin: 0; padding: 0; list-style: none; display: block;}
.csv_option-list > li.dropdown{ position: relative;}
.csv_option-list > li > a{ padding: 12px 16px; color: var(--grey500); font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; display: flex; justify-content: space-between; gap: 10px;}
.csv_option-list > li .sub_option-list{ margin: 0;}
.csv_option-list > li .sub_option-list a{ padding: 12px 16px; margin: 0; color: var(--grey700); font-size: 14px; font-weight: 500; text-decoration: none; display: flex; justify-content: space-between; gap: 10px;}
.csvaddfile_content .csvaddfile_detail{ flex: 1;}
.csvfile_upload{ height: 100%; padding: 0; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.csvfile_upload input[type="file"]{ width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer;}
.csvfile_upload i{ display: inline-flex; margin: 0 0 12px;}
.csvfile_upload p{ margin: 0; padding: 0; font-size: 14px; font-weight: 400; color: var(--grey600); line-height: 20px;}
.csvfile_upload strong{ font-weight: 600; color: var(--brand700);}
.csvfile_upload small{ font-size: 12px; display: block; margin-top: 3px;}

.csvuploaded_block{ border-radius: 12px; background: var(--white); margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 32px; box-shadow: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D; max-width: 388px; width: 100%;}
.csvuploaded_block .filename{ margin: 0; display: flex; gap: 16px;}
.csvuploaded_block .filename figure{ margin: 0; display: inline-flex; width: 48px; min-width: 48px;}
.csvuploaded_block .filename h3{ margin: 0 0 8px; padding: 0; font-size: 18px; line-height: 28px; color: var(--grey900); font-weight: 600; overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.csvuploaded_block .filename span{ display: block; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--grey600);}
.csvuploaded_block .btn-group{ gap: 10px 20px;}
.csvuploaded_block .btn-theme{ flex: 1;}

.upload_csv_accordian .table tr td .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: 420px;}
.upload_csv_accordian .table tr td .bootstrap-select > .btn{ height: 32px; min-height: 32px;}
.upload_csv_accordian .table tr td .form_block .form-control{ height: 32px; min-height: 32px; max-width: 240px; min-width: 160px;}

.theme-datatable table#ReviewSubmitTable > tbody > tr > td,
.theme-datatable table#StatusTable > tbody > tr > td{ padding-top: 13px; padding-bottom: 13px;}

.modal .modal-footer .alert{ margin: 0; padding: 4px 10px; font-size: 14px; line-height: 20px; font-weight: 500; border: none; border-radius: 16px;}
.alert-ic{ min-width: max-content; align-self: flex-start; margin-top: 4px;}

/*============================= Bundles Modual CSS Start Here =============================*/
.theme-datatable table.bundle_table > tbody > tr > td:last-child{ width: 140px; min-width: 140px;}
.theme-datatable table.bundle_table > tbody > tr > td .platform_info img{ width: 24px;}
.theme-datatable table.bundle_table > tbody > tr > td .action .ic-btn.show, .theme-datatable table.bundle_table > tbody > tr > td .action .ic-btn:hover{ background: var(--grey200);}
.theme-datatable table.bundle_table > tbody > tr > td .prod_info .prod_img, .theme-datatable table.bundle_table > tbody > tr > td .prod_info .prod_img img{ border-radius: 50%;}
.theme-datatable table.bundle_table > tbody > tr > td .prod_info span{ color: inherit;  width: 39ch;}

.theme-datatable table#CNBaddProdTable .prod_info span{ width: 33.9ch;}

/*============================= Orders Modual CSS Start Here =============================*/
.tablecell-address span{ width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}

.single_select_block{ width: 100%; max-width: 166px;}
.single_select_block .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: auto !important;}
.single_select_block .bootstrap-select > .btn{ font-size: 14px; font-weight: 600; height: 36px; min-height: 36px;}
.single_select_block > .bootstrap-select > .dropdown-menu{ border-color: var(--grey200); box-shadow: 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08); min-width: 320px;}
.single_select_block .bootstrap-select .dropdown-menu li a{ padding: 10px 14px; font-size: 16px; font-weight: 500;}
.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover{ color: var(--grey500);}

.theme-datatable table#orderMainTable > tbody > tr > td{ padding-top: 11px; padding-bottom: 11px;}


/* Modal Order Export */
.exprorder_modal .modal-dialog{ max-width: 398px;}
.exprorder_modal .modal-dialog .modal-body .form_block{ margin: 28px 0;}

/* Modal Create Template  */
.create_templates_modal .modal-dialog{ max-width: 956px; }
.create_templates_modal .modal-dialog .modal-content .modal-body{ padding: 0;}
.create_templates_modal .modal-dialog .modal-content .modal-body .modal-header{ padding: 24px;}
.create_templates_modal.modal .modal-footer{ padding: 12px 16px;}
.savastemp_datatable{ overflow: hidden;}
.savastemp_datatable table{ margin: 0; padding: 0; width: 100%;}
.savastemp_datatable table thead tr th{ background: var(--grey100);}
.savastemp_datatable table tbody tr td{ padding-top: 14px; padding-bottom: 14px;}
.savastemp_datatable table tbody tr.collapsed_row > td{ background: var(--grey100) !important;}
.savastemp_datatable table tbody tr td:first-child > div{ display: flex; align-items: center; gap: 12px;}
.savastemp_datatable table tbody tr td:first-child > div > .clps_arrw{ margin-left: 36px;}
.savastemp_datatable table tbody tr td:first-child > div > img ~ .clps_arrw{ margin-left: 0;}
.savastemp_datatable table tbody tr td:first-child > div > .form-check{ margin-left: 72px;}
.savastemp_datatable table tbody tr td:first-child > div > img ~ .clps_arrw ~ .form-check{ margin-left: 0;}
.savastemp_datatable table tbody tr td:first-child > div > .clps_arrw ~ .form-check{ margin-left: 0;}
.savastemp_datatable table tbody tr td:first-child > div > img ~ .form-check{ margin-left: 36px;}
.savastemp_datatable table tbody tr td:first-child .form-check label{ font-size: 16px; color: var(--grey900); font-weight: 500; padding-left: 4px;}

.templates_datatable table.dataTable > thead > tr > th:last-child{ width: 213px;}
.templates_datatable table.dataTable > tbody > tr > td .action{ justify-content: flex-end;}

/*============================= Velocity Modual CSS Start Here =============================*/
.theme-datatable table.velocity_table > tbody > tr > td:last-child{ width: 196px; min-width: 196px;}
.theme-datatable table.velocity_table > tbody > tr > td .prod_info span { color: var(--grey700); width: 16ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}

.max-content-660x{ max-width: 660px; width: 100%;}

.velocity-prod{ margin: 24px 0 0 0; padding: 8px 8px 8px 12px; max-width: 228px; display: flex; gap: 15px; align-items: center; background: var(--grey100); border-radius: 12px;}
.velocity-prod strong{ font-weight: 600; color: var(--grey700); line-height: 20px;}
.velocity-prod span{ margin-top: 4px; display: block;}
.velocity-prod figure{ margin: 0; padding: 0; min-width: 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;}
.velocity-prod figure img{ height: 100%; width: 100%; object-fit: cover; border-radius: 8px;}

/*============================= Connection Modual CSS Start Here =============================*/
.theme-datatable table.connections_table > thead > tr > th{ width: 140px; min-width: 140px;}
.theme-datatable table.connections_table > tbody > tr > td .inline-data{ display: flex;}
.theme-datatable table.connections_table > tbody > tr > td .inline-data > img{ width: 24px; height: 24px; object-fit: contain;}

.source-dropdown .dropdown-menu{padding: 16px 16px 0; min-width: 320px; border-radius: 12px;}
.source-dropdown .btn-group { padding: 8px 16px; margin: 0 -16px; border-top: 1px solid var(--grey200); border-radius: 0;}
.source-dropdown .radiocheck.form-check{ margin-bottom: 29px;}
.source-dropdown .radiocheck.form-check .form-check-label{ font-size: 14px;}

/* Priority Select Dropdown BS Select */
.priority-select .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width: auto !important;}
.priority-select .bootstrap-select > .btn{ height: auto; min-height: auto; padding: 0; border: none; width: auto; box-shadow: none !important;}
.priority-select .bootstrap-select > .dropdown-toggle::after{ display: none;}
.priority-selectpckr.bootstrap-select .dropdown-menu li a.active, .priority-selectpckr.bootstrap-select .dropdown-menu li a.selected, .priority-selectpckr.bootstrap-select .dropdown-menu li.active a, .priority-selectpckr.bootstrap-select .dropdown-menu li.selected a{ background: unset; color: unset;}
.priority-selectpckr.bootstrap-select > .dropdown-menu{ width: auto; min-width: 124px; border: none !important; box-shadow: 0px 1px 2px 0px #0A0D120F, 0px 1px 3px 0px #0A0D121A;}
.priority-select .bootstrap-select > .btn .badge-success::after{ content: ""; width: 12px; height: 12px; background: url(../images/arrow-down-success-ic12x.svg) no-repeat center center; background-size: 100%;}
.priority-select .bootstrap-select > .btn .badge-grey2::after{ content: ""; width: 12px; height: 12px; background: url(../images/arrow-down-grey-ic12x.svg) no-repeat center center; background-size: 100%;}
.priority-select .btn .badge { position: relative;}
.priority-select .badge { max-width: 100%; min-width: max-content; border: none;}
.priority-selectpckr.bootstrap-select .dropdown-menu li a .badge{ background: transparent; padding: 0; color: inherit; font-size: inherit; font-weight: inherit;}

/* Create Connection Modal */
.createconnection_modal .modal-dialog{ max-width: 600px;}
.createconnection_modal .upload_csv_accordian .accordion-item:first-child .accordion-body{ padding: 4px 16px 16px;}
.createconnection_modal .upload_csv_accordian .accordion-item:not(:last-child){ margin: 0 0 20px;}
#ModalEditConnection .bootstrap-select .dropdown-toggle .filter-option-inner-inner{ display: flex;}
#ModalEditConnection .bootstrap-select .dropdown-menu li a span.text { display: flex;}


.expoconnect_filter .simple_search .form-control{ box-shadow: 0px 1px 2px 0px #0A0D120D;}
.expoconnect_filter .ic-btn{ width: 44px; min-width: 44px; min-height: 44px; box-shadow: 0px 1px 2px 0px #0A0D120D;}
.explore_connections{ display: flex; gap: 20px;}
.exconnection_lists{ flex-grow: 1;}
.exconlist_title{ margin: 0 0 8px ; font-weight: 600; color: var(--grey700); line-height: 20px; text-transform: uppercase;}

.carier_items { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px;}
.carier_items:last-child{ margin-bottom: 0;}
.carier_item{ padding: 12px; max-width: 308px; min-width: 308px; display: flex; gap: 16px; border-radius: 8px; background: var(--grey50); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); transition: all .3s ease-in-out;}
.carier_item:hover{ background: var(--grey100); box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.2), 0px 1px 2px rgba(10, 13, 18, 0.16);}
.carier_item figure{ margin: 0; padding: 0; height: 40px; min-width: 40px; max-width: 40px; border-radius: 8px; overflow: hidden; display: flex; }
.carier_item figure img{ width: 100%; height: 100%; object-fit: cover; border-radius: 8px;}
.carier_item .detail h5{ margin: 0 0 3px; font-size: 14px; font-weight: 600; color: var(--grey700); line-height: 20px;}
.carier_item .detail p{ margin: 0 0 3px; color: var(--grey600);}
.carier_item .detail p:last-of-type{ margin: 0;}

.exaction_abcd{ padding: 0; max-width: 46px; min-width: 46px; width: 100%; display: flex; flex-direction: column; background: var(--white); border-radius: 8px; border: 1px solid var(--grey300); overflow: hidden; align-self: flex-start;}
.exaction_abcd a{ display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; color: var(--grey600); flex-grow: 1; text-decoration: none; min-height: 40px;  border-bottom: 1px solid var(--grey300);}
.exaction_abcd a:last-child{ border-bottom: none;}
.exaction_abcd a:hover, .exaction_abcd a .active{ border-radius: 0;}
.exaction_abcd .active, .exaction_abcd a:hover{ background: var(--grey50);}

/*============================= Subscription Modual CSS Start Here =============================*/
.subscriptionplan-wrapper h1{ margin: 0 0 24px; padding: 0; font-size: 48px; line-height: 60px; color: var(--grey900); font-weight: 600; letter-spacing: -0.96px; text-align: center;}
.subscriptionplan-wrapper .info{ margin: 0 0 24px; padding: 0; font-size: 20px; line-height: 30px; color: var(--grey600); text-align: center;}
.subscriptionplan-wrapper .form-switch.xxl .form-check-label{ color: var(--brand900);}
.subscriptionplan-wrapper .form-switch.xxl .form-check-label span{ color: var(--brand700);}
.subscriptionplan-wrapper .row{ --bs-gutter-x: 32px;}
.plan_card{ padding: 24px 16px 20px; margin: 0; background: var(--white); box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03); border-radius: 12px; position: relative; height: 100%; display: flex; flex-direction: column; transition: all .5s;}
.plan_card:hover{ box-shadow: 0px 12px 26px -4px rgba(10, 13, 18, 0.12), 0px 4px 36px -2px rgba(10, 13, 18, 0.08);}
.plan_card.popular::before{content: ""; width: 100%; height: 15px; background: var(--brand500); border-radius: 12px 12px 0 0; position: absolute; top: 0; left: 0;}
.plan_card .popular_tag{ position: absolute; top: -23px; left: 91px; display: inline-flex; align-items: flex-start;}
.plan_card .popular_tag span{ font-weight: 500; color: var(--brand700); position: relative; top: -5px; display: inline-block;}
.plan_card .plan_card_head{ margin: 0; padding: 0 0 16px;}
.plan_card .plan_card_body{ margin: 0; padding: 16px 0 0; border-top: 1px dashed var(--grey300); flex-grow: 1;}
.plan_card .title{ display: flex; gap: 12px; align-items: center; justify-content: space-between;}
.plan_card  h2{ margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 30px; color: var(--grey900);}
.plan_card p{ margin: 0 0 32px; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--grey600);}
.plan_card .price{ margin: 0; font-size: 36px; font-weight: 600; line-height: 44px; letter-spacing: -0.96px; color: var(--grey700);}
.plan_card .price span{ font-size: 16px; font-weight: 400; line-height: 24px; color: var(--grey500); letter-spacing: 0;}
.plan_card .plan_card_footer{padding: 12px 4px 0; margin: 0;}
.plan_card h3{ margin: 0 0 16px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--grey900);}
.plan_card ul{ margin: 0; padding: 0; list-style: none;}
.plan_card ul li{ margin: 0 0 16px; padding: 0 0 0 32px; position: relative; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--grey600);}
.plan_card ul li::before{ content: ""; width: 24px; height: 24px; background: url(../images/list-true-ic24x.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; left: 0;}
.plan_card ul li.false::before{ background-image: url(../images/list-false-ic24x.svg);}

/*============================= Settings Modual CSS Start Here =============================*/
.settings-wrapper > .content-body{ background: var(--grey25);}
.settings-wrapper .nav-tabs.style2 .nav-link{ min-width: auto;}
.settings-wrapper h6{ margin: 0 0 5px; font-size: 14px; font-weight: 600; color: var(--grey700); line-height: 20px;}

.store-info{ margin: 0 0 24px; padding: 12px; background: var(--grey100); border-radius: 12px; display: flex; gap: 16px; align-items: center;}
.store-info:last-child{ margin-bottom: 0;}
.store-info i{ width: 20px; min-width: 20px; display: flex;}
.store-info p{ margin: 0; color: var(--grey500);}

.setting_tab_item{ margin: 0 0 24px; padding: 12px 16px; border-radius: 12px; display: flex; gap: 16px; border: 1px solid var(--grey200);}
.setting_tab_item:last-child{ margin-bottom: 0;}
.setting_tab_item p{ margin: 0; color:var(--grey500);}
.setting_tab_item .dtl{flex: 1; display: flex; gap: 16px; align-items: center; align-self: center;}
.setting_tab_item .ldtl{flex: 1;}
.setting_tab_item .rdtl{ flex: 0 0 320px;}
.setting_tab_item .marrow{ width: 20px; min-width: 20px; display: flex;}

.store-info.setting_tab_item{ background: none;}
.store-info.setting_tab_item > div{ flex-grow: 1;}

.notification-tab .card_head{ padding: 12px 16px;}
.notification-tab .form_block .form-control{ max-width: 520px;}
.notification-tab .form_block p{ margin: 6px 0 0; color: var(--grey600);}
.notification-tab .form_block p a{ color: var(--brand700); font-weight: 500; text-decoration: underline;}
.notification-tab .form_block p a:hover{ color: var(--brand500);}
.notification-tab p{color: var(--grey500);}

.sp_advanced_block .detail{ padding: 16px 0 0; border-top: 1px dashed var(--grey300);}
.sp_advanced_block h2{margin: 0 0 16px; font-size: 20px; font-weight: 600; line-height: 30px; color: var(--grey900);}
.sp_advanced_block h3{ margin: 0 0 16px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--grey900);}
.sp_advanced_block ul{ margin: 0; padding: 0; list-style: none;}
.sp_advanced_block ul li{ margin: 0 0 16px; padding: 0 0 0 32px; position: relative; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--grey600);}
.sp_advanced_block ul li:last-child{ margin-bottom: 0;}
.sp_advanced_block ul li::before{ content: ""; width: 24px; height: 24px; background: url(../images/list-true-ic24x.svg) no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; left: 0;}
.sp_advanced_block ul li.false::before{ background-image: url(../images/list-false-ic24x.svg);}

.simple_link{ color: var(--brand700); font-weight: 600; text-decoration: none;}
.simple_link:hover{ color: var(--brand500);}
.billing-tab .setting_tab_item .rdtl{ flex: 0 0 auto;}
.settings-wrapper .total{ margin: 0; display: flex; align-items: center; gap: 12px;}
.settings-wrapper .total strong{ font-size: 20px; font-weight: 600; color: var(--grey700); display: inline-block;}

/*============================= Help Page CSS Start Here =============================*/
.nav-tabs.style3{margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--grey200); display: flex; gap: 20px;}
.nav-tabs.style3 .nav-item{ margin: 0 0 -1px; padding: 0;}
.nav-tabs.style3 .nav-item .nav-link{ margin: 0; padding: 0 4px 13px; font-weight: 600; color: var(--grey500);  border-radius: 0; border-bottom: 2px solid transparent; border-top: none; border-left: none; border-right: none;}
.nav-tabs.style3 .nav-item .nav-link:hover{ color: var(--brand700);}
.nav-tabs.style3 .nav-item .nav-link.active{ border-color: var(--brand700); color: var(--brand700);}

.helpfaq-wrapper .container{ max-width: 1200px;}
.help-faq{ margin: 0; padding: 0; display: flex; gap: 24px;}
.help-faq .left_part{  width: 280px; min-width: 280px;}
.help-faq .left_part .faq-nav{ margin: 0; padding: 12px; position: sticky; top: 0; box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border-radius: 12px;}
.help-faq .left_part .faq-nav .nav-item{ margin: 0 0 8px; padding: 0;}
.help-faq .left_part .faq-nav .nav-item:last-child{ margin-bottom: 0;}
.help-faq .left_part .faq-nav .nav-link{ margin: 0; padding: 9px 16px 10px; font-size: 14px; font-weight: 500; color: var(--grey600); border-radius: 6px; width: 100%; text-align: start;}
.help-faq .left_part .faq-nav .nav-link.active{ background: var(--grey100); color: var(--grey800); font-weight: 600;}
.help-faq .left_part .faq-nav .nav-link:hover{ background: var(--grey50);}
.help-faq .right_part{ flex: 1;}

.faq_accordion{ margin: 0; padding: 0;}
.faq_accordion .accordion-item{ margin: 0 0 24px; position: relative; background: #FFFFFF; box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); border-radius: 12px;}
.faq_accordion .accordion-button{ margin: 0; padding: 16px 52px 16px 16px; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--grey700); background: transparent; border: none; box-shadow: none; transition:all .3s ease-in-out;}
.faq_accordion .accordion-button:not(.collapsed){ padding-bottom: 12px;}
.faq_accordion .accordion-button::after{ background: url(../images/arrow-down-20x.svg) no-repeat center center; width: 20px; height: 20px; position: absolute; top: 50%; transform: translateY(-50%); right: 16px;}
.faq_accordion .accordion-button:not(.collapsed)::after{ transform: translateY(-50%) rotate(-180deg);}
.faq_accordion .accordion-body{ padding: 0 52px 16px 16px;}
.faq_accordion .accordion-body p{ margin: 0 0 12px; font-weight: 400; color: var(--grey500);}
.faq_accordion .accordion-body p:last-child{ margin-bottom: 0;}

.helpvideo-wrapper .container{ margin: 0 0 0 200px;}
@media (min-width:1580px) {
    .helpvideo_sidebar.offcanvas{ transform: none; visibility: visible;}
    .helpvideo_sidebar.offcanvas .offcanvas-header .btn-close{ display: none;}
    .d-none-desktop{ display: none;}
}
.helpvideo_sidebar.offcanvas{ max-width: 400px; border-left: 1px solid var(--grey200); box-shadow: 0px 8px 8px -4px #0A0D1208, 0px 20px 24px -4px #0A0D1214;}

.video_block{ margin: 0; padding: 12px 12px 16px; width: 100%; background: var(--white); border: 1px solid var(--grey200); border-radius: 12px; box-shadow: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.06); }
.video_block .video_head{ position: relative; margin: 0 0 16px;}
.video_block figure{ margin: 0; padding: 0; height: 140px; width: 100%; display: flex; border-radius: 12px; position: relative; border-radius: 8px; overflow: hidden;}
.video_block figure img{ height: 100%; width: 100%; object-fit: cover; border-radius: 8px;}
.video_block figure iframe{ width: 100%; height: 100%; border-radius: 8px; line-height: inherit; display: flex; position: absolute; top: 0; left: 0; display: none;}
.video_block .playtime_info {margin: 0; padding: 4px 7px; background: var(--white); color: var(--grey700); font-weight: 500; line-height: 20px; display: flex; align-items: center; gap: 4px; border-radius: 8px; position: absolute; bottom: 12px; left: 12px;}
.video_block .vd_tag{ margin: 0 0 12px; color: var(--brand700); font-weight: 600; display: block;}
.video_block h4{ margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--grey900); overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.video_block .play_btn{margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand700); text-decoration: none;}
.video_block p{overflow: hidden; width:100%; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.video_modal .modal-dialog{ max-width: 600px;}
.video_modal .btn-close{ position: absolute; right: 10px; top: 10px;}
.video_modal iframe{ margin: 20px 0 0; width: 100%; height: 315px; border-radius: 12px;}

.theme-datatable table.hsupport_table > tbody > tr > td{ padding-top: 10px; padding-bottom: 10px;}
.theme-datatable table.hsupport_table tbody tr td a{ font-weight: 500; text-decoration: underline; color: var(--brand700); width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}
.theme-datatable table.hsupport_table tbody tr td a:hover{ color: var(--brand500);}

.hsviewticket_modal figure{ margin: 0 0 24px; height: 266px; width: 100%; overflow: hidden; border-radius: 8px; position: relative;}
.hsviewticket_modal figure > img{ width: 100%; height: 100%; object-fit: cover; border-radius: 8px; transition: all .4s;}
.hsviewticket_modal .vtdwnlad_info{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all .4s; opacity: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.hsviewticket_modal .vtdwnlad_info a{ width: 36px; height: 36px; display: inline-flex; background: var(--white); border: 1px solid var(--grey300); box-shadow: 0px 1px 2px 0px #0A0D120D; border-radius: 8px; justify-content: center; align-items: center;}
.hsviewticket_modal .vtdwnlad_info a:hover{ background: var(--grey300);}
.hsviewticket_modal figure:hover .vtdwnlad_info{ opacity: 1;}

.fileupload_block{ background: var(--white); border: 1px solid var(--grey200); padding: 12px 16px 16px 12px; border-radius: 8px; display: flex; gap: 4px; align-items: flex-start;}
.fileupload_block i{ width: 36px; min-width: 36px; display: flex;}
.fileupload_block .delete{ width: 20px; min-width: 20px; display: flex; margin-top: 4px;}
.fileupload_block .done{ width: 16px; min-width: 16px; display: flex; margin-top: 4px;}
.fileupload_block > div{ flex-grow: 1; padding: 4px 0 0 8px;}
.fileupload_block h6{ margin: 0; font-size: 14px; font-weight: 500; color: var(--grey700);}
.fileupload_block .mpinfo{ margin: 0; color: var(--grey600);}
.fileupload_block .progress_info{ display: flex; gap: 12px; align-items: center; margin: 4px 0 0;}
.fileupload_block .progress_info .progress{ flex: 1;}
.fileupload_block .progress_info span{ font-weight: 500; color: var(--grey700); min-width: 38px;}
.fileupload_block .error_msg{ color: var(--error700); margin-top: 4px;}

.addnewticket_modal .form_block textarea{ height: 128px; resize: none;}
.addnewticket_modal .csvfile_upload{padding: 16px 24px; border: 1px solid var(--grey300); border-radius: 8px;}

.submit_msg_modal .modal-dialog{ max-width: 800px;}
.submit_msg_modal.modal .modal-content{ border: 1px solid var(--grey200);}
.submit_msg_modal .btn-close{ width: 24px; height: 24px; padding: 0; opacity: 0.7; background-size: 12px;}
.submit_msg_modal .btn-close:hover{ opacity: 1;}
.submit_msg_modal.modal.show ~ .modal-backdrop{ opacity: 0 !important;}

/* Search Toggle box */
.search-wrapper { position: relative; width: 36px; height: 36px; z-index: 5;}
.search-wrapper .search-toggle{ display: flex;}
.search-wrapper .search-toggle button{ transition: all 0.3s ease;}
.search-wrapper .search-box{ position: absolute; top: 0; right: 0; width: 0; height: 36px; opacity: 0; overflow: hidden; border-radius: 8px; background: var(--white); border: 1px solid var(--grey300); transition: all 0.3s ease; box-shadow: 0px 1px 2px 0px #0A0D120D;}
.search-wrapper.active .search-box { width: 320px; opacity: 1;}
.search-wrapper.active .search-toggle { opacity: 0; pointer-events: none;}
.search-wrapper .search-box input { width: 100%; height: 100%; border: none; outline: none; padding: 0 12px 0 42px; font-size: 16px; color: var(--grey700);}
.search-wrapper .search-box ::placeholder{ color: var(--grey500);}
.search-wrapper .search-box .search-icon { width: 20px; height: 20px; background: none; padding:0; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); border: none;display: flex;align-items: center;justify-content: center;}

.filter-options .dropdown-item:hover, .filter-options .dropdown-item:focus,
.filter-options .dropdown-item.active, .filter-options .dropdown-item:active {
    background-color: #f6f7f9 !important;
    color: #1e1e1e !important;
}

.custom-toast-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -40px);
    width: 339px;
    min-height: 44px;
    border-radius: 8px;
    z-index: 11000;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-toast-container.show {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.custom-toast-info {
    background: #1570EF !important;
}

.custom-toast-success {
    background: #039855 !important;
}

.custom-toast-error {
    background: #D92D20 !important;
}

.custom-toast-warning {
    background: #DC6803 !important;
}

.custom-toast-icon-wrapper {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.custom-toast-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

.custom-toast-message {
    width: 251px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF !important;
    flex: none;
    order: 1;
    flex-grow: 1;
    margin: 0;
}

.custom-toast-close {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 2;
    flex-grow: 0;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.custom-toast-close:hover {
    opacity: 1;
}

.custom-toast-close svg {
    width: 20px;
    height: 20px;
}

.custom-toast-icon, .custom-toast-close-icon {
    filter: brightness(0) invert(1) !important;
}

.search-results{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    border:1px solid #ddd;
    border-radius:6px;
    z-index:1000;
}

.search-item{
    padding:8px 12px;
    cursor:pointer;
}

.search-item:hover{
    background:#f4f6f8;
}
.exconlist_title {
    scroll-margin-top: 90px;
}
.exconnection_lists {
    padding-bottom: 60vh;
}

#bundle-page-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}