/*! tailwindcss v4.0.5 | MIT License | https://tailwindcss.com */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=My+Soul&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@layer theme, base, components, utilities;
@layer theme {
    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
            "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-wide: 0.025em;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --default-font-family: var(--font-sans);
        --default-font-feature-settings: var(
            --font-sans--font-feature-settings
        );
        --default-font-variation-settings: var(
            --font-sans--font-variation-settings
        );
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(
            --font-mono--font-feature-settings
        );
        --default-mono-font-variation-settings: var(
            --font-mono--font-variation-settings
        );
        --color-blue-gray-dark: var(--color-blue-gray-dark);
        --color-gray-dark: var(--color-gray-dark);
        --color-gray-medium: var(--color-gray-medium);
        --color-gray-light: var(--color-gray-light);
        --color-gray-muted: var(--color-gray-muted);
        --color-black-light: var(--color-black-light);
        --color-yellow: var(--color-yellow);
        --color-black-dark: var(--color-black-dark);
        --color-gray-extra-light: var(--color-gray-extra-light);
        --color-green-dark: var(--color-green-dark);
        --color-gray-deep-dark: var(--color-gray-deep-dark);
        --color-red: var(--color-red);
        --color-gray-ultra-light: var(--color-gray-ultra-light);
        --color-navy-dark: var(--color-navy-dark);
        --color-green-bright: var(--color-green-bright);
        --color-pink-light: var(--color-pink-light);
        --color-navy-deep: var(--color-navy-deep);
        --color-gray-charcoal: var(--color-gray-charcoal);
        --color-white-pure: var(--color-white-pure);
        --color-gray-muted-dark: var(--color-gray-muted-dark);
        --color-gray-silver: var(--color-gray-silver);
        --color-gray-soft: var(--color-gray-soft);
        --color-gray-cloud: var(--color-gray-cloud);
        --color-black-deep: var(--color-black-deep);
        --color-black-pure: var(--color-black-pure);
        --color-gray-cool: var(--color-gray-cool);
        --font-poppins: "Poppins", serif;
        --font-manrope: "Manrope", serif;
        --font-jakarta: "Plus Jakarta Sans", serif;
        --font-inter: "Inter", serif;
        --font-sora: "Sora", serif;
        --font-lato: "Lato", serif;
    }
}
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }
    html,
    :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: var(
            --default-font-family,
            ui-sans-serif,
            system-ui,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol",
            "Noto Color Emoji"
        );
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent;
    }
    body {
        line-height: inherit;
    }
    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }
    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit;
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit;
    }
    b,
    strong {
        font-weight: bolder;
    }
    code,
    kbd,
    samp,
    pre {
        font-family: var(
            --default-mono-font-family,
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            "Courier New",
            monospace
        );
        font-feature-settings: var(
            --default-mono-font-feature-settings,
            normal
        );
        font-variation-settings: var(
            --default-mono-font-variation-settings,
            normal
        );
        font-size: 1em;
    }
    small {
        font-size: 80%;
    }
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sub {
        bottom: -0.25em;
    }
    sup {
        top: -0.5em;
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }
    :-moz-focusring {
        outline: auto;
    }
    progress {
        vertical-align: baseline;
    }
    summary {
        display: list-item;
    }
    ol,
    ul,
    menu {
        list-style: none;
    }
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        display: block;
        vertical-align: middle;
    }
    img,
    video {
        max-width: 100%;
        height: auto;
    }
    button,
    input,
    select,
    optgroup,
    textarea,
    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background-color: transparent;
        opacity: 1;
    }
    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px;
    }
    ::file-selector-button {
        margin-inline-end: 4px;
    }
    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab, currentColor 50%, transparent);
    }
    textarea {
        resize: vertical;
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit;
    }
    ::-webkit-datetime-edit {
        display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-year-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute-field,
    ::-webkit-datetime-edit-second-field,
    ::-webkit-datetime-edit-millisecond-field,
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0;
    }
    :-moz-ui-invalid {
        box-shadow: none;
    }
    button,
    input:where([type="button"], [type="reset"], [type="submit"]),
    ::file-selector-button {
        appearance: button;
    }
    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button {
        height: auto;
    }
    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}
@layer utilities {
    .collapse {
        visibility: collapse;
    }
    .absolute {
        position: absolute;
    }
    .fixed {
        position: fixed;
    }
    .relative {
        position: relative;
    }
    .inset-0 {
        inset: calc(var(--spacing) * 0);
    }
    .inset-y-0 {
        inset-block: calc(var(--spacing) * 0);
    }
    .end-0 {
        inset-inline-end: calc(var(--spacing) * 0);
    }
    .end-4 {
        inset-inline-end: calc(var(--spacing) * 4);
    }
    .-top-1 {
        top: calc(var(--spacing) * -1);
    }
    .-right-1 {
        right: calc(var(--spacing) * -1);
    }
    .right-3 {
        right: calc(var(--spacing) * 3);
    }
    .bottom-3 {
        bottom: calc(var(--spacing) * 3);
    }
    .col-span-3 {
        grid-column: span 3 / span 3;
    }
    .mx-auto {
        margin-inline: auto;
    }
    .-mt-\[28px\] {
        margin-top: calc(28px * -1);
    }
    .ml-1 {
        margin-left: calc(var(--spacing) * 1);
    }
    .ml-1\.5 {
        margin-left: calc(var(--spacing) * 1.5);
    }
    .line-clamp-1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
    .block {
        display: block;
    }
    .flex {
        display: flex;
    }
    .grid {
        display: grid;
    }
    .hidden {
        display: none;
    }
    .inline-flex {
        display: inline-flex;
    }
    .list-item {
        display: list-item;
    }
    .table {
        display: table;
    }
    .size-10 {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
    }
    .h-6 {
        height: calc(var(--spacing) * 6);
    }
    .h-20 {
        height: calc(var(--spacing) * 20);
    }
    .h-\[18px\] {
        height: 18px;
    }
    .h-\[1px\] {
        height: 1px;
    }
    .h-auto {
        height: auto;
    }
    .h-dvh {
        height: 100dvh;
    }
    .h-fit {
        height: fit-content;
    }
    .h-full {
        height: 100%;
    }
    .max-h-4 {
        max-height: calc(var(--spacing) * 4);
    }
    .max-h-6 {
        max-height: calc(var(--spacing) * 6);
    }
    .max-h-7 {
        max-height: calc(var(--spacing) * 7);
    }
    .max-h-8 {
        max-height: calc(var(--spacing) * 8);
    }
    .max-h-9 {
        max-height: calc(var(--spacing) * 9);
    }
    .max-h-10 {
        max-height: calc(var(--spacing) * 10);
    }
    .max-h-\[40px\] {
        max-height: 40px;
    }
    .min-h-4 {
        min-height: calc(var(--spacing) * 4);
    }
    .min-h-6 {
        min-height: calc(var(--spacing) * 6);
    }
    .min-h-7 {
        min-height: calc(var(--spacing) * 7);
    }
    .min-h-8 {
        min-height: calc(var(--spacing) * 8);
    }
    .min-h-9 {
        min-height: calc(var(--spacing) * 9);
    }
    .min-h-10 {
        min-height: calc(var(--spacing) * 10);
    }
    .min-h-40 {
        min-height: calc(var(--spacing) * 40);
    }
    .min-h-\[40px\] {
        min-height: 40px;
    }
    .min-h-dvh {
        min-height: 100dvh;
    }
    .min-h-svh {
        min-height: 100svh;
    }
    .w-6 {
        width: calc(var(--spacing) * 6);
    }
    .w-10 {
        width: calc(var(--spacing) * 10);
    }
    .w-12 {
        width: calc(var(--spacing) * 12);
    }
    .w-20 {
        width: calc(var(--spacing) * 20);
    }
    .w-\[18px\] {
        width: 18px;
    }
    .w-\[22px\] {
        width: 22px;
    }
    .w-full {
        width: 100%;
    }
    .max-w-4 {
        max-width: calc(var(--spacing) * 4);
    }
    .max-w-6 {
        max-width: calc(var(--spacing) * 6);
    }
    .max-w-7 {
        max-width: calc(var(--spacing) * 7);
    }
    .max-w-8 {
        max-width: calc(var(--spacing) * 8);
    }
    .max-w-9 {
        max-width: calc(var(--spacing) * 9);
    }
    .max-w-10 {
        max-width: calc(var(--spacing) * 10);
    }
    .max-w-\[40px\] {
        max-width: 40px;
    }
    .min-w-4 {
        min-width: calc(var(--spacing) * 4);
    }
    .min-w-6 {
        min-width: calc(var(--spacing) * 6);
    }
    .min-w-7 {
        min-width: calc(var(--spacing) * 7);
    }
    .min-w-8 {
        min-width: calc(var(--spacing) * 8);
    }
    .min-w-9 {
        min-width: calc(var(--spacing) * 9);
    }
    .min-w-10 {
        min-width: calc(var(--spacing) * 10);
    }
    .min-w-\[40px\] {
        min-width: 40px;
    }
    .flex-1 {
        flex: 1;
    }
    .border-collapse {
        border-collapse: collapse;
    }
    .transform {
        transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
            var(--tw-skew-x) var(--tw-skew-y);
    }
    .animate-ping {
        animation: var(--animate-ping);
    }
    .resize {
        resize: both;
    }
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .flex-col {
        flex-direction: column;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
    .items-center {
        align-items: center;
    }
    .items-stretch {
        align-items: stretch;
    }
    .justify-between {
        justify-content: space-between;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-start {
        justify-content: flex-start;
    }
    .gap-1 {
        gap: calc(var(--spacing) * 1);
    }
    .gap-2 {
        gap: calc(var(--spacing) * 2);
    }
    .gap-2\.5 {
        gap: calc(var(--spacing) * 2.5);
    }
    .gap-3 {
        gap: calc(var(--spacing) * 3);
    }
    .gap-3\.5 {
        gap: calc(var(--spacing) * 3.5);
    }
    .gap-4 {
        gap: calc(var(--spacing) * 4);
    }
    .gap-8 {
        gap: calc(var(--spacing) * 8);
    }
    .gap-\[4px\] {
        gap: 4px;
    }
    .gap-\[10px\] {
        gap: 10px;
    }
    .gap-\[16px\] {
        gap: 16px;
    }
    .space-y-0 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 0) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-0\.5 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-1 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 1) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-1\.5 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-2 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 2) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-2\.5 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-3 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 3) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-3\.5 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-4 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-5 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 5) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-6 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 6) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-12 {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(
                calc(var(--spacing) * 12) * var(--tw-space-y-reverse)
            );
            margin-block-end: calc(
                calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse))
            );
        }
    }
    .space-y-\[4px\] {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(4px * var(--tw-space-y-reverse));
            margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse)));
        }
    }
    .space-y-\[8px\] {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(8px * var(--tw-space-y-reverse));
            margin-block-end: calc(8px * calc(1 - var(--tw-space-y-reverse)));
        }
    }
    .space-y-\[10px\] {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(10px * var(--tw-space-y-reverse));
            margin-block-end: calc(10px * calc(1 - var(--tw-space-y-reverse)));
        }
    }
    .space-y-\[16px\] {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(16px * var(--tw-space-y-reverse));
            margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse)));
        }
    }
    .space-y-\[22px\] {
        :where(& > :not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(22px * var(--tw-space-y-reverse));
            margin-block-end: calc(22px * calc(1 - var(--tw-space-y-reverse)));
        }
    }
    .divide-x {
        :where(& > :not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(
                1px * calc(1 - var(--tw-divide-x-reverse))
            );
        }
    }
    .divide-y {
        :where(& > :not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(1px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(
                1px * calc(1 - var(--tw-divide-y-reverse))
            );
        }
    }
    .divide-\[\#f2f2f2\] {
        :where(& > :not(:last-child)) {
            border-color: #f2f2f2;
        }
    }
    .divide-gray-silver {
        :where(& > :not(:last-child)) {
            border-color: var(--color-gray-silver);
        }
    }
    .overflow-hidden {
        overflow: hidden;
    }
    .overflow-y-auto {
        overflow-y: auto;
    }
    .rounded {
        border-radius: 0.25rem;
    }
    .rounded-3xl {
        border-radius: var(--radius-3xl);
    }
    .rounded-\[5px\] {
        border-radius: 5px;
    }
    .rounded-\[10px\] {
        border-radius: 10px;
    }
    .rounded-\[12px\] {
        border-radius: 12px;
    }
    .rounded-\[16px\] {
        border-radius: 16px;
    }
    .rounded-full {
        border-radius: calc(infinity * 1px);
    }
    .rounded-lg {
        border-radius: var(--radius-lg);
    }
    .rounded-xl {
        border-radius: var(--radius-xl);
    }
    .border {
        border-style: var(--tw-border-style);
        border-width: 1px;
    }
    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed;
    }
    .border-\[\#f2f2f2\] {
        border-color: #f2f2f2;
    }
    .border-gray-silver {
        border-color: var(--color-gray-silver);
    }
    .border-green-bright {
        border-color: var(--color-green-bright);
    }
    .border-transparent {
        border-color: transparent;
    }
    .\!bg-transparent {
        background-color: transparent !important;
    }
    .bg-\[\#2196534D\] {
        background-color: #2196534d;
    }
    .bg-\[\#f2c94c4d\] {
        background-color: #f2c94c4d;
    }
    .bg-black {
        background-color: var(--color-black);
    }
    .bg-gray-cloud {
        background-color: var(--color-gray-cloud);
    }
    .bg-gray-cool {
        background-color: var(--color-gray-cool);
    }
    .bg-gray-extra-light {
        background-color: var(--color-gray-extra-light);
    }
    .bg-green-dark {
        background-color: var(--color-green-dark);
    }
    .bg-red {
        background-color: var(--color-red);
    }
    .bg-transparent {
        background-color: transparent;
    }
    .bg-white {
        background-color: var(--color-white);
    }
    .bg-yellow {
        background-color: var(--color-yellow);
    }
    .object-cover {
        object-fit: cover;
    }
    .p-2 {
        padding: calc(var(--spacing) * 2);
    }
    .p-2\.5 {
        padding: calc(var(--spacing) * 2.5);
    }
    .p-3 {
        padding: calc(var(--spacing) * 3);
    }
    .p-4 {
        padding: calc(var(--spacing) * 4);
    }
    .p-5 {
        padding: calc(var(--spacing) * 5);
    }
    .p-6 {
        padding: calc(var(--spacing) * 6);
    }
    .p-\[16px\] {
        padding: 16px;
    }
    .px-2 {
        padding-inline: calc(var(--spacing) * 2);
    }
    .px-2\.5 {
        padding-inline: calc(var(--spacing) * 2.5);
    }
    .px-3 {
        padding-inline: calc(var(--spacing) * 3);
    }
    .px-4 {
        padding-inline: calc(var(--spacing) * 4);
    }
    .px-5 {
        padding-inline: calc(var(--spacing) * 5);
    }
    .px-6 {
        padding-inline: calc(var(--spacing) * 6);
    }
    .px-8 {
        padding-inline: calc(var(--spacing) * 8);
    }
    .px-10 {
        padding-inline: calc(var(--spacing) * 10);
    }
    .px-\[8px\] {
        padding-inline: 8px;
    }
    .px-\[12px\] {
        padding-inline: 12px;
    }
    .px-\[14px\] {
        padding-inline: 14px;
    }
    .py-1 {
        padding-block: calc(var(--spacing) * 1);
    }
    .py-1\.5 {
        padding-block: calc(var(--spacing) * 1.5);
    }
    .py-2 {
        padding-block: calc(var(--spacing) * 2);
    }
    .py-2\.5 {
        padding-block: calc(var(--spacing) * 2.5);
    }
    .py-3 {
        padding-block: calc(var(--spacing) * 3);
    }
    .py-3\.5 {
        padding-block: calc(var(--spacing) * 3.5);
    }
    .py-4 {
        padding-block: calc(var(--spacing) * 4);
    }
    .py-5 {
        padding-block: calc(var(--spacing) * 5);
    }
    .py-24 {
        padding-block: calc(var(--spacing) * 24);
    }
    .py-\[6px\] {
        padding-block: 6px;
    }
    .py-\[8px\] {
        padding-block: 8px;
    }
    .py-\[12px\] {
        padding-block: 12px;
    }
    .py-\[20px\] {
        padding-block: 20px;
    }
    .pt-6 {
        padding-top: calc(var(--spacing) * 6);
    }
    .pt-\[64\%\] {
        padding-top: 64%;
    }
    .pr-2 {
        padding-right: calc(var(--spacing) * 2);
    }
    .pr-10 {
        padding-right: calc(var(--spacing) * 10);
    }
    .pb-1 {
        padding-bottom: calc(var(--spacing) * 1);
    }
    .pb-1\.5 {
        padding-bottom: calc(var(--spacing) * 1.5);
    }
    .pb-2 {
        padding-bottom: calc(var(--spacing) * 2);
    }
    .pb-2\.5 {
        padding-bottom: calc(var(--spacing) * 2.5);
    }
    .pb-3 {
        padding-bottom: calc(var(--spacing) * 3);
    }
    .pl-4 {
        padding-left: calc(var(--spacing) * 4);
    }
    .text-center {
        text-align: center;
    }
    .\!font-jakarta {
        font-family: var(--font-jakarta) !important;
    }
    .font-inter {
        font-family: var(--font-inter);
    }
    .font-jakarta {
        font-family: var(--font-jakarta);
    }
    .font-lato {
        font-family: var(--font-lato);
    }
    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .text-base {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    .text-\[7px\] {
        font-size: 7px;
    }
    .text-\[10px\] {
        font-size: 10px;
    }
    .text-\[13px\] {
        font-size: 13px;
    }
    .\!font-medium {
        --tw-font-weight: var(--font-weight-medium) !important;
        font-weight: var(--font-weight-medium) !important;
    }
    .\!font-normal {
        --tw-font-weight: var(--font-weight-normal) !important;
        font-weight: var(--font-weight-normal) !important;
    }
    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
    }
    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
    }
    .font-normal {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
    }
    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
    }
    .tracking-\[10\%\] {
        --tw-tracking: 10%;
        letter-spacing: 10%;
    }
    .\!text-\[\#6C7278\] {
        color: #6c7278 !important;
    }
    .text-\(--color-black-light\) {
        color: var(--color-black-light);
    }
    .text-\(--color-blue-gray-dark\) {
        color: var(--color-blue-gray-dark);
    }
    .text-\[\#1F75EC\] {
        color: #1f75ec;
    }
    .text-\[\#404040\] {
        color: #404040;
    }
    .text-\[\#4f4f4f\] {
        color: #4f4f4f;
    }
    .text-\[\#807A7A\] {
        color: #807a7a;
    }
    .text-\[\#8E8E93\] {
        color: #8e8e93;
    }
    .text-\[\#516983\] {
        color: #516983;
    }
    .text-\[\#939090\] {
        color: #939090;
    }
    .text-\[\#A0A0A0\] {
        color: #a0a0a0;
    }
    .text-black {
        color: var(--color-black);
    }
    .text-black-dark {
        color: var(--color-black-dark);
    }
    .text-blue-gray-dark {
        color: var(--color-blue-gray-dark);
    }
    .text-gray-deep-dark {
        color: var(--color-gray-deep-dark);
    }
    .text-gray-medium {
        color: var(--color-gray-medium);
    }
    .text-gray-muted {
        color: var(--color-gray-muted);
    }
    .text-green-bright {
        color: var(--color-green-bright);
    }
    .text-green-dark {
        color: var(--color-green-dark);
    }
    .text-navy-deep {
        color: var(--color-navy-deep);
    }
    .text-red {
        color: var(--color-red);
    }
    .text-white {
        color: var(--color-white);
    }
    .text-white-pure {
        color: var(--color-white-pure);
    }
    .underline {
        text-decoration-line: underline;
    }
    .accent-black {
        accent-color: var(--color-black);
    }
    .opacity-0 {
        opacity: 0%;
    }
    .opacity-75 {
        opacity: 75%;
    }
    .shadow-\(--input-shadow\) {
        --tw-shadow: var(--input-shadow);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
            var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
            var(--tw-shadow);
    }
    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px;
    }
    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
            var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
            var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur)
            var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
            var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
            var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
            var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
            var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
            var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
            var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
            var(--tw-backdrop-sepia);
    }
    .hover\:bg-\[\#FFF4F4B2\] {
        &:hover {
            @media (hover: hover) {
                background-color: #fff4f4b2;
            }
        }
    }
    .hover\:bg-gray-extra-light {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-gray-extra-light);
            }
        }
    }
    .hover\:bg-white-pure {
        &:hover {
            @media (hover: hover) {
                background-color: var(--color-white-pure);
            }
        }
    }
    .hover\:opacity-80 {
        &:hover {
            @media (hover: hover) {
                opacity: 80%;
            }
        }
    }
    .hover\:opacity-90 {
        &:hover {
            @media (hover: hover) {
                opacity: 90%;
            }
        }
    }
    .focus\:opacity-90 {
        &:focus {
            opacity: 90%;
        }
    }
    .disabled\:opacity-80 {
        &:disabled {
            opacity: 80%;
        }
    }
    .\[\&\>a\]\:text-\(--color-yellow\) {
        & > a {
            color: var(--color-yellow);
        }
    }
    .\[\&\>a\]\:hover\:underline {
        & > a {
            &:hover {
                @media (hover: hover) {
                    text-decoration-line: underline;
                }
            }
        }
    }
}
:root {
    --color-blue-gray-dark: #516a85;
    --color-gray-dark: #4b5563;
    --color-gray-medium: #9ca3af;
    --color-gray-light: #d1d5db;
    --color-gray-muted: #757575;
    --color-black-light: #333333;
    --color-yellow: #f2c94c;
    --color-black-dark: #292d32;
    --color-gray-extra-light: #f4f5f6;
    --color-green-dark: #289242;
    --color-gray-deep-dark: #23262f;
    --color-red: #e66a63;
    --color-gray-ultra-light: #e6e8ec;
    --color-navy-dark: #0f182e;
    --color-green-bright: #219653;
    --color-pink-light: #fff4f4;
    --color-navy-deep: #013258;
    --color-gray-charcoal: #454343;
    --color-white-pure: #fefdfd;
    --color-gray-muted-dark: #6c7278;
    --color-gray-silver: #c7c9cb;
    --color-gray-soft: #8e8e93;
    --color-gray-cloud: #cdd4dc;
    --color-black-deep: #242424;
    --color-black-pure: #1e1e1e;
    --color-gray-cool: #b4bfca;
}
.mobile-layout {
    position: relative;
    margin-inline: auto;
    min-height: 100svh;
    width: 100%;
    max-width: 420px;
    font-family: var(--font-manrope);
    background: linear-gradient(
        347.99deg,
        var(--color-gray-cloud) 0%,
        #ffffff 100%
    );
}
.splash-screen {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
    background-color: var(--color-white);
}
.login-form {
    width: 100%;
    :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(20px * var(--tw-space-y-reverse));
        margin-block-end: calc(20px * calc(1 - var(--tw-space-y-reverse)));
    }
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    padding-inline: 24px;
    padding-block: 16px;
}
.login-form .login-btn {
    width: 100%;
    border-radius: var(--radius-xl);
    background-color: var(--color-black);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: center;
    font-family: var(--font-poppins);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    &:hover {
        @media (hover: hover) {
            opacity: 80%;
        }
    }
    &:focus {
        outline-style: var(--tw-outline-style);
        outline-width: 2px;
    }
    &:focus {
        outline-offset: 2px;
    }
    &:focus {
        outline-color: var(--color-black);
    }
    &:disabled {
        opacity: 40%;
    }
}
.login-input-group {
    :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(6px * var(--tw-space-y-reverse));
        margin-block-end: calc(6px * calc(1 - var(--tw-space-y-reverse)));
    }
}
.login-input-group label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-dark);
}
.login-input-group label span {
    color: var(--color-red);
}
.login-input-group input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-light);
    padding-inline: 14px;
    padding-block: 8px;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &::placeholder {
        color: var(--color-gray-medium);
    }
    box-shadow: 0px 1px 2px 0px #1018280d;
}
.login-input-group.is-error .error {
    display: block;
}
.login-input-group .error {
    display: none;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red);
}
.mobile-navigation {
    position: relative;
    z-index: 50;
    width: 100%;
    background-color: var(--color-white);
    padding-bottom: 10px;
    box-shadow: 0px -2px 3px 0px #dbdbdb3b;
}
.navigation-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-inline: 24px;
}
.navigation-list li .navigation-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-top: calc(var(--spacing) * 2.5);
    padding-top: 12px;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-black);
    opacity: 50%;
}
.navigation-list li .navigation-link.active,
.navigation-list li .navigation-link:hover {
    border-color: var(--color-black);
    opacity: 100%;
    background: linear-gradient(
        180deg,
        rgba(98, 128, 128, 0.09) 0%,
        rgba(113, 131, 131, 0) 100%
    );
}
.navigation-list li .navigation-btn {
    display: flex;
    max-height: 56px;
    min-height: 56px;
    max-width: 56px;
    min-width: 56px;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-gray-ultra-light);
    box-shadow: 0px 4px 4px 0px #00000040;
}
.navigation-list li .navigation-menu-list {
    position: absolute;
    bottom: 100%;
    left: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 2);
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
}
.navigation-list li .navigation-menu-list a {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    width: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    box-shadow: 0px 4px 16px 0px #00000040;
}
.navigation-list li.active-menu .navigation-menu-list {
    display: flex;
}
.navigation-list li.active-menu .navigation-btn {
    rotate: 223deg;
}
.mobile-header {
    width: 100%;
    :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(12px * var(--tw-space-y-reverse));
        margin-block-end: calc(12px * calc(1 - var(--tw-space-y-reverse)));
    }
    background-color: var(--color-white);
    padding-inline: 14px;
    padding-top: 14px;
    padding-bottom: 4px;
}
.mobile-header .noti-btn {
    position: relative;
    display: flex;
    min-height: 48px;
    min-width: 48px;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    box-shadow: 0px 4px 40px 0px #00000040;
}
.mobile-header .noti-btn span {
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 0);
    top: calc(var(--spacing) * -1);
    display: block;
    min-height: 12px;
    min-width: 12px;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow);
    padding: calc(var(--spacing) * 0.5);
    font-size: 8px;
}
.mobile-header .header-tab {
    box-shadow: 0px 4px 40px 0px #00000040;
    display: grid;
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    padding: 6px;
}
.mobile-header .header-tab button {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: calc(infinity * 1px);
    padding-inline: 18px;
    padding-block: 8px;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    transition-property: color, background-color, border-color, outline-color,
        text-decoration-color, fill, stroke, --tw-gradient-from,
        --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform,
        translate, scale, rotate, filter, -webkit-backdrop-filter,
        backdrop-filter;
    transition-timing-function: var(
        --tw-ease,
        var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.mobile-header .header-tab button span {
    display: block;
    min-height: 14px;
    min-width: 14px;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow);
    padding: calc(var(--spacing) * 0.5);
    font-size: 8px;
}
.mobile-header .header-tab button.active,
.mobile-header .noti-btn.active,
.mobile-header .header-tab button:hover {
    background-color: var(--color-black);
    color: var(--color-yellow);
}
.mobile-header .noti-btn.active svg path{
    fill: #fff
}
.mobile-header .noti-btn.active span{
    color: #fff !important;
}
 
.mobile-header .header-tab button.active span,

.mobile-header .header-tab button:hover span {
    color: var(--color-black);
}
.breadcrumb-menu {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
}
.breadcrumb-title {
    font-family: var(--font-sora);
    font-size: 18px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-black-deep);
}
.breadcrumb-menu .breadcrumb-icon {
    display: flex;
    max-height: calc(var(--spacing) * 12);
    min-height: calc(var(--spacing) * 12);
    max-width: calc(var(--spacing) * 12);
    min-width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-ultra-light);
    background-color: var(--color-white);
    color: var(--color-black-dark);
    box-shadow: 0px 4px 12px 0px #00000008;
}
.user-bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    box-shadow: 0px 4px 23px 0px #00000024;
}
.social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
}
.social-links a {
    display: flex;
    max-height: calc(var(--spacing) * 8);
    min-height: calc(var(--spacing) * 8);
    max-width: calc(var(--spacing) * 8);
    min-width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #dfe4ea;
    background-color: var(--color-white);
    color: var(--color-black);
}
.menu-list {
    :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(
            calc(var(--spacing) * 4) * var(--tw-space-y-reverse)
        );
        margin-block-end: calc(
            calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
        );
    }
}
.menu-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    box-shadow: 0px 4px 9px 0px #00000040;
}
.input-group {
    :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(
            calc(var(--spacing) * 2) * var(--tw-space-y-reverse)
        );
        margin-block-end: calc(
            calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))
        );
    }
}
.input-group label {
    display: block;
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}
.input-group label span {
    color: var(--color-red);
}
.input-group input,
.input-group textarea {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-light);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    &::placeholder {
        color: var(--color-gray-medium);
    }
    box-shadow: 0px 1px 2px 0px #1018280d;
}
.input-group textarea {
    min-height: calc(var(--spacing) * 28);
    resize: none;
}
.input-group select {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-light);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    &::placeholder {
        color: var(--color-gray-medium);
    }
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center right 14px;
    box-shadow: 0px 1px 2px 0px #1018280d;
}
.input-group.error .error-message {
    display: block;
}
.input-group .error-message {
    display: none;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red);
}
.input-group input[type="checkbox"] {
    width: fit-content;
    accent-color: var(--color-black);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.timeline {
    position: relative;
    padding-left: 60px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        #385371 0,
        #385371 4px,
        transparent 4px,
        transparent 8px
    );
}
.timeline-item {
    position: relative;
    margin-bottom: 30px;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -60px;
    top: 0;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    background-size: 48px;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Crect x='2.5' y='2.5' width='45' height='45' rx='22.5' stroke='%23219653' stroke-width='5'/%3E%3Cg clip-path='url(%23clip0_312_8455)'%3E%3Cpath d='M30.2071 21.7929C29.8171 21.4024 29.1831 21.4024 28.7931 21.7929L24.5001 26.0854L22.7071 24.2929C22.3171 23.9024 21.6831 23.9024 21.2931 24.2929C20.9026 24.6834 20.9026 25.3164 21.2931 25.7069L23.7931 28.2069C23.9881 28.4024 24.2441 28.4999 24.5001 28.4999C24.7561 28.4999 25.0121 28.4024 25.2071 28.2069L30.2071 23.2069C30.5976 22.8164 30.5976 22.1834 30.2071 21.7929Z' fill='%2322A041'/%3E%3Cpath d='M36 24C35.448 24 35 24.448 35 25C35 30.514 30.514 35 25 35C19.486 35 15 30.514 15 25C15 19.486 19.486 15 25 15C27.6845 15 30.2045 16.049 32.0965 17.954C32.485 18.3465 33.1185 18.3485 33.5105 17.959C33.9025 17.57 33.9045 16.937 33.5155 16.545C31.2455 14.259 28.221 13 25 13C18.383 13 13 18.383 13 25C13 31.617 18.383 37 25 37C31.617 37 37 31.617 37 25C37 24.448 36.552 24 36 24Z' fill='%2322A041'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_312_8455'%3E%3Crect width='24' height='24' fill='white' transform='translate(13 13)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.timeline-item h3 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.timeline-item p {
    font-family: var(--font-jakarta);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: #828282;
}
.select2-selection {
    height: auto !important;
    width: 100%;
    border-radius: var(--radius-lg) !important;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-light) !important;
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    box-shadow: 0px 1px 2px 0px #1018280d;
}
.select2-selection__rendered {
    padding-left: calc(var(--spacing) * 0) !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
}
.iti {
    min-width: 45px;
    border-top: 1px;
    border-left: 1px;
    border-bottom: 1px;
    border-style: solid;
    border-color: #d0d0d0;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.ts-wrapper {
    width: 100%;
}

.ts-control {
    border-left: 0 !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.drawer-bottom {
    position: fixed;
    inset-inline: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    z-index: 50;
    margin-inline: auto;
    display: none;
    max-height: 90dvh;
    width: 100%;
    max-width: 420px;
    flex-direction: column;
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
    background-color: var(--color-white);
}
.drawer-bottom.show {
    display: flex;
}
.drawer-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: #d9d9d9;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
}
.drawer-body {
    flex: 1;
    overflow-y: auto;
}
.drawer-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 10;
    display: none;
    height: 100%;
    width: 100%;
    background-color: #000000b2;
}
.drawer-overlay.show {
    display: block;
}
.image-slider img {
    height: calc(var(--spacing) * 52);
    width: 100%;
    object-fit: cover;
}
.image-slider .swiper-pagination-bullet {
    background-color: var(--color-white) !important;
    opacity: 100% !important;
    box-shadow: 0px 4px 4px 0px #00000040;
}
.image-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--color-yellow) !important;
}
.image-slider .swiper-pagination {
    padding: calc(var(--spacing) * 1);
}
@keyframes ping {
    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
    initial-value: rotateX(0);
}
@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
    initial-value: rotateY(0);
}
@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
    initial-value: rotateZ(0);
}
@property --tw-skew-x {
    syntax: "*";
    inherits: false;
    initial-value: skewX(0);
}
@property --tw-skew-y {
    syntax: "*";
    inherits: false;
    initial-value: skewY(0);
}
@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-divide-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@property --tw-divide-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}
@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}
@property --tw-tracking {
    syntax: "*";
    inherits: false;
}
@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false;
}
@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
    syntax: "*";
    inherits: false;
}
@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff;
}
@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}
@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}
@property --tw-blur {
    syntax: "*";
    inherits: false;
}
@property --tw-brightness {
    syntax: "*";
    inherits: false;
}
@property --tw-contrast {
    syntax: "*";
    inherits: false;
}
@property --tw-grayscale {
    syntax: "*";
    inherits: false;
}
@property --tw-hue-rotate {
    syntax: "*";
    inherits: false;
}
@property --tw-invert {
    syntax: "*";
    inherits: false;
}
@property --tw-opacity {
    syntax: "*";
    inherits: false;
}
@property --tw-saturate {
    syntax: "*";
    inherits: false;
}
@property --tw-sepia {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false;
}
@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false;
}

.iti__dropdown-content {
    min-width: 290px;
    width: 100%;
}
.progress-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    padding-bottom: calc(var(--spacing) * 2);
    box-shadow: 0px 2px 6px 0px #00000040;
  }
  .progress-bar::after {
    content: "";
    position: absolute;
    bottom: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 2);
    background-color: var(--color-yellow);
    width: var(--uploading-file);
  }
  .progress-bar::before {
    content: "";
    position: absolute;
    bottom: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 2);
    width: 100%;
    background-color: #E6E8EC;
  }

  @media (width < 48rem) {
    input[type="datetime-local"] {
      position: relative;
      appearance: none;
    }
    input[type="datetime-local"]::before {
      content: "";
      position: absolute;
      right: 6px;
      top: 50%;
      width: 16px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-calendar'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
      height: 16px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
    }
  }

  @media (width < 48rem) {
    input[type="date"] {
      position: relative;
      appearance: none;
    }
    input[type="date"]::before {
      content: "";
      position: absolute;
      right: 6px;
      top: 50%;
      width: 16px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-calendar'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
      height: 16px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
    }
  }

  .bottom-0{
    bottom:0;
}

.left-0{
    left:0;
}

.h-2 {
    height: calc(var(--spacing) * 2);
  }
   
/*branch drop down*/

.font-manrope {
    font-family: var(--font-manrope);
}
.text-\[\#289242\] {
color: #289242;
}
.text-\[\#404040\] {
color: #404040;
}
.brach-dropdown {
  position: relative;
}
.brach-dropdown .label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #289242;
  background-color: #28924280;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 1);
}
.brach-dropdown .options {
  position: absolute;
  top: 100%;
  right: calc(var(--spacing) * 0);
  z-index: 50;
  margin-top: calc(var(--spacing) * 1);
  display: none;
  max-width: calc(var(--spacing) * 44);
  min-width: calc(var(--spacing) * 44);
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(& > :not(:last-child)) {
    border-color: #289242;
  }
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #289242;
  background-color: var(--color-white);
  box-shadow: 0px 4px 4px 0px #00000040;
} 
.brach-dropdown .options .options-link {
  width: 100%;
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1.5);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &:hover {
    @media (hover: hover) {
      background-color: #28924280;
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: #289242;
    }
}
}

.brach-dropdown.show .options {
  display: block;
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

.edit-iti .iti{
    width:100% !important;
}

/*order confirm page*/
.bottom-2 {
    bottom: calc(var(--spacing) * 2);
}
.-mt-6 {
    margin-top: calc(var(--spacing) * -6);
}
.h-\[31px\] {
    height: 31px;
}
.h-\[200px\] {
    height: 200px;
}
.h-svh {
    height: 100svh;
}
.w-\[153px\] {
    width: 153px;
}
.w-\[235px\] {
    width: 235px;
}
.gap-6 {
    gap: calc(var(--spacing) * 6);
}
.rounded-md {
    border-radius: var(--radius-md);
}
.bg-green-bright {
    background-color: var(--color-green-bright);
}
.py-12 {
    padding-block: calc(var(--spacing) * 12);
}
.text-\[23px\] {
    font-size: 23px;
}
.text-\[32px\] {
    font-size: 32px;
}
.text-\[\#8E8E93\] {
    color: #8E8E93;
}
.text-gray-soft {
    color: var(--color-gray-soft);
}
.confirmation-layout {
  position: relative;
  margin-inline: auto;
  height: 100%;
  min-height: 100svh;
  width: 100%;
  max-width: 420px;
  font-family: var(--font-jakarta);
  background: #ffffff;
}
@keyframes ping-once {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-ping-dots {
  animation: ping-once 0.4s ease-out 1;
}
.animate-ping-badge {
  animation: ping-once 0.6s ease-out 1;
}

.progress-tracker {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.progress-tracker::before {
  content: '';
  position: absolute;
  top: 12px;
  left: calc(var(--spacing) * 0);
  z-index: 10;
  height: calc(var(--spacing) * 0.5);
  width: 100%;
  background-color: #C7D2FE;
}
.progress-step {
  position: relative;
  z-index: 20;
  display: flex;
  width: 25%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step-number {
  margin-bottom: calc(var(--spacing) * 2.5);
  display: flex;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: #EEF2FF;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-green-bright);
}
.step-label {
  margin-inline: auto;
  max-width: 70px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-black);
}
.progress-step.active .step-number {
  background-color: var(--color-green-bright);
  color: var(--color-white);
}
.progress-step.active .step-label {
  color: var(--color-green-bright);
}
.progress-tracker .progress-line {
  transition: width 0.3s ease;
  position: absolute;
  top: 12px;
  left: calc(var(--spacing) * 0);
  z-index: 10;
  height: calc(var(--spacing) * 0.5);
  background-color: var(--color-green-bright);
}
.state-1 .progress-line {
  width: 0%;
}
.state-2 .progress-line {
  width: 33.3%;
}
.state-3 .progress-line {
  width: 66.6%;
}
.state-4 .progress-line {
  width: 100%;
}