/*
 * Variables
 */

:root {
    --base-white: #fff;
    --base-black: #000;
    --base-blue: #e3f6fc;
    --brand-25: #FAFBFD;
    --brand-50: #E4E6EC;
    --brand-100: #CED2DB;
    --brand-200: #A3A8B9;
    --brand-300: #777F98;
    --brand-400: #4C5576;
    --brand-500: #202C54;
    --brand-600: #1A2343;
    --brand-700: #131A32;
    --brand-800: #0D1222;
    --brand-900: #0A0D19;
    --secondary-25: #FFFFFF;
    --secondary-50: #F9FEFF;
    --secondary-100: #ECF9FD;
    --secondary-200: #D9F3FB;
    --secondary-300: #C7EEF9;
    --secondary-400: #B4E8F7;
    --secondary-500: #A1E2F5;
    --secondary-600: #83C5D8;
    --secondary-700: #65A7BB;
    --secondary-800: #478A9E;
    --secondary-900: #387B8F;
    --tertiary-25: #FFF6F8;
    --tertiary-50: #FBEBEE;
    --tertiary-100: #F7D7DE;
    --tertiary-200: #EFAFBD;
    --tertiary-300: #E6889C;
    --tertiary-400: #DE607B;
    --tertiary-500: #D5385A;
    --tertiary-600: #AB2D48;
    --tertiary-700: #802236;
    --tertiary-800: #561624;
    --tertiary-900: #40111B;
    --gray-25: #FBFBFB;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --error-25: #FFF9F9;
    --error-50: #FEF2F2;
    --error-100: #FEE2E2;
    --error-200: #FEE2E2;
    --error-300: #FCA5A5;
    --error-400: #F87171;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --error-700: #B91C1C;
    --error-800: #991B1B;
    --error-900: #7F1D1D;
    --warning-25: #FFFBF6;
    --warning-50: #FFF7ED;
    --warning-100: #FFEDD5;
    --warning-200: #FED7AA;
    --warning-300: #FDBA74;
    --warning-400: #FB923C;
    --warning-500: #F97316;
    --warning-600: #EA580C;
    --warning-700: #C2410C;
    --warning-800: #9A3412;
    --warning-900: #7C2D12;
    --success-25: #F6FEFA;
    --success-50: #ECFDF5;
    --success-100: #D1FAE5;
    --success-200: #A7F3D0;
    --success-300: #6EE7B7;
    --success-400: #34D399;
    --success-500: #10B981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065F46;
    --success-900: #064E3B;
}
.Base-white {
    color: var(--base-white);
}
.Base-black {
    color: var(--base-black);
}
.Brand-25 {
    color: var(--brand-25);
}

.Brand-50 {
    color: var(--brand-50);
}

.Brand-100 {
    color: var(--brand-100);
}

.Brand-200 {
    color: var(--brand-200);
}

.Brand-300 {
    color: var(--brand-300);
}

.Brand-400 {
    color: var(--brand-400);
}

.Brand-500 {
    color: var(--brand-500);
}

.Brand-600 {
    color: var(--brand-600);
}

.Brand-700 {
    color: var(--brand-700);
}

.Brand-800 {
    color: var(--brand-800);
}

.Brand-900 {
    color: var(--brand-900);
}
.Secondary-25 {
    color: var(--secondary-25);
}

.Secondary-50 {
    color: var(--secondary-50);
}

.Secondary-100 {
    color: var(--secondary-100);
}

.Secondary-200 {
    color: var(--secondary-200);
}

.Secondary-300 {
    color: var(--secondary-300);
}

.Secondary-400 {
    color: var(--secondary-400);
}

.Secondary-500 {
    color: var(--secondary-500);
}

.Secondary-600 {
    color: var(--secondary-600);
}

.Secondary-700 {
    color: var(--secondary-700);
}

.Secondary-800 {
    color: var(--secondary-800);
}

.Secondary-900 {
    color: var(--secondary-900);
}

.Tertiary-25 {
    color: var(--tertiary-25);
}

.Tertiary-50 {
    color: var(--tertiary-50);
}

.Tertiary-100 {
    color: var(--tertiary-100);
}

.Tertiary-200 {
    color: var(--tertiary-200);
}

.Tertiary-300 {
    color: var(--tertiary-300);
}

.Tertiary-400 {
    color: var(--tertiary-400);
}

.Tertiary-500 {
    color: var(--tertiary-500);
}

.Tertiary-600 {
    color: var(--tertiary-600);
}

.Tertiary-700 {
    color: var(--tertiary-700);
}

.Tertiary-800 {
    color: var(--tertiary-800);
}

.Tertiary-900 {
    color: var(--tertiary-900);
}

.Gray-25 {
    color: var(--gray-25);
}

.Gray-50 {
    color: var(--gray-50);
}

.Gray-100 {
    color: var(--gray-100);
}

.Gray-200 {
    color: var(--gray-200);
}

.Gray-300 {
    color: var(--gray-300);
}

.Gray-400 {
    color: var(--gray-400);
}

.Gray-500 {
    color: var(--gray-500);
}

.Gray-600 {
    color: var(--gray-600);
}

.Gray-700 {
    color: var(--gray-700);
}

.Gray-800 {
    color: var(--gray-800);
}

.Gray-900 {
    color: var(--gray-900);
}


.Error-500 {
    color: var(--error-500);
}

.Error-600 {
    color: var(--error-600);
}


.Success-500 {
    color: var(--success-500);
}

.Success-600 {
    color: var(--success-600);
}

.Bg-Base-white {
    background: var(--base-white);
}
.Bg-Base-black {
    background: var(--base-black);
}
.Bg-Brand-25 {
    background: var(--brand-25);
}

.Bg-Brand-50 {
    background: var(--brand-50);
}

.Bg-Brand-100 {
    background: var(--brand-100);
}

.Bg-Brand-200 {
    background: var(--brand-200);
}

.Bg-Brand-300 {
    background: var(--brand-300);
}

.Bg-Brand-400 {
    background: var(--brand-400);
}

.Bg-Brand-500 {
    background: var(--brand-500);
}

.Bg-Brand-600 {
    background: var(--brand-600);
}

.Bg-Brand-700 {
    background: var(--brand-700);
}

.Bg-Brand-800 {
    background: var(--brand-800);
}

.Bg-Brand-900 {
    background: var(--brand-900);
}

.Bg-Secondary-25 {
    background: var(--secondary-25);
}

.Bg-Secondary-50 {
    background: var(--secondary-50);
}

.Bg-Secondary-100 {
    background: var(--secondary-100);
}

.Bg-Secondary-200 {
    background: var(--secondary-200);
}

.Bg-Secondary-300 {
    background: var(--secondary-300);
}

.Bg-Secondary-400 {
    background: var(--secondary-400);
}

.Bg-Secondary-500 {
    background: var(--secondary-500);
}

.Bg-Secondary-600 {
    background: var(--secondary-600);
}

.Bg-Secondary-700 {
    background: var(--secondary-700);
}

.Bg-Secondary-800 {
    background: var(--secondary-800);
}

.Bg-Secondary-900 {
    background: var(--secondary-900);
}

.Bg-Tertiary-25 {
    background: var(--tertiary-25);
}

.Bg-Tertiary-50 {
    background: var(--tertiary-50);
}

.Bg-Tertiary-100 {
    background: var(--tertiary-100);
}

.Bg-Tertiary-200 {
    background: var(--tertiary-200);
}

.Bg-Tertiary-300 {
    background: var(--tertiary-300);
}

.Bg-Tertiary-400 {
    background: var(--tertiary-400);
}

.Bg-Tertiary-500 {
    background: var(--tertiary-500);
}

.Bg-Tertiary-600 {
    background: var(--tertiary-600);
}

.Bg-Tertiary-700 {
    background: var(--tertiary-700);
}

.Bg-Tertiary-800 {
    background: var(--tertiary-800);
}

.Bg-Tertiary-900 {
    background: var(--tertiary-900);
}

.Bg-Gray-25 {
    background: var(--gray-25);
}

.Bg-Gray-50 {
    background: var(--gray-50);
}

.Bg-Gray-100 {
    background: var(--gray-100);
}

.Bg-Gray-200 {
    background: var(--gray-200);
}

.Bg-Gray-300 {
    background: var(--gray-300);
}

.Bg-Gray-400 {
    background: var(--gray-400);
}

.Bg-Gray-500 {
    background: var(--gray-500);
}

.Bg-Gray-600 {
    background: var(--gray-600);
}

.Bg-Gray-700 {
    background: var(--gray-700);
}

.Bg-Gray-800 {
    background: var(--gray-800);
}

.Bg-Gray-900 {
    background: var(--gray-900);
}


.Bg-Error-25 {
    background: var(--error-25);
}

.Bg-Error-50 {
    background: var(--error-50);
}

.Bg-Error-100 {
    background: var(--error-100);
}

.Bg-Error-200 {
    background: var(--error-200);
}

.Bg-Error-300 {
    background: var(--error-300);
}

.Bg-Error-400 {
    background: var(--error-400);
}

.Bg-Error-500 {
    background: var(--error-500);
}

.Bg-Error-600 {
    background: var(--error-600);
}

.Bg-Error-700 {
    background: var(--error-700);
}

.Bg-Error-800 {
    background: var(--error-800);
}

.Bg-Error-900 {
    background: var(--error-900);
}


.Bg-Warning-25 {
    background: var(--warning-25);
}

.Bg-Warning-50 {
    background: var(--warning-50);
}

.Bg-Warning-100 {
    background: var(--warning-100);
}

.Bg-Warning-200 {
    background: var(--warning-200);
}

.Bg-Warning-300 {
    background: var(--warning-300);
}

.Bg-Warning-400 {
    background: var(--warning-400);
}

.Bg-Warning-500 {
    background: var(--warning-500);
}

.Bg-Warning-600 {
    background: var(--warning-600);
}

.Bg-Warning-700 {
    background: var(--warning-700);
}

.Bg-Warning-800 {
    background: var(--warning-800);
}

.Bg-Warning-900 {
    background: var(--warning-900);
}
.Bg-Base-Blue {
    background: var(--base-blue);
}
.Border-Base-white {
    border-color: var(--base-white);
}

.Border-Base-black {
    border-color: var(--base-black);
}

.Border-Brand-25 {
    border-color: var(--brand-25);
}

.Border-Brand-50 {
    border-color: var(--brand-50);
}

.Border-Brand-100 {
    border-color: var(--brand-100);
}

.Border-Brand-200 {
    border-color: var(--brand-200);
}

.Border-Brand-300 {
    border-color: var(--brand-300);
}

.Border-Brand-400 {
    border-color: var(--brand-400);
}

.Border-Brand-500 {
    border-color: var(--brand-500);
}

.Border-Brand-600 {
    border-color: var(--brand-600);
}

.Border-Brand-700 {
    border-color: var(--brand-700);
}

.Border-Brand-800 {
    border-color: var(--brand-800);
}

.Border-Brand-900 {
    border-color: var(--brand-900);
}

.Border-Secondary-25 {
    border-color: var(--secondary-25);
}

.Border-Secondary-50 {
    border-color: var(--secondary-50);
}

.Border-Secondary-100 {
    border-color: var(--secondary-100);
}

.Border-Secondary-200 {
    border-color: var(--secondary-200);
}

.Border-Secondary-300 {
    border-color: var(--secondary-300);
}

.Border-Secondary-400 {
    border-color: var(--secondary-400);
}

.Border-Secondary-500 {
    border-color: var(--secondary-500);
}

.Border-Secondary-600 {
    border-color: var(--secondary-600);
}

.Border-Secondary-700 {
    border-color: var(--secondary-700);
}

.Border-Secondary-800 {
    border-color: var(--secondary-800);
}

.Border-Secondary-900 {
    border-color: var(--secondary-900);
}

.Border-Tertiary-25 {
    border-color: var(--tertiary-25);
}

.Border-Tertiary-50 {
    border-color: var(--tertiary-50);
}

.Border-Tertiary-100 {
    border-color: var(--tertiary-100);
}

.Border-Tertiary-200 {
    border-color: var(--tertiary-200);
}

.Border-Tertiary-300 {
    border-color: var(--tertiary-300);
}

.Border-Tertiary-400 {
    border-color: var(--tertiary-400);
}

.Border-Tertiary-500 {
    border-color: var(--tertiary-500);
}

.Border-Tertiary-600 {
    border-color: var(--tertiary-600);
}

.Border-Tertiary-700 {
    border-color: var(--tertiary-700);
}

.Border-Tertiary-800 {
    border-color: var(--tertiary-800);
}

.Border-Tertiary-900 {
    border-color: var(--tertiary-900);
}

.Border-Gray-25 {
    border-color: var(--gray-25);
}

.Border-Gray-50 {
    border-color: var(--gray-50);
}

.Border-Gray-100 {
    border-color: var(--gray-100);
}

.Border-Gray-200 {
    border-color: var(--gray-200);
}

.Border-Gray-300 {
    border-color: var(--gray-300);
}

.Border-Gray-400 {
    border-color: var(--gray-400);
}

.Border-Gray-500 {
    border-color: var(--gray-500);
}

.Border-Gray-600 {
    border-color: var(--gray-600);
}

.Border-Gray-700 {
    border-color: var(--gray-700);
}

.Border-Gray-800 {
    border-color: var(--gray-800);
}

.Border-Gray-900 {
    border-color: var(--gray-900);
}

.Border-Base-Blue {
    border-color: var(--base-blue);
}
.Display-2xl {
    font-size: 4.5rem;
    line-height: 5.625rem;
    letter-spacing: -0.09rem;
}
.Display-xl {
    font-size: 3.75rem;
    line-height: 4.5rem;
    letter-spacing: -0.075rem;
}
.Display-lg {
    font-size: 3rem;
    line-height: 3.75rem;
    letter-spacing: -0.06rem;
}
.Display-md {
    font-size: 2.25rem;
    line-height: 2.75rem;
    letter-spacing: -0.045rem;
}
.Display-sm {
    font-size: 1.875rem;
    line-height: 2.375rem;
}
.Display-xs {
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -0.03rem;
}
.Text-xl {
    font-size: 1.25rem;
    line-height: 1.875rem;
}
.Text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.Text-md {
    font-size: 1rem;
    line-height: 1.5rem;
}
.Text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.Text-xs {
    font-size: 0.75rem;
    line-height: 1.125rem;
}
.Regular {
    font-weight: 400;
}
.Medium {
    font-weight: 500;
}
.Semibold {
    font-weight: 600;
}
.Bold {
    font-weight: 700;
}
.ui-btn {
    width: auto;
    cursor: pointer;
    text-decoration: none;
}
.ui-btn:focus {
    box-shadow: 0px 0px 0px 4px rgba(31, 41, 55, 0.08);
}
.ui-btn-sm {
    display: inline-flex;
    padding: 0.625rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    font-size: 14px;
    line-height: 20px;
}
ui-btn-sm.disabled {
    padding: 0.5625rem 1.4375rem;
}

.tab-button {
    padding: 0.625rem 0.125rem;
    height:100%;
    white-space:nowrap;
}
.ui-btn-md {
    display: inline-flex;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.ui-btn-lg {
    display: inline-flex;
    padding: 0.875rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.ui-btn-primary {
    background: var(--brand-500);
    border: none;
    color: var(--base-white);
}

    .ui-btn-primary img {
        filter: invert(100%) sepia(1%) saturate(21%) hue-rotate(327deg) brightness(104%) contrast(100%);
    }

.ui-btn-primary:hover {
    background: var(--brand-600);
    border: none;
    color: var(--base-white);
}
    .ui-btn-primary:focus {
        outline: 2px solid #1F293714;
    }
    .ui-btn-primary.disabled {
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        color: var(--brand-200);
    }
    .ui-btn-primary.disabled img {
        filter: invert(76%) sepia(5%) saturate(741%) hue-rotate(189deg) brightness(90%) contrast(86%);
    }
.ui-btn-primary-icon img {
    filter: invert(17%) sepia(8%) saturate(3702%) hue-rotate(189deg) brightness(100%) contrast(100%);
}
.ui-btn-primary-icon:hover img {
    filter: invert(11%) sepia(67%) saturate(730%) hue-rotate(193deg) brightness(94%) contrast(95%);
}
.ui-btn-danger img {
    filter: invert(33%) sepia(64%) saturate(1641%) hue-rotate(317deg) brightness(86%) contrast(95%);
}

.ui-btn-danger:hover img {
    filter: invert(14%) sepia(78%) saturate(1608%) hue-rotate(320deg) brightness(103%) contrast(94%);
}
.ui-btn-secondary {
    background: var(--brand-50);
    border: 1px solid var(--brand-50);
    color: var(--brand-500);
}

    .ui-btn-secondary:hover {
        background: var(--brand-100);
        border: 1px solid var(--brand-100);
        color: var(--brand-500);
    }

    .ui-btn-secondary.disabled {
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        color: var(--brand-200);
    }

.ui-btn-secondary-outline {
    background: var(--base-white);
    border: 1px solid var(--brand-500);
    color: var(--brand-500);
}

    .ui-btn-secondary-outline:hover {
        background: var(--brand-50);
        border: 1px solid var(--brand-600);
        color: var(--brand-500);
    }

    .ui-btn-secondary-outline.disabled {
        background: var(--base-white);
        border: 1px solid var(--gray-200);
        color: var(--brand-200);
    }

.ui-btn-tertiary {
    background: var(--gray-50);
    border: 1px solid var(--gray-50);
    color: var(--brand-500);
}
    .ui-btn-tertiary:hover {
        background: var(--brand-50);
        border: 1px solid var(--brand-50);
        color: var(--brand-500);
    }

    .ui-btn-tertiary.disabled {
        background: var(--base-white);
        border: 1px solid var(--gray-200);
        color: var(--brand-200);
    }

.ui-btn-link {
    display: inline-flex;
    padding: 0rem;
    align-items: center;
    gap: 0.5rem;
    text-decoration:none;
    background:none;
    border:none;
}
    .ui-btn-link.Brand {
        color: var(--brand-500);
    }
    .ui-btn-link.Gray {
        color: var(--gray-700);
    }

    .ui-btn-link.disabled {
        color: var(--brand-200);
    }

.ui-copy-btn {
    padding: 0.375rem 1rem;
    margin:8px 0;
}

select:invalid {
    color: gray;
}

select option:not(:disabled) {
    color: black;
}
.ui-form-item {
    display: flex;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    background: var(--base-white);
}
    .ui-form-item.disabled {
        background: var(--gray-100);
    }
form .ui-form-item:not(.no-max-width) {
    max-width: 28rem;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
    background: var(--base-white);
}
form .ui-form-item.no-max-width {
    width: 100%;
}
.ui-form-textarea {
    display: flex;
    padding: 0.75rem;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 0 0;
    align-self: stretch;
    min-height:100px;
}
.ui-form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--brand-500);
}
.ui-input-group:not(.no-max-width) {
    display: flex;
    width: 100%;
    max-width: 28rem;
}
.ui-input-group.no-max-width {
    display: flex;
    width: 100%;
}

    .ui-input-group > *:first-child:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .ui-input-group > *:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .ui-input-group > select {
        width:unset;
    }

.ui-form-check {
    padding: 0.5rem;
}


/*
    Statuses-START
*/

/* Base Styling for Status Badges */
.ui-status {
    display: inline-flex;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: capitalize;
    color: #fff;
}

    .ui-status.more-information-required {
        background: #2563EB; /* Deep Blue */
        color: #fff;
    }

    /* --- Pre Submission --- */
    .ui-status.proposal {
        background: #1C2B4A; /* Dark Blue */
        color: #fff;
    }

    .ui-status.incomplete {
        background: #131A33; /* Dark Navy */
        color: #fff;
    }

    .ui-status.signed {
        background: #6EE7B7; /* Light Green */
        color: #000;
    }

    .ui-status.withdrawn {
        background: #374151; /* Dark Gray */
        color: #fff; /* White text for readability */
    }

    .ui-status.proposal-withdrawn {
        background: #D1D5DB; /* Light Gray */
        color: #000;
    }

    /* --- Approval Stages --- */
    .ui-status.conditionally-approved {
        background: #A7F3D0; /* Soft Green */
        color: #000;
    }

    .ui-status.submitted-for-approval {
        background: #D1FAE5; /* Very Light Green */
        color: #000;
    }

    .ui-status.approved {
        background: #10B981; /* Green */
        color: #fff;
    }

    .ui-status.approved-with-conditions {
        background: #FCD34D; /* Yellow */
        color: #000;
    }

    .ui-status.declined {
        background: #EF4444; /* Red */
        color: #fff;
    }

    .ui-status.more-information-required {
        background: var(--warning-400);
    }

    /* --- Settlement Stages --- */
    .ui-status.pending-settlement {
        background: #D946EF; /* Magenta */
        color: #fff;
    }

    .ui-status.sent-for-settlement {
        background: #DC2626; /* Bright Red */
        color: #fff;
    }

    .ui-status.funded,
    .ui-status.funded-drawdown-1,
    .ui-status.funded-drawdown-2 {
        background: #7C2D99; /* Dark Purple */
        color: #fff;
    }

    .ui-status.withdrawn {
        background: #374151; /* Dark Gray */
        color: #fff;
    }

    .ui-status.cancelled {
        background: #6B7280; /* Medium Gray */
        color: #fff;
    }

    .ui-status.referred {
        background: #FBBF24; /* Light Orange */
        color: #000;
    }

    /* --- Post-settlement --- */
    .ui-status.novation-agreement {
        background: #FCD38D; /* Light Orange */
        color: #000;
    }

    .ui-status.novation-funded {
        background: #F97316; /* Orange */
        color: #fff;
    }

    /* --- End of Term --- */
    .ui-status.eot-cx-option-received {
        background: #818CF8; /* Light Blue */
        color: #000;
    }

    .ui-status.eot-no-cx-response {
        background: #6366F1; /* Darker Blue */
        color: #fff;
    }

    .ui-status.paid-out {
        background: #2563EB; /* Deep Blue */
        color: #fff;
    }

    /* --- PPAs --- */
    .ui-status.review-negotiation {
        background: #06B6D4; /* Cyan */
        color: #000;
    }

    .ui-status.agreement-sign-off {
        background: #10B981; /* Green */
        color: #fff;
    }

    .ui-status.detailed-proposal {
        background: #0D9488; /* Teal */
        color: #fff;
    }

    .ui-status.site-visit {
        background: #0F766E; /* Dark Teal */
        color: #fff;
    }


/*
    Statuses-END
*/

.ui-file-input-div{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.ui-drag-drop {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23E5E7EBFF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 0.5rem;
    min-height: 200px;
    display: flex;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex-direction: column;
    padding: 0.2rem;
}
    .ui-drag-drop p.text {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        z-index:100;
    }
.files-container {
    z-index: 200;
    gap: 0.2rem;
    display: flex;
    flex-direction: column;
    inset: 0;
}

.ui-file {
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
}
    .ui-file span.ui-file-remove {
        cursor:pointer;
        border-left:1px solid var(--gray-200);
        padding-left:5px;
    }
.ui-help-icon {
    background: var(--brand-500);
    color: var(--base-white);
    border-radius: 2000px;
    width: 20px;
    height: 20px;
    text-align:center;
    cursor:pointer;
}
.ui-back-btn {
    display: inline-flex;
    border-radius: 400px;
    padding: 0.125rem 1.25rem 0.125rem 0.5rem;
    font-size: 14px;
    line-height: 20px;
    gap: 0;
}