@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --color-primary: #0078D4;
    --color-secondary: #264653;
    --color-accent: #2A9D8F;
    --color-text-blue: #7184AD;
    --color-text-grey: #6C757D;
    --text-gray-900: #101828;
    --text-gray-800: #1F2A44;
    --text-gray-700: #344054;
    --text-gray-600: #4B5563;
    --text-gray-500: #667085;
    --text-gray-400: #9CA3AF;
    --text-gray-300: #D1D5DB;
    --text-gray-200: #E5E7EB;
    --text-gray-100: #F9FAFB;
    --color-white: #FFFFFF;
    --color-off-white: #F2F2F2;
    --color-off-black: #313131;
    --color-border: #EBEBEB;
    --color-danger: #B42318;
    --color-danger-bg: #FEE4E2;
    --color-warning: #FF8F20;
    --color-success: #027A48;
    --color-success-bg: #D1FADF;
    --color-info: #354153;
    --base-fz: 14px;
    --fz-xs: 12px;
    --fz-sm: 14px;
    --fz-md: 16px;
    --fz-lg: 18px;
    --fz-xl: 20px;
    --fz-2xl: 24px;
    --fz-3xl: 32px;
    --fz-4xl: 40px;
    --fz-5xl: 48px;
    --fz-6xl: 56px;
    --fw-sm: 400;
    --fw-md: 500;
    --fw-lg: 600;
    --fw-xl: 700;
    --lg-sm: 1.2;
    --lg-md: 1.4;
    --lg-lg: 1.6;
    --br-sm: 4px;
    --br-md: 8px;
    --br-lg: 12px;
    --br-xl: 16px;
    --br-2xl: 20px;
    --br-3xl: 24px;
    --br-4xl: 28px;
    --br-5xl: 32px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 28px;
    --space-4xl: 32px;
    --space-5xl: 40px;
    --space-6xl: 48px;
    --space-7xl: 56px;
    --space-8xl: 64px;
    /* 
    --fz-xs: 12px;
    --fz-sm: 14px;
    --fz-md: 16px;
    --fz-lg: 18px;
    --fz-xl: 20px;
    --fz-2xl: 24px;
    --fz-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 36px;


    --fw-sm: 400;
    --fw-md: 500;
    --fw-lg: 600;
    --fw-xl: 700;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-xs: 16px;
    --space-sm: 20px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --br-sm: 4px;
    --br-md: 8px;
    --br-lg: 12px;
    --br-3xl: 24px;
    --br-5xl: 32px; */

    --box-shadow: #83818133 0px 4px 24px 0px;
    --subheader-height: 0px;
}

body {
    margin: 0;
    background-color: #F5F5F5;
    font-family: "Inter", sans-serif;
    font-size: var(--base-fz);
    font-weight: var(--fw-sm);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-gray-900);
    font-weight: var(--fw-lg);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
}

    a:hover {
        color: var(--color-accent);
    }

    a:active {
        color: var(--color-accent);
    }


.button {
    text-transform: capitalize;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    border-radius: var(--br-md);
    cursor: pointer;
    transition: background-color 0.3s;
    border: 2px solid currentColor;
    color: var(--color-off-white);
}

.button-small {
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    border-radius: var(--br-md);
    cursor: pointer;
    transition: background-color 0.3s;
    border: 2px solid currentColor;
    color: var(--color-off-white);
}

.button-x-small {
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    border-radius: var(--br-md);
    cursor: pointer;
    transition: background-color 0.3s;
    border: 2px solid currentColor;
    color: var(--color-off-white);
}

.button-primary {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.button-inactive {
    background-color: #64748B;
    border: 2px solid #64748B;
}

.button-secondary {
    background-color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.button-tertiary {
    background-color: var(--color-off-white);
    color: var(--color-grey);
    border: 2px solid var(--color-off-white);
}

.button-text {
    background-color: transparent;
    color: var(--text-gray-900) !important;
    padding: 0;
}

.nav-button {
    text-transform: capitalize;
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--fz-sm);
    border-radius: var(--br-sm);
    cursor: pointer;
    transition: background-color 0.3s;
    border: none;
    color: var(--color-off-white);
}

.nav-button-primary {
    background-color: var(--color-primary);
}

.nav-button-secondary {
    background-color: var(--color-off-black);
}

.nav-button-tertially {
    background-color: var(--color-off-white);
    color: var(--color-off-black);
}

.button:hover,
.button:focus {
    box-shadow: var(--box-shadow);
}

.button-small:hover,
.button-small:focus {
    box-shadow: var(--box-shadow);
}

.button-primary:hover,
.button-primary:focus {
    color: var(--color-off-white);
    background-color: var(--color-secondary);
    box-shadow: var(--box-shadow);
}

.button-secondary:hover,
.button-secondary:focus {
    background-color: var(--color-accent);
    box-shadow: var(--box-shadow);
}

.button-tertiary:hover,
.button-tertiary:focus {
    color: var(--color-off-white);
    background-color: var(--color-secondary);
    box-shadow: var(--box-shadow);
}

.refresh-button {
    margin-left: var(--space-md);
    color: var(--text-gray-700);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 20px;
    padding: var(--space-xs) var(--space-md);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    background: var(--color-off-white);
}

    .refresh-button img {
        margin-right: var(--space-xs);
        width: 14px;
        height: 14px;
    }

    .refresh-button span {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        margin-left: var(--space-sm);
    }

.input-label {
    color: #344054;
    font-size: var(--fz-xs);
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.input,
.input-select {
    width: 100%;
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    background-color: #E9EDF2;
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    box-sizing: border-box;
}

.input-left-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-20%);
    left: var(--space-xl);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.input-select-right-icon {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/images/select-chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 20px 20px;
}

.input-select-left-icon {
    padding-left: var(--space-3xl);
}

.input:focus {
    border-color: var(--color-accent);
    outline: none;
}

.input-select:focus {
    border-color: var(--color-accent);
    outline: none;
}

.input-check label {
    font-size: var(--fz-sm);
}

.section-header {
    margin-bottom: var(--space-xl);
}

    .section-header h1 {
        margin-bottom: var(--space-md);
        color: var(--color-lighter-black);
    }

    .section-header p {
        font-size: var(--fz-md);
        margin-bottom: var(--space-md);
        color: var(--color-lighter-black);
    }

.alert {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    color: var(--text-gray-900);
    text-align: center;
    padding: var(--space-sm) var(--space-md) !important;
    border: none;
    border-radius: var(--br-5xl) !important;
}

    .alert img {
        height: 12px !important;
        width: 12px !important;
    }

    .alert mark {
        font-weight: var(--fw-lg);
        background-color: transparent;
    }

.alert-danger {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}

    .alert-danger mark {
        color: var(--color-danger);
    }

    .alert-danger a {
        color: var(--color-danger);
        text-decoration: underline;
        text-underline-offset: 2px;
        font-weight: var(--fw-xl);
    }

    .alert-danger .button-close {
        color: var(--color-danger);
        border-right: solid 2px #EBB4AF !important;
    }

.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

    .alert-success mark {
        color: var(--color-success);
    }

    .alert-success .button-close {
        border-right: solid 2px #9DD9B8 !important;
    }

.alert-dismissible .button-close {
    position: absolute;
    left: 0;
    padding-left: var(--space-md);
    border: none;
    font-weight: var(--fw-md);
    background-color: transparent;
    overflow: hidden;
}

.custom-modal .button-tertiary {
    color: #344054;
    border: solid 1.8px #D0D5DD;
    background-color: var(--color-white);
}

.custom-breadcrumb {
    list-style: none;
    padding: 0;
    display: flex;
    gap: var(--space-sm);
    font-size: var(--fz-sm);
}

    .custom-breadcrumb li {
        position: relative;
    }

        .custom-breadcrumb li:not(:last-child)::after {
            content: "/";
            position: absolute;
            right: -14px;
            color: #98A2B3;
        }

        .custom-breadcrumb li a {
            text-decoration: none;
            color: #98A2B3;
        }

        .custom-breadcrumb li.current a {
            color: #344054;
            font-weight: 600;
        }

        .custom-breadcrumb li a:hover {
            text-decoration: underline;
        }

/* Base content header */
.content-header-wrapper {
    margin-top: var(--space-lg);
}

.content-header {
    margin-bottom: var(--space-lg);
}

.content-header-title {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-lg);
    line-height: 22px;
}

.content-header-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 14px;
    margin-bottom: 0;
}

.content-header-action {
    flex-shrink: 0;
}

    .content-header-action .button-primary {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        color: var(--color-primary);
        background-color: var(--color-white);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        border: solid 1px var(--color-primary);
        border-radius: var(--br-md);
        padding: var(--space-sm) var(--space-md);
    }

        .content-header-action .button-primary img {
            width: 16px;
            height: 16px;
        }

.content-header-search-wrapper {
    background-color: #E9EDF2;
    padding: var(--space-sm);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
}

.content-header-search {
    font-size: var(--fz-xs);
    color: #667085;
    width: 400px;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('/images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-5xl);
}

    .content-header-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.content-header-input,
.content-header-select {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    background-color: var(--color-white);
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: 0;
    box-sizing: border-box;
}

.content-header-select {
    background-image: url('/images/icons/icon-dark');
    background-repeat: no-repeat;
    background-position: right var(--space-xs) center;
    background-size: 16px 16px;
    padding-right: var(--space-xl);
    padding-left: var(--space-xs);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* Base Empty State Styling */
.empty-state-container {
    min-height: 60vh;
}

.empty-state-illustration {
    width: 260px;
    height: auto;
    object-fit: cover;
    margin-bottom: var(--space-sm);
}

.empty-state-content {
    margin-bottom: var(--space-2xl);
}

.empty-state-heading {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-xs);
}

.empty-state-text {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin-bottom: 0;
}

.empty-state-button {
    display: inline-block;
    padding: var(--space-sm) var(--space-sm);
}

/* Base data table */
.data-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-200);
    border-radius: var(--br-lg);
    margin-bottom: var(--space-2xl);
}

.data-table-header {
    padding: var(--space-2xl) var(--space-2xl) var(--space-lg) var(--space-2xl);
}

.data-table-header-info {
    flex: 1;
}

.data-table-header h6 {
    font-size: var(--fz-sm);
    color: var(--text-gray-900);
    margin-bottom: var(--space-xs);
}

.data-table-description {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin-bottom: 0;
    line-height: 20px;
}

.data-table-search {
    min-width: auto;
    width: 100%;
    font-size: var(--fz-xs);
    color: #667085;
    background-color: var(--color-white);
    border: solid 1px #D0D5DD;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('/images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-5xl);
}

    .data-table-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.data-table {
    width: 100%;
    min-width: 800px;
    white-space: nowrap;
    margin-bottom: 0;
}

    .data-table thead th {
        font-size: var(--fz-xs);
        font-weight: var(--fw-lg);
        color: var(--text-gray-500);
        padding-left: 0;
    }

    .data-table tbody td {
        vertical-align: middle;
        color: var(--text-gray-900);
        font-size: var(--fz-xs);
        padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
        white-space: wrap;
    }

.data-table-wrapper .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table tbody td:last-child {
    text-align: right;
    padding-right: var(--space-2xl);
}

.data-table-icon {
    width: 16px;
    height: 16px;
    margin-right: var(--space-xs);
}

.data-table-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E6F0FA;
    color: #005CA3;
    font-weight: var(--fw-lg);
    font-size: var(--fz-xs);
    margin-right: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.data-table .button-small {
    margin: 0;
}

.data-table-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-2xl);
}

    .data-table-pagination button {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
        padding: var(--space-sm) var(--space-md);
    }

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

        .data-table-pagination ul li {
            display: inline-block;
            margin-right: var(--space-lg);
        }

            .data-table-pagination ul li a {
                font-size: var(--fz-xs);
                font-weight: 500;
                color: var(--text-gray-500);
            }

                .data-table-pagination ul li a.active {
                    color: #005CA3;
                    background-color: #CEE4F4;
                    padding: var(--space-sm) var(--space-md);
                    border-radius: var(--br-md);
                }

/*Borderless display table*/

.borderless-display-table {
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--space-xs);
    margin-bottom: 0;
}

    .borderless-display-table .bdt-title,
    .borderless-display-table .bdt-content {
        padding: 0;
        margin: 0;
        vertical-align: top;
    }

    .borderless-display-table .bdt-title {
        font-size: var(--fz-sm);
        font-weight: var(--fw-sm);
        color: var(--text-gray-500);
        width: 50%;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .borderless-display-table .bdt-content {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--text-gray-900);
        width: 50%;
        padding-left: var(--space-sm);
        word-break: break-word;
    }

.bdt-icon {
    height: 14px;
    width: 14px;
    margin-right: var(--space-sm);
}


/*Status badge*/
.status-badge {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--br-md);
    color: var(--text-gray-900);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

    .status-badge img {
        width: 14px;
        height: 14px;
    }

.status-success {
    background-color: #A6DFBB;
}

.status-warning {
    background-color: #EFE09F;
}

.status-error {
    background-color: #FFC7CE;
}

.status-info {
    background-color: #D6EDFF;
}

/*Account drawer*/
.account-drawer {
    width: 500px;
}

    .account-drawer .drawer-header {
        padding: var(--space-2xl);
        margin-bottom: 0;
    }

.account-drawer-header {
    font-size: var(--fz-lg);
    font-weight: var(--fw-md);
    gap: var(--space-2xl);
    margin-bottom: var(--space-xs);
}

.account-drawer .drawer-content-wrapper {
    padding: 0;
}

.accout-avatar-bg {
    background-image: url('/images/account-drawer-bg.svg');
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.account-drawer .user-management-drawer-user {
    position: relative;
    margin-top: -40px;
    z-index: 1;
    padding: 0 var(--space-2xl);
}

.account-drawer .drawer-body {
    padding: 0 var(--space-2xl);
}

/* End Base styles */

/* User operations styles */
.auth-wrapper {
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.user-start-container {
    height: 100vh;
    background-color: var(--color-primary);
    overflow: hidden;
}

.user-account-container {
    height: auto;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 0;
}

.logo-container {
    padding: var(--space-2xl) var(--space-lg) 0 var(--space-lg);
    flex-shrink: 0;
}

    .logo-container button {
        border: solid 1px var(--text-gray-300);
    }

.user-account-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-3xl);
    width: 100%;
}

@media (min-width: 1028px) {
    .user-account-content {
        width: 70% !important;
    }
}

.user-account-image {
    width: 120px;
    height: auto;
    margin-bottom: var(--space-2xl);
}

.user-account-title {
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
    margin-bottom: var(--space-md);
}

.user-account-description {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
    margin-bottom: var(--space-lg);
}

    .user-account-description mark {
        color: var(--color-primary);
        font-weight: var(--fw-lg);
        background-color: transparent;
        padding: 0;
        margin: 0;
    }

.user-account-form {
    max-width: 100%;
}

    .user-account-form .position-absolute {
        width: 16px;
        height: 16px;
        z-index: 1;
        top: 48%;
        left: var(--space-md);
    }

    .user-account-form .eye-icon {
        right: var(--space-md);
        left: auto;
    }

    .user-account-form .input-label {
        font-size: var(--fz-xs);
    }

    .user-account-form .input {
        font-size: var(--fz-xs);
        padding: var(--space-sm) var(--space-xl);
        padding-left: var(--space-4xl) !important;
    }

    .user-account-form #phoneNumber {
        padding-left: 100px !important;
    }

    .user-account-form .iti__flag-container {
        margin-right: var(--space-8xl);
    }

    .user-account-form .form-action {
        margin-top: var(--space-xs);
    }

.user-account-forgot-password {
    margin-top: var(--space-lg);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 24px;
    color: var(--text-gray-500);
}

    .user-account-forgot-password a {
        font-weight: var(--fw-lg);
        color: var(--color-primary);
        text-decoration: none;
    }

.user-account-code-inputs {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-lg);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.user-account-code-input {
    color: var(--color-primary);
    text-align: center;
    font-size: var(--fz-2xl);
    font-weight: var(--fw-lg);
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-primary);
    border-radius: var(--br-md);
    background: none;
    transition: all 0.3s ease;
    flex: 0 1 40px;
    min-width: 0;
}

@media (max-width: 400px) {
    .user-account-code-inputs {
        gap: var(--space-md);
        max-width: 100%;
    }

    .user-account-code-input {
        width: 32px;
        height: 32px;
        font-size: var(--fz-xl);
    }
}

.user-account-code-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: none;
}

.error-form .user-account-code-input {
    color: #F04438;
    border-color: #F04438;
}

    .error-form .user-account-code-input:focus {
        border-color: #F04438;
        box-shadow: none;
    }

.error-form .user-account-resend-code,
.error-form .user-account-resend-code a {
    color: #F04438;
}

.user-account-resend-code {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 24px;
    color: var(--text-gray-500);
    margin-bottom: var(--space-lg);
}

    .user-account-resend-code a {
        font-weight: var(--fw-lg);
        color: var(--color-primary);
        text-decoration: none;
    }

.user-account-back-to-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 24px;
    color: var(--text-gray-500);
    margin-top: var(--space-md);
}

    .user-account-back-to-login img {
        width: 12px;
        height: 12px;
    }

.user-account-wait-time {
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    line-height: 24px;
    color: var(--text-gray-700);
    margin-bottom: var(--space-lg);
}

    .user-account-wait-time mark {
        color: var(--color-primary);
        font-weight: var(--fw-lg);
        background-color: transparent;
        padding: 0;
        margin: 0;
    }

.user-account-password-strength {
    margin-bottom: var(--space-xs);
}

.user-account-password-check {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin-bottom: var(--space-xs);
}

    .user-account-password-check:last-child {
        margin-bottom: 0;
    }

.user-account-turnstile {
    margin-bottom: var(--space-xs);
}

.user-account-privacy-policy {
    margin: var(--space-xs) 0;
}

    .user-account-privacy-policy .form-check {
        display: flex;
        align-items: flex-start;
        gap: var(--space-lg);
    }

    .user-account-privacy-policy .form-check-input {
        margin-top: 2px;
        margin-right: 0;
    }

    .user-account-privacy-policy .form-check-label {
        font-size: var(--fz-sm);
        color: var(--text-gray-600);
        line-height: 1.4;
    }

        .user-account-privacy-policy .form-check-label a {
            color: var(--color-primary);
            font-weight: var(--fw-lg);
        }

.auth-wrapper .form-action button {
    font-size: var(--fz-sm);
    padding: var(--space-sm) var(--space-xl);
}

.account-locked-illustration {
    background-image: url('/images/account-locked-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.padlocks-illustration {
    background-image: url('/images/padlocks-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.otp-illustration {
    background-image: url('/images/otp-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.pin-lock-illustration {
    background-image: url('/images/pin-lock-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.padlock-envelope-illustration {
    background-image: url('/images/padlock-envelope-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.padlock-spring-illustration {
    background-image: url('/images/padlock-spring-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.auth-success-illustration {
    background-image: url('/images/auth-success-illustration.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Layout styles */

.navbar-toggler {
    color: var(--color-off-black);
    font-size: var(--fz-xl);
    border: none;
    outline: transparent;
    box-shadow: none;
}

    .navbar-toggler:focus {
        box-shadow: none;
    }

.offcanvas {
    width: 90% !important;
    background-color: #F7F8FA;
}

.offcanvas-body ul {
    margin-bottom: var(--space-xxl) !important;
}

    .offcanvas-body ul li {
        margin-bottom: var(--space-md);
    }

        .offcanvas-body ul li a {
            color: var(--color-off-black);
            font-size: var(--fz-md);
            font-weight: var(--fw-lg);
        }

            .offcanvas-body ul li a:hover,
            .offcanvas-body ul li a:focus {
                color: var(--color-accent);
                transition: color 0.3s;
            }

.sidebar {
    position: fixed;
    height: 100vh;
    z-index: 1030;
    background-color: #282F3C;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    word-break: break-word;
}

.sidebar-alt-section {
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    word-break: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidebar-alt-section::-webkit-scrollbar {
        display: none;
    }

.side-nav-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dashboard-brand {
    margin-bottom: var(--space-lg);
}

    .dashboard-brand img {
        width: 120px;
        height: auto;
    }

.side-nav li {
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-sm);
}

.sidebar .side-nav .nav-item .nav-link span.d-flex.align-items-center img {
    width: 16px;
    height: 16px;
    margin-right: var(--space-xs);
}

.side-nav .nav-item a {
    align-items: center;
    color: var(--text-gray-200);
    padding: var(--space-sm);
}

    .side-nav .nav-item a:hover {
        color: var(--color-accent);
    }

.side-nav span {
    font-size: var(--fz-xs);
}

.side-nav .bi-chevron-right {
    font-size: var(--fz-xs);
}

.side-nav .nav-link.active {
    background-color: #101828;
    margin-bottom: var(--space-xs);
    border-radius: var(--br-md);
}

.nav-item .submenu {
    font-size: var(--fz-xs);
    margin-left: var(--space-lg);
    border-left: solid 1px var(--text-gray-300);
    margin-bottom: var(--space-lg);
}

.side-nav-footer {
    padding: 0 var(--space-sm);
    margin-top: auto;
}

.side-footer-settings {
    padding: var(--space-md) 0;
    border-bottom: solid 1px var(--text-gray-300);
}

    .side-footer-settings a {
        font-size: var(--fz-xs);
        color: var(--text-gray-200);
    }

        .side-footer-settings a:hover,
        .side-footer-settings a:focus {
            color: var(--color-accent);
        }

    .side-footer-settings .submenu {
        font-size: var(--fz-xs);
        margin-left: var(--space-sm);
        padding-left: var(--space-sm);
        border-left: solid 1px var(--color-border);
        margin-bottom: var(--space-md);
    }

        .side-footer-settings .submenu .nav-link {
            margin-top: var(--space-md);
        }

.side-footer-user {
    padding-top: var(--space-md);
    font-size: var(--fz-xs);
    color: var(--text-gray-200);
}

    .side-footer-user .avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--space-3xl);
        height: var(--space-3xl);
        border-radius: 50%;
        background: var(--color-accent);
        color: var(--text-gray-200);
        font-weight: var(--fw-md);
        font-size: var(--fz-xs);
    }

.user-meta {
    font-size: var(--fz-xs);
    padding: 0;
    margin: 0;
}

    .user-meta p {
        font-size: var(--fz-xs);
        margin: 0;
    }

.sidebar-sm {
    width: 80px !important;
    z-index: 9999;
    overflow: visible !important;
}

.col-md-2.sidebar {
    overflow: visible !important;
}

.sidebar-sm .nav-text,
.sidebar-sm .user-meta,
.sidebar-sm .chevron,
.sidebar-sm .side-footer-user a {
    display: none !important;
}

.sidebar-sm .nav-link {
    justify-content: center !important;
    padding: var(--space-sm) !important;
}

    .sidebar-sm .nav-link img {
        margin: 0 !important;
    }

.sidebar-sm .side-nav-wrapper {
    align-items: center;
}

.sidebar-sm .dashboard-brand {
    margin-bottom: var(--space-sm) !important;
}

    .sidebar-sm .dashboard-brand a:first-child {
        display: none !important;
    }

    .sidebar-sm .dashboard-brand a:last-child img {
        width: 28px;
        height: auto;
        margin-bottom: var(--space-lg);
    }

.sidebar-sm .side-nav {
    align-items: center;
}

.sidebar-sm .nav-item {
    width: 100%;
    margin-bottom: var(--space-sm) !important;
    position: relative;
    z-index: 9999;
}

.sidebar-sm .nav-link.active {
    background-color: #101828;
    border-radius: var(--br-md);
}

.sidebar-sm .side-nav-footer {
    padding: 0 var(--space-sm);
    align-items: center;
}

.sidebar-sm .side-footer-settings {
    padding: var(--space-xs) 0;
    border-bottom: solid 1px var(--text-gray-300);
    width: 100%;
}

    .sidebar-sm .side-footer-settings .nav-link {
        justify-content: center !important;
    }

.sidebar-sm .side-footer-user {
    padding-top: var(--space-xs);
    justify-content: center !important;
    position: relative;
}

    .sidebar-sm .side-footer-user .d-flex {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm) !important;
    }

    .sidebar-sm .side-footer-user .avatar {
        width: 32px;
        height: 32px;
        font-size: var(--fz-xs);
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .sidebar-sm .side-footer-user .avatar:hover {
            transform: scale(1.05);
        }

.sidebar-sm ~ .main-content {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
    position: relative;
}

.sidebar-sm .submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-sm);
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: none;
}

.sidebar-sm .nav-item:hover .submenu {
    display: block;
}

.sidebar-sm .submenu .nav-link {
    color: var(--text-gray-900);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    white-space: nowrap;
    margin-bottom: 4px;
    padding: 0 !important;
}

    .sidebar-sm .submenu .nav-link:active {
        background-color: var(--color-primary);
    }

    .sidebar-sm .submenu .nav-link.selected {
        background-color: var(--color-primary);
        color: var(--color-off-white);
    }

.sidebar-sm .side-footer-settings .submenu {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}

.sidebar-sm .sidebar-sm-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: var(--color-white) !important;
    border-radius: var(--br-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    padding: var(--space-md);
}

.sidebar-sm .sidebar-sm-has-dropdown:hover .sidebar-sm-dropdown {
    display: block;
}

.sidebar-sm .sidebar-sm-dropdown .dropdown-item.header {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    white-space: nowrap;
    padding: var(--space-xs) var(--space-xs);
    transition: background 0.2s;
    display: block;
}

.sidebar-sm .sidebar-sm-dropdown .dropdown-item {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    white-space: nowrap;
    padding: var(--space-xs) var(--space-xs);
    border-radius: var(--br-sm);
    transition: background 0.2s;
    display: block;
}

    .sidebar-sm .sidebar-sm-dropdown .dropdown-item:hover {
        background: var(--text-gray-200);
    }

.sidebar-sm .avatar-dropdown {
    position: absolute;
    left: 100%;
    bottom: var(--space-sm);
    top: auto;
    min-width: 200px;
    z-index: 9999;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.avatar-logout-btn {
    display: block !important;
}

.sidebar-sm-dropdown.avatar-dropdown .avatar-logout-btn {
    display: block !important;
}

.sidebar-alt-section,
.sidebar-sm-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-toggle-inside {
    font-size: var(--font-size-xs);
    position: absolute;
    top: 20px;
    right: -16px;
    z-index: 1050;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--text-gray-300);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s;
}

.sidebar.sidebar-sm .sidebar-toggle-inside {
    right: -16px;
}

.main-header {
    position: relative;
    background-color: var(--color-white);
    padding: var(--space-lg) var(--space-2xl);
    margin-right: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.layout-alt .main-header::after {
    content: "";
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    height: 0.6px;
    background: var(--text-gray-200);
    bottom: 0;
}

.sub-header {
    background-color: var(--color-white);
    padding: var(--space-lg) var(--space-2xl);
    margin-right: 0;
    box-sizing: border-box;
}

.sub-header-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: none;
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    margin-right: var(--space-sm);
    height: 16px;
    width: 16px;
}

    .sub-header-button img {
        height: 18px !important;
        width: 18px !important;
    }

.sub-header .feature-name {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    margin: 0;
}

.sub-header .breadcrumb {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
    margin-bottom: 0;
}

    .sub-header .breadcrumb .current {
        color: var(--color-primary);
        font-weight: var(--fw-md);
    }

    .sub-header .breadcrumb span:not(:first-child)::before {
        content: "/";
        margin: 0 var(--space-sm);
        color: var(--text-gray-500);
    }

.switch-account {
    border: none;
}

.switch-avatar {
    height: 28px;
}

.switch-account-info {
    line-height: var(--space-lg);
}

.switch-merchant-name {
    color: var(--text-gray-700);
    font-weight: var(--fw-lg) !important;
    font-size: var(--fz-sm);
    margin-bottom: 0;
}

.switch-account-number {
    font-size: var(--fz-xs) !important;
    font-weight: 500 !important;
    color: var(--text-gray-500);
    margin: 0;
}

.switch-account-arrows {
    height: 12px;
}

.switch-account-dropdown {
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: var(--space-lg);
    border: solid 1px var(--text-gray-100);
    box-shadow: var(--box-shadow);
    border-radius: var(--br-md);
}

.switch-account-dropdown-header {
    margin-bottom: var(--space-2xl);
}

    .switch-account-dropdown-header h5 {
        color: var(--text-gray-700);
        font-size: var(--fz-sm);
        margin: 0;
        padding: 0;
    }

    .switch-account-dropdown-header a {
        color: var(--color-primary);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.switch-account-dropdown-body {
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
}

.switch-account-item {
    margin-bottom: var(--space-2xl);
}

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

.switch-account-item-info {
    line-height: var(--space-lg);
}

.account-item-name {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    color: var(--text-gray-700);
    padding: 0;
    margin: 0;
}

.account-item-number {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    padding: 0;
    margin: 0;
}

.switch-account-dropdown-footer a {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
}

.view-accounts-modal {
    width: 680px !important;
    max-width: calc(100vw - 16px);
}

.accounts-list-form {
    margin-bottom: var(--space-sm) !important;
}

    .accounts-list-form input {
        width: 100%;
        border: solid 1px #D0D5DD !important;
        padding: 10px var(--space-xl) !important;
    }

    .accounts-list-form .bi-search {
        color: var(--text-gray-500);
    }

.accounts-filter-btn {
    display: flex;
    color: var(--text-gray-700);
    background-color: transparent;
    padding: 10px var(--space-xs) !important;
    border: solid 1px #D0D5DD;
}

    .accounts-filter-btn img {
        width: 20px !important;
        height: 20px !important;
        object-fit: cover;
    }

.account-filters {
    margin-bottom: var(--space-sm);
    transition: opacity 0.3s ease;
    opacity: 1;
}

    .account-filters.d-none {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

.filter-option {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    padding: 10px var(--space-xs);
    border: solid 1px #D0D5DD;
    border-radius: var(--br-md);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .filter-option .bi-x-lg {
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: scale(0.8);
        display: inline-block;
    }

    .filter-option.selected {
        color: #005CA3;
        background-color: #EBF6FF;
        border-color: #EBF6FF;
    }

        .filter-option.selected .bi-x-lg {
            -webkit-text-stroke: 0.7px currentColor;
            opacity: 1;
            transform: scale(1);
        }

        .filter-option.selected:hover {
            cursor: pointer;
        }

.accounts-section-title {
    font-size: var(--fz-sm) !important;
    font-weight: var(--fw-md);
    color: var(--text-gray-500);
    margin-bottom: var(--space-sm) !important;
}

.accounts-section-list {
    line-height: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.account-item {
    margin-bottom: var(--space-2xl);
}

    .account-item img {
        height: 40px !important;
        width: 40px !important;
    }

.account-name {
    color: var(--text-gray-700) !important;
    font-size: var(--fz-sm) !important;
    font-weight: 600;
    margin-bottom: 0 !important;
}

.account-number {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    margin: 0 !important;
    padding: 0 !important;
}

.account-list-footer {
    padding-top: var(--space-xs);
    border-top: solid 1px var(--text-gray-200);
}

.nav-notifiaction {
    padding-right: var(--space-2xl);
    border-right: solid 2px var(--color-border);
}

.toggle-container {
    font-size: var(--fz-sm);
    display: flex;
    justify-content: center;
    border: solid 2px var(--color-border);
    padding: 3px;
    background-color: #E9EDF2;
    border-radius: var(--br-md);
}

.switch-button {
    color: var(--text-gray-900);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    border: none;
    border-radius: var(--br-md);
    padding: var(--space-sm);
}

    .switch-button.active {
        background-color: var(--color-white);
        color: var(--text-gray-900);
        border-radius: 6px !important;
        border: none;
    }

    .switch-button:hover {
        outline: none;
        box-shadow: none;
    }

.toggle-create {
    border-radius: 50%;
}

.modal-dont-show-again {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 20px;
}

.application-in-review {
    background-color: #CEE4F5;
}

.application {
    font-weight: var(--fw-md);
}

.application-successful {
    background-color: #A6DFBB;
}

.application-pending-review {
    background-color: #EFE09F;
}

.application-rejected {
    background-color: #F6B6C5;
}

.application-needs-changes {
    background-color: #EFECF0;
}

/* Home overview styles */
.welcome-overview {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

    .welcome-overview h2 {
        color: var(--text-gray-900);
        font-size: var(--fz-xm);
        font-weight: var(--fw-lg);
        margin-bottom: var(--space-sm);
    }

    .welcome-overview p {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        margin-bottom: 0;
    }

.overview-cards {
    margin-bottom: var(--space-lg);
}

.overview-card {
    border-top: solid 4px var(--color-primary);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-lg);
    box-shadow: var(--box-shadow);
    /* Make card a flex column so footer can pin to bottom */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.overview-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--fw-lg);
    font-size: var(--fz-sm);
    color: var(--text-gray-900);
    margin-bottom: var(--space-lg);
}

.overview-card-icon {
    width: 24px;
    height: 24px;
}

.overview-card-content {
    margin-bottom: var(--space-lg);
    flex: 1 1 auto;
}

    .overview-card-content p {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        font-weight: var(--fw-sm);
        line-height: 15px;
        margin-bottom: 0;
    }

.overview-card-footer {
    border-top: solid 1px var(--text-gray-300);
    padding-top: var(--space-md);
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.overview-cards .col-md-4 {
    display: flex;
}

    .overview-cards .col-md-4 > .overview-card {
        flex: 1 1 auto;
    }

.overview-card.batch-overview {
    border-top: solid 4px var(--color-primary);
}

.overview-card.collections-overview {
    border-top: solid 4px #EFE09F;
}

    .overview-card.collections-overview .overview-card-footer .button-small {
        background-color: #000;
    }

.overview-card.apiRef-overview {
    border-top: solid 4px #48D0E0;
}

    .overview-card.apiRef-overview .overview-card-footer .button-small {
        background-color: #48D0E0;
        color: var(--color-off-white);
        border-color: #48D0E0;
    }

.off-shell-wrapper {
    background-color: var(--color-white);
    border-bottom: solid 2px var(--color-border);
    padding: var(--space-xs) var(--space-2xl);
}

    .off-shell-wrapper button {
        border: none;
        background-color: transparent;
        font-size: var(--fz-xl);
        color: #667085;
    }

.off-shell-actions {
    color: #64748B;
    font-size: var(--fz-sm);
    font-weight: 500;
}

.off-shell-hero {
    padding: var(--space-2xl);
    border-radius: var(--br-md);
    background-image: url('/images/create-merchant/create-merchant-hero-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
}

    .off-shell-hero h1 {
        padding-top: var(--space-2xl);
        font-size: var(--fz-3xl);
        color: #005CA3;
        margin-bottom: var(--space-2xl);
    }

    .off-shell-hero p {
        font-size: var(--fz-sm);
        color: #013C69;
        line-height: 1.4;
        padding-bottom: var(--space-2xl);
    }

.off-shell-card {
    font-size: var(--fz-sm);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-lg);
}

.off-shell-card-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: solid 1px var(--color-border);
}

    .off-shell-card-section h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--space-lg);
    }

    .off-shell-card-section h2 {
        font-size: var(--fz-xl);
        margin-bottom: var(--space-2xl);
    }

    .off-shell-card-section h4 {
        font-size: var(--fz-md);
        margin-bottom: var(--space-lg);
    }

    .off-shell-card-section h6 {
        font-size: var(--fz-sm);
        margin-bottom: var(--space-lg);
    }

    .off-shell-card-section p {
        color: var(--color-text-grey);
        font-size: var(--fz-sm);
        margin-bottom: var(--space-lg);
    }


    .off-shell-card-section span {
        font-size: var(--fz-sm);
        margin-bottom: var(--space-sm);
    }

    .off-shell-card-section .badge-review {
        color: var(--color-white);
        font-weight: var(--fw-md);
        background-color: #DEB508;
    }

.off-shell-form-header {
    margin-bottom: var(--space-2xl);
}

    .off-shell-form-header h4 {
        font-size: var(--fz-md);
    }

    .off-shell-form-header p {
        font-size: var(--fz-sm);
        color: var(--color-text-grey);
        margin-bottom: 0;
    }

.off-shell-search-wrapper {
    background-color: #E9EDF2;
    padding: var(--space-sm);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
}

.off-shell-search {
    font-size: var(--fz-xs);
    color: #667085;
    width: 400px;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('/images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-5xl);
}

    .off-shell-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.hidden {
    display: none;
}

/* Onboarding styles */
.onboarding-wrapper {
    background: var(--color-white);
    border-bottom: 1px solid var(--text-gray-200);
    margin-bottom: var(--space-xl);
    padding-top: var(--space-xl);
}

.onboarding-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    position: fixed;
    left: var(--space-2xl);
    bottom: var(--space-2xl);
    flex-direction: column;
    z-index: 10000;
    background: transparent;
    opacity: 1;
}


.onboarding-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
}

    .onboarding-button img {
        width: 24px;
        height: 24px;
    }

.back-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-white);
    color: var(--text-gray-700);
    border: solid 1px var(--text-gray-300);
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.06);
}

    .back-home i {
        margin-right: 0;
        font-size: 18px;
    }

.step-progress-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: var(--space-lg);
}

.step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

    .step-item.current::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 130%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-primary);
        z-index: 2;
        animation: glow-pulse 1.2s infinite alternate;
    }

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 10px 3px var(--color-primary);
        opacity: 0.7;
    }

    100% {
        box-shadow: 0 0 16px 6px var(--color-primary);
        opacity: 1;
    }
}

.step-check {
    width: var(--space-3xl);
    height: var(--space-3xl);
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--text-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: background-color 0.3s, border-color 0.3s;
}

.step-item.current .step-check {
    border-color: var(--color-primary);
}

.step-item.completed .step-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.step-check i {
    display: none;
}

.step-item.completed .step-check i {
    display: block;
}

.step-item span {
    margin-top: var(--space-xs);
    font-size: var(--fz-xs);
    font-weight: 500;
}

.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: var(--space-md);
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--text-gray-300);
    z-index: 0;
}

.step-item.completed:not(:last-child)::after {
    background: var(--color-primary);
}

.step-form-header {
    margin-bottom: var(--space-xl);
    text-align: center;
}

    .step-form-header h2 {
        font-size: var(--fz-sm);
        margin-bottom: var(--space-xs);
    }

    .step-form-header p {
        font-size: var(--fz-xs);
        color: var(--text-gray-500);
        margin: 0;
    }

.step-form-wrapper {
    padding: var(--space-xl);
    border-radius: var(--br-md);
    background: var(--color-white);
    margin-bottom: var(--space-2xl);
}

.step-button-wrapper {
    margin-top: var(--space-2xl);
}

.step-onboard-select {
    color: var(--text-gray-900);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: 16px;
    margin-bottom: var(--space-lg);
    transition: border-color 0.3s, background-color 0.3s;
}

    .step-onboard-select:hover {
        background: #EBF6FF;
        border-color: var(--color-primary);
    }

        .step-onboard-select:hover h4 {
            color: var(--color-primary);
        }

.onboard-select-media {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    word-break: break-word;
}

.step-onboard-select img {
    width: 60px;
    height: 60px;
}

.onboard-select-media h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    margin: 0 0 var(--space-xs);
    line-height: 20px;
}

.onboard-select-media p {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 18px;
    margin: 0;
}

.styled-radio {
    appearance: none;
    -webkit-appearance: none;
    width: var(--space-xl);
    height: var(--space-xl);
    border: none;
    background-color: #F2F2F2;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    z-index: 1;
    margin: 0 !important;
}

    .styled-radio:focus {
        box-shadow: none;
        outline: none;
    }

    .styled-radio:checked {
        background-color: var(--color-primary);
        border: solid 2px var(--color-primary);
    }

        .styled-radio:checked[type=radio] {
            background-image: none;
        }

        .styled-radio:checked::after {
            content: '✓';
            color: var(--color-white);
            font-size: var(--fz-sm);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: border-color 0.3s;
        }

.step-onboard-select:has(.styled-radio:checked) {
    background: #EBF6FF;
    border-color: var(--color-primary);
}

.stepper-input-label {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
}

    .stepper-input-label span {
        color: var(--text-gray-500);
        margin-left: var(--space-xs);
    }

.iti {
    display: block;
    margin-bottom: var(--space-md);
}

.iti__selected-flag {
    background: #E9EDF2 !important;
}

.custom-tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .custom-tooltip-wrapper .bi-question-circle {
        color: var(--text-gray-500);
    }

    .custom-tooltip-wrapper:hover::after,
    .custom-tooltip-wrapper:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateY(-6px);
    }

    .custom-tooltip-wrapper::after {
        content: attr(data-tooltip);
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--color-white);
        box-shadow: var(--box-shadow);
        color: var(--color-off-black);
        padding: 0.5rem 0.75rem;
        font-size: var(--fz-xs);
        border-radius: var(--br-md);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        pointer-events: none;
        max-width: 240vw;
        overflow-x: auto;
        box-sizing: border-box;
        min-width: 200px;
        white-space: normal;
        word-break: break-word;
    }

.stepper-agree-check {
    font-size: var(--fz-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

    .stepper-agree-check label {
        color: var(--text-gray-500);
    }

    .stepper-agree-check a {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

.business-document-upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 180px;
    background: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-xs) var(--space-2xl);
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin-bottom: var(--space-2xl);
}

    .business-document-upload img {
        width: 152px;
        height: auto;
    }

    .business-document-upload p {
        margin: 0;
    }

    .business-document-upload mark {
        background: transparent;
        color: var(--color-primary);
        font-weight: var(--fw-md);
    }

.uploaded-document {
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--br-md);
    margin-bottom: var(--space-2xl);
}

    .uploaded-document p {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
        margin: 0;
    }

    .uploaded-document span {
        font-size: var(--fz-xs);
        color: var(--text-gray-500);
        line-height: 20px;
    }

.uploaded-document-actions .verified {
    color: var(--color-primary);
    font-size: var(--fz-xl);
}

.uploaded-document-actions .bi-trash3 {
    color: var(--text-gray-500);
}

.uploaded-document .progress {
    height: 6px;
    width: 100%;
    margin-top: var(--space-xs);
    min-width: 0;
    flex: 1;
}

.uploaded-document .progress-bar {
    width: 100%;
}

.uploaded-document .d-flex.gap-3.align-items-start {
    flex: 1;
    min-width: 0;
}

    .uploaded-document .d-flex.gap-3.align-items-start > div {
        flex: 1;
        min-width: 0;
    }

.verify-header {
    margin-bottom: var(--space-lg);
}

    .verify-header h4 {
        font-size: var(--fz-md);
    }

.verify-pagination {
    background: #E9EDF2;
    border-radius: var(--br-md);
    padding: var(--space-xs);
    gap: var(--space-xs) !important;
}

    .verify-pagination button {
        border: 2px solid #D0D5DD;
        padding: var(--space-xs) var(--space-md);
        background: var(--color-white);
        border-radius: var(--space-sm);
        font-size: var(--fz-md);
    }

        .verify-pagination button img {
            width: 12px;
            height: 12px;
        }

    .verify-pagination span {
        font-size: var(--fz-xs);
    }

.account-details,
.business-details {
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
}

    .account-details h4,
    .business-details h4 {
        font-size: var(--fz-md);
        margin-bottom: var(--space-md);
    }

    .account-details h6,
    .business-details h6 {
        font-size: var(--fz-xs);
        margin-bottom: 0;
    }

    .account-details a,
    .business-details a {
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .account-details span,
    .business-details span {
        display: flex;
        align-items: center;
        text-align: end;
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
        line-height: 24px;
    }

        .account-details span img {
            width: 14px !important;
        }

.business-detail-item {
    margin-bottom: var(--space-xs);
}

.documents-uploaded {
    border: 1px solid var(--text-gray-300);
    padding: var(--space-md);
    border-radius: var(--br-md);
    margin-bottom: var(--space-sm);
}

    .documents-uploaded p {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
        margin: 0;
    }

    .documents-uploaded span {
        font-size: var(--fz-xs);
        color: var(--text-gray-500);
        line-height: 20px;
    }

.modal-stepper-verification .modal-content {
    padding: var(--space-2xl);
}

.modal-stepper-header {
    margin-bottom: var(--space-sm);
}

.stepper-modal-icon {
    margin-bottom: var(--space-lg);
}

.modal-stepper-body h6 {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    margin-bottom: var(--space-sm);
}

.modal-stepper-body p {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    margin-bottom: var(--space-lg);
}

    .modal-stepper-body p mark {
        color: var(--text-gray-500);
        background: transparent;
        font-weight: var(--fw-md);
    }

.stepper-code-inputs {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
}

.stepper-code-input {
    width: 40px;
    height: 40px;
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    text-align: center;
    font-size: var(--fz-2xl);
    font-weight: var(--fw-lg);
    background: var(--color-white);
    transition: all 0.3s ease;
}

    .stepper-code-input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: none;
    }

.stepper-code-tips {
    margin-bottom: var(--space-lg);
}

    .stepper-code-tips p {
        margin-bottom: 0 !important;
    }

        .stepper-code-tips p a {
            color: var(--text-gray-500);
            font-weight: 500;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

.wrong-verification,
.wrong-verification a {
    color: var(--color-danger) !important;
}

.modal-stepper-btns .button-tertiary {
    border: 2px solid var(--color-border);
    background-color: var(--color-white);
}

    .modal-stepper-btns .button-tertiary:hover {
        color: var(--text-gray-900);
    }

.saving-status {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--space-xl);
    z-index: 1050;
    min-width: var(--saving-status-min-width, 664px);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: none;
}

    .saving-status .alert {
        pointer-events: auto;
        margin-bottom: 0;
    }

        .saving-status .alert img {
            width: 28px !important;
            height: 28px !important;
        }

    .saving-status .alert-success {
        color: var(--text-gray-900);
    }

        .saving-status .alert-success img {
            height: 28px;
            width: 28px;
            object-fit: cover;
            margin-right: var(--space-xs);
        }

    .saving-status .alert-info {
        color: var(--color-primary);
        background-color: #CEE4F5;
    }

        .saving-status .alert-info img {
            height: 28px;
            width: 28px;
            object-fit: cover;
            margin-right: var(--space-xs);
        }

.onboarding-tertiary-button {
    background-color: var(--color-white);
}

.format-options {
    margin-top: var(--space-sm);
}

.format-option {
    padding: var(--space-md);
    background-color: #F9FAFB;
    border-radius: var(--br-md);
    position: relative;
}

.uploaded-verification-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px !important;
    height: 20px !important;
    z-index: 2;
}

.format-option:hover {
    background-color: #EBF6FF;
    border: solid 1px var(--color-primary);
}

.format-option.active {
    background-color: #EBF6FF;
    border: solid 1px var(--color-primary);
}

.format-option img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: var(--space-md);
}

.format-options .format-heading {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 20px;
}

.format-option.active .format-heading {
    color: #005CA3;
}

.format-options .format-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 18px;
    margin: 0;
    padding: 0;
}

.format-option.active .format-description {
    color: var(--color-primary);
}

.document-type-options {
    gap: var(--space-2xl);
}

    .document-type-options .format-description {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
    }

/* Changes to application styles */
.changes-to-application {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-xs) !important;
}

    .changes-to-application .button-close.position-static {
        position: static;
        margin-left: 0;
        padding-left: var(--space-xl);
    }

    .changes-to-application .flex-grow-1 {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .changes-to-application .button-small.button-primary {
        border-radius: var(--br-3xl);
        padding: var(--space-sm) var(--space-md);
        font-weight: var(--fw-md);
        font-size: var(--fz-xs);
    }

    .changes-to-application .bi-x-lg {
        -webkit-text-stroke: 1px #101828;
    }

.changes-action-modal {
    width: 512px;
    max-width: 100%;
}

.request-changes-info {
    margin-bottom: var(--space-sm);
}

    .request-changes-info h6 {
        font-size: var(--fz-lg);
        color: var(--text-gray-900);
        font-weight: var(--fw-lg);
        margin-bottom: var(--space-sm);
    }

    .request-changes-info p {
        color: var(--text-gray-500);
        font-size: var(--fz-sm);
        margin-bottom: 0;
    }

.reasons-for-change {
    margin-bottom: var(--space-sm);
}

    .reasons-for-change h6 {
        color: var(--text-gray-700);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
    }

    .reasons-for-change p {
        color: var(--text-gray-900);
        font-size: var(--fz-md);
        margin-bottom: 0;
    }

    .reasons-for-change img {
        height: 20px;
        width: 20px;
        object-fit: cover;
        padding: 0;
        margin: 0;
    }

.change-comment {
    margin: 0;
}

    .change-comment h6 {
        color: var(--text-gray-700);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        margin-bottom: var(--space-sm);
    }

    .change-comment p {
        background-color: #F9FAFB;
        color: var(--text-gray-500);
        font-size: var(--fz-md);
        line-height: 24px;
        border-radius: var(--br-lg);
        padding: var(--space-sm);
        margin-bottom: 0;
    }

.changes-action-modal .modal-md-footer button {
    font-size: var(--fz-md) !important;
}

.application-events-wrapper {
    margin-top: var(--space-2xl);
}

.application-action-wrapper {
    position: fixed;
    width: 840px;
    max-width: 90%;
    left: 58%;
    transform: translateX(-50%);
    bottom: var(--space-lg);
    z-index: 1050;
    padding: var(--space-sm);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    box-shadow: var(--box-shadow);
}

    .application-action-wrapper .action-btn-col {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .application-action-wrapper .action-btn-col:not(:first-child) {
            border-left: solid 1px var(--text-gray-300);
            padding-left: var(--space-2xl);
        }

    .application-action-wrapper button {
        display: flex;
        align-items: center;
        font-size: var(--fz-md);
        font-weight: var(--fw-md);
        line-height: 24px;
        border: none;
        background-color: var(--color-white);
    }

        .application-action-wrapper button.approve-application {
            color: var(--color-white);
            background-color: var(--color-primary);
            padding: var(--space-sm) var(--space-sm);
            border-radius: var(--br-md);
        }

.event-count {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--text-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.application-event {
    margin-bottom: var(--space-lg);
}

.day-label {
    gap: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.day-label-down {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--text-gray-400);
}

    .day-label-down img {
        width: 12px;
        height: 12px;
    }

    .day-label-down.active {
        background-color: var(--color-primary);
    }

.day-label h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    line-height: 24px;
    margin-bottom: 0;
}

.event-block {
    border-left: solid 1px var(--text-gray-300);
    padding-left: var(--space-sm);
    margin-left: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.single-event {
    gap: var(--space-lg);
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-xl);
}

.event-block-time {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    line-height: 24px;
    white-space: nowrap;
    margin-right: 0;
}

.event-block-desc {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-2xl);
    flex: 1 1 0%;
    min-width: 0;
}

.event-status h6 {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 28px;
    margin-bottom: 0;
}

.event-status-time {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
}

.event-block-desc .table,
.event-block-desc .borderless-display-table {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
}

    .event-block-desc .table td:first-child {
        color: var(--text-gray-500);
        font-size: var(--fz-sm);
        font-weight: var(--fw-sm);
        line-height: 20px;
        padding-left: 0;
    }

    .event-block-desc .table td:last-child {
        color: var(--text-gray-900);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        line-height: 22px;
    }


.badge-submission {
    color: #000;
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: var(--space-xs) var(--space-sm);
}

.application-changes {
    background-color: #EFECF0;
}

.application-submitted {
    color: var(--color-primary);
    background-color: #CEE4F4;
}

.application-reviewed {
    color: whitesmoke;
    background-color: #DEB508;
}

.onboarding-wrapper .onboarding-button {
    display: inline-flex !important;
}

.changes-tertiary-button {
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-200);
}

.changes-header {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    line-height: 24px;
    margin-bottom: var(--space-sm);
}

/* Track application progress styles */

.application-progress-wrapper {
    margin-top: var(--space-lg);
    background-color: var(--color-white);
    padding: var(--space-lg);
    border-radius: var(--br-md);
}

.application-progress-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: solid 1px var(--text-gray-200);
}

.application-progress-title {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    margin-bottom: 0;
}

.complete-application-btn {
    padding: var(--space-sm) var(--space-md);
}

.application-progress {
    width: 100%;
}

.application-progress-details {
    width: 100%;
    margin-bottom: var(--space-sm);
}

    .application-progress-details span {
        font-size: var(--fz-xs);
        color: var(--color-white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--space-lg);
        height: var(--space-lg);
        border: solid 2px #D0D5DD;
        border-radius: 50%;
    }

    .application-progress-details p {
        font-size: var(--fz-xs);
        color: #98A2B3;
        font-weight: var(--fw-lg);
        margin-bottom: 0;
    }

.application-progress-bar {
    height: var(--space-sm);
    width: 100%;
    border-radius: var(--br-lg);
    background-color: #EAECF0;
}

.application-progress.complete .application-progress-details span {
    border: solid 2px var(--color-primary);
    background-color: var(--color-primary);
}

.application-progress.complete .application-progress-details p {
    color: #6F6F6F;
}

.application-progress.complete .application-progress-bar {
    background-color: var(--color-primary);
}

.application-progress.complete .elapsed-application-progress {
    background-color: var(--color-primary);
    border-radius: var(--br-lg);
    height: var(--space-sm);
    width: 100%;
    margin: 0;
}

.application-progress.active .application-progress-details span {
    border: solid 2px var(--color-primary);
}

.application-progress.active .application-progress-details p {
    color: #6F6F6F;
}

.application-progress.active span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    width: var(--space-lg);
    height: var(--space-lg);
    flex: none;
}

    .application-progress.active span::before {
        content: '';
        position: absolute;
        top: -4%;
        left: 50%;
        transform: translate(-50%, 130%);
        width: var(--space-xs);
        height: var(--space-xs);
        border-radius: 50%;
        background: var(--color-primary);
        z-index: 2;
        animation: glow-pulse 1.2s infinite alternate;
    }

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 6px 2px var(--color-primary);
        opacity: 0.1;
    }

    100% {
        box-shadow: 0 0 12px 4px var(--color-primary);
        opacity: 1;
    }
}

.application-progress.active .application-progress-bar {
    background-color: #D6EDFF;
}

.application-progress.active .elapsed-application-progress {
    background-color: var(--color-primary);
    border-radius: var(--br-lg);
    height: var(--space-sm);
    width: 30%;
    margin: 0;
}

/* Terms and Conditions Specific Styles */
.tc-breadcrumb {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    color: var(--text-gray-500);
    line-height: 20px;
}

.tc-header-wrapper {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.tc-header {
    width: 100%;
}

.tc-nav-arrow-btn {
    font-size: var(--fz-xs);
    color: #667085;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

    .tc-nav-arrow-btn:hover {
        color: var(--text-gray-900);
    }

    .tc-nav-arrow-btn i {
        -webkit-text-stroke-width: 1px;
    }

.tc-nav {
    gap: var(--space-xs);
    align-items: center;
    margin: 0 18px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 400px;
    scrollbar-width: none;
}

    .tc-nav::-webkit-scrollbar {
        display: none;
    }

    .tc-nav .nav-item {
        flex: 0 0 auto;
    }

    .tc-nav .nav-link {
        color: var(--text-gray-500);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--br-md);
        font-weight: var(--fw-md);
        font-size: var(--fz-xs);
    }

        .tc-nav .nav-link.active {
            background-color: #D6EDFF;
            color: var(--color-primary);
        }

        .tc-nav .nav-link:not(.active):hover {
            color: var(--text-gray-900);
        }

.tc-search-wrapper .form-control {
    color: var(--text-gray-500);
    background-color: var(--color-white);
    font-size: var(--fz-xs);
    max-width: 320px;
    border-radius: var(--br-md);
    border: 1px solid var(--text-gray-300);
    padding: var(--space-sm) var(--space-md);
    padding-left: var(--space-5xl);
}

    .tc-search-wrapper .form-control:focus {
        box-shadow: none;
        border-color: var(--color-accent);
    }

.tc-search-wrapper span {
    pointer-events: none;
}

    .tc-search-wrapper span i {
        color: var(--text-gray-500);
    }

.tc-page {
    background-color: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--br-md);
}

.tc-page-header {
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
}

    .tc-page-header h1 {
        color: var(--text-gray-900);
        font-size: var(--fz-2xl);
        font-weight: var(--fw-lg);
        line-height: 32px;
        margin-bottom: var(--space-lg);
    }

    .tc-page-header p {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        line-height: 22px;
        margin: 0;
    }

.tc-page-body {
    border-bottom: solid 1px var(--text-gray-200);
    margin-bottom: var(--space-lg);
}

.tc-page-section-title {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 44px;
    margin-bottom: var(--space-xs);
}

.tc-page-section {
    margin-bottom: var(--space-lg);
}

    .tc-page-section h5 {
        color: var(--text-gray-900);
        font-size: var(--fz-xs);
        font-weight: var(--fw-lg);
        line-height: 18px;
    }

    .tc-page-section p {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        line-height: 22px;
        margin: 0;
        padding: 0;
    }

.tc-page-pagination {
    padding: 0 var(--space-2xl);
}

    .tc-page-pagination span {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
    }

    .tc-page-pagination button {
        color: var(--text-gray-700);
        border: solid 1px var(--text-gray-300);
        background-color: var(--color-white) !important;
    }

        .tc-page-pagination button:hover {
            color: var(--text-gray-700);
            background-color: var(--color-white) !important;
            box-shadow: none;
        }


/* Merchant Operations */
.create-merchant-wrapper {
    background-color: var(--color-white);
    border-bottom: solid 2px var(--color-border);
    padding: var(--space-xs) var(--space-2xl);
}

    .create-merchant-wrapper button {
        border: none;
        background-color: transparent;
        font-size: var(--fz-xl);
        color: #667085;
    }

    .create-merchant-wrapper .bi-arrow-left-circle {
        font-size: var(--fz-xl);
        color: #667085;
    }

.create-merchant-hero {
    padding: var(--space-lg);
    border-radius: var(--br-md);
    background-image: url('../dashboard/merchant-operations/images/create-merchant-hero-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-lg);
}

    .create-merchant-hero h1 {
        padding-top: var(--space-lg);
        font-size: var(--fz-xl);
        font-weight: var(--fw-lg);
        line-height: 24px;
        color: #005CA3;
    }

    .create-merchant-hero p {
        font-size: var(--fz-xs);
        color: #013C69;
        line-height: 22px;
    }

.merchant-form-wrapper {
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border-radius: var(--br-md);
}

.merchant-form-header {
    margin-bottom: var(--space-2xl);
}

    .merchant-form-header h4 {
        font-size: var(--fz-lg);
    }

    .merchant-form-header p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        margin-bottom: 0;
    }

.merchant-card {
    font-size: var(--fz-sm);
    padding: var(--space-lg);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    margin-bottom: 18px;
}

.gap-4.merchant-card {
    gap: var(--space-md) !important;
}

.merchant-card-section {
    margin-bottom: var(--space-2xl);
    border-bottom: solid 1px var(--text-gray-200);
}

    .merchant-card-section h2 {
        color: var(--text-gray-900);
        font-size: var(--fz-md);
    }

.all-merchant {
    border-bottom: none;
    margin-bottom: var(--space-2xl) !important;
    padding-bottom: 0;
}

.all-merchant-new {
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
}

    .all-merchant-new img {
        width: 16px;
        height: 16px;
    }

.all-merchant-account {
    padding: var(--space-sm);
    border: solid 1px #EAECF0;
    border-radius: var(--br-md);
    margin-bottom: var(--space-md);
}

.all-merchant-details h6 {
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    color: var(--text-gray-700);
    margin-bottom: 2px !important;
}

.all-merchant-details li {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    display: inline;
}

    .all-merchant-details li:not(:last-child)::after {
        content: " • ";
        color: var(--text-gray-500);
        margin: 0 4px;
    }

.badge.active-merchant {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    background-color: #A6DFBB;
    border-radius: var(--br-md);
    padding: 6px 10px;
}

.badge.suspended-merchant {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    background-color: #EFECF0;
    border-radius: var(--br-md);
    padding: 6px 10px;
}

.badge.blacklisted-merchant {
    color: var(--color-white);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    background-color: #F04438;
    border-radius: var(--br-md);
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blacklist-modal-heading {
    color: #F04438;
}

.all-merchant-manage {
    font-weight: var(--fw-md);
    font-style: var(--fz-sm);
}

.all-merchant-pagination {
    border-top: solid 1px var(--text-gray-200);
    padding-top: var(--space-lg);
    margin-top: var(--space-2xl);
}

    .all-merchant-pagination .index {
        color: #344054;
        font-weight: var(--fw-md);
    }

    .all-merchant-pagination button {
        color: var(--text-gray-900);
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
    }

.manage-account-funds {
    padding: var(--space-2xl);
    border-radius: var(--br-lg);
    background-color: #EBF6FF;
    border: solid 1px #EAECF0;
    margin-bottom: 18px;
}

.account-funds-label {
    color: #101828;
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-lg);
}

    .account-funds-label img {
        height: 18px;
        width: 18px;
        margin-right: var(--space-xs) !important;
    }

.account-funds-actions {
    color: #98A2B3;
}

.manage-account-funds .balance h1 {
    color: #101828;
    font-size: var(--fz-2xl);
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-xs);
    line-height: 32px;
}


.manage-account-funds .balance span {
    color: #667085;
    font-size: var(--fz-xs);
    font-weight: 500;
    line-height: 20px;
}

.merchant-account-details h2 {
    font-size: var(--fz-sm);
    margin-bottom: var(--space-md);
}

.merchant-account-details {
    margin-bottom: var(--space-xl);
}

    .merchant-account-details p {
        color: var(--text-gray-500);
        font-size: var(--fz-sm);
        margin: 0;
    }

.merchant-account-info {
    margin-bottom: var(--space-xl);
}

.merchant-account-info-label {
    color: var(--text-gray-900) !important;
    font-size: var(--fz-xs) !important;
    font-weight: 700;
    margin-bottom: var(--space-sm) !important;
}

.merchant-account-info-value {
    color: var(--text-gray-500);
    font-size: var(--fz-sm) !important;
}

.manage-account-btn {
    padding: var(--space-sm) var(--space-md);
}

    .manage-account-btn span {
        border-left: solid 1px #EAECF0;
        padding: 8px 0px 8px 8px;
    }


.manage-account-dropdown .dropdown-menu {
    font-size: var(--fz-sm);
    color: #344054;
    border: none;
    background-color: var(--color-white);
    border-radius: var(--br-lg);
    box-shadow: var(--box-shadow);
}

    .manage-account-dropdown .dropdown-menu .blacklist {
        border-top: solid 1px #EAECF0;
        padding-top: var(--space-xs);
    }

.settlement-bank-section {
    border-bottom: none;
}

.settlement-bank-details {
    margin-bottom: var(--space-2xl);
}

    .settlement-bank-details h2 {
        font-size: var(--fz-sm);
        color: var(--text-gray-900);
        margin-bottom: var(--space-md);
    }

        .settlement-bank-details h2 img {
            height: 20px;
            width: 20px;
            margin-right: var(--space-xs) !important;
        }

    .settlement-bank-details p {
        color: var(--text-gray-500);
        font-size: var(--fz-sm) !important;
        margin: 0;
    }

.add-bank-account-link a {
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
}

    .add-bank-account-link a img {
        height: 18px;
        width: 18px;
        margin-right: var(--space-xs) !important;
    }

.settlement-bank-account {
    padding: var(--space-md);
    border: solid 1px var(--text-gray-200);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
}

.settlement-account-item h6 {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    color: var(--text-gray-700);
    margin-bottom: var(--space-xs);
}

.settlement-account-item img {
    height: 36px;
    width: 36px;
}

.settlement-account-item li {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    display: inline;
    margin-bottom: var(--space-xs) !important;
}

    .settlement-account-item li img {
        height: 8px;
        width: 8px;
        margin-right: var(--space-xs) !important;
    }

.bank-name-li::before {
    content: " • ";
    color: var(--text-gray-500);
    margin: 0 8px;
}

.account-funds-actions .bi-three-dots-vertical {
    color: var(--text-gray-900);
}

.badge.active-account {
    color: #027948;
    font-size: var(--fz-xs);
    font-weight: var(--fw-sm);
    background-color: #ECFDF3;
    border-radius: var(--br-lg);
    padding: 6px 12px;
}

.badge.inactive-account {
    color: #344054;
    font-size: var(--fz-xs);
    font-weight: var(--fw-sm);
    background-color: #F2F4F7;
    border-radius: var(--br-lg);
    padding: 6px 12px;
}

.settlement-bank-manage {
    font-weight: var(--fw-md);
    font-style: var(--fz-sm);
}

.bank-account-dropdown .dropdown-menu {
    font-size: var(--fz-sm);
    color: #344054;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--br-lg);
    box-shadow: var(--box-shadow);
}

    .bank-account-dropdown .dropdown-menu .blacklist {
        border-top: solid 1px #EAECF0;
        padding-top: var(--space-xs);
    }

.merchant-user-management-header {
    margin-bottom: var(--space-lg);
}

.settlement-bank-modal .button-tertiary {
    border: 1px solid var(--text-gray-300);
    background-color: var(--color-white);
}

    .settlement-bank-modal .button-tertiary:hover {
        color: var(--text-gray-900);
    }

.add-bank-blue {
    height: 56px;
    width: 56px;
    object-fit: cover;
    margin-bottom: var(--space-2xl);
}

.settlement-bank-modal .input-left-icon {
    left: var(--space-xs);
    width: 20px;
    top: 52%;
}

.merchant-bank-account-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-2xl) var(--space-sm) var(--space-xs) !important;
    background-color: #EFECF0;
}

    .merchant-bank-account-alert .button-close.position-static {
        position: static;
        margin-left: 0;
        padding-left: var(--space-2xl);
    }

    .merchant-bank-account-alert .flex-grow-1 {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .merchant-bank-account-alert .button-small.button-primary {
        border-radius: var(--br-3xl);
        padding: var(--space-sm) var(--space-md);
        font-weight: var(--fw-md);
        font-size: var(--fz-xs);
    }


.transaction-fees-details {
    margin-bottom: var(--space-2xl);
}

    .transaction-fees-details h2 {
        font-size: var(--fz-sm);
        color: var(--text-gray-900);
        margin-bottom: var(--space-md);
    }

    .transaction-fees-details p {
        color: var(--text-gray-500);
        font-size: var(--fz-sm) !important;
        margin: 0;
    }

.transaction-fees-table-section {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-200);
}

.transaction-fees-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.transaction-fees-table {
    white-space: nowrap;
    margin-bottom: 0 !important;
}

.transaction-fees-table-header {
    padding: var(--space-sm) var(--space-2xl);
    border-bottom: solid 1px var(--text-gray-200);
}

.transaction-fees-table-title {
    font-size: var(--fz-lg);
    margin-bottom: 0;
    font-weight: var(--fw-md);
}

.transaction-fees-table thead {
    background-color: #F9FAFB;
}

.transaction-fees-th-type,
.transaction-fees-th-amount {
    padding-left: 0px !important;
}

.transaction-fees-table thead tr th {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    font-weight: 500;
}

.transaction-fees-table-row {
    align-items: center;
}

    .transaction-fees-table-row:last-child {
        border: transparent;
    }

    .transaction-fees-table-row td {
        padding: var(--space-2xl) 0 var(--space-xs) 0;
    }

.transaction-fees-description-cell img {
    width: 32px;
    height: auto;
}

.transaction-fees-description-cell {
    font-size: var(--fz-md);
}

.transaction-fees-type-cell {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
}

.transaction-fees-amount-cell {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
}

.transaction-fee-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E6F0FA;
    color: #005CA3;
    font-weight: var(--fw-md);
    font-size: var(--fz-xs);
    margin-right: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* merchant-user-management-info  */

.merchant-user-management-title {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
}

.merchant-user-management-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    margin-bottom: 0;
}

.user-management-add-button {
    color: var(--color-primary);
    background-color: var(--color-white);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    border: solid 1px var(--color-primary);
    border-radius: var(--br-md);
    padding: var(--space-sm);
}

.merchant-user-management-search-date {
    background-color: #E9EDF2;
    padding: var(--space-sm);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.merchant-user-management-search {
    font-size: var(--fz-xs);
    color: var(--text-gray-700);
    background: var(--color-white);
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    padding: var(--space-sm) var(--space-2xl);
    padding-left: var(--space-5xl);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url(/images/icons/icon-dark/search-500.svg);
    background-position: left var(--space-md) center;
    transition: border-color 0.2s;
}

    .merchant-user-management-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.user-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--color-border);
    border-radius: var(--br-lg);
    margin-bottom: var(--space-2xl);
}

.user-table {
    min-width: 800px;
    white-space: nowrap;
    margin-bottom: 0;
}

.user-data-table .user-table-header {
    padding: var(--space-2xl);
}

    .user-data-table .user-table-header h6 {
        font-size: var(--fz-lg);
        color: var(--text-gray-900);
    }

    .user-data-table .user-table-header p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        margin: 0;
    }

.user-data-table .user-table {
    width: 100%;
    margin-bottom: 0;
}

    .user-data-table .user-table thead th {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
    }

.user-table th:nth-child(2),
.user-table th:nth-child(3),
.user-table th:nth-child(4),
.user-table th:nth-child(5) {
    padding-left: 0;
}

.user-data-table .user-table tbody td {
    align-items: center;
    font-size: var(--fz-sm);
    padding: var(--space-sm) 0 var(--space-2xl) 0;
}

.user-badge {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: 6px 8px;
    border-radius: var(--br-md);
    color: var(--text-gray-900);
}

    .user-badge img {
        margin-right: var(--space-xs);
    }

.user-active {
    background-color: #A6DFBB;
}

.user-inactive {
    background-color: #EFE09F;
}

.user-notvalidated {
    background-color: #EFECF0;
}

.user-closed {
    background-color: #F6B6C5;
}

.user-deactivated {
    color: var(--color-white);
    background-color: #B42318;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E6F0FA;
    color: #005CA3;
    font-weight: var(--fw-md);
    font-size: var(--fz-sm);
    margin-right: var(--space-2xl);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.user-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
}

.user-pagination {
    padding: var(--space-xs) var(--space-2xl);
}

    .user-pagination button {
        color: #344054;
        background: #fff;
        border: 1px solid #EAECF0;
        border-radius: 6px;
        padding: 6px 16px;
        font-weight: 500;
    }

    .user-pagination ul {
        display: flex;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .user-pagination ul li a {
            display: block;
            padding: 6px 12px;
            border-radius: 6px;
            color: #344054;
            font-weight: 500;
            text-decoration: none;
            background: transparent;
        }

            .user-pagination ul li a.active {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;
                background: #EEF4FF;
                color: #175CD3;
                border: none;
            }

.add-user-modal {
    width: 800px;
}

.add-user-body img {
    height: 38px;
    width: 38px;
    margin-bottom: var(--space-lg);
}

.add-user-info {
    margin-bottom: var(--space-2xl);
}

    .add-user-info h6 {
        font-size: var(--fz-sm);
        margin-bottom: var(--space-sm);
        line-height: 28px;
    }

    .add-user-info p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        line-height: 20px;
        margin-bottom: 0;
    }

.add-user-body .input-left-icon {
    width: 20px;
    top: 50%;
    height: 20px;
}


.add-user-body .button-tertiary {
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
}

    .add-user-body .button-tertiary:hover {
        color: var(--text-gray-900);
    }

.user-management-drawer-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 6px #fff;
    background-color: #EBF6FF;
    color: #005CA3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-xs);
    box-shadow: 0 0 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

.user-management-drawer-meta-name {
    font-size: var(--font-size-4xl);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
    line-height: 22px;
    margin-bottom: 0;
}

.user-management-badge {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: 6px 8px;
    border-radius: var(--br-md);
    color: var(--text-gray-900);
}

    .user-management-badge img {
        margin-right: var(--space-xs);
    }

.user-management-badge-active {
    background-color: #A6DFBB;
}

.user-management-manage-account-dropdown .dropdown-menu {
    font-size: var(--fz-sm);
    color: #344054;
    border: none;
    background-color: var(--color-white);
    border-radius: var(--br-lg);
    box-shadow: var(--box-shadow);
}

    .user-management-manage-account-dropdown .dropdown-menu .blacklist {
        border-top: solid 1px var(--text-gray-200);
        padding-top: var(--space-xs);
    }

.user-management-manage-account-btn {
    padding: var(--space-sm) var(--space-md);
}

    .user-management-manage-account-btn span {
        border-left: solid 1px var(--text-gray-200);
        padding: var(--space-sm) 0px var(--space-sm) var(--space-sm);
    }

.user-validation-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-validation-bg {
    background-image: url('../dashboard/merchant-operations/images/user-validation-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.user-validation-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-validation-form-logo {
    width: 38px;
    height: 38px;
    margin-bottom: var(--space-2xl);
}

.user-validation-form-wrapper h1 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-lg);
}

.user-validation-form-wrapper p {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    margin-bottom: var(--space-2xl);
}

/* User Account Validation Modal Styles (copied and adapted from onboarding) */
.user-verification-modal {
    width: 558px;
}

    .user-verification-modal .modal-content {
        padding: var(--space-2xl);
    }


.user-verification-modal-icon {
    padding-bottom: var(--space-sm);
}

.user-verification-body h6 {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    margin-bottom: var(--space-sm);
}

.user-verification-body p {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    margin-bottom: var(--space-sm);
}

    .user-verification-body p mark {
        color: var(--text-gray-500);
        background: transparent;
        font-weight: var(--fw-md);
    }

.user-code-inputs {
    display: flex;
    gap: var(--space-2xl);
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-sm);
    max-width: 100%;
}

.user-code-input {
    max-width: 60px;
    height: 60px;
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-lg);
    text-align: center;
    font-size: var(--fz-2xl);
    font-weight: var(--fw-lg);
    background: var(--color-white);
    transition: all 0.3s ease;
}

    .user-code-input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: none;
    }

.user-code-tips {
    margin-bottom: var(--space-lg);
}

    .user-code-tips p {
        margin-bottom: 0 !important;
    }

        .user-code-tips p a {
            color: var(--text-gray-500);
            font-weight: 500;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

.user-wrong-verification,
.user-wrong-verification a {
    color: var(--color-danger) !important;
}

.user-verification-btns .button-tertiary {
    border: 1px solid var(--text-gray-300);
    background-color: var(--color-white);
}

    .user-verification-btns .button-tertiary:hover {
        color: var(--text-gray-900);
    }

.modal-info {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    line-height: 20px;
    margin-bottom: var(--space-sm);
}

.user-validation-form img {
    width: 16px !important;
    height: 16px !important;
    margin-left: var(--space-md) !important;
    transform: translateY(-20%) !important;
}

.user-validation-form input {
    padding-left: var(--space-4xl);
}

.user-validation-form .button {
    margin-top: var(--space-lg);
}

/* Disbursements */
.batch-upload-header {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.batch-upload-title {
    color: var(--text-gray-900);
    font-size: var(--fz-2xl);
    line-height: 28px;
}

.batch-upload-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    line-height: 20px;
}

.add-batch-button {
    color: var(--color-primary);
    background-color: var(--color-white);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    border: solid 1px var(--color-primary);
    border-radius: var(--br-md);
    padding: var(--space-sm) var(--space-md);
}

.main-content {
    position: relative;
}

.disbursements-drawer {
    width: 460px;
}

.drawer-account {
    margin-bottom: var(--space-sm);
}

.drawer-account-avatar {
    width: 28px;
    height: 28px;
    margin-right: var(--space-sm);
}

.drawer-account-meta {
    line-height: 16px;
}

.drawer-account-meta-name {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    margin-bottom: 0;
}

.drawer-account-meta-number {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    margin: 0;
}

.change-batch-merchant-button {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 20px;
    background-color: var(--text-gray-100);
    padding: var(--space-sm) var(--space-md);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
}

.drawer-auth-level {
    color: var(--text-gray-900);
    font-size: var(--fz-xs);
    font-weight: var(--fw-xl);
    line-height: 28px;
    margin-bottom: var(--space-xs);
}

.drawer-auth-level-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 20px;
    margin-bottom: 0;
}

    .drawer-auth-level-desc mark {
        background-color: transparent;
        color: var(--color-primary);
        font-weight: var(--fw-md);
    }

.drawer-switch input {
    padding: var(--space-md) var(--space-2xl);
}

    .drawer-switch input:focus {
        box-shadow: none;
        border-color: var(--text-gray-300);
    }

.drawer-input input {
    color: #667085;
    background-color: #E9EDF2 !important;
    width: 100% !important;
    padding: var(--space-sm) var(--space-xs) !important;
    margin-bottom: 0;
}

.batch-upload-wrapper h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 20px;
}

.batch-upload-wrapper {
    margin-bottom: var(--space-2xl);
}

    .batch-upload-wrapper p {
        color: var(--text-gray-500);
        font-size: var(--fz-xs);
        line-height: 20px;
        margin-bottom: 0;
    }

.batch-upload button {
    color: var(--text-gray-700);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    padding: var(--space-sm);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    background-color: var(--color-white);
}

    .batch-upload button img {
        height: 16px;
        width: 16px;
    }

.batch-upload-file {
    border: solid 1px #EBF6FF;
    border-radius: var(--br-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
}

.batch-upload-file-desc div {
    line-height: 18px;
}

.batch-upload-file-desc img {
    margin-right: var(--space-md);
}

.batch-upload-file-name {
    color: var(--text-gray-700);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    line-height: 20px;
    margin-bottom: var(--space-xs);
}

.batch-upload-file-size {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    line-height: 20px;
    margin-bottom: var(--space-xs);
}

.batch-upload-file-actions {
    gap: var(--space-sm);
}

    .batch-upload-file-actions span img {
        width: 24px;
        height: 24px;
    }

.progress-circle {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: conic-gradient(var(--color-primary) calc(var(--progress, 0) * 1%), var(--text-gray-200) calc(var(--progress, 0) * 1%));
}

    .progress-circle::before {
        content: '';
        position: absolute;
        width: 17px;
        height: 17px;
        background: white;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.progress-circle-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: var(--text-gray-700);
    display: block;
    line-height: 1;
    pointer-events: none;
}

.input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.disbursement-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--color-border);
    border-radius: var(--br-lg);
}

.disbursement-table {
    min-width: 800px;
    white-space: nowrap;
}

.disbursement-data-table .disbursement-table-header {
    padding: var(--space-2xl);
    margin-bottom: var(--space-sm);
}

    .disbursement-data-table .disbursement-table-header h6 {
        font-size: var(--fz-lg);
        color: var(--text-gray-900);
    }

    .disbursement-data-table .disbursement-table-header p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        margin: 0;
    }

.disbursement-data-table .disbursement-table {
    width: 100%;
    margin-bottom: 0;
}

    .disbursement-data-table .disbursement-table thead th {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--color-text-grey);
    }

    .disbursement-data-table .disbursement-table tbody td {
        align-items: center;
        font-size: var(--fz-sm);
        padding: var(--space-sm) 0 var(--space-2xl) 0;
    }

.disbursement-table th:nth-child(2),
.disbursement-table th:nth-child(3),
.disbursement-table td:nth-child(2),
.disbursement-table td:nth-child(3) {
    text-align: center;
}

.disbursement-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E6F0FA;
    color: #005CA3;
    font-weight: var(--fw-md);
    font-size: var(--fz-sm);
    margin-right: var(--space-2xl);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.disbursement-download-btn {
    background: transparent;
    border: none;
    padding: var(--space-sm);
    margin: 0;
    margin-right: var(--space-xs);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .disbursement-download-btn img {
        width: 20px;
        height: 20px;
        display: block;
    }

.disbursement-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
}

.disbursement-search-date {
    background-color: #E9EDF2;
    padding: var(--space-2xl) var(--space-xs);
    border-radius: var(--br-lg);
    margin-bottom: var(--space-2xl);
}

.disbursement-search {
    font-size: var(--fz-sm);
    color: #667085;
    background-color: var(--color-white);
    border: solid 2px #D0D5DD;
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('../images/search.svg');
    background-position: left var(--space-xs) center;
    padding-left: var(--space-xl);
}

    .disbursement-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.disbursement-pagination {
    padding: var(--space-xs) var(--space-2xl);
}

    .disbursement-pagination button {
        color: var(--text-gray-700);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        line-height: 20px;
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
        padding: var(--space-sm) 14px !important;
    }

    .disbursement-pagination ul li {
        display: inline-block;
        margin-right: var(--space-lg);
    }

        .disbursement-pagination ul li a {
            font-size: var(--fz-sm);
            font-weight: 500;
            color: var(--text-gray-500);
        }

            .disbursement-pagination ul li a.active {
                color: #005CA3;
                background-color: #CEE4F4;
                padding: var(--space-sm) var(--space-xs);
                border-radius: var(--br-md);
            }

.submission-search-date {
    background-color: #E9EDF2;
    padding: var(--space-sm);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
}

.submission-search {
    font-size: var(--fz-sm);
    color: #667085;
    width: 400px;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('/images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-5xl)
}

    .submission-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.batch-transaction-header {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

    .batch-transaction-header .btn {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        padding: var(--space-xs) var(--space-md);
        border: solid 1px var(--text-gray-300) !important;
        border-radius: var(--br-md);
        background-color: var(--color-off-white);
    }

        .batch-transaction-header .btn.active {
            background-color: var(--color-white);
        }

    .batch-transaction-header .button-small {
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
    }

        .batch-transaction-header .button-small.button-text {
            border: none;
            box-shadow: none;
        }


    .batch-transaction-header .button-tertiary {
        color: var(--text-gray-700);
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
    }

.batch-details-wrapper {
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
}

.batch-details-header {
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
}

    .batch-details-header h1 {
        color: var(--text-gray-900);
        font-size: var(--font-size-4xl);
        font-weight: var(--fw-lg);
        line-height: 44px;
        margin-bottom: var(--space-xs);
    }

.batch-details-table-wrapper {
    position: relative;
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

    .batch-details-table-wrapper:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .batch-details-table-wrapper h6 {
        color: var(--text-gray-600);
        font-size: var(--fz-sm);
        font-weight: var(--fw-lg);
        line-height: 20px;
    }

.batch-details-table {
    margin-bottom: 0;
    padding-bottom: 0;
    border-collapse: separate;
}

    .batch-details-table td {
        font-size: var(--fz-xs);
        border: none;
        padding: var(--space-sm) 0 0 0;
        margin: 0;
    }

    .batch-details-table .table-icon {
        width: 14px;
        height: 14px;
    }

    .batch-details-table .left {
        color: var(--text-gray-600);
        width: 40%;
    }

    .batch-details-table .right {
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
    }

        .batch-details-table .right a {
            font-size: var(--fz-xs);
            font-weight: var(--fw-md);
        }

.transaction-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--color-border);
    border-radius: var(--br-lg);
}

.transaction-table {
    min-width: 800px;
    white-space: nowrap;
    margin-bottom: 0;
}

.transaction-data-table .transaction-table-header {
    padding: var(--space-lg);
}

    .transaction-data-table .transaction-table-header h6 {
        font-size: var(--fz-sm);
        color: var(--text-gray-900);
    }

.transaction-search {
    min-width: 400px;
    width: 100%;
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('/images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-4xl);
}

    .transaction-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.transaction-data-table .transaction-table {
    width: 100%;
    min-width: 800px;
    white-space: nowrap;
}

    .transaction-data-table .transaction-table thead th {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--color-text-grey);
        padding-left: 0;
    }

    .transaction-data-table .transaction-table tbody td {
        align-items: center;
        font-size: var(--fz-sm);
        padding: var(--space-sm) 0 var(--space-2xl) 0;
    }

.transaction-table .beneficiary-name {
    font-weight: var(--fw-md);
}


.transaction-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
}

.transaction-pagination {
    padding: var(--space-xs) var(--space-2xl);
}

    .transaction-pagination button {
        color: var(--text-gray-700);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        line-height: 20px;
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
        padding: var(--space-sm) 14px !important;
    }

    .transaction-pagination ul li {
        display: inline-block;
        margin-right: var(--space-lg);
    }

        .transaction-pagination ul li a {
            font-size: var(--fz-sm);
            font-weight: 500;
            color: var(--text-gray-500);
        }

            .transaction-pagination ul li a.active {
                color: #005CA3;
                background-color: #CEE4F4;
                padding: var(--space-sm) var(--space-xs);
                border-radius: var(--br-md);
            }

.format-download-icon {
    width: 38px;
    height: 38px;
    margin-bottom: var(--space-lg);
}

.transaction-ref {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.transaction-drawer {
    width: 620px;
    max-width: 95%;
}

.transaction-ref-label {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    margin-bottom: var(--space-xs);
}

.transaction-ref-number {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-sm);
    line-height: 44px;
}


.transaction-data-row {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.transaction-data-title {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-md);
    margin-bottom: var(--space-xs);
}

.transaction-data-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 20px;
    margin: 0;
    padding: 0;
}

.transaction-summary-row {
    margin-bottom: var(--space-lg);
}

.summary-card {
    background: var(--color-white);
    border-radius: var(--br-md);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    border-top: var(--space-xs) solid var(--color-border);
    position: relative;
}

    .summary-card.total-transactions {
        border-top: var(--space-xs) solid #0078D4;
    }

    .summary-card.successful-transactions {
        border-top: var(--space-xs) solid #36BFFA;
    }

    .summary-card.failed-transactions {
        border-top: var(--space-xs) solid #5ED4C6;
    }

.summary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    color: var(--text-gray-900);
    margin-bottom: var(--space-md);
    line-height: 18px;
}

.summary-card-menu {
    color: var(--text-gray-400);
    cursor: pointer;
}

.summary-card-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.summary-card-value {
    font-size: var(--fz-2xl);
    font-weight: var(--fw-xl);
    color: var(--text-gray-900);
    margin: 0;
    padding: 0;
    line-height: 32px;
}

.summary-card-chart {
    margin-left: var(--space-xs);
    display: flex;
    align-items: flex-end;
}

.summary-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    line-height: 20px;
}

.summary-card-growth {
    margin-bottom: 0 !important;
}

    .summary-card-growth.positive {
        color: var(--color-success);
        font-weight: var(--fw-lg);
    }

    .summary-card-growth.negative {
        color: #2ad9c5;
        font-weight: var(--fw-lg);
    }

.summary-card-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    margin-bottom: 0;
}

    .summary-card-desc.top-space {
        margin-top: var(--space-sm);
    }

.summaries-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--color-border);
    border-radius: var(--br-lg);
}

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

.summaries-data-table .header {
    padding: var(--space-lg);
}

    .summaries-data-table .header h6 {
        font-size: var(--fz-sm);
        font-weight: var(--fw-lg);
        color: var(--text-gray-900);
    }

    .summaries-data-table .header p {
        font-size: var(--fz-xs);
        color: var(--text-gray-500);
        margin: 0;
    }

.summaries-table-header {
    flex: 1;
}

.summaries-toggle-container {
    display: flex;
    align-items: center;
    background-color: var(--color-off-white);
    padding: var(--space-xs);
    border-radius: var(--br-md);
    gap: 0;
}


.summaries-data-table .table thead th {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    color: var(--color-text-grey);
}

.t-head-padding {
    padding-left: 0 !important;
}

.summaries-data-table .table tbody td {
    align-items: center;
    font-size: var(--fz-xs);
    padding: var(--space-sm) 0 var(--space-md) 0;
}

.institution-cell {
    display: flex;
    align-items: center;
    gap: var(--space-xs) !important;
    font-weight: var(--fw-md);
}

.summaries-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-2xl);
}

    .summaries-pagination button {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
        padding: var(--space-sm) var(--space-md);
    }

    .summaries-pagination ul {
        margin-bottom: 0;
    }

        .summaries-pagination ul li {
            display: inline-block;
            margin-right: var(--space-lg);
        }

            .summaries-pagination ul li a {
                font-size: var(--fz-xs);
                font-weight: 500;
                color: var(--text-gray-500);
            }

                .summaries-pagination ul li a.active {
                    color: #005CA3;
                    background-color: #CEE4F4;
                    padding: var(--space-sm) var(--space-md);
                    border-radius: var(--br-md);
                }

.sum-transaction-wrapper {
    background-color: var(--color-white);
    padding: var(--space-lg);
    border-radius: var(--br-md);
}

.sum-transaction-row {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
}

    .sum-transaction-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .sum-transaction-row span {
        color: var(--text-gray-900);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
    }

.sum-transaction-icon {
    height: 24px;
    width: 24px;
}

.sum-transaction-row h1 {
    margin-top: var(--space-lg);
    color: var(--text-gray-900);
    font-size: var(--fz-2xl);
    font-weight: var(--fw-lg);
    line-height: 32px;
    margin-bottom: 0;
}

    .sum-transaction-row h1 span {
        color: var(--text-gray-300);
        font-size: var(--fz-2xl);
        font-weight: var(--fw-lg);
    }

/* Collection */
#collections-date-range-input {
    background-color: var(--color-white);
    width: auto;
    max-width: 100%;
}

.collection-drawer {
    width: 540px;
    max-width: 100%;
}

    .collection-drawer .drawer-section h6 {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--text-gray-900);
        line-height: 20px;
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-sm);
    }

/* Single Transactions */

.single-transaction-drawer {
    width: 540px;
    max-width: 100%;
}

    .single-transaction-drawer .drawer-body {
        overflow-x: hidden;
    }

    .single-transaction-drawer .form {
        width: 100%;
        max-width: 100%;
    }

    .single-transaction-drawer .input,
    .single-transaction-drawer .input-select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

.transaction-amount-inactive {
    padding: var(--space-lg) var(--space-xs);
    border: solid 1px var(--text-gray-300);
    background-color: #E9EDF2;
    border-radius: var(--br-md);
    margin-bottom: var(--space-2xl);
    font-size: var(--fz-3xl);
    font-weight: var(--fw-lg);
    line-height: 24px;
}

    .transaction-amount-inactive .currency {
        color: var(--text-gray-400);
    }

.st-bordered-pin {
    height: 20px;
    width: 20px;
}

.single-transaction-approver-drawer {
    width: 540px;
    max-width: 100%;
}

    .single-transaction-approver-drawer .drawer-section h6 {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--text-gray-900);
        line-height: 20px;
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-sm);
    }

    .single-transaction-approver-drawer .button-tertiary {
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
    }

        .single-transaction-approver-drawer .button-tertiary:hover {
            background-color: var(--color-white);
            color: var(--text-gray-900);
        }

/* Connectors */
.connectors-header {
    margin-bottom: var(--space-lg);
}

.connectors-header-text .connectors-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-xs);
}

.connectors-description {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin-bottom: 0;
}

.connectors-add-btn {
    padding: var(--space-sm) var(--space-md);
}

.create-connector-modal {
    width: 700px;
    max-width: calc(100vw - 16px);
}


.connectors-table-section {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-200);
    margin-bottom: var(--space-2xl);
}

.connectors-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.connectors-table {
    min-width: 800px;
    white-space: nowrap;
    margin: 0;
}

.connectors-table-responsive::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
    pointer-events: none;
}

.connectors-table-header {
    padding: var(--space-lg);
    border-bottom: solid 1px var(--text-gray-200);
}

.connectors-table-title {
    font-size: var(--fz-sm);
    margin-bottom: 0;
    font-weight: var(--fw-md);
}

.connectors-table-options-btn {
    background-color: transparent;
    border: none;
    color: var(--text-gray-400);
}

.connectors-table thead {
    background-color: #F9FAFB;
}

    .connectors-table thead tr th {
        font-size: var(--fz-xs);
        color: var(--text-gray-500);
        font-weight: 500;
    }

.connectors-table > thead > tr > th:not(:first-child) {
    padding-left: 0 !important;
}


.connectors-table-row td {
    vertical-align: middle;
}

.connectors-key-cell img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
}

.connectors-key-cell {
    font-size: var(--fz-xs);
}

.connectors-copy-cell {
    color: var(--color-primary);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
}

    .connectors-copy-cell button {
        color: var(--color-primary);
        border: none;
        background-color: transparent;
        font-weight: 500;
    }

.connectors-created-cell,
.connectors-expiry-cell {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
}

.connectors-status-cell span.badge {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connectors-status-cell span img {
    margin-right: var(--space-xs);
}

.connectors-status-cell .active-connector {
    max-width: 65px;
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--color-success);
    background-color: var(--color-success-bg);
    padding: 6px 12px;
    border-radius: var(--br-lg);
}

.connectors-status-cell .inactive-connector {
    max-width: 87px;
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--text-gray-900);
    background-color: #F2F4F7;
    padding: 6px 12px;
    border-radius: var(--br-lg);
}

.badge.active-connector {
    max-width: 65px;
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--color-success);
    background-color: var(--color-success-bg);
    padding: 6px 12px;
    border-radius: var(--br-lg);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge.inactive-connector {
    max-width: 87px;
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--text-gray-900);
    background-color: #F2F4F7;
    padding: 6px 12px;
    border-radius: var(--br-lg);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.connector-manage-btn {
    padding: var(--space-sm) var(--space-md);
}

    .connector-manage-btn span img {
        height: 12px;
        width: 12px;
    }

    .connector-manage-btn span {
        border-left: solid 1px var(--text-gray-100);
        padding: var(--space-md) 0px var(--space-md) var(--space-md);
    }

.connectors-actions-cell {
    text-align: end;
    padding-right: var(--space-2xl) !important;
}

    .connectors-actions-cell .dropdown-menu {
        font-size: var(--fz-sm);
        color: #344054;
        background-color: var(--color-white);
        border: none;
        border-radius: var(--br-lg);
        box-shadow: var(--box-shadow);
    }

        .connectors-actions-cell .dropdown-menu .connector-action-delete {
            border-top: solid 1px #EAECF0;
            padding-top: var(--space-xs);
        }

.connectors-pagination-info {
    font-size: var(--fz-sm);
    font-weight: 500;
    color: var(--text-gray-700);
}

.connectors-pagination-controls button {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    padding: var(--space-sm) var(--space-xs);
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
}

.connectors-code-copy-btn {
    color: var(--color-primary);
    border: none;
    background-color: transparent;
    font-weight: 500;
    font-size: var(--fz-xs);
    cursor: pointer;
}

.connectors-channel-cell {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
}

.connector-add-modal .modal-w-body {
    margin-bottom: 0;
}

.connector-modal-icon {
    width: 56px;
    margin-bottom: var(--space-sm);
}

.add-connector-brand {
    margin-bottom: var(--space-2xl);
}

.add-connector-logo {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    margin-right: var(--space-sm);
    background-color: #E6F0FA;
}

.connector-brand-desc h6 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-md);
    line-height: 24px;
    margin-bottom: var(--space-xs);
}

.connector-brand-desc p {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 18px;
    margin-bottom: 0;
}

.add-connector-brand button {
    padding: var(--space-sm);
    color: var(--text-gray-800);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    background-color: var(--color-white);
}

    .add-connector-brand button img {
        width: 20px;
        height: 20px;
        margin-left: var(--space-sm);
    }

.channel-form-icon {
    top: 60% !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: var(--space-md);
}

.connector-add-modal .button-tertiary {
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
}

    .connector-add-modal .button-tertiary:hover {
        color: var(--text-gray-900);
    }

.connectors-pagination {
    padding: var(--space-xs) var(--space-2xl);
}

    .connectors-pagination button {
        color: #344054;
        background: #fff;
        border: 1px solid #EAECF0;
        border-radius: 6px;
        padding: 6px 16px;
        font-weight: 500;
    }

        .connectors-pagination button:hover {
            color: #344054;
            background-color: var(--color-white);
        }

    .connectors-pagination ul {
        display: flex;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .connectors-pagination ul li a {
            display: block;
            padding: 6px 12px;
            border-radius: 6px;
            color: var(--text-gray-500);
            font-weight: 500;
            text-decoration: none;
            background: transparent;
        }

            .connectors-pagination ul li a.active {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;
                background: #EEF4FF;
                color: #175CD3;
                border: none;
                border-radius: var(--br-md);
            }

.connectors-hero {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-radius: var(--br-md);
    background-image: url('../..//images/connectors-hero.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
}

    .connectors-hero h1 {
        padding-top: var(--space-lg);
        font-size: var(--fz-xl);
        font-weight: var(--fw-lg);
        line-height: 24px;
        color: #005CA3;
    }

    .connectors-hero p {
        font-size: var(--fz-xs);
        color: #013C69;
        line-height: 1.4;
    }

.merchant-connectors-header-wrapper {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.merchant-connectors-header-desc h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
}

.merchant-connectors-header-desc p {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    margin: 0;
}


.merchant-connectors-header-search input[type="text"] {
    font-size: var(--fz-xs);
    color: #667085;
    width: 400px;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('../..//images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-4xl);
    box-sizing: border-box;
}

    .merchant-connectors-header-search input[type="text"]:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.merchant-connector {
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.merchant-connector-brand {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-bottom: var(--space-lg);
}

.merchant-connector-name {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    margin-bottom: var(--space-sm);
}

.merchant-connector-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 20px;
    margin-bottom: var(--space-sm);
}

.merchant-connector-view {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-off-white);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
}

    .merchant-connector-view img {
        width: 8px;
        height: 8px;
        margin-left: var(--space-xs);
    }

.merchant-connector .badge {
    margin-bottom: var(--space-sm);
}

.connector-details-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 4px #fff;
    background-color: #EBF6FF;
    color: #005CA3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-xs);
    box-shadow: 0 0 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}

.connector-details-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.connector-details-meta-name {
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
    line-height: 32px;
    margin-bottom: 0;
}

.connector-details-drawer .connector-description {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 20px;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: solid 1px var(--text-gray-300);
}

.connector-ops-header {
    color: var(--text-gray-600);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 20px;
    margin-bottom: var(--space-sm);
}

.connector-ops-table {
    width: 100%;
    table-layout: fixed;
}

    .connector-ops-table tr {
        display: flex;
        align-items: center;
        margin-bottom: var(--space-xs);
    }

    .connector-ops-table td {
        width: 50%;
        padding: var(--space-sm) 0;
    }

        .connector-ops-table td.bdt-content {
            text-align: end;
        }

.btn-group-yesno {
    background: var(--color-white);
    border-radius: var(--br-md);
    box-shadow: none;
    width: 160px !important;
    height: 40px;
    display: inline-flex;
}

    .btn-group-yesno img {
        width: 14px;
        height: 14px;
    }

.btn-yesno {
    background: var(--color-white);
    color: var(--text-gray-900);
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    font-size: var(--fz-xs);
    font-weight: var(--fw-sm);
    box-shadow: none;
    outline: none;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .btn-yesno:focus,
    .btn-yesno:active,
    .btn-yesno.active {
        background: var(--color-white);
        color: var(--text-gray-900);
        border: 1px solid var(--text-gray-300) !important;
        box-shadow: none;
    }

    .btn-yesno:hover {
        background: var(--color-white);
        color: var(--text-gray-900);
        border: 1px solid var(--text-gray-300);
        box-shadow: none;
    }

/* Refunds */

.request-refunds-drawer {
    width: 540px;
}

.refund-details-drawer {
    width: 540px;
}

.refund-reason-form {
    margin-bottom: 0;
}

    .refund-reason-form textarea {
        margin-bottom: 0 !important;
    }

.transaction-details-form {
    margin-bottom: var(--space-2xl);
}

    .transaction-details-form .input {
        width: 400px;
        max-width: 100%;
        padding: var(--space-sm) var(--space-sm) !important;
        margin-bottom: 0 !important;
    }

    .transaction-details-form .button-small {
        margin-bottom: 0 !important;
        padding: var(--space-xs) var(--space-sm) !important;
        height: auto;
    }

.refunds-display-table-section h6 {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    color: var(--text-gray-900);
    line-height: 20px;
    margin-bottom: var(--space-sm);
}

.refunds-display-table-section .borderless-display-table {
    margin-bottom: var(--space-2xl);
}

    .refunds-display-table-section .borderless-display-table.last {
        margin-bottom: 0;
    }

    .refunds-display-table-section .borderless-display-table .bdt-title {
        width: 50%;
    }

    .refunds-display-table-section .borderless-display-table .bdt-content {
        width: 50%;
    }

/* Refund Header Styles */
.refunds-header-wrapper {
    margin-bottom: var(--space-2xl);
}

.refunds-header-desc h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
}

.refunds-header-desc p {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin: 0;
}

.refunds-header-wrapper input {
    width: auto;
    background-color: var(--color-white);
}

.refund-search-request {
    gap: var(--space-lg);
}

    .refund-search-request .button-primary {
        display: inline-flex;
        padding: var(--space-sm) var(--space-sm);
        gap: var(--space-sm);
    }


.refunds-header-search input[type="text"] {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    width: auto;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url(..//images/icons/icon-dark/search-500.svg);
    background-position: left var(--space-md) center;
    padding-left: var(--space-4xl);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

    .refunds-header-search input[type="text"]:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.refunds-filter-picker {
    flex: 1;
    margin-bottom: var(--space-2xl);
}

.refunds-filter-wrapper {
    gap: var(--space-xs);
}

.refund-filter {
    color: var(--text-gray-700);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    padding: var(--space-xs) var(--space-md);
}

    .refund-filter img {
        margin-right: var(--space-xs);
    }

.refund-filter-option {
    color: var(--text-gray-700);
    background-color: var(--color-white);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-md);
}

    .refund-filter-option.active {
        color: #005ca3;
        background-color: #ebf6ff;
        border: solid 1px var(--text-gray-300);
    }

    .refund-filter-option .bi-x-lg {
        -webkit-text-stroke: 0.7px currentColor;
        opacity: 1;
        transform: scale(1);
    }

.refunds-filter-picker input {
    width: auto;
    background-color: var(--color-white);
}


.refund-reason {
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    background-color: var(--color-white);
    padding: var(--space-lg);
    align-items: stretch;
    color: var(--text-gray-900);
    margin-bottom: var(--space-lg);
}

.refund-title {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
}

.refund-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-sm);
    line-height: 20px;
    margin-bottom: var(--space-sm);
}

.refund-meta {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.refund-date {
    padding: var(--space-sm) var(--space-xl);
}

    .refund-date h4 {
        font-size: var(--fz-xs);
        font-weight: var(--fw-lg);
        line-height: 18px;
        margin-bottom: 0;
    }

    .refund-date p {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        line-height: 18px;
        margin-bottom: 0;
    }

    .refund-date img {
        height: 14px;
        margin-right: var(--space-sm);
    }

.refund-trans-ref-num {
    padding: var(--space-sm) var(--space-xl);
}

    .refund-trans-ref-num h4 {
        font-size: var(--fz-xs);
        font-weight: var(--fw-lg);
        line-height: 18px;
        margin-bottom: 0;
    }

    .refund-trans-ref-num p {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        line-height: 18px;
        margin-bottom: 0;
    }

.refund-meta .row {
    margin-bottom: var(--space-sm);
}

.refund-merchant-beneficiary {
    width: 100%;
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    background: #fff;
    padding: 0;
    margin-bottom: var(--space-sm);
}


.refund-beneficiary {
    padding: var(--space-sm) var(--space-sm);
}

.refund-label {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 18px;
    margin-bottom: var(--space-sm);
}

.refund-merchant-avatar {
    width: 32px;
    height: 32px;
    margin-right: var(--space-sm);
}

.refund-merchant-name,
.refund-beneficiary-name {
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 20px;
    margin-bottom: 0;
    word-break: break-word;
}

.refund-merchant-number,
.refund-beneficiary-number {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
}

.refund-beneficiary-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-weight: var(--fw-md);
    font-size: var(--fz-xs);
    line-height: 20px;
    margin-right: var(--space-sm);
}

.open-refund-badge {
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    background-color: #EFE09F;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.approved-refund-badge {
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    background-color: var(--color-success-bg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.rejected-refund-badge {
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    background-color: #F6B6C5;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.cancelled-refund-badge {
    color: var(--color-white);
    font-weight: var(--fw-md);
    background-color: #F04438;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

    .cancelled-refund-badge img {
        width: 18px;
        height: 18px;
    }

.refund-view-button {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    line-height: 20px;
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    gap: var(--space-xs);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-300);
    background-color: var(--text-gray-100);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .refund-view-button:hover {
        background-color: var(--text-gray-200);
        border-color: var(--text-gray-400);
    }

    .refund-view-button .bi-chevron-right {
        -webkit-text-stroke: 0.7px currentColor;
        opacity: 1;
        transform: scale(1);
    }

.refund-status-action {
    margin-top: var(--space-md);
}


.refund-details-content {
    padding: var(--space-sm);
}

.refund-details-section {
    margin-bottom: var(--space-lg);
}

    .refund-details-section:last-child {
        margin-bottom: 0;
    }

    .refund-details-section h6 {
        color: var(--text-gray-900);
        font-size: var(--fz-md);
        font-weight: var(--fw-lg);
        margin-bottom: var(--space-sm);
    }

.refund-details-grid {
    display: grid;
    gap: var(--space-sm);
}

.refund-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs);
    background-color: var(--text-gray-100);
    border-radius: var(--br-md);
}

.detail-label {
    color: var(--text-gray-600);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
}

.detail-value {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-sm);
}

.beneficiary-info {
    padding: var(--space-sm);
    background-color: var(--text-gray-100);
    border-radius: var(--br-md);
}

.refunds-pagination {
    margin-top: 0 !important;
    padding: 0 !important;
}


/* Summary Cards Styles */

.summary-card.total-refunds {
    border-top: var(--space-xs) solid #0078D4;
}

.summary-card.total-refund-amount {
    border-top: var(--space-xs) solid #5ED4C6;
}

.analytics-faint {
    color: var(--text-gray-300);
}

.chart-row {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.chart-card {
    margin-bottom: var(--space-2xl);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
}

    .chart-header h6 {
        color: var(--text-gray-900);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        margin: 0;
    }

.chart-menu {
    color: var(--text-gray-400);
    cursor: pointer;
}

.chart-container {
    position: relative;
    height: 180px;
}

/* Disputes */
.disputes-header-wrapper {
    margin-bottom: var(--space-2xl);
}

.disputes-header-desc h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
}

.disputes-header-desc p {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
    margin: 0;
}

.disputes-header-search input[type="text"] {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    width: auto;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url(..//images/icons/icon-dark/search-500.svg);
    background-position: left var(--space-md) center;
    padding-left: var(--space-4xl);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

    .disputes-header-search input[type="text"]:focus {
        border-color: var(--color-accent);
        outline: none;
    }

.disputes-filter-picker {
    margin-bottom: var(--space-2xl);
    flex: 1;
}

    /* Ensure date input matches refunds input behavior */
    .disputes-filter-picker input {
        width: auto;
        background-color: var(--color-white);
    }

/* Ensure any header inputs inside disputes wrapper behave like refunds */
.disputes-header-wrapper input {
    width: auto;
    background-color: var(--color-white);
}

.disputes-filter-wrapper {
    gap: var(--space-sm);
}

.dispute-filter {
    color: var(--text-gray-700);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    padding: var(--space-xs) var(--space-md);
}

    .dispute-filter img {
        margin-right: var(--space-xs);
    }

.dispute-filter-option {
    color: var(--text-gray-700);
    background-color: var(--color-white);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-md);
}

    .dispute-filter-option.active {
        color: #005ca3;
        background-color: #ebf6ff;
        border: solid 1px var(--text-gray-300);
    }

    .dispute-filter-option .bi-x-lg {
        -webkit-text-stroke: 0.7px currentColor;
        opacity: 1;
        transform: scale(1);
    }

.dispute-reason {
    border: solid 1px var(--text-gray-300);
    border-radius: var(--br-md);
    background-color: var(--color-white);
    padding: var(--space-lg);
    align-items: stretch;
    color: var(--text-gray-900);
    margin-bottom: var(--space-lg);
}

.dispute-title {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 24px;
    margin-bottom: 0;
}

/* Match disputes drawer width to refunds drawers */
.add-event-drawer {
    width: 540px;
}

.dispute-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-sm);
    line-height: 20px;
    margin-bottom: var(--space-sm);
}

.dispute-meta {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.dispute-date {
    padding: var(--space-sm) var(--space-xl);
}

    .dispute-date h4 {
        font-size: var(--fz-xs);
        font-weight: var(--fw-lg);
        line-height: 18px;
        margin-bottom: 0;
    }

    .dispute-date p {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        line-height: 18px;
        margin-bottom: 0;
    }

    .dispute-date img {
        height: 14px;
        margin-right: var(--space-sm);
    }

.dispute-trans-ref-num {
    padding: var(--space-sm) var(--space-xl);
}

    .dispute-trans-ref-num h4 {
        font-size: var(--fz-xs);
        font-weight: var(--fw-lg);
        line-height: 18px;
        margin-bottom: 0;
    }

    .dispute-trans-ref-num p {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        line-height: 18px;
        margin-bottom: 0;
    }

.dispute-meta .row {
    margin-bottom: var(--space-sm);
}

.dispute-merchant-beneficiary {
    width: 100%;
    border: 1px solid var(--text-gray-300);
    border-radius: var(--br-md);
    background: #fff;
    padding: 0;
}

.dispute-merchant.col-6 {
    padding: var(--space-sm) var(--space-sm);
    border-right: 1px solid #e5e7eb;
}

.dispute-beneficiary.col-6 {
    padding: var(--space-sm) var(--space-sm);
}

.dispute-label {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 18px;
    margin-bottom: var(--space-sm);
}

.dispute-merchant-avatar {
    width: 32px;
    height: 32px;
    margin-right: var(--space-sm);
}

.dispute-merchant-name,
.dispute-beneficiary-name {
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 20px;
    margin-bottom: 0;
    word-break: break-word;
}

.dispute-merchant-number,
.dispute-beneficiary-number {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
}

.dispute-beneficiary-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: hidden;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-weight: var(--fw-md);
    font-size: var(--fz-xs);
    line-height: 1;
    margin-right: var(--space-sm);
}

.open-dispute-badge {
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    background-color: #EFE09F;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.closed-dispute-badge {
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    background-color: var(--text-gray-200);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.dispute-manage-button {
    color: var(--text-gray-800);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    line-height: 20px;
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    gap: var(--space-xs);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-300);
    background-color: var(--text-gray-100);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .dispute-manage-button:hover {
        background-color: var(--text-gray-200);
        border-color: var(--text-gray-400);
    }

    .dispute-manage-button .bi-chevron-right {
        -webkit-text-stroke: 0.7px currentColor;
        opacity: 1;
        transform: scale(1);
    }

.disputes-pagination {
    margin-top: 0 !important;
    padding: 0 !important;
}

.dispute-application-nav {
    margin-top: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: solid 1px var(--text-gray-300);
    margin-bottom: var(--space-lg);
}

    .dispute-application-nav ul li {
        display: inline-block;
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
        margin-right: var(--space-sm);
        margin-bottom: 0;
        padding-bottom: 0;
        cursor: pointer;
    }

        .dispute-application-nav ul li.active {
            color: var(--color-primary);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: var(--space-lg);
            z-index: 1000;
        }

.dispute-application-card {
    font-size: var(--fz-sm);
    background-color: var(--color-white);
    border-radius: var(--br-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.dispute-application-section {
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: solid 1px var(--color-border);
}

    .dispute-application-section.last {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }

.dispute-application-section-header {
    color: var(--text-gray-900);
    font-size: var(--font-size-4xl);
    font-weight: var(--fw-lg);
    line-height: 44px;
    margin-bottom: var(--space-xs);
}

.dispute-application-section-desc {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-sm);
    line-height: 20px;
    margin-bottom: var(--space-lg);
}

.dispute-application-section h6 {
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
}

.dispute-application-section .details {
    padding-top: var(--space-xs);
}

.dispute-application-document p {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    color: var(--text-gray-900);
    margin: 0;
}

.dispute-application-document span {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
}

.dispute-application-document {
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
    border-bottom: solid 1px var(--color-border);
}

    .dispute-application-document:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.section-collapse-header {
    cursor: pointer;
}

.application-section .collapse {
    margin-top: var(--space-xs);
}

.application-header-option {
    margin-bottom: var(--space-sm);
}

.dispute-application-attachment-upload-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-300);
    background: var(--text-gray-100);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 20px;
    color: var(--text-gray-800);
}

    .dispute-application-attachment-upload-btn img {
        width: 16px;
        height: 16px;
    }

.dispute-application-attachment {
    margin-bottom: var(--space-2xl);
    border: solid 1px var(--text-gray-200);
    border-radius: var(--br-md);
    padding: var(--space-lg);
}

    .dispute-application-attachment:last-child {
        margin-bottom: 0;
    }

.dispute-application-attachment-details {
    width: 100%;
}

.dispute-application-attachment img {
    margin-right: var(--space-xs);
}

.dispute-application-attachment-name {
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    color: var(--text-gray-700);
    line-height: 20px;
    margin-bottom: 0;
}

.dispute-application-attachment-size {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    line-height: 20px;
    margin-bottom: 0;
}


.dispute-application-action-preview-link {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    line-height: 20px;
    text-decoration-line: underline;
    text-underline-position: from-font;
}

.dispute-add-parties-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    border-radius: var(--br-md);
    border: none;
    background: var(--color-white);
    padding: 0;
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 24px;
    color: var(--color-primary);
}

    .dispute-add-parties-button img {
        width: 16px;
        height: 16px;
    }

.add-parties-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    border-radius: var(--br-md);
    border: none;
    background: var(--color-white);
    padding: 0;
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 24px;
    color: var(--color-primary);
}

    .add-parties-button img {
        width: 24px;
        height: 24px;
    }

.dispute-application-party-item {
    margin-bottom: var(--space-2xl);
}

    .dispute-application-party-item:last-child {
        margin-bottom: 0;
    }

.dispute-application-party-icon {
    margin-right: var(--space-lg);
}

.dispute-party-item {
    margin-bottom: var(--space-2xl);
}

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

.dispute-party-icon {
    margin-right: var(--space-md);
}

.dispute-party-name {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 20px;
    margin-bottom: 0;
}

.dispute-party-email {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    line-height: 20px;
    margin-bottom: 0;
}

.dispute-party-action {
    margin-left: auto;
}

    .dispute-party-action a {
        color: var(--color-danger);
        font-size: var(--fz-sm);
        font-weight: var(--fw-lg);
        line-height: 20px;
    }

.dispute-party-letter-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF4F40;
    color: var(--color-white);
    font-weight: var(--fw-md);
    font-size: var(--fz-md);
    margin-right: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}


.dispute-event-header {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    margin-bottom: var(--space-2xl);
}

.dispute-event-sub-header {
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
    margin-bottom: var(--space-sm);
}

.dispute-event-desc {
    background: var(--text-gray-100);
    padding: var(--space-lg);
    font-size: var(--base-fz);
    line-height: 24px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: var(--br-md);
    color: var(--text-gray-500);
    margin-bottom: var(--space-xs);
}

.dispute-event-attachments {
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.dispute-application-action-wrapper {
    position: fixed;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    left: 53%;
    transform: translateX(-50%);
    bottom: var(--space-lg);
    z-index: 1050;
    padding: var(--space-lg);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    box-shadow: var(--box-shadow);
}

    .dispute-application-action-wrapper .action-btn-col {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .dispute-application-action-wrapper .action-btn-col:not(:last-child) {
            border-right: solid 1px var(--text-gray-300);
        }

    .dispute-application-action-wrapper button {
        display: flex;
        align-items: center;
        font-size: var(--fz-md);
        font-weight: var(--fw-md);
        line-height: 24px;
        border: none;
        background-color: var(--color-white);
        margin-right: var(--space-xs);
        margin-left: var(--space-xs);
    }

        .dispute-application-action-wrapper button img {
            margin-right: var(--space-sm);
            height: 20px;
            width: 20px;
        }

    .dispute-application-action-wrapper .add {
        color: var(--color-primary);
    }

.action-btn-col .event-count {
    margin-right: var(--space-sm);
}

.dispute-application-action-wrapper button.approve-application {
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: var(--space-sm) var(--space-sm);
    border-radius: var(--br-md);
}

.dispute-drawer-body .drawer-section h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-md);
    line-height: 28px;
    margin-bottom: 0;
}

.dispute-drawer-body .drawer-section p {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    font-weight: var(--fw-sm);
    line-height: 20px;
    margin-bottom: 0;
}

.dispute-drawer-body .drawer-section .dispute-drawer-comment {
    margin-top: var(--space-2xl);
}

.close-dispute-drawer .input,
.close-dispute-drawer .input-select-right-icon {
    margin-bottom: 0px;
}

.dispute-drawer-refund-merchant {
    display: flex;
    align-items: start;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xl);
}


.drawer-refund-select-icon {
    position: absolute;
    top: 50%;
    left: var(--space-2xl);
    transform: translateY(-50%);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.drawer-refund-merchant-form .input-select {
    padding-left: calc(var(--space-2xl) + 12px + var(--space-2xl));
}

.dispute-drawer-supporting-attachments {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-xs);
}

    .dispute-drawer-supporting-attachments button {
        display: inline-flex;
        border: solid 1px var(--text-gray-300);
        background: transparent;
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        padding: var(--space-sm) var(--space-md);
    }

        .dispute-drawer-supporting-attachments button img {
            margin-right: var(--space-sm);
            width: 16px;
            height: 16px;
        }

.dispute-attachment-upload {
    margin-top: var(--space-2xl);
    margin-bottom: 0;
}

    .dispute-attachment-upload .drawer-upload-file-name {
        color: var(--text-gray-700) !important;
        font-size: var(--fz-sm);
        font-weight: var(--fw-md) !important;
        line-height: 20px;
        margin-bottom: var(--space-xs);
    }

    .dispute-attachment-upload .drawer-upload-file-size {
        color: var(--text-gray-500);
    }

    .dispute-attachment-upload .drawer-upload-file-actions {
        gap: var(--space-sm);
    }

.add-event-drawer textarea {
    margin-bottom: 0;
}

.add-event-drawer .dispute-party-name {
    color: var(--text-gray-700) !important;
    font-weight: var(--fw-md) !important;
}

.add-event-drawer .dispute-party-email {
    color: var(--text-gray-500) !important;
    font-weight: var(--fw-sm) !important;
}

.modal-size-md .add-parties-button img {
    width: 20px;
    height: 20px;
}

.add-party-header span {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    color: var(--text-gray-700);
    font-size: var(--fz-lg);
    font-weight: var(--fw-lg);
    line-height: 28px;
}

.add-party-modal .position-relative img {
    position: absolute;
    top: 50%;
    left: var(--space-md);
    width: 16px;
    height: 16px;
    object-fit: contain;
    z-index: 1;
}

.add-party-modal .position-relative .input {
    padding-left: var(--space-4xl);
}

.already-added-header {
    font-size: var(--fz-xs) !important;
    font-weight: var(--fw-lg);
    color: var(--text-gray-700);
    line-height: 18px;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md) !important;
}

.header-add-event {
    display: flex;
    gap: var(--space-md);
}

.threshold-row {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
}

    .threshold-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.threshold-metrics {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-lg);
}

.threshold-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-gray-700);
    font-size: var(--fz-md);
    font-weight: var(--fw-md);
    line-height: 30px;
    margin-bottom: var(--space-lg);
}

    .threshold-meta span img {
        width: 32px;
        height: 32px;
    }

.threshold-meta p {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    line-height: 20px;
    margin-bottom: 0;
}

.threshold-percentages-wrapper {
    width: 100%;
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.threshold-percentages {
    border: solid 1px var(--text-gray-200);
    padding: var(--space-xs);
    border-radius: var(--br-md);
}

.threshold-percentage-label {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-lg);
    line-height: 18px;
    margin-bottom: var(--space-sm);
    position: relative;
}


.threshold-percentage {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    line-height: 24px;
}

.threshold-percentages .col-6:first-child {
    position: relative;
    padding-right: 0;
}

    .threshold-percentages .col-6:first-child::after {
        content: '';
        position: absolute;
        top: -4px;
        right: 10px;
        bottom: -4px;
        width: 0.5px;
        background-color: var(--text-gray-200)
    }

/* Saving status alert styles */
.dispute-saving-status {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--space-xl);
    z-index: 1050;
    min-width: var(--saving-status-min-width, 664px);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: none;
}

    .dispute-saving-status .alert {
        pointer-events: auto;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        padding: var(--space-sm);
        border-radius: var(--br-md);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
    }

    .dispute-saving-status .alert-save-changes {
        background-color: #282F3C !important;
        color: var(--color-white);
    }

.merchant-dispute-header {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    gap: var(--space-2xl);
}

    .merchant-dispute-header .button-small {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
    }

    .merchant-dispute-header .button-tertiary {
        color: var(--text-gray-700);
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
    }

.merchant-dispute-wrapper {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.merchant-dispute-wrapper-section {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

    .merchant-dispute-wrapper-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .merchant-dispute-wrapper-section .flex-column {
    }

.merchant-dispute-wrapper h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-md);
    margin-bottom: var(--space-lg);
}

.merchant-dispute-wrapper-section .transaction-details-form input {
    width: auto;
    max-width: 100%;
}

.merchant-dispute-table-section {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

    .merchant-dispute-table-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .merchant-dispute-table-section h6 {
        color: var(--text-gray-900);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        margin-bottom: var(--space-lg);
    }

.dispute-application-header-option {
    margin-bottom: var(--space-sm);
}

.dispute-application-parties-involved {
    margin-top: var(--space-sm);
}

.dispute-parties-involved {
    margin-top: var(--space-sm);
}

.dispute-application-party-name {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 20px;
    margin-bottom: 0;
}

.dispute-application-party-email {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
    line-height: 20px;
    margin-bottom: 0;
}

.dispute-application-party-action a {
    color: var(--color-danger);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 20px;
}

.dispute-application-party-letter-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FF4F40;
    color: var(--color-white);
    font-weight: var(--fw-md);
    font-size: var(--fz-md);
    margin-right: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dispute-application-events-wrapper {
    margin-top: var(--space-lg);
}

/* Fake Data */

.fake-data-header {
    margin-top: var(--space-2xl);
}

.fake-data-title {
    color: var(--text-gray-900);
    font-size: var(--fz-md);
    line-height: 22px;
}

.fake-data-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 20px;
}

.fake-data-search-date {
    background-color: #E9EDF2;
    padding: var(--space-sm);
    border-radius: var(--br-md);
    margin-bottom: var(--space-lg);
}

.fake-data-search {
    font-size: var(--fz-sm);
    color: #667085;
    width: 400px;
    max-width: 100%;
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-md);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-image: url('/images/icons/icon-dark/search-500.svg');
    background-position: left var(--space-md) center;
    padding-left: var(--space-5xl);
}

    .fake-data-search:focus {
        border-color: var(--color-accent);
        outline: none;
    }


.fake-data-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-100);
    margin-bottom: var(--space-2xl);
}

.fake-data-table {
    margin-bottom: 0;
    width: 100%;
    border: solid 1px var(--text-gray-200);
    border-radius: var(--br-md);
    min-width: 800px;
    white-space: nowrap;
}

    .fake-data-table .fake-data-table thead th {
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
    }

        .fake-data-table .fake-data-table thead th img {
            width: 16px;
            height: 16px;
            margin-right: var(--space-xs) !important;
        }

    .fake-data-table thead th:first-child {
        border-top-left-radius: var(--br-md);
    }

    .fake-data-table thead th:last-child {
        border-top-right-radius: var(--br-md);
    }

    .fake-data-table th:nth-child(2),
    .fake-data-table th:nth-child(3),
    .fake-data-table th:nth-child(4),
    .fake-data-table th:nth-child(5) {
        padding-left: 0;
    }

    .fake-data-table .fake-data-table tbody td {
        align-items: center;
        font-size: var(--fz-xs);
        padding: var(--space-sm) 0 var(--space-sm) 0;
    }

    .fake-data-table td:last-child {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xl);
    }


.fake-data-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-2xl);
}

    .fake-data-pagination button {
        color: var(--text-gray-700);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 20px;
        background-color: var(--color-white);
        border: solid 1px var(--text-gray-300);
        padding: var(--space-sm) var(--space-md)
    }

    .fake-data-pagination ul {
        margin-bottom: 0;
    }

        .fake-data-pagination ul li {
            display: inline-block;
            margin-right: var(--space-lg);
        }

            .fake-data-pagination ul li a {
                font-size: var(--fz-xs);
                font-weight: 500;
                color: var(--text-gray-500);
            }

                .fake-data-pagination ul li a.active {
                    color: #005CA3;
                    background-color: #CEE4F4;
                    padding: var(--space-sm) var(--space-md);
                    border-radius: var(--br-md);
                }

.fake-merchant-badge {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: 6px 8px;
    border-radius: var(--br-md);
    color: var(--text-gray-900);
}

    .fake-merchant-badge img {
        margin-right: var(--space-xs);
    }

.fake-merchant-active {
    background-color: #A6DFBB;
}

.fake-merchant-inactive {
    background-color: var(--text-gray-200);
}

.top-up-button {
    display: flex;
    gap: var(--space-xs);
}

.selected-merchant-display {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-lg);
    background-color: var(--text-gray-100);
    border-radius: var(--br-md);
    border: 1px solid var(--text-gray-200);
    margin-bottom: var(--space-lg);
}

    .selected-merchant-display span {
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
    }

.fake-disbursement-data-container {
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border-radius: var(--br-md);
}

.fake-disbursement-format-selection-section h5 {
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
    margin-bottom: var(--space-md);
}

.fake-disbursement-format-selection-section p {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
    margin-bottom: 0;
}

.fake-disbursement-format-download-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-sm);
}

.fake-disbursement-data-container .fake-disbursement-format-download-icon {
    margin-bottom: var(--space-2xl);
}

.fake-disbursement-format-options {
    margin-top: var(--space-sm);
}

.fake-disbursement-format-options-container {
    margin-bottom: var(--space-xl);
}

.fake-disbursement-format-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding: var(--space-md);
    background-color: #F9FAFB;
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-200);
}

    .fake-disbursement-format-option.active {
        background-color: #EBF6FF;
        border: solid 1px var(--color-primary);
    }

.fake-disbursement-data-container .fake-disbursement-format-option img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: var(--space-2xl);
}

.fake-disbursement-format-options .fake-disbursement-format-heading {
    color: var(--text-gray-700);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 20px;
}

.fake-disbursement-format-option.active .fake-disbursement-format-heading {
    color: #005CA3;
}

.fake-disbursement-data-container .fake-disbursement-format-heading {
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
    margin-bottom: var(--space-2xl);
}

.fake-disbursement-format-options .fake-disbursement-format-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 18px;
    margin: 0;
    padding: 0;
}

.fake-disbursement-format-option.active .fake-disbursement-format-description {
    color: var(--color-primary);
}

.fake-disbursement-data-container .fake-disbursement-format-description {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
    margin-bottom: 0;
}

/* API keys */

.api-keys-header {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.api-keys-header-text .api-keys-title {
    font-size: var(--base-fz);
    margin-bottom: var(--space-xs);
}

.api-keys-description {
    font-size: var(--fz-xs);
    color: var(--text-gray-500);
    margin-bottom: 0;
}

.api-keys-add-btn {
    padding: var(--space-sm) var(--space-md);
}

.create-api-modal {
    width: 700px;
    max-width: calc(100vw - 16px);
}

.modal-copy-input .input-group {
    position: relative;
    margin-bottom: var(--space-xs);
}

.modal-copy-input .form-control {
    font-size: var(--fz-sm);
    padding: var(--space-sm) var(--space-md) !important;
    padding-right: 95px;
    border-radius: var(--br-md) !important;
    border: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.modal-copy-input .copy-btn {
    position: absolute;
    top: 50%;
    right: var(--space-sm);
    transform: translateY(-50%);
    border: none;
    color: var(--color-primary);
    font-size: var(--fz-sm);
    font-weight: 500;
    cursor: pointer;
    z-index: 2;
}

.modal-alert {
    margin-top: var(--space-lg);
    padding: var(--space-2xl) var(--space-sm);
    border-radius: var(--br-md) !important;
}

    .modal-alert p {
        text-align: start;
        color: #373839 !important;
        font-size: var(--fz-xs) !important;
    }

.api-keys-table-section {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    border: solid 1px var(--text-gray-200);
    margin-bottom: var(--space-2xl);
}

.api-keys-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.api-keys-table {
    min-width: 800px;
    white-space: nowrap;
}

.api-keys-table-responsive::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
    pointer-events: none;
}

.api-keys-table-header {
    padding: var(--space-sm) var(--space-2xl);
    border-bottom: solid 1px var(--text-gray-200);
}

.api-keys-table-title {
    font-size: var(--base-fz);
    margin-bottom: 0;
    font-weight: var(--fw-md);
}

.api-keys-table-options-btn {
    background-color: transparent;
    border: none;
    color: var(--text-gray-400);
}

.api-keys-table thead {
    background-color: #F9FAFB;
}

    .api-keys-table thead tr th {
        font-size: var(--fz-xs);
        color: var(--text-gray-500);
        font-weight: 500;
    }

        .api-keys-table thead tr th img {
            height: 14px;
            width: 14px;
            margin-right: var(--space-xs);
        }

.api-keys-table .t-head-padding {
    padding-left: 0 !important;
}

.api-keys-table-row {
    align-items: center;
}

    .api-keys-table-row td {
        font-size: var(--fz-xs);
        vertical-align: middle;
        padding: var(--space-sm) 0 var(--space-sm) 0;
    }

.api-keys-key-cell img {
    width: 22px;
    height: auto;
}

.api-keys-key-cell {
    font-size: var(--fz-xs);
}

.api-keys-copy-cell {
    color: var(--color-primary);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
}

    .api-keys-copy-cell button {
        color: var(--color-primary);
        border: none;
        background-color: transparent;
        font-weight: 500;
    }

.api-keys-created-cell,
.api-keys-expiry-cell {
    color: var(--text-gray-500);
    font-size: var(--fz-sm);
}

.api-keys-status-cell span.badge {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.api-keys-status-cell span img {
    margin-right: var(--space-xs);
}

.api-keys-status-cell .active-key {
    max-width: 65px;
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--color-success);
    background-color: var(--color-success-bg);
    padding: 6px 12px;
    border-radius: var(--br-lg);
}

.api-keys-status-cell .inactive-key {
    max-width: 87px;
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--text-gray-900);
    background-color: #F2F4F7;
    padding: 6px 12px;
    border-radius: var(--br-lg);
}

.api-keys-actions-cell {
    text-align: end;
    padding-right: var(--space-2xl) !important;
}

.api-key-manage-btn {
    padding: var(--space-xs) var(--space-sm);
}

    .api-key-manage-btn span {
        border-left: solid 1px var(--text-gray-100);
        padding: var(--space-xs) 0 var(--space-xs) var(--space-sm);
    }

.api-keys-actions-cell .dropdown-menu {
    font-size: var(--fz-sm);
    color: #344054;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--br-lg);
    box-shadow: var(--box-shadow);
}

    .api-keys-actions-cell .dropdown-menu .api-key-action-delete {
        border-top: solid 1px #EAECF0;
        padding-top: var(--space-xs);
    }

.api-keys-pagination-info {
    font-size: var(--fz-xs);
    font-weight: 500;
    color: var(--text-gray-700);
}

.api-keys-pagination-controls button {
    color: var(--text-gray-700);
    font-size: var(--fz-xs);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-white);
    border: solid 1px var(--text-gray-300);
}

/* Webhooks */
.webhook-management-header {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.webhook-management-info {
    flex: 1;
}

.webhook-management-action {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.webhook-management-title {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-lg);
    line-height: 22px;
    margin-bottom: var(--space-sm);
}

.webhook-management-desc {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    line-height: 14px;
    margin-bottom: 0;
}

.webhook-add-button {
    color: var(--color-primary);
    background-color: var(--color-white);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    border: solid 1px var(--color-primary);
    border-radius: var(--br-md);
    padding: var(--space-sm) var(--space-md);
    transition: all 0.2s ease;
}

    .webhook-add-button:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

    .webhook-add-button img {
        width: 16px;
        height: 16px;
    }

    .webhook-add-button:hover img {
        filter: brightness(0) invert(1);
    }


.webhook-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--color-border);
    border-radius: var(--br-lg);
    margin-bottom: var(--space-2xl);
}

.webhook-table {
    min-width: 800px;
    margin-bottom: 0;
    table-layout: auto;
}

.webhook-data-table .webhook-table-header {
    padding: var(--space-2xl);
}

    .webhook-data-table .webhook-table-header h6 {
        font-size: var(--fz-lg);
        color: var(--text-gray-900);
    }

    .webhook-data-table .webhook-table-header p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        margin: 0;
    }

.webhook-data-table .webhook-table {
    width: 100%;
    margin-bottom: 0;
}

    .webhook-data-table .webhook-table thead th {
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
        white-space: normal;
        word-wrap: break-word;
    }

.webhook-table th:nth-child(2),
.webhook-table th:nth-child(3),
.webhook-table th:nth-child(4) {
    padding-left: 0;
}

.webhook-data-table .webhook-table tbody td {
    align-items: center;
    font-size: var(--fz-sm);
    padding: var(--space-sm) 0 var(--space-2xl) 0;
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

.webhook-url {
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    word-break: break-all;
    white-space: normal;
    line-height: 1.4;
}

.webhook-badge {
    font-size: var(--fz-xs);
    font-weight: 400;
    padding: 6px 12px;
    border-radius: var(--br-lg);
    color: var(--text-gray-900);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .webhook-badge img {
        margin-right: var(--space-xs);
    }

.webhook-active {
    background-color: #ECFDF3;
    color: #027948;
}

.webhook-inactive {
    background-color: #F2F4F7;
    color: #344054;
}

.webhook-error {
    background-color: #FEE4E2;
    color: var(--color-danger);
}

.webhook-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    white-space: nowrap;
    vertical-align: middle;
}

.webhook-table tbody tr {
    height: auto;
    min-height: 60px;
}

.webhook-data-table {
    overflow-x: auto;
}


.webhook-pagination {
    padding: var(--space-xs) var(--space-2xl);
}

    .webhook-pagination button {
        color: #344054;
        background: #fff;
        border: 1px solid #EAECF0;
        border-radius: 6px;
        padding: 6px 16px;
        font-weight: 500;
    }

    .webhook-pagination ul {
        display: flex;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .webhook-pagination ul li a {
            display: block;
            padding: 6px 12px;
            border-radius: 6px;
            color: #344054;
            font-weight: 500;
            text-decoration: none;
            background: transparent;
        }

            .webhook-pagination ul li a.active {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;
                background: #EEF4FF;
                color: #175CD3;
                border: none;
            }

.webhooks-status {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: 2px 12px;
    border-radius: var(--br-lg);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: normal;
    word-wrap: break-word;
}

    .webhooks-status.active {
        background-color: #ECFDF3;
        color: #027948;
    }

    .webhooks-status.inactive {
        background-color: #F2F4F7;
        color: #344054;
    }

    .webhooks-status.error {
        background-color: #FEE4E2;
        color: var(--color-danger);
    }

    .webhooks-status img {
        margin-right: var(--space-xs);
    }

.webhook-manage-btn {
    padding: var(--space-sm) var(--space-md);
}

    .webhook-manage-btn span {
        border-left: solid 1px var(--text-gray-100);
        padding: var(--space-md) 0px var(--space-md) var(--space-md);
    }

.webhook-manage-dropdown .dropdown-menu {
    font-size: var(--fz-sm);
    color: #344054;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--br-lg);
    box-shadow: var(--box-shadow);
    text-align: center;
}

    .webhook-manage-dropdown .dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .webhook-manage-dropdown .dropdown-menu .blacklist {
        border-top: solid 1px #EAECF0;
        padding-top: var(--space-xs);
    }


.webhook-view-drawer .drawer-section .table {
    width: 100%;
    margin-bottom: 0;
}

    .webhook-view-drawer .drawer-section .table td {
        border: none;
        padding: var(--space-sm) 0;
        vertical-align: top;
    }

        .webhook-view-drawer .drawer-section .table td:first-child,
        .webhook-view-drawer .drawer-section .table td:last-child {
            word-break: break-word;
            white-space: normal;
        }

        .webhook-view-drawer .drawer-section .table td:first-child {
            color: var(--text-gray-500);
            font-size: var(--fz-md);
            font-weight: var(--fw-sm);
            line-height: 22px;
            width: 40%;
        }

        .webhook-view-drawer .drawer-section .table td:last-child {
            color: var(--text-gray-900);
            font-size: var(--fz-md);
            font-weight: var(--fw-md);
            line-height: 22px;
            width: 60%;
        }

.webhook-view-drawer .drawer-section .drawer-icon {
    width: 16px;
    height: 16px;
}

/* Error Pages */
.error-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
}

.error-content {
    text-align: center;
}

.error-illustration {
    margin-bottom: var(--space-sm);
}

    .error-illustration img {
        height: auto;
    }

.error-text .badge-error {
    background-color: #EBF6FF;
    color: #005CA3;
    font-size: var(--fz-sm);
    line-height: 20px;
    font-weight: var(--fw-lg);
    padding: var(--space-sm) var(--space-xs);
    border-radius: var(--br-md);
    margin-bottom: var(--space-2xl);
}

.error-title {
    color: var(--text-gray-900);
    font-size: 60px;
    font-weight: var(--fw-lg);
    line-height: 72px;
    margin-bottom: var(--space-2xl);
}

.error-description {
    color: var(--text-gray-500);
    font-size: var(--fz-lg);
    line-height: 20px;
    margin-bottom: var(--space-lg);
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
}

    .error-actions .button-small {
        display: flex;
        gap: var(--space-2xl);
    }

    .error-actions .button-tertiary {
        color: var(--text-gray-700);
        border: solid 1px var(--text-gray-300);
        background-color: var(--color-white);
    }


/*Admin Portal*/
.subheader-welcome:not(:last-child) {
    margin-bottom: var(--space-lg);
}

.welcome-text {
    text-transform: capitalize;
    font-size: var(--fz-md);
    font-weight: var(--fw-lg);
    color: var(--text-gray-900);
}

    .welcome-text:not(:last-child) {
        line-height: 24px;
    }

.welcome-description {
    color: var(--text-gray-500);
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    margin-bottom: 0;
}

.subheader-analytics-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-sm) 0 var(--space-sm) 0;
}

    .subheader-analytics-filter span {
        color: var(--text-gray-700);
        font-size: var(--fz-md);
        line-height: 20px;
        font-weight: var(--fw-md);
        cursor: pointer;
    }

        .subheader-analytics-filter span.active {
            background-color: #F2F4F7;
            padding: var(--space-sm) var(--space-2xl);
            border-radius: var(--br-md);
        }

.summary-cards-container {
    margin-bottom: var(--space-lg);
}

    .summary-cards-container:last-child {
        margin-bottom: 0;
    }

.summary-card-section {
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

    .summary-card-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.summary-card.reviewed-application {
    border-top: var(--space-xs) solid #0078D4;
}

    .summary-card.reviewed-application .summary-card-header {
        display: block;
    }

        .summary-card.reviewed-application .summary-card-header span {
            margin-bottom: var(--space-xs) !important;
        }

    .summary-card.reviewed-application .summary-card-body {
        margin-bottom: 0 !important;
    }

.summary-card.approved-application {
    border-top: var(--space-xs) solid #05BF7E;
}

    .summary-card.approved-application .summary-card-header {
        display: block;
    }

    .summary-card.approved-application .summary-card-body {
        margin-bottom: 0 !important;
    }

.summary-card.rejected-application {
    border-top: var(--space-xs) solid #FDC738;
}

    .summary-card.rejected-application .summary-card-header {
        display: block;
    }

    .summary-card.rejected-application .summary-card-body {
        margin-bottom: 0 !important;
    }

.summary-card-lg {
    background: var(--color-white);
    border-radius: var(--br-md);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    padding: var(--space-2xl);
    position: relative;
}

.summary-card-section-header {
    margin-bottom: var(--space-lg);
}

.summary-card-lg-title {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-lg);
    line-height: 24px;
    margin-bottom: var(--space-sm);
}

.summary-card-lg-desc {
    font-size: var(--fz-sm);
    line-height: 20px;
    color: var(--text-gray-500);
    font-weight: var(--fw-md);
    margin-top: var(--space-sm);
    margin-bottom: 0;
}

.summary-card-lg-count {
    margin-bottom: var(--space-lg);
}

    .summary-card-lg-count p {
        color: var(--text-gray-900);
        font-size: var(--fz-md);
        font-weight: var(--fw-md);
        line-height: 20px;
        margin-bottom: var(--space-sm);
    }

    .summary-card-lg-count h1 {
        color: var(--text-gray-900);
        font-size: 48px;
        font-weight: var(--fw-lg);
        line-height: 60px;
        margin-bottom: 0;
    }

.summary-card-chart-desc {
    color: var(--text-gray-600);
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    line-height: 20px;
    margin-bottom: var(--space-lg);
}

.organization-chart-container {
    display: flex;
    align-items: start;
    gap: var(--space-xs);
}

.organization-chart-wrapper {
    position: relative;
    height: 280px;
    width: 50%;
}

.organization-chart-legend {
    width: 50%;
}

.organization-legend-item {
    display: block;
    margin-bottom: var(--space-xs);
}

.organization-legend-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

    .organization-legend-color.active {
        background-color: #05BF7E;
    }

    .organization-legend-color.suspended {
        background-color: #FDC738;
    }

    .organization-legend-color.blacklisted {
        background-color: #0078D4;
    }

.organization-legend-label {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
}

.stat-wrapper {
    margin-bottom: var(--space-lg);
}

    .stat-wrapper:last-child {
        margin-bottom: 0;
    }

.col-md-6.stat-wrapper {
    margin-bottom: 0;
}

.stat-border-bottom {
    border-bottom: solid 1px var(--text-gray-200);
    padding-bottom: var(--space-lg);
}

.stat-border-right {
    border-right: solid 1px var(--text-gray-200);
}

.stat-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fz-sm);
    color: var(--text-gray-900);
    font-weight: var(--fw-md);
    line-height: 24px;
    margin-bottom: var(--space-2xl);
}

.stat-value {
    color: var(--text-gray-900);
    font-size: var(--font-size-5xl);
    font-weight: var(--fw-lg);
    line-height: 44px;
    margin-bottom: 0;
}

    .stat-value span {
        color: #D0D5DD;
    }

.submission-filter-nav {
    margin-bottom: var(--space-2xl);
}

    .submission-filter-nav a.nav-link {
        font-size: var(--fz-md);
        font-weight: var(--fw-md);
    }

        .submission-filter-nav a.nav-link.active {
            color: var(--color-primary);
            background-color: #CEE4F5;
            padding: var(--space-sm) var(--space-2xl);
            border-radius: var(--br-md) var(--br-md);
        }

.submissions-table-wrapper {
    background-color: var(--color-white);
    border: solid 1px var(--color-border);
    border-radius: var(--br-lg);
}

.submissions-data-table .header {
    padding: var(--space-2xl);
    margin-bottom: var(--space-sm);
}

    .submissions-data-table .header h6 {
        font-size: var(--fz-lg);
        color: var(--text-gray-900);
    }

    .submissions-data-table .header p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        margin: 0;
    }


.submissions-data-table .table thead th {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    color: var(--color-text-grey);
}

.submission-application-name {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: 500;
}

.submission-application-input {
    border: solid 1px var(--text-gray-300);
    border-radius: 6px !important;
    height: var(--space-sm) !important;
    width: var(--space-sm) !important;
}

.submission-application-name .form-check-input {
    border: solid 1px var(--text-gray-300);
    border-radius: 6px;
    height: var(--space-sm) !important;
    width: var(--space-sm) !important;
}

.submissions-data-table .table tbody td {
    align-items: center;
    font-size: var(--fz-sm);
    padding: var(--space-sm) 0 var(--space-2xl) 0;
}


.submissions-data-table .table .badge {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: 6px 8px;
    border-radius: var(--br-md);
    display: inline-flex;
    align-items: center;
}

.submissions-data-table .table .badge-psp {
    color: #344054;
    background-color: #F2F4F7;
}

.submissions-data-table .table .badge-govt {
    color: #344054;
    background-color: #F2F4F7;
}

.submissions-data-table .table .badge-merchant {
    color: #005CA3;
    background-color: #CEE4F4;
}

.submissions-data-table .table .badge-submission {
    color: #000;
}

.submissions-data-table .table .submission-success {
    background-color: #A6DFBB;
}

.submissions-data-table .table .submission-pending {
    background-color: #EFE09F;
}

.submissions-data-table .table .submission-rejected {
    background-color: #FFC7CE;
}

.submissions-data-table .table .submission-changes {
    background-color: #EFECF0;
}

.submissions-data-table .table .submission-review {
    color: var(--color-white);
    background-color: #DEB508;
}

.submissions-data-table .table .button-small {
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    padding: var(--space-sm) 14px;
}

.submissions-data-table .table .button-elipsis {
    background-color: transparent;
    border: none;
    color: var(--color-text-grey);
}

.submissions-data-table .table .dropdown {
    border: none;
    font-size: var(--fz-sm);
}

.submissions-data-table .table .dropdown-menu {
    font-size: var(--fz-sm);
    background-color: var(--color-white);
    border-radius: var(--br-lg);
    border: none;
    box-shadow: var(--box-shadow);
}

    .submissions-data-table .table .dropdown-menu li {
        border-bottom: solid 1px var(--color-border);
    }

.submission-pagination {
    padding: var(--space-2xl);
    margin-top: var(--space-xs);
}

    .submission-pagination button {
        color: #344054;
        font-size: var(--fz-sm);
        font-weight: 500;
        background-color: var(--color-white);
        border: solid 2px #D0D5DD;
        padding: var(--space-sm) 14px !important;
    }

    .submission-pagination ul li {
        display: inline-block;
        margin-right: var(--space-lg);
    }

        .submission-pagination ul li a {
            font-size: var(--fz-sm);
            font-weight: 500;
            color: var(--text-gray-500);
        }

            .submission-pagination ul li a.active {
                color: #005CA3;
                background-color: #CEE4F4;
                padding: var(--space-sm) var(--space-xs);
                border-radius: var(--br-md);
            }

.account-status h4 {
    font-size: var(--fz-xs) !important;
    font-weight: var(--fw-xl);
    margin-bottom: var(--space-2xl);
}

.account-status button {
    font-size: var(--fz-xs);
    font-weight: var(--fw-md);
    padding: var(--space-xs) var(--space-2xl);
    border-radius: var(--br-lg);
    border: none;
}

.view-application-wrapper {
    background-color: var(--color-white);
}

.wrapper-actions {
    font-size: var(--fz-sm);
}

.view-application-wrapper button {
    border: none;
    background-color: transparent;
    font-size: var(--font-size-4xl);
}

.application-card {
    font-size: var(--fz-sm);
    background-color: var(--color-white);
    border-radius: var(--br-lg);
    padding: var(--space-2xl);
}

.application-section {
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-2xl);
    border-bottom: solid 1px var(--color-border);
}

    .application-section h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--space-xs);
    }

    .application-section h6 {
        color: var(--text-gray-900);
        font-size: var(--fz-sm);
        font-weight: var(--fw-md);
        margin-bottom: var(--space-2xl);
    }

    .application-section span {
        color: #6b6b6b;
        font-size: var(--fz-md);
    }

    .application-section .badge-review {
        color: var(--color-white);
        font-size: var(--fz-xs);
        font-weight: var(--fw-md);
        line-height: 18px;
        background-color: #DEB508;
        border-radius: var(--br-md);
    }

    .application-section .details {
        padding: 0;
    }

.application-section-item {
    margin-bottom: var(--space-xs);
    padding: 0;
}

.detail-title {
    font-size: var(--fz-md);
    font-weight: var(--fw-sm);
    color: var(--color-text-grey) !important;
    padding-bottom: 0;
}

.detail-content {
    color: #000 !important;
    font-size: var(--fz-md);
    font-weight: var(--fw-md);
}

.application-document {
    border: solid 1px #EAECF0;
    border-radius: var(--br-md);
    padding: var(--space-xs) !important;
    margin-bottom: var(--space-2xl) !important;
}

    .application-document img {
        width: 34px;
        height: 34px;
    }

.application-document-details {
    line-height: 20px;
}

.application-document p {
    color: #344054;
    font-size: var(--fz-sm);
    font-weight: 500;
    margin-bottom: 0;
}

.application-document span {
    font-size: var(--fz-sm);
}

.application-document .uploaded-document-actions img {
    height: 20px;
}

.application-document .uploaded-document-actions a {
    color: #667085;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.application-detail-action {
    font-size: var(--fz-md);
    font-weight: var(--fw-md);
    padding: var(--space-sm) var(--space-2xl);
    border-radius: var(--br-3xl);
    border: none;
}

.details table td {
    padding: 0;
    margin-bottom: var(--space-sm) !important;
}

.details table {
    table-layout: auto;
    width: 100%;
}

    .details table td:first-child {
        width: 40%;
        min-width: 180px;
        max-width: 250px;
        white-space: nowrap;
        vertical-align: top;
    }

    .details table td.detail-content {
        width: 60%;
        word-break: break-word;
    }

.create-organization-wrapper {
    background-color: var(--color-white);
    border-bottom: solid 2px var(--color-border);
    padding: var(--space-xs) var(--space-2xl);
}

.organization-hero {
    padding: var(--space-2xl);
    border-radius: var(--br-md);
    background-image: url('/images/organization-hero-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
}

    .organization-hero h1 {
        padding-top: var(--space-2xl);
        font-size: var(--fz-3xl);
        color: #005CA3;
        margin-bottom: var(--space-2xl);
    }

    .organization-hero p {
        font-size: var(--fz-sm);
        color: #013C69;
        line-height: 1.4;
    }

.organization-form-wrapper {
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border-radius: var(--br-md);
}

.organization-form-header {
    margin-bottom: var(--space-2xl);
}

    .organization-form-header h4 {
        font-size: var(--fz-md);
    }

    .organization-form-header p {
        font-size: var(--fz-sm);
        color: var(--text-gray-500);
        margin-bottom: 0;
    }

.organization-card {
    font-size: var(--fz-sm);
    padding: var(--space-2xl);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    margin-bottom: 18px;
}

.organization-card-section {
    margin-bottom: var(--space-2xl);
}

    .organization-card-section h2 {
        color: var(--text-gray-900);
        font-size: var(--fz-xl);
        font-weight: var(--fw-lg);
    }

.all-organization {
    border-bottom: none;
    margin-bottom: var(--space-2xl) !important;
    padding-bottom: 0;
}

.all-organization-new {
    font-size: var(--fz-sm);
    font-weight: 600;
}

.all-organization-account {
    padding: var(--space-xs);
    border: solid 1px #EAECF0;
    border-radius: var(--br-md);
    margin-bottom: var(--space-sm);
}

.organization-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
}

.all-organization-details h6 {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    color: var(--text-gray-700);
    margin-bottom: 2px !important;
}

.all-organization-details li {
    color: var(--text-gray-500);
    font-size: 12px;
    font-weight: var(--fw-md);
    display: inline;
}

    .all-organization-details li a {
        color: var(--text-gray-500);
        font-weight: var(--fw-lg);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .all-organization-details li:not(:last-child)::after {
        content: " • ";
        color: var(--text-gray-500);
        margin: 0 4px;
    }

.badge.active-organization {
    color: #000;
    font-size: var(--fz-xs);
    font-weight: 500;
    background-color: #A6DFBB;
    border-radius: var(--br-md);
    padding: 6px 10px;
}

.badge.suspended-organization {
    color: #000;
    font-size: var(--fz-xs);
    font-weight: 500;
    background-color: #EFECF0;
    border-radius: var(--br-md);
    padding: 6px 10px;
}

.badge.blacklisted-organization {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--fz-xs);
    font-weight: 500;
    background-color: #F04438;
    border-radius: var(--br-md);
    padding: 6px 10px;
}

.all-organization-manage {
    font-weight: var(--fw-lg);
    font-style: var(--fz-sm);
}

.all-organization-pagination {
    margin-top: var(--space-2xl);
}

    .all-organization-pagination .index {
        color: #344054;
        font-weight: 500;
    }

    .all-organization-pagination button {
        color: var(--text-gray-900);
        background-color: var(--color-white);
        border: solid 2px #EAECF0;
    }

.manage-organization-dropdown .dropdown-menu {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    color: #344054;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--br-lg);
    box-shadow: var(--box-shadow);
}

    .manage-organization-dropdown .dropdown-menu .blacklist {
        border-top: solid 1px #EAECF0;
        padding-top: var(--space-xs);
    }

.dropdown-toggle.no-caret::after {
    display: none !important;
}

.organization-meta-name {
    color: var(--text-gray-900);
    font-size: var(--font-size-4xl);
    font-weight: var(--fw-md);
    line-height: 38px;
    margin-bottom: var(--space-2xl);
}

.organization-meta-details {
    gap: var(--space-lg);
}

    .organization-meta-details p {
        color: var(--text-gray-900);
        font-size: var(--fz-xs);
        font-weight: var(--fw-xl);
        margin-bottom: var(--space-sm);
    }

    .organization-meta-details span {
        color: var(--text-gray-500);
        font-weight: var(--fw-md);
        font-size: var(--fz-sm);
    }

.manage-organization-dropdown .btn {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    padding: 0;
    display: flex;
    align-items: center;
}

    .manage-organization-dropdown .btn .btn-label {
        padding: var(--space-sm) var(--space-xs);
    }

    .manage-organization-dropdown .btn .btn-icon-wrapper {
        align-self: stretch;
        display: flex;
        align-items: center;
        border-left: 1px solid #005A9E;
        padding: 0 var(--space-xs);
    }

.manage-organization-dropdown .dropdown-menu li:last-child {
    border-bottom: none;
}

.manage-organization-btn {
    font-size: var(--fz-sm);
    font-weight: var(--fw-md);
    padding: 0;
    display: flex;
    align-items: center;
}

    .manage-organization-btn span {
        vertical-align: middle;
    }

    .manage-organization-btn .btn-label {
        padding: var(--space-sm) var(--space-xs);
    }

    .manage-organization-btn .btn-icon-wrapper {
        align-self: stretch;
        display: flex;
        align-items: center;
        border-left: 1px solid var(--text-gray-200);
        padding: 0 var(--space-xs);
    }

.organization-table-wrapper {
    position: relative;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    width: 100%;
}

    .organization-table-wrapper:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px;
        height: 1px;
        background-color: var(--color-border);
    }

    .organization-table-wrapper:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

        .organization-table-wrapper:last-child:after {
            display: none;
        }

    .organization-table-wrapper h6 {
        color: var(--text-gray-600);
        font-size: var(--fz-sm);
        font-weight: var(--fw-lg);
        line-height: 20px;
    }

.organization-details-table {
    margin-bottom: 0;
    padding-bottom: 0;
    border-collapse: separate;
}

    .organization-details-table td {
        font-size: var(--fz-md);
        border: none;
        padding: var(--space-2xl) 0 0 0;
        margin: 0;
    }

    .organization-details-table .table-icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }

    .organization-details-table .left {
        color: var(--text-gray-500);
    }

    .organization-details-table .right {
        color: var(--text-gray-900);
        font-weight: var(--fw-md);
    }

    .organization-details-table td.left {
        color: var(--text-gray-500);
        width: 50%;
    }

    .organization-details-table td.right {
        color: var(--text-gray-900);
        font-weight: var(--fw-md);
        width: 50%;
    }

.application-nav {
    padding-bottom: var(--space-2xl);
    border-bottom: solid 1px var(--text-gray-300);
    margin-bottom: var(--space-lg);
}

    .application-nav ul li {
        display: inline-block;
        font-weight: var(--fw-md);
        color: var(--text-gray-500);
        margin-right: var(--space-sm);
        margin-bottom: 0;
        padding-bottom: 0;
        cursor: pointer;
    }

        .application-nav ul li.active {
            color: var(--color-primary);
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: var(--space-lg);
            z-index: 1000;
        }


.application-section.last {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.section-collapse-header h6 {
    margin-bottom: 0;
}

.details {
    transition: margin-top 0.3s ease;
}

    .details.show {
        margin-top: var(--space-sm);
    }

.admin-application-action-wrapper {
    position: fixed;
    width: 840px;
    max-width: 90%;
    left: 58%;
    transform: translateX(-50%);
    bottom: var(--space-lg);
    z-index: 1050;
    padding: var(--space-sm);
    background-color: var(--color-white);
    border-radius: var(--br-md);
    box-shadow: var(--box-shadow);
}

    .admin-application-action-wrapper .action-btn-col {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .admin-application-action-wrapper .action-btn-col:not(:first-child) {
            border-left: solid 1px var(--text-gray-300);
            padding-left: var(--space-2xl);
        }

    .admin-application-action-wrapper button {
        display: flex;
        align-items: center;
        font-size: var(--fz-md);
        font-weight: var(--fw-md);
        line-height: 24px;
        border: none;
        background-color: var(--color-white);
    }

        .admin-application-action-wrapper button.approve-application {
            color: var(--color-white);
            background-color: var(--color-primary);
            padding: var(--space-sm) var(--space-sm);
            border-radius: var(--br-md);
        }

.admin-day-label {
    gap: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.admin-day-label-down {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--text-gray-400);
}

    .admin-day-label-down img {
        width: 16px;
        height: 16px;
    }

    .admin-day-label-down.active {
        background-color: var(--color-primary);
    }

.admin-day-label h4 {
    color: var(--text-gray-900);
    font-size: var(--fz-lg);
    font-weight: var(--fw-lg);
    line-height: 28px;
    margin-bottom: 0;
}

.admin-event-block {
    border-left: solid 1px var(--text-gray-300);
    padding-left: var(--space-sm);
    margin-left: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.admin-single-event {
    gap: var(--space-lg);
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-xl);
}

.admin-event-block-time {
    color: var(--text-gray-500);
    font-size: var(--fz-lg);
    line-height: 28px;
    white-space: nowrap;
    margin-right: 0;
}

.admin-event-block-desc {
    background-color: var(--color-white);
    border-radius: var(--br-md);
    padding: var(--space-2xl);
    flex: 1 1 0%;
    min-width: 0;
}

.admin-event-status h6 {
    color: var(--text-gray-900);
    font-size: var(--fz-sm);
    font-weight: var(--fw-lg);
    line-height: 28px;
    margin-bottom: 0;
}

.admin-event-status-time {
    font-size: var(--fz-sm);
    color: var(--text-gray-500);
}

.admin-event-block-desc .table {
    border-bottom: solid 1px var(--text-gray-300);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-xs);
}

    .admin-event-block-desc .table td:first-child {
        color: var(--text-gray-500);
        font-size: var(--fz-md);
        font-weight: var(--fw-sm);
        line-height: 22px;
        padding-left: 0;
    }

    .admin-event-block-desc .table td:last-child {
        color: var(--text-gray-900);
        font-size: var(--fz-md);
        font-weight: var(--fw-md);
        line-height: 22px;
    }