@charset "UTF-8";
@layer properties;
@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-red-300: oklch(80.8% .114 19.571);
        --color-red-400: oklch(70.4% .191 22.216);
        --color-red-500: oklch(63.7% .237 25.331);
        --color-red-600: oklch(57.7% .245 27.325);
        --color-orange-600: oklch(64.6% .222 41.116);
        --color-amber-400: oklch(82.8% .189 84.429);
        --color-amber-500: oklch(76.9% .188 70.08);
        --color-green-600: oklch(62.7% .194 149.214);
        --color-green-700: oklch(52.7% .154 150.069);
        --color-gray-50: oklch(98.5% .002 247.839);
        --color-gray-200: oklch(92.8% .006 264.531);
        --color-gray-300: oklch(87.2% .01 258.338);
        --color-gray-400: oklch(70.7% .022 261.325);
        --color-gray-500: oklch(55.1% .027 264.364);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-gray-700: oklch(37.3% .034 259.733);
        --color-gray-800: oklch(27.8% .033 256.848);
        --color-gray-900: oklch(21% .034 264.665);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --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);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-normal: 0em;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-relaxed: 1.625;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --ease-in: cubic-bezier(.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --blur-sm: 8px;
        --blur-md: 12px;
        --blur-lg: 16px;
        --blur-xl: 24px;
        --blur-2xl: 40px;
        --aspect-video: 16 / 9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-accent-color: #C9A4FF;
        --color-theme-color: #B17BB5;
        --color-background-dark: #0D111E;
        --color-text-dark: #fff;
        --color-theme-text: #fff;
        --color-accent-text: #fff;
        --color-gray1: #211F20;
        --color-gray2: #464446;
        --color-gray3: #5f5f5f;
        --color-gray4: #141414;
        --color-gray5: #c0c0c0;
        --color-gray6: #18181b;
        --color-gray7: #707070;
        --color-dynamic-color: var(--color-background-dark);
        --color-accent-purple: #C9A4FF;
        --color-accent-purple-text: #0B0F1E;
        --color-surface-base: #0B0F1E;
        --color-surface: #141A2E;
        --color-surface-2: #1B2240;
        --color-surface-3: #282D3C;
        --color-surface-card: #202430;
        --color-tab-active: #F8D649;
        --color-surface-footer: #202430;
        --color-nav-inactive: #FFFFFF;
        --color-nav-button: #B17BB5;
        --color-divider: rgba(255, 255, 255, .08);
        --color-notify-blue: #2B71B9;
        --color-cta-dark: #2D2C3D;
        --color-checkbox-yellow: #FFCD00;
        --color-arena-orange: #EE5623
    }
}

@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
    }

    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: -.25em
    }

    sup {
        top: -.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
    }

    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentcolor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                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
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-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 {
    .pointer-events-auto {
        pointer-events: auto
    }

    .pointer-events-none {
        pointer-events: none
    }

    .collapse {
        visibility: collapse
    }

    .invisible {
        visibility: hidden
    }

    .visible {
        visibility: visible
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .inset-0 {
        inset: calc(var(--spacing) * 0)
    }

    .inset-x-0 {
        inset-inline: calc(var(--spacing) * 0)
    }

    .inset-y-0 {
        inset-block: calc(var(--spacing) * 0)
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .start-0 {
        inset-inline-start: calc(var(--spacing) * 0)
    }

    .start-2 {
        inset-inline-start: calc(var(--spacing) * 2)
    }

    .end {
        inset-inline-end: var(--spacing)
    }

    .end-0 {
        inset-inline-end: calc(var(--spacing) * 0)
    }

    .end-1 {
        inset-inline-end: calc(var(--spacing) * 1)
    }

    .end-2 {
        inset-inline-end: calc(var(--spacing) * 2)
    }

    .end-3 {
        inset-inline-end: calc(var(--spacing) * 3)
    }

    .\!-top-3 {
        top: calc(var(--spacing) * -3) !important
    }

    .\!top-0 {
        top: calc(var(--spacing) * 0) !important
    }

    .\!top-4 {
        top: calc(var(--spacing) * 4) !important
    }

    .\!top-\[26px\] {
        top: 26px !important
    }

    .\!top-\[28px\] {
        top: 28px !important
    }

    .\!top-\[30px\] {
        top: 30px !important
    }

    .\!top-\[53px\] {
        top: 53px !important
    }

    .top-0 {
        top: calc(var(--spacing) * 0)
    }

    .top-1 {
        top: calc(var(--spacing) * 1)
    }

    .top-1\/2 {
        top: 50%
    }

    .top-2 {
        top: calc(var(--spacing) * 2)
    }

    .top-4 {
        top: calc(var(--spacing) * 4)
    }

    .top-10 {
        top: calc(var(--spacing) * 10)
    }

    .top-12 {
        top: calc(var(--spacing) * 12)
    }

    .top-16 {
        top: calc(var(--spacing) * 16)
    }

    .top-20 {
        top: calc(var(--spacing) * 20)
    }

    .top-\[\.4rem\] {
        top: .4rem
    }

    .top-\[\.5rem\] {
        top: .5rem
    }

    .top-\[\.45rem\] {
        top: .45rem
    }

    .top-\[0\.80rem\] {
        top: .8rem
    }

    .top-\[1\%\] {
        top: 1%
    }

    .top-\[4\.25rem\] {
        top: 4.25rem
    }

    .top-\[calc\(100\%\+0\.5rem\)\] {
        top: calc(100% + .5rem)
    }

    .\!-right-8 {
        right: calc(var(--spacing) * -8) !important
    }

    .\!right-0 {
        right: calc(var(--spacing) * 0) !important
    }

    .\!right-\[-22px\] {
        right: -22px !important
    }

    .\!right-\[-49px\] {
        right: -49px !important
    }

    .right-0 {
        right: calc(var(--spacing) * 0)
    }

    .right-1\/2 {
        right: 50%
    }

    .right-3 {
        right: calc(var(--spacing) * 3)
    }

    .right-6 {
        right: calc(var(--spacing) * 6)
    }

    .right-\[-1px\] {
        right: -1px
    }

    .right-auto {
        right: auto
    }

    .-bottom-14 {
        bottom: calc(var(--spacing) * -14)
    }

    .bottom-0 {
        bottom: calc(var(--spacing) * 0)
    }

    .bottom-2\.5 {
        bottom: calc(var(--spacing) * 2.5)
    }

    .bottom-3\.5 {
        bottom: calc(var(--spacing) * 3.5)
    }

    .bottom-4 {
        bottom: calc(var(--spacing) * 4)
    }

    .bottom-8 {
        bottom: calc(var(--spacing) * 8)
    }

    .bottom-\[2rem\] {
        bottom: 2rem
    }

    .bottom-\[4\.5rem\] {
        bottom: 4.5rem
    }

    .bottom-\[calc\(100\%\+0\.5rem\)\] {
        bottom: calc(100% + .5rem)
    }

    .\!left-0 {
        left: calc(var(--spacing) * 0) !important
    }

    .left-0 {
        left: calc(var(--spacing) * 0)
    }

    .left-1\/2 {
        left: 50%
    }

    .left-4 {
        left: calc(var(--spacing) * 4)
    }

    .left-6 {
        left: calc(var(--spacing) * 6)
    }

    .left-\[-1px\] {
        left: -1px
    }

    .left-\[5\%\] {
        left: 5%
    }

    .left-auto {
        left: auto
    }

    .z-0 {
        z-index: 0
    }

    .z-1 {
        z-index: 1
    }

    .z-5 {
        z-index: 5
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-\[-1\] {
        z-index: -1
    }

    .z-\[1\] {
        z-index: 1
    }

    .z-\[2\] {
        z-index: 2
    }

    .z-\[3\] {
        z-index: 3
    }

    .z-\[9\] {
        z-index: 9
    }

    .z-\[50\] {
        z-index: 50
    }

    .z-\[55\] {
        z-index: 55
    }

    .z-\[60\] {
        z-index: 60
    }

    .z-\[70\] {
        z-index: 70
    }

    .z-\[71\] {
        z-index: 71
    }

    .z-\[111\] {
        z-index: 111
    }

    .z-\[1000\] {
        z-index: 1000
    }

    .z-\[2000\] {
        z-index: 2000
    }

    .z-\[2100\] {
        z-index: 2100
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .order-3 {
        order: 3
    }

    .col-span-full {
        grid-column: 1 / -1
    }

    .float-left {
        float: left
    }

    .\!container {
        width: 100% !important
    }

    @media(min-width:40rem) {
        .\!container {
            max-width: 40rem !important
        }
    }

    @media(min-width:48rem) {
        .\!container {
            max-width: 48rem !important
        }
    }

    @media(min-width:64rem) {
        .\!container {
            max-width: 64rem !important
        }
    }

    @media(min-width:80rem) {
        .\!container {
            max-width: 80rem !important
        }
    }

    @media(min-width:96rem) {
        .\!container {
            max-width: 96rem !important
        }
    }

    .container {
        width: 100%
    }

    @media(min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media(min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media(min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media(min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media(min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .m-110 {
        margin: calc(var(--spacing) * 110)
    }

    .m-198 {
        margin: calc(var(--spacing) * 198)
    }

    .m-1360 {
        margin: calc(var(--spacing) * 1360)
    }

    .m-1425 {
        margin: calc(var(--spacing) * 1425)
    }

    .m-auto {
        margin: auto
    }

    .-mx-6 {
        margin-inline: calc(var(--spacing) * -6)
    }

    .-mx-10 {
        margin-inline: calc(var(--spacing) * -10)
    }

    .mx-0 {
        margin-inline: calc(var(--spacing) * 0)
    }

    .mx-8 {
        margin-inline: calc(var(--spacing) * 8)
    }

    .mx-\[calc\(50\%-50vw\)\] {
        margin-inline: calc(50% - 50vw)
    }

    .mx-auto {
        margin-inline: auto
    }

    .my-2 {
        margin-block: calc(var(--spacing) * 2)
    }

    .my-4 {
        margin-block: calc(var(--spacing) * 4)
    }

    .my-\[5\.3rem\] {
        margin-block: 5.3rem
    }

    .my-\[8\.9rem\] {
        margin-block: 8.9rem
    }

    .my-auto {
        margin-block: auto
    }

    .ms-1 {
        margin-inline-start: calc(var(--spacing) * 1)
    }

    .ms-\[26px\] {
        margin-inline-start: 26px
    }

    .me-2 {
        margin-inline-end: calc(var(--spacing) * 2)
    }

    .-mt-1 {
        margin-top: calc(var(--spacing) * -1)
    }

    .-mt-2 {
        margin-top: calc(var(--spacing) * -2)
    }

    .-mt-3 {
        margin-top: calc(var(--spacing) * -3)
    }

    .-mt-4 {
        margin-top: calc(var(--spacing) * -4)
    }

    .mt-0 {
        margin-top: calc(var(--spacing) * 0)
    }

    .mt-0\.5 {
        margin-top: calc(var(--spacing) * .5)
    }

    .mt-1 {
        margin-top: calc(var(--spacing) * 1)
    }

    .mt-1\.5 {
        margin-top: calc(var(--spacing) * 1.5)
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }

    .mt-3 {
        margin-top: calc(var(--spacing) * 3)
    }

    .mt-3\.5 {
        margin-top: calc(var(--spacing) * 3.5)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-5 {
        margin-top: calc(var(--spacing) * 5)
    }

    .mt-6 {
        margin-top: calc(var(--spacing) * 6)
    }

    .mt-7 {
        margin-top: calc(var(--spacing) * 7)
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }

    .mt-10 {
        margin-top: calc(var(--spacing) * 10)
    }

    .mt-12 {
        margin-top: calc(var(--spacing) * 12)
    }

    .mt-\[\.45rem\] {
        margin-top: .45rem
    }

    .mt-\[0\.4rem\] {
        margin-top: .4rem
    }

    .mt-\[0\.15rem\] {
        margin-top: .15rem
    }

    .mt-\[2px\] {
        margin-top: 2px
    }

    .mt-\[3px\] {
        margin-top: 3px
    }

    .mt-\[6px\] {
        margin-top: 6px
    }

    .mt-\[8\.9rem\] {
        margin-top: 8.9rem
    }

    .mt-auto {
        margin-top: auto
    }

    .mt-px {
        margin-top: 1px
    }

    .mr-0 {
        margin-right: calc(var(--spacing) * 0)
    }

    .mr-2 {
        margin-right: calc(var(--spacing) * 2)
    }

    .mr-6 {
        margin-right: calc(var(--spacing) * 6)
    }

    .mr-\[1\.3rem\] {
        margin-right: 1.3rem
    }

    .mr-auto {
        margin-right: auto
    }

    .-mb-1 {
        margin-bottom: calc(var(--spacing) * -1)
    }

    .-mb-2 {
        margin-bottom: calc(var(--spacing) * -2)
    }

    .mb-0 {
        margin-bottom: calc(var(--spacing) * 0)
    }

    .mb-0\.5 {
        margin-bottom: calc(var(--spacing) * .5)
    }

    .mb-1 {
        margin-bottom: calc(var(--spacing) * 1)
    }

    .mb-1\.5 {
        margin-bottom: calc(var(--spacing) * 1.5)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing) * 2)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing) * 4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing) * 5)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing) * 6)
    }

    .mb-7 {
        margin-bottom: calc(var(--spacing) * 7)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing) * 8)
    }

    .mb-16 {
        margin-bottom: calc(var(--spacing) * 16)
    }

    .mb-20 {
        margin-bottom: calc(var(--spacing) * 20)
    }

    .mb-28 {
        margin-bottom: calc(var(--spacing) * 28)
    }

    .mb-44 {
        margin-bottom: calc(var(--spacing) * 44)
    }

    .mb-\[2rem\] {
        margin-bottom: 2rem
    }

    .mb-\[3\.5rem\] {
        margin-bottom: 3.5rem
    }

    .mb-\[4\.5rem\] {
        margin-bottom: 4.5rem
    }

    .-ml-1 {
        margin-left: calc(var(--spacing) * -1)
    }

    .ml-0 {
        margin-left: calc(var(--spacing) * 0)
    }

    .ml-6 {
        margin-left: calc(var(--spacing) * 6)
    }

    .ml-\[1\.3rem\] {
        margin-left: 1.3rem
    }

    .ml-auto {
        margin-left: auto
    }

    .line-clamp-1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1
    }

    .line-clamp-2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }

    .line-clamp-4 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4
    }

    .line-clamp-none {
        overflow: visible;
        display: block;
        -webkit-box-orient: horizontal;
        -webkit-line-clamp: unset
    }

    .\!block {
        display: block !important
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .aspect-\[3\/4\] {
        aspect-ratio: 3/4
    }

    .aspect-\[4\/3\] {
        aspect-ratio: 4/3
    }

    .aspect-\[9\/16\] {
        aspect-ratio: 9/16
    }

    .aspect-\[16\/9\] {
        aspect-ratio: 16/9
    }

    .aspect-auto {
        aspect-ratio: auto
    }

    .aspect-square {
        aspect-ratio: 1 / 1
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video)
    }

    .\!h-\[90px\] {
        height: 90px !important
    }

    .\!h-\[110px\] {
        height: 110px !important
    }

    .\!h-\[120px\] {
        height: 120px !important
    }

    .\!h-\[130px\] {
        height: 130px !important
    }

    .h-1 {
        height: calc(var(--spacing) * 1)
    }

    .h-1\.5 {
        height: calc(var(--spacing) * 1.5)
    }

    .h-2 {
        height: calc(var(--spacing) * 2)
    }

    .h-2\.5 {
        height: calc(var(--spacing) * 2.5)
    }

    .h-2\/5 {
        height: 40%
    }

    .h-3 {
        height: calc(var(--spacing) * 3)
    }

    .h-3\.5 {
        height: calc(var(--spacing) * 3.5)
    }

    .h-4 {
        height: calc(var(--spacing) * 4)
    }

    .h-5 {
        height: calc(var(--spacing) * 5)
    }

    .h-6 {
        height: calc(var(--spacing) * 6)
    }

    .h-7 {
        height: calc(var(--spacing) * 7)
    }

    .h-8 {
        height: calc(var(--spacing) * 8)
    }

    .h-9 {
        height: calc(var(--spacing) * 9)
    }

    .h-10 {
        height: calc(var(--spacing) * 10)
    }

    .h-11 {
        height: calc(var(--spacing) * 11)
    }

    .h-12 {
        height: calc(var(--spacing) * 12)
    }

    .h-14 {
        height: calc(var(--spacing) * 14)
    }

    .h-15 {
        height: calc(var(--spacing) * 15)
    }

    .h-24 {
        height: calc(var(--spacing) * 24)
    }

    .h-32 {
        height: calc(var(--spacing) * 32)
    }

    .h-40 {
        height: calc(var(--spacing) * 40)
    }

    .h-48 {
        height: calc(var(--spacing) * 48)
    }

    .h-\[\.7rem\] {
        height: .7rem
    }

    .h-\[\.8rem\] {
        height: .8rem
    }

    .h-\[\.9rem\] {
        height: .9rem
    }

    .h-\[\.75rem\] {
        height: .75rem
    }

    .h-\[\.95rem\] {
        height: .95rem
    }

    .h-\[1\.1rem\] {
        height: 1.1rem
    }

    .h-\[1\.2rem\] {
        height: 1.2rem
    }

    .h-\[1\.3rem\] {
        height: 1.3rem
    }

    .h-\[1\.05rem\] {
        height: 1.05rem
    }

    .h-\[1\.6rem\] {
        height: 1.6rem
    }

    .h-\[1\.7rem\] {
        height: 1.7rem
    }

    .h-\[1\.35rem\] {
        height: 1.35rem
    }

    .h-\[1px\] {
        height: 1px
    }

    .h-\[2\.2rem\] {
        height: 2.2rem
    }

    .h-\[2\.3rem\] {
        height: 2.3rem
    }

    .h-\[2\.4rem\] {
        height: 2.4rem
    }

    .h-\[3px\] {
        height: 3px
    }

    .h-\[4\.5rem\] {
        height: 4.5rem
    }

    .h-\[4\.9rem\] {
        height: 4.9rem
    }

    .h-\[4\.25rem\] {
        height: 4.25rem
    }

    .h-\[9\.5rem\] {
        height: 9.5rem
    }

    .h-\[10rem\] {
        height: 10rem
    }

    .h-\[13rem\] {
        height: 13rem
    }

    .h-\[18px\] {
        height: 18px
    }

    .h-\[26rem\] {
        height: 26rem
    }

    .h-\[40px\] {
        height: 40px
    }

    .h-\[45px\] {
        height: 45px
    }

    .h-\[246px\] {
        height: 246px
    }

    .h-\[254px\] {
        height: 254px
    }

    .h-\[300px\] {
        height: 300px
    }

    .h-\[calc\(100dvh-6rem\)\] {
        height: calc(100dvh - 6rem)
    }

    .h-\[calc\(100dvh-100px\)\] {
        height: calc(100dvh - 100px)
    }

    .h-\[calc\(100vh-18rem\)\] {
        height: calc(100vh - 18rem)
    }

    .h-\[calc\(100vh-100px\)\] {
        height: calc(100vh - 100px)
    }

    .h-auto {
        height: auto
    }

    .h-dvh {
        height: 100dvh
    }

    .h-full {
        height: 100%
    }

    .h-px {
        height: 1px
    }

    .h-screen {
        height: 100vh
    }

    .max-h-40 {
        max-height: calc(var(--spacing) * 40)
    }

    .max-h-72 {
        max-height: calc(var(--spacing) * 72)
    }

    .max-h-\[15rem\] {
        max-height: 15rem
    }

    .max-h-\[40vh\] {
        max-height: 40vh
    }

    .max-h-\[60\%\] {
        max-height: 60%
    }

    .max-h-\[85vh\] {
        max-height: 85vh
    }

    .max-h-\[88dvh\] {
        max-height: 88dvh
    }

    .max-h-\[222px\] {
        max-height: 222px
    }

    .max-h-\[calc\(100vh-10rem\)\] {
        max-height: calc(100vh - 10rem)
    }

    .max-h-full {
        max-height: 100%
    }

    .min-h-0 {
        min-height: calc(var(--spacing) * 0)
    }

    .min-h-\[2\.25rem\] {
        min-height: 2.25rem
    }

    .min-h-\[2rem\] {
        min-height: 2rem
    }

    .min-h-\[60vh\] {
        min-height: 60vh
    }

    .min-h-\[70vh\] {
        min-height: 70vh
    }

    .min-h-\[200px\] {
        min-height: 200px
    }

    .min-h-\[400px\] {
        min-height: 400px
    }

    .min-h-\[calc\(100dvh--12rem\)\] {
        min-height: calc(100dvh + 12rem)
    }

    .min-h-\[calc\(100dvh-5rem\)\] {
        min-height: calc(100dvh - 5rem)
    }

    .min-h-\[calc\(100dvh-6rem\)\] {
        min-height: calc(100dvh - 6rem)
    }

    .min-h-\[calc\(100dvh-8rem\/13rem\/11rem\)\] {
        min-height: calc(100dvh - (8rem/13rem/11rem))
    }

    .min-h-\[calc\(100dvh-9\.5rem\)\] {
        min-height: calc(100dvh - 9.5rem)
    }

    .min-h-\[calc\(100dvh-9rem\)\] {
        min-height: calc(100dvh - 9rem)
    }

    .min-h-\[calc\(100dvh-13rem\)\] {
        min-height: calc(100dvh - 13rem)
    }

    .min-h-dvh {
        min-height: 100dvh
    }

    .min-h-lvh {
        min-height: 100lvh
    }

    .\!w-\[90px\] {
        width: 90px !important
    }

    .\!w-\[110px\] {
        width: 110px !important
    }

    .\!w-\[120px\] {
        width: 120px !important
    }

    .\!w-\[130px\] {
        width: 130px !important
    }

    .\!w-full {
        width: 100% !important
    }

    .w-1 {
        width: calc(var(--spacing) * 1)
    }

    .w-1\.5 {
        width: calc(var(--spacing) * 1.5)
    }

    .w-1\/2 {
        width: 50%
    }

    .w-1\/3 {
        width: calc(1 / 3 * 100%)
    }

    .w-2 {
        width: calc(var(--spacing) * 2)
    }

    .w-2\.5 {
        width: calc(var(--spacing) * 2.5)
    }

    .w-2\/3 {
        width: calc(2 / 3 * 100%)
    }

    .w-2\/5 {
        width: 40%
    }

    .w-3 {
        width: calc(var(--spacing) * 3)
    }

    .w-3\.5 {
        width: calc(var(--spacing) * 3.5)
    }

    .w-3\/4 {
        width: 75%
    }

    .w-4 {
        width: calc(var(--spacing) * 4)
    }

    .w-5 {
        width: calc(var(--spacing) * 5)
    }

    .w-6 {
        width: calc(var(--spacing) * 6)
    }

    .w-7 {
        width: calc(var(--spacing) * 7)
    }

    .w-8 {
        width: calc(var(--spacing) * 8)
    }

    .w-9 {
        width: calc(var(--spacing) * 9)
    }

    .w-10 {
        width: calc(var(--spacing) * 10)
    }

    .w-11 {
        width: calc(var(--spacing) * 11)
    }

    .w-12 {
        width: calc(var(--spacing) * 12)
    }

    .w-16 {
        width: calc(var(--spacing) * 16)
    }

    .w-20 {
        width: calc(var(--spacing) * 20)
    }

    .w-24 {
        width: calc(var(--spacing) * 24)
    }

    .w-28 {
        width: calc(var(--spacing) * 28)
    }

    .w-32 {
        width: calc(var(--spacing) * 32)
    }

    .w-40 {
        width: calc(var(--spacing) * 40)
    }

    .w-44 {
        width: calc(var(--spacing) * 44)
    }

    .w-48 {
        width: calc(var(--spacing) * 48)
    }

    .w-\[\.6rem\] {
        width: .6rem
    }

    .w-\[\.8rem\] {
        width: .8rem
    }

    .w-\[\.9rem\] {
        width: .9rem
    }

    .w-\[\.65rem\] {
        width: .65rem
    }

    .w-\[\.75rem\] {
        width: .75rem
    }

    .w-\[\.85rem\] {
        width: .85rem
    }

    .w-\[\.95rem\] {
        width: .95rem
    }

    .w-\[\.625rem\] {
        width: .625rem
    }

    .w-\[\.825rem\] {
        width: .825rem
    }

    .w-\[1\.3rem\] {
        width: 1.3rem
    }

    .w-\[1\.05rem\] {
        width: 1.05rem
    }

    .w-\[1\.6rem\] {
        width: 1.6rem
    }

    .w-\[1\.8rem\] {
        width: 1.8rem
    }

    .w-\[1\.35rem\] {
        width: 1.35rem
    }

    .w-\[1\.95rem\] {
        width: 1.95rem
    }

    .w-\[2\.2rem\] {
        width: 2.2rem
    }

    .w-\[2\.4rem\] {
        width: 2.4rem
    }

    .w-\[4\.5rem\] {
        width: 4.5rem
    }

    .w-\[5\.5rem\] {
        width: 5.5rem
    }

    .w-\[6\.5rem\] {
        width: 6.5rem
    }

    .w-\[10rem\] {
        width: 10rem
    }

    .w-\[11rem\] {
        width: 11rem
    }

    .w-\[15rem\] {
        width: 15rem
    }

    .w-\[18px\] {
        width: 18px
    }

    .w-\[30\%\] {
        width: 30%
    }

    .w-\[40px\] {
        width: 40px
    }

    .w-\[44\%\] {
        width: 44%
    }

    .w-\[45px\] {
        width: 45px
    }

    .w-\[60\%\] {
        width: 60%
    }

    .w-\[80\%\] {
        width: 80%
    }

    .w-\[85\%\] {
        width: 85%
    }

    .w-\[88\%\] {
        width: 88%
    }

    .w-\[160px\] {
        width: 160px
    }

    .w-\[246px\] {
        width: 246px
    }

    .w-\[270px\] {
        width: 270px
    }

    .w-\[300px\] {
        width: 300px
    }

    .w-\[400px\] {
        width: 400px
    }

    .w-\[600px\] {
        width: 600px
    }

    .w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
        width: min(1100px, calc(100% - 3rem))
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .w-screen {
        width: 100vw
    }

    .\!max-w-\[30rem\] {
        max-width: 30rem !important
    }

    .max-w-2\.5 {
        max-width: calc(var(--spacing) * 2.5)
    }

    .max-w-5 {
        max-width: calc(var(--spacing) * 5)
    }

    .max-w-8 {
        max-width: calc(var(--spacing) * 8)
    }

    .max-w-40 {
        max-width: calc(var(--spacing) * 40)
    }

    .max-w-44 {
        max-width: calc(var(--spacing) * 44)
    }

    .max-w-\[10rem\] {
        max-width: 10rem
    }

    .max-w-\[16rem\] {
        max-width: 16rem
    }

    .max-w-\[19rem\] {
        max-width: 19rem
    }

    .max-w-\[22rem\] {
        max-width: 22rem
    }

    .max-w-\[24rem\] {
        max-width: 24rem
    }

    .max-w-\[26rem\] {
        max-width: 26rem
    }

    .max-w-\[28rem\] {
        max-width: 28rem
    }

    .max-w-\[30rem\] {
        max-width: 30rem
    }

    .max-w-\[48\.5\%\] {
        max-width: 48.5%
    }

    .max-w-\[50\%\] {
        max-width: 50%
    }

    .max-w-\[140px\] {
        max-width: 140px
    }

    .max-w-\[200px\] {
        max-width: 200px
    }

    .max-w-\[360px\] {
        max-width: 360px
    }

    .max-w-\[400px\] {
        max-width: 400px
    }

    .max-w-\[430px\] {
        max-width: 430px
    }

    .max-w-\[520px\] {
        max-width: 520px
    }

    .max-w-\[720px\] {
        max-width: 720px
    }

    .max-w-\[890px\] {
        max-width: 890px
    }

    .max-w-\[1000px\] {
        max-width: 1000px
    }

    .max-w-\[1100px\] {
        max-width: 1100px
    }

    .max-w-\[calc\(1100px\+3rem\)\] {
        max-width: calc(1100px + 3rem)
    }

    .max-w-fit {
        max-width: fit-content
    }

    .max-w-full {
        max-width: 100%
    }

    .max-w-md {
        max-width: var(--container-md)
    }

    .max-w-sm {
        max-width: var(--container-sm)
    }

    .min-w-0 {
        min-width: calc(var(--spacing) * 0)
    }

    .min-w-8 {
        min-width: calc(var(--spacing) * 8)
    }

    .min-w-10 {
        min-width: calc(var(--spacing) * 10)
    }

    .min-w-44 {
        min-width: calc(var(--spacing) * 44)
    }

    .min-w-\[\.9rem\] {
        min-width: .9rem
    }

    .min-w-\[2\.75rem\] {
        min-width: 2.75rem
    }

    .min-w-\[4\.25rem\] {
        min-width: 4.25rem
    }

    .min-w-\[10rem\] {
        min-width: 10rem
    }

    .min-w-\[14rem\] {
        min-width: 14rem
    }

    .flex-1 {
        flex: 1
    }

    .flex-shrink-0,
    .shrink-0 {
        flex-shrink: 0
    }

    .border-collapse {
        border-collapse: collapse
    }

    .-translate-x-1\/2 {
        --tw-translate-x: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-x-1\/2 {
        --tw-translate-x: 50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-1\/2 {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-\[2px\] {
        --tw-translate-y: -2px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-0 {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-8 {
        --tw-translate-y: calc(var(--spacing) * 8);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .scale-110 {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .-rotate-45 {
        rotate: -45deg
    }

    .-rotate-90 {
        rotate: -90deg
    }

    .rotate-90 {
        rotate: 90deg
    }

    .rotate-180 {
        rotate: 180deg
    }

    .rotate-\[270deg\] {
        rotate: 270deg
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .animate-pulse {
        animation: var(--animate-pulse)
    }

    .animate-spin {
        animation: var(--animate-spin)
    }

    .cursor-default {
        cursor: default
    }

    .cursor-grab {
        cursor: grab
    }

    .cursor-not-allowed {
        cursor: not-allowed
    }

    .cursor-pointer {
        cursor: pointer
    }

    .cursor-wait {
        cursor: wait
    }

    .touch-pan-x {
        --tw-pan-x: pan-x;
        touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, )
    }

    .resize {
        resize: both
    }

    .resize-none {
        resize: none
    }

    .snap-x {
        scroll-snap-type: x var(--tw-scroll-snap-strictness)
    }

    .snap-mandatory {
        --tw-scroll-snap-strictness: mandatory
    }

    .snap-start {
        scroll-snap-align: start
    }

    .scroll-ps-6 {
        scroll-padding-inline-start: calc(var(--spacing) * 6)
    }

    .list-disc {
        list-style-type: disc
    }

    .list-none {
        list-style-type: none
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .grid-cols-\[repeat\(2\,_minmax\(0\,_auto\)\)\] {
        grid-template-columns: repeat(2, minmax(0, auto))
    }

    .flex-col {
        flex-direction: column
    }

    .flex-row {
        flex-direction: row
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .place-content-center {
        place-content: center
    }

    .place-items-center {
        place-items: center
    }

    .items-center {
        align-items: center
    }

    .items-end {
        align-items: flex-end
    }

    .items-start {
        align-items: flex-start
    }

    .items-stretch {
        align-items: stretch
    }

    .justify-around {
        justify-content: space-around
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .justify-evenly {
        justify-content: space-evenly
    }

    .justify-start {
        justify-content: flex-start
    }

    .gap-0 {
        gap: calc(var(--spacing) * 0)
    }

    .gap-0\.5 {
        gap: calc(var(--spacing) * .5)
    }

    .gap-1 {
        gap: calc(var(--spacing) * 1)
    }

    .gap-1\.5 {
        gap: calc(var(--spacing) * 1.5)
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-2\.5 {
        gap: calc(var(--spacing) * 2.5)
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }

    .gap-4 {
        gap: calc(var(--spacing) * 4)
    }

    .gap-5 {
        gap: calc(var(--spacing) * 5)
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }

    .gap-8 {
        gap: calc(var(--spacing) * 8)
    }

    .gap-12 {
        gap: calc(var(--spacing) * 12)
    }

    :where(.space-y-1>: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)))
    }

    :where(.space-y-2>: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)))
    }

    :where(.space-y-4>: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)))
    }

    .gap-x-4 {
        column-gap: calc(var(--spacing) * 4)
    }

    .gap-x-5 {
        column-gap: calc(var(--spacing) * 5)
    }

    .gap-x-6 {
        column-gap: calc(var(--spacing) * 6)
    }

    .gap-x-8 {
        column-gap: calc(var(--spacing) * 8)
    }

    .gap-y-3 {
        row-gap: calc(var(--spacing) * 3)
    }

    .gap-y-6 {
        row-gap: calc(var(--spacing) * 6)
    }

    .gap-y-8 {
        row-gap: calc(var(--spacing) * 8)
    }

    .self-start {
        align-self: flex-start
    }

    .self-stretch {
        align-self: stretch
    }

    .justify-self-center {
        justify-self: center
    }

    .justify-self-end {
        justify-self: flex-end
    }

    .justify-self-start {
        justify-self: flex-start
    }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .overflow-auto {
        overflow: auto
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .overflow-x-hidden {
        overflow-x: hidden
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .overscroll-contain {
        overscroll-behavior: contain
    }

    .rounded {
        border-radius: .25rem
    }

    .rounded-2xl {
        border-radius: var(--radius-2xl)
    }

    .rounded-\[\.5rem\] {
        border-radius: .5rem
    }

    .rounded-\[\.75rem\] {
        border-radius: .75rem
    }

    .rounded-\[7px\] {
        border-radius: 7px
    }

    .rounded-\[9px\] {
        border-radius: 9px
    }

    .rounded-\[22\%\] {
        border-radius: 22%
    }

    .rounded-full {
        border-radius: calc(infinity * 1px)
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-none {
        border-radius: 0
    }

    .rounded-sm {
        border-radius: var(--radius-sm)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .rounded-t-2xl {
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-4 {
        border-style: var(--tw-border-style);
        border-width: 4px
    }

    .border-\[2px\] {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-\[3px\] {
        border-style: var(--tw-border-style);
        border-width: 3px
    }

    .border-e {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px
    }

    .border-e-2 {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 2px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-dashed {
        --tw-border-style: dashed;
        border-style: dashed
    }

    .border-none {
        --tw-border-style: none;
        border-style: none
    }

    .\!border-accent-purple {
        border-color: var(--color-accent-purple) !important
    }

    .border-\[\#1E439B\] {
        border-color: #1e439b
    }

    .border-\[\#393633\] {
        border-color: #393633
    }

    .border-\[\#B4B4B4\],
    .border-\[\#b4b4b4\] {
        border-color: #b4b4b4
    }

    .border-\[\#e5e5e5\] {
        border-color: #e5e5e5
    }

    .border-accent-color {
        border-color: var(--color-accent-color)
    }

    .border-accent-color\/40 {
        border-color: color-mix(in srgb, #C9A4FF 40%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .border-accent-color\/40 {
            border-color: color-mix(in oklab, var(--color-accent-color) 40%, transparent)
        }
    }

    .border-accent-purple {
        border-color: var(--color-accent-purple)
    }

    .border-accent-purple\/30 {
        border-color: color-mix(in srgb, #C9A4FF 30%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .border-accent-purple\/30 {
            border-color: color-mix(in oklab, var(--color-accent-purple) 30%, transparent)
        }
    }

    .border-arena-orange {
        border-color: var(--color-arena-orange)
    }

    .border-background-dark {
        border-color: var(--color-background-dark)
    }

    .border-divider {
        border-color: var(--color-divider)
    }

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

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

    .border-gray1 {
        border-color: var(--color-gray1)
    }

    .border-gray2 {
        border-color: var(--color-gray2)
    }

    .border-gray3 {
        border-color: var(--color-gray3)
    }

    .border-gray4 {
        border-color: var(--color-gray4)
    }

    .border-gray5 {
        border-color: var(--color-gray5)
    }

    .border-gray7 {
        border-color: var(--color-gray7)
    }

    .border-red-400\/40 {
        border-color: color-mix(in srgb, oklch(70.4% .191 22.216) 40%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .border-red-400\/40 {
            border-color: color-mix(in oklab, var(--color-red-400) 40%, transparent)
        }
    }

    .border-red-500 {
        border-color: var(--color-red-500)
    }

    .border-tab-active {
        border-color: var(--color-tab-active)
    }

    .border-text-dark {
        border-color: var(--color-text-dark)
    }

    .border-theme-color {
        border-color: var(--color-theme-color)
    }

    .border-transparent {
        border-color: transparent
    }

    .border-white\/10 {
        border-color: color-mix(in srgb, #fff 10%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .border-white\/10 {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent)
        }
    }

    .border-white\/15 {
        border-color: color-mix(in srgb, #fff 15%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .border-white\/15 {
            border-color: color-mix(in oklab, var(--color-white) 15%, transparent)
        }
    }

    .border-white\/40 {
        border-color: color-mix(in srgb, #fff 40%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .border-white\/40 {
            border-color: color-mix(in oklab, var(--color-white) 40%, transparent)
        }
    }

    .border-t-\[\#1E439B\] {
        border-top-color: #1e439b
    }

    .\!bg-accent-purple {
        background-color: var(--color-accent-purple) !important
    }

    .bg-\[\#00CC1B\] {
        background-color: #00cc1b
    }

    .bg-\[\#000000c9\] {
        background-color: #000000c9
    }

    .bg-\[\#1E439B\] {
        background-color: #1e439b
    }

    .bg-\[\#5BBB81\] {
        background-color: #5bbb81
    }

    .bg-\[\#7e7974\] {
        background-color: #7e7974
    }

    .bg-\[\#00000012\] {
        background-color: #00000012
    }

    .bg-\[\#211F20\] {
        background-color: #211f20
    }

    .bg-\[\#393633\] {
        background-color: #393633
    }

    .bg-\[\#85858586\] {
        background-color: #85858586
    }

    .bg-\[\#DC0B0B\] {
        background-color: #dc0b0b
    }

    .bg-\[\#e5e5e5\] {
        background-color: #e5e5e5
    }

    .bg-\[\#ffffff26\] {
        background-color: #ffffff26
    }

    .bg-accent-color {
        background-color: var(--color-accent-color)
    }

    .bg-accent-color\/10 {
        background-color: color-mix(in srgb, #C9A4FF 10%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-accent-color\/10 {
            background-color: color-mix(in oklab, var(--color-accent-color) 10%, transparent)
        }
    }

    .bg-accent-purple {
        background-color: var(--color-accent-purple)
    }

    .bg-accent-purple\/10 {
        background-color: color-mix(in srgb, #C9A4FF 10%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-accent-purple\/10 {
            background-color: color-mix(in oklab, var(--color-accent-purple) 10%, transparent)
        }
    }

    .bg-accent-text {
        background-color: var(--color-accent-text)
    }

    .bg-background-dark {
        background-color: var(--color-background-dark)
    }

    .bg-background-dark\/20 {
        background-color: color-mix(in srgb, #0D111E 20%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-background-dark\/20 {
            background-color: color-mix(in oklab, var(--color-background-dark) 20%, transparent)
        }
    }

    .bg-background-dark\/35 {
        background-color: color-mix(in srgb, #0D111E 35%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-background-dark\/35 {
            background-color: color-mix(in oklab, var(--color-background-dark) 35%, transparent)
        }
    }

    .bg-background-dark\/40 {
        background-color: color-mix(in srgb, #0D111E 40%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-background-dark\/40 {
            background-color: color-mix(in oklab, var(--color-background-dark) 40%, transparent)
        }
    }

    .bg-background-dark\/65 {
        background-color: color-mix(in srgb, #0D111E 65%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-background-dark\/65 {
            background-color: color-mix(in oklab, var(--color-background-dark) 65%, transparent)
        }
    }

    .bg-background-dark\/70 {
        background-color: color-mix(in srgb, #0D111E 70%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-background-dark\/70 {
            background-color: color-mix(in oklab, var(--color-background-dark) 70%, transparent)
        }
    }

    .bg-background-dark\/80 {
        background-color: color-mix(in srgb, #0D111E 80%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-background-dark\/80 {
            background-color: color-mix(in oklab, var(--color-background-dark) 80%, transparent)
        }
    }

    .bg-black {
        background-color: var(--color-black)
    }

    .bg-black\/20 {
        background-color: color-mix(in srgb, #000 20%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/20 {
            background-color: color-mix(in oklab, var(--color-black) 20%, transparent)
        }
    }

    .bg-black\/30 {
        background-color: color-mix(in srgb, #000 30%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/30 {
            background-color: color-mix(in oklab, var(--color-black) 30%, transparent)
        }
    }

    .bg-black\/55 {
        background-color: color-mix(in srgb, #000 55%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/55 {
            background-color: color-mix(in oklab, var(--color-black) 55%, transparent)
        }
    }

    .bg-black\/60 {
        background-color: color-mix(in srgb, #000 60%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/60 {
            background-color: color-mix(in oklab, var(--color-black) 60%, transparent)
        }
    }

    .bg-black\/65 {
        background-color: color-mix(in srgb, #000 65%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/65 {
            background-color: color-mix(in oklab, var(--color-black) 65%, transparent)
        }
    }

    .bg-black\/80 {
        background-color: color-mix(in srgb, #000 80%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/80 {
            background-color: color-mix(in oklab, var(--color-black) 80%, transparent)
        }
    }

    .bg-black\/85 {
        background-color: color-mix(in srgb, #000 85%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-black\/85 {
            background-color: color-mix(in oklab, var(--color-black) 85%, transparent)
        }
    }

    .bg-cta-dark {
        background-color: var(--color-cta-dark)
    }

    .bg-divider {
        background-color: var(--color-divider)
    }

    .bg-dynamic-color\/50 {
        background-color: color-mix(in srgb, #0D111E 50%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-dynamic-color\/50 {
            background-color: color-mix(in oklab, var(--color-dynamic-color) 50%, transparent)
        }
    }

    .bg-gray-50 {
        background-color: var(--color-gray-50)
    }

    .bg-gray1 {
        background-color: var(--color-gray1)
    }

    .bg-gray2 {
        background-color: var(--color-gray2)
    }

    .bg-gray3 {
        background-color: var(--color-gray3)
    }

    .bg-gray4 {
        background-color: var(--color-gray4)
    }

    .bg-gray5 {
        background-color: var(--color-gray5)
    }

    .bg-gray6 {
        background-color: var(--color-gray6)
    }

    .bg-gray7 {
        background-color: var(--color-gray7)
    }

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

    .bg-notify-blue {
        background-color: var(--color-notify-blue)
    }

    .bg-red-500 {
        background-color: var(--color-red-500)
    }

    .bg-red-500\/10 {
        background-color: color-mix(in srgb, oklch(63.7% .237 25.331) 10%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-red-500\/10 {
            background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent)
        }
    }

    .bg-surface {
        background-color: var(--color-surface)
    }

    .bg-surface-2 {
        background-color: var(--color-surface-2)
    }

    .bg-surface-3 {
        background-color: var(--color-surface-3)
    }

    .bg-surface-base {
        background-color: var(--color-surface-base)
    }

    .bg-surface-base\/30 {
        background-color: color-mix(in srgb, #0B0F1E 30%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-surface-base\/30 {
            background-color: color-mix(in oklab, var(--color-surface-base) 30%, transparent)
        }
    }

    .bg-surface-base\/40 {
        background-color: color-mix(in srgb, #0B0F1E 40%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-surface-base\/40 {
            background-color: color-mix(in oklab, var(--color-surface-base) 40%, transparent)
        }
    }

    .bg-surface-card {
        background-color: var(--color-surface-card)
    }

    .bg-surface-card\/45 {
        background-color: color-mix(in srgb, #202430 45%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-surface-card\/45 {
            background-color: color-mix(in oklab, var(--color-surface-card) 45%, transparent)
        }
    }

    .bg-surface-card\/70 {
        background-color: color-mix(in srgb, #202430 70%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-surface-card\/70 {
            background-color: color-mix(in oklab, var(--color-surface-card) 70%, transparent)
        }
    }

    .bg-surface-card\/75 {
        background-color: color-mix(in srgb, #202430 75%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-surface-card\/75 {
            background-color: color-mix(in oklab, var(--color-surface-card) 75%, transparent)
        }
    }

    .bg-surface-footer {
        background-color: var(--color-surface-footer)
    }

    .bg-text-dark {
        background-color: var(--color-text-dark)
    }

    .bg-text-dark\/20 {
        background-color: color-mix(in srgb, #fff 20%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-text-dark\/20 {
            background-color: color-mix(in oklab, var(--color-text-dark) 20%, transparent)
        }
    }

    .bg-theme-color {
        background-color: var(--color-theme-color)
    }

    .bg-transparent {
        background-color: transparent
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-white\/5 {
        background-color: color-mix(in srgb, #fff 5%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-white\/5 {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent)
        }
    }

    .bg-white\/10 {
        background-color: color-mix(in srgb, #fff 10%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-white\/10 {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent)
        }
    }

    .bg-white\/20 {
        background-color: color-mix(in srgb, #fff 20%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-white\/20 {
            background-color: color-mix(in oklab, var(--color-white) 20%, transparent)
        }
    }

    .bg-gradient-to-b {
        --tw-gradient-position: to bottom in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-l {
        --tw-gradient-position: to left in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-r {
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-t {
        --tw-gradient-position: to top in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-gradient-to-tr {
        --tw-gradient-position: to top right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .bg-\[linear-gradient\(to_right\,var\(--color-surface-base\)_0\%\,transparent_18\%\,transparent_82\%\,var\(--color-surface-base\)_100\%\)\] {
        background-image: linear-gradient(to right, var(--color-surface-base) 0%, transparent 18%, transparent 82%, var(--color-surface-base) 100%)
    }

    .bg-\[radial-gradient\(120\%_90\%_at_75\%_18\%\,color-mix\(in_oklab\,var\(--color-accent-purple\)_32\%\,transparent\)\,transparent_62\%\)\] {
        background-image: radial-gradient(120% 90% at 75% 18%, color-mix(in srgb, #C9A4FF 32%, transparent), transparent 62%)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .bg-\[radial-gradient\(120\%_90\%_at_75\%_18\%\,color-mix\(in_oklab\,var\(--color-accent-purple\)_32\%\,transparent\)\,transparent_62\%\)\] {
            background-image: radial-gradient(120% 90% at 75% 18%, color-mix(in oklab, var(--color-accent-purple) 32%, transparent), transparent 62%)
        }
    }

    .bg-none {
        background-image: none
    }

    .from-background-dark {
        --tw-gradient-from: var(--color-background-dark);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .from-background-dark\/90 {
        --tw-gradient-from: color-mix(in srgb, #0D111E 90%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    @supports (color: color-mix(in lab, red, red)) {
        .from-background-dark\/90 {
            --tw-gradient-from: color-mix(in oklab, var(--color-background-dark) 90%, transparent)
        }
    }

    .from-black\/85 {
        --tw-gradient-from: color-mix(in srgb, #000 85%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    @supports (color: color-mix(in lab, red, red)) {
        .from-black\/85 {
            --tw-gradient-from: color-mix(in oklab, var(--color-black) 85%, transparent)
        }
    }

    .from-surface-base\/75 {
        --tw-gradient-from: color-mix(in srgb, #0B0F1E 75%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    @supports (color: color-mix(in lab, red, red)) {
        .from-surface-base\/75 {
            --tw-gradient-from: color-mix(in oklab, var(--color-surface-base) 75%, transparent)
        }
    }

    .from-transparent {
        --tw-gradient-from: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .from-\[35\%\] {
        --tw-gradient-from-position: 35%
    }

    .via-background-dark\/45 {
        --tw-gradient-via: color-mix(in srgb, #0D111E 45%, transparent);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .via-background-dark\/45 {
            --tw-gradient-via: color-mix(in oklab, var(--color-background-dark) 45%, transparent)
        }
    }

    .via-background-dark\/70 {
        --tw-gradient-via: color-mix(in srgb, #0D111E 70%, transparent);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .via-background-dark\/70 {
            --tw-gradient-via: color-mix(in oklab, var(--color-background-dark) 70%, transparent)
        }
    }

    .via-background-dark\/80 {
        --tw-gradient-via: color-mix(in srgb, #0D111E 80%, transparent);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .via-background-dark\/80 {
            --tw-gradient-via: color-mix(in oklab, var(--color-background-dark) 80%, transparent)
        }
    }

    .via-black\/40 {
        --tw-gradient-via: color-mix(in srgb, #000 40%, transparent);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .via-black\/40 {
            --tw-gradient-via: color-mix(in oklab, var(--color-black) 40%, transparent)
        }
    }

    .via-surface-base\/30 {
        --tw-gradient-via: color-mix(in srgb, #0B0F1E 30%, transparent);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .via-surface-base\/30 {
            --tw-gradient-via: color-mix(in oklab, var(--color-surface-base) 30%, transparent)
        }
    }

    .to-\[\#151515\] {
        --tw-gradient-to: #151515;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .to-\[\#e7e7e7\] {
        --tw-gradient-to: #e7e7e7;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .to-accent-color {
        --tw-gradient-to: var(--color-accent-color);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .to-surface-base\/90 {
        --tw-gradient-to: color-mix(in srgb, #0B0F1E 90%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    @supports (color: color-mix(in lab, red, red)) {
        .to-surface-base\/90 {
            --tw-gradient-to: color-mix(in oklab, var(--color-surface-base) 90%, transparent)
        }
    }

    .to-transparent {
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .bg-cover {
        background-size: cover
    }

    .fill-\[\#BCBCBC\] {
        fill: #bcbcbc
    }

    .fill-accent-color {
        fill: var(--color-accent-color)
    }

    .fill-accent-purple {
        fill: var(--color-accent-purple)
    }

    .fill-accent-purple-text {
        fill: var(--color-accent-purple-text)
    }

    .fill-accent-text {
        fill: var(--color-accent-text)
    }

    .fill-current {
        fill: currentcolor
    }

    .fill-gray5 {
        fill: var(--color-gray5)
    }

    .fill-gray7 {
        fill: var(--color-gray7)
    }

    .fill-green-600 {
        fill: var(--color-green-600)
    }

    .fill-none {
        fill: none
    }

    .fill-notify-blue {
        fill: var(--color-notify-blue)
    }

    .fill-text-dark {
        fill: var(--color-text-dark)
    }

    .fill-theme-color {
        fill: var(--color-theme-color)
    }

    .fill-theme-text {
        fill: var(--color-theme-text)
    }

    .fill-transparent {
        fill: transparent
    }

    .fill-white {
        fill: var(--color-white)
    }

    .stroke-current {
        stroke: currentcolor
    }

    .stroke-text-dark {
        stroke: var(--color-text-dark)
    }

    .object-contain {
        object-fit: contain
    }

    .object-cover {
        object-fit: cover
    }

    .p-2 {
        padding: calc(var(--spacing) * 2)
    }

    .p-3 {
        padding: calc(var(--spacing) * 3)
    }

    .p-3\.5 {
        padding: calc(var(--spacing) * 3.5)
    }

    .p-4 {
        padding: calc(var(--spacing) * 4)
    }

    .p-5 {
        padding: calc(var(--spacing) * 5)
    }

    .p-6 {
        padding: calc(var(--spacing) * 6)
    }

    .p-8 {
        padding: calc(var(--spacing) * 8)
    }

    .p-12 {
        padding: calc(var(--spacing) * 12)
    }

    .p-\[\.7rem\] {
        padding: .7rem
    }

    .p-\[\.85rem\] {
        padding: .85rem
    }

    .p-\[2rem\] {
        padding: 2rem
    }

    .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-12 {
        padding-inline: calc(var(--spacing) * 12)
    }

    .px-\[\.7rem\] {
        padding-inline: .7rem
    }

    .px-\[1\.3rem\] {
        padding-inline: 1.3rem
    }

    .py-0\.5 {
        padding-block: calc(var(--spacing) * .5)
    }

    .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-6 {
        padding-block: calc(var(--spacing) * 6)
    }

    .py-10 {
        padding-block: calc(var(--spacing) * 10)
    }

    .py-16 {
        padding-block: calc(var(--spacing) * 16)
    }

    .py-20 {
        padding-block: calc(var(--spacing) * 20)
    }

    .py-24 {
        padding-block: calc(var(--spacing) * 24)
    }

    .py-\[\.1rem\] {
        padding-block: .1rem
    }

    .py-\[\.4rem\] {
        padding-block: .4rem
    }

    .py-\[\.6rem\] {
        padding-block: .6rem
    }

    .py-\[\.35rem\] {
        padding-block: .35rem
    }

    .py-\[\.45rem\] {
        padding-block: .45rem
    }

    .py-\[0\.3125rem\] {
        padding-block: .3125rem
    }

    .ps-1 {
        padding-inline-start: calc(var(--spacing) * 1)
    }

    .ps-1\.5 {
        padding-inline-start: calc(var(--spacing) * 1.5)
    }

    .ps-4 {
        padding-inline-start: calc(var(--spacing) * 4)
    }

    .ps-5 {
        padding-inline-start: calc(var(--spacing) * 5)
    }

    .ps-6 {
        padding-inline-start: calc(var(--spacing) * 6)
    }

    .pe-0\.5 {
        padding-inline-end: calc(var(--spacing) * .5)
    }

    .pe-1 {
        padding-inline-end: calc(var(--spacing) * 1)
    }

    .pe-1\.5 {
        padding-inline-end: calc(var(--spacing) * 1.5)
    }

    .pe-3 {
        padding-inline-end: calc(var(--spacing) * 3)
    }

    .pe-7 {
        padding-inline-end: calc(var(--spacing) * 7)
    }

    .pe-11 {
        padding-inline-end: calc(var(--spacing) * 11)
    }

    .pt-0\.5 {
        padding-top: calc(var(--spacing) * .5)
    }

    .pt-1 {
        padding-top: calc(var(--spacing) * 1)
    }

    .pt-2 {
        padding-top: calc(var(--spacing) * 2)
    }

    .pt-2\.5 {
        padding-top: calc(var(--spacing) * 2.5)
    }

    .pt-3 {
        padding-top: calc(var(--spacing) * 3)
    }

    .pt-4 {
        padding-top: calc(var(--spacing) * 4)
    }

    .pt-5 {
        padding-top: calc(var(--spacing) * 5)
    }

    .pt-6 {
        padding-top: calc(var(--spacing) * 6)
    }

    .pt-8 {
        padding-top: calc(var(--spacing) * 8)
    }

    .pt-10 {
        padding-top: calc(var(--spacing) * 10)
    }

    .pt-12 {
        padding-top: calc(var(--spacing) * 12)
    }

    .pt-28 {
        padding-top: calc(var(--spacing) * 28)
    }

    .pt-\[0\.1875rem\] {
        padding-top: .1875rem
    }

    .pr-2 {
        padding-right: calc(var(--spacing) * 2)
    }

    .pb-1 {
        padding-bottom: calc(var(--spacing) * 1)
    }

    .pb-2 {
        padding-bottom: calc(var(--spacing) * 2)
    }

    .pb-3 {
        padding-bottom: calc(var(--spacing) * 3)
    }

    .pb-4 {
        padding-bottom: calc(var(--spacing) * 4)
    }

    .pb-5 {
        padding-bottom: calc(var(--spacing) * 5)
    }

    .pb-6 {
        padding-bottom: calc(var(--spacing) * 6)
    }

    .pb-8 {
        padding-bottom: calc(var(--spacing) * 8)
    }

    .pb-10 {
        padding-bottom: calc(var(--spacing) * 10)
    }

    .pb-12 {
        padding-bottom: calc(var(--spacing) * 12)
    }

    .pb-\[\.35rem\] {
        padding-bottom: .35rem
    }

    .pb-\[0\.4375rem\] {
        padding-bottom: .4375rem
    }

    .pb-\[5px\] {
        padding-bottom: 5px
    }

    .pb-\[calc\(1\.5rem\+env\(safe-area-inset-bottom\)\)\] {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom))
    }

    .pb-\[env\(safe-area-inset-bottom\)\] {
        padding-bottom: env(safe-area-inset-bottom)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .text-right {
        text-align: right
    }

    .text-start {
        text-align: start
    }

    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height))
    }

    .text-3xl {
        font-size: var(--text-3xl);
        line-height: var(--tw-leading, var(--text-3xl--line-height))
    }

    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }

    .text-5xl {
        font-size: var(--text-5xl);
        line-height: var(--tw-leading, var(--text-5xl--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-\[9px\] {
        font-size: 9px !important
    }

    .text-\[\.8rem\] {
        font-size: .8rem
    }

    .text-\[0\.65rem\] {
        font-size: .65rem
    }

    .text-\[1\.2rem\] {
        font-size: 1.2rem
    }

    .text-\[2\.5rem\] {
        font-size: 2.5rem
    }

    .text-\[2\.25rem\] {
        font-size: 2.25rem
    }

    .text-\[10px\] {
        font-size: 10px
    }

    .text-\[11px\] {
        font-size: 11px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[13\.5px\] {
        font-size: 13.5px
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .text-\[15px\] {
        font-size: 15px
    }

    .text-\[18px\] {
        font-size: 18px
    }

    .text-\[20px\] {
        font-size: 20px
    }

    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }

    .leading-relaxed {
        --tw-leading: var(--leading-relaxed);
        line-height: var(--leading-relaxed)
    }

    .leading-snug {
        --tw-leading: var(--leading-snug);
        line-height: var(--leading-snug)
    }

    .leading-tight {
        --tw-leading: var(--leading-tight);
        line-height: var(--leading-tight)
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-light {
        --tw-font-weight: var(--font-weight-light);
        font-weight: var(--font-weight-light)
    }

    .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-\[0\.12em\] {
        --tw-tracking: .12em;
        letter-spacing: .12em
    }

    .tracking-\[0\.25em\] {
        --tw-tracking: .25em;
        letter-spacing: .25em
    }

    .tracking-wide {
        --tw-tracking: var(--tracking-wide);
        letter-spacing: var(--tracking-wide)
    }

    .tracking-wider {
        --tw-tracking: var(--tracking-wider);
        letter-spacing: var(--tracking-wider)
    }

    .text-balance {
        text-wrap: balance
    }

    .text-nowrap {
        text-wrap: nowrap
    }

    .text-pretty {
        text-wrap: pretty
    }

    .text-wrap {
        text-wrap: wrap
    }

    .break-all {
        word-break: break-all
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .\!text-accent-color {
        color: var(--color-accent-color) !important
    }

    .\!text-accent-purple {
        color: var(--color-accent-purple) !important
    }

    .\!text-accent-purple-text {
        color: var(--color-accent-purple-text) !important
    }

    .\!text-gray5 {
        color: var(--color-gray5) !important
    }

    .\!text-text-dark {
        color: var(--color-text-dark) !important
    }

    .text-\[\#1E439B\] {
        color: #1e439b
    }

    .text-\[\#9F9F9F\] {
        color: #9f9f9f
    }

    .text-\[\#70a4b8\] {
        color: #70a4b8
    }

    .text-\[\#A9CCD9\] {
        color: #a9ccd9
    }

    .text-\[\#AAAAAA\] {
        color: #aaa
    }

    .text-\[\#F8D649\] {
        color: #f8d649
    }

    .text-\[\#c69f00\] {
        color: #c69f00
    }

    .text-\[\#ffcd00\] {
        color: #ffcd00
    }

    .text-accent-color {
        color: var(--color-accent-color)
    }

    .text-accent-purple {
        color: var(--color-accent-purple)
    }

    .text-accent-purple-text {
        color: var(--color-accent-purple-text)
    }

    .text-accent-text {
        color: var(--color-accent-text)
    }

    .text-amber-400 {
        color: var(--color-amber-400)
    }

    .text-amber-500 {
        color: var(--color-amber-500)
    }

    .text-background-dark {
        color: var(--color-background-dark)
    }

    .text-black {
        color: var(--color-black)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-500 {
        color: var(--color-gray-500)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-gray-700 {
        color: var(--color-gray-700)
    }

    .text-gray-800 {
        color: var(--color-gray-800)
    }

    .text-gray-900 {
        color: var(--color-gray-900)
    }

    .text-gray1 {
        color: var(--color-gray1)
    }

    .text-gray5 {
        color: var(--color-gray5)
    }

    .text-gray7 {
        color: var(--color-gray7)
    }

    .text-green-600 {
        color: var(--color-green-600)
    }

    .text-green-700 {
        color: var(--color-green-700)
    }

    .text-nav-inactive {
        color: var(--color-nav-inactive)
    }

    .text-notify-blue {
        color: var(--color-notify-blue)
    }

    .text-orange-600 {
        color: var(--color-orange-600)
    }

    .text-red-300 {
        color: var(--color-red-300)
    }

    .text-red-400 {
        color: var(--color-red-400)
    }

    .text-red-500 {
        color: var(--color-red-500)
    }

    .text-red-600 {
        color: var(--color-red-600)
    }

    .text-tab-active {
        color: var(--color-tab-active)
    }

    .text-text-dark {
        color: var(--color-text-dark)
    }

    .text-text-dark\/60 {
        color: color-mix(in srgb, #fff 60%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .text-text-dark\/60 {
            color: color-mix(in oklab, var(--color-text-dark) 60%, transparent)
        }
    }

    .text-text-dark\/70 {
        color: color-mix(in srgb, #fff 70%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .text-text-dark\/70 {
            color: color-mix(in oklab, var(--color-text-dark) 70%, transparent)
        }
    }

    .text-text-dark\/80 {
        color: color-mix(in srgb, #fff 80%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .text-text-dark\/80 {
            color: color-mix(in oklab, var(--color-text-dark) 80%, transparent)
        }
    }

    .text-theme-color {
        color: var(--color-theme-color)
    }

    .text-theme-text {
        color: var(--color-theme-text)
    }

    .text-white {
        color: var(--color-white)
    }

    .text-white\/80 {
        color: color-mix(in srgb, #fff 80%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .text-white\/80 {
            color: color-mix(in oklab, var(--color-white) 80%, transparent)
        }
    }

    .lowercase {
        text-transform: lowercase
    }

    .uppercase {
        text-transform: uppercase
    }

    .tabular-nums {
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
    }

    .line-through {
        text-decoration-line: line-through
    }

    .underline {
        text-decoration-line: underline
    }

    .underline-offset-2 {
        text-underline-offset: 2px
    }

    .underline-offset-4 {
        text-underline-offset: 4px
    }

    .opacity-0 {
        opacity: 0%
    }

    .opacity-40 {
        opacity: 40%
    }

    .opacity-50 {
        opacity: 50%
    }

    .opacity-60 {
        opacity: 60%
    }

    .opacity-75 {
        opacity: 75%
    }

    .opacity-80 {
        opacity: 80%
    }

    .opacity-100 {
        opacity: 100%
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-2xl {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[inset_0_-24px_24px_-16px_rgba\(0\,0\,0\,0\.6\)\] {
        --tw-shadow: inset 0 -24px 24px -16px var(--tw-shadow-color, rgba(0, 0, 0, .6));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-lg {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .inset-shadow-sm {
        --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / .05));
        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-1 {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .outline-offset-\[-7px\] {
        outline-offset: -7px
    }

    .outline-\[\#1E439B\]\/75 {
        outline-color: color-mix(in oklab, #1E439B 75%, transparent)
    }

    .outline-\[\#B4B4B4\] {
        outline-color: #b4b4b4
    }

    .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, )
    }

    .blur-\[4\.5px\] {
        --tw-blur: blur(4.5px);
        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, )
    }

    .blur-\[8px\] {
        --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, )
    }

    .blur-md {
        --tw-blur: blur(var(--blur-md));
        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, )
    }

    .brightness-\[0\.45\] {
        --tw-brightness: brightness(.45);
        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, )
    }

    .grayscale {
        --tw-grayscale: grayscale(100%);
        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, )
    }

    .saturate-\[0\.9\] {
        --tw-saturate: saturate(.9);
        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-blur-2xl {
        --tw-backdrop-blur: blur(var(--blur-2xl));
        -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, )
    }

    .backdrop-blur-lg {
        --tw-backdrop-blur: blur(var(--blur-lg));
        -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, )
    }

    .backdrop-blur-md {
        --tw-backdrop-blur: blur(var(--blur-md));
        -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, )
    }

    .backdrop-blur-sm {
        --tw-backdrop-blur: blur(var(--blur-sm));
        -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, )
    }

    .backdrop-blur-xl {
        --tw-backdrop-blur: blur(var(--blur-xl));
        -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, )
    }

    .backdrop-saturate-150 {
        --tw-backdrop-saturate: saturate(150%);
        -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, )
    }

    .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, )
    }

    .transition {
        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, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .ease-in {
        --tw-ease: var(--ease-in);
        transition-timing-function: var(--ease-in)
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .outline-dashed {
        --tw-outline-style: dashed;
        outline-style: dashed
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    .\[-ms-overflow-style\:none\] {
        -ms-overflow-style: none
    }

    .\[scrollbar-width\:none\] {
        scrollbar-width: none
    }

    .not-last\:border-b:not(*:last-child) {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .not-last\:pb-4:not(*:last-child) {
        padding-bottom: calc(var(--spacing) * 4)
    }

    .group-focus-within\:pointer-events-auto:is(:where(.group):focus-within *) {
        pointer-events: auto
    }

    .group-focus-within\:translate-y-0:is(:where(.group):focus-within *) {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
        opacity: 100%
    }

    @media(hover:hover) {
        .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
            pointer-events: auto
        }
    }

    @media(hover:hover) {
        .group-hover\:pointer-events-none:is(:where(.group):hover *) {
            pointer-events: none
        }
    }

    @media(hover:hover) {
        .group-hover\:translate-y-0:is(:where(.group):hover *) {
            --tw-translate-y: calc(var(--spacing) * 0);
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }
    }

    @media(hover:hover) {
        .group-hover\:scale-\[1\.02\]:is(:where(.group):hover *) {
            scale: 1.02
        }
    }

    @media(hover:hover) {
        .group-hover\:border-accent-purple:is(:where(.group):hover *) {
            border-color: var(--color-accent-purple)
        }
    }

    @media(hover:hover) {
        .group-hover\:bg-accent-color:is(:where(.group):hover *) {
            background-color: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .group-hover\:bg-accent-purple:is(:where(.group):hover *) {
            background-color: var(--color-accent-purple)
        }
    }

    @media(hover:hover) {
        .group-hover\:fill-accent-color:is(:where(.group):hover *) {
            fill: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .group-hover\:fill-accent-text:is(:where(.group):hover *) {
            fill: var(--color-accent-text)
        }
    }

    @media(hover:hover) {
        .group-hover\:fill-text-dark:is(:where(.group):hover *) {
            fill: var(--color-text-dark)
        }
    }

    @media(hover:hover) {
        .group-hover\:text-accent-color:is(:where(.group):hover *) {
            color: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .group-hover\:text-accent-purple:is(:where(.group):hover *) {
            color: var(--color-accent-purple)
        }
    }

    @media(hover:hover) {
        .group-hover\:text-accent-purple-text:is(:where(.group):hover *) {
            color: var(--color-accent-purple-text)
        }
    }

    @media(hover:hover) {
        .group-hover\:opacity-0:is(:where(.group):hover *) {
            opacity: 0%
        }
    }

    @media(hover:hover) {
        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 100%
        }
    }

    .group-disabled\:fill-\[\#2d2a2c5c\]:is(:where(.group):disabled *) {
        fill: #2d2a2c5c
    }

    .group-disabled\:fill-\[\#211F20\]:is(:where(.group):disabled *) {
        fill: #211f20
    }

    .placeholder\:text-gray5::placeholder {
        color: var(--color-gray5)
    }

    .placeholder\:text-gray7::placeholder {
        color: var(--color-gray7)
    }

    .placeholder\:text-text-dark\/40::placeholder {
        color: color-mix(in srgb, #fff 40%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .placeholder\:text-text-dark\/40::placeholder {
            color: color-mix(in oklab, var(--color-text-dark) 40%, transparent)
        }
    }

    .before\:\!top-4:before {
        content: var(--tw-content);
        top: calc(var(--spacing) * 4) !important
    }

    .before\:\!border-transparent:before {
        content: var(--tw-content);
        border-color: transparent !important
    }

    .after\:\!bottom-\[-17px\]:after {
        content: var(--tw-content);
        bottom: -17px !important
    }

    .after\:\!left-4:after {
        content: var(--tw-content);
        left: calc(var(--spacing) * 4) !important
    }

    .after\:\!border-transparent:after {
        content: var(--tw-content);
        border-color: transparent !important
    }

    .only\:flex-none:only-child {
        flex: none
    }

    @media(hover:hover) {
        .hover\:border-accent-color:hover {
            border-color: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .hover\:border-accent-purple:hover {
            border-color: var(--color-accent-purple)
        }
    }

    @media(hover:hover) {
        .hover\:border-theme-color:hover {
            border-color: var(--color-theme-color)
        }
    }

    @media(hover:hover) {
        .hover\:border-theme-color\/50:hover {
            border-color: color-mix(in srgb, #B17BB5 50%, transparent)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .hover\:border-theme-color\/50:hover {
                border-color: color-mix(in oklab, var(--color-theme-color) 50%, transparent)
            }
        }
    }

    @media(hover:hover) {
        .hover\:bg-\[\#2b292a\]:hover {
            background-color: #2b292a
        }
    }

    @media(hover:hover) {
        .hover\:bg-\[\#7e7974\]:hover {
            background-color: #7e7974
        }
    }

    @media(hover:hover) {
        .hover\:bg-\[\#499768\]:hover {
            background-color: #499768
        }
    }

    @media(hover:hover) {
        .hover\:bg-\[\#bababa\]:hover {
            background-color: #bababa
        }
    }

    @media(hover:hover) {
        .hover\:bg-\[\#ff5c27\]:hover {
            background-color: #ff5c27
        }
    }

    @media(hover:hover) {
        .hover\:bg-accent-color:hover {
            background-color: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .hover\:bg-accent-color\/15:hover {
            background-color: color-mix(in srgb, #C9A4FF 15%, transparent)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .hover\:bg-accent-color\/15:hover {
                background-color: color-mix(in oklab, var(--color-accent-color) 15%, transparent)
            }
        }
    }

    @media(hover:hover) {
        .hover\:bg-accent-purple:hover {
            background-color: var(--color-accent-purple)
        }
    }

    @media(hover:hover) {
        .hover\:bg-accent-purple\/15:hover {
            background-color: color-mix(in srgb, #C9A4FF 15%, transparent)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .hover\:bg-accent-purple\/15:hover {
                background-color: color-mix(in oklab, var(--color-accent-purple) 15%, transparent)
            }
        }
    }

    @media(hover:hover) {
        .hover\:bg-gray3:hover {
            background-color: var(--color-gray3)
        }
    }

    @media(hover:hover) {
        .hover\:bg-notify-blue:hover {
            background-color: var(--color-notify-blue)
        }
    }

    @media(hover:hover) {
        .hover\:bg-surface-2:hover {
            background-color: var(--color-surface-2)
        }
    }

    @media(hover:hover) {
        .hover\:bg-surface-3:hover {
            background-color: var(--color-surface-3)
        }
    }

    @media(hover:hover) {
        .hover\:bg-theme-color\/10:hover {
            background-color: color-mix(in srgb, #B17BB5 10%, transparent)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .hover\:bg-theme-color\/10:hover {
                background-color: color-mix(in oklab, var(--color-theme-color) 10%, transparent)
            }
        }
    }

    @media(hover:hover) {
        .hover\:fill-accent-color:hover {
            fill: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .hover\:text-accent-color:hover {
            color: var(--color-accent-color)
        }
    }

    @media(hover:hover) {
        .hover\:text-accent-purple:hover {
            color: var(--color-accent-purple)
        }
    }

    @media(hover:hover) {
        .hover\:text-accent-purple-text:hover {
            color: var(--color-accent-purple-text)
        }
    }

    @media(hover:hover) {
        .hover\:text-accent-text:hover {
            color: var(--color-accent-text)
        }
    }

    @media(hover:hover) {
        .hover\:text-theme-color:hover {
            color: var(--color-theme-color)
        }
    }

    @media(hover:hover) {
        .hover\:text-white:hover {
            color: var(--color-white)
        }
    }

    @media(hover:hover) {
        .hover\:underline:hover {
            text-decoration-line: underline
        }
    }

    @media(hover:hover) {
        .hover\:opacity-80:hover {
            opacity: 80%
        }
    }

    @media(hover:hover) {
        .hover\:opacity-90:hover {
            opacity: 90%
        }
    }

    .focus\:border-accent-color:focus {
        border-color: var(--color-accent-color)
    }

    .focus\:border-accent-purple:focus {
        border-color: var(--color-accent-purple)
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:border-accent-purple:focus-visible {
        border-color: var(--color-accent-purple)
    }

    .focus-visible\:outline-none:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:border-\[\#2d2a2c5c\]:disabled {
        border-color: #2d2a2c5c
    }

    .disabled\:border-\[\#211F20\]:disabled {
        border-color: #211f20
    }

    .disabled\:border-gray-200:disabled {
        border-color: var(--color-gray-200)
    }

    .disabled\:border-gray7:disabled {
        border-color: var(--color-gray7)
    }

    .disabled\:bg-gray-200:disabled {
        background-color: var(--color-gray-200)
    }

    .disabled\:bg-gray7:disabled {
        background-color: var(--color-gray7)
    }

    .disabled\:bg-transparent:disabled {
        background-color: transparent
    }

    .disabled\:text-black:disabled {
        color: var(--color-black)
    }

    .disabled\:text-text-dark:disabled {
        color: var(--color-text-dark)
    }

    .disabled\:text-text-dark\/30:disabled {
        color: color-mix(in srgb, #fff 30%, transparent)
    }

    @supports (color: color-mix(in lab, red, red)) {
        .disabled\:text-text-dark\/30:disabled {
            color: color-mix(in oklab, var(--color-text-dark) 30%, transparent)
        }
    }

    .disabled\:no-underline:disabled {
        text-decoration-line: none
    }

    .disabled\:opacity-30:disabled {
        opacity: 30%
    }

    .disabled\:opacity-50:disabled {
        opacity: 50%
    }

    .disabled\:opacity-60:disabled {
        opacity: 60%
    }

    .disabled\:opacity-70:disabled {
        opacity: 70%
    }

    @media(hover:hover) {
        .disabled\:hover\:border-gray-200:disabled:hover {
            border-color: var(--color-gray-200)
        }
    }

    @media(hover:hover) {
        .disabled\:hover\:bg-gray-200:disabled:hover {
            background-color: var(--color-gray-200)
        }
    }

    @media(hover:hover) {
        .disabled\:hover\:bg-gray7:disabled:hover {
            background-color: var(--color-gray7)
        }
    }

    @media(hover:hover) {
        .disabled\:hover\:bg-surface:disabled:hover {
            background-color: var(--color-surface)
        }
    }

    @media(hover:hover) {
        .disabled\:hover\:text-text-dark:disabled:hover {
            color: var(--color-text-dark)
        }
    }

    @media not (min-width:1180px) {
        .max-\[1180px\]\:absolute {
            position: absolute
        }
    }

    @media not (min-width:1180px) {
        .max-\[1180px\]\:justify-center {
            justify-content: center
        }
    }

    @media not (min-width:900px) {
        .max-\[900px\]\:-left-12 {
            left: calc(var(--spacing) * -12)
        }
    }

    @media not (min-width:900px) {
        .max-\[900px\]\:max-w-\[65\%\] {
            max-width: 65%
        }
    }

    @media not (min-width:800px) {
        .max-\[800px\]\:p-4 {
            padding: calc(var(--spacing) * 4)
        }
    }

    @media not (min-width:770px) {
        .max-\[770px\]\:flex-col {
            flex-direction: column
        }
    }

    @media not (min-width:770px) {
        .max-\[770px\]\:items-start {
            align-items: flex-start
        }
    }

    @media not (min-width:770px) {
        .max-\[770px\]\:gap-3 {
            gap: calc(var(--spacing) * 3)
        }
    }

    @media not (min-width:640px) {
        .max-\[640px\]\:h-\[calc\(100vh-4rem\)\] {
            height: calc(100vh - 4rem)
        }
    }

    @media not (min-width:640px) {
        .max-\[640px\]\:h-full {
            height: 100%
        }
    }

    @media not (min-width:640px) {
        .max-\[640px\]\:text-wrap {
            text-wrap: wrap
        }
    }

    @media not (min-width:500px) {
        .max-\[500px\]\:w-\[200px\] {
            width: 200px
        }
    }

    @media not (min-width:390px) {
        .max-\[390px\]\:w-\[120px\] {
            width: 120px
        }
    }

    @media not (min-width:48rem) {
        .max-md\:hidden {
            display: none
        }
    }

    @media not (min-width:48rem) {
        .max-md\:w-full {
            width: 100%
        }
    }

    @media not (min-width:48rem) {
        .max-md\:max-w-full {
            max-width: 100%
        }
    }

    @media not (min-width:48rem) {
        .max-md\:items-center {
            align-items: center
        }
    }

    @media not (min-width:48rem) {
        .max-md\:border-0 {
            border-style: var(--tw-border-style);
            border-width: 0px
        }
    }

    @media not (min-width:48rem) {
        .max-md\:border-y-4 {
            border-block-style: var(--tw-border-style);
            border-block-width: 4px
        }
    }

    @media not (min-width:48rem) {
        .max-md\:border-tab-active {
            border-color: var(--color-tab-active)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:bg-surface-3 {
            background-color: var(--color-surface-3)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:bg-white {
            background-color: var(--color-white)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:p-2 {
            padding: calc(var(--spacing) * 2)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:px-4 {
            padding-inline: calc(var(--spacing) * 4)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:pt-6 {
            padding-top: calc(var(--spacing) * 6)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:pb-4 {
            padding-bottom: calc(var(--spacing) * 4)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height))
        }
    }

    @media not (min-width:48rem) {
        .max-md\:font-semibold {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:text-gray3 {
            color: var(--color-gray3)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:text-surface-base {
            color: var(--color-surface-base)
        }
    }

    @media not (min-width:48rem) {
        .max-md\:underline {
            text-decoration-line: underline
        }
    }

    @media not (min-width:48rem) {
        .max-md\:underline-offset-2 {
            text-underline-offset: 2px
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:fixed {
            position: fixed
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:order-1 {
            order: 1
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:order-2 {
            order: 2
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:order-3 {
            order: 3
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:mb-20 {
            margin-bottom: calc(var(--spacing) * 20)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:line-clamp-3 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:hidden {
            display: none
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:max-h-\[4\.3rem\] {
            max-height: 4.3rem
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:justify-between {
            justify-content: space-between
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:overflow-hidden {
            overflow: hidden
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:bg-gray1 {
            background-color: var(--color-gray1)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:bg-surface-card {
            background-color: var(--color-surface-card)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:bg-text-dark\/20 {
            background-color: color-mix(in srgb, #fff 20%, transparent)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .max-sm\:bg-text-dark\/20 {
                background-color: color-mix(in oklab, var(--color-text-dark) 20%, transparent)
            }
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:p-4 {
            padding: calc(var(--spacing) * 4)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:p-5 {
            padding: calc(var(--spacing) * 5)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:px-6 {
            padding-inline: calc(var(--spacing) * 6)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:pt-2 {
            padding-top: calc(var(--spacing) * 2)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:pb-5 {
            padding-bottom: calc(var(--spacing) * 5)
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:pb-\[calc\(1\.25rem\+env\(safe-area-inset-bottom\)\)\] {
            padding-bottom: calc(1.25rem + env(safe-area-inset-bottom))
        }
    }

    @media not (min-width:40rem) {
        .max-sm\:backdrop-blur-md {
            --tw-backdrop-blur: blur(var(--blur-md));
            -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, )
        }
    }

    @media not (min-width:40rem) {
        .max-sm\: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, )
        }
    }

    @media(min-width:350px) {
        .min-\[350px\]\:h-\[276px\] {
            height: 276px
        }
    }

    @media(min-width:350px) {
        .min-\[350px\]\:h-\[284px\] {
            height: 284px
        }
    }

    @media(min-width:350px) {
        .min-\[350px\]\:w-\[276px\] {
            width: 276px
        }
    }

    @media(min-width:450px) {
        .min-\[450px\]\:max-w-72 {
            max-width: calc(var(--spacing) * 72)
        }
    }

    @media(min-width:450px) {
        .min-\[450px\]\:max-w-\[276px\] {
            max-width: 276px
        }
    }

    @media(min-width:450px) {
        .min-\[450px\]\:px-10 {
            padding-inline: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:470px) {
        .min-\[470px\]\:flex-row {
            flex-direction: row
        }
    }

    @media(min-width:500px) {
        .min-\[500px\]\:grid {
            display: grid
        }
    }

    @media(min-width:500px) {
        .min-\[500px\]\:w-\[34rem\] {
            width: 34rem
        }
    }

    @media(min-width:700px) {
        .min-\[700px\]\:max-w-\[670px\] {
            max-width: 670px
        }
    }

    @media(min-width:700px) {
        .min-\[700px\]\:max-w-\[710px\] {
            max-width: 710px
        }
    }

    @media(min-width:800px) {
        .min-\[800px\]\:w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
            width: min(1100px, calc(100% - 3rem))
        }
    }

    @media(min-width:900px) {
        .min-\[900px\]\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media(min-width:900px) {
        .min-\[900px\]\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media(min-width:1180px) {
        .min-\[1180px\]\:w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
            width: min(1100px, calc(100% - 3rem))
        }
    }

    @media(min-width:40rem) {
        .sm\:absolute {
            position: absolute
        }
    }

    @media(min-width:40rem) {
        .sm\:relative {
            position: relative
        }
    }

    @media(min-width:40rem) {
        .sm\:sticky {
            position: sticky
        }
    }

    @media(min-width:40rem) {
        .sm\:inset-x-auto {
            inset-inline: auto
        }
    }

    @media(min-width:40rem) {
        .sm\:\!top-\[40px\] {
            top: 40px !important
        }
    }

    @media(min-width:40rem) {
        .sm\:top-1\/2 {
            top: 50%
        }
    }

    @media(min-width:40rem) {
        .sm\:top-8 {
            top: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:top-20 {
            top: calc(var(--spacing) * 20)
        }
    }

    @media(min-width:40rem) {
        .sm\:top-24 {
            top: calc(var(--spacing) * 24)
        }
    }

    @media(min-width:40rem) {
        .sm\:bottom-6 {
            bottom: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:bottom-auto {
            bottom: auto
        }
    }

    @media(min-width:40rem) {
        .sm\:left-1\/2 {
            left: 50%
        }
    }

    @media(min-width:40rem) {
        .sm\:z-10 {
            z-index: 10
        }
    }

    @media(min-width:40rem) {
        .sm\:order-1 {
            order: 1
        }
    }

    @media(min-width:40rem) {
        .sm\:col-span-5 {
            grid-column: span 5 / span 5
        }
    }

    @media(min-width:40rem) {
        .sm\:col-span-7 {
            grid-column: span 7 / span 7
        }
    }

    @media(min-width:40rem) {
        .sm\:col-start-1 {
            grid-column-start: 1
        }
    }

    @media(min-width:40rem) {
        .sm\:col-start-2 {
            grid-column-start: 2
        }
    }

    @media(min-width:40rem) {
        .sm\:col-start-3 {
            grid-column-start: 3
        }
    }

    @media(min-width:40rem) {
        .sm\:row-start-1 {
            grid-row-start: 1
        }
    }

    @media(min-width:40rem) {
        .sm\:mx-0 {
            margin-inline: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:mx-auto {
            margin-inline: auto
        }
    }

    @media(min-width:40rem) {
        .sm\:-mt-0\.5 {
            margin-top: calc(var(--spacing) * -.5)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-2 {
            margin-top: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-4 {
            margin-top: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-6 {
            margin-top: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-7 {
            margin-top: calc(var(--spacing) * 7)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-8 {
            margin-top: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-10 {
            margin-top: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-12 {
            margin-top: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-14 {
            margin-top: calc(var(--spacing) * 14)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-16 {
            margin-top: calc(var(--spacing) * 16)
        }
    }

    @media(min-width:40rem) {
        .sm\:mt-\[-\.7rem\] {
            margin-top: -.7rem
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-0 {
            margin-bottom: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-4 {
            margin-bottom: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-5 {
            margin-bottom: calc(var(--spacing) * 5)
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-6 {
            margin-bottom: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-8 {
            margin-bottom: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-10 {
            margin-bottom: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-\[4\.5rem\] {
            margin-bottom: 4.5rem
        }
    }

    @media(min-width:40rem) {
        .sm\:mb-\[6rem\] {
            margin-bottom: 6rem
        }
    }

    @media(min-width:40rem) {
        .sm\:ml-0 {
            margin-left: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:block {
            display: block
        }
    }

    @media(min-width:40rem) {
        .sm\:flex {
            display: flex
        }
    }

    @media(min-width:40rem) {
        .sm\:grid {
            display: grid
        }
    }

    @media(min-width:40rem) {
        .sm\:hidden {
            display: none
        }
    }

    @media(min-width:40rem) {
        .sm\:inline-block {
            display: inline-block
        }
    }

    @media(min-width:40rem) {
        .sm\:inline-flex {
            display: inline-flex
        }
    }

    @media(min-width:40rem) {
        .sm\:aspect-\[16\/9\] {
            aspect-ratio: 16/9
        }
    }

    @media(min-width:40rem) {
        .sm\:aspect-square {
            aspect-ratio: 1 / 1
        }
    }

    @media(min-width:40rem) {
        .sm\:h-1\.5 {
            height: calc(var(--spacing) * 1.5)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-4 {
            height: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-5 {
            height: calc(var(--spacing) * 5)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-6 {
            height: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-9 {
            height: calc(var(--spacing) * 9)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-12 {
            height: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-14 {
            height: calc(var(--spacing) * 14)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-20 {
            height: calc(var(--spacing) * 20)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-40 {
            height: calc(var(--spacing) * 40)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[\.6rem\] {
            height: .6rem
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[1\.3rem\] {
            height: 1.3rem
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[5px\] {
            height: 5px
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[15rem\] {
            height: 15rem
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[30rem\] {
            height: 30rem
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[55px\] {
            height: 55px
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[360px\] {
            height: 360px
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[380px\] {
            height: 380px
        }
    }

    @media(min-width:40rem) {
        .sm\:h-\[calc\(100dvh-10rem\)\] {
            height: calc(100dvh - 10rem)
        }
    }

    @media(min-width:40rem) {
        .sm\:h-screen {
            height: 100vh
        }
    }

    @media(min-width:40rem) {
        .sm\:max-h-\[324px\] {
            max-height: 324px
        }
    }

    @media(min-width:40rem) {
        .sm\:min-h-0 {
            min-height: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:min-h-\[44rem\] {
            min-height: 44rem
        }
    }

    @media(min-width:40rem) {
        .sm\:\!w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
            width: min(1100px, calc(100% - 3rem)) !important
        }
    }

    @media(min-width:40rem) {
        .sm\:w-5 {
            width: calc(var(--spacing) * 5)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-6 {
            width: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-9 {
            width: calc(var(--spacing) * 9)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-12 {
            width: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-20 {
            width: calc(var(--spacing) * 20)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-24 {
            width: calc(var(--spacing) * 24)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-28 {
            width: calc(var(--spacing) * 28)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-32 {
            width: calc(var(--spacing) * 32)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-64 {
            width: calc(var(--spacing) * 64)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-80 {
            width: calc(var(--spacing) * 80)
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[\.6rem\] {
            width: .6rem
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[1\.2rem\] {
            width: 1.2rem
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[15rem\] {
            width: 15rem
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[22rem\] {
            width: 22rem
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[28rem\] {
            width: 28rem
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[55px\] {
            width: 55px
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[84\%\] {
            width: 84%
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[90\%\] {
            width: 90%
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[160px\] {
            width: 160px
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[230px\] {
            width: 230px
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[300px\] {
            width: 300px
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[400px\] {
            width: 400px
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[420px\] {
            width: 420px
        }
    }

    @media(min-width:40rem) {
        .sm\:w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
            width: min(1100px, calc(100% - 3rem))
        }
    }

    @media(min-width:40rem) {
        .sm\:w-auto {
            width: auto
        }
    }

    @media(min-width:40rem) {
        .sm\:w-fit {
            width: fit-content
        }
    }

    @media(min-width:40rem) {
        .sm\:w-full {
            width: 100%
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-6 {
            max-width: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-12 {
            max-width: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[15rem\] {
            max-width: 15rem
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[17rem\] {
            max-width: 17rem
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[24rem\] {
            max-width: 24rem
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[25rem\] {
            max-width: 25rem
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[50\%\] {
            max-width: 50%
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[70\%\] {
            max-width: 70%
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[85vw\] {
            max-width: 85vw
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-\[92vw\] {
            max-width: 92vw
        }
    }

    @media(min-width:40rem) {
        .sm\:max-w-full {
            max-width: 100%
        }
    }

    @media(min-width:40rem) {
        .sm\:min-w-0 {
            min-width: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:min-w-20 {
            min-width: calc(var(--spacing) * 20)
        }
    }

    @media(min-width:40rem) {
        .sm\:min-w-\[15rem\] {
            min-width: 15rem
        }
    }

    @media(min-width:40rem) {
        .sm\:shrink {
            flex-shrink: 1
        }
    }

    @media(min-width:40rem) {
        .sm\:-translate-x-1\/2 {
            --tw-translate-x: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }
    }

    @media(min-width:40rem) {
        .sm\:-translate-y-1\/2 {
            --tw-translate-y: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }
    }

    @media(min-width:40rem) {
        .sm\:scroll-ps-0 {
            scroll-padding-inline-start: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media(min-width:40rem) {
        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    @media(min-width:40rem) {
        .sm\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media(min-width:40rem) {
        .sm\:grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr))
        }
    }

    @media(min-width:40rem) {
        .sm\:grid-cols-\[1fr_auto_1fr\] {
            grid-template-columns: 1fr auto 1fr
        }
    }

    @media(min-width:40rem) {
        .sm\:flex-row {
            flex-direction: row
        }
    }

    @media(min-width:40rem) {
        .sm\:items-center {
            align-items: center
        }
    }

    @media(min-width:40rem) {
        .sm\:items-start {
            align-items: flex-start
        }
    }

    @media(min-width:40rem) {
        .sm\:justify-between {
            justify-content: space-between
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-1 {
            gap: calc(var(--spacing) * 1)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-2 {
            gap: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-3 {
            gap: calc(var(--spacing) * 3)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-4 {
            gap: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-5 {
            gap: calc(var(--spacing) * 5)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-6 {
            gap: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-7 {
            gap: calc(var(--spacing) * 7)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-8 {
            gap: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:gap-10 {
            gap: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:40rem) {
        .sm\:self-start {
            align-self: flex-start
        }
    }

    @media(min-width:40rem) {
        .sm\:justify-self-center {
            justify-self: center
        }
    }

    @media(min-width:40rem) {
        .sm\:justify-self-end {
            justify-self: flex-end
        }
    }

    @media(min-width:40rem) {
        .sm\:justify-self-start {
            justify-self: flex-start
        }
    }

    @media(min-width:40rem) {
        .sm\:overflow-visible {
            overflow: visible
        }
    }

    @media(min-width:40rem) {
        .sm\:rounded-2xl {
            border-radius: var(--radius-2xl)
        }
    }

    @media(min-width:40rem) {
        .sm\:rounded-md {
            border-radius: var(--radius-md)
        }
    }

    @media(min-width:40rem) {
        .sm\:rounded-none {
            border-radius: 0
        }
    }

    @media(min-width:40rem) {
        .sm\:rounded-xl {
            border-radius: var(--radius-xl)
        }
    }

    @media(min-width:40rem) {
        .sm\:border {
            border-style: var(--tw-border-style);
            border-width: 1px
        }
    }

    @media(min-width:40rem) {
        .sm\:border-divider {
            border-color: var(--color-divider)
        }
    }

    @media(min-width:40rem) {
        .sm\:\!bg-gray1 {
            background-color: var(--color-gray1) !important
        }
    }

    @media(min-width:40rem) {
        .sm\:bg-background-dark {
            background-color: var(--color-background-dark)
        }
    }

    @media(min-width:40rem) {
        .sm\:bg-gray1 {
            background-color: var(--color-gray1)
        }
    }

    @media(min-width:40rem) {
        .sm\:bg-gray6 {
            background-color: var(--color-gray6)
        }
    }

    @media(min-width:40rem) {
        .sm\:bg-surface-card {
            background-color: var(--color-surface-card)
        }
    }

    @media(min-width:40rem) {
        .sm\:bg-surface-footer {
            background-color: var(--color-surface-footer)
        }
    }

    @media(min-width:40rem) {
        .sm\:bg-text-dark\/10 {
            background-color: color-mix(in srgb, #fff 10%, transparent)
        }

        @supports (color: color-mix(in lab, red, red)) {
            .sm\:bg-text-dark\/10 {
                background-color: color-mix(in oklab, var(--color-text-dark) 10%, transparent)
            }
        }
    }

    @media(min-width:40rem) {
        .sm\:p-0 {
            padding: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:p-4 {
            padding: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:p-6 {
            padding: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:p-7 {
            padding: calc(var(--spacing) * 7)
        }
    }

    @media(min-width:40rem) {
        .sm\:p-8 {
            padding: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-0 {
            padding-inline: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-3 {
            padding-inline: calc(var(--spacing) * 3)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-3\.5 {
            padding-inline: calc(var(--spacing) * 3.5)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-4 {
            padding-inline: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-5 {
            padding-inline: calc(var(--spacing) * 5)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-6 {
            padding-inline: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-8 {
            padding-inline: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:px-12 {
            padding-inline: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-1\.5 {
            padding-block: calc(var(--spacing) * 1.5)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-2\.5 {
            padding-block: calc(var(--spacing) * 2.5)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-3 {
            padding-block: calc(var(--spacing) * 3)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-4 {
            padding-block: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-8 {
            padding-block: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-10 {
            padding-block: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:40rem) {
        .sm\:py-\[\.5rem\] {
            padding-block: .5rem
        }
    }

    @media(min-width:40rem) {
        .sm\:pt-2 {
            padding-top: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:40rem) {
        .sm\:pt-3 {
            padding-top: calc(var(--spacing) * 3)
        }
    }

    @media(min-width:40rem) {
        .sm\:pt-5 {
            padding-top: calc(var(--spacing) * 5)
        }
    }

    @media(min-width:40rem) {
        .sm\:pt-8 {
            padding-top: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:pt-16 {
            padding-top: calc(var(--spacing) * 16)
        }
    }

    @media(min-width:40rem) {
        .sm\:pb-0 {
            padding-bottom: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:40rem) {
        .sm\:pb-4 {
            padding-bottom: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:40rem) {
        .sm\:text-start {
            text-align: start
        }
    }

    @media(min-width:40rem) {
        .sm\:text-2xl {
            font-size: var(--text-2xl);
            line-height: var(--tw-leading, var(--text-2xl--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-4xl {
            font-size: var(--text-4xl);
            line-height: var(--tw-leading, var(--text-4xl--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-sm {
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-xl {
            font-size: var(--text-xl);
            line-height: var(--tw-leading, var(--text-xl--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-xs {
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height))
        }
    }

    @media(min-width:40rem) {
        .sm\:text-\[1\.35rem\] {
            font-size: 1.35rem
        }
    }

    @media(min-width:40rem) {
        .sm\:text-\[2\.75rem\] {
            font-size: 2.75rem
        }
    }

    @media(min-width:40rem) {
        .sm\:font-medium {
            --tw-font-weight: var(--font-weight-medium);
            font-weight: var(--font-weight-medium)
        }
    }

    @media(min-width:40rem) {
        .sm\:font-semibold {
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold)
        }
    }

    @media(min-width:40rem) {
        .sm\:shadow-2xl {
            --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }
    }

    @media(min-width:40rem) {
        .sm\:backdrop-blur-sm {
            --tw-backdrop-blur: blur(var(--blur-sm));
            -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, )
        }
    }

    @media(min-width:40rem) {
        .sm\: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, )
        }
    }

    @media(min-width:40rem) {
        .sm\:not-last\:pb-6:not(*:last-child) {
            padding-bottom: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:48rem) {
        .md\:top-\[7\.80rem\] {
            top: 7.8rem
        }
    }

    @media(min-width:48rem) {
        .md\:mx-auto {
            margin-inline: auto
        }
    }

    @media(min-width:48rem) {
        .md\:my-4 {
            margin-block: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:48rem) {
        .md\:my-8 {
            margin-block: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:48rem) {
        .md\:block {
            display: block
        }
    }

    @media(min-width:48rem) {
        .md\:flex {
            display: flex
        }
    }

    @media(min-width:48rem) {
        .md\:hidden {
            display: none
        }
    }

    @media(min-width:48rem) {
        .md\:inline-flex {
            display: inline-flex
        }
    }

    @media(min-width:48rem) {
        .md\:h-\[15rem\] {
            height: 15rem
        }
    }

    @media(min-width:48rem) {
        .md\:h-full {
            height: 100%
        }
    }

    @media(min-width:48rem) {
        .md\:w-\[15rem\] {
            width: 15rem
        }
    }

    @media(min-width:48rem) {
        .md\:w-\[330px\] {
            width: 330px
        }
    }

    @media(min-width:48rem) {
        .md\:w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
            width: min(1100px, calc(100% - 3rem))
        }
    }

    @media(min-width:48rem) {
        .md\:w-full {
            width: 100%
        }
    }

    @media(min-width:48rem) {
        .md\:max-w-\[430px\] {
            max-width: 430px
        }
    }

    @media(min-width:48rem) {
        .md\:min-w-0 {
            min-width: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:48rem) {
        .md\:flex-1 {
            flex: 1
        }
    }

    @media(min-width:48rem) {
        .md\:flex-none {
            flex: none
        }
    }

    @media(min-width:48rem) {
        .md\:shrink-0 {
            flex-shrink: 0
        }
    }

    @media(min-width:48rem) {
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }
    }

    @media(min-width:48rem) {
        .md\:flex-row {
            flex-direction: row
        }
    }

    @media(min-width:48rem) {
        .md\:items-end {
            align-items: flex-end
        }
    }

    @media(min-width:48rem) {
        .md\:items-start {
            align-items: flex-start
        }
    }

    @media(min-width:48rem) {
        .md\:gap-2 {
            gap: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:48rem) {
        .md\:gap-3 {
            gap: calc(var(--spacing) * 3)
        }
    }

    @media(min-width:48rem) {
        .md\:gap-4 {
            gap: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:48rem) {
        .md\:gap-6 {
            gap: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:48rem) {
        .md\:gap-12 {
            gap: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:48rem) {
        .md\:rounded-2xl {
            border-radius: var(--radius-2xl)
        }
    }

    @media(min-width:48rem) {
        .md\:rounded-md {
            border-radius: var(--radius-md)
        }
    }

    @media(min-width:48rem) {
        .md\:rounded-xl {
            border-radius: var(--radius-xl)
        }
    }

    @media(min-width:48rem) {
        .md\:border {
            border-style: var(--tw-border-style);
            border-width: 1px
        }
    }

    @media(min-width:48rem) {
        .md\:border-divider {
            border-color: var(--color-divider)
        }
    }

    @media(min-width:48rem) {
        .md\:bg-background-dark {
            background-color: var(--color-background-dark)
        }
    }

    @media(min-width:48rem) {
        .md\:bg-surface-card {
            background-color: var(--color-surface-card)
        }
    }

    @media(min-width:48rem) {
        .md\:p-0 {
            padding: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:48rem) {
        .md\:p-4 {
            padding: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:48rem) {
        .md\:p-6 {
            padding: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:48rem) {
        .md\:px-0 {
            padding-inline: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:48rem) {
        .md\:px-12 {
            padding-inline: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:48rem) {
        .md\:py-6 {
            padding-block: calc(var(--spacing) * 6)
        }
    }

    @media(min-width:48rem) {
        .md\:py-8 {
            padding-block: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:48rem) {
        .md\:pt-0 {
            padding-top: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:48rem) {
        .md\:pb-8 {
            padding-bottom: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:48rem) {
        @media(hover:hover) {
            .md\:hover\:text-accent-color:hover {
                color: var(--color-accent-color)
            }
        }
    }

    @media(min-width:64rem) {
        .lg\:sticky {
            position: sticky
        }
    }

    @media(min-width:64rem) {
        .lg\:top-24 {
            top: calc(var(--spacing) * 24)
        }
    }

    @media(min-width:64rem) {
        .lg\:order-1 {
            order: 1
        }
    }

    @media(min-width:64rem) {
        .lg\:col-start-1 {
            grid-column-start: 1
        }
    }

    @media(min-width:64rem) {
        .lg\:col-start-2 {
            grid-column-start: 2
        }
    }

    @media(min-width:64rem) {
        .lg\:row-start-1 {
            grid-row-start: 1
        }
    }

    @media(min-width:64rem) {
        .lg\:mx-auto {
            margin-inline: auto
        }
    }

    @media(min-width:64rem) {
        .lg\:mt-10 {
            margin-top: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:64rem) {
        .lg\:block {
            display: block
        }
    }

    @media(min-width:64rem) {
        .lg\:flex {
            display: flex
        }
    }

    @media(min-width:64rem) {
        .lg\:hidden {
            display: none
        }
    }

    @media(min-width:64rem) {
        .lg\:aspect-auto {
            aspect-ratio: auto
        }
    }

    @media(min-width:64rem) {
        .lg\:h-\[min\(27vw\,619px\)\] {
            height: min(27vw, 619px)
        }
    }

    @media(min-width:64rem) {
        .lg\:w-72 {
            width: calc(var(--spacing) * 72)
        }
    }

    @media(min-width:64rem) {
        .lg\:w-\[25rem\] {
            width: 25rem
        }
    }

    @media(min-width:64rem) {
        .lg\:w-\[80\%\] {
            width: 80%
        }
    }

    @media(min-width:64rem) {
        .lg\:w-\[270px\] {
            width: 270px
        }
    }

    @media(min-width:64rem) {
        .lg\:w-\[min\(1100px\,calc\(100\%-3rem\)\)\] {
            width: min(1100px, calc(100% - 3rem))
        }
    }

    @media(min-width:64rem) {
        .lg\:w-auto {
            width: auto
        }
    }

    @media(min-width:64rem) {
        .lg\:max-w-\[1100px\] {
            max-width: 1100px
        }
    }

    @media(min-width:64rem) {
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }
    }

    @media(min-width:64rem) {
        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media(min-width:64rem) {
        .lg\:grid-cols-\[minmax\(0\,28rem\)_minmax\(0\,1fr\)\] {
            grid-template-columns: minmax(0, 28rem) minmax(0, 1fr)
        }
    }

    @media(min-width:64rem) {
        .lg\:flex-col {
            flex-direction: column
        }
    }

    @media(min-width:64rem) {
        .lg\:flex-row {
            flex-direction: row
        }
    }

    @media(min-width:64rem) {
        .lg\:items-end {
            align-items: flex-end
        }
    }

    @media(min-width:64rem) {
        .lg\:items-start {
            align-items: flex-start
        }
    }

    @media(min-width:64rem) {
        .lg\:justify-between {
            justify-content: space-between
        }
    }

    @media(min-width:64rem) {
        .lg\:gap-4 {
            gap: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:64rem) {
        .lg\:gap-8 {
            gap: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:64rem) {
        .lg\:gap-10 {
            gap: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:64rem) {
        .lg\:gap-x-12 {
            column-gap: calc(var(--spacing) * 12)
        }
    }

    @media(min-width:80rem) {
        .xl\:sticky {
            position: sticky
        }
    }

    @media(min-width:80rem) {
        .xl\:top-36 {
            top: calc(var(--spacing) * 36)
        }
    }

    @media(min-width:80rem) {
        .xl\:mb-0 {
            margin-bottom: calc(var(--spacing) * 0)
        }
    }

    @media(min-width:80rem) {
        .xl\:flex {
            display: flex
        }
    }

    @media(min-width:80rem) {
        .xl\:hidden {
            display: none
        }
    }

    @media(min-width:80rem) {
        .xl\:inline-block {
            display: inline-block
        }
    }

    @media(min-width:80rem) {
        .xl\:h-3\.5 {
            height: calc(var(--spacing) * 3.5)
        }
    }

    @media(min-width:80rem) {
        .xl\:h-auto {
            height: auto
        }
    }

    @media(min-width:80rem) {
        .xl\:\!w-\[715px\] {
            width: 715px !important
        }
    }

    @media(min-width:80rem) {
        .xl\:w-\[400px\] {
            width: 400px
        }
    }

    @media(min-width:80rem) {
        .xl\:w-auto {
            width: auto
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-1\/2 {
            max-width: 50%
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[21rem\] {
            max-width: 21rem
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[35\%\] {
            max-width: 35%
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[58\.5\%\] {
            max-width: 58.5%
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[60\%\] {
            max-width: 60%
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[65\%\] {
            max-width: 65%
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[500px\] {
            max-width: 500px
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[900px\] {
            max-width: 900px
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-\[940px\] {
            max-width: 940px
        }
    }

    @media(min-width:80rem) {
        .xl\:max-w-full {
            max-width: 100%
        }
    }

    @media(min-width:80rem) {
        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }

    @media(min-width:80rem) {
        .xl\:flex-row {
            flex-direction: row
        }
    }

    @media(min-width:80rem) {
        .xl\:items-center {
            align-items: center
        }
    }

    @media(min-width:80rem) {
        .xl\:items-start {
            align-items: flex-start
        }
    }

    @media(min-width:80rem) {
        .xl\:justify-between {
            justify-content: space-between
        }
    }

    @media(min-width:80rem) {
        .xl\:gap-2 {
            gap: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:80rem) {
        .xl\:gap-8 {
            gap: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:80rem) {
        .xl\:justify-self-end {
            justify-self: flex-end
        }
    }

    @media(min-width:80rem) {
        .xl\:border-none {
            --tw-border-style: none;
            border-style: none
        }
    }

    @media(min-width:80rem) {
        .xl\:bg-transparent {
            background-color: transparent
        }
    }

    @media(min-width:80rem) {
        .xl\:py-3 {
            padding-block: calc(var(--spacing) * 3)
        }
    }

    @media(min-width:80rem) {
        .xl\:text-3xl {
            font-size: var(--text-3xl);
            line-height: var(--tw-leading, var(--text-3xl--line-height))
        }
    }

    .ltr\:right-0:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: calc(var(--spacing) * 0)
    }

    .ltr\:right-2\.5:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: calc(var(--spacing) * 2.5)
    }

    .ltr\:right-3:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: calc(var(--spacing) * 3)
    }

    .ltr\:right-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: calc(var(--spacing) * 4)
    }

    .ltr\:right-\[\.7rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: .7rem
    }

    .ltr\:right-\[1\.5rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: 1.5rem
    }

    .ltr\:right-auto:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        right: auto
    }

    .ltr\:left-0:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        left: calc(var(--spacing) * 0)
    }

    .ltr\:left-2:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        left: calc(var(--spacing) * 2)
    }

    .ltr\:left-3:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        left: calc(var(--spacing) * 3)
    }

    .ltr\:left-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        left: calc(var(--spacing) * 4)
    }

    .ltr\:left-\[1\.4rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        left: 1.4rem
    }

    .ltr\:left-auto:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        left: auto
    }

    .ltr\:-mr-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-right: calc(var(--spacing) * -4)
    }

    .ltr\:mr-0:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-right: calc(var(--spacing) * 0)
    }

    .ltr\:mr-1:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-right: calc(var(--spacing) * 1)
    }

    .ltr\:mr-2:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-right: calc(var(--spacing) * 2)
    }

    .ltr\:mr-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-right: calc(var(--spacing) * 4)
    }

    .ltr\:ml-0:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: calc(var(--spacing) * 0)
    }

    .ltr\:ml-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: calc(var(--spacing) * 4)
    }

    .ltr\:ml-\[-\.6rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: -.6rem
    }

    .ltr\:ml-\[-1px\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: -1px
    }

    .ltr\:ml-\[0\.25rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: .25rem
    }

    .ltr\:ml-\[1px\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: 1px
    }

    .ltr\:ml-\[3\.5px\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: 3.5px
    }

    .ltr\:ml-\[18px\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: 18px
    }

    .ltr\:ml-auto:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        margin-left: auto
    }

    .ltr\:rotate-0:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        rotate: 0deg
    }

    .ltr\:rotate-180:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        rotate: 180deg
    }

    .ltr\:rounded-l-lg:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg)
    }

    .ltr\:rounded-l-md:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        border-top-left-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md)
    }

    .ltr\:rounded-l-none:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .ltr\:rounded-r-lg:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        border-top-right-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg)
    }

    .ltr\:rounded-r-md:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md)
    }

    .ltr\:rounded-r-none:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .ltr\:bg-gradient-to-tr:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        --tw-gradient-position: to top right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .ltr\:pr-0:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-right: calc(var(--spacing) * 0)
    }

    .ltr\:pr-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-right: calc(var(--spacing) * 4)
    }

    .ltr\:pl-2:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-left: calc(var(--spacing) * 2)
    }

    .ltr\:pl-4:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-left: calc(var(--spacing) * 4)
    }

    .ltr\:pl-\[2\.3rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-left: 2.3rem
    }

    .ltr\:pl-\[35px\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-left: 35px
    }

    .ltr\:pl-\[40px\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        padding-left: 40px
    }

    .ltr\:text-right:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
        text-align: right
    }

    @media(min-width:1596px) {
        .min-\[1596px\]\:ltr\:max-w-\[59\.6\%\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
            max-width: 59.6%
        }
    }

    @media(min-width:40rem) {
        .sm\:ltr\:right-\[1\.3rem\]:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
            right: 1.3rem
        }
    }

    @media(min-width:40rem) {
        .sm\:ltr\:left-8:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
            left: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:ltr\:bg-gradient-to-tr:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
            --tw-gradient-position: to top right in oklab;
            background-image: linear-gradient(var(--tw-gradient-stops))
        }
    }

    .rtl\:right-0:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: calc(var(--spacing) * 0)
    }

    .rtl\:right-2:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: calc(var(--spacing) * 2)
    }

    .rtl\:right-3:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: calc(var(--spacing) * 3)
    }

    .rtl\:right-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: calc(var(--spacing) * 4)
    }

    .rtl\:right-\[1\.4rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: 1.4rem
    }

    .rtl\:right-\[27\.5rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: 27.5rem
    }

    .rtl\:right-auto:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        right: auto
    }

    .rtl\:left-0:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        left: calc(var(--spacing) * 0)
    }

    .rtl\:left-2\.5:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        left: calc(var(--spacing) * 2.5)
    }

    .rtl\:left-3:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        left: calc(var(--spacing) * 3)
    }

    .rtl\:left-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        left: calc(var(--spacing) * 4)
    }

    .rtl\:left-\[\.7rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        left: .7rem
    }

    .rtl\:left-auto:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        left: auto
    }

    .rtl\:-mt-\[6px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-top: -6px
    }

    .rtl\:mr-0:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: calc(var(--spacing) * 0)
    }

    .rtl\:mr-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: calc(var(--spacing) * 4)
    }

    .rtl\:mr-\[-\.6rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: -.6rem
    }

    .rtl\:mr-\[-1px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: -1px
    }

    .rtl\:mr-\[0\.25rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: .25rem
    }

    .rtl\:mr-\[1px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: 1px
    }

    .rtl\:mr-\[3\.5px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: 3.5px
    }

    .rtl\:mr-\[18px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: 18px
    }

    .rtl\:mr-auto:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-right: auto
    }

    .rtl\:-ml-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-left: calc(var(--spacing) * -4)
    }

    .rtl\:ml-0:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-left: calc(var(--spacing) * 0)
    }

    .rtl\:ml-1:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-left: calc(var(--spacing) * 1)
    }

    .rtl\:ml-2:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-left: calc(var(--spacing) * 2)
    }

    .rtl\:ml-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        margin-left: calc(var(--spacing) * 4)
    }

    .rtl\:rotate-0:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        rotate: 0deg
    }

    .rtl\:rotate-180:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        rotate: 180deg
    }

    .rtl\:rounded-l-lg:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg)
    }

    .rtl\:rounded-l-md:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        border-top-left-radius: var(--radius-md);
        border-bottom-left-radius: var(--radius-md)
    }

    .rtl\:rounded-l-none:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .rtl\:rounded-r-lg:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        border-top-right-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg)
    }

    .rtl\:rounded-r-md:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        border-top-right-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md)
    }

    .rtl\:rounded-r-none:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .rtl\:bg-gradient-to-l:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        --tw-gradient-position: to left in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .rtl\:bg-gradient-to-r:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        --tw-gradient-position: to right in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .rtl\:bg-gradient-to-tl:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        --tw-gradient-position: to top left in oklab;
        background-image: linear-gradient(var(--tw-gradient-stops))
    }

    .rtl\:pr-2:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-right: calc(var(--spacing) * 2)
    }

    .rtl\:pr-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-right: calc(var(--spacing) * 4)
    }

    .rtl\:pr-\[2\.3rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-right: 2.3rem
    }

    .rtl\:pr-\[35px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-right: 35px
    }

    .rtl\:pr-\[40px\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-right: 40px
    }

    .rtl\:pl-0:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-left: calc(var(--spacing) * 0)
    }

    .rtl\:pl-4:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        padding-left: calc(var(--spacing) * 4)
    }

    .rtl\:text-left:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        text-align: left
    }

    .rtl\:tracking-normal:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
        --tw-tracking: var(--tracking-normal);
        letter-spacing: var(--tracking-normal)
    }

    @media(min-width:1596px) {
        .min-\[1596px\]\:rtl\:max-w-\[60\.8\%\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
            max-width: 60.8%
        }
    }

    @media(min-width:40rem) {
        .sm\:rtl\:right-8:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
            right: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:40rem) {
        .sm\:rtl\:left-\[1\.3rem\]:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
            left: 1.3rem
        }
    }

    @media(min-width:40rem) {
        .sm\:rtl\:bg-gradient-to-tl:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
            --tw-gradient-position: to top left in oklab;
            background-image: linear-gradient(var(--tw-gradient-stops))
        }
    }

    .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
        display: none
    }
}

.mat-mdc-dialog-surface {
    border-radius: 1rem !important
}

.mat-mdc-fab,
.mat-mdc-mini-fab {
    color: var(--color-text-dark) !important
}

.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary {
    background: var(--color-accent-color) !important;
    color: var(--color-text-dark) !important;
    border-radius: 50% !important
}

ngx-mat-timepicker-face .clock-face__clock-hand {
    background: var(--color-accent-color) !important
}

ngx-mat-timepicker-face .clock-face__center {
    background: var(--color-accent-color) !important
}

.timepicker-dial__time {
    gap: .25rem !important
}

.timepicker-dial__control {
    background-color: var(--color-gray1) !important;
    width: 5rem !important;
    height: 4.3rem !important;
    color: var(--color-text-dark) !important
}

.timepicker-dial__control:focus {
    color: var(--color-accent-color) !important
}

div.ngx-mat-timepicker-dialog>mat-dialog-container [mat-dialog-content] mat-toolbar.timepicker-header {
    height: 5rem !important;
    margin-top: .75rem !important;
    background-color: var(--color-background-dark) !important
}

ngx-mat-timepicker-face {
    background-color: var(--color-gray1) !important
}

.timepicker-period__btn.active[_ngcontent-ng-c1221448245] {
    background: var(--color-accent-color) !important;
    border: none !important;
    color: var(--color-text-dark) !important
}

.timepicker-period__btn {
    padding: 2.5px 7px !important;
    border: 1px solid var(--color-gray2) !important;
    color: var(--color-text-dark) !important
}

div.ngx-mat-timepicker-dialog>mat-dialog-container {
    background-color: var(--color-background-dark) !important
}

div.ngx-mat-timepicker-dialog>mat-dialog-container [mat-dialog-content] .clock-face {
    background-color: var(--color-gray1) !important
}

div.ngx-mat-timepicker-dialog>mat-dialog-container div[mat-dialog-actions] {
    color: var(--color-accent-color) !important
}

.mat-drawer-inner-container {
    background-color: var(--bgColor) !important;
    color: var(--textColor) !important
}

.mat-drawer-side {
    border: none !important;
    width: min-content !important
}

.mat-sidenav-fixed {
    width: min-content !important
}

.mat-mdc-checkbox label {
    text-wrap: wrap !important
}

.mat-mdc-menu-item {
    min-height: 40px !important;
    border-radius: .25rem
}

.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
    font-size: 15px !important
}

.mat-mdc-menu-content {
    background-color: var(--color-gray1) !important;
    padding: .5rem !important
}

.mat-drawer-content {
    background-color: var(--bgColor) !important;
    color: var(--textColor) !important
}

.explore.mat-mdc-menu-panel {
    border: 1px solid var(--textColor) !important;
    background-color: var(--bgColor) !important;
    margin-top: .25rem !important;
    max-width: 500px !important
}

.explore .mat-date-range-input-separator {
    display: none !important
}

.explore .mat-datepicker-toggle {
    background: none !important
}

.explore .mat-datepicker-toggle-default-icon {
    display: none !important
}

.explore .mat-mdc-form-field-subscript-wrapper {
    display: none
}

.explore .mat-mdc-form-field-flex {
    align-items: center !important;
    height: 35px
}

.explore .mat-calendar-body-cell-content {
    background: var(--color-gray2) !important;
    border-radius: 50% !important;
    color: var(--color-text-dark)
}

.explore .mat-calendar-body-cell-content:hover:hover {
    background: var(--color-accent-color) !important
}

.explore .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    color: color-mix(in srgb, #fff 41%, transparent) !important
}

@supports (color: color-mix(in lab, red, red)) {
    .explore .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
        color: color-mix(in srgb, var(--color-text-dark) 41%, transparent) !important
    }
}

.explore .mat-calendar-body-selected {
    background: var(--color-accent-color) !important
}

.explore .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid var(--color-accent-color)
}

.explore .mat-datepicker-content .mat-calendar-previous-button,
.explore .mat-datepicker-content .mat-calendar-next-button {
    color: #000
}

.explore .mat-datepicker-content .mat-calendar-previous-button:hover,
.explore .mat-datepicker-content .mat-calendar-next-button:hover {
    background-color: var(--color-accent-color);
    color: #fff
}

.explore .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.explore .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.explore .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: var(--color-accent-color) !important;
    color: var(--color-accent-text) !important
}

.explore .mat-calendar-body-in-range:before {
    background-color: #f1562361 !important
}

.explore .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
    display: flex !important;
    align-items: center !important
}

.explore .mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-flex {
    border-color: var(--color-gray1) !important
}

.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,
.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,
.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing {
    border-width: 2px !important
}

.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
    border: none !important;
    border-bottom: 2px solid #9ca3af !important
}

.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading:focus,
.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch:focus,
.explore .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing:focus {
    border-color: var(--color-accent-color) !important
}

.explore .mat-calendar {
    background: var(--color-gray2) !important;
    border-radius: .5rem !important;
    font-family: Roboto, Cairo !important;
    font-display: optional
}

.explore .mat-calendar-body-selected {
    color: var(--color-text-dark) !important
}

.explore .mat-calendar-table-header th {
    padding-right: .25rem !important;
    font-size: .8rem !important;
    color: var(--color-text-dark)
}

.explore .mat-calendar-body-label {
    opacity: 0 !important;
    padding: 0 !important
}

.explore .mat-datepicker-toggle {
    color: var(--color-accent-color) !important
}

.explore .mat-calendar-controls button {
    font-family: Roboto, Cairo !important;
    font-display: optional;
    color: var(--color-text-dark);
    background-color: var(--color-gray3) !important
}

.explore .mat-calendar-arrow {
    fill: var(--color-text-dark) !important
}

.mat-calendar {
    font-family: Roboto, Cairo !important;
    font-display: optional
}

.mat-datepicker-content {
    background: #fff !important;
    border: 1px solid #b4b4b4
}

.mat-calendar-period-button {
    border-radius: .25rem !important;
    background: var(--color-gray2) !important
}

.mat-calendar-previous-button:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
    margin-right: calc(var(--spacing) * 4)
}

.mat-calendar-previous-button:where(:dir(ltr), [dir=ltr], [dir=ltr] *) {
    margin-left: calc(var(--spacing) * 0)
}

.mat-calendar-previous-button:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
    margin-right: calc(var(--spacing) * 0)
}

.mat-calendar-previous-button:where(:dir(rtl), [dir=rtl], [dir=rtl] *) {
    margin-left: calc(var(--spacing) * 4)
}

.mat-calendar-previous-button,
.mat-calendar-next-button {
    background: var(--color-gray2) !important
}

.mat-calendar-body-cell-content {
    background: var(--color-gray2) !important;
    border-radius: 6px !important
}

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: var(--color-accent-color) !important
}

.mat-calendar-body-selected {
    background: var(--color-accent-color) !important;
    color: #fff !important
}

.mat-datepicker-actions {
    gap: 1rem !important;
    color: var(--color-accent-color) !important
}

.mat-bottom-sheet-container-large {
    min-width: 720px !important;
    padding: 0 !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important
}

.mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
    background-color: var(--color-accent-color) !important;
    border-color: var(--color-accent-color) !important
}

.mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
    background-color: var(--color-accent-color) !important
}

.mdc-checkbox:active .mdc-checkbox__native-control~.mdc-checkbox__ripple {
    background-color: var(--color-accent-color) !important
}

.custom-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.custom-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
    background-color: var(--color-checkbox-yellow) !important;
    border-color: var(--color-checkbox-yellow) !important
}

.custom-checkbox .mdc-checkbox__checkmark {
    color: var(--color-background-dark) !important;
    padding: 2px !important
}

.custom-checkbox .mdc-checkbox__background {
    border-color: var(--color-text-dark) !important;
    width: 20px !important;
    height: 20px !important
}

.custom-checkbox .mdc-checkbox {
    padding: 11px 12px 12px 11px !important
}

.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background:before {
    border-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle {
    border-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
    --mdc-radio-selected-icon-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus+.mdc-radio__background .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus+.mdc-radio__background .mdc-radio__inner-circle {
    --mdc-radio-selected-icon-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button .mdc-radio:active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio:active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
    border-color: var(--color-accent-color) !important;
    --mdc-radio-selected-pressed-icon-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle {
    border-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background:before {
    background-color: var(--color-accent-color) !important
}

.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background .mdc-radio__inner-circle,
.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background .mdc-radio__outer-circle {
    border-color: var(--color-accent-color) !important
}

.mat-internal-form-field>label {
    font-family: Roboto, Cairo !important;
    font-display: optional
}

.mat-expansion-panel:not([class*=mat-elevation-z]) {
    box-shadow: none !important
}

.mat-expansion-panel {
    background-color: var(--color-gray1) !important;
    border-radius: .5rem !important
}

.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
    background-color: var(--color-gray1) !important
}

.mat-expansion-indicator svg {
    fill: var(--color-accent-color) !important
}

.mat-expansion-panel.mat-expanded .mat-expansion-indicator:after {
    color: #5dc4b9 !important
}

.mat-expansion-panel:not(.mat-expanded) .mat-expansion-indicator:after {
    color: var(--color-accent-color) !important
}

.mat-expansion-panel-animations-enabled .mat-expansion-indicator {
    margin-bottom: 5px !important
}

.mat-expansion-panel-header-title,
.mat-expansion-panel {
    color: var(--color-text-dark) !important
}

:where(.mat-accordion>: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)))
}

.mat-expansion-panel-header {
    height: auto !important;
    min-height: 3rem !important;
    font-family: Roboto, Cairo !important;
    font-display: optional
}

.mat-expansion-panel-body {
    font-family: Roboto, Cairo !important;
    font-display: optional
}

.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,
.mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic {
    stroke: #fff !important
}

.mat-mdc-select-trigger {
    border: 1px solid var(--color-text-dark);
    padding: .375rem .7rem;
    border-radius: 7px
}

.mat-mdc-select-trigger:hover,
.mat-mdc-select-trigger:active {
    border-color: var(--color-accent-color)
}

div.mat-mdc-select-panel {
    background: var(--color-background-dark) !important;
    border-radius: 7px !important;
    margin-top: .5rem !important;
    border: 1px solid var(--color-text-dark) !important
}

.mat-mdc-select-placeholder {
    color: var(--color-text-dark) !important;
    font-family: Roboto, Cairo !important
}

.mat-mdc-option {
    min-height: 38px !important;
    margin-block: 6px;
    height: 2.2rem !important
}

.cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
    border-radius: 7px !important
}

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
    background: color-mix(in srgb, #C9A4FF 42%, transparent) !important
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
        background: color-mix(in srgb, var(--color-accent-color) 42%, transparent) !important
    }
}

.mat-mdc-option.mat-mdc-option-active.mdc-list-item,
.mat-mdc-option.mdc-list-item {
    background: var(--color-background-dark) !important;
    color: var(--color-text-dark) !important
}

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):is(.mat-mdc-option-multiple) {
    background: color-mix(in srgb, #C9A4FF 42%, transparent) !important
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):is(.mat-mdc-option-multiple) {
        background: color-mix(in srgb, var(--color-accent-color) 42%, transparent) !important
    }
}

.mat-mdc-option:hover:not(.mdc-list-item--disabled) {
    background-color: color-mix(in srgb, #C9A4FF 42%, transparent) !important
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
        background-color: color-mix(in srgb, var(--color-accent-color) 42%, transparent) !important
    }
}

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
    color: var(--color-text-dark) !important
}

.mat-mdc-select-value,
.mat-mdc-select-arrow {
    color: var(--color-text-dark) !important
}

.mat-mdc-option .mat-pseudo-checkbox-minimal {
    display: none
}

.mat-mdc-select {
    font-size: 14px !important
}

@media(max-width:640px) {
    .mat-mdc-option .mdc-list-item__primary-text {
        font-size: 13.5px !important
    }

    .mat-mdc-option {
        min-height: 30px !important;
        height: 1.7rem !important
    }
}

.mat-mdc-dialog-surface {
    background: none !important
}

.custom-container .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 0 !important
}

.mat-bottom-sheet-container {
    background: var(--color-background-dark) I !important;
    padding: 0 !important;
    font-family: Roboto, Cairo !important
}

[dir=ltr].iti__selected-country-primary {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

[dir=ltr].iti__selected-country-primary:hover {
    background-color: transparent !important
}

[dir=rtl].iti__selected-country-primary {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.iti__country-container {
    right: auto !important;
    left: auto !important
}

.iti__selected-country-primary:first-child:hover {
    background-color: transparent !important
}

.iti__search-input {
    padding: .5rem 1rem
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
    padding-inline: 0 !important
}

.iti input.iti__tel-input::placeholder,
.iti input.iti__tel-input[type=text]::placeholder,
.iti input.iti__tel-input[type=tel]::placeholder {
    display: none !important
}

.iti--inline-dropdown .iti__dropdown-content {
    width: 16rem !important
}

.iti__flag {
    height: 1rem !important;
    width: 1rem !important;
    --iti-flag-sprite-height: 1rem !important;
    border-radius: 50% !important
}

.swal2-container .swal2-popup.swal2-toast.color-default {
    background-color: #3b3f5c
}

.swal2-container .swal2-popup.swal2-toast.color-success {
    background-color: #00ab55
}

.swal2-container .swal2-popup.swal2-toast.color-error {
    background-color: #e7515a
}

.swal2-container .swal2-popup.swal2-toast.color-brand {
    background-color: #f05623
}

.swal2-container .swal2-popup.swal2-toast.color-warning {
    background-color: #e2a03f
}

.swal2-container .swal2-popup.swal2-toast.color-info {
    background-color: #5aadd5
}

.swal2-popup.swal2-toast .swal2-title {
    color: var(--color-white)
}

.swal2-popup.swal2-toast .swal2-close {
    margin-bottom: calc(var(--spacing) * 1);
    color: var(--color-white)
}

@media(hover:hover) {
    .swal2-popup.swal2-toast .swal2-close:hover {
        color: var(--color-white)
    }
}

.swal2-popup.swal2-toast.ltr-toast {
    direction: ltr;
    text-align: left
}

.swal2-popup.swal2-toast.rtl-toast {
    direction: rtl;
    text-align: right
}

html {
    -webkit-user-select: none;
    user-select: none
}

html ::-webkit-scrollbar {
    background-color: #0000;
    height: 5px;
    width: 5px;
    display: none
}

html ::-webkit-scrollbar:hover {
    background-color: #0000001f
}

html ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 5px;
    background: var(--color-accent-color)
}

html ::-webkit-scrollbar-thumb:active {
    border-radius: 5px;
    box-shadow: inset 0 0 0 12px #0000008a
}

button {
    cursor: pointer
}

button:disabled {
    cursor: not-allowed
}

button:focus {
    outline: none
}

input:focus {
    outline: none
}

input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    display: none
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 2
}

.ribbon:before,
.ribbon:after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    border: 5px solid #2980b9
}

.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 3px 0;
    box-shadow: 0 5px 10px #0000001a;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-align: center;
    text-transform: uppercase
}

.ribbon-top-left {
    top: -10px;
    left: -10px
}

.ribbon-top-right {
    top: -10px;
    right: -10px
}

.ribbon-top-left span {
    right: -16px;
    top: 35px;
    transform: rotate(-45deg)
}

.ribbon-top-right span {
    left: -16px;
    top: 35px;
    transform: rotate(45deg)
}

@media(max-width:640px) {
    .ribbon-top-left {
        top: -29px;
        left: -18px
    }

    .ribbon-top-right {
        top: -29px;
        right: -18px
    }

    .ribbon {
        width: 140px
    }

    .ribbon span {
        font-size: 12px
    }

    .ribbon-top-left span {
        right: -25px;
        top: 49px
    }

    .ribbon-top-right span {
        left: -25px;
        top: 49px
    }
}

.ribbon-top-left:before,
.ribbon-top-left:after {
    border-top-color: transparent;
    border-left-color: transparent
}

.ribbon-top-right:before,
.ribbon-top-right:after {
    border-top-color: transparent;
    border-right-color: transparent
}

.ribbon-top-left:before {
    top: 0;
    right: 0
}

.ribbon-top-right:before {
    top: 0;
    left: 0
}

.ribbon-top-left:after {
    bottom: 0;
    left: 0
}

.ribbon-top-right:after {
    bottom: 0;
    right: 0
}

ul li {
    list-style: inside !important
}

ol li {
    list-style: auto inside !important
}

.skeleton-loader.progress[_ngcontent-ng-c1161969206],
.skeleton-loader.progress-dark[_ngcontent-ng-c1161969206] {
    height: 100% !important
}

.skeleton-loader.progress[_ngcontent-ng-c1161969206]:before {
    background-image: linear-gradient(90deg, #02020200, #13131399, #0000) !important
}

.light .skeleton-loader.progress[_ngcontent-ng-c1161969206]:before {
    background-image: linear-gradient(90deg, #fff0, #f3f3f399, #fff0) !important
}

.scrolled {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background-color: #1b1b1b21
}

.light .scrolled {
    background-color: #e3e3e321
}

.mat-bottom-sheet-container {
    max-height: 90vh !important
}

.gradient {
    background: linear-gradient(31deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 18%, var(--color-dynamic-color, rgba(131, 118, 119, .72)) 100%)
}

body.light .gradient {
    background: linear-gradient(31deg, rgb(249, 249, 249) 0%, rgb(249, 249, 249) 18%, var(--color-dynamic-color, rgba(131, 118, 119, .72)) 100%)
}

@media(min-width:640px) {
    .gradient {
        background: linear-gradient(18deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 29%, var(--color-dynamic-color, rgb(131, 118, 119)) 100%)
    }

    body.light .gradient {
        background: linear-gradient(18deg, rgb(249, 249, 249) 0%, rgb(249, 249, 249) 29%, var(--color-dynamic-color, rgb(131, 118, 119)) 100%)
    }
}

@media(min-width:1280px) {
    .gradient {
        background: linear-gradient(54deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 56%, var(--color-dynamic-color, rgb(131, 118, 119)) 100%)
    }

    body.light .gradient {
        background: linear-gradient(54deg, rgb(249, 249, 249) 0%, rgb(249, 249, 249) 56%, var(--color-dynamic-color, rgb(131, 118, 119)) 100%)
    }
}

.p-dialog .p-dialog-header {
    background: var(--color-gray1);
    color: var(--color-text-dark);
    font-family: Roboto, Cairo !important;
    display: flex;
    justify-content: center;
    font-display: optional;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 17px
}

.p-dialog .p-dialog-content {
    background: var(--color-gray1);
    color: var(--color-text-dark);
    font-family: Roboto, Cairo !important;
    font-display: optional
}

.p-dialog .p-dialog-content {
    padding-inline: 17px;
    padding-bottom: 17px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.p-dialog-title {
    font-size: 16px !important
}

.p-overlay-mask-enter {
    background-color: #0000003b !important
}

.redeem .p-dialog .p-dialog-content {
    border-radius: var(--radius-lg);
    background-color: transparent;
    padding: calc(var(--spacing) * 0)
}

.redeem .p-dialog .p-dialog-header {
    display: none
}

.redeem .p-dialog {
    box-shadow: none
}

.p-dialog .p-dialog-header .p-dialog-header-icon {
    box-shadow: none;
    border: none
}

.redeem-dialog .p-icon {
    transition: .3s all
}

.redeem-dialog .p-icon:hover {
    color: var(--color-accent-color)
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
    box-shadow: none;
    border: none
}

.p-checkbox .p-checkbox-box.p-highlight {
    background: var(--color-accent-color);
    color: var(--textColor)
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
    background: var(--color-accent-color);
    color: var(--textColor)
}

.p-disabled {
    background: #a1a1a1 !important
}

.loginError .p-dialog .p-dialog-header .p-dialog-header-icon {
    position: absolute !important;
    right: 1rem !important
}

.mobileExperiencePopUp .p-dialog .p-dialog-content {
    padding: 17px;
    border-radius: 8px
}

.radio-button-container {
    color: var(--color-text-dark);
    display: block;
    position: relative;
    line-height: 25px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.radio-button-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.checkmark {
    position: absolute;
    top: 0;
    height: 22px;
    width: 22px;
    background-color: #0000;
    border-radius: 50%;
    border: 2px solid var(--color-accent-color);
    transition: all .3s
}

.radio-button-container:hover input~.checkmark {
    border-color: var(--color-accent-color)
}

.radio-button-container input:checked~.checkmark {
    background-color: #0000;
    border-color: var(--color-accent-color)
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.radio-button-container input:checked~.checkmark:after {
    display: block
}

.radio-button-container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent-color)
}

.dt-orange .checkmark,
.dt-orange .radio-button-container:hover input~.checkmark,
.dt-orange .radio-button-container input:checked~.checkmark {
    border-color: var(--color-arena-orange)
}

.dt-orange .radio-button-container .checkmark:after {
    background: var(--color-arena-orange)
}

.dt-orange .mat-calendar-body-selected {
    background: var(--color-arena-orange) !important
}

.dt-orange .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: var(--color-arena-orange) !important
}

.dt-orange .mat-calendar-period-button.mat-mdc-button,
.dt-orange .mat-calendar-previous-button.mat-mdc-icon-button,
.dt-orange .mat-calendar-next-button.mat-mdc-icon-button {
    background-color: transparent !important;
    --mdc-text-button-container-color: transparent
}

.dt-orange .mat-calendar-period-button {
    text-transform: none !important;
    font-weight: 400
}

.dt-orange .mat-calendar-controls .mat-mdc-button-persistent-ripple:before,
.dt-orange .mat-calendar-controls .mat-mdc-button-ripple,
.dt-orange .mat-calendar-controls .mdc-button__ripple {
    background-color: transparent !important;
    opacity: 0 !important
}

.dt-orange .mat-calendar-arrow {
    display: none
}

.dt-orange .mat-calendar {
    background-color: transparent !important
}

.dt-orange .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    background-color: transparent !important
}

.dt-orange .mat-calendar-body-cell-content:hover:not(.mat-calendar-body-selected),
.dt-orange .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    background: var(--color-arena-orange) !important;
    color: var(--color-accent-text) !important
}

.dt-orange .mat-mdc-radio-button {
    --mdc-radio-selected-icon-color: var(--color-arena-orange) !important;
    --mdc-radio-selected-hover-icon-color: var(--color-arena-orange) !important;
    --mdc-radio-selected-focus-icon-color: var(--color-arena-orange) !important;
    --mdc-radio-selected-pressed-icon-color: var(--color-arena-orange) !important;
    --mdc-radio-unselected-icon-color: var(--color-arena-orange) !important;
    --mdc-radio-unselected-hover-icon-color: var(--color-arena-orange) !important;
    --mat-radio-checked-ripple-color: var(--color-arena-orange) !important;
    --mat-radio-ripple-color: var(--color-arena-orange) !important
}

.dt-orange .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background:before,
.dt-orange .mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.dt-orange .mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__inner-circle,
.dt-orange .mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle {
    border-color: var(--color-arena-orange) !important
}

.dt-orange .mat-mdc-radio-button .mdc-radio__inner-circle {
    background-color: var(--color-arena-orange) !important
}

.arena-dt-dialog .mat-mdc-dialog-surface {
    background-color: transparent !important;
    box-shadow: none !important
}

@layer theme, base, components, utilities;
@layer theme;

@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
    }

    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: -.25em
    }

    sup {
        top: -.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
    }

    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
        ::placeholder {
            color: currentcolor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                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
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-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;

.font-arabic-naskh {
    font-family: Noto Naskh Arabic, Cairo, sans-serif
}

:root {
    --color-checkbox-yellow: #FFCD00;
    --color-arena-orange: #EE5623;
    --header-height: 4rem;
    --footer-height: 4rem;
    --swiper-pagination-color: #ffffff;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-inactive-color: #ffffff;
    --swiper-pagination-bullet-inactive-opacity: .59;
    --swiper-navigation-sides-offset: 180px;
    --swiper-navigation-color: #000000
}

@media(min-width:640px) {
    :root {
        --header-height: 5rem;
        --footer-height: 8rem;
        --swiper-pagination-bullet-width: 13px;
        --swiper-pagination-bullet-size: 13px
    }
}

@media(min-width:1210px) {
    :root {
        --footer-height: 6rem
    }
}

html,
body {
    height: 100%
}

html.lenis {
    height: auto
}

body:not(body div#ticket) {
    margin: 0;
    font-family: Roboto, Cairo;
    font-size: 12px;
    background-color: var(--color-background-dark);
    color: var(--color-text-dark)
}

div#ticket {
    margin: 0;
    font-family: Roboto, Cairo;
    font-size: 12px;
    color: #000
}

body:has(.headerSearch.fixed.z-\[55\]) {
    overflow: hidden
}

@media(min-width:640px) {
    body:not(body div#ticket) {
        font-size: 14px
    }

    div#ticket {
        font-size: 14px
    }
}

.iti {
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: #0d1117;
    --iti-arrow-color: #aaaaaa;
    --iti-hover-color: #30363d
}

.iti.iti--inline-dropdown .iti__dropdown-content {
    z-index: 50
}

body.light .iti {
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: #f5f5f5;
    --iti-arrow-color: #aaaaaa;
    --iti-hover-color: #e3e3e3
}

.mat-elevation-z7 {
    box-shadow: 0 4px 5px -2px #0003, 0 7px 10px 1px #00000024, 0 2px 16px 1px #0000001f
}

.swiper-pagination {
    position: relative !important
}

.ModalDialog:not(.new-style) button.close {
    display: none !important
}

.seatsio__session-expired__button {
    display: none !important
}

.mat-elevation-z0,
.mat-mdc-elevation-specific.mat-elevation-z0 {
    box-shadow: var(--mat-app-elevation-shadow-level-0, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow)
}

.mat-elevation-z1,
.mat-mdc-elevation-specific.mat-elevation-z1 {
    box-shadow: var(--mat-app-elevation-shadow-level-1, 0px 2px 1px -1px --mat-sys-shadow, 0px 1px 1px 0px --mat-sys-shadow, 0px 1px 3px 0px --mat-sys-shadow)
}

.mat-elevation-z2,
.mat-mdc-elevation-specific.mat-elevation-z2 {
    box-shadow: var(--mat-app-elevation-shadow-level-2, 0px 3px 1px -2px --mat-sys-shadow, 0px 2px 2px 0px --mat-sys-shadow, 0px 1px 5px 0px --mat-sys-shadow)
}

.mat-elevation-z3,
.mat-mdc-elevation-specific.mat-elevation-z3 {
    box-shadow: var(--mat-app-elevation-shadow-level-3, 0px 3px 3px -2px --mat-sys-shadow, 0px 3px 4px 0px --mat-sys-shadow, 0px 1px 8px 0px --mat-sys-shadow)
}

.mat-elevation-z4,
.mat-mdc-elevation-specific.mat-elevation-z4 {
    box-shadow: var(--mat-app-elevation-shadow-level-4, 0px 2px 4px -1px --mat-sys-shadow, 0px 4px 5px 0px --mat-sys-shadow, 0px 1px 10px 0px --mat-sys-shadow)
}

.mat-elevation-z5,
.mat-mdc-elevation-specific.mat-elevation-z5 {
    box-shadow: var(--mat-app-elevation-shadow-level-5, 0px 3px 5px -1px --mat-sys-shadow, 0px 5px 8px 0px --mat-sys-shadow, 0px 1px 14px 0px --mat-sys-shadow)
}

.mat-elevation-z6,
.mat-mdc-elevation-specific.mat-elevation-z6 {
    box-shadow: var(--mat-app-elevation-shadow-level-6, 0px 3px 5px -1px --mat-sys-shadow, 0px 6px 10px 0px --mat-sys-shadow, 0px 1px 18px 0px --mat-sys-shadow)
}

.mat-elevation-z7,
.mat-mdc-elevation-specific.mat-elevation-z7 {
    box-shadow: var(--mat-app-elevation-shadow-level-7, 0px 4px 5px -2px --mat-sys-shadow, 0px 7px 10px 1px --mat-sys-shadow, 0px 2px 16px 1px --mat-sys-shadow)
}

.mat-elevation-z8,
.mat-mdc-elevation-specific.mat-elevation-z8 {
    box-shadow: var(--mat-app-elevation-shadow-level-8, 0px 5px 5px -3px --mat-sys-shadow, 0px 8px 10px 1px --mat-sys-shadow, 0px 3px 14px 2px --mat-sys-shadow)
}

.mat-elevation-z9,
.mat-mdc-elevation-specific.mat-elevation-z9 {
    box-shadow: var(--mat-app-elevation-shadow-level-9, 0px 5px 6px -3px --mat-sys-shadow, 0px 9px 12px 1px --mat-sys-shadow, 0px 3px 16px 2px --mat-sys-shadow)
}

.mat-elevation-z10,
.mat-mdc-elevation-specific.mat-elevation-z10 {
    box-shadow: var(--mat-app-elevation-shadow-level-10, 0px 6px 6px -3px --mat-sys-shadow, 0px 10px 14px 1px --mat-sys-shadow, 0px 4px 18px 3px --mat-sys-shadow)
}

.mat-elevation-z11,
.mat-mdc-elevation-specific.mat-elevation-z11 {
    box-shadow: var(--mat-app-elevation-shadow-level-11, 0px 6px 7px -4px --mat-sys-shadow, 0px 11px 15px 1px --mat-sys-shadow, 0px 4px 20px 3px --mat-sys-shadow)
}

.mat-elevation-z12,
.mat-mdc-elevation-specific.mat-elevation-z12 {
    box-shadow: var(--mat-app-elevation-shadow-level-12, 0px 7px 8px -4px --mat-sys-shadow, 0px 12px 17px 2px --mat-sys-shadow, 0px 5px 22px 4px --mat-sys-shadow)
}

.mat-elevation-z13,
.mat-mdc-elevation-specific.mat-elevation-z13 {
    box-shadow: var(--mat-app-elevation-shadow-level-13, 0px 7px 8px -4px --mat-sys-shadow, 0px 13px 19px 2px --mat-sys-shadow, 0px 5px 24px 4px --mat-sys-shadow)
}

.mat-elevation-z14,
.mat-mdc-elevation-specific.mat-elevation-z14 {
    box-shadow: var(--mat-app-elevation-shadow-level-14, 0px 7px 9px -4px --mat-sys-shadow, 0px 14px 21px 2px --mat-sys-shadow, 0px 5px 26px 4px --mat-sys-shadow)
}

.mat-elevation-z15,
.mat-mdc-elevation-specific.mat-elevation-z15 {
    box-shadow: var(--mat-app-elevation-shadow-level-15, 0px 8px 9px -5px --mat-sys-shadow, 0px 15px 22px 2px --mat-sys-shadow, 0px 6px 28px 5px --mat-sys-shadow)
}

.mat-elevation-z16,
.mat-mdc-elevation-specific.mat-elevation-z16 {
    box-shadow: var(--mat-app-elevation-shadow-level-16, 0px 8px 10px -5px --mat-sys-shadow, 0px 16px 24px 2px --mat-sys-shadow, 0px 6px 30px 5px --mat-sys-shadow)
}

.mat-elevation-z17,
.mat-mdc-elevation-specific.mat-elevation-z17 {
    box-shadow: var(--mat-app-elevation-shadow-level-17, 0px 8px 11px -5px --mat-sys-shadow, 0px 17px 26px 2px --mat-sys-shadow, 0px 6px 32px 5px --mat-sys-shadow)
}

.mat-elevation-z18,
.mat-mdc-elevation-specific.mat-elevation-z18 {
    box-shadow: var(--mat-app-elevation-shadow-level-18, 0px 9px 11px -5px --mat-sys-shadow, 0px 18px 28px 2px --mat-sys-shadow, 0px 7px 34px 6px --mat-sys-shadow)
}

.mat-elevation-z19,
.mat-mdc-elevation-specific.mat-elevation-z19 {
    box-shadow: var(--mat-app-elevation-shadow-level-19, 0px 9px 12px -6px --mat-sys-shadow, 0px 19px 29px 2px --mat-sys-shadow, 0px 7px 36px 6px --mat-sys-shadow)
}

.mat-elevation-z20,
.mat-mdc-elevation-specific.mat-elevation-z20 {
    box-shadow: var(--mat-app-elevation-shadow-level-20, 0px 10px 13px -6px --mat-sys-shadow, 0px 20px 31px 3px --mat-sys-shadow, 0px 8px 38px 7px --mat-sys-shadow)
}

.mat-elevation-z21,
.mat-mdc-elevation-specific.mat-elevation-z21 {
    box-shadow: var(--mat-app-elevation-shadow-level-21, 0px 10px 13px -6px --mat-sys-shadow, 0px 21px 33px 3px --mat-sys-shadow, 0px 8px 40px 7px --mat-sys-shadow)
}

.mat-elevation-z22,
.mat-mdc-elevation-specific.mat-elevation-z22 {
    box-shadow: var(--mat-app-elevation-shadow-level-22, 0px 10px 14px -6px --mat-sys-shadow, 0px 22px 35px 3px --mat-sys-shadow, 0px 8px 42px 7px --mat-sys-shadow)
}

.mat-elevation-z23,
.mat-mdc-elevation-specific.mat-elevation-z23 {
    box-shadow: var(--mat-app-elevation-shadow-level-23, 0px 11px 14px -7px --mat-sys-shadow, 0px 23px 36px 3px --mat-sys-shadow, 0px 9px 44px 8px --mat-sys-shadow)
}

.mat-elevation-z24,
.mat-mdc-elevation-specific.mat-elevation-z24 {
    box-shadow: var(--mat-app-elevation-shadow-level-24, 0px 11px 15px -7px --mat-sys-shadow, 0px 24px 38px 3px --mat-sys-shadow, 0px 9px 46px 8px --mat-sys-shadow)
}

html {
    --mat-sys-on-surface: initial
}

.mat-app-background {
    background-color: var(--mat-app-background-color, var(--mat-sys-background, transparent));
    color: var(--mat-app-text-color, var(--mat-sys-on-background, inherit))
}

html {
    --mat-app-background-color: #fafafa;
    --mat-app-text-color: rgba(0, 0, 0, .87);
    --mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 5px 8px 0px rgba(0, 0, 0, .14), 0px 1px 14px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, .2), 0px 7px 10px 1px rgba(0, 0, 0, .14), 0px 2px 16px 1px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, .2), 0px 10px 14px 1px rgba(0, 0, 0, .14), 0px 4px 18px 3px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, .2), 0px 11px 15px 1px rgba(0, 0, 0, .14), 0px 4px 20px 3px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 13px 19px 2px rgba(0, 0, 0, .14), 0px 5px 24px 4px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, .2), 0px 14px 21px 2px rgba(0, 0, 0, .14), 0px 5px 26px 4px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, .2), 0px 15px 22px 2px rgba(0, 0, 0, .14), 0px 6px 28px 5px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, .2), 0px 17px 26px 2px rgba(0, 0, 0, .14), 0px 6px 32px 5px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, .2), 0px 18px 28px 2px rgba(0, 0, 0, .14), 0px 7px 34px 6px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, .2), 0px 19px 29px 2px rgba(0, 0, 0, .14), 0px 7px 36px 6px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 20px 31px 3px rgba(0, 0, 0, .14), 0px 8px 38px 7px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 21px 33px 3px rgba(0, 0, 0, .14), 0px 8px 40px 7px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, .2), 0px 22px 35px 3px rgba(0, 0, 0, .14), 0px 8px 42px 7px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, .2), 0px 23px 36px 3px rgba(0, 0, 0, .14), 0px 9px 44px 8px rgba(0, 0, 0, .12);
    --mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)
}

html {
    --mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent)
}

html,
.mat-accent {
    --mat-option-selected-state-label-text-color: var(--color-accent-color);
    --mat-option-label-text-color: rgba(0, 0, 0, .87);
    --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 4%, transparent);
    --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent)
}

.mat-warn {
    --mat-option-selected-state-label-text-color: #f44336;
    --mat-option-label-text-color: rgba(0, 0, 0, .87);
    --mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 4%, transparent);
    --mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent)
}

html {
    --mat-optgroup-label-text-color: rgba(0, 0, 0, .87)
}

html,
.mat-primary,
.mat-accent {
    --mat-pseudo-checkbox-full-selected-icon-color: var(--color-accent-color);
    --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
    --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
    --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-accent-color);
    --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent)
}

.mat-warn {
    --mat-pseudo-checkbox-full-selected-icon-color: #f44336;
    --mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
    --mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
    --mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-pseudo-checkbox-minimal-selected-checkmark-color: #f44336;
    --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent)
}

html {
    --mat-option-label-text-font: Roboto, sans-serif;
    --mat-option-label-text-line-height: 24px;
    --mat-option-label-text-size: 16px;
    --mat-option-label-text-tracking: .03125em;
    --mat-option-label-text-weight: 400
}

html {
    --mat-optgroup-label-text-font: Roboto, sans-serif;
    --mat-optgroup-label-text-line-height: 24px;
    --mat-optgroup-label-text-size: 16px;
    --mat-optgroup-label-text-tracking: .03125em;
    --mat-optgroup-label-text-weight: 400
}

html {
    --mat-card-elevated-container-shape: 4px;
    --mat-card-outlined-container-shape: 4px;
    --mat-card-filled-container-shape: 4px;
    --mat-card-outlined-outline-width: 1px
}

html {
    --mat-card-elevated-container-color: white;
    --mat-card-elevated-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    --mat-card-outlined-container-color: white;
    --mat-card-outlined-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
    --mat-card-outlined-outline-color: rgba(0, 0, 0, .12);
    --mat-card-subtitle-text-color: rgba(0, 0, 0, .54);
    --mat-card-filled-container-color: white;
    --mat-card-filled-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)
}

html {
    --mat-card-title-text-font: Roboto, sans-serif;
    --mat-card-title-text-line-height: 32px;
    --mat-card-title-text-size: 20px;
    --mat-card-title-text-tracking: .0125em;
    --mat-card-title-text-weight: 500;
    --mat-card-subtitle-text-font: Roboto, sans-serif;
    --mat-card-subtitle-text-line-height: 22px;
    --mat-card-subtitle-text-size: 14px;
    --mat-card-subtitle-text-tracking: .0071428571em;
    --mat-card-subtitle-text-weight: 500
}

html {
    --mat-progress-bar-active-indicator-height: 4px;
    --mat-progress-bar-track-height: 4px;
    --mat-progress-bar-track-shape: 0
}

.mat-mdc-progress-bar,
.mat-mdc-progress-bar.mat-accent {
    --mat-progress-bar-active-indicator-color: var(--color-accent-color);
    --mat-progress-bar-track-color: var(--color-accent-color)
}

.mat-mdc-progress-bar.mat-warn {
    --mat-progress-bar-active-indicator-color: #f44336;
    --mat-progress-bar-track-color: rgba(244, 67, 54, .25)
}

html {
    --mat-tooltip-container-shape: 4px;
    --mat-tooltip-supporting-text-line-height: 16px
}

html {
    --mat-tooltip-container-color: #424242;
    --mat-tooltip-supporting-text-color: white
}

html {
    --mat-tooltip-supporting-text-font: Roboto, sans-serif;
    --mat-tooltip-supporting-text-size: 12px;
    --mat-tooltip-supporting-text-weight: 400;
    --mat-tooltip-supporting-text-tracking: .0333333333em
}

html {
    --mat-form-field-filled-active-indicator-height: 1px;
    --mat-form-field-filled-focus-active-indicator-height: 2px;
    --mat-form-field-filled-container-shape: 4px;
    --mat-form-field-outlined-outline-width: 1px;
    --mat-form-field-outlined-focus-outline-width: 2px;
    --mat-form-field-outlined-container-shape: 4px
}

html {
    --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #C9A4FF 87%, transparent);
    --mat-form-field-filled-caret-color: var(--color-accent-color);
    --mat-form-field-filled-focus-active-indicator-color: var(--color-accent-color);
    --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #C9A4FF 87%, transparent);
    --mat-form-field-outlined-caret-color: var(--color-accent-color);
    --mat-form-field-outlined-focus-outline-color: var(--color-accent-color);
    --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #C9A4FF 87%, transparent);
    --mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-form-field-state-layer-color: rgba(0, 0, 0, .87);
    --mat-form-field-error-text-color: #f44336;
    --mat-form-field-select-option-text-color: inherit;
    --mat-form-field-select-disabled-option-text-color: GrayText;
    --mat-form-field-leading-icon-color: unset;
    --mat-form-field-disabled-leading-icon-color: unset;
    --mat-form-field-trailing-icon-color: unset;
    --mat-form-field-disabled-trailing-icon-color: unset;
    --mat-form-field-error-focus-trailing-icon-color: unset;
    --mat-form-field-error-hover-trailing-icon-color: unset;
    --mat-form-field-error-trailing-icon-color: unset;
    --mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, .54);
    --mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-form-field-hover-state-layer-opacity: .04;
    --mat-form-field-focus-state-layer-opacity: .12;
    --mat-form-field-filled-container-color: #f6f6f6;
    --mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 4%, transparent);
    --mat-form-field-filled-label-text-color: rgba(0, 0, 0, .54);
    --mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, .54);
    --mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-form-field-filled-input-text-color: rgba(0, 0, 0, .87);
    --mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, .54);
    --mat-form-field-filled-error-hover-label-text-color: #f44336;
    --mat-form-field-filled-error-focus-label-text-color: #f44336;
    --mat-form-field-filled-error-label-text-color: #f44336;
    --mat-form-field-filled-error-caret-color: #f44336;
    --mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, .54);
    --mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, .87);
    --mat-form-field-filled-error-active-indicator-color: #f44336;
    --mat-form-field-filled-error-focus-active-indicator-color: #f44336;
    --mat-form-field-filled-error-hover-active-indicator-color: #f44336;
    --mat-form-field-outlined-label-text-color: rgba(0, 0, 0, .54);
    --mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, .87);
    --mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-form-field-outlined-input-text-color: rgba(0, 0, 0, .87);
    --mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, .54);
    --mat-form-field-outlined-error-caret-color: #f44336;
    --mat-form-field-outlined-error-focus-label-text-color: #f44336;
    --mat-form-field-outlined-error-label-text-color: #f44336;
    --mat-form-field-outlined-error-hover-label-text-color: #f44336;
    --mat-form-field-outlined-outline-color: rgba(0, 0, 0, .38);
    --mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, .87);
    --mat-form-field-outlined-error-focus-outline-color: #f44336;
    --mat-form-field-outlined-error-hover-outline-color: #f44336;
    --mat-form-field-outlined-error-outline-color: #f44336
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-form-field-focus-select-arrow-color: color-mix(in srgb, var(--color-accent-color) 87%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, var(--color-accent-color) 87%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, var(--color-accent-color) 87%, transparent)
    }
}

.mat-mdc-form-field.mat-accent {
    --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #C9A4FF 87%, transparent);
    --mat-form-field-filled-caret-color: var(--color-accent-color);
    --mat-form-field-filled-focus-active-indicator-color: var(--color-accent-color);
    --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #C9A4FF 87%, transparent);
    --mat-form-field-outlined-caret-color: var(--color-accent-color);
    --mat-form-field-outlined-focus-outline-color: var(--color-accent-color);
    --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #C9A4FF 87%, transparent)
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-form-field.mat-accent {
        --mat-form-field-focus-select-arrow-color: color-mix(in srgb, var(--color-accent-color) 87%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-form-field.mat-accent {
        --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, var(--color-accent-color) 87%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-form-field.mat-accent {
        --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, var(--color-accent-color) 87%, transparent)
    }
}

.mat-mdc-form-field.mat-warn {
    --mat-form-field-focus-select-arrow-color: color-mix(in srgb, #f44336 87%, transparent);
    --mat-form-field-filled-caret-color: #f44336;
    --mat-form-field-filled-focus-active-indicator-color: #f44336;
    --mat-form-field-filled-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent);
    --mat-form-field-outlined-caret-color: #f44336;
    --mat-form-field-outlined-focus-outline-color: #f44336;
    --mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, #f44336 87%, transparent)
}

html {
    --mat-form-field-container-height: 56px;
    --mat-form-field-filled-label-display: block;
    --mat-form-field-container-vertical-padding: 16px;
    --mat-form-field-filled-with-label-container-padding-top: 24px;
    --mat-form-field-filled-with-label-container-padding-bottom: 8px
}

html {
    --mat-form-field-container-text-font: Roboto, sans-serif;
    --mat-form-field-container-text-line-height: 24px;
    --mat-form-field-container-text-size: 16px;
    --mat-form-field-container-text-tracking: .03125em;
    --mat-form-field-container-text-weight: 400;
    --mat-form-field-outlined-label-text-populated-size: 16px;
    --mat-form-field-subscript-text-font: Roboto, sans-serif;
    --mat-form-field-subscript-text-line-height: 20px;
    --mat-form-field-subscript-text-size: 12px;
    --mat-form-field-subscript-text-tracking: .0333333333em;
    --mat-form-field-subscript-text-weight: 400;
    --mat-form-field-filled-label-text-font: Roboto, sans-serif;
    --mat-form-field-filled-label-text-size: 16px;
    --mat-form-field-filled-label-text-tracking: .03125em;
    --mat-form-field-filled-label-text-weight: 400;
    --mat-form-field-outlined-label-text-font: Roboto, sans-serif;
    --mat-form-field-outlined-label-text-size: 16px;
    --mat-form-field-outlined-label-text-tracking: .03125em;
    --mat-form-field-outlined-label-text-weight: 400
}

html {
    --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)
}

html,
.mat-mdc-form-field.mat-accent {
    --mat-select-panel-background-color: white;
    --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);
    --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-select-placeholder-text-color: rgba(0, 0, 0, .54);
    --mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);
    --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-select-focused-arrow-color: var(--color-accent-color);
    --mat-select-invalid-arrow-color: #f44336
}

.mat-mdc-form-field.mat-warn {
    --mat-select-panel-background-color: white;
    --mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);
    --mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-select-placeholder-text-color: rgba(0, 0, 0, .54);
    --mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);
    --mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-select-focused-arrow-color: #f44336;
    --mat-select-invalid-arrow-color: #f44336
}

html {
    --mat-select-arrow-transform: translateY(-8px)
}

html {
    --mat-select-trigger-text-font: Roboto, sans-serif;
    --mat-select-trigger-text-line-height: 24px;
    --mat-select-trigger-text-size: 16px;
    --mat-select-trigger-text-tracking: .03125em;
    --mat-select-trigger-text-weight: 400
}

html {
    --mat-autocomplete-container-shape: 4px;
    --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)
}

html {
    --mat-autocomplete-background-color: white
}

html {
    --mat-dialog-container-shape: 4px;
    --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
    --mat-dialog-container-max-width: 80vw;
    --mat-dialog-container-small-max-width: 80vw;
    --mat-dialog-container-min-width: 0;
    --mat-dialog-actions-alignment: start;
    --mat-dialog-actions-padding: 8px;
    --mat-dialog-content-padding: 20px 24px;
    --mat-dialog-with-actions-content-padding: 20px 24px;
    --mat-dialog-headline-padding: 0 24px 9px
}

html {
    --mat-dialog-container-color: white;
    --mat-dialog-subhead-color: rgba(0, 0, 0, .87);
    --mat-dialog-supporting-text-color: rgba(0, 0, 0, .54)
}

html {
    --mat-dialog-subhead-font: Roboto, sans-serif;
    --mat-dialog-subhead-line-height: 32px;
    --mat-dialog-subhead-size: 20px;
    --mat-dialog-subhead-weight: 500;
    --mat-dialog-subhead-tracking: .0125em;
    --mat-dialog-supporting-text-font: Roboto, sans-serif;
    --mat-dialog-supporting-text-line-height: 24px;
    --mat-dialog-supporting-text-size: 16px;
    --mat-dialog-supporting-text-weight: 400;
    --mat-dialog-supporting-text-tracking: .03125em
}

.mat-mdc-standard-chip {
    --mat-chip-container-shape-radius: 16px;
    --mat-chip-disabled-container-opacity: .4;
    --mat-chip-disabled-outline-color: transparent;
    --mat-chip-flat-selected-outline-width: 0;
    --mat-chip-focus-outline-color: transparent;
    --mat-chip-hover-state-layer-opacity: .04;
    --mat-chip-outline-color: transparent;
    --mat-chip-outline-width: 0;
    --mat-chip-selected-hover-state-layer-opacity: .04;
    --mat-chip-selected-trailing-action-state-layer-color: transparent;
    --mat-chip-trailing-action-focus-opacity: 1;
    --mat-chip-trailing-action-focus-state-layer-opacity: 0;
    --mat-chip-trailing-action-hover-state-layer-opacity: 0;
    --mat-chip-trailing-action-opacity: .54;
    --mat-chip-trailing-action-state-layer-color: transparent;
    --mat-chip-with-avatar-avatar-shape-radius: 14px;
    --mat-chip-with-avatar-avatar-size: 28px;
    --mat-chip-with-avatar-disabled-avatar-opacity: 1;
    --mat-chip-with-icon-disabled-icon-opacity: 1;
    --mat-chip-with-icon-icon-size: 18px;
    --mat-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1
}

.mat-mdc-standard-chip {
    --mat-chip-disabled-label-text-color: rgba(0, 0, 0, .87);
    --mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-chip-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-chip-focus-state-layer-opacity: .12;
    --mat-chip-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-chip-label-text-color: rgba(0, 0, 0, .87);
    --mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, .87);
    --mat-chip-selected-focus-state-layer-color: .12;
    --mat-chip-selected-focus-state-layer-opacity: .12;
    --mat-chip-selected-hover-state-layer-color: .04;
    --mat-chip-selected-label-text-color: rgba(0, 0, 0, .87);
    --mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, .87);
    --mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, .87);
    --mat-chip-with-icon-icon-color: rgba(0, 0, 0, .87);
    --mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, .87);
    --mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, .87);
    --mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, .87)
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary,
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
    --mat-chip-disabled-label-text-color: white;
    --mat-chip-elevated-container-color: var(--color-accent-color);
    --mat-chip-elevated-disabled-container-color: var(--color-accent-color);
    --mat-chip-elevated-selected-container-color: var(--color-accent-color);
    --mat-chip-flat-disabled-selected-container-color: var(--color-accent-color);
    --mat-chip-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-chip-focus-state-layer-opacity: .12;
    --mat-chip-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-chip-label-text-color: white;
    --mat-chip-selected-disabled-trailing-icon-color: white;
    --mat-chip-selected-focus-state-layer-color: .12;
    --mat-chip-selected-focus-state-layer-opacity: .12;
    --mat-chip-selected-hover-state-layer-color: .04;
    --mat-chip-selected-label-text-color: white;
    --mat-chip-selected-trailing-icon-color: white;
    --mat-chip-with-icon-disabled-icon-color: white;
    --mat-chip-with-icon-icon-color: white;
    --mat-chip-with-icon-selected-icon-color: white;
    --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
    --mat-chip-with-trailing-icon-trailing-icon-color: white
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
    --mat-chip-disabled-label-text-color: white;
    --mat-chip-elevated-container-color: #f44336;
    --mat-chip-elevated-disabled-container-color: #f44336;
    --mat-chip-elevated-selected-container-color: #f44336;
    --mat-chip-flat-disabled-selected-container-color: #f44336;
    --mat-chip-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-chip-focus-state-layer-opacity: .12;
    --mat-chip-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-chip-label-text-color: white;
    --mat-chip-selected-disabled-trailing-icon-color: white;
    --mat-chip-selected-focus-state-layer-color: .12;
    --mat-chip-selected-focus-state-layer-opacity: .12;
    --mat-chip-selected-hover-state-layer-color: .04;
    --mat-chip-selected-label-text-color: white;
    --mat-chip-selected-trailing-icon-color: white;
    --mat-chip-with-icon-disabled-icon-color: white;
    --mat-chip-with-icon-icon-color: white;
    --mat-chip-with-icon-selected-icon-color: white;
    --mat-chip-with-trailing-icon-disabled-trailing-icon-color: white;
    --mat-chip-with-trailing-icon-trailing-icon-color: white
}

.mat-mdc-chip.mat-mdc-standard-chip {
    --mat-chip-container-height: 32px
}

.mat-mdc-standard-chip {
    --mat-chip-label-text-font: Roboto, sans-serif;
    --mat-chip-label-text-line-height: 20px;
    --mat-chip-label-text-size: 14px;
    --mat-chip-label-text-tracking: .0178571429em;
    --mat-chip-label-text-weight: 400
}

html {
    --mat-slide-toggle-disabled-handle-opacity: .38;
    --mat-slide-toggle-disabled-selected-handle-opacity: .38;
    --mat-slide-toggle-disabled-selected-icon-opacity: .38;
    --mat-slide-toggle-disabled-track-opacity: .12;
    --mat-slide-toggle-disabled-unselected-handle-opacity: .38;
    --mat-slide-toggle-disabled-unselected-icon-opacity: .38;
    --mat-slide-toggle-disabled-unselected-track-outline-color: transparent;
    --mat-slide-toggle-disabled-unselected-track-outline-width: 1px;
    --mat-slide-toggle-handle-height: 20px;
    --mat-slide-toggle-handle-shape: 10px;
    --mat-slide-toggle-handle-width: 20px;
    --mat-slide-toggle-hidden-track-opacity: 1;
    --mat-slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(.4, 0, .6, 1);
    --mat-slide-toggle-pressed-handle-size: 20px;
    --mat-slide-toggle-selected-focus-state-layer-opacity: .12;
    --mat-slide-toggle-selected-handle-horizontal-margin: 0;
    --mat-slide-toggle-selected-handle-size: 20px;
    --mat-slide-toggle-selected-hover-state-layer-opacity: .04;
    --mat-slide-toggle-selected-icon-size: 18px;
    --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
    --mat-slide-toggle-selected-pressed-state-layer-opacity: .12;
    --mat-slide-toggle-selected-track-outline-color: transparent;
    --mat-slide-toggle-selected-track-outline-width: 1px;
    --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
    --mat-slide-toggle-track-height: 14px;
    --mat-slide-toggle-track-outline-color: transparent;
    --mat-slide-toggle-track-outline-width: 1px;
    --mat-slide-toggle-track-shape: 7px;
    --mat-slide-toggle-track-width: 36px;
    --mat-slide-toggle-unselected-focus-state-layer-opacity: .12;
    --mat-slide-toggle-unselected-handle-horizontal-margin: 0;
    --mat-slide-toggle-unselected-handle-size: 20px;
    --mat-slide-toggle-unselected-hover-state-layer-opacity: .12;
    --mat-slide-toggle-unselected-icon-size: 18px;
    --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
    --mat-slide-toggle-unselected-pressed-state-layer-opacity: .1;
    --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
    --mat-slide-toggle-visible-track-opacity: 1;
    --mat-slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, .2, 1);
    --mat-slide-toggle-with-icon-handle-size: 20px;
    --mat-slide-toggle-touch-target-size: 48px
}

html {
    --mat-slide-toggle-selected-icon-color: white;
    --mat-slide-toggle-disabled-selected-icon-color: white;
    --mat-slide-toggle-selected-focus-state-layer-color: var(--color-accent-color);
    --mat-slide-toggle-selected-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-hover-state-layer-color: var(--color-accent-color);
    --mat-slide-toggle-selected-pressed-state-layer-color: var(--color-accent-color);
    --mat-slide-toggle-selected-focus-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-hover-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-pressed-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-focus-track-color: #81c784;
    --mat-slide-toggle-selected-hover-track-color: #81c784;
    --mat-slide-toggle-selected-pressed-track-color: #81c784;
    --mat-slide-toggle-selected-track-color: #81c784;
    --mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-slide-toggle-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
    --mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
    --mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    --mat-slide-toggle-handle-surface-color: white;
    --mat-slide-toggle-label-text-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-unselected-hover-handle-color: #424242;
    --mat-slide-toggle-unselected-focus-handle-color: #424242;
    --mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, .12);
    --mat-slide-toggle-unselected-icon-color: #f6f6f6;
    --mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, .54);
    --mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, .12);
    --mat-slide-toggle-unselected-pressed-handle-color: #424242;
    --mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, .12);
    --mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, .87);
    --mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, .12)
}

.mat-mdc-slide-toggle.mat-accent {
    --mat-slide-toggle-selected-icon-color: white;
    --mat-slide-toggle-disabled-selected-icon-color: white;
    --mat-slide-toggle-selected-focus-state-layer-color: var(--color-accent-color);
    --mat-slide-toggle-selected-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-hover-state-layer-color: var(--color-accent-color);
    --mat-slide-toggle-selected-pressed-state-layer-color: var(--color-accent-color);
    --mat-slide-toggle-selected-focus-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-hover-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-pressed-handle-color: var(--color-accent-color);
    --mat-slide-toggle-selected-focus-track-color: #f06292;
    --mat-slide-toggle-selected-hover-track-color: #f06292;
    --mat-slide-toggle-selected-pressed-track-color: #f06292;
    --mat-slide-toggle-selected-track-color: #f06292
}

.mat-mdc-slide-toggle.mat-warn {
    --mat-slide-toggle-selected-icon-color: white;
    --mat-slide-toggle-disabled-selected-icon-color: white;
    --mat-slide-toggle-selected-focus-state-layer-color: #f44336;
    --mat-slide-toggle-selected-handle-color: #f44336;
    --mat-slide-toggle-selected-hover-state-layer-color: #f44336;
    --mat-slide-toggle-selected-pressed-state-layer-color: #f44336;
    --mat-slide-toggle-selected-focus-handle-color: #f44336;
    --mat-slide-toggle-selected-hover-handle-color: #f44336;
    --mat-slide-toggle-selected-pressed-handle-color: #f44336;
    --mat-slide-toggle-selected-focus-track-color: #e57373;
    --mat-slide-toggle-selected-hover-track-color: #e57373;
    --mat-slide-toggle-selected-pressed-track-color: #e57373;
    --mat-slide-toggle-selected-track-color: #e57373
}

html {
    --mat-slide-toggle-state-layer-size: 40px;
    --mat-slide-toggle-touch-target-display: block
}

html,
html .mat-mdc-slide-toggle {
    --mat-slide-toggle-label-text-font: Roboto, sans-serif;
    --mat-slide-toggle-label-text-line-height: 20px;
    --mat-slide-toggle-label-text-size: 14px;
    --mat-slide-toggle-label-text-tracking: .0178571429em;
    --mat-slide-toggle-label-text-weight: 400
}

html {
    --mat-radio-disabled-selected-icon-opacity: .38;
    --mat-radio-disabled-unselected-icon-opacity: .38;
    --mat-radio-state-layer-size: 40px;
    --mat-radio-touch-target-size: 48px
}

.mat-mdc-radio-button.mat-primary,
.mat-mdc-radio-button.mat-accent {
    --mat-radio-checked-ripple-color: var(--color-accent-color);
    --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-label-text-color: rgba(0, 0, 0, .87);
    --mat-radio-ripple-color: rgba(0, 0, 0, .87);
    --mat-radio-selected-focus-icon-color: var(--color-accent-color);
    --mat-radio-selected-hover-icon-color: var(--color-accent-color);
    --mat-radio-selected-icon-color: var(--color-accent-color);
    --mat-radio-selected-pressed-icon-color: var(--color-accent-color);
    --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .87)
}

.mat-mdc-radio-button.mat-warn {
    --mat-radio-checked-ripple-color: #f44336;
    --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-label-text-color: rgba(0, 0, 0, .87);
    --mat-radio-ripple-color: rgba(0, 0, 0, .87);
    --mat-radio-selected-focus-icon-color: #f44336;
    --mat-radio-selected-hover-icon-color: #f44336;
    --mat-radio-selected-icon-color: #f44336;
    --mat-radio-selected-pressed-icon-color: #f44336;
    --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .87)
}

html {
    --mat-radio-state-layer-size: 40px;
    --mat-radio-touch-target-display: block
}

html {
    --mat-radio-label-text-font: Roboto, sans-serif;
    --mat-radio-label-text-line-height: 20px;
    --mat-radio-label-text-size: 14px;
    --mat-radio-label-text-tracking: .0178571429em;
    --mat-radio-label-text-weight: 400
}

html {
    --mat-slider-active-track-height: 6px;
    --mat-slider-active-track-shape: 9999px;
    --mat-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    --mat-slider-handle-height: 20px;
    --mat-slider-handle-shape: 50%;
    --mat-slider-handle-width: 20px;
    --mat-slider-inactive-track-height: 4px;
    --mat-slider-inactive-track-shape: 9999px;
    --mat-slider-value-indicator-border-radius: 4px;
    --mat-slider-value-indicator-caret-display: block;
    --mat-slider-value-indicator-container-transform: translateX(-50%);
    --mat-slider-value-indicator-height: 32px;
    --mat-slider-value-indicator-padding: 0 12px;
    --mat-slider-value-indicator-text-transform: none;
    --mat-slider-value-indicator-width: auto;
    --mat-slider-with-overlap-handle-outline-width: 1px;
    --mat-slider-with-tick-marks-active-container-opacity: .6;
    --mat-slider-with-tick-marks-container-shape: 50%;
    --mat-slider-with-tick-marks-container-size: 2px;
    --mat-slider-with-tick-marks-inactive-container-opacity: .6;
    --mat-slider-value-indicator-transform-origin: bottom
}

html {
    --mat-slider-active-track-color: var(--color-accent-color);
    --mat-slider-focus-handle-color: var(--color-accent-color);
    --mat-slider-handle-color: var(--color-accent-color);
    --mat-slider-hover-handle-color: var(--color-accent-color);
    --mat-slider-focus-state-layer-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-slider-hover-state-layer-color: color-mix(in srgb, #C9A4FF 4%, transparent);
    --mat-slider-inactive-track-color: var(--color-accent-color);
    --mat-slider-ripple-color: var(--color-accent-color);
    --mat-slider-with-tick-marks-active-container-color: white;
    --mat-slider-with-tick-marks-inactive-container-color: var(--color-accent-color);
    --mat-slider-disabled-active-track-color: rgba(0, 0, 0, .87);
    --mat-slider-disabled-handle-color: rgba(0, 0, 0, .87);
    --mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, .87);
    --mat-slider-label-container-color: #424242;
    --mat-slider-label-label-text-color: white;
    --mat-slider-value-indicator-opacity: 1;
    --mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, .87);
    --mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, .87)
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-slider-focus-state-layer-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-slider-hover-state-layer-color: color-mix(in srgb, var(--color-accent-color) 4%, transparent)
    }
}

.mat-accent {
    --mat-slider-active-track-color: var(--color-accent-color);
    --mat-slider-focus-handle-color: var(--color-accent-color);
    --mat-slider-handle-color: var(--color-accent-color);
    --mat-slider-hover-handle-color: var(--color-accent-color);
    --mat-slider-focus-state-layer-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-slider-hover-state-layer-color: color-mix(in srgb, #C9A4FF 4%, transparent);
    --mat-slider-inactive-track-color: var(--color-accent-color);
    --mat-slider-ripple-color: var(--color-accent-color);
    --mat-slider-with-tick-marks-active-container-color: white;
    --mat-slider-with-tick-marks-inactive-container-color: var(--color-accent-color)
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-accent {
        --mat-slider-focus-state-layer-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-accent {
        --mat-slider-hover-state-layer-color: color-mix(in srgb, var(--color-accent-color) 4%, transparent)
    }
}

.mat-warn {
    --mat-slider-active-track-color: #f44336;
    --mat-slider-focus-handle-color: #f44336;
    --mat-slider-handle-color: #f44336;
    --mat-slider-hover-handle-color: #f44336;
    --mat-slider-focus-state-layer-color: color-mix(in srgb, #f44336 12%, transparent);
    --mat-slider-hover-state-layer-color: color-mix(in srgb, #f44336 4%, transparent);
    --mat-slider-inactive-track-color: #f44336;
    --mat-slider-ripple-color: #f44336;
    --mat-slider-with-tick-marks-active-container-color: white;
    --mat-slider-with-tick-marks-inactive-container-color: #f44336
}

html {
    --mat-slider-label-label-text-font: Roboto, sans-serif;
    --mat-slider-label-label-text-size: 14px;
    --mat-slider-label-label-text-line-height: 22px;
    --mat-slider-label-label-text-tracking: .0071428571em;
    --mat-slider-label-label-text-weight: 500
}

html {
    --mat-menu-container-shape: 4px;
    --mat-menu-divider-bottom-spacing: 0;
    --mat-menu-divider-top-spacing: 0;
    --mat-menu-item-spacing: 16px;
    --mat-menu-item-icon-size: 24px;
    --mat-menu-item-leading-spacing: 16px;
    --mat-menu-item-trailing-spacing: 16px;
    --mat-menu-item-with-icon-leading-spacing: 16px;
    --mat-menu-item-with-icon-trailing-spacing: 16px;
    --mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)
}

html {
    --mat-menu-item-label-text-color: rgba(0, 0, 0, .87);
    --mat-menu-item-icon-color: rgba(0, 0, 0, .87);
    --mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 4%, transparent);
    --mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-menu-container-color: white;
    --mat-menu-divider-color: rgba(0, 0, 0, .12)
}

html {
    --mat-menu-item-label-text-font: Roboto, sans-serif;
    --mat-menu-item-label-text-size: 16px;
    --mat-menu-item-label-text-tracking: .03125em;
    --mat-menu-item-label-text-line-height: 24px;
    --mat-menu-item-label-text-weight: 400
}

html {
    --mat-list-active-indicator-color: transparent;
    --mat-list-active-indicator-shape: 4px;
    --mat-list-list-item-container-shape: 0;
    --mat-list-list-item-leading-avatar-shape: 50%;
    --mat-list-list-item-container-color: transparent;
    --mat-list-list-item-selected-container-color: transparent;
    --mat-list-list-item-leading-avatar-color: transparent;
    --mat-list-list-item-leading-icon-size: 24px;
    --mat-list-list-item-leading-avatar-size: 40px;
    --mat-list-list-item-trailing-icon-size: 24px;
    --mat-list-list-item-disabled-state-layer-color: transparent;
    --mat-list-list-item-disabled-state-layer-opacity: 0;
    --mat-list-list-item-disabled-label-text-opacity: .38;
    --mat-list-list-item-disabled-leading-icon-opacity: .38;
    --mat-list-list-item-disabled-trailing-icon-opacity: .38
}

html {
    --mat-list-list-item-label-text-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-supporting-text-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-leading-icon-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-hover-state-layer-opacity: .04;
    --mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, .54);
    --mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-list-list-item-focus-state-layer-opacity: .12
}

.mdc-list-item__start,
.mdc-list-item__end,
.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
    --mat-radio-checked-ripple-color: var(--color-accent-color);
    --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-label-text-color: rgba(0, 0, 0, .87);
    --mat-radio-ripple-color: rgba(0, 0, 0, .87);
    --mat-radio-selected-focus-icon-color: var(--color-accent-color);
    --mat-radio-selected-hover-icon-color: var(--color-accent-color);
    --mat-radio-selected-icon-color: var(--color-accent-color);
    --mat-radio-selected-pressed-icon-color: var(--color-accent-color);
    --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .87)
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
    --mat-radio-checked-ripple-color: #f44336;
    --mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-label-text-color: rgba(0, 0, 0, .87);
    --mat-radio-ripple-color: rgba(0, 0, 0, .87);
    --mat-radio-selected-focus-icon-color: #f44336;
    --mat-radio-selected-hover-icon-color: #f44336;
    --mat-radio-selected-icon-color: #f44336;
    --mat-radio-selected-pressed-icon-color: #f44336;
    --mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-radio-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .87)
}

.mat-mdc-list-option,
.mat-mdc-list-option.mat-accent {
    --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-label-text-color: rgba(0, 0, 0, .87);
    --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-selected-checkmark-color: white;
    --mat-checkbox-selected-focus-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-hover-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-pressed-icon-color: var(--color-accent-color);
    --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-checkbox-selected-focus-state-layer-color: var(--color-accent-color);
    --mat-checkbox-selected-hover-state-layer-color: var(--color-accent-color);
    --mat-checkbox-selected-pressed-state-layer-color: var(--color-accent-color);
    --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-list-option.mat-warn {
    --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-label-text-color: rgba(0, 0, 0, .87);
    --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-selected-checkmark-color: white;
    --mat-checkbox-selected-focus-icon-color: #f44336;
    --mat-checkbox-selected-hover-icon-color: #f44336;
    --mat-checkbox-selected-icon-color: #f44336;
    --mat-checkbox-selected-pressed-icon-color: #f44336;
    --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-checkbox-selected-focus-state-layer-color: #f44336;
    --mat-checkbox-selected-hover-state-layer-color: #f44336;
    --mat-checkbox-selected-pressed-state-layer-color: #f44336;
    --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
    color: var(--color-accent-color)
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
    opacity: 1
}

html {
    --mat-list-list-item-leading-icon-start-space: 16px;
    --mat-list-list-item-leading-icon-end-space: 32px;
    --mat-list-list-item-one-line-container-height: 48px;
    --mat-list-list-item-two-line-container-height: 64px;
    --mat-list-list-item-three-line-container-height: 88px
}

.mdc-list-item__start,
.mdc-list-item__end {
    --mat-radio-state-layer-size: 40px;
    --mat-radio-touch-target-display: block
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
    height: 56px
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
    height: 72px
}

html {
    --mat-list-list-item-label-text-font: Roboto, sans-serif;
    --mat-list-list-item-label-text-line-height: 24px;
    --mat-list-list-item-label-text-size: 16px;
    --mat-list-list-item-label-text-tracking: .03125em;
    --mat-list-list-item-label-text-weight: 400;
    --mat-list-list-item-supporting-text-font: Roboto, sans-serif;
    --mat-list-list-item-supporting-text-line-height: 20px;
    --mat-list-list-item-supporting-text-size: 14px;
    --mat-list-list-item-supporting-text-tracking: .0178571429em;
    --mat-list-list-item-supporting-text-weight: 400;
    --mat-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;
    --mat-list-list-item-trailing-supporting-text-line-height: 20px;
    --mat-list-list-item-trailing-supporting-text-size: 12px;
    --mat-list-list-item-trailing-supporting-text-tracking: .0333333333em;
    --mat-list-list-item-trailing-supporting-text-weight: 400
}

.mdc-list-group__subheader {
    font: 400 16px/28px Roboto, sans-serif;
    letter-spacing: .009375em
}

html {
    --mat-paginator-page-size-select-width: 84px;
    --mat-paginator-page-size-select-touch-target-height: 48px
}

html {
    --mat-paginator-container-text-color: rgba(0, 0, 0, .87);
    --mat-paginator-container-background-color: white;
    --mat-paginator-enabled-icon-color: rgba(0, 0, 0, .54);
    --mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent)
}

html {
    --mat-paginator-container-size: 56px;
    --mat-paginator-form-field-container-height: 40px;
    --mat-paginator-form-field-container-vertical-padding: 8px;
    --mat-paginator-touch-target-display: block
}

html {
    --mat-paginator-container-text-font: Roboto, sans-serif;
    --mat-paginator-container-text-line-height: 20px;
    --mat-paginator-container-text-size: 12px;
    --mat-paginator-container-text-tracking: .0333333333em;
    --mat-paginator-container-text-weight: 400;
    --mat-paginator-select-trigger-text-size: 12px
}

html {
    --mat-tab-container-height: 48px;
    --mat-tab-divider-color: transparent;
    --mat-tab-divider-height: 0;
    --mat-tab-active-indicator-height: 2px;
    --mat-tab-active-indicator-shape: 0
}

.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar,
.mat-mdc-tab-group.mat-accent,
.mat-mdc-tab-nav-bar.mat-accent {
    --mat-tab-disabled-ripple-color: rgba(0, 0, 0, .54);
    --mat-tab-pagination-icon-color: rgba(0, 0, 0, .87);
    --mat-tab-inactive-label-text-color: rgba(0, 0, 0, .54);
    --mat-tab-active-label-text-color: var(--color-accent-color);
    --mat-tab-active-ripple-color: var(--color-accent-color);
    --mat-tab-inactive-ripple-color: var(--color-accent-color);
    --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, .54);
    --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, .54);
    --mat-tab-active-focus-label-text-color: var(--color-accent-color);
    --mat-tab-active-hover-label-text-color: var(--color-accent-color);
    --mat-tab-active-focus-indicator-color: var(--color-accent-color);
    --mat-tab-active-hover-indicator-color: var(--color-accent-color);
    --mat-tab-active-indicator-color: var(--color-accent-color)
}

.mat-mdc-tab-group.mat-warn,
.mat-mdc-tab-nav-bar.mat-warn {
    --mat-tab-disabled-ripple-color: rgba(0, 0, 0, .54);
    --mat-tab-pagination-icon-color: rgba(0, 0, 0, .87);
    --mat-tab-inactive-label-text-color: rgba(0, 0, 0, .54);
    --mat-tab-active-label-text-color: #f44336;
    --mat-tab-active-ripple-color: #f44336;
    --mat-tab-inactive-ripple-color: #f44336;
    --mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, .54);
    --mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, .54);
    --mat-tab-active-focus-label-text-color: #f44336;
    --mat-tab-active-hover-label-text-color: #f44336;
    --mat-tab-active-focus-indicator-color: #f44336;
    --mat-tab-active-hover-indicator-color: #f44336;
    --mat-tab-active-indicator-color: #f44336
}

.mat-mdc-tab-group.mat-background-primary,
.mat-mdc-tab-nav-bar.mat-background-primary,
.mat-mdc-tab-group.mat-background-accent,
.mat-mdc-tab-nav-bar.mat-background-accent {
    --mat-tab-background-color: var(--color-accent-color);
    --mat-tab-foreground-color: white
}

.mat-mdc-tab-group.mat-background-warn,
.mat-mdc-tab-nav-bar.mat-background-warn {
    --mat-tab-background-color: #f44336;
    --mat-tab-foreground-color: white
}

.mat-mdc-tab-header {
    --mat-tab-container-height: 48px
}

.mat-mdc-tab-header {
    --mat-tab-label-text-font: Roboto, sans-serif;
    --mat-tab-label-text-size: 14px;
    --mat-tab-label-text-tracking: .0892857143em;
    --mat-tab-label-text-line-height: 36px;
    --mat-tab-label-text-weight: 500
}

html {
    --mat-checkbox-disabled-selected-checkmark-color: white;
    --mat-checkbox-selected-focus-state-layer-opacity: .12;
    --mat-checkbox-selected-hover-state-layer-opacity: .04;
    --mat-checkbox-selected-pressed-state-layer-opacity: .12;
    --mat-checkbox-unselected-focus-state-layer-opacity: .12;
    --mat-checkbox-unselected-hover-state-layer-opacity: .04;
    --mat-checkbox-unselected-pressed-state-layer-opacity: .12;
    --mat-checkbox-touch-target-size: 48px
}

html {
    --mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-label-text-color: rgba(0, 0, 0, .87);
    --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-selected-checkmark-color: white;
    --mat-checkbox-selected-focus-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-hover-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-pressed-icon-color: var(--color-accent-color);
    --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-checkbox-selected-focus-state-layer-color: var(--color-accent-color);
    --mat-checkbox-selected-hover-state-layer-color: var(--color-accent-color);
    --mat-checkbox-selected-pressed-state-layer-color: var(--color-accent-color);
    --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-checkbox.mat-primary {
    --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-selected-checkmark-color: white;
    --mat-checkbox-selected-focus-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-hover-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-icon-color: var(--color-accent-color);
    --mat-checkbox-selected-pressed-icon-color: var(--color-accent-color);
    --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-checkbox-selected-focus-state-layer-color: var(--color-accent-color);
    --mat-checkbox-selected-hover-state-layer-color: var(--color-accent-color);
    --mat-checkbox-selected-pressed-state-layer-color: var(--color-accent-color);
    --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-checkbox.mat-warn {
    --mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-checkbox-selected-checkmark-color: white;
    --mat-checkbox-selected-focus-icon-color: #f44336;
    --mat-checkbox-selected-hover-icon-color: #f44336;
    --mat-checkbox-selected-icon-color: #f44336;
    --mat-checkbox-selected-pressed-icon-color: #f44336;
    --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);
    --mat-checkbox-selected-focus-state-layer-color: #f44336;
    --mat-checkbox-selected-hover-state-layer-color: #f44336;
    --mat-checkbox-selected-pressed-state-layer-color: #f44336;
    --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, .87);
    --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, .87)
}

html {
    --mat-checkbox-touch-target-display: block;
    --mat-checkbox-state-layer-size: 40px
}

html {
    --mat-checkbox-label-text-font: Roboto, sans-serif;
    --mat-checkbox-label-text-line-height: 20px;
    --mat-checkbox-label-text-size: 14px;
    --mat-checkbox-label-text-tracking: .0178571429em;
    --mat-checkbox-label-text-weight: 400
}

html {
    --mat-button-filled-container-shape: 4px;
    --mat-button-filled-horizontal-padding: 16px;
    --mat-button-filled-icon-offset: -4px;
    --mat-button-filled-icon-spacing: 8px;
    --mat-button-filled-touch-target-size: 48px;
    --mat-button-outlined-container-shape: 4px;
    --mat-button-outlined-horizontal-padding: 15px;
    --mat-button-outlined-icon-offset: -4px;
    --mat-button-outlined-icon-spacing: 8px;
    --mat-button-outlined-keep-touch-target: false;
    --mat-button-outlined-outline-width: 1px;
    --mat-button-outlined-touch-target-size: 48px;
    --mat-button-protected-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    --mat-button-protected-container-shape: 4px;
    --mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
    --mat-button-protected-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    --mat-button-protected-horizontal-padding: 16px;
    --mat-button-protected-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    --mat-button-protected-icon-offset: -4px;
    --mat-button-protected-icon-spacing: 8px;
    --mat-button-protected-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-button-protected-touch-target-size: 48px;
    --mat-button-text-container-shape: 4px;
    --mat-button-text-horizontal-padding: 8px;
    --mat-button-text-icon-offset: 0;
    --mat-button-text-icon-spacing: 8px;
    --mat-button-text-with-icon-horizontal-padding: 8px;
    --mat-button-text-touch-target-size: 48px;
    --mat-button-tonal-container-shape: 4px;
    --mat-button-tonal-horizontal-padding: 16px;
    --mat-button-tonal-icon-offset: -4px;
    --mat-button-tonal-icon-spacing: 8px;
    --mat-button-tonal-touch-target-size: 48px
}

html {
    --mat-button-filled-container-color: white;
    --mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-button-filled-focus-state-layer-opacity: .12;
    --mat-button-filled-hover-state-layer-opacity: .04;
    --mat-button-filled-label-text-color: rgba(0, 0, 0, .87);
    --mat-button-filled-pressed-state-layer-opacity: .12;
    --mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-filled-state-layer-color: rgba(0, 0, 0, .87);
    --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, .12);
    --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-button-outlined-focus-state-layer-opacity: .12;
    --mat-button-outlined-hover-state-layer-opacity: .04;
    --mat-button-outlined-label-text-color: rgba(0, 0, 0, .87);
    --mat-button-outlined-outline-color: rgba(0, 0, 0, .12);
    --mat-button-outlined-pressed-state-layer-opacity: .12;
    --mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-outlined-state-layer-color: rgba(0, 0, 0, .87);
    --mat-button-protected-container-color: white;
    --mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-button-protected-focus-state-layer-opacity: .12;
    --mat-button-protected-hover-state-layer-opacity: .04;
    --mat-button-protected-label-text-color: rgba(0, 0, 0, .87);
    --mat-button-protected-pressed-state-layer-opacity: .12;
    --mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-protected-state-layer-color: rgba(0, 0, 0, .87);
    --mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-button-text-focus-state-layer-opacity: .12;
    --mat-button-text-hover-state-layer-opacity: .04;
    --mat-button-text-label-text-color: rgba(0, 0, 0, .87);
    --mat-button-text-pressed-state-layer-opacity: .12;
    --mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-text-state-layer-color: rgba(0, 0, 0, .87);
    --mat-button-tonal-container-color: white;
    --mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-button-tonal-focus-state-layer-opacity: .12;
    --mat-button-tonal-hover-state-layer-opacity: .04;
    --mat-button-tonal-label-text-color: rgba(0, 0, 0, .87);
    --mat-button-tonal-pressed-state-layer-opacity: .12;
    --mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-tonal-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-outlined-button.mat-primary,
.mat-tonal-button.mat-primary {
    --mat-button-filled-container-color: var(--color-accent-color);
    --mat-button-filled-label-text-color: white;
    --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-filled-state-layer-color: white;
    --mat-button-outlined-label-text-color: var(--color-accent-color);
    --mat-button-outlined-outline-color: rgba(0, 0, 0, .12);
    --mat-button-outlined-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-button-outlined-state-layer-color: var(--color-accent-color);
    --mat-button-protected-container-color: var(--color-accent-color);
    --mat-button-protected-label-text-color: white;
    --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-protected-state-layer-color: white;
    --mat-button-text-label-text-color: var(--color-accent-color);
    --mat-button-text-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-button-text-state-layer-color: var(--color-accent-color);
    --mat-button-tonal-container-color: var(--color-accent-color);
    --mat-button-tonal-label-text-color: white;
    --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-tonal-state-layer-color: white
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-mdc-button.mat-primary,
    .mat-mdc-unelevated-button.mat-primary,
    .mat-mdc-raised-button.mat-primary,
    .mat-mdc-outlined-button.mat-primary,
    .mat-tonal-button.mat-primary {
        --mat-button-outlined-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-mdc-button.mat-primary,
    .mat-mdc-unelevated-button.mat-primary,
    .mat-mdc-raised-button.mat-primary,
    .mat-mdc-outlined-button.mat-primary,
    .mat-tonal-button.mat-primary {
        --mat-button-text-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

.mat-mdc-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-raised-button.mat-accent,
.mat-mdc-outlined-button.mat-accent,
.mat-tonal-button.mat-accent {
    --mat-button-filled-container-color: var(--color-accent-color);
    --mat-button-filled-label-text-color: white;
    --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-filled-state-layer-color: white;
    --mat-button-outlined-label-text-color: var(--color-accent-color);
    --mat-button-outlined-outline-color: rgba(0, 0, 0, .12);
    --mat-button-outlined-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-button-outlined-state-layer-color: var(--color-accent-color);
    --mat-button-protected-container-color: var(--color-accent-color);
    --mat-button-protected-label-text-color: white;
    --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-protected-state-layer-color: white;
    --mat-button-text-label-text-color: var(--color-accent-color);
    --mat-button-text-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-button-text-state-layer-color: var(--color-accent-color);
    --mat-button-tonal-container-color: var(--color-accent-color);
    --mat-button-tonal-label-text-color: white;
    --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-tonal-state-layer-color: white
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-mdc-button.mat-accent,
    .mat-mdc-unelevated-button.mat-accent,
    .mat-mdc-raised-button.mat-accent,
    .mat-mdc-outlined-button.mat-accent,
    .mat-tonal-button.mat-accent {
        --mat-button-outlined-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-mdc-button.mat-accent,
    .mat-mdc-unelevated-button.mat-accent,
    .mat-mdc-raised-button.mat-accent,
    .mat-mdc-outlined-button.mat-accent,
    .mat-tonal-button.mat-accent {
        --mat-button-text-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

.mat-mdc-button.mat-warn,
.mat-mdc-unelevated-button.mat-warn,
.mat-mdc-raised-button.mat-warn,
.mat-mdc-outlined-button.mat-warn,
.mat-tonal-button.mat-warn {
    --mat-button-filled-container-color: #f44336;
    --mat-button-filled-label-text-color: white;
    --mat-button-filled-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-filled-state-layer-color: white;
    --mat-button-outlined-label-text-color: #f44336;
    --mat-button-outlined-outline-color: rgba(0, 0, 0, .12);
    --mat-button-outlined-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
    --mat-button-outlined-state-layer-color: #f44336;
    --mat-button-protected-container-color: #f44336;
    --mat-button-protected-label-text-color: white;
    --mat-button-protected-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-protected-state-layer-color: white;
    --mat-button-text-label-text-color: #f44336;
    --mat-button-text-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
    --mat-button-text-state-layer-color: #f44336;
    --mat-button-tonal-container-color: #f44336;
    --mat-button-tonal-label-text-color: white;
    --mat-button-tonal-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-button-tonal-state-layer-color: white
}

html {
    --mat-button-filled-container-height: 36px;
    --mat-button-filled-touch-target-display: block;
    --mat-button-outlined-container-height: 36px;
    --mat-button-outlined-touch-target-display: block;
    --mat-button-protected-container-height: 36px;
    --mat-button-protected-touch-target-display: block;
    --mat-button-text-container-height: 36px;
    --mat-button-text-touch-target-display: block;
    --mat-button-tonal-container-height: 36px;
    --mat-button-tonal-touch-target-display: block
}

html {
    --mat-button-filled-label-text-font: Roboto, sans-serif;
    --mat-button-filled-label-text-size: 14px;
    --mat-button-filled-label-text-tracking: .0892857143em;
    --mat-button-filled-label-text-transform: none;
    --mat-button-filled-label-text-weight: 500;
    --mat-button-outlined-label-text-font: Roboto, sans-serif;
    --mat-button-outlined-label-text-size: 14px;
    --mat-button-outlined-label-text-tracking: .0892857143em;
    --mat-button-outlined-label-text-transform: none;
    --mat-button-outlined-label-text-weight: 500;
    --mat-button-protected-label-text-font: Roboto, sans-serif;
    --mat-button-protected-label-text-size: 14px;
    --mat-button-protected-label-text-tracking: .0892857143em;
    --mat-button-protected-label-text-transform: none;
    --mat-button-protected-label-text-weight: 500;
    --mat-button-text-label-text-font: Roboto, sans-serif;
    --mat-button-text-label-text-size: 14px;
    --mat-button-text-label-text-tracking: .0892857143em;
    --mat-button-text-label-text-transform: none;
    --mat-button-text-label-text-weight: 500;
    --mat-button-tonal-label-text-font: Roboto, sans-serif;
    --mat-button-tonal-label-text-size: 14px;
    --mat-button-tonal-label-text-tracking: .0892857143em;
    --mat-button-tonal-label-text-transform: none;
    --mat-button-tonal-label-text-weight: 500
}

html {
    --mat-icon-button-icon-size: 24px;
    --mat-icon-button-container-shape: 50%;
    --mat-icon-button-touch-target-size: 48px
}

html {
    --mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-icon-button-focus-state-layer-opacity: .12;
    --mat-icon-button-hover-state-layer-opacity: .04;
    --mat-icon-button-icon-color: inherit;
    --mat-icon-button-pressed-state-layer-opacity: .12;
    --mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-icon-button-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-icon-button.mat-primary {
    --mat-icon-button-icon-color: var(--color-accent-color);
    --mat-icon-button-state-layer-color: var(--color-accent-color);
    --mat-icon-button-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent)
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-icon-button.mat-primary {
        --mat-icon-button-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

.mat-mdc-icon-button.mat-accent {
    --mat-icon-button-icon-color: var(--color-accent-color);
    --mat-icon-button-state-layer-color: var(--color-accent-color);
    --mat-icon-button-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent)
}

@supports (color: color-mix(in lab, red, red)) {
    .mat-mdc-icon-button.mat-accent {
        --mat-icon-button-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

.mat-mdc-icon-button.mat-warn {
    --mat-icon-button-icon-color: #f44336;
    --mat-icon-button-state-layer-color: #f44336;
    --mat-icon-button-ripple-color: color-mix(in srgb, #f44336 12%, transparent)
}

html {
    --mat-icon-button-touch-target-display: block
}

.mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 48px;
    --mat-icon-button-state-layer-size: 48px;
    width: var(--mat-icon-button-state-layer-size);
    height: var(--mat-icon-button-state-layer-size);
    padding: 12px
}

html {
    --mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
    --mat-fab-container-shape: 50%;
    --mat-fab-touch-target-size: 48px;
    --mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
    --mat-fab-extended-container-height: 48px;
    --mat-fab-extended-container-shape: 24px;
    --mat-fab-extended-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-fab-extended-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);
    --mat-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);
    --mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
    --mat-fab-small-container-shape: 50%;
    --mat-fab-small-touch-target-size: 48px;
    --mat-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
    --mat-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)
}

html {
    --mat-fab-container-color: white;
    --mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-fab-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-fab-focus-state-layer-opacity: .12;
    --mat-fab-foreground-color: rgba(0, 0, 0, .87);
    --mat-fab-hover-state-layer-opacity: .04;
    --mat-fab-pressed-state-layer-opacity: .12;
    --mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-fab-small-container-color: white;
    --mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, .54);
    --mat-fab-small-focus-state-layer-opacity: .12;
    --mat-fab-small-foreground-color: rgba(0, 0, 0, .87);
    --mat-fab-small-hover-state-layer-opacity: .04;
    --mat-fab-small-pressed-state-layer-opacity: .12;
    --mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-fab-small-state-layer-color: rgba(0, 0, 0, .87);
    --mat-fab-state-layer-color: rgba(0, 0, 0, .87)
}

.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary {
    --mat-fab-container-color: var(--color-accent-color);
    --mat-fab-foreground-color: white;
    --mat-fab-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-fab-small-container-color: var(--color-accent-color);
    --mat-fab-small-foreground-color: white;
    --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-fab-small-state-layer-color: white;
    --mat-fab-state-layer-color: white
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-mdc-fab.mat-primary,
    .mat-mdc-mini-fab.mat-primary {
        --mat-fab-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

.mat-mdc-fab.mat-accent,
.mat-mdc-mini-fab.mat-accent {
    --mat-fab-container-color: var(--color-accent-color);
    --mat-fab-foreground-color: white;
    --mat-fab-ripple-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-fab-small-container-color: var(--color-accent-color);
    --mat-fab-small-foreground-color: white;
    --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-fab-small-state-layer-color: white;
    --mat-fab-state-layer-color: white
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-mdc-fab.mat-accent,
    .mat-mdc-mini-fab.mat-accent {
        --mat-fab-ripple-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

.mat-mdc-fab.mat-warn,
.mat-mdc-mini-fab.mat-warn {
    --mat-fab-container-color: #f44336;
    --mat-fab-foreground-color: white;
    --mat-fab-ripple-color: color-mix(in srgb, #f44336 12%, transparent);
    --mat-fab-small-container-color: #f44336;
    --mat-fab-small-foreground-color: white;
    --mat-fab-small-ripple-color: color-mix(in srgb, white 12%, transparent);
    --mat-fab-small-state-layer-color: white;
    --mat-fab-state-layer-color: white
}

html {
    --mat-fab-small-touch-target-display: block;
    --mat-fab-touch-target-display: block
}

html {
    --mat-fab-extended-label-text-font: Roboto, sans-serif;
    --mat-fab-extended-label-text-size: 14px;
    --mat-fab-extended-label-text-tracking: .0892857143em;
    --mat-fab-extended-label-text-weight: 500
}

html {
    --mat-snack-bar-container-shape: 4px
}

html {
    --mat-snack-bar-container-color: #424242;
    --mat-snack-bar-supporting-text-color: white;
    --mat-snack-bar-button-color: #81c784
}

html {
    --mat-snack-bar-supporting-text-font: Roboto, sans-serif;
    --mat-snack-bar-supporting-text-line-height: 20px;
    --mat-snack-bar-supporting-text-size: 14px;
    --mat-snack-bar-supporting-text-weight: 400
}

html {
    --mat-table-row-item-outline-width: 1px
}

html {
    --mat-table-background-color: white;
    --mat-table-header-headline-color: rgba(0, 0, 0, .87);
    --mat-table-row-item-label-text-color: rgba(0, 0, 0, .87);
    --mat-table-row-item-outline-color: rgba(0, 0, 0, .12)
}

html {
    --mat-table-header-container-height: 56px;
    --mat-table-footer-container-height: 52px;
    --mat-table-row-item-container-height: 52px
}

html {
    --mat-table-header-headline-font: Roboto, sans-serif;
    --mat-table-header-headline-line-height: 22px;
    --mat-table-header-headline-size: 14px;
    --mat-table-header-headline-weight: 500;
    --mat-table-header-headline-tracking: .0071428571em;
    --mat-table-row-item-label-text-font: Roboto, sans-serif;
    --mat-table-row-item-label-text-line-height: 20px;
    --mat-table-row-item-label-text-size: 14px;
    --mat-table-row-item-label-text-weight: 400;
    --mat-table-row-item-label-text-tracking: .0178571429em;
    --mat-table-footer-supporting-text-font: Roboto, sans-serif;
    --mat-table-footer-supporting-text-line-height: 20px;
    --mat-table-footer-supporting-text-size: 14px;
    --mat-table-footer-supporting-text-weight: 400;
    --mat-table-footer-supporting-text-tracking: .0178571429em
}

html {
    --mat-progress-spinner-active-indicator-width: 4px;
    --mat-progress-spinner-size: 48px
}

html,
.mat-accent {
    --mat-progress-spinner-active-indicator-color: var(--color-accent-color)
}

.mat-warn {
    --mat-progress-spinner-active-indicator-color: #f44336
}

html {
    --mat-badge-container-shape: 50%;
    --mat-badge-container-size: unset;
    --mat-badge-small-size-container-size: unset;
    --mat-badge-large-size-container-size: unset;
    --mat-badge-legacy-container-size: 22px;
    --mat-badge-legacy-small-size-container-size: 16px;
    --mat-badge-legacy-large-size-container-size: 28px;
    --mat-badge-container-offset: -11px 0;
    --mat-badge-small-size-container-offset: -8px 0;
    --mat-badge-large-size-container-offset: -14px 0;
    --mat-badge-container-overlap-offset: -11px;
    --mat-badge-small-size-container-overlap-offset: -8px;
    --mat-badge-large-size-container-overlap-offset: -14px;
    --mat-badge-container-padding: 0;
    --mat-badge-small-size-container-padding: 0;
    --mat-badge-large-size-container-padding: 0
}

html {
    --mat-badge-background-color: var(--color-accent-color);
    --mat-badge-text-color: white;
    --mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent)
}

.mat-badge-accent {
    --mat-badge-background-color: var(--color-accent-color);
    --mat-badge-text-color: white
}

.mat-badge-warn {
    --mat-badge-background-color: #f44336;
    --mat-badge-text-color: white
}

html {
    --mat-badge-text-font: Roboto, sans-serif;
    --mat-badge-line-height: 22px;
    --mat-badge-text-size: 12px;
    --mat-badge-text-weight: 600;
    --mat-badge-small-size-text-size: 9px;
    --mat-badge-small-size-line-height: 16px;
    --mat-badge-large-size-text-size: 24px;
    --mat-badge-large-size-line-height: 28px
}

html {
    --mat-bottom-sheet-container-shape: 4px
}

html {
    --mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);
    --mat-bottom-sheet-container-background-color: white
}

html {
    --mat-bottom-sheet-container-text-font: Roboto, sans-serif;
    --mat-bottom-sheet-container-text-line-height: 20px;
    --mat-bottom-sheet-container-text-size: 14px;
    --mat-bottom-sheet-container-text-tracking: .0178571429em;
    --mat-bottom-sheet-container-text-weight: 400
}

html {
    --mat-button-toggle-focus-state-layer-opacity: .12;
    --mat-button-toggle-hover-state-layer-opacity: .04;
    --mat-button-toggle-legacy-focus-state-layer-opacity: 1;
    --mat-button-toggle-legacy-height: 36px;
    --mat-button-toggle-legacy-shape: 2px;
    --mat-button-toggle-shape: 4px
}

html {
    --mat-button-toggle-background-color: white;
    --mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-toggle-disabled-state-background-color: white;
    --mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-toggle-divider-color: rgba(0, 0, 0, .12);
    --mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-toggle-legacy-disabled-state-background-color: white;
    --mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, .87);
    --mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-toggle-legacy-text-color: rgba(0, 0, 0, .87);
    --mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);
    --mat-button-toggle-state-layer-color: rgba(0, 0, 0, .87);
    --mat-button-toggle-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-button-toggle-height: 48px
}

html {
    --mat-button-toggle-label-text-font: Roboto, sans-serif;
    --mat-button-toggle-label-text-line-height: 24px;
    --mat-button-toggle-label-text-size: 16px;
    --mat-button-toggle-label-text-tracking: .03125em;
    --mat-button-toggle-label-text-weight: 400;
    --mat-button-toggle-legacy-label-text-font: Roboto, sans-serif;
    --mat-button-toggle-legacy-label-text-line-height: 24px;
    --mat-button-toggle-legacy-label-text-size: 16px;
    --mat-button-toggle-legacy-label-text-tracking: .03125em;
    --mat-button-toggle-legacy-label-text-weight: 400
}

html {
    --mat-datepicker-calendar-container-shape: 4px;
    --mat-datepicker-calendar-container-touch-shape: 4px;
    --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)
}

html {
    --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #C9A4FF 20%, transparent);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #C9A4FF 20%, transparent);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: var(--color-accent-color);
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #C9A4FF 38%, transparent);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #C9A4FF 4%, transparent);
    --mat-datepicker-toggle-active-state-icon-color: var(--color-accent-color);
    --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .54);
    --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);
    --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-container-background-color: white;
    --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, var(--color-accent-color) 20%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--color-accent-color) 20%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, var(--color-accent-color) 38%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {
    html {
        --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--color-accent-color) 4%, transparent)
    }
}

.mat-datepicker-content.mat-accent,
.mat-datepicker-toggle-active.mat-accent {
    --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #C9A4FF 20%, transparent);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #C9A4FF 20%, transparent);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: var(--color-accent-color);
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #C9A4FF 38%, transparent);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #C9A4FF 12%, transparent);
    --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #C9A4FF 4%, transparent);
    --mat-datepicker-toggle-active-state-icon-color: var(--color-accent-color);
    --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .54);
    --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);
    --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-container-background-color: white;
    --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-datepicker-content.mat-accent,
    .mat-datepicker-toggle-active.mat-accent {
        --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, var(--color-accent-color) 20%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-datepicker-content.mat-accent,
    .mat-datepicker-toggle-active.mat-accent {
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--color-accent-color) 20%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-datepicker-content.mat-accent,
    .mat-datepicker-toggle-active.mat-accent {
        --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, var(--color-accent-color) 38%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-datepicker-content.mat-accent,
    .mat-datepicker-toggle-active.mat-accent {
        --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, var(--color-accent-color) 12%, transparent)
    }
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-datepicker-content.mat-accent,
    .mat-datepicker-toggle-active.mat-accent {
        --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--color-accent-color) 4%, transparent)
    }
}

.mat-datepicker-content.mat-warn,
.mat-datepicker-toggle-active.mat-warn {
    --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, #f44336 20%, transparent);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, #C9A4FF 20%, transparent);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f44336 38%, transparent);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f44336 12%, transparent);
    --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f44336 4%, transparent);
    --mat-datepicker-toggle-active-state-icon-color: #f44336;
    --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .54);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .54);
    --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);
    --mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-datepicker-calendar-container-background-color: white;
    --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)
}

@supports (color: color-mix(in lab, red, red)) {

    .mat-datepicker-content.mat-warn,
    .mat-datepicker-toggle-active.mat-warn {
        --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--color-accent-color) 20%, transparent)
    }
}

.mat-calendar-controls {
    --mat-icon-button-touch-target-display: none
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 40px;
    --mat-icon-button-state-layer-size: 40px;
    width: var(--mat-icon-button-state-layer-size);
    height: var(--mat-icon-button-state-layer-size);
    padding: 8px
}

html {
    --mat-datepicker-calendar-text-font: Roboto, sans-serif;
    --mat-datepicker-calendar-text-size: 13px;
    --mat-datepicker-calendar-body-label-text-size: 14px;
    --mat-datepicker-calendar-body-label-text-weight: 500;
    --mat-datepicker-calendar-period-button-text-size: 14px;
    --mat-datepicker-calendar-period-button-text-weight: 500;
    --mat-datepicker-calendar-header-text-size: 11px;
    --mat-datepicker-calendar-header-text-weight: 400
}

html {
    --mat-divider-width: 1px
}

html {
    --mat-divider-color: rgba(0, 0, 0, .12)
}

html {
    --mat-expansion-container-shape: 4px;
    --mat-expansion-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    --mat-expansion-legacy-header-indicator-display: inline-block;
    --mat-expansion-header-indicator-display: none
}

html {
    --mat-expansion-container-background-color: white;
    --mat-expansion-container-text-color: rgba(0, 0, 0, .87);
    --mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);
    --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 4%, transparent);
    --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, .87) 38%, transparent);
    --mat-expansion-header-text-color: rgba(0, 0, 0, .87);
    --mat-expansion-header-description-color: rgba(0, 0, 0, .54);
    --mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)
}

html {
    --mat-expansion-header-collapsed-state-height: 48px;
    --mat-expansion-header-expanded-state-height: 64px
}

html {
    --mat-expansion-header-text-font: Roboto, sans-serif;
    --mat-expansion-header-text-size: 14px;
    --mat-expansion-header-text-weight: 500;
    --mat-expansion-header-text-line-height: inherit;
    --mat-expansion-header-text-tracking: inherit;
    --mat-expansion-container-text-font: Roboto, sans-serif;
    --mat-expansion-container-text-line-height: 20px;
    --mat-expansion-container-text-size: 14px;
    --mat-expansion-container-text-tracking: .0178571429em;
    --mat-expansion-container-text-weight: 400
}

html {
    --mat-grid-list-tile-header-primary-text-size: 14px;
    --mat-grid-list-tile-header-secondary-text-size: 12px;
    --mat-grid-list-tile-footer-primary-text-size: 14px;
    --mat-grid-list-tile-footer-secondary-text-size: 12px
}

html {
    --mat-icon-color: inherit
}

.mat-icon.mat-primary,
.mat-icon.mat-accent {
    --mat-icon-color: var(--color-accent-color)
}

.mat-icon.mat-warn {
    --mat-icon-color: #f44336
}

html {
    --mat-sidenav-container-shape: 0;
    --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);
    --mat-sidenav-container-width: auto
}

html {
    --mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);
    --mat-sidenav-container-background-color: white;
    --mat-sidenav-container-text-color: rgba(0, 0, 0, .87);
    --mat-sidenav-content-background-color: #fafafa;
    --mat-sidenav-content-text-color: rgba(0, 0, 0, .87);
    --mat-sidenav-scrim-color: rgba(0, 0, 0, .6)
}

html {
    --mat-stepper-header-focus-state-layer-shape: 0;
    --mat-stepper-header-hover-state-layer-shape: 0
}

html {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: var(--color-accent-color);
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: var(--color-accent-color);
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: var(--color-accent-color);
    --mat-stepper-header-edit-state-icon-foreground-color: white;
    --mat-stepper-container-color: white;
    --mat-stepper-line-color: rgba(0, 0, 0, .12);
    --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 4%, transparent);
    --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, .87) 12%, transparent);
    --mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);
    --mat-stepper-header-error-state-label-text-color: #f44336;
    --mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);
    --mat-stepper-header-error-state-icon-foreground-color: #f44336;
    --mat-stepper-header-error-state-icon-background-color: transparent
}

.mat-step-header.mat-accent {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: var(--color-accent-color);
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: var(--color-accent-color);
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: var(--color-accent-color);
    --mat-stepper-header-edit-state-icon-foreground-color: white
}

.mat-step-header.mat-warn {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: #f44336;
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: #f44336;
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: #f44336;
    --mat-stepper-header-edit-state-icon-foreground-color: white
}

html {
    --mat-stepper-header-height: 72px
}

html {
    --mat-stepper-container-text-font: Roboto, sans-serif;
    --mat-stepper-header-label-text-font: Roboto, sans-serif;
    --mat-stepper-header-label-text-size: 14px;
    --mat-stepper-header-label-text-weight: 400;
    --mat-stepper-header-error-state-label-text-size: 16px;
    --mat-stepper-header-selected-state-label-text-size: 16px;
    --mat-stepper-header-selected-state-label-text-weight: 400
}

html {
    --mat-sort-arrow-color: rgba(0, 0, 0, .87)
}

html {
    --mat-toolbar-container-background-color: white;
    --mat-toolbar-container-text-color: rgba(0, 0, 0, .87)
}

.mat-toolbar.mat-primary,
.mat-toolbar.mat-accent {
    --mat-toolbar-container-background-color: var(--color-accent-color);
    --mat-toolbar-container-text-color: white
}

.mat-toolbar.mat-warn {
    --mat-toolbar-container-background-color: #f44336;
    --mat-toolbar-container-text-color: white
}

html {
    --mat-toolbar-standard-height: 64px;
    --mat-toolbar-mobile-height: 56px
}

html {
    --mat-toolbar-title-text-font: Roboto, sans-serif;
    --mat-toolbar-title-text-line-height: 32px;
    --mat-toolbar-title-text-size: 20px;
    --mat-toolbar-title-text-tracking: .0125em;
    --mat-toolbar-title-text-weight: 500
}

html {
    --mat-tree-container-background-color: white;
    --mat-tree-node-text-color: rgba(0, 0, 0, .87)
}

html {
    --mat-tree-node-min-height: 48px
}

html {
    --mat-tree-node-text-font: Roboto, sans-serif;
    --mat-tree-node-text-size: 14px;
    --mat-tree-node-text-weight: 400
}

html {
    --mat-timepicker-container-shape: 4px;
    --mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)
}

html {
    --mat-timepicker-container-background-color: white
}

@media(min-width:1024px) {
    body.dark [dir=ltr] swiper-slide:not(.noGradient).swiper-slide-prev:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #0000, #000 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.dark [dir=ltr] swiper-slide:not(.noGradient).swiper-slide-next:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, #0000, #000 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.dark [dir=rtl] swiper-slide:not(.noGradient).swiper-slide-prev:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, #0000, #000 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.dark [dir=rtl] swiper-slide:not(.noGradient).swiper-slide-next:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #0000, #000 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.light [dir=ltr] swiper-slide:not(.noGradient).swiper-slide-prev:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #fff0, #fff 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.light [dir=ltr] swiper-slide:not(.noGradient).swiper-slide-next:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, #fff0, #fff 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.light [dir=rtl] swiper-slide:not(.noGradient).swiper-slide-prev:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(270deg, #fff0, #fff 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }

    body.light [dir=rtl] swiper-slide:not(.noGradient).swiper-slide-next:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #fff0, #fff 100% 100%);
        border-radius: .5rem;
        pointer-events: none
    }
}

app-skeleton {
    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #e4e4e7;
    --sk-sheen: rgba(255, 255, 255, .65)
}

app-skeleton.is-dark {
    background-color: #141a2e;
    --sk-sheen: rgba(255, 255, 255, .06)
}

app-skeleton:after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate(-100%);
    background: linear-gradient(90deg, transparent, var(--sk-sheen), transparent);
    animation: app-skeleton-shimmer 1.4s ease-in-out infinite
}

[dir=rtl] app-skeleton:after {
    animation-name: app-skeleton-shimmer-rtl
}

@keyframes app-skeleton-shimmer {
    to {
        transform: translate(100%)
    }
}

@keyframes app-skeleton-shimmer-rtl {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(-100%)
    }
}

@media(prefers-reduced-motion:reduce) {
    app-skeleton:after {
        animation: none
    }
}

button.app-btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important
}

button.app-btn-loading>:not(.app-btn-dots) {
    visibility: hidden
}

.app-btn-dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .32em;
    pointer-events: none
}

.app-btn-dots>span {
    width: .46em;
    height: .46em;
    border-radius: 9999px;
    background: #fff;
    animation: app-btn-bounce .6s infinite ease-in-out both
}

.app-btn-dots>span:nth-child(1) {
    animation-delay: -.3s
}

.app-btn-dots>span:nth-child(2) {
    animation-delay: -.15s
}

@keyframes app-btn-bounce {

    0%,
    80%,
    to {
        transform: scale(.5);
        opacity: .5
    }

    40% {
        transform: scale(1);
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .app-btn-dots>span {
        animation: app-btn-fade 1.2s infinite ease-in-out both
    }

    @keyframes app-btn-fade {

        0%,
        to {
            opacity: .4
        }

        50% {
            opacity: 1
        }
    }
}

body.app-loading button:not(.app-btn-loading) {
    pointer-events: none;
    opacity: .55
}

body.app-loading .p-dialog button,
body.app-loading .cdk-overlay-container button,
body.app-loading [role=dialog] button {
    pointer-events: auto;
    opacity: 1
}

body.app-loading [data-no-btn-loader] button {
    opacity: 1
}

app-header {
    display: contents
}

:root {
    --app-banner-h: 53px
}

html.app-banner-open body {
    padding-top: var(--app-banner-h)
}

html.app-banner-open app-header header {
    top: var(--app-banner-h)
}

html.app-banner-open app-sign-in .fixed.inset-x-0.top-0,
html.app-banner-open app-sign-up .fixed.inset-x-0.top-0,
html.app-banner-open app-otp .fixed.inset-x-0.top-0,
html.app-banner-open app-change-password .fixed.inset-x-0.top-0 {
    top: var(--app-banner-h)
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .26s;
    animation-timing-function: ease
}

@media(prefers-reduced-motion:reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none
    }
}

.rich-text>:first-child,
.rt-html>:first-child {
    margin-top: 0
}

.rich-text>:last-child,
.rt-html>:last-child {
    margin-bottom: 0
}

.rich-text p,
.rt-html p {
    margin-block: .75rem
}

.rich-text h4,
.rt-html h4 {
    margin-block: 1.25rem .5rem;
    font-weight: 600
}

.rich-text ul,
.rich-text ol,
.rt-html ul,
.rt-html ol {
    margin-block: .75rem;
    margin-inline-start: 0 !important;
    padding-inline-start: 2rem !important
}

.rich-text ul,
.rt-html ul {
    list-style-type: disc
}

.rich-text ol,
.rt-html ol {
    list-style-type: decimal
}

.rich-text ul ul,
.rich-text ul ol,
.rich-text ol ul,
.rich-text ol ol,
.rt-html ul ul,
.rt-html ul ol,
.rt-html ol ul,
.rt-html ol ol {
    margin-block: .375rem
}

.rich-text ul ul,
.rt-html ul ul {
    list-style-type: circle
}

.rich-text li,
.rt-html li {
    margin-block: .375rem;
    margin-inline-start: 0 !important;
    padding-inline-start: .25rem;
    list-style-position: outside !important
}

.rich-text a,
.rt-html a {
    color: var(--color-accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere
}

input[type=email],
input[type=tel],
input[type=url] {
    direction: ltr
}

[dir=rtl] input[type=email],
[dir=rtl] input[type=tel],
[dir=rtl] input[type=url] {
    text-align: right
}

[dir=rtl] .iti input[type=tel] {
    text-align: left
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1;
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
}

@property --tw-pan-x {
    syntax: "*";
    inherits: false;
}

@property --tw-pan-y {
    syntax: "*";
    inherits: false;
}

@property --tw-pinch-zoom {
    syntax: "*";
    inherits: false;
}

@property --tw-scroll-snap-strictness {
    syntax: "*";
    inherits: false;
    initial-value: proximity;
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000;
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false;
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-leading {
    syntax: "*";
    inherits: false;
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false;
}

@property --tw-tracking {
    syntax: "*";
    inherits: false;
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false;
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false;
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false;
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false;
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false;
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@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-drop-shadow {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false;
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --tw-drop-shadow-size {
    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;
}

@property --tw-duration {
    syntax: "*";
    inherits: false;
}

@property --tw-ease {
    syntax: "*";
    inherits: false;
}

@property --tw-content {
    syntax: "*";
    initial-value: "";
    inherits: false;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@layer properties {
    @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-pan-x: initial;
            --tw-pan-y: initial;
            --tw-pinch-zoom: initial;
            --tw-scroll-snap-strictness: proximity;
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial;
            --tw-content: ""
        }
    }
}

:root {
    --iti-hover-color: rgba(0, 0, 0, .05);
    --iti-border-color: #ccc;
    --iti-dialcode-color: #999;
    --iti-dropdown-bg: white;
    --iti-search-icon-color: #999;
    --iti-spacer-horizontal: 8px;
    --iti-flag-height: 12px;
    --iti-flag-width: 16px;
    --iti-border-width: 1px;
    --iti-arrow-height: 4px;
    --iti-arrow-width: 6px;
    --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
    --iti-arrow-padding: 6px;
    --iti-arrow-color: #555;
    --iti-flag-sprite-width: 3904px;
    --iti-flag-sprite-height: 12px;
    --iti-mobile-popup-margin: 30px
}

.iti {
    position: relative;
    display: inline-block
}

.iti * {
    box-sizing: border-box
}

.iti__a11y-text {
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
    position: relative;
    z-index: 0;
    margin: 0 !important
}

.iti__country-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: var(--iti-border-width)
}

.iti__selected-country {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border-radius: 0;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none
}

.iti__selected-country-primary {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)
}

.iti__arrow {
    margin-left: var(--iti-arrow-padding);
    width: 0;
    height: 0;
    border-left: var(--iti-triangle-border) solid transparent;
    border-right: var(--iti-triangle-border) solid transparent;
    border-top: var(--iti-arrow-height) solid var(--iti-arrow-color)
}

.iti__arrow--up {
    border-top: none;
    border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color)
}

.iti__dropdown-content {
    border-radius: 3px;
    background-color: var(--iti-dropdown-bg)
}

.iti--inline-dropdown .iti__dropdown-content {
    position: absolute;
    z-index: 2;
    margin-top: 3px;
    margin-left: calc(var(--iti-border-width) * -1);
    border: var(--iti-border-width) solid var(--iti-border-color);
    box-shadow: 1px 1px 4px #0003
}

.iti__search-input {
    width: 100%;
    border-width: 0;
    border-radius: 3px;
    padding-left: 30px;
    padding-right: 28px
}

[dir=rtl] .iti__search-input {
    padding-left: inherit;
    padding-right: 30px;
    background-position: right 8px center
}

.iti__search-input+.iti__country-list {
    border-top: 1px solid var(--iti-border-color)
}

.iti__search-input::-webkit-search-cancel-button {
    appearance: none
}

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

.iti__search-icon {
    position: absolute;
    left: 8px;
    display: flex;
    pointer-events: none
}

[dir=rtl] .iti__search-icon {
    left: auto;
    right: 8px
}

.iti__search-icon-svg {
    stroke: var(--iti-search-icon-color);
    fill: none;
    stroke-width: 3
}

.iti__search-clear {
    position: absolute;
    right: 4px;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
    width: 24px;
    height: 24px
}

.iti__search-clear .iti__search-clear-x {
    stroke-width: 2
}

.iti__search-clear .iti__search-clear-bg {
    fill: var(--iti-search-icon-color)
}

[dir=rtl] .iti__search-clear {
    right: auto;
    left: 4px
}

.iti__search-clear:hover,
.iti__search-clear:focus-visible {
    background: var(--iti-hover-color);
    outline: none
}

.iti__no-results {
    text-align: center;
    padding: 30px 0
}

.iti__country-list {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.iti--inline-dropdown .iti__country-list {
    max-height: 185px
}

.iti--flexible-dropdown-width .iti__country-list {
    white-space: nowrap
}

@media(max-width:500px) {
    .iti--flexible-dropdown-width .iti__country-list {
        white-space: normal
    }
}

.iti__country {
    display: flex;
    align-items: center;
    padding: 8px var(--iti-spacer-horizontal);
    outline: none
}

.iti__dial-code {
    color: var(--iti-dialcode-color)
}

.iti__country.iti__highlight {
    background-color: var(--iti-hover-color)
}

.iti__country-list .iti__flag,
.iti__country-name {
    margin-right: var(--iti-spacer-horizontal)
}

[dir=rtl] .iti__country-list .iti__flag,
[dir=rtl] .iti__country-name {
    margin-right: 0;
    margin-left: var(--iti-spacer-horizontal)
}

.iti--allow-dropdown .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) button.iti__selected-country {
    cursor: pointer
}

.iti--allow-dropdown .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+input[disabled])):not(:has(+input[readonly])) .iti__selected-country:has(+.iti__dropdown-content:hover) .iti__selected-country-primary {
    background-color: var(--iti-hover-color)
}

.iti .iti__selected-dial-code {
    margin-left: 4px
}

.iti--container {
    position: fixed;
    top: -1000px;
    left: -1000px;
    z-index: 1060;
    padding: var(--iti-border-width)
}

.iti--container:hover {
    cursor: pointer
}

.iti__hide {
    display: none
}

.iti__v-hide {
    visibility: hidden
}

.iti--fullscreen-popup.iti--container {
    background-color: #00000080;
    inset: 0;
    position: fixed;
    padding: var(--iti-mobile-popup-margin);
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.iti--fullscreen-popup .iti__dropdown-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative
}

.iti--fullscreen-popup .iti__country {
    padding: 10px;
    line-height: 1.5em
}

.iti__flag {
    --iti-flag-offset: 100px;
    height: var(--iti-flag-height);
    width: var(--iti-flag-width);
    border-radius: 1px;
    box-shadow: 0 0 1px #888;
    background-image: var(--iti-path-flags-1x);
    background-repeat: no-repeat;
    background-position: var(--iti-flag-offset) 0;
    background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height)
}

.iti__ac {
    --iti-flag-offset: 0px
}

.iti__ad {
    --iti-flag-offset: -16px
}

.iti__ae {
    --iti-flag-offset: -32px
}

.iti__af {
    --iti-flag-offset: -48px
}

.iti__ag {
    --iti-flag-offset: -64px
}

.iti__ai {
    --iti-flag-offset: -80px
}

.iti__al {
    --iti-flag-offset: -96px
}

.iti__am {
    --iti-flag-offset: -112px
}

.iti__ao {
    --iti-flag-offset: -128px
}

.iti__ar {
    --iti-flag-offset: -144px
}

.iti__as {
    --iti-flag-offset: -160px
}

.iti__at {
    --iti-flag-offset: -176px
}

.iti__au {
    --iti-flag-offset: -192px
}

.iti__aw {
    --iti-flag-offset: -208px
}

.iti__ax {
    --iti-flag-offset: -224px
}

.iti__az {
    --iti-flag-offset: -240px
}

.iti__ba {
    --iti-flag-offset: -256px
}

.iti__bb {
    --iti-flag-offset: -272px
}

.iti__bd {
    --iti-flag-offset: -288px
}

.iti__be {
    --iti-flag-offset: -304px
}

.iti__bf {
    --iti-flag-offset: -320px
}

.iti__bg {
    --iti-flag-offset: -336px
}

.iti__bh {
    --iti-flag-offset: -352px
}

.iti__bi {
    --iti-flag-offset: -368px
}

.iti__bj {
    --iti-flag-offset: -384px
}

.iti__bl {
    --iti-flag-offset: -400px
}

.iti__bm {
    --iti-flag-offset: -416px
}

.iti__bn {
    --iti-flag-offset: -432px
}

.iti__bo {
    --iti-flag-offset: -448px
}

.iti__bq {
    --iti-flag-offset: -464px
}

.iti__br {
    --iti-flag-offset: -480px
}

.iti__bs {
    --iti-flag-offset: -496px
}

.iti__bt {
    --iti-flag-offset: -512px
}

.iti__bw {
    --iti-flag-offset: -528px
}

.iti__by {
    --iti-flag-offset: -544px
}

.iti__bz {
    --iti-flag-offset: -560px
}

.iti__ca {
    --iti-flag-offset: -576px
}

.iti__cc {
    --iti-flag-offset: -592px
}

.iti__cd {
    --iti-flag-offset: -608px
}

.iti__cf {
    --iti-flag-offset: -624px
}

.iti__cg {
    --iti-flag-offset: -640px
}

.iti__ch {
    --iti-flag-offset: -656px
}

.iti__ci {
    --iti-flag-offset: -672px
}

.iti__ck {
    --iti-flag-offset: -688px
}

.iti__cl {
    --iti-flag-offset: -704px
}

.iti__cm {
    --iti-flag-offset: -720px
}

.iti__cn {
    --iti-flag-offset: -736px
}

.iti__co {
    --iti-flag-offset: -752px
}

.iti__cr {
    --iti-flag-offset: -768px
}

.iti__cu {
    --iti-flag-offset: -784px
}

.iti__cv {
    --iti-flag-offset: -800px
}

.iti__cw {
    --iti-flag-offset: -816px
}

.iti__cx {
    --iti-flag-offset: -832px
}

.iti__cy {
    --iti-flag-offset: -848px
}

.iti__cz {
    --iti-flag-offset: -864px
}

.iti__de {
    --iti-flag-offset: -880px
}

.iti__dj {
    --iti-flag-offset: -896px
}

.iti__dk {
    --iti-flag-offset: -912px
}

.iti__dm {
    --iti-flag-offset: -928px
}

.iti__do {
    --iti-flag-offset: -944px
}

.iti__dz {
    --iti-flag-offset: -960px
}

.iti__ec {
    --iti-flag-offset: -976px
}

.iti__ee {
    --iti-flag-offset: -992px
}

.iti__eg {
    --iti-flag-offset: -1008px
}

.iti__eh {
    --iti-flag-offset: -1024px
}

.iti__er {
    --iti-flag-offset: -1040px
}

.iti__es {
    --iti-flag-offset: -1056px
}

.iti__et {
    --iti-flag-offset: -1072px
}

.iti__fi {
    --iti-flag-offset: -1088px
}

.iti__fj {
    --iti-flag-offset: -1104px
}

.iti__fk {
    --iti-flag-offset: -1120px
}

.iti__fm {
    --iti-flag-offset: -1136px
}

.iti__fo {
    --iti-flag-offset: -1152px
}

.iti__fr {
    --iti-flag-offset: -1168px
}

.iti__ga {
    --iti-flag-offset: -1184px
}

.iti__gb {
    --iti-flag-offset: -1200px
}

.iti__gd {
    --iti-flag-offset: -1216px
}

.iti__ge {
    --iti-flag-offset: -1232px
}

.iti__gf {
    --iti-flag-offset: -1248px
}

.iti__gg {
    --iti-flag-offset: -1264px
}

.iti__gh {
    --iti-flag-offset: -1280px
}

.iti__gi {
    --iti-flag-offset: -1296px
}

.iti__gl {
    --iti-flag-offset: -1312px
}

.iti__gm {
    --iti-flag-offset: -1328px
}

.iti__gn {
    --iti-flag-offset: -1344px
}

.iti__gp {
    --iti-flag-offset: -1360px
}

.iti__gq {
    --iti-flag-offset: -1376px
}

.iti__gr {
    --iti-flag-offset: -1392px
}

.iti__gt {
    --iti-flag-offset: -1408px
}

.iti__gu {
    --iti-flag-offset: -1424px
}

.iti__gw {
    --iti-flag-offset: -1440px
}

.iti__gy {
    --iti-flag-offset: -1456px
}

.iti__hk {
    --iti-flag-offset: -1472px
}

.iti__hn {
    --iti-flag-offset: -1488px
}

.iti__hr {
    --iti-flag-offset: -1504px
}

.iti__ht {
    --iti-flag-offset: -1520px
}

.iti__hu {
    --iti-flag-offset: -1536px
}

.iti__id {
    --iti-flag-offset: -1552px
}

.iti__ie {
    --iti-flag-offset: -1568px
}

.iti__il {
    --iti-flag-offset: -1584px
}

.iti__im {
    --iti-flag-offset: -1600px
}

.iti__in {
    --iti-flag-offset: -1616px
}

.iti__io {
    --iti-flag-offset: -1632px
}

.iti__iq {
    --iti-flag-offset: -1648px
}

.iti__ir {
    --iti-flag-offset: -1664px
}

.iti__is {
    --iti-flag-offset: -1680px
}

.iti__it {
    --iti-flag-offset: -1696px
}

.iti__je {
    --iti-flag-offset: -1712px
}

.iti__jm {
    --iti-flag-offset: -1728px
}

.iti__jo {
    --iti-flag-offset: -1744px
}

.iti__jp {
    --iti-flag-offset: -1760px
}

.iti__ke {
    --iti-flag-offset: -1776px
}

.iti__kg {
    --iti-flag-offset: -1792px
}

.iti__kh {
    --iti-flag-offset: -1808px
}

.iti__ki {
    --iti-flag-offset: -1824px
}

.iti__km {
    --iti-flag-offset: -1840px
}

.iti__kn {
    --iti-flag-offset: -1856px
}

.iti__kp {
    --iti-flag-offset: -1872px
}

.iti__kr {
    --iti-flag-offset: -1888px
}

.iti__kw {
    --iti-flag-offset: -1904px
}

.iti__ky {
    --iti-flag-offset: -1920px
}

.iti__kz {
    --iti-flag-offset: -1936px
}

.iti__la {
    --iti-flag-offset: -1952px
}

.iti__lb {
    --iti-flag-offset: -1968px
}

.iti__lc {
    --iti-flag-offset: -1984px
}

.iti__li {
    --iti-flag-offset: -2000px
}

.iti__lk {
    --iti-flag-offset: -2016px
}

.iti__lr {
    --iti-flag-offset: -2032px
}

.iti__ls {
    --iti-flag-offset: -2048px
}

.iti__lt {
    --iti-flag-offset: -2064px
}

.iti__lu {
    --iti-flag-offset: -2080px
}

.iti__lv {
    --iti-flag-offset: -2096px
}

.iti__ly {
    --iti-flag-offset: -2112px
}

.iti__ma {
    --iti-flag-offset: -2128px
}

.iti__mc {
    --iti-flag-offset: -2144px
}

.iti__md {
    --iti-flag-offset: -2160px
}

.iti__me {
    --iti-flag-offset: -2176px
}

.iti__mf {
    --iti-flag-offset: -2192px
}

.iti__mg {
    --iti-flag-offset: -2208px
}

.iti__mh {
    --iti-flag-offset: -2224px
}

.iti__mk {
    --iti-flag-offset: -2240px
}

.iti__ml {
    --iti-flag-offset: -2256px
}

.iti__mm {
    --iti-flag-offset: -2272px
}

.iti__mn {
    --iti-flag-offset: -2288px
}

.iti__mo {
    --iti-flag-offset: -2304px
}

.iti__mp {
    --iti-flag-offset: -2320px
}

.iti__mq {
    --iti-flag-offset: -2336px
}

.iti__mr {
    --iti-flag-offset: -2352px
}

.iti__ms {
    --iti-flag-offset: -2368px
}

.iti__mt {
    --iti-flag-offset: -2384px
}

.iti__mu {
    --iti-flag-offset: -2400px
}

.iti__mv {
    --iti-flag-offset: -2416px
}

.iti__mw {
    --iti-flag-offset: -2432px
}

.iti__mx {
    --iti-flag-offset: -2448px
}

.iti__my {
    --iti-flag-offset: -2464px
}

.iti__mz {
    --iti-flag-offset: -2480px
}

.iti__na {
    --iti-flag-offset: -2496px
}

.iti__nc {
    --iti-flag-offset: -2512px
}

.iti__ne {
    --iti-flag-offset: -2528px
}

.iti__nf {
    --iti-flag-offset: -2544px
}

.iti__ng {
    --iti-flag-offset: -2560px
}

.iti__ni {
    --iti-flag-offset: -2576px
}

.iti__nl {
    --iti-flag-offset: -2592px
}

.iti__no {
    --iti-flag-offset: -2608px
}

.iti__np {
    --iti-flag-offset: -2624px
}

.iti__nr {
    --iti-flag-offset: -2640px
}

.iti__nu {
    --iti-flag-offset: -2656px
}

.iti__nz {
    --iti-flag-offset: -2672px
}

.iti__om {
    --iti-flag-offset: -2688px
}

.iti__pa {
    --iti-flag-offset: -2704px
}

.iti__pe {
    --iti-flag-offset: -2720px
}

.iti__pf {
    --iti-flag-offset: -2736px
}

.iti__pg {
    --iti-flag-offset: -2752px
}

.iti__ph {
    --iti-flag-offset: -2768px
}

.iti__pk {
    --iti-flag-offset: -2784px
}

.iti__pl {
    --iti-flag-offset: -2800px
}

.iti__pm {
    --iti-flag-offset: -2816px
}

.iti__pr {
    --iti-flag-offset: -2832px
}

.iti__ps {
    --iti-flag-offset: -2848px
}

.iti__pt {
    --iti-flag-offset: -2864px
}

.iti__pw {
    --iti-flag-offset: -2880px
}

.iti__py {
    --iti-flag-offset: -2896px
}

.iti__qa {
    --iti-flag-offset: -2912px
}

.iti__re {
    --iti-flag-offset: -2928px
}

.iti__ro {
    --iti-flag-offset: -2944px
}

.iti__rs {
    --iti-flag-offset: -2960px
}

.iti__ru {
    --iti-flag-offset: -2976px
}

.iti__rw {
    --iti-flag-offset: -2992px
}

.iti__sa {
    --iti-flag-offset: -3008px
}

.iti__sb {
    --iti-flag-offset: -3024px
}

.iti__sc {
    --iti-flag-offset: -3040px
}

.iti__sd {
    --iti-flag-offset: -3056px
}

.iti__se {
    --iti-flag-offset: -3072px
}

.iti__sg {
    --iti-flag-offset: -3088px
}

.iti__sh {
    --iti-flag-offset: -3104px
}

.iti__si {
    --iti-flag-offset: -3120px
}

.iti__sj {
    --iti-flag-offset: -3136px
}

.iti__sk {
    --iti-flag-offset: -3152px
}

.iti__sl {
    --iti-flag-offset: -3168px
}

.iti__sm {
    --iti-flag-offset: -3184px
}

.iti__sn {
    --iti-flag-offset: -3200px
}

.iti__so {
    --iti-flag-offset: -3216px
}

.iti__sr {
    --iti-flag-offset: -3232px
}

.iti__ss {
    --iti-flag-offset: -3248px
}

.iti__st {
    --iti-flag-offset: -3264px
}

.iti__sv {
    --iti-flag-offset: -3280px
}

.iti__sx {
    --iti-flag-offset: -3296px
}

.iti__sy {
    --iti-flag-offset: -3312px
}

.iti__sz {
    --iti-flag-offset: -3328px
}

.iti__tc {
    --iti-flag-offset: -3344px
}

.iti__td {
    --iti-flag-offset: -3360px
}

.iti__tg {
    --iti-flag-offset: -3376px
}

.iti__th {
    --iti-flag-offset: -3392px
}

.iti__tj {
    --iti-flag-offset: -3408px
}

.iti__tk {
    --iti-flag-offset: -3424px
}

.iti__tl {
    --iti-flag-offset: -3440px
}

.iti__tm {
    --iti-flag-offset: -3456px
}

.iti__tn {
    --iti-flag-offset: -3472px
}

.iti__to {
    --iti-flag-offset: -3488px
}

.iti__tr {
    --iti-flag-offset: -3504px
}

.iti__tt {
    --iti-flag-offset: -3520px
}

.iti__tv {
    --iti-flag-offset: -3536px
}

.iti__tw {
    --iti-flag-offset: -3552px
}

.iti__tz {
    --iti-flag-offset: -3568px
}

.iti__ua {
    --iti-flag-offset: -3584px
}

.iti__ug {
    --iti-flag-offset: -3600px
}

.iti__us {
    --iti-flag-offset: -3616px
}

.iti__uy {
    --iti-flag-offset: -3632px
}

.iti__uz {
    --iti-flag-offset: -3648px
}

.iti__va {
    --iti-flag-offset: -3664px
}

.iti__vc {
    --iti-flag-offset: -3680px
}

.iti__ve {
    --iti-flag-offset: -3696px
}

.iti__vg {
    --iti-flag-offset: -3712px
}

.iti__vi {
    --iti-flag-offset: -3728px
}

.iti__vn {
    --iti-flag-offset: -3744px
}

.iti__vu {
    --iti-flag-offset: -3760px
}

.iti__wf {
    --iti-flag-offset: -3776px
}

.iti__ws {
    --iti-flag-offset: -3792px
}

.iti__xk {
    --iti-flag-offset: -3808px
}

.iti__ye {
    --iti-flag-offset: -3824px
}

.iti__yt {
    --iti-flag-offset: -3840px
}

.iti__za {
    --iti-flag-offset: -3856px
}

.iti__zm {
    --iti-flag-offset: -3872px
}

.iti__zw {
    --iti-flag-offset: -3888px
}

.iti__globe {
    background-image: var(--iti-path-globe-1x);
    background-size: contain;
    background-position: right;
    box-shadow: none;
    height: 19px
}

@media(min-resolution:2x) {
    .iti__flag {
        background-image: var(--iti-path-flags-2x)
    }

    .iti__globe {
        background-image: var(--iti-path-globe-2x)
    }
}

:root {
    --iti-path-flags-1x: url("./media/flags-DEVAAAR7.webp");
    --iti-path-flags-2x: url("./media/flags@2x-LAG6ZLTZ.webp");
    --iti-path-globe-1x: url("./media/globe-TDQQLSUB.webp");
    --iti-path-globe-2x: url("./media/globe@2x-S5G7N6BJ.webp")
}