@import"fonts/inter.css";

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@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-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-space-x-reverse: 0;
            --tw-divide-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-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-content: "";
            --tw-text-shadow-color: initial;
            --tw-text-shadow-alpha: 100%
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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-50: oklch(97.1% .013 17.38);
        --color-red-500: oklch(63.7% .237 25.331);
        --color-red-600: oklch(57.7% .245 27.325);
        --color-orange-50: #fff7ed;
        --color-orange-100: #ffedd4;
        --color-orange-200: #ffd6a7;
        --color-orange-300: #ffb86a;
        --color-orange-400: #ff8904;
        --color-orange-500: #ff6900;
        --color-orange-600: #f54900;
        --color-orange-700: #ca3500;
        --color-orange-800: #9f2d00;
        --color-orange-900: #7e2a0c;
        --color-orange-950: #441306;
        --color-amber-500: oklch(76.9% .188 70.08);
        --color-yellow-400: oklch(85.2% .199 91.936);
        --color-green-50: oklch(98.2% .018 155.826);
        --color-green-500: oklch(72.3% .219 149.579);
        --color-green-600: oklch(62.7% .194 149.214);
        --color-emerald-500: oklch(69.6% .17 162.48);
        --color-teal-50: #f0fdfa;
        --color-teal-100: #ccfbf1;
        --color-teal-200: #96f7e4;
        --color-teal-300: #46ecd5;
        --color-teal-400: #00d5be;
        --color-teal-500: #00bba7;
        --color-teal-600: #009689;
        --color-teal-700: #00786f;
        --color-teal-800: #005f5a;
        --color-teal-900: #0b4f4a;
        --color-teal-950: #022f2e;
        --color-cyan-50: #ecfeff;
        --color-cyan-100: #cefafe;
        --color-cyan-200: #a2f4fd;
        --color-cyan-300: #53eafd;
        --color-cyan-400: #00d3f2;
        --color-cyan-500: #00b8db;
        --color-cyan-600: #0092b8;
        --color-cyan-700: #007595;
        --color-cyan-800: #005f78;
        --color-cyan-900: #104e64;
        --color-cyan-950: #053345;
        --color-blue-500: oklch(62.3% .214 259.815);
        --color-blue-600: oklch(54.6% .245 262.881);
        --color-blue-700: oklch(48.8% .243 264.376);
        --color-indigo-50: #eef2ff;
        --color-indigo-100: #e0e7ff;
        --color-indigo-200: #c6d2ff;
        --color-indigo-300: #a3b3ff;
        --color-indigo-400: #7c86ff;
        --color-indigo-500: #615fff;
        --color-indigo-600: #4f39f6;
        --color-indigo-700: #432dd7;
        --color-indigo-800: #372aac;
        --color-indigo-900: #312c85;
        --color-indigo-950: #1e1b4b;
        --color-purple-50: #f5f1ff;
        --color-purple-100: #ede5ff;
        --color-purple-200: #ddcfff;
        --color-purple-300: #c4a9ff;
        --color-purple-400: #a878ff;
        --color-purple-500: #8f42ff;
        --color-purple-600: #851cff;
        --color-purple-700: #7008e7;
        --color-purple-800: #6408cf;
        --color-purple-900: #5409a9;
        --color-purple-950: #330273;
        --color-pink-50: #fdf2f8;
        --color-pink-100: #fce7f3;
        --color-pink-200: #fccee8;
        --color-pink-300: #fda5d5;
        --color-pink-400: #fb64b6;
        --color-pink-500: #f6339a;
        --color-pink-600: #e60076;
        --color-pink-700: #c6005c;
        --color-pink-800: #a3004c;
        --color-pink-900: #861043;
        --color-pink-950: #510424;
        --color-slate-200: oklch(92.9% .013 255.508);
        --color-slate-700: oklch(37.2% .044 257.287);
        --color-slate-900: oklch(20.8% .042 265.755);
        --color-gray-50: #f9fafb;
        --color-gray-100: #f3f4f6;
        --color-gray-200: #e5e7eb;
        --color-gray-300: #d1d5dc;
        --color-gray-400: #99a1af;
        --color-gray-500: #6a7282;
        --color-gray-600: #4a5565;
        --color-gray-700: #364153;
        --color-gray-800: #1e2939;
        --color-gray-900: #101828;
        --color-gray-950: #030712;
        --color-neutral-200: oklch(92.2% 0 none);
        --color-neutral-300: oklch(87% 0 none);
        --color-neutral-400: oklch(70.8% 0 none);
        --color-neutral-500: oklch(55.6% 0 none);
        --color-neutral-600: oklch(43.9% 0 none);
        --color-neutral-700: oklch(37.1% 0 none);
        --color-neutral-800: oklch(26.9% 0 none);
        --color-neutral-900: oklch(20.5% 0 none);
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --container-xs: 20rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-xl: 36rem;
        --container-2xl: 42rem;
        --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-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-xs: .125rem;
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
        --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
        --blur-sm: 8px;
        --blur-md: 12px;
        --blur-3xl: 64px;
        --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);
        --font-family-primary: "Inter", sans-serif;
        --font-awesome: "Fontawesome";
        --color-primary: #7a13f0;
        --color-primary-hover: #330570;
        --color-success: #096;
        --color-info: #155dfc;
        --color-warning: #d97f06;
        --color-danger: #f83636;
        --color-dark: #101828;
        --color-light: #f9fafb;
        --color-purple: #7008e7;
        --color-pink: #e60076;
        --color-teal: #009689;
        --color-cyan: #0092b8;
        --color-orange: #f54900;
        --color-primary-50: #f5f1ff;
        --color-primary-100: #ede6ff;
        --color-primary-200: #ded1ff;
        --color-primary-300: #c5acff;
        --color-primary-400: #aa7dff;
        --color-primary-500: #9148ff;
        --color-primary-600: #8723ff;
        --color-primary-700: #7a13f0;
        --color-primary-800: #650ec9;
        --color-primary-900: #550da5;
        --color-primary-950: #330570;
        --color-success-50: #ebfef5;
        --color-success-100: #d0fbe4;
        --color-success-200: #a4f6ce;
        --color-success-300: #6aebb5;
        --color-success-400: #2fd896;
        --color-success-500: #0abf7f;
        --color-success-600: #096;
        --color-success-700: #007c56;
        --color-success-800: #036245;
        --color-success-900: #04503a;
        --color-success-950: #012d22;
        --color-warning-50: #fffceb;
        --color-warning-100: #fef5c7;
        --color-warning-200: #fdea8a;
        --color-warning-300: #fcd94d;
        --color-warning-400: #fbc724;
        --color-warning-500: #f5a70d;
        --color-warning-600: #d97f06;
        --color-warning-700: #b45909;
        --color-warning-800: #92450e;
        --color-warning-900: #78390f;
        --color-warning-950: #012d22;
        --color-danger-50: #fff1f1;
        --color-danger-100: #ffe0e0;
        --color-danger-200: #ffc7c7;
        --color-danger-300: #ffa0a0;
        --color-danger-400: #ff6a6a;
        --color-danger-500: #f83636;
        --color-danger-600: #e61c1c;
        --color-danger-700: #c11414;
        --color-danger-800: #a01414;
        --color-danger-900: #841818;
        --color-danger-950: #480707;
        --color-info-50: #eff6ff;
        --color-info-100: #dbeafe;
        --color-info-200: #bedbff;
        --color-info-300: #8ec5ff;
        --color-info-400: #51a2ff;
        --color-info-500: #2b7fff;
        --color-info-600: #155dfc;
        --color-info-700: #1447e6;
        --color-info-800: #193cb8;
        --color-info-900: #1c398e;
        --color-info-950: #162456;
        --color-light-100: #fcfcfc;
        --color-light-200: #fbfbfb;
        --color-light-800: #f3f3f3;
        --color-light-900: #f2f2f2;
        --color-default: #4a5565;
        --color-title: #101828;
        --color-border-color: #e5e7eb;
        --background-image-linear-gradient-100: linear-gradient(180deg, #7a13f0 0%, #ff1ade 100%);
        --background-image-linear-gradient-200: linear-gradient(0deg, #fff 0%, #f8f9fb 100%);
        --background-image-linear-gradient-300: linear-gradient(265.2deg, #0092b8 -5.36%, #00647e 46.24%);
        --background-image-linear-gradient-400: linear-gradient(21.05deg, #f6c111 -38.05%, #f16f12 41.5%, #ebb914 102.81%);
        --background-image-linear-gradient-500: linear-gradient(21.05deg, #11f6f6 -38.05%, #12b8f1 41.5%, #1479eb 102.81%);
        --background-image-linear-gradient-600: linear-gradient(180deg, #210426 0%, #7a13f0 100%);
        --background-image-primary-gradient: linear-gradient(21.05deg, #5711f6 -38.05%, #9614eb 37.02%, #ff1ade 112.09%);
        --background-image-primary-gradient-100: linear-gradient(180deg, #7a13f04d 0%, #7a13f008 50%, #7a13f021 75%, #7a13f00f 87.5%, #7a13f00d 100%);
        --background-image-success-gradient-200: linear-gradient(21.05deg, #096 -38.05%, #00b37d 37.02%, #00e6a8 112.09%);
        --background-image-info-gradient-200: linear-gradient(21.05deg, #155dfc -38.05%, #3b82f6 37.02%, #60a5fa 112.09%);
        --background-image-dark-gradient: linear-gradient(21.05deg, #f83636 -38.05%, #fb7185 37.02%, #fda4af 112.09%);
        --background-image-danger-gradient: linear-gradient(21.05deg, #101828 -38.05%, #1f2937 37.02%, #374151 112.09%);
        --background-image-success-gradient-100: linear-gradient(180deg, #0099664d 0%, #00996608 50%, #00996608 75%, #0099660f 87.5%, #0099660d 100%);
        --background-image-warning-gradient-100: linear-gradient(180deg, #d97f0666 0%, #d97f0608 50%, #d97f0608 75%, #d97f060f 87.5%, #d97f060d 100%);
        --background-image-info-gradient-100: linear-gradient(180deg, #2b7fff40 0%, #2b7fff08 50%, #2b7fff08 75%, #2b7fff0f 87.5%, #2b7fff0d 100%);
        --background-image-success-gradient: linear-gradient(90deg, #2fd896 0%, #19724f 100%);
        --background-image-teal-gradient: linear-gradient(90deg, #009689 0%, #00302c 100%);
        --background-image-info-gradient: linear-gradient(90deg, #155dfc 0%, #0d3796 100%);
        --background-image-primary-gradient-200: linear-gradient(90deg, #7a13f0 0%, #460b8a 100%);
        --background-image-primary-gradient-300: linear-gradient(0deg, #fff, #fff), linear-gradient(0deg, #7a13f000 0%, #bc81ff08 50%, #460b8a1f 100%);
        --background-image-linear-gradient-700: linear-gradient(135.77deg, #fef889 19.88%, #ee7a1a 34.4%, #ed1010 48.91%, #5c1fff 77.94%);
        --shadow-card: 0 1px 2px #1018280a;
        --sidenav-width: 298px;
        --sidebar-mini-width: 64px;
        --sidebar-bg: #fff;
        --sidebar-border: #e5e7eb;
        --sidebar-menu-item: var(--color-gray-900);
        --sidebar-menu-active-item: var(--color-white);
        --background-image-sidebar-menu-active-bg: linear-gradient(90deg, #7a13f0 50%, #aa7dff 100%);
        --sidebar-icon-item: var(--color-gray-900);
        --sidebar-icon-bg: var(--color-white);
        --sidebar-icon-active-item: var(--color-primary);
        --sidebar-icon-active-bg: var(--color-light);
        --sidebar-title: var(--color-gray-900);
        --sidebar-submenu-item: var(--color-gray-900);
        --sidebar-submenu-active-item: var(--color-primary);
        --topbar-bg: var(--color-light);
        --topbar-item: var(--color-gray-900);
        --topbar-item-bg: var(--color-white);
        --topbar-item-border: var(--color-border-color);
        --topbar-item-active-bg: var(--color-light);
        --topbar-input-bg: var(--color-white);
        --topbar-input-border: var(--color-border-color);
        --topbar-input-placeholder: var(--color-gray-400);
        --topbar-input-icon: var(--color-gray-900);
        --animate-rotate-slow: spin 4s linear infinite
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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 {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring:where(:not(iframe)) {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :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)
            }
        }
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-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]) {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    body {
        background-color: var(--color-light);
        font-family: var(--font-family-primary);
        --tw-leading: 1.5;
        color: var(--color-default);
        font-size: 14px;
        line-height: 1.5;
        overflow-x: hidden
    }

    h1,
    .h1 {
        --tw-leading: 1.2;
        --tw-font-weight: var(--font-weight-bold);
        font-size: 35px;
        line-height: 1.2;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900)
    }

    @media not all and (min-width:992px) {

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

    @media not all and (min-width:768px) {

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

    h2,
    .h2 {
        --tw-leading: 1.2;
        --tw-font-weight: var(--font-weight-bold);
        font-size: 28px;
        line-height: 1.2;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900)
    }

    @media not all and (min-width:992px) {

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

    @media not all and (min-width:768px) {

        h2,
        .h2 {
            font-size: 22px
        }
    }

    h3,
    .h3 {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading, var(--text-2xl--line-height));
        --tw-leading: 1.2;
        --tw-font-weight: var(--font-weight-bold);
        line-height: 1.2;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900)
    }

    @media not all and (min-width:992px) {

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

    h4,
    .h4 {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        --tw-leading: 1.2;
        --tw-font-weight: var(--font-weight-bold);
        line-height: 1.2;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900)
    }

    @media not all and (min-width:992px) {

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

    h5,
    .h5 {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
        --tw-leading: 1.2;
        --tw-font-weight: var(--font-weight-bold);
        line-height: 1.2;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900)
    }

    @media not all and (min-width:992px) {

        h5,
        .h5 {
            font-size: 17px
        }
    }

    h6,
    .h6 {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        --tw-leading: 1.2;
        --tw-font-weight: var(--font-weight-bold);
        line-height: 1.2;
        font-weight: var(--font-weight-bold);
        color: var(--color-gray-900)
    }

    a {
        cursor: pointer;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .5s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .5s;
        transition-timing-function: var(--ease-in-out);
        text-decoration-line: none
    }

    @media(hover:hover) {
        a:hover {
            color: var(--color-primary-hover)
        }
    }

    a:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    ::selection {
        background-color: var(--color-primary);
        color: var(--color-white);
        text-shadow: none
    }

    hr {
        border-style: var(--tw-border-style);
        background-color: var(--color-border-color);
        border-width: 0;
        height: 1px
    }

    ul {
        padding-inline-start: calc(var(--spacing) * 10)
    }

    ul li {
        margin-bottom: calc(var(--spacing) * 2.5);
        list-style-type: disc
    }

    ul li:last-child {
        margin-bottom: 0
    }

    ::-webkit-scrollbar {
        height: calc(var(--spacing) * 1.25);
        width: calc(var(--spacing) * 1.25);
        border-radius: 3.40282e38px
    }

    ::-webkit-scrollbar-track {
        background-color: var(--color-light-200)
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--color-primary)
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-primary) !important
    }

    [type=text],
    [type=email],
    [type=url],
    [type=password],
    [type=number],
    [type=date],
    [type=datetime-local],
    [type=month],
    [type=search],
    [type=tel],
    [type=time],
    [type=week],
    [multiple],
    textarea,
    select {
        font-size: var(--text-sm) !important;
        line-height: var(--tw-leading, var(--text-sm--line-height)) !important
    }

    textarea {
        resize: none
    }

    @media print {
        body * {
            visibility: hidden
        }

        #printableCard,
        #printableCard * {
            visibility: visible
        }

        #printableCard {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0
        }
    }

    input:where([type=text]),
    input:where(:not([type])),
    input:where([type=email]),
    input:where([type=url]),
    input:where([type=password]),
    input:where([type=number]),
    input:where([type=date]),
    input:where([type=datetime-local]),
    input:where([type=month]),
    input:where([type=search]),
    input:where([type=tel]),
    input:where([type=time]),
    input:where([type=week]),
    select:where([multiple]),
    textarea,
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        border-width: 1px;
        border-color: #6a7282;
        border-radius: 0;
        padding: .5rem .75rem;
        font-size: 1rem;
        line-height: 1.5rem
    }

    :is(input:where([type=text]), input:where(:not([type])), input:where([type=email]), input:where([type=url]), input:where([type=password]), input:where([type=number]), input:where([type=date]), input:where([type=datetime-local]), input:where([type=month]), input:where([type=search]), input:where([type=tel]), input:where([type=time]), input:where([type=week]), select:where([multiple]), textarea, select):focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-color: #155dfc;
        outline: 2px solid #0000
    }

    input::placeholder,
    textarea::placeholder {
        color: #6a7282;
        opacity: 1
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-date-and-time-value {
        min-height: 1.5em;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-top: 0;
        padding-bottom: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-top: 0;
        padding-bottom: 0
    }

    select {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236A7282' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right .5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem
    }

    select:where([multiple]),
    select:where([size]:not([size="1"])) {
        background-image: initial;
        background-position: initial;
        background-repeat: unset;
        background-size: initial;
        -webkit-print-color-adjust: unset;
        print-color-adjust: unset;
        padding-right: .75rem
    }

    input:where([type=checkbox]),
    input:where([type=radio]) {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        vertical-align: middle;
        -webkit-user-select: none;
        user-select: none;
        color: #155dfc;
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        background-origin: border-box;
        border-width: 1px;
        border-color: #6a7282;
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        padding: 0;
        display: inline-block
    }

    input:where([type=checkbox]) {
        border-radius: 0
    }

    input:where([type=radio]) {
        border-radius: 100%
    }

    input:where([type=checkbox]):focus,
    input:where([type=radio]):focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        outline: 2px solid #0000
    }

    input:where([type=checkbox]):checked,
    input:where([type=radio]):checked {
        background-color: currentColor;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-color: #0000
    }

    input:where([type=checkbox]):checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
    }

    @media(forced-colors:active) {
        input:where([type=checkbox]):checked {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto
        }
    }

    input:where([type=radio]):checked {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")
    }

    @media(forced-colors:active) {
        input:where([type=radio]):checked {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto
        }
    }

    input:where([type=checkbox]):checked:hover,
    input:where([type=checkbox]):checked:focus,
    input:where([type=radio]):checked:hover,
    input:where([type=radio]):checked:focus {
        background-color: currentColor;
        border-color: #0000
    }

    input:where([type=checkbox]):indeterminate {
        background-color: currentColor;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-color: #0000
    }

    @media(forced-colors:active) {
        input:where([type=checkbox]):indeterminate {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto
        }
    }

    input:where([type=checkbox]):indeterminate:hover,
    input:where([type=checkbox]):indeterminate:focus {
        background-color: currentColor;
        border-color: #0000
    }

    input:where([type=file]) {
        background: unset;
        border-color: inherit;
        font-size: unset;
        line-height: inherit;
        border-width: 0;
        border-radius: 0;
        padding: 0
    }

    input:where([type=file]):focus {
        outline: 1px solid buttontext;
        outline: 1px auto -webkit-focus-ring-color
    }
}

@layer components {
    .sidebar ul {
        padding: 0
    }

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

    .sidebar-twocol.sidebar {
        top: calc(var(--spacing) * 3);
        bottom: calc(var(--spacing) * 3);
        left: calc(var(--spacing) * 3);
        z-index: 9999;
        border-right-style: var(--tw-border-style);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .2s;
        --tw-ease: ease;
        background-color: #0000;
        border-right-width: 0;
        margin-top: 0;
        transition-duration: .2s;
        transition-timing-function: ease;
        position: fixed
    }

    @media not all and (min-width:992px) {
        .sidebar-twocol.sidebar {
            margin-left: calc(var(--sidenav-width) * -1);
            inset-inline-start: calc(var(--spacing) * 0);
            top: 0;
            bottom: 0;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important
        }
    }

    .sidebar-twocol .twocol-mini {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
        border-color: var(--sidebar-border)
    }

    .sidebar-twocol.sidebar .sidebar-left {
        width: calc(var(--spacing) * 18)
    }

    .sidebar-twocol.sidebar .sidebar-right {
        height: 100%;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .2s;
        --tw-ease: ease;
        transition-duration: .2s;
        transition-timing-function: ease
    }

    .sidebar-twocol.sidebar .sidebar-right .sidebar-scroll {
        height: calc(100vh - 300px);
        overflow-x: hidden
    }

    .sidebar-twocol.sidebar.active .sidebar-right .sidebar-scroll {
        height: calc(100vh - 118px)
    }

    .sidebar-twocol.sidebar .sidebar-right .sidebar-scroll .simplebar-track,
    .sidebar-twocol.sidebar .sidebar-left .simplebar-track {
        right: calc(var(--spacing) * -3) !important
    }

    .sidebar-twocol.sidebar .sidebar-right ul li {
        margin-bottom: var(--spacing)
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.menu-title:not(:first-child) {
        margin-top: calc(var(--spacing) * 6);
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
        border-color: var(--sidebar-border);
        padding-top: calc(var(--spacing) * 6)
    }

    .sidebar-twocol.sidebar .sidebar-left ul {
        padding-block: calc(var(--spacing) * 2)
    }

    .sidebar-twocol.sidebar .sidebar-left ul li a,
    .sidebar-profile a {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
        border-radius: var(--radius-lg);
        background-color: var(--sidebar-icon-bg);
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        color: var(--sidebar-icon-item);
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .sidebar-twocol.sidebar .sidebar-left ul li a.active {
        z-index: 0;
        padding: 1px;
        position: relative;
        overflow: hidden
    }

    .sidebar-twocol.sidebar .sidebar-left ul li a.active:before {
        z-index: -10;
        height: 100%;
        width: calc(var(--spacing) * 6);
        transform-origin: top;
        border-style: var(--tw-border-style);
        --tw-gradient-position: 21.05deg, #5711f6 -38.05%, #9614eb 37.02%, #ff1ade 76.72%, #5711f6 112.09%;
        background-image: linear-gradient(var(--tw-gradient-stops, 21.05deg, #5711f6 -38.05%, #9614eb 37.02%, #ff1ade 76.72%, #5711f6 112.09%));
        -webkit-mask-image: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-image: linear-gradient(#fff 0, #fff 0) content-box, linear-gradient(#fff 0, #fff 0);
        --tw-content: "";
        content: var(--tw-content);
        border-width: 1px;
        animation: 4s linear infinite anim-rotate;
        position: absolute;
        top: 50%;
        right: 0;
        bottom: 0;
        left: -1px;
        -webkit-mask-composite: xor;
        mask-composite: exclude
    }

    .sidebar-twocol.sidebar .sidebar-left ul li a .sidebar-icon {
        border-radius: var(--radius-lg);
        background-color: var(--sidebar-icon-bg);
        width: 100%;
        height: 100%;
        color: var(--sidebar-icon-item);
        justify-content: center;
        align-items: center;
        display: flex
    }

    @media(hover:hover) {
        .sidebar-twocol.sidebar .sidebar-left ul li a .sidebar-icon:hover {
            background-color: var(--sidebar-icon-active-bg);
            color: var(--sidebar-icon-active-item)
        }
    }

    .sidebar-twocol.sidebar .sidebar-left ul li a.active .sidebar-icon {
        background-color: var(--sidebar-icon-active-bg);
        color: var(--sidebar-icon-active-item)
    }

    @media(hover:hover) {
        .sidebar-twocol.sidebar .sidebar-left ul li a.active .sidebar-icon:hover {
            background-color: var(--sidebar-icon-active-bg);
            color: var(--sidebar-icon-active-item)
        }
    }

    .sidebar-twocol.sidebar .sidebar-right .tab-item ul>li>a {
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .3s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .3s;
        transition-timing-function: var(--ease-in-out)
    }

    .sidebar-twocol.sidebar .sidebar-right ul li a.active {
        background-image: var(--background-image-sidebar-menu-active-bg);
        color: var(--sidebar-menu-active-item) !important
    }

    .sidebar-twocol.sidebar .sidebar-right .tab-item ul>li>a span {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .sidebar-twocol.sidebar .sidebar-right ul li a i {
        font-size: var(--text-base) !important;
        line-height: var(--tw-leading, var(--text-base--line-height)) !important
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul {
        margin-top: 5px;
        margin-bottom: calc(var(--spacing) * 2.5);
        display: none
    }

    .sidebar-twocol.sidebar .sidebar-right .menu-arrow {
        top: 50%;
        right: calc(var(--spacing) * 2);
        --tw-translate-x: 0px;
        --tw-translate-y: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        font-family: var(--font-awesome);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
        --tw-leading: calc(var(--spacing) * 10);
        line-height: calc(var(--spacing) * .5);
        line-height: calc(var(--spacing) * 10);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        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));
        --tw-duration: .15s;
        transition-duration: .15s;
        display: inline-block;
        position: absolute
    }

    .sidebar-twocol.sidebar .sidebar-right ul li a.subdrop {
        background-image: var(--background-image-sidebar-menu-active-bg) !important;
        color: var(--sidebar-menu-active-item) !important
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu-two a.subdrop,
    .sidebar-twocol.sidebar .sidebar-right ul li.submenu-two a.active {
        background-color: var(--sidebar-bg) !important;
        color: var(--sidebar-submenu-active-item) !important;
        background-image: none !important
    }

    :is(.sidebar-twocol.sidebar .sidebar-right ul li.submenu-two a.subdrop, .sidebar-twocol.sidebar .sidebar-right ul li.submenu-two a.active):before {
        content: var(--tw-content);
        background-color: var(--sidebar-submenu-active-item) !important
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu a.subdrop .menu-arrow {
        rotate: 90deg
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a {
        padding-block: calc(var(--spacing) * 2);
        padding-inline-end: calc(var(--spacing) * 4);
        padding-left: calc(var(--spacing) * 10);
        color: var(--sidebar-submenu-item);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .2s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .2s;
        transition-timing-function: var(--ease-in-out);
        display: flex;
        position: relative;
        background-color: var(--sidebar-bg) !important;
        background-image: none !important
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a:before {
        width: var(--spacing);
        height: var(--spacing);
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        background-color: var(--sidebar-submenu-item);
        --tw-content: "";
        content: var(--tw-content);
        inset-inline-start: calc(var(--spacing) * 6);
        border-radius: 3.40282e38px;
        display: inline-block;
        position: absolute;
        top: 50%
    }

    @media(hover:hover) {
        .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a:hover {
            color: var(--sidebar-submenu-active-item)
        }

        .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a:hover:before {
            content: var(--tw-content);
            background-color: var(--sidebar-submenu-active-item)
        }
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a.active {
        position: relative
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a.active:before {
        background-color: var(--color-white);
        --tw-content: "";
        content: var(--tw-content);
        position: absolute
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a:hover,
    .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a.active {
        background-color: var(--sidebar-bg) !important;
        color: var(--sidebar-submenu-active-item) !important;
        background-image: none !important
    }

    :is(.sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a:hover, .sidebar-twocol.sidebar .sidebar-right ul li.submenu ul>li>a.active):before {
        content: var(--tw-content);
        background-color: var(--sidebar-submenu-active-item) !important
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu-two ul>li>a {
        padding-left: calc(var(--spacing) * 13)
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu-two ul>li>a:before {
        content: var(--tw-content);
        inset-inline-start: calc(var(--spacing) * 9.5)
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu-three ul>li>a {
        padding-left: calc(var(--spacing) * 18)
    }

    .sidebar-twocol.sidebar .sidebar-right ul li.submenu-three ul>li>a:before {
        content: var(--tw-content);
        inset-inline-start: calc(var(--spacing) * 13)
    }

    .sidebar-twocol.sidebar .sidebar-right .menu-arrow {
        top: 50%;
        right: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 4);
        width: calc(var(--spacing) * 4);
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .2s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .2s;
        transition-timing-function: var(--ease-in-out);
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute
    }

    .sidebar-twocol.sidebar .sidebar-right .menu-arrow:before {
        content: "";
        font-size: 16px;
        font-family: lucide !important
    }

    .sidebar-twocol.sidebar .sidebar-right .sidebar-logo {
        margin-top: calc(var(--spacing) * 2);
        justify-content: space-between;
        align-items: center;
        display: flex
    }

    .sidebar-twocol.sidebar .sidebar-right .sidebar-close {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--sidebar-border);
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        color: var(--sidebar-menu-item);
        border-radius: 3.40282e38px;
        justify-content: center;
        align-items: center;
        display: none
    }

    @media(hover:hover) {
        .sidebar-twocol.sidebar .sidebar-right .sidebar-close:hover {
            background-color: var(--color-danger);
            color: var(--color-white)
        }
    }

    @media not all and (min-width:992px) {
        .sidebar-twocol.sidebar .sidebar-right .sidebar-close {
            display: flex
        }
    }

    .sidebar-twocol.sidebar .sidebar-left [data-simplebar] {
        height: calc(100vh - 200px);
        top: 0
    }

    .slide-nav .sidebar {
        margin-left: 0
    }

    .sidebar-overlay {
        z-index: 1050;
        inset-inline-start: calc(var(--spacing) * 0);
        background-color: #0009;
        width: 100%;
        height: 100%;
        display: none;
        position: fixed;
        top: 0
    }

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

    .sidebar-overlay.opened {
        display: block
    }

    @media(min-width:992px) {
        .mini-sidebar .sidebar-right {
            display: none
        }
    }

    .mini-sidebar .twocol-mini {
        border-right-style: var(--tw-border-style);
        border-right-width: 0
    }

    .mini-sidebar .navbar-header,
    .mini-sidebar .page-wrapper {
        margin-left: 77px
    }

    @media(min-width:992px) {
        .mini-sidebar.expand-menu .sidebar-right {
            display: block
        }
    }

    .mini-sidebar.expand-menu .twocol-mini {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
        border-color: var(--sidebar-border)
    }

    .navbar-header {
        z-index: 50;
        margin-left: var(--sidenav-width);
        background-color: var(--topbar-bg);
        padding-inline: calc(var(--spacing) * 6);
        padding-top: calc(var(--spacing) * 6);
        position: sticky;
        top: 0
    }

    @media not all and (min-width:992px) {
        .navbar-header {
            height: calc(var(--spacing) * 14);
            border-bottom-style: var(--tw-border-style);
            border-bottom-width: 1px;
            border-color: var(--color-border-color);
            background-color: var(--color-white);
            padding: 0;
            padding-inline: calc(var(--spacing) * 5);
            margin-left: 0
        }
    }

    .topbar-link,
    .navbar-header .topbar-link {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        border-radius: 3.40282e38px;
        display: flex;
        font-size: var(--text-base) !important;
        line-height: var(--tw-leading, var(--text-base--line-height)) !important
    }

    .navbar-header .topbar-menu {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--color-border-color);
        height: 100%;
        padding-bottom: calc(var(--spacing) * 6)
    }

    @media not all and (min-width:992px) {
        .navbar-header .topbar-menu {
            border-style: var(--tw-border-style);
            border-width: 0;
            padding: 0
        }
    }

    .navbar-header .header-dropdown {
        display: none
    }

    @media(min-width:1200px) {
        .navbar-header .header-dropdown {
            display: block
        }
    }

    .navbar-header .logo {
        --tw-translate-x: -50%;
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        inset-inline-start: 50%;
        display: none;
        position: absolute;
        top: 50%
    }

    @media not all and (min-width:992px) {
        .navbar-header .logo {
            display: block
        }
    }

    @media not all and (min-width:576px) {
        .navbar-header .logo {
            position: relative;
            top: auto;
            left: auto;
            translate: none
        }
    }

    @media not all and (min-width:992px) {

        .navbar-header .logo .logo-dark,
        .navbar-header .logo .logo-light .logo-sm {
            display: none
        }
    }

    @media not all and (min-width:576px) {
        .navbar-header .logo .logo-light .logo-sm {
            display: flex
        }

        .navbar-header .logo .logo-light .logo-lg {
            display: none
        }

        .navbar-header .topbar-menu :scope>div:first-child {
            flex-direction: row-reverse
        }
    }

    .navbar-header .mobile-btn {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border-color);
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height));
        color: var(--color-primary);
        border-radius: 3.40282e38px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    @media(min-width:992px) {
        .navbar-header .mobile-btn {
            display: none
        }
    }

    .topbar-menu .sidenav-toggle-btn.topbar-link {
        display: flex
    }

    @media not all and (min-width:992px) {
        .topbar-menu .sidenav-toggle-btn.topbar-link {
            display: none
        }
    }

    .topbar-menu .topbar-link {
        cursor: pointer;
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--topbar-item-border);
        background-color: var(--topbar-item-bg);
        color: var(--topbar-item);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .5s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .5s;
        transition-timing-function: var(--ease-in-out)
    }

    @media(hover:hover) {
        .topbar-menu .topbar-link:hover {
            background-color: var(--topbar-item-active-bg)
        }
    }

    @media not all and (min-width:1200px) {
        .navbar-header .header-search input {
            max-width: calc(var(--spacing) * 52)
        }
    }

    .notification-dropdown [data-simplebar] {
        max-height: calc(100vh - 200px)
    }

    .header-mobile {
        margin-inline: calc(var(--spacing) * 3);
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--color-border-color);
        padding-block: calc(var(--spacing) * 5);
        display: flex
    }

    @media(min-width:992px) {
        .header-mobile {
            display: none
        }
    }

    .header-mobile .notification-dropdown [data-simplebar] {
        max-height: calc(100vh - 260px)
    }

    .header-mobile .topbar-link {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border-color);
        background-color: var(--color-white)
    }

    .profile-dropdown:before {
        height: calc(var(--spacing) * 4.5);
        --tw-translate-y: -50%;
        width: 1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        background-color: var(--color-border-color);
        --tw-content: "";
        content: var(--tw-content);
        display: block;
        position: absolute;
        top: 50%
    }

    @media not all and (min-width:992px) {
        .profile-dropdown:before {
            content: var(--tw-content);
            --tw-content: none;
            content: none
        }
    }

    @media(min-width:992px) {
        .profile-dropdown {
            margin-inline-start: calc(var(--spacing) * 2)
        }
    }

    .page-wrapper {
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(100vh - 90px);
        display: flex
    }

    @media(min-width:992px) {
        .page-wrapper {
            margin-left: var(--sidenav-width)
        }
    }

    .header-two {
        background-color: var(--color-white);
        height: 56px;
        padding-inline: calc(var(--spacing) * 6);
        margin-left: 0;
        padding-block: 0
    }

    @media not all and (min-width:992px) {
        .header-two {
            padding-inline: calc(var(--spacing) * 3)
        }
    }

    .header-two .topbar-menu {
        border-style: var(--tw-border-style);
        border-width: 0;
        padding: 0
    }

    .header-two .mobile-btn {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border-color);
        background-color: var(--color-white);
        color: var(--color-primary);
        border-radius: 3.40282e38px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    @media(hover:hover) {
        .header-two .mobile-btn:hover {
            background-color: var(--color-light)
        }
    }

    .header-two.navbar-header .logo {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        translate: none
    }

    @media not all and (min-width:992px) {
        .header-two.navbar-header .logo {
            --tw-translate-x: -50%;
            --tw-translate-y: -50%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
            position: absolute;
            top: 50%;
            left: 50%
        }
    }

    .header-two.navbar-header .logo .logo-sm {
        display: block
    }

    .header-two.navbar-header .logo .logo-lg {
        display: none
    }

    .tools-wrapper .sidebar-twocol {
        margin-left: calc(var(--sidenav-width) * -1);
        inset-inline-start: calc(var(--spacing) * 0);
        top: 0
    }

    .tools-wrapper .slide-nav .sidebar {
        margin-left: 0
    }

    .tools-wrapper .sidebar-twocol.sidebar .sidebar-right .sidebar-close {
        display: flex
    }

    .tools-wrapper .page-wrapper {
        margin-left: 0
    }

    .tools-wrapper .page-wrapper .content {
        padding: calc(var(--spacing) * 10)
    }

    @media not all and (min-width:992px) {
        .tools-wrapper .page-wrapper .content {
            padding: calc(var(--spacing) * 4)
        }
    }

    .btn {
        cursor: pointer;
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1.75);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .5s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .5s;
        transition-timing-function: var(--ease-in-out);
        display: inline-block
    }

    .btn-sm,
    .btn-small {
        cursor: pointer;
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing) * 2.5);
        padding-block: calc(var(--spacing) * 1.5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .5s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .5s;
        transition-timing-function: var(--ease-in-out);
        display: inline-block
    }

    .btn-xsmall {
        cursor: pointer;
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing) * 1.5);
        padding-block: var(--spacing);
        --tw-font-weight: var(--font-weight-medium);
        font-size: 10px;
        font-weight: var(--font-weight-medium);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .5s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .5s;
        transition-timing-function: var(--ease-in-out);
        display: inline-block
    }

    .btn-lg {
        cursor: pointer;
        border-radius: var(--radius-lg);
        padding-inline: calc(var(--spacing) * 3.5);
        padding-block: calc(var(--spacing) * 2.5);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: .5s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .5s;
        transition-timing-function: var(--ease-in-out);
        display: inline-block
    }

    .badge {
        padding-inline: calc(var(--spacing) * 2);
        padding-block: var(--spacing)
    }

    .badge-small {
        padding-inline: calc(var(--spacing) * 1.5);
        padding-block: calc(var(--spacing) * .5);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .avatar-list-stacked .avatar-hover {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-white);
        vertical-align: middle;
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--color-white);
        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));
        --tw-duration: .15s;
        --tw-ease: var(--ease-in-out);
        transition-duration: .15s;
        transition-timing-function: var(--ease-in-out);
        border-radius: .25rem;
        justify-content: center;
        align-items: center;
        margin-inline-end: -.875rem;
        display: inline-flex
    }

    @media(hover:hover) {
        .avatar-list-stacked .avatar-hover:hover {
            z-index: 1;
            --tw-translate-y: -.188rem;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }
    }

    .rangepicker-input .form-input {
        padding-inline-start: calc(var(--spacing) * 8) !important;
        padding-left: calc(var(--spacing) * 8) !important
    }

    .choices__inner {
        border-radius: var(--radius-lg) !important;
        border-color: var(--color-border-color) !important;
        background-color: var(--color-white) !important;
        min-height: 35px !important;
        max-height: 35px !important;
        padding: 0 !important;
        padding-inline: calc(var(--spacing) * 3) !important;
        padding-left: calc(var(--spacing) * 2.5) !important;
        align-items: center !important;
        display: flex !important
    }

    .choices__list--dropdown .choices__item--selectable[data-select-text] {
        padding-right: calc(var(--spacing) * 5) !important
    }

    .select-add-icon .choices {
        padding-inline: calc(var(--spacing) * 9);
        border-style: var(--tw-border-style) !important;
        border-width: 0 !important;
        padding-left: 35px !important
    }

    .select-add-icon .choices__inner {
        border-style: var(--tw-border-style) !important;
        padding-inline: 0 !important;
        background-color: #0000 !important;
        border-width: 0 !important;
        padding-left: 0 !important
    }

    .select-add-icon .choices__list--dropdown,
    .select-add-icon .choices__list[aria-expanded] {
        left: 0
    }

    .choices__list--single .choices__item {
        color: var(--color-gray-900)
    }

    .choices__list--single {
        padding: 0 !important
    }

    .choices__list--multiple .choices__item {
        margin-right: calc(var(--spacing) * 2) !important;
        margin-bottom: 0 !important;
        margin-left: calc(var(--spacing) * -1) !important;
        border-style: var(--tw-border-style) !important;
        background-color: var(--color-primary) !important;
        padding-inline: calc(var(--spacing) * 1.5) !important;
        padding-top: calc(var(--spacing) * .5) !important;
        padding-bottom: calc(var(--spacing) * .5) !important;
        border-width: 0 !important;
        border-radius: 6px !important
    }

    .choices__list--multiple .choices__item[data-deletable] {
        padding-right: 5px;
        margin-right: calc(var(--spacing) * 2) !important;
        margin-left: calc(var(--spacing) * -1) !important
    }

    .choices__input {
        background-color: var(--color-white) !important;
        font-size: var(--text-xs) !important;
        line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
        margin-bottom: 0 !important
    }

    .is-focused .choices__inner,
    .is-open .choices__inner {
        border-color: var(--color-border-color) !important
    }

    .choices__input,
    .choices__button:focus,
    .choices__input:focus {
        --tw-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-ring-offset-shadow: 0 0 #0000;
        box-shadow: none !important
    }

    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important
    }

    .choices[data-type*=text] .choices__button,
    .choices[data-type*=select-multiple] .choices__button {
        margin-left: var(--spacing) !important;
        border-style: var(--tw-border-style) !important;
        border-width: 0 !important
    }

    .is-open .choices__list--dropdown,
    .is-open .choices__list[aria-expanded] {
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border-color) !important
    }

    .choices__list--dropdown,
    .choices__list[aria-expanded] {
        z-index: 99 !important
    }

    .choices__placeholder {
        opacity: 1 !important
    }

    .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
        background-color: var(--color-light) !important;
        color: var(--color-gray-600) !important
    }

    .form-input {
        max-height: 35px;
        padding-block: calc(var(--spacing) * 1.75);
        background-color: var(--color-white) !important;
        padding-inline: calc(var(--spacing) * 2.5) !important;
        font-size: var(--text-sm) !important;
        line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
        color: var(--color-dark) !important;
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .form-input-icon {
        padding-left: calc(var(--spacing) * 8) !important
    }

    .noUi-connect {
        border-radius: var(--radius-lg) !important;
        background-color: var(--color-primary) !important
    }

    .noUi-target {
        border-style: var(--tw-border-style) !important;
        border-width: 1px !important;
        border-color: var(--color-border-color) !important
    }

    .noUi-horizontal {
        height: calc(var(--spacing) * 2.5) !important
    }

    .noUi-horizontal .noUi-handle {
        top: calc(var(--spacing) * -1) !important;
        right: calc(var(--spacing) * -2.5) !important;
        height: calc(var(--spacing) * 4) !important;
        width: calc(var(--spacing) * 4) !important;
        background-color: var(--color-primary) !important;
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
        border-radius: 3.40282e38px !important
    }

    .noUi-handle:before,
    .noUi-handle:after {
        width: 0 !important
    }

    .example-val {
        align-items: center;
        gap: var(--spacing);
        display: flex
    }

    .example-val:before {
        content: var(--tw-content);
        --tw-font-weight: var(--font-weight-semibold) !important;
        font-size: 12px !important;
        font-weight: var(--font-weight-semibold) !important;
        --tw-content: "Value:" !important;
        content: var(--tw-content) !important
    }

    .primary-range .noUi-connect {
        border-radius: var(--radius-lg) !important;
        background-color: var(--color-primary) !important
    }

    .primary-range .noUi-handle {
        background-color: var(--color-primary) !important
    }

    .primary-gradient-range .noUi-connect,
    .primary-gradient-range .noUi-handle {
        border-radius: var(--radius-lg) !important;
        background-image: var(--background-image-primary-gradient) !important
    }

    .success-range .noUi-connect {
        border-radius: var(--radius-lg) !important;
        background-color: var(--color-success) !important
    }

    .success-range .noUi-handle {
        background-color: var(--color-success) !important
    }

    .info-range .noUi-connect {
        border-radius: var(--radius-lg) !important;
        background-color: var(--color-info) !important
    }

    .info-range .noUi-handle {
        background-color: var(--color-info) !important
    }

    .warning-range .noUi-connect {
        border-radius: var(--radius-lg) !important;
        background-color: var(--color-warning) !important
    }

    .warning-range .noUi-handle {
        background-color: var(--color-warning) !important
    }

    .danger-range .noUi-connect {
        border-radius: var(--radius-lg) !important;
        background-color: var(--color-danger) !important
    }

    .danger-range .noUi-handle {
        background-color: var(--color-danger) !important
    }

    #red,
    #green,
    #blue {
        margin: calc(var(--spacing) * 2.5);
        height: calc(var(--spacing) * 50);
        display: inline-block
    }

    #red .noUi-connect,
    #red .noUi-handle {
        background-color: var(--color-danger) !important
    }

    #green .noUi-connect,
    #green .noUi-handle {
        background-color: var(--color-success) !important
    }

    #blue .noUi-connect,
    #blue .noUi-handle {
        background-color: var(--color-info) !important
    }

    .noUi-vertical {
        width: calc(var(--spacing) * 2.5) !important
    }

    .noUi-vertical .noUi-handle {
        right: calc(var(--spacing) * -1) !important;
        bottom: calc(var(--spacing) * -2.5) !important;
        height: calc(var(--spacing) * 4) !important;
        width: calc(var(--spacing) * 4) !important;
        background-color: var(--color-primary) !important;
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
        border-radius: 3.40282e38px !important
    }

    #result {
        height: calc(var(--spacing) * 25);
        width: calc(var(--spacing) * 25);
        border-radius: var(--radius-lg);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-border-color);
        vertical-align: top
    }

    .tag-btn.active {
        background-color: var(--color-light);
        color: var(--color-primary)
    }

    pre[class*=language-],
    code[class*=language-] {
        background-color: var(--color-dark) !important;
        color: var(--color-light) !important;
        text-shadow: none !important
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.endRange.nextMonthDay {
        border-style: var(--tw-border-style) !important;
        background-color: var(--color-primary) !important;
        border-width: 0 !important
    }

    .flatpickr-day.inRange {
        border-color: var(--color-light) !important;
        background-color: var(--color-light) !important;
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
    .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
    .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
        --tw-shadow: 0 0 #0000 !important;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
    }

    #popover-primary,
    #popover-info,
    #popover-warning,
    #popover-success,
    #popover-danger,
    #popover-default,
    #popover-right,
    #popover-top,
    #popover-left,
    #popover-bottom {
        z-index: 999 !important
    }

    .layout-rtl .sidebar.sidebar-twocol {
        top: calc(var(--spacing) * 3);
        right: calc(var(--spacing) * 3);
        bottom: calc(var(--spacing) * 3);
        left: unset;
        width: -moz-fit-content;
        width: fit-content;
        position: fixed
    }

    @media not all and (min-width:992px) {
        .layout-rtl .sidebar.sidebar-twocol {
            margin-right: calc(var(--sidenav-width) * -1);
            top: 0;
            bottom: 0;
            right: 0
        }

        .layout-rtl .sidebar-twocol {
            border-radius: 10px 0 0 10px !important
        }
    }

    .layout-rtl .navbar-header {
        margin-inline-start: 0;
        margin-left: 0
    }

    @media(min-width:992px) {
        .layout-rtl .navbar-header {
            margin-inline-start: var(--sidenav-width)
        }
    }

    [dir=rtl] .mini-sidebar .navbar-header {
        margin-right: var(--sidebar-mini-width)
    }

    @media(min-width:992px) {
        [dir=rtl] .mini-sidebar .navbar-header {
            margin-right: 77px
        }
    }

    .layout-rtl .slide-nav .sidebar {
        margin-right: 0
    }

    .layout-rtl .page-wrapper {
        margin-inline-start: 0;
        margin-left: 0
    }

    @media(min-width:992px) {
        .layout-rtl .page-wrapper {
            margin-inline-start: var(--sidenav-width)
        }
    }

    [dir=rtl] .mini-sidebar .page-wrapper {
        margin-right: var(--sidebar-mini-width)
    }

    @media(min-width:992px) {
        [dir=rtl] .mini-sidebar .page-wrapper {
            margin-right: 77px
        }
    }

    @media not all and (min-width:576px) {
        .layout-rtl .navbar-header .logo {
            position: relative;
            inset-inline: 0;
            --tw-translate-y: 0px !important;
            width: 100% !important;
            translate: var(--tw-translate-x) var(--tw-translate-y) !important;
            inset-inline-start: calc(var(--spacing) * 0) !important
        }
    }

    @media not all and (min-width:992px) {
        .layout-rtl .navbar-header .logo {
            width: -moz-fit-content;
            width: fit-content;
            margin: auto;
            inset-inline: 0;
            --tw-translate-x: 0px !important;
            translate: var(--tw-translate-x) var(--tw-translate-y) !important
        }
    }

    [dir=rtl] .rangepicker-input .form-input {
        padding-inline-start: calc(var(--spacing) * 8) !important;
        padding-left: 0 !important
    }

    .chat-wrapper .chat-body .chats {
        max-width: 75%
    }

    .chat-wrapper .chat-body .chats.chats-right {
        margin-left: auto
    }

    .chat-wrapper .chat.chat-messages [data-simplebar] {
        overflow-y: scroll;
        height: calc(100vh - 460px) !important
    }

    .chat-wrapper .sidebar-group [data-simplebar] {
        overflow-y: auto;
        height: calc(100vh - 225px) !important
    }

    .chat-wrapper .sidebar-group [data-simplebar]::-webkit-scrollbar {
        display: none !important
    }

    .chat-wrapper .simplebar-placeholder {
        height: 0 !important
    }

    @media(max-width:1199px) {
        .hide-chatbar {
            display: none !important
        }

        .chat-wrapper {
            flex-direction: column !important
        }

        .chat-wrapper .chat.chat-messages {
            width: 65.5%;
            margin-left: 0;
            position: absolute;
            top: 0
        }

        .chat-wrapper .sidebar-group,
        .chat-wrapper .sidebar-group [data-simplebar] {
            width: 100% !important
        }
    }

    @media(max-width:991px) {
        .chat-wrapper .chat.chat-messages {
            width: 95%;
            margin-left: 0;
            position: absolute
        }
    }

    @media(max-width:767px) {
        .chat-wrapper .chat.chat-messages {
            width: 95%;
            margin-left: 0;
            position: absolute
        }
    }

    @media(max-width:576px) {
        .chat-wrapper .chat.chat-messages {
            width: 94%;
            margin-left: 0;
            position: relative
        }

        .footer-form input {
            width: 45px !important
        }

        .chat-wrapper .sidebar-group [data-simplebar] {
            height: calc(100vh - 140px) !important
        }

        .chat-wrapper .chat.chat-messages [data-simplebar] {
            height: calc(100vh - 290px) !important
        }
    }

    [data-layout=full-width] .full-width .sidebar {
        z-index: 9999;
        opacity: 1;
        width: 288px;
        margin-left: 0
    }

    [data-layout=full-width] .full-width .sidebar .sidebar-close {
        height: calc(var(--spacing) * 6.5);
        width: calc(var(--spacing) * 6.5);
        font-size: 16px;
        display: flex
    }

    [data-layout=full-width] .full-width .slide-nav .sidebar {
        margin-left: 0
    }

    [data-layout=full-width] .navbar-header {
        z-index: 99;
        margin-left: 0
    }

    [data-layout=full-width] .page-wrapper {
        margin-left: 0
    }

    [data-layout=full-width] .navbar-header .logo {
        display: block;
        inset: unset !important;
        translate: unset !important;
        position: relative !important;
        transform: none !important
    }

    [data-layout=full-width] .navbar-header .logo .logo-lg {
        display: block
    }

    @media not all and (min-width:992px) {
        [data-layout=full-width] .navbar-header .logo .logo-lg {
            display: none
        }
    }

    [data-layout=full-width] .navbar-header .logo .logo-dark,
    [data-layout=full-width][data-theme=dark] .navbar-header .logo .logo-light {
        display: none
    }

    @media not all and (min-width:992px) {
        [data-layout=full-width][data-theme=dark] .navbar-header .logo .logo-light {
            display: block
        }
    }

    [data-layout=full-width][data-theme=dark] .navbar-header .logo .logo-light .logo-sm {
        display: none
    }

    @media not all and (min-width:992px) {
        [data-layout=full-width][data-theme=dark] .navbar-header .logo .logo-light .logo-sm {
            display: block
        }
    }

    [data-layout=full-width][data-theme=dark] .navbar-header .logo .logo-dark {
        display: block
    }

    @media(min-width:992px) {
        [data-layout=full-width] .sidebar {
            opacity: 0;
            margin-left: -250px
        }

        [data-layout=full-width] .logo-sm {
            display: none
        }
    }

    @media(max-width:992px) {
        [data-layout=full-width] .navbar-header .mobile-btn {
            display: none
        }

        [data-layout=full-width] .sidenav-toggle-btn {
            height: calc(var(--spacing) * 10);
            width: calc(var(--spacing) * 10);
            display: flex
        }
    }

    @media not all and (min-width:992px) {
        [data-layout=full-width] .logo-sm {
            display: block !important
        }
    }

    @media(max-width:767px) {
        [data-layout=full-width] .navbar-header .logo .logo-lg {
            display: none
        }
    }

    [data-layout=hidden] .hidden-layout .sidebar {
        opacity: 1;
        margin-left: 0
    }

    [data-layout=hidden] .hidden-layout .navbar-header,
    [data-layout=hidden] .hidden-layout .page-wrapper {
        margin-left: var(--sidenav-width)
    }

    [data-layout=hidden] .hidden-layout .navbar-header .logo {
        display: none
    }

    [data-layout=hidden] .navbar-header,
    [data-layout=hidden] .page-wrapper {
        margin-left: 0
    }

    [data-layout=hidden] .navbar-header .logo {
        display: block;
        inset: unset !important;
        translate: unset !important;
        position: relative !important;
        transform: none !important
    }

    [data-layout=hidden] .navbar-header .logo .logo-lg {
        display: block
    }

    [data-layout=hidden] .navbar-header .logo .logo-dark {
        display: none
    }

    @media(min-width:992px) {
        [data-layout=hidden] .sidebar {
            opacity: 0;
            margin-left: -250px
        }

        [data-layout=hidden] .logo-sm {
            display: none
        }
    }

    @media(max-width:767px) {
        [data-layout=hidden] .navbar-header .logo .logo-lg {
            display: none
        }

        [data-layout=hidden] .logo-sm {
            display: block
        }
    }

    @media(max-width:991px) {

        .mini-sidebar .navbar-header,
        .mini-sidebar .page-wrapper {
            margin-left: 0
        }
    }

    table td,
    table th {
        text-wrap: nowrap
    }
}

@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 {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .inset-x-0 {
        inset-inline: 0
    }

    .inset-y-0 {
        inset-block: 0
    }

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

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

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

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

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

    .start-1\/2 {
        inset-inline-start: 50%
    }

    .start-1\/3 {
        inset-inline-start: 33.3333%
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .end-10\.5 {
        inset-inline-end: calc(var(--spacing) * 10.5)
    }

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

    .end-\[1px\] {
        inset-inline-end: 1px
    }

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

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

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

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

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

    .top-0 {
        top: 0
    }

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

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

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

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

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

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

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

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

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

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

    .top-\[24px\] {
        top: 24px
    }

    .top-\[115px\] {
        top: 115px
    }

    .top-\[205px\] {
        top: 205px
    }

    .top-full {
        top: 100%
    }

    .right-0 {
        right: 0
    }

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

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

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

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

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

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

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

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

    .bottom-0 {
        bottom: 0
    }

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

    .bottom-1 {
        bottom: var(--spacing)
    }

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

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

    .bottom-\[-30px\] {
        bottom: -30px
    }

    .bottom-\[96px\] {
        bottom: 96px
    }

    .bottom-full {
        bottom: 100%
    }

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

    .left-0 {
        left: 0
    }

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

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

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

    .left-5\.5 {
        left: calc(var(--spacing) * 5.5)
    }

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

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

    .-z-1 {
        z-index: -1
    }

    .z-0 {
        z-index: 0
    }

    .z-1 {
        z-index: 1
    }

    .z-4 {
        z-index: 4
    }

    .z-5 {
        z-index: 5
    }

    .z-9 {
        z-index: 9
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-70 {
        z-index: 70
    }

    .z-80 {
        z-index: 80
    }

    .z-90 {
        z-index: 90
    }

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

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .order-3 {
        order: 3
    }

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

    .col-span-2 {
        grid-column: span 2/span 2
    }

    .col-span-3 {
        grid-column: span 3/span 3
    }

    .col-span-4 {
        grid-column: span 4/span 4
    }

    .col-span-5 {
        grid-column: span 5/span 5
    }

    .col-span-6 {
        grid-column: span 6/span 6
    }

    .col-span-7 {
        grid-column: span 7/span 7
    }

    .col-span-8 {
        grid-column: span 8/span 8
    }

    .col-span-9 {
        grid-column: span 9/span 9
    }

    .col-span-10 {
        grid-column: span 10/span 10
    }

    .col-span-12 {
        grid-column: span 12/span 12
    }

    .float-end {
        float: inline-end
    }

    .container {
        width: 100%
    }

    @media(min-width:576px) {
        .container {
            max-width: 576px
        }
    }

    @media(min-width:768px) {
        .container {
            max-width: 768px
        }
    }

    @media(min-width:992px) {
        .container {
            max-width: 992px
        }
    }

    @media(min-width:1200px) {
        .container {
            max-width: 1200px
        }
    }

    @media(min-width:1400px) {
        .container {
            max-width: 1400px
        }
    }

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

    .m-0 {
        margin: 0
    }

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

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

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

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

    .m-auto\! {
        margin: auto !important
    }

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

    .-mx-2\.5 {
        margin-inline: calc(var(--spacing) * -2.5)
    }

    .mx-1 {
        margin-inline: var(--spacing)
    }

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

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

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

    .mx-auto {
        margin-inline: auto
    }

    .my-0\.5 {
        margin-block: calc(var(--spacing) * .5)
    }

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

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

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

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

    .my-10\! {
        margin-block: calc(var(--spacing) * 10) !important
    }

    .my-auto {
        margin-block: auto
    }

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

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

    .ms-0\.5 {
        margin-inline-start: calc(var(--spacing) * .5)
    }

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

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

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

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

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

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

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

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

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

    .ms-auto {
        margin-inline-start: auto
    }

    .ms-auto\! {
        margin-inline-start: auto !important
    }

    .-me-3\.5 {
        margin-inline-end: calc(var(--spacing) * -3.5)
    }

    .me-1 {
        margin-inline-end: var(--spacing)
    }

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

    .me-1\.5\! {
        margin-inline-end: calc(var(--spacing) * 1.5) !important
    }

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

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

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

    .me-auto {
        margin-inline-end: auto
    }

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

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

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

    .mt-0 {
        margin-top: 0
    }

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

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

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

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

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

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

    .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-8 {
        margin-top: calc(var(--spacing) * 8)
    }

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

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

    .mt-\[-10px\]\! {
        margin-top: -10px !important
    }

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

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

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

    .mt-auto {
        margin-top: auto
    }

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

    .mr-auto {
        margin-right: auto
    }

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

    .mb-0 {
        margin-bottom: 0
    }

    .mb-0\! {
        margin-bottom: 0 !important
    }

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

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

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

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

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

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

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

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

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

    .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-7\.5 {
        margin-bottom: calc(var(--spacing) * 7.5)
    }

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

    .mb-\[-21px\] {
        margin-bottom: -21px
    }

    .mb-\[-42px\] {
        margin-bottom: -42px
    }

    .mb-\[19px\] {
        margin-bottom: 19px
    }

    .mb-\[70px\] {
        margin-bottom: 70px
    }

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

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

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

    .ml-auto {
        margin-left: auto
    }

    .form-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        --tw-shadow: 0 0 #0000;
        background-color: #fff;
        border-width: 1px;
        border-color: #6a7282;
        border-radius: 0;
        padding: .5rem .75rem;
        font-size: 1rem;
        line-height: 1.5rem
    }

    .form-input:focus {
        outline-offset: 2px;
        --tw-ring-inset: var(--tw-empty, );
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: oklch(54.6% .245 262.881);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        border-color: #155dfc;
        outline: 2px solid #0000
    }

    .form-input::placeholder {
        color: #6a7282;
        opacity: 1
    }

    .form-input::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    .form-input::-webkit-date-and-time-value {
        min-height: 1.5em
    }

    .form-input::-webkit-date-and-time-value {
        text-align: inherit
    }

    .form-input::-webkit-datetime-edit {
        display: inline-flex
    }

    .form-input::-webkit-datetime-edit {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-year-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-month-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-day-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-hour-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-minute-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-second-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-millisecond-field {
        padding-top: 0;
        padding-bottom: 0
    }

    .form-input::-webkit-datetime-edit-meridiem-field {
        padding-top: 0;
        padding-bottom: 0
    }

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

    .\!flex {
        display: flex !important
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .flex\! {
        display: flex !important
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .size-1 {
        width: var(--spacing);
        height: var(--spacing)
    }

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

    .size-1\.75 {
        width: calc(var(--spacing) * 1.75);
        height: calc(var(--spacing) * 1.75)
    }

    .size-2 {
        width: calc(var(--spacing) * 2);
        height: calc(var(--spacing) * 2)
    }

    .size-3 {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }

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

    .size-4 {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .size-5 {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5)
    }

    .size-6 {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6)
    }

    .size-7 {
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7)
    }

    .size-7\.5 {
        width: calc(var(--spacing) * 7.5);
        height: calc(var(--spacing) * 7.5)
    }

    .size-8 {
        width: calc(var(--spacing) * 8);
        height: calc(var(--spacing) * 8)
    }

    .size-9 {
        width: calc(var(--spacing) * 9);
        height: calc(var(--spacing) * 9)
    }

    .size-10 {
        width: calc(var(--spacing) * 10);
        height: calc(var(--spacing) * 10)
    }

    .size-11 {
        width: calc(var(--spacing) * 11);
        height: calc(var(--spacing) * 11)
    }

    .size-12 {
        width: calc(var(--spacing) * 12);
        height: calc(var(--spacing) * 12)
    }

    .size-14 {
        width: calc(var(--spacing) * 14);
        height: calc(var(--spacing) * 14)
    }

    .size-16 {
        width: calc(var(--spacing) * 16);
        height: calc(var(--spacing) * 16)
    }

    .size-20 {
        width: calc(var(--spacing) * 20);
        height: calc(var(--spacing) * 20)
    }

    .size-30 {
        width: calc(var(--spacing) * 30);
        height: calc(var(--spacing) * 30)
    }

    .size-72 {
        width: calc(var(--spacing) * 72);
        height: calc(var(--spacing) * 72)
    }

    .size-80 {
        width: calc(var(--spacing) * 80);
        height: calc(var(--spacing) * 80)
    }

    .size-full {
        width: 100%;
        height: 100%
    }

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

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

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

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

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

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

    .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-5\.5 {
        height: calc(var(--spacing) * 5.5)
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .h-16\! {
        height: calc(var(--spacing) * 16) !important
    }

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

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

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

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

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

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

    .h-50\! {
        height: calc(var(--spacing) * 50) !important
    }

    .h-55\! {
        height: calc(var(--spacing) * 55) !important
    }

    .h-58\! {
        height: calc(var(--spacing) * 58) !important
    }

    .h-60\! {
        height: calc(var(--spacing) * 60) !important
    }

    .h-65\! {
        height: calc(var(--spacing) * 65) !important
    }

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

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

    .h-70\! {
        height: calc(var(--spacing) * 70) !important
    }

    .h-72\! {
        height: calc(var(--spacing) * 72) !important
    }

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

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

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

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

    .h-\[6\%\] {
        height: 6%
    }

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

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

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

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

    .h-\[32\%\] {
        height: 32%
    }

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

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

    .h-\[38\%\] {
        height: 38%
    }

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

    .h-\[44\%\] {
        height: 44%
    }

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

    .h-\[46\%\] {
        height: 46%
    }

    .h-\[49\%\] {
        height: 49%
    }

    .h-\[50vh-200px\]\! {
        height: 50vh-200px !important
    }

    .h-\[52\%\] {
        height: 52%
    }

    .h-\[54\%\] {
        height: 54%
    }

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

    .h-\[58\%\] {
        height: 58%
    }

    .h-\[61\%\] {
        height: 61%
    }

    .h-\[64\%\] {
        height: 64%
    }

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

    .h-\[66\%\] {
        height: 66%
    }

    .h-\[68\%\] {
        height: 68%
    }

    .h-\[70\%\] {
        height: 70%
    }

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

    .h-\[76\%\] {
        height: 76%
    }

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

    .h-\[78\%\] {
        height: 78%
    }

    .h-\[82\%\] {
        height: 82%
    }

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

    .h-\[88\%\] {
        height: 88%
    }

    .h-\[92\%\] {
        height: 92%
    }

    .h-\[97\%\] {
        height: 97%
    }

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

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

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

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

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

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

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

    .h-\[calc\(100\%-70px\)\]\! {
        height: calc(100% - 70px) !important
    }

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

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

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

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

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

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

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

    .h-auto {
        height: auto
    }

    .h-full {
        height: 100%
    }

    .h-px {
        height: 1px
    }

    .h-screen {
        height: 100vh
    }

    .max-h-0 {
        max-height: 0
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .min-h-0 {
        min-height: 0
    }

    .min-h-77\! {
        min-height: calc(var(--spacing) * 77) !important
    }

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

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

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

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

    .min-h-screen {
        min-height: 100vh
    }

    .w-0 {
        width: 0
    }

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

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

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

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

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

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

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

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

    .w-3\/5 {
        width: 60%
    }

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

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

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

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

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

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

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

    .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-12\.5 {
        width: calc(var(--spacing) * 12.5)
    }

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

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

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

    .w-21\! {
        width: calc(var(--spacing) * 21) !important
    }

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

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

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

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

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

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

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

    .w-52\! {
        width: calc(var(--spacing) * 52) !important
    }

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

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

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

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

    .w-\[3\.5\%\] {
        width: 3.5%
    }

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

    .w-\[5\.4\%\] {
        width: 5.4%
    }

    .w-\[5\.9\%\] {
        width: 5.9%
    }

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

    .w-\[7\.7\%\] {
        width: 7.7%
    }

    .w-\[8\.7\%\] {
        width: 8.7%
    }

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

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

    .w-\[11\.6\%\] {
        width: 11.6%
    }

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

    .w-\[13\.5\%\] {
        width: 13.5%
    }

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

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

    .w-\[16\.6\%\] {
        width: 16.6%
    }

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

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

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

    .w-\[20\.8\%\] {
        width: 20.8%
    }

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

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

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

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

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

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

    .w-\[26\.3\%\] {
        width: 26.3%
    }

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

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

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

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

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

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

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

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

    .w-\[36\.9\%\] {
        width: 36.9%
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .w-\[76\.2\%\] {
        width: 76.2%
    }

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

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

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

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

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

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

    .w-\[82\.5\%\] {
        width: 82.5%
    }

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

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

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

    .w-\[87\.4\%\] {
        width: 87.4%
    }

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

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

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

    .w-\[89\.3\%\] {
        width: 89.3%
    }

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

    .w-\[90\.6\%\] {
        width: 90.6%
    }

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

    .w-\[91\.2\%\] {
        width: 91.2%
    }

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

    .w-\[92\.9\%\] {
        width: 92.9%
    }

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

    .w-\[93\.1\%\] {
        width: 93.1%
    }

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

    .w-\[94\.8\%\] {
        width: 94.8%
    }

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

    .w-\[95\.1\%\] {
        width: 95.1%
    }

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

    .w-\[96\.4\%\] {
        width: 96.4%
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .w-\[calc\(100\%-32px\)\] {
        width: calc(100% - 32px)
    }

    .w-\[min\(360px\,calc\(100vw-2rem\)\)\] {
        width: min(360px, 100vw - 2rem)
    }

    .w-\[min\(800px\,calc\(100vw-2rem\)\)\] {
        width: min(800px, 100vw - 2rem)
    }

    .w-\[min\(1040px\,calc\(100vw-2rem\)\)\] {
        width: min(1040px, 100vw - 2rem)
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: -moz-fit-content;
        width: fit-content
    }

    .w-full {
        width: 100%
    }

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

    .w-px {
        width: 1px
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .min-w-0 {
        min-width: 0
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .min-w-\[24px\] {
        min-width: 24px
    }

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

    .min-w-\[48px\] {
        min-width: 48px
    }

    .min-w-\[80px\] {
        min-width: 80px
    }

    .min-w-\[100px\] {
        min-width: 100px
    }

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

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

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

    .min-w-\[244px\] {
        min-width: 244px
    }

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

    .min-w-\[333px\] {
        min-width: 333px
    }

    .min-w-\[704px\] {
        min-width: 704px
    }

    .min-w-fit {
        min-width: -moz-fit-content;
        min-width: fit-content
    }

    .flex-1 {
        flex: 1
    }

    .flex-none {
        flex: none
    }

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

    .flex-grow,
    .grow {
        flex-grow: 1
    }

    .table-auto {
        table-layout: auto
    }

    .border-collapse {
        border-collapse: collapse
    }

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

    .translate-1 {
        --tw-translate-x: var(--spacing);
        --tw-translate-y: var(--spacing);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-x-1 {
        --tw-translate-x: calc(var(--spacing) * -1);
        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-x-2 {
        --tw-translate-x: calc(var(--spacing) * -2);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-x-full {
        --tw-translate-x: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

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

    .translate-x-full {
        --tw-translate-x: 100%;
        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-full {
        --tw-translate-y: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-0 {
        --tw-translate-y: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

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

    .translate-y-full {
        --tw-translate-y: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .rotate-45 {
        rotate: 45deg
    }

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

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

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

    .animate-rotate-slow {
        animation: var(--animate-rotate-slow)
    }

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

    .cursor-help {
        cursor: help
    }

    .cursor-move {
        cursor: move
    }

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

    .cursor-pointer {
        cursor: pointer
    }

    .resize {
        resize: both
    }

    .resize-none {
        resize: none
    }

    .list-inside {
        list-style-position: inside
    }

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

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

    .appearance-none {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: 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-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

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

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

    .flex-col {
        flex-direction: column
    }

    .flex-row {
        flex-direction: row
    }

    .flex-nowrap {
        flex-wrap: nowrap
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .items-baseline {
        align-items: baseline
    }

    .items-center {
        align-items: center
    }

    .items-center\! {
        align-items: center !important
    }

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

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

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

    .justify-between\! {
        justify-content: space-between !important
    }

    .justify-center {
        justify-content: center
    }

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

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

    .justify-start\! {
        justify-content: flex-start !important
    }

    .gap-0 {
        gap: 0
    }

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

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

    .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-9 {
        gap: calc(var(--spacing) * 9)
    }

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

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

    :where(.space-y-0\.5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
        margin-block-end: calc(var(--spacing) * 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-3>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))
    }

    :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)))
    }

    :where(.space-y-5>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))
    }

    :where(.space-y-6>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))
    }

    .gap-x-1 {
        -moz-column-gap: var(--spacing);
        column-gap: var(--spacing)
    }

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

    .gap-x-2 {
        -moz-column-gap: calc(var(--spacing) * 2);
        column-gap: calc(var(--spacing) * 2)
    }

    .gap-x-3 {
        -moz-column-gap: calc(var(--spacing) * 3);
        column-gap: calc(var(--spacing) * 3)
    }

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

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

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

    .gap-x-10 {
        -moz-column-gap: calc(var(--spacing) * 10);
        column-gap: calc(var(--spacing) * 10)
    }

    .gap-x-\[17px\] {
        -moz-column-gap: 17px;
        column-gap: 17px
    }

    :where(.-space-x-2>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-1>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
        margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)))
    }

    :where(.space-x-2>:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))
    }

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

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

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

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

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

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

    :where(.divide-y>:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)))
    }

    :where(.divide-border-color>:not(:last-child)) {
        border-color: var(--color-border-color)
    }

    .self-center {
        align-self: center
    }

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

    .overflow-auto {
        overflow: auto
    }

    .overflow-hidden {
        overflow: hidden
    }

    .\!overflow-x-scroll {
        overflow-x: scroll !important
    }

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

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

    .overflow-x-scroll {
        overflow-x: scroll
    }

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

    .overflow-y-scroll {
        overflow-y: scroll
    }

    .scroll-smooth {
        scroll-behavior: smooth
    }

    .rounded {
        border-radius: .25rem
    }

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

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

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

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .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-xs {
        border-radius: var(--radius-xs)
    }

    .rounded-xs\! {
        border-radius: var(--radius-xs) !important
    }

    .rounded-s-lg {
        border-start-start-radius: var(--radius-lg);
        border-end-start-radius: var(--radius-lg)
    }

    .rounded-s-md {
        border-start-start-radius: var(--radius-md);
        border-end-start-radius: var(--radius-md)
    }

    .rounded-ss-none {
        border-start-start-radius: 0
    }

    .rounded-e-lg {
        border-start-end-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg)
    }

    .rounded-e-md {
        border-start-end-radius: var(--radius-md);
        border-end-end-radius: var(--radius-md)
    }

    .rounded-se-none {
        border-start-end-radius: 0
    }

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

    .rounded-l-lg {
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg)
    }

    .rounded-r-lg {
        border-top-right-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg)
    }

    .rounded-br-none {
        border-bottom-right-radius: 0
    }

    .rounded-bl-none {
        border-bottom-left-radius: 0
    }

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

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

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

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

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

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

    .border-x-0 {
        border-inline-style: var(--tw-border-style);
        border-inline-width: 0
    }

    .border-y-0 {
        border-block-style: var(--tw-border-style);
        border-block-width: 0
    }

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

    .border-s-0 {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 0
    }

    .border-s-3 {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 3px
    }

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

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

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

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

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

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

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

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

    .border-r-0 {
        border-right-style: var(--tw-border-style);
        border-right-width: 0
    }

    .border-r-0\! {
        border-right-style: var(--tw-border-style) !important;
        border-right-width: 0 !important
    }

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

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

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

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

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

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

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

    .border-l-0 {
        border-left-style: var(--tw-border-style);
        border-left-width: 0
    }

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

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

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

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

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

    .border-\(--sidebar-border\) {
        border-color: var(--sidebar-border)
    }

    .border-\(--topbar-input-border\) {
        border-color: var(--topbar-input-border)
    }

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

    .border-current {
        border-color: currentColor
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .border-primary-200\! {
        border-color: var(--color-primary-200) !important
    }

    .border-primary\/10 {
        border-color: #7a13f01a
    }

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

    .border-primary\/20 {
        border-color: #7a13f033
    }

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

    .border-primary\/30 {
        border-color: #7a13f04d
    }

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

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

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

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

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

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

    .border-transparent {
        border-color: #0000
    }

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

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

    .border-white\/20 {
        border-color: #fff3
    }

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

    .border-white\/25 {
        border-color: #ffffff40
    }

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

    .border-white\/40 {
        border-color: #fff6
    }

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

    .border-s-primary {
        border-inline-start-color: var(--color-primary)
    }

    .border-e-primary {
        border-inline-end-color: var(--color-primary)
    }

    .border-t-amber-500 {
        border-top-color: var(--color-amber-500)
    }

    .border-t-blue-500 {
        border-top-color: var(--color-blue-500)
    }

    .border-t-border-color {
        border-top-color: var(--color-border-color)
    }

    .border-t-emerald-500 {
        border-top-color: var(--color-emerald-500)
    }

    .border-t-green-500 {
        border-top-color: var(--color-green-500)
    }

    .border-t-primary {
        border-top-color: var(--color-primary)
    }

    .border-t-purple-500 {
        border-top-color: var(--color-purple-500)
    }

    .border-t-teal-500 {
        border-top-color: var(--color-teal-500)
    }

    .border-t-transparent {
        border-top-color: #0000
    }

    .border-r-border-color {
        border-right-color: var(--color-border-color)
    }

    .border-b-primary {
        border-bottom-color: var(--color-primary)
    }

    .border-l-border-color {
        border-left-color: var(--color-border-color)
    }

    .border-l-primary\/30 {
        border-left-color: #7a13f04d
    }

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

    .bg-\(--sidebar-bg\) {
        background-color: var(--sidebar-bg)
    }

    .bg-\(--topbar-input-bg\) {
        background-color: var(--topbar-input-bg)
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .bg-black\/30 {
        background-color: #0000004d
    }

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

    .bg-black\/40 {
        background-color: #0006
    }

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

    .bg-black\/50 {
        background-color: #00000080
    }

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

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

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

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

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

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

    .bg-cyan-100 {
        background-color: var(--color-cyan-100)
    }

    .bg-cyan-200 {
        background-color: var(--color-cyan-200)
    }

    .bg-cyan-300 {
        background-color: var(--color-cyan-300)
    }

    .bg-cyan-400 {
        background-color: var(--color-cyan-400)
    }

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

    .bg-cyan-600 {
        background-color: var(--color-cyan-600)
    }

    .bg-cyan-700 {
        background-color: var(--color-cyan-700)
    }

    .bg-cyan-800 {
        background-color: var(--color-cyan-800)
    }

    .bg-cyan-900 {
        background-color: var(--color-cyan-900)
    }

    .bg-cyan-950 {
        background-color: var(--color-cyan-950)
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .bg-danger\/10 {
        background-color: #f836361a
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .bg-gray-900\/50 {
        background-color: #10182880
    }

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

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

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

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

    .bg-indigo-100 {
        background-color: var(--color-indigo-100)
    }

    .bg-indigo-200 {
        background-color: var(--color-indigo-200)
    }

    .bg-indigo-300 {
        background-color: var(--color-indigo-300)
    }

    .bg-indigo-400 {
        background-color: var(--color-indigo-400)
    }

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

    .bg-indigo-600 {
        background-color: var(--color-indigo-600)
    }

    .bg-indigo-700 {
        background-color: var(--color-indigo-700)
    }

    .bg-indigo-800 {
        background-color: var(--color-indigo-800)
    }

    .bg-indigo-900 {
        background-color: var(--color-indigo-900)
    }

    .bg-indigo-950 {
        background-color: var(--color-indigo-950)
    }

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

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

    .bg-info-100 {
        background-color: var(--color-info-100)
    }

    .bg-info-200 {
        background-color: var(--color-info-200)
    }

    .bg-info-300 {
        background-color: var(--color-info-300)
    }

    .bg-info-400 {
        background-color: var(--color-info-400)
    }

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

    .bg-info-600 {
        background-color: var(--color-info-600)
    }

    .bg-info-700 {
        background-color: var(--color-info-700)
    }

    .bg-info-800 {
        background-color: var(--color-info-800)
    }

    .bg-info-900 {
        background-color: var(--color-info-900)
    }

    .bg-info-950 {
        background-color: var(--color-info-950)
    }

    .bg-info\/10 {
        background-color: #155dfc1a
    }

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

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

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

    .bg-light-100 {
        background-color: var(--color-light-100)
    }

    .bg-light-200 {
        background-color: var(--color-light-200)
    }

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

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

    .bg-orange-100 {
        background-color: var(--color-orange-100)
    }

    .bg-orange-200 {
        background-color: var(--color-orange-200)
    }

    .bg-orange-300 {
        background-color: var(--color-orange-300)
    }

    .bg-orange-400 {
        background-color: var(--color-orange-400)
    }

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

    .bg-orange-600 {
        background-color: var(--color-orange-600)
    }

    .bg-orange-700 {
        background-color: var(--color-orange-700)
    }

    .bg-orange-800 {
        background-color: var(--color-orange-800)
    }

    .bg-orange-900 {
        background-color: var(--color-orange-900)
    }

    .bg-orange-950 {
        background-color: var(--color-orange-950)
    }

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

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

    .bg-pink-100 {
        background-color: var(--color-pink-100)
    }

    .bg-pink-200 {
        background-color: var(--color-pink-200)
    }

    .bg-pink-300 {
        background-color: var(--color-pink-300)
    }

    .bg-pink-400 {
        background-color: var(--color-pink-400)
    }

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

    .bg-pink-600 {
        background-color: var(--color-pink-600)
    }

    .bg-pink-700 {
        background-color: var(--color-pink-700)
    }

    .bg-pink-800 {
        background-color: var(--color-pink-800)
    }

    .bg-pink-900 {
        background-color: var(--color-pink-900)
    }

    .bg-pink-950 {
        background-color: var(--color-pink-950)
    }

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

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

    .bg-primary-50\! {
        background-color: var(--color-primary-50) !important
    }

    .bg-primary-100 {
        background-color: var(--color-primary-100)
    }

    .bg-primary-200 {
        background-color: var(--color-primary-200)
    }

    .bg-primary-300 {
        background-color: var(--color-primary-300)
    }

    .bg-primary-400 {
        background-color: var(--color-primary-400)
    }

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

    .bg-primary-600 {
        background-color: var(--color-primary-600)
    }

    .bg-primary-700 {
        background-color: var(--color-primary-700)
    }

    .bg-primary-800 {
        background-color: var(--color-primary-800)
    }

    .bg-primary-900 {
        background-color: var(--color-primary-900)
    }

    .bg-primary-950 {
        background-color: var(--color-primary-950)
    }

    .bg-primary\/2 {
        background-color: #7a13f005
    }

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

    .bg-primary\/5 {
        background-color: #7a13f00d
    }

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

    .bg-primary\/10 {
        background-color: #7a13f01a
    }

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

    .bg-primary\/35 {
        background-color: #7a13f059
    }

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

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

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

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

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

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

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

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

    .bg-purple-500\/10 {
        background-color: #8f42ff1a
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .bg-success\/10 {
        background-color: #0099661a
    }

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

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

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

    .bg-teal-100 {
        background-color: var(--color-teal-100)
    }

    .bg-teal-200 {
        background-color: var(--color-teal-200)
    }

    .bg-teal-300 {
        background-color: var(--color-teal-300)
    }

    .bg-teal-400 {
        background-color: var(--color-teal-400)
    }

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

    .bg-teal-600 {
        background-color: var(--color-teal-600)
    }

    .bg-teal-700 {
        background-color: var(--color-teal-700)
    }

    .bg-teal-800 {
        background-color: var(--color-teal-800)
    }

    .bg-teal-900 {
        background-color: var(--color-teal-900)
    }

    .bg-teal-950 {
        background-color: var(--color-teal-950)
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-transparent\! {
        background-color: #0000 !important
    }

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

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

    .bg-warning-100 {
        background-color: var(--color-warning-100)
    }

    .bg-warning-200 {
        background-color: var(--color-warning-200)
    }

    .bg-warning-300 {
        background-color: var(--color-warning-300)
    }

    .bg-warning-400 {
        background-color: var(--color-warning-400)
    }

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

    .bg-warning-600 {
        background-color: var(--color-warning-600)
    }

    .bg-warning-700 {
        background-color: var(--color-warning-700)
    }

    .bg-warning-800 {
        background-color: var(--color-warning-800)
    }

    .bg-warning-900 {
        background-color: var(--color-warning-900)
    }

    .bg-warning-950 {
        background-color: var(--color-warning-950)
    }

    .bg-warning\/10 {
        background-color: #d97f061a
    }

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

    .bg-warning\/35 {
        background-color: #d97f0659
    }

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

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

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

    .bg-white\/5 {
        background-color: #ffffff0d
    }

    @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: #ffffff1a
    }

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

    .bg-white\/15 {
        background-color: #ffffff26
    }

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

    .bg-white\/70 {
        background-color: #ffffffb3
    }

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

    .bg-white\/85 {
        background-color: #ffffffd9
    }

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

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

    .\[background-image\:var\(--background-image-primary-gradient\)\,var\(--background-image-linear-gradient-100\)\] {
        background-image: var(--background-image-primary-gradient), var(--background-image-linear-gradient-100)
    }

    .\[background-image\:var\(--background-image-success-gradient\)\] {
        background-image: var(--background-image-success-gradient)
    }

    .bg-\[image\:var\(--background-image-linear-gradient-300\)\] {
        background-image: var(--background-image-linear-gradient-300)
    }

    .bg-\[image\:var\(--background-image-linear-gradient-400\)\] {
        background-image: var(--background-image-linear-gradient-400)
    }

    .bg-\[image\:var\(--background-image-linear-gradient-500\)\] {
        background-image: var(--background-image-linear-gradient-500)
    }

    .bg-\[image\:var\(--background-image-linear-gradient-600\)\] {
        background-image: var(--background-image-linear-gradient-600)
    }

    .bg-\[linear-gradient\(45deg\,rgba\(255\,255\,255\,\.15\)_25\%\,transparent_25\%\,transparent_50\%\,rgba\(255\,255\,255\,\.15\)_50\%\,rgba\(255\,255\,255\,\.15\)_75\%\,transparent_75\%\,transparent\)\] {
        background-image: linear-gradient(45deg, #ffffff26 25%, #0000 25%, #0000 50%, #ffffff26 50%, #ffffff26 75%, #0000 75%, #0000)
    }

    .bg-danger-gradient {
        background-image: var(--background-image-danger-gradient)
    }

    .bg-dark-gradient {
        background-image: var(--background-image-dark-gradient)
    }

    .bg-info-gradient {
        background-image: var(--background-image-info-gradient)
    }

    .bg-info-gradient-100 {
        background-image: var(--background-image-info-gradient-100)
    }

    .bg-info-gradient-200 {
        background-image: var(--background-image-info-gradient-200)
    }

    .bg-linear-gradient-200 {
        background-image: var(--background-image-linear-gradient-200)
    }

    .bg-linear-gradient-700 {
        background-image: var(--background-image-linear-gradient-700)
    }

    .bg-primary-gradient {
        background-image: var(--background-image-primary-gradient)
    }

    .bg-primary-gradient-100 {
        background-image: var(--background-image-primary-gradient-100)
    }

    .bg-primary-gradient-200 {
        background-image: var(--background-image-primary-gradient-200)
    }

    .bg-primary-gradient-300\! {
        background-image: var(--background-image-primary-gradient-300) !important
    }

    .bg-success-gradient {
        background-image: var(--background-image-success-gradient)
    }

    .bg-success-gradient-100 {
        background-image: var(--background-image-success-gradient-100)
    }

    .bg-success-gradient-200 {
        background-image: var(--background-image-success-gradient-200)
    }

    .bg-teal-gradient {
        background-image: var(--background-image-teal-gradient)
    }

    .bg-warning-gradient-100 {
        background-image: var(--background-image-warning-gradient-100)
    }

    .from-primary {
        --tw-gradient-from: var(--color-primary);
        --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-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))
    }

    .via-white\/30 {
        --tw-gradient-via: #ffffff4d
    }

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

    .via-white\/30 {
        --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)
    }

    .to-primary-800 {
        --tw-gradient-to: var(--color-primary-800);
        --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-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-\[length\:1rem_1rem\] {
        background-size: 1rem 1rem
    }

    .bg-contain {
        background-size: contain
    }

    .\[background-clip\:padding-box\,border-box\] {
        background-clip: padding-box, border-box
    }

    .bg-clip-text {
        -webkit-background-clip: text;
        background-clip: text
    }

    .bg-left {
        background-position: 0
    }

    .bg-no-repeat {
        background-repeat: no-repeat
    }

    .bg-origin-border {
        background-origin: border-box
    }

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

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

    .fill-yellow-400 {
        fill: var(--color-yellow-400)
    }

    .object-cover {
        object-fit: cover
    }

    .p-0 {
        padding: 0
    }

    .p-0\! {
        padding: 0 !important
    }

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

    .p-1 {
        padding: var(--spacing)
    }

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

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

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

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

    .p-\[12px\] {
        padding: 12px
    }

    .p-\[30px\] {
        padding: 30px
    }

    .p-\[40px\] {
        padding: 40px
    }

    .p-\[50px\] {
        padding: 50px
    }

    .px-0 {
        padding-inline: 0
    }

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

    .px-1 {
        padding-inline: var(--spacing)
    }

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

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

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

    .px-4\.5 {
        padding-inline: calc(var(--spacing) * 4.5)
    }

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

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

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

    .py-0 {
        padding-block: 0
    }

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

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

    .py-1 {
        padding-block: var(--spacing)
    }

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

    .py-1\.75 {
        padding-block: calc(var(--spacing) * 1.75)
    }

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

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

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

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

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

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

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

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

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

    .ps-0 {
        padding-inline-start: 0
    }

    .ps-0\! {
        padding-inline-start: 0 !important
    }

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

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

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

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

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

    .ps-8\! {
        padding-inline-start: calc(var(--spacing) * 8) !important
    }

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

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

    .ps-px {
        padding-inline-start: 1px
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .pe-\[12px\] {
        padding-inline-end: 12px
    }

    .pt-0 {
        padding-top: 0
    }

    .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-3\.5 {
        padding-top: calc(var(--spacing) * 3.5)
    }

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

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

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

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

    .pr-4\.5 {
        padding-right: calc(var(--spacing) * 4.5)
    }

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

    .\!pb-0 {
        padding-bottom: 0 !important
    }

    .pb-0 {
        padding-bottom: 0
    }

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

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

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

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

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

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

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

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

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

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

    .pl-8\! {
        padding-left: calc(var(--spacing) * 8) !important
    }

    .pl-9\! {
        padding-left: calc(var(--spacing) * 9) !important
    }

    .pl-\[55px\] {
        padding-left: 55px
    }

    .text-center {
        text-align: center
    }

    .text-end {
        text-align: end
    }

    .text-start {
        text-align: start
    }

    .text-start\! {
        text-align: start !important
    }

    .align-bottom {
        vertical-align: bottom
    }

    .align-middle {
        vertical-align: middle
    }

    .font-mono {
        font-family: var(--font-mono)
    }

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

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

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

    .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-\[5px\] {
        font-size: 5px
    }

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

    .text-\[9\.5px\] {
        font-size: 9.5px
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .text-\[16px\]\! {
        font-size: 16px !important
    }

    .text-\[17\.5px\] {
        font-size: 17.5px
    }

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

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

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

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

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

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

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

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

    .text-\[40px\]\! {
        font-size: 40px !important
    }

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

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

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

    .leading-0 {
        --tw-leading: 0px;
        line-height: 0
    }

    .leading-\[1\.7\]\! {
        --tw-leading: 1.7 !important;
        line-height: 1.7 !important
    }

    .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-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-medium\! {
        --tw-font-weight: var(--font-weight-medium) !important;
        font-weight: var(--font-weight-medium) !important
    }

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

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

    .font-semibold\! {
        --tw-font-weight: var(--font-weight-semibold) !important;
        font-weight: var(--font-weight-semibold) !important
    }

    .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-nowrap {
        text-wrap: nowrap
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .whitespace-pre-line {
        white-space: pre-line
    }

    .whitespace-pre-wrap {
        white-space: pre-wrap
    }

    .tab-1 {
        -moz-tab-size: 1;
        tab-size: 1
    }

    .tab-2 {
        -moz-tab-size: 2;
        tab-size: 2
    }

    .tab-3 {
        -moz-tab-size: 3;
        tab-size: 3
    }

    .tab-4 {
        -moz-tab-size: 4;
        tab-size: 4
    }

    .tab-5 {
        -moz-tab-size: 5;
        tab-size: 5
    }

    .tab-6 {
        -moz-tab-size: 6;
        tab-size: 6
    }

    .tab-7 {
        -moz-tab-size: 7;
        tab-size: 7
    }

    .tab-8 {
        -moz-tab-size: 8;
        tab-size: 8
    }

    .tab-9 {
        -moz-tab-size: 9;
        tab-size: 9
    }

    .tab-10 {
        -moz-tab-size: 10;
        tab-size: 10
    }

    .tab-11 {
        -moz-tab-size: 11;
        tab-size: 11
    }

    .tab-12 {
        -moz-tab-size: 12;
        tab-size: 12
    }

    .tab-13 {
        -moz-tab-size: 13;
        tab-size: 13
    }

    .tab-14 {
        -moz-tab-size: 14;
        tab-size: 14
    }

    .tab-15 {
        -moz-tab-size: 15;
        tab-size: 15
    }

    .tab-16 {
        -moz-tab-size: 16;
        tab-size: 16
    }

    .tab-17 {
        -moz-tab-size: 17;
        tab-size: 17
    }

    .tab-18 {
        -moz-tab-size: 18;
        tab-size: 18
    }

    .tab-19 {
        -moz-tab-size: 19;
        tab-size: 19
    }

    .tab-20 {
        -moz-tab-size: 20;
        tab-size: 20
    }

    .tab-21 {
        -moz-tab-size: 21;
        tab-size: 21
    }

    .tab-22 {
        -moz-tab-size: 22;
        tab-size: 22
    }

    .tab-23 {
        -moz-tab-size: 23;
        tab-size: 23
    }

    .tab-24 {
        -moz-tab-size: 24;
        tab-size: 24
    }

    .tab-25 {
        -moz-tab-size: 25;
        tab-size: 25
    }

    .tab-26 {
        -moz-tab-size: 26;
        tab-size: 26
    }

    .tab-27 {
        -moz-tab-size: 27;
        tab-size: 27
    }

    .tab-28 {
        -moz-tab-size: 28;
        tab-size: 28
    }

    .tab-29 {
        -moz-tab-size: 29;
        tab-size: 29
    }

    .tab-30 {
        -moz-tab-size: 30;
        tab-size: 30
    }

    .tab-31 {
        -moz-tab-size: 31;
        tab-size: 31
    }

    .tab-32 {
        -moz-tab-size: 32;
        tab-size: 32
    }

    .tab-33 {
        -moz-tab-size: 33;
        tab-size: 33
    }

    .tab-34 {
        -moz-tab-size: 34;
        tab-size: 34
    }

    .tab-35 {
        -moz-tab-size: 35;
        tab-size: 35
    }

    .tab-36 {
        -moz-tab-size: 36;
        tab-size: 36
    }

    .text-\(--sidebar-menu-item\) {
        color: var(--sidebar-menu-item)
    }

    .text-\(--sidebar-title\) {
        color: var(--sidebar-title)
    }

    .text-\(--topbar-input-icon\) {
        color: var(--topbar-input-icon)
    }

    .text-\(--topbar-input-placeholder\) {
        color: var(--topbar-input-placeholder)
    }

    .text-\[18\]\! {
        color: 18 !important
    }

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

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

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

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

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

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

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

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

    .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-700\! {
        color: var(--color-gray-700) !important
    }

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

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

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

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

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

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

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

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

    .text-primary-100 {
        color: var(--color-primary-100)
    }

    .text-primary-200 {
        color: var(--color-primary-200)
    }

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

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

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

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

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

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

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

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

    .text-transparent {
        color: #0000
    }

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

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

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

    .text-white\/70 {
        color: #ffffffb3
    }

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

    .text-white\/80 {
        color: #fffc
    }

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

    .text-white\/90 {
        color: #ffffffe6
    }

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

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

    .lowercase {
        text-transform: lowercase
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

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

    .decoration-2 {
        text-decoration-thickness: 2px
    }

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

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

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

    .opacity-0 {
        opacity: 0
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-60 {
        opacity: .6
    }

    .opacity-75 {
        opacity: .75
    }

    .opacity-100 {
        opacity: 1
    }

    .mix-blend-luminosity {
        mix-blend-mode: luminosity
    }

    .shadow {
        --tw-shadow: 0px 4px 60px 0px var(--tw-shadow-color, #e7e7e778);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-2xs {
        --tw-shadow: 0 1px var(--tw-shadow-color, #0000000d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0_1px_60px_rgba\(122\,19\,240\,0\.06\)\] {
        --tw-shadow: 0 1px 60px var(--tw-shadow-color, #7a13f00f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-card {
        --tw-shadow: 0 1px 2px var(--tw-shadow-color, #1018280a);
        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 {
        --tw-shadow: 0px 4px 24px 0px var(--tw-shadow-color, #e5e5e540) inset;
        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 5px 10px var(--tw-shadow-color, #1e20251f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-md {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
        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: 0px 4px 60px 0px var(--tw-shadow-color, #bebebe45);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-xl {
        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-xs {
        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
        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)
    }

    .ring-2 {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
    }

    .ring-primary {
        --tw-ring-color: var(--color-primary)
    }

    .ring-offset-2 {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

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

    .outline-0 {
        outline-style: var(--tw-outline-style);
        outline-width: 0
    }

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

    .outline-danger-50 {
        outline-color: var(--color-danger-50)
    }

    .outline-indigo-50 {
        outline-color: var(--color-indigo-50)
    }

    .outline-info-100 {
        outline-color: var(--color-info-100)
    }

    .outline-orange-50 {
        outline-color: var(--color-orange-50)
    }

    .outline-pink-50 {
        outline-color: var(--color-pink-50)
    }

    .outline-primary-50 {
        outline-color: var(--color-primary-50)
    }

    .outline-primary-100 {
        outline-color: var(--color-primary-100)
    }

    .outline-success-50 {
        outline-color: var(--color-success-50)
    }

    .outline-success-100 {
        outline-color: var(--color-success-100)
    }

    .outline-warning-50 {
        outline-color: var(--color-warning-50)
    }

    .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-3xl {
        --tw-blur: blur(var(--blur-3xl));
        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 {
        --tw-backdrop-blur: blur(8px);
        -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-\[10px\] {
        --tw-backdrop-blur: blur(10px);
        -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-\[14px\] {
        --tw-backdrop-blur: blur(14px);
        -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, )
    }

    .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, 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-\[height\] {
        transition-property: height;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[opacity\,margin\] {
        transition-property: opacity, margin;
        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-shadow {
        transition-property: box-shadow;
        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-150 {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-400 {
        --tw-duration: .4s;
        transition-duration: .4s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .ease-\[cubic-bezier\(0\.16\,1\,0\.3\,1\)\] {
        --tw-ease: cubic-bezier(.16, 1, .3, 1);
        transition-timing-function: cubic-bezier(.16, 1, .3, 1)
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

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

    .select-all {
        -webkit-user-select: all;
        user-select: all
    }

    .\[--auto-close\:inside\] {
        --auto-close: inside
    }

    .\[--offset\:0\] {
        --offset: 0
    }

    .\[--overlay-backdrop\:false\] {
        --overlay-backdrop: false
    }

    .\[--placement\:bottom-left\] {
        --placement: bottom-left
    }

    .\[--placement\:bottom-right\] {
        --placement: bottom-right
    }

    .\[--placement\:bottom\] {
        --placement: bottom
    }

    .\[--placement\:left\] {
        --placement: left
    }

    .\[--placement\:right\] {
        --placement: right
    }

    .\[--placement\:top-left\] {
        --placement: top-left
    }

    .\[--placement\:top-right\] {
        --placement: top-right
    }

    .\[--placement\:top\] {
        --placement: top
    }

    .\[--trigger\:focus\] {
        --trigger: focus
    }

    .\[--trigger\:hover\] {
        --trigger: hover
    }

    @media(hover:hover) {
        .group-hover\:block:is(:where(.group):hover *) {
            display: block
        }

        .group-hover\:flex:is(:where(.group):hover *) {
            display: flex
        }

        .group-hover\:translate-x-0:is(:where(.group):hover *) {
            --tw-translate-x: 0px;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .group-hover\:scale-90:is(:where(.group):hover *) {
            --tw-scale-x: 90%;
            --tw-scale-y: 90%;
            --tw-scale-z: 90%;
            scale: var(--tw-scale-x) var(--tw-scale-y)
        }

        .group-hover\:scale-105:is(:where(.group):hover *) {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x) var(--tw-scale-y)
        }

        .group-hover\:border-primary:is(:where(.group):hover *) {
            border-color: var(--color-primary)
        }

        .group-hover\:bg-white:is(:where(.group):hover *) {
            background-color: var(--color-white)
        }

        .group-hover\:text-primary:is(:where(.group):hover *) {
            color: var(--color-primary)
        }

        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 1
        }

        .group-hover\/item\:translate-x-0:is(:where(.group\/item):hover *) {
            --tw-translate-x: 0px;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .group-hover\/item\:bg-white:is(:where(.group\/item):hover *) {
            background-color: var(--color-white)
        }

        .group-hover\/item\:text-primary:is(:where(.group\/item):hover *) {
            color: var(--color-primary)
        }

        .group-hover\/item\:opacity-100:is(:where(.group\/item):hover *) {
            opacity: 1
        }
    }

    .group-\[\.active\]\:border:is(:where(.group).active *) {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .group-\[\.active\]\:border-primary:is(:where(.group).active *) {
        border-color: var(--color-primary)
    }

    .peer-not-placeholder-shown\:top-1:is(:where(.peer):not(:placeholder-shown)~*) {
        top: var(--spacing)
    }

    .peer-not-placeholder-shown\:text-xs:is(:where(.peer):not(:placeholder-shown)~*) {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .peer-checked\:translate-x-full:is(:where(.peer):checked~*) {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .peer-checked\:border-primary:is(:where(.peer):checked~*) {
        border-color: var(--color-primary)
    }

    .peer-checked\:bg-danger:is(:where(.peer):checked~*) {
        background-color: var(--color-danger)
    }

    .peer-checked\:bg-dark:is(:where(.peer):checked~*) {
        background-color: var(--color-dark)
    }

    .peer-checked\:bg-info:is(:where(.peer):checked~*) {
        background-color: var(--color-info)
    }

    .peer-checked\:bg-primary:is(:where(.peer):checked~*) {
        background-color: var(--color-primary)
    }

    .peer-checked\:bg-primary-50:is(:where(.peer):checked~*) {
        background-color: var(--color-primary-50)
    }

    .peer-checked\:bg-success:is(:where(.peer):checked~*) {
        background-color: var(--color-success)
    }

    .peer-checked\:bg-warning:is(:where(.peer):checked~*) {
        background-color: var(--color-warning)
    }

    .peer-checked\:text-white:is(:where(.peer):checked~*) {
        color: var(--color-white)
    }

    .peer-checked\:text-white\!:is(:where(.peer):checked~*) {
        color: var(--color-white) !important
    }

    .peer-checked\:ring-2:is(:where(.peer):checked~*) {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
    }

    .peer-checked\:ring-indigo-500:is(:where(.peer):checked~*) {
        --tw-ring-color: var(--color-indigo-500)
    }

    .peer-checked\:ring-primary:is(:where(.peer):checked~*) {
        --tw-ring-color: var(--color-primary)
    }

    .peer-checked\:ring-offset-2:is(:where(.peer):checked~*) {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .peer-placeholder-shown\:top-1\/2:is(:where(.peer):placeholder-shown~*) {
        top: 50%
    }

    .peer-placeholder-shown\:text-sm:is(:where(.peer):placeholder-shown~*) {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .peer-focus\:top-0:is(:where(.peer):focus~*) {
        top: 0
    }

    .peer-focus\:text-xs:is(:where(.peer):focus~*) {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .peer-focus\:outline-none:is(:where(.peer):focus~*) {
        --tw-outline-style: none;
        outline-style: none
    }

    .peer-focus-visible\:ring-2:is(:where(.peer):focus-visible~*) {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
    }

    .peer-focus-visible\:ring-primary:is(:where(.peer):focus-visible~*) {
        --tw-ring-color: var(--color-primary)
    }

    .peer-disabled\:pointer-events-none:is(:where(.peer):disabled~*) {
        pointer-events: none
    }

    .peer-disabled\:opacity-50:is(:where(.peer):disabled~*) {
        opacity: .5
    }

    .peer-\[\.has-value\]\:top-0:is(:where(.peer).has-value~*) {
        top: 0
    }

    .peer-\[\.has-value\]\:text-xs:is(:where(.peer).has-value~*) {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .file\:me-4::file-selector-button {
        margin-inline-end: calc(var(--spacing) * 4)
    }

    .file\:border-0::file-selector-button {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .file\:bg-light::file-selector-button {
        background-color: var(--color-light)
    }

    .file\:px-2\.5::file-selector-button {
        padding-inline: calc(var(--spacing) * 2.5)
    }

    .file\:px-3::file-selector-button {
        padding-inline: calc(var(--spacing) * 3)
    }

    .file\:py-1\.75::file-selector-button {
        padding-block: calc(var(--spacing) * 1.75)
    }

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

    .before\:absolute:before {
        content: var(--tw-content);
        position: absolute
    }

    .before\:inset-0:before {
        content: var(--tw-content);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .before\:top-8:before {
        content: var(--tw-content);
        top: calc(var(--spacing) * 8)
    }

    .before\:top-\[76px\]:before {
        content: var(--tw-content);
        top: 76px
    }

    .before\:left-4:before {
        content: var(--tw-content);
        left: calc(var(--spacing) * 4)
    }

    .before\:z-1:before {
        content: var(--tw-content);
        z-index: 1
    }

    .before\:h-full:before {
        content: var(--tw-content);
        height: 100%
    }

    .before\:w-px:before {
        content: var(--tw-content);
        width: 1px
    }

    .before\:border-l:before {
        content: var(--tw-content);
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .before\:border-dashed:before {
        content: var(--tw-content);
        --tw-border-style: dashed;
        border-style: dashed
    }

    .before\:border-border-color:before {
        content: var(--tw-content);
        border-color: var(--color-border-color)
    }

    .after\:absolute:after {
        content: var(--tw-content);
        position: absolute
    }

    .after\:start-\[2px\]:after {
        content: var(--tw-content);
        inset-inline-start: 2px
    }

    .after\:top-\[2px\]:after {
        content: var(--tw-content);
        top: 2px
    }

    .after\:h-4:after {
        content: var(--tw-content);
        height: calc(var(--spacing) * 4)
    }

    .after\:w-4:after {
        content: var(--tw-content);
        width: calc(var(--spacing) * 4)
    }

    .after\:rounded-full:after {
        content: var(--tw-content);
        border-radius: 3.40282e38px
    }

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

    .after\:border-gray-300:after {
        content: var(--tw-content);
        border-color: var(--color-gray-300)
    }

    .after\:bg-white:after {
        content: var(--tw-content);
        background-color: var(--color-white)
    }

    .after\:transition-all:after {
        content: var(--tw-content);
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .after\:content-\[\'\'\]:after {
        --tw-content: "";
        content: var(--tw-content)
    }

    .peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after {
        content: var(--tw-content);
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .peer-checked\:after\:border-white:is(:where(.peer):checked~*):after {
        content: var(--tw-content);
        border-color: var(--color-white)
    }

    .first\:ms-0:first-child {
        margin-inline-start: 0
    }

    .first\:rounded-s-full:first-child {
        border-start-start-radius: 3.40282e38px;
        border-end-start-radius: 3.40282e38px
    }

    .first\:rounded-s-lg:first-child {
        border-start-start-radius: var(--radius-lg);
        border-end-start-radius: var(--radius-lg)
    }

    .last\:mb-0:last-child {
        margin-bottom: 0
    }

    .last\:rounded-e-full:last-child {
        border-start-end-radius: 3.40282e38px;
        border-end-end-radius: 3.40282e38px
    }

    .last\:rounded-e-lg:last-child {
        border-start-end-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg)
    }

    .last\:border-0:last-child {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .last\:pb-0:last-child {
        padding-bottom: 0
    }

    .checked\:border-0:checked {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .checked\:border-danger:checked {
        border-color: var(--color-danger)
    }

    .checked\:border-dark:checked {
        border-color: var(--color-dark)
    }

    .checked\:border-info:checked {
        border-color: var(--color-info)
    }

    .checked\:border-primary:checked {
        border-color: var(--color-primary)
    }

    .checked\:border-success:checked {
        border-color: var(--color-success)
    }

    .checked\:border-warning:checked {
        border-color: var(--color-warning)
    }

    .focus-within\:border-primary:focus-within {
        border-color: var(--color-primary)
    }

    .focus-within\:ring-2:focus-within {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
    }

    .focus-within\:ring-primary:focus-within {
        --tw-ring-color: var(--color-primary)
    }

    @media(hover:hover) {
        .hover\:z-1:hover {
            z-index: 1
        }

        .hover\:-translate-y-\[0\.188rem\]:hover {
            --tw-translate-y: -.188rem;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

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

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

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

        .hover\:border-black:hover {
            border-color: var(--color-black)
        }

        .hover\:border-border-color:hover {
            border-color: var(--color-border-color)
        }

        .hover\:border-danger:hover {
            border-color: var(--color-danger)
        }

        .hover\:border-danger-700:hover {
            border-color: var(--color-danger-700)
        }

        .hover\:border-danger-800:hover {
            border-color: var(--color-danger-800)
        }

        .hover\:border-gray-950\!:hover {
            border-color: var(--color-gray-950) !important
        }

        .hover\:border-info-800:hover {
            border-color: var(--color-info-800)
        }

        .hover\:border-light-800:hover {
            border-color: var(--color-light-800)
        }

        .hover\:border-primary:hover {
            border-color: var(--color-primary)
        }

        .hover\:border-primary-500:hover {
            border-color: var(--color-primary-500)
        }

        .hover\:border-primary-800:hover {
            border-color: var(--color-primary-800)
        }

        .hover\:border-primary-900:hover {
            border-color: var(--color-primary-900)
        }

        .hover\:border-success-800:hover {
            border-color: var(--color-success-800)
        }

        .hover\:border-warning:hover {
            border-color: var(--color-warning)
        }

        .hover\:border-warning-700:hover {
            border-color: var(--color-warning-700)
        }

        .hover\:border-warning-800:hover {
            border-color: var(--color-warning-800)
        }

        .hover\:border-warning-900:hover {
            border-color: var(--color-warning-900)
        }

        .hover\:border-white:hover {
            border-color: var(--color-white)
        }

        .hover\:border-white\/35:hover {
            border-color: #ffffff59
        }

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

        .hover\:border-b-primary:hover {
            border-bottom-color: var(--color-primary)
        }

        .hover\:bg-\(--sidebar-icon-active-bg\):hover {
            background-color: var(--sidebar-icon-active-bg)
        }

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

        .hover\:bg-blue-700:hover {
            background-color: var(--color-blue-700)
        }

        .hover\:bg-danger:hover {
            background-color: var(--color-danger)
        }

        .hover\:bg-danger-50:hover {
            background-color: var(--color-danger-50)
        }

        .hover\:bg-danger-100:hover {
            background-color: var(--color-danger-100)
        }

        .hover\:bg-danger-200:hover {
            background-color: var(--color-danger-200)
        }

        .hover\:bg-danger-700:hover {
            background-color: var(--color-danger-700)
        }

        .hover\:bg-danger-800:hover {
            background-color: var(--color-danger-800)
        }

        .hover\:bg-danger-900:hover {
            background-color: var(--color-danger-900)
        }

        .hover\:bg-danger\/10:hover {
            background-color: #f836361a
        }

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

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

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

        .hover\:bg-gray-100:hover {
            background-color: var(--color-gray-100)
        }

        .hover\:bg-gray-200:hover {
            background-color: var(--color-gray-200)
        }

        .hover\:bg-gray-700:hover {
            background-color: var(--color-gray-700)
        }

        .hover\:bg-gray-800:hover {
            background-color: var(--color-gray-800)
        }

        .hover\:bg-info-100:hover {
            background-color: var(--color-info-100)
        }

        .hover\:bg-info-200:hover {
            background-color: var(--color-info-200)
        }

        .hover\:bg-info-800:hover {
            background-color: var(--color-info-800)
        }

        .hover\:bg-info-900:hover {
            background-color: var(--color-info-900)
        }

        .hover\:bg-light:hover {
            background-color: var(--color-light)
        }

        .hover\:bg-light-100:hover {
            background-color: var(--color-light-100)
        }

        .hover\:bg-light-800:hover {
            background-color: var(--color-light-800)
        }

        .hover\:bg-light-900:hover {
            background-color: var(--color-light-900)
        }

        .hover\:bg-primary:hover {
            background-color: var(--color-primary)
        }

        .hover\:bg-primary-50:hover {
            background-color: var(--color-primary-50)
        }

        .hover\:bg-primary-100:hover {
            background-color: var(--color-primary-100)
        }

        .hover\:bg-primary-200:hover {
            background-color: var(--color-primary-200)
        }

        .hover\:bg-primary-800:hover {
            background-color: var(--color-primary-800)
        }

        .hover\:bg-primary-900:hover {
            background-color: var(--color-primary-900)
        }

        .hover\:bg-primary\/10:hover {
            background-color: #7a13f01a
        }

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

        .hover\:bg-purple-100:hover {
            background-color: var(--color-purple-100)
        }

        .hover\:bg-success:hover {
            background-color: var(--color-success)
        }

        .hover\:bg-success-100:hover {
            background-color: var(--color-success-100)
        }

        .hover\:bg-success-200:hover {
            background-color: var(--color-success-200)
        }

        .hover\:bg-success-800:hover {
            background-color: var(--color-success-800)
        }

        .hover\:bg-success-900:hover {
            background-color: var(--color-success-900)
        }

        .hover\:bg-warning:hover {
            background-color: var(--color-warning)
        }

        .hover\:bg-warning-100:hover {
            background-color: var(--color-warning-100)
        }

        .hover\:bg-warning-200:hover {
            background-color: var(--color-warning-200)
        }

        .hover\:bg-warning-700:hover {
            background-color: var(--color-warning-700)
        }

        .hover\:bg-warning-800:hover {
            background-color: var(--color-warning-800)
        }

        .hover\:bg-warning-900:hover {
            background-color: var(--color-warning-900)
        }

        .hover\:bg-warning\/10:hover {
            background-color: #d97f061a
        }

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

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

        .hover\:bg-white\/20:hover {
            background-color: #fff3
        }

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

        .hover\:bg-white\/90:hover {
            background-color: #ffffffe6
        }

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

        .hover\:bg-primary-gradient:hover {
            background-image: var(--background-image-primary-gradient)
        }

        .hover\:bg-sidebar-menu-active-bg:hover {
            background-image: var(--background-image-sidebar-menu-active-bg)
        }

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

        .hover\:text-\(--sidebar-icon-active-item\):hover {
            color: var(--sidebar-icon-active-item)
        }

        .hover\:text-\(--sidebar-menu-active-item\):hover {
            color: var(--sidebar-menu-active-item)
        }

        .hover\:text-danger:hover {
            color: var(--color-danger)
        }

        .hover\:text-danger-800:hover {
            color: var(--color-danger-800)
        }

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

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

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

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

        .hover\:text-primary:hover {
            color: var(--color-primary)
        }

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

        .hover\:text-warning:hover {
            color: var(--color-warning)
        }

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

        .hover\:underline:hover {
            text-decoration-line: underline
        }

        .hover\:opacity-80:hover {
            opacity: .8
        }

        .hover\:opacity-90:hover {
            opacity: .9
        }

        .hover\:opacity-100:hover {
            opacity: 1
        }

        .hover\:shadow-\[0_0_12px_rgba\(122\,19\,240\,0\.25\)\]:hover {
            --tw-shadow: 0 0 12px var(--tw-shadow-color, #7a13f040);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-\[0_0_20px_rgba\(122\,19\,240\,0\.4\)\]:hover {
            --tw-shadow: 0 0 20px var(--tw-shadow-color, #7a13f066);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-lg:hover {
            --tw-shadow: 0 5px 10px var(--tw-shadow-color, #1e20251f);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-md:hover {
            --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:shadow-sm:hover {
            --tw-shadow: 0px 4px 60px 0px var(--tw-shadow-color, #bebebe45);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
        }

        .hover\:ring-2:hover {
            --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
        }

        .hover\:ring-primary:hover {
            --tw-ring-color: var(--color-primary)
        }
    }

    .focus\:not-sr-only:focus {
        clip-path: none;
        white-space: normal;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        position: static;
        overflow: visible
    }

    .focus\:absolute:focus {
        position: absolute
    }

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

    .focus\:start-3:focus {
        inset-inline-start: calc(var(--spacing) * 3)
    }

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

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

    .focus\:z-10:focus {
        z-index: 10
    }

    .focus\:z-80:focus {
        z-index: 80
    }

    .focus\:z-100:focus {
        z-index: 100
    }

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

    .focus\:border-blue-500:focus {
        border-color: var(--color-blue-500)
    }

    .focus\:border-blue-600:focus {
        border-color: var(--color-blue-600)
    }

    .focus\:border-border-color:focus {
        border-color: var(--color-border-color)
    }

    .focus\:border-danger:focus {
        border-color: var(--color-danger)
    }

    .focus\:border-primary:focus {
        border-color: var(--color-primary)
    }

    .focus\:border-success:focus {
        border-color: var(--color-success)
    }

    .focus\:bg-danger:focus {
        background-color: var(--color-danger)
    }

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

    .focus\:bg-gray-100:focus {
        background-color: var(--color-gray-100)
    }

    .focus\:bg-gray-200:focus {
        background-color: var(--color-gray-200)
    }

    .focus\:bg-light:focus {
        background-color: var(--color-light)
    }

    .focus\:bg-primary:focus {
        background-color: var(--color-primary)
    }

    .focus\:bg-primary-50:focus {
        background-color: var(--color-primary-50)
    }

    .focus\:bg-primary-100:focus {
        background-color: var(--color-primary-100)
    }

    .focus\:bg-primary-800:focus {
        background-color: var(--color-primary-800)
    }

    .focus\:bg-primary-900:focus {
        background-color: var(--color-primary-900)
    }

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

    .focus\:px-3:focus {
        padding-inline: calc(var(--spacing) * 3)
    }

    .focus\:py-2:focus {
        padding-block: calc(var(--spacing) * 2)
    }

    .focus\:text-blue-600:focus {
        color: var(--color-blue-600)
    }

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

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

    .focus\:text-primary:focus {
        color: var(--color-primary)
    }

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

    .focus\:underline:focus {
        text-decoration-line: underline
    }

    .focus\:opacity-100:focus {
        opacity: 1
    }

    .focus\:ring-0:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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)
    }

    .focus\:ring-1:focus {
        --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)
    }

    .focus\:ring-2:focus {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
    }

    .focus\:ring-blue-500:focus {
        --tw-ring-color: var(--color-blue-500)
    }

    .focus\:ring-blue-600:focus {
        --tw-ring-color: var(--color-blue-600)
    }

    .focus\:ring-danger:focus {
        --tw-ring-color: var(--color-danger)
    }

    .focus\:ring-dark:focus {
        --tw-ring-color: var(--color-dark)
    }

    .focus\:ring-indigo-500:focus {
        --tw-ring-color: var(--color-indigo-500)
    }

    .focus\:ring-info:focus {
        --tw-ring-color: var(--color-info)
    }

    .focus\:ring-primary:focus {
        --tw-ring-color: var(--color-primary)
    }

    .focus\:ring-success:focus {
        --tw-ring-color: var(--color-success)
    }

    .focus\:ring-warning:focus {
        --tw-ring-color: var(--color-warning)
    }

    .focus\:ring-offset-0:focus {
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
    }

    .focus\:outline-hidden:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    @media(forced-colors:active) {
        .focus\:outline-hidden:focus {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .focus\:outline-none:focus {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:ring-2:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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)
    }

    .focus-visible\:ring-primary\/40:focus-visible {
        --tw-ring-color: #7a13f066
    }

    @supports (color:color-mix(in lab, red, red)) {
        .focus-visible\:ring-primary\/40:focus-visible {
            --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent)
        }
    }

    .focus-visible\:outline-none:focus-visible {
        --tw-outline-style: none;
        outline-style: none
    }

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

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

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    .aria-expanded\:border-primary[aria-expanded=true] {
        border-color: var(--color-primary)
    }

    .aria-expanded\:ring-1[aria-expanded=true] {
        --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)
    }

    .aria-expanded\:ring-primary[aria-expanded=true] {
        --tw-ring-color: var(--color-primary)
    }

    @media not all and (min-width:1400px) {
        .max-xxl\:end-10\.5 {
            inset-inline-end: calc(var(--spacing) * 10.5)
        }
    }

    @media not all and (min-width:1200px) {
        .max-xl\:top-\[195px\] {
            top: 195px
        }

        .max-xl\:hidden {
            display: none
        }

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

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

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

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

        .max-xl\:flex-col {
            flex-direction: column
        }
    }

    @media not all and (min-width:992px) {
        .max-lg\:mb-6 {
            margin-bottom: calc(var(--spacing) * 6)
        }

        .max-lg\:hidden {
            display: none
        }

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

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

        .max-lg\:flex-row {
            flex-direction: row
        }

        .max-lg\:flex-row-reverse {
            flex-direction: row-reverse
        }

        .max-lg\:justify-between {
            justify-content: space-between
        }

        .max-lg\:text-lg {
            font-size: var(--text-lg);
            line-height: var(--tw-leading, var(--text-lg--line-height))
        }

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

        .max-lg\:text-\[16px\] {
            font-size: 16px
        }

        .max-lg\:text-\[17px\] {
            font-size: 17px
        }
    }

    @media not all and (min-width:768px) {
        .max-md\:hidden {
            display: none
        }

        .max-md\:h-\[calc\(100vh-140px\)\]\! {
            height: calc(100vh - 140px) !important
        }

        .max-md\:h-\[calc\(100vh-160px\)\]\! {
            height: calc(100vh - 160px) !important
        }

        .max-md\:h-\[calc\(100vh-170px\)\]\! {
            height: calc(100vh - 170px) !important
        }

        .max-md\:h-screen\! {
            height: 100vh !important
        }

        .max-md\:flex-wrap {
            flex-wrap: wrap
        }

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

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

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

        .max-md\:text-5xl {
            font-size: var(--text-5xl);
            line-height: var(--tw-leading, var(--text-5xl--line-height))
        }

        .max-md\:text-6xl {
            font-size: var(--text-6xl);
            line-height: var(--tw-leading, var(--text-6xl--line-height))
        }

        .max-md\:text-base {
            font-size: var(--text-base);
            line-height: var(--tw-leading, var(--text-base--line-height))
        }

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

    @media not all and (min-width:576px) {
        .max-sm\:me-auto {
            margin-inline-end: auto
        }

        .max-sm\:hidden {
            display: none
        }

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

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

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

        .max-sm\:flex-col {
            flex-direction: column
        }

        .max-sm\:justify-center {
            justify-content: center
        }

        .max-sm\:py-2 {
            padding-block: calc(var(--spacing) * 2)
        }
    }

    @media(min-width:576px) {
        .sm\:col-span-2 {
            grid-column: span 2/span 2
        }

        .sm\:col-span-3 {
            grid-column: span 3/span 3
        }

        .sm\:col-span-4 {
            grid-column: span 4/span 4
        }

        .sm\:col-span-6 {
            grid-column: span 6/span 6
        }

        .sm\:col-span-9 {
            grid-column: span 9/span 9
        }

        .sm\:col-span-12 {
            grid-column: span 12/span 12
        }

        .sm\:mx-auto {
            margin-inline: auto
        }

        .sm\:ms-auto {
            margin-inline-start: auto
        }

        .sm\:block {
            display: block
        }

        .sm\:flex {
            display: flex
        }

        .sm\:inline {
            display: inline
        }

        .sm\:inline-flex {
            display: inline-flex
        }

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

        .sm\:h-auto {
            height: auto
        }

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

        .sm\:max-h-none {
            max-height: none
        }

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

        .sm\:w-\[48px\] {
            width: 48px
        }

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

        .sm\:w-\[125px\] {
            width: 125px
        }

        .sm\:w-\[150px\] {
            width: 150px
        }

        .sm\:w-\[194px\] {
            width: 194px
        }

        .sm\:w-\[240px\] {
            width: 240px
        }

        .sm\:w-auto {
            width: auto
        }

        .sm\:w-full {
            width: 100%
        }

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

        .sm\:flex-1 {
            flex: 1
        }

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

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

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

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

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:flex-nowrap {
            flex-wrap: nowrap
        }

        .sm\:items-center {
            align-items: center
        }

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

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

        .sm\:justify-center {
            justify-content: center
        }

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

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

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

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

        .sm\:px-2 {
            padding-inline: calc(var(--spacing) * 2)
        }

        .sm\:px-2\.5 {
            padding-inline: calc(var(--spacing) * 2.5)
        }

        .sm\:px-4 {
            padding-inline: calc(var(--spacing) * 4)
        }

        .sm\:px-5 {
            padding-inline: calc(var(--spacing) * 5)
        }

        .sm\:px-6 {
            padding-inline: calc(var(--spacing) * 6)
        }

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

        .sm\:py-3 {
            padding-block: calc(var(--spacing) * 3)
        }

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

        .sm\:text-end {
            text-align: end
        }

        .sm\:text-start {
            text-align: start
        }

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

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

        .sm\:before\:top-8:before {
            content: var(--tw-content);
            top: calc(var(--spacing) * 8)
        }
    }

    @media(min-width:768px) {
        .md\:absolute {
            position: absolute
        }

        .md\:fixed {
            position: fixed
        }

        .md\:start-3 {
            inset-inline-start: calc(var(--spacing) * 3)
        }

        .md\:end-5 {
            inset-inline-end: calc(var(--spacing) * 5)
        }

        .md\:end-6 {
            inset-inline-end: calc(var(--spacing) * 6)
        }

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

        .md\:top-5 {
            top: calc(var(--spacing) * 5)
        }

        .md\:bottom-6 {
            bottom: calc(var(--spacing) * 6)
        }

        .md\:col-span-1 {
            grid-column: span 1/span 1
        }

        .md\:col-span-2 {
            grid-column: span 2/span 2
        }

        .md\:col-span-3 {
            grid-column: span 3/span 3
        }

        .md\:col-span-4 {
            grid-column: span 4/span 4
        }

        .md\:col-span-5 {
            grid-column: span 5/span 5
        }

        .md\:col-span-6 {
            grid-column: span 6/span 6
        }

        .md\:col-span-7 {
            grid-column: span 7/span 7
        }

        .md\:col-span-8 {
            grid-column: span 8/span 8
        }

        .md\:col-span-9 {
            grid-column: span 9/span 9
        }

        .md\:col-span-10 {
            grid-column: span 10/span 10
        }

        .md\:col-span-12 {
            grid-column: span 12/span 12
        }

        .md\:col-start-2 {
            grid-column-start: 2
        }

        .md\:m-5 {
            margin: calc(var(--spacing) * 5)
        }

        .md\:m-6 {
            margin: calc(var(--spacing) * 6)
        }

        .md\:mx-auto {
            margin-inline: auto
        }

        .md\:mt-0 {
            margin-top: 0
        }

        .md\:mr-auto {
            margin-right: auto
        }

        .md\:mb-0 {
            margin-bottom: 0
        }

        .md\:block {
            display: block
        }

        .md\:flex {
            display: flex
        }

        .md\:inline {
            display: inline
        }

        .md\:h-auto {
            height: auto
        }

        .md\:h-screen {
            height: 100vh
        }

        .md\:max-h-none {
            max-height: none
        }

        .md\:w-\[calc\(50\%-12px\)\] {
            width: calc(50% - 12px)
        }

        .md\:w-fit {
            width: -moz-fit-content;
            width: fit-content
        }

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

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

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

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

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

        .md\:shrink-0 {
            flex-shrink: 0
        }

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

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

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

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

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

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

        .md\:flex-col {
            flex-direction: column
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:flex-nowrap {
            flex-wrap: nowrap
        }

        .md\:items-center {
            align-items: center
        }

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

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

        .md\:justify-end\! {
            justify-content: flex-end !important
        }

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

        :where(.md\:space-x-2>:not(:last-child)) {
            --tw-space-x-reverse: 0;
            margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
            margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))
        }

        .md\:rounded-full {
            border-radius: 3.40282e38px
        }

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

        .md\:pb-36 {
            padding-bottom: calc(var(--spacing) * 36)
        }

        .md\:text-start {
            text-align: start
        }
    }

    @media(min-width:992px) {
        .lg\:absolute {
            position: absolute
        }

        .lg\:fixed {
            position: fixed
        }

        .lg\:end-5 {
            inset-inline-end: calc(var(--spacing) * 5)
        }

        .lg\:top-8 {
            top: calc(var(--spacing) * 8)
        }

        .lg\:top-38 {
            top: calc(var(--spacing) * 38)
        }

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

        .lg\:col-span-3 {
            grid-column: span 3/span 3
        }

        .lg\:col-span-4 {
            grid-column: span 4/span 4
        }

        .lg\:col-span-6 {
            grid-column: span 6/span 6
        }

        .lg\:col-span-8 {
            grid-column: span 8/span 8
        }

        .lg\:col-span-10 {
            grid-column: span 10/span 10
        }

        .lg\:col-span-12 {
            grid-column: span 12/span 12
        }

        .lg\:col-start-1 {
            grid-column-start: 1
        }

        .lg\:col-start-2 {
            grid-column-start: 2
        }

        .lg\:col-start-3 {
            grid-column-start: 3
        }

        .lg\:mx-auto {
            margin-inline: auto
        }

        .lg\:ms-4 {
            margin-inline-start: calc(var(--spacing) * 4)
        }

        .lg\:mt-0 {
            margin-top: 0
        }

        .lg\:mr-auto {
            margin-right: auto
        }

        .lg\:mb-0 {
            margin-bottom: 0
        }

        .lg\:mb-12 {
            margin-bottom: calc(var(--spacing) * 12)
        }

        .lg\:block {
            display: block
        }

        .lg\:flex {
            display: flex
        }

        .lg\:hidden {
            display: none
        }

        .lg\:inline-flex {
            display: inline-flex
        }

        .lg\:h-auto {
            height: auto
        }

        .lg\:h-full {
            height: 100%
        }

        .lg\:max-h-none {
            max-height: none
        }

        .lg\:w-42 {
            width: calc(var(--spacing) * 42)
        }

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

        .lg\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr))
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .lg\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }

        .lg\:grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr))
        }

        .lg\:justify-between {
            justify-content: space-between
        }

        .lg\:justify-between\! {
            justify-content: space-between !important
        }

        .lg\:justify-end {
            justify-content: flex-end
        }

        .lg\:gap-8 {
            gap: calc(var(--spacing) * 8)
        }

        .lg\:border-t {
            border-top-style: var(--tw-border-style);
            border-top-width: 1px
        }

        .lg\:border-l {
            border-left-style: var(--tw-border-style);
            border-left-width: 1px
        }

        .lg\:border-l-border-color {
            border-left-color: var(--color-border-color)
        }

        .lg\:p-6 {
            padding: calc(var(--spacing) * 6)
        }

        .lg\:p-8 {
            padding: calc(var(--spacing) * 8)
        }

        .lg\:px-4 {
            padding-inline: calc(var(--spacing) * 4)
        }

        .lg\:ps-4 {
            padding-inline-start: calc(var(--spacing) * 4)
        }
    }

    @media(min-width:1200px) {
        .xl\:sticky {
            position: sticky
        }

        .xl\:top-6 {
            top: calc(var(--spacing) * 6)
        }

        .xl\:top-\[76px\] {
            top: 76px
        }

        .xl\:order-1 {
            order: 1
        }

        .xl\:order-2 {
            order: 2
        }

        .xl\:col-span-3 {
            grid-column: span 3/span 3
        }

        .xl\:col-span-4 {
            grid-column: span 4/span 4
        }

        .xl\:col-span-5 {
            grid-column: span 5/span 5
        }

        .xl\:col-span-6 {
            grid-column: span 6/span 6
        }

        .xl\:col-span-7 {
            grid-column: span 7/span 7
        }

        .xl\:col-span-8 {
            grid-column: span 8/span 8
        }

        .xl\:col-span-9 {
            grid-column: span 9/span 9
        }

        .xl\:col-span-10 {
            grid-column: span 10/span 10
        }

        .xl\:col-span-12 {
            grid-column: span 12/span 12
        }

        .xl\:col-start-2 {
            grid-column-start: 2
        }

        .xl\:col-start-3 {
            grid-column-start: 3
        }

        .xl\:mx-auto {
            margin-inline: auto
        }

        .xl\:mt-0 {
            margin-top: 0
        }

        .xl\:block {
            display: block
        }

        .xl\:hidden {
            display: none
        }

        .xl\:inline-flex {
            display: inline-flex
        }

        .xl\:h-\[780px\] {
            height: 780px
        }

        .xl\:h-\[calc\(100vh-236px\)\] {
            height: calc(100vh - 236px)
        }

        .xl\:h-\[calc\(100vh-252px\)\] {
            height: calc(100vh - 252px)
        }

        .xl\:h-auto {
            height: auto
        }

        .xl\:max-h-\[calc\(100vh-120px\)\] {
            max-height: calc(100vh - 120px)
        }

        .xl\:max-h-none {
            max-height: none
        }

        .xl\:min-h-\[620px\] {
            min-height: 620px
        }

        .xl\:w-51 {
            width: calc(var(--spacing) * 51)
        }

        .xl\:w-80 {
            width: calc(var(--spacing) * 80)
        }

        .xl\:w-\[250px\] {
            width: 250px
        }

        .xl\:w-\[340px\]\! {
            width: 340px !important
        }

        .xl\:w-\[448px\] {
            width: 448px
        }

        .xl\:w-\[calc\(33\.33\%-16px\)\] {
            width: calc(33.33% - 16px)
        }

        .xl\:max-w-xl {
            max-width: var(--container-xl)
        }

        .xl\:flex-\[1\.05\] {
            flex: 1.05
        }

        .xl\:flex-\[1\.25\] {
            flex: 1.25
        }

        .xl\:flex-\[1\.35\] {
            flex: 1.35
        }

        .xl\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .xl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .xl\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }

        .xl\:grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr))
        }

        .xl\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
            grid-template-columns: minmax(0, 1fr) 360px
        }

        .xl\:items-end {
            align-items: flex-end
        }

        .xl\:items-start {
            align-items: flex-start
        }

        .xl\:justify-between {
            justify-content: space-between
        }

        .xl\:justify-end {
            justify-content: flex-end
        }

        .xl\:justify-end\! {
            justify-content: flex-end !important
        }

        .xl\:justify-start {
            justify-content: flex-start
        }

        .xl\:self-start {
            align-self: flex-start
        }

        .xl\:p-0 {
            padding: 0
        }

        .xl\:p-\[40px\] {
            padding: 40px
        }
    }

    @media(min-width:1400px) {
        .xxl\:sticky {
            position: sticky
        }

        .xxl\:col-span-3 {
            grid-column: span 3/span 3
        }

        .xxl\:col-span-4 {
            grid-column: span 4/span 4
        }

        .xxl\:col-span-5 {
            grid-column: span 5/span 5
        }

        .xxl\:col-span-6 {
            grid-column: span 6/span 6
        }

        .xxl\:col-span-7 {
            grid-column: span 7/span 7
        }

        .xxl\:col-span-8 {
            grid-column: span 8/span 8
        }

        .xxl\:col-span-9 {
            grid-column: span 9/span 9
        }

        .xxl\:col-span-10 {
            grid-column: span 10/span 10
        }

        .xxl\:col-span-12 {
            grid-column: span 12/span 12
        }

        .xxl\:col-start-2 {
            grid-column-start: 2
        }

        .xxl\:ms-0 {
            margin-inline-start: 0
        }

        .xxl\:mt-12 {
            margin-top: calc(var(--spacing) * 12)
        }

        .xxl\:block {
            display: block
        }

        .xxl\:flex {
            display: flex
        }

        .xxl\:hidden {
            display: none
        }

        .xxl\:inline-flex {
            display: inline-flex
        }

        .xxl\:h-\[668px\] {
            height: 668px
        }

        .xxl\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .xxl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .xxl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .xxl\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr))
        }

        .xxl\:grid-cols-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr))
        }

        .xxl\:grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr))
        }

        .xxl\:flex-nowrap {
            flex-wrap: nowrap
        }

        .xxl\:justify-center {
            justify-content: center
        }

        .xxl\:gap-0 {
            gap: 0
        }

        .xxl\:self-start {
            align-self: flex-start
        }
    }

    .dark\:block:where([data-theme=dark], [data-theme=dark] *) {
        display: block
    }

    .dark\:block\!:where([data-theme=dark], [data-theme=dark] *) {
        display: block !important
    }

    .dark\:hidden:where([data-theme=dark], [data-theme=dark] *) {
        display: none
    }

    .dark\:border-gray-100:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-gray-100)
    }

    .dark\:border-gray-500:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-gray-500)
    }

    .dark\:border-neutral-600:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-neutral-600)
    }

    .dark\:border-neutral-700:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-neutral-700)
    }

    .dark\:border-neutral-700\!:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-neutral-700) !important
    }

    .dark\:border-slate-700:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-slate-700)
    }

    .dark\:border-white:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-white)
    }

    .dark\:border-white\!:where([data-theme=dark], [data-theme=dark] *) {
        border-color: var(--color-white) !important
    }

    .dark\:bg-blue-500:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-blue-500)
    }

    .dark\:bg-dark:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-dark)
    }

    .dark\:bg-gray-100:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-gray-100)
    }

    .dark\:bg-gray-200:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-gray-200)
    }

    .dark\:bg-neutral-700:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-neutral-700)
    }

    .dark\:bg-neutral-800:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-neutral-800)
    }

    .dark\:bg-neutral-800\!:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-neutral-800) !important
    }

    .dark\:bg-neutral-900:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-neutral-900)
    }

    .dark\:bg-neutral-900\/80:where([data-theme=dark], [data-theme=dark] *) {
        background-color: #171717cc
    }

    @supports (color:color-mix(in lab, red, red)) {
        .dark\:bg-neutral-900\/80:where([data-theme=dark], [data-theme=dark] *) {
            background-color: color-mix(in oklab, var(--color-neutral-900) 80%, transparent)
        }
    }

    .dark\:bg-white:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-white)
    }

    .dark\:bg-white\!:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-white) !important
    }

    .dark\:bg-white\/10:where([data-theme=dark], [data-theme=dark] *) {
        background-color: #ffffff1a
    }

    @supports (color:color-mix(in lab, red, red)) {
        .dark\:bg-white\/10:where([data-theme=dark], [data-theme=dark] *) {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent)
        }
    }

    .dark\:fill-neutral-200:where([data-theme=dark], [data-theme=dark] *) {
        fill: var(--color-neutral-200)
    }

    .dark\:text-blue-500:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-blue-500)
    }

    .dark\:text-dark:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-dark)
    }

    .dark\:text-dark\!:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-dark) !important
    }

    .dark\:text-gray-300:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-gray-300)
    }

    .dark\:text-gray-400:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-gray-400)
    }

    .dark\:text-gray-500:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-gray-500)
    }

    .dark\:text-gray-600:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-gray-600)
    }

    .dark\:text-gray-900:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-gray-900)
    }

    .dark\:text-neutral-200:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-neutral-200)
    }

    .dark\:text-neutral-400:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-neutral-400)
    }

    .dark\:text-neutral-500:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-neutral-500)
    }

    .dark\:text-white:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-white)
    }

    .dark\:text-white\!:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-white) !important
    }

    .dark\:invert:where([data-theme=dark], [data-theme=dark] *) {
        --tw-invert: invert(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, )
    }

    .dark\:invert\!:where([data-theme=dark], [data-theme=dark] *) {
        --tw-invert: invert(100%) !important;
        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, ) !important
    }

    .dark\:peer-checked\:bg-danger:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        background-color: var(--color-danger)
    }

    .dark\:peer-checked\:bg-dark:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        background-color: var(--color-dark)
    }

    .dark\:peer-checked\:bg-info:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        background-color: var(--color-info)
    }

    .dark\:peer-checked\:bg-primary:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        background-color: var(--color-primary)
    }

    .dark\:peer-checked\:bg-success:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        background-color: var(--color-success)
    }

    .dark\:peer-checked\:bg-warning:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        background-color: var(--color-warning)
    }

    .dark\:peer-checked\:text-dark:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        color: var(--color-dark)
    }

    .dark\:peer-checked\:text-dark\!:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        color: var(--color-dark) !important
    }

    .dark\:peer-checked\:ring-offset-slate-900:where([data-theme=dark], [data-theme=dark] *):is(:where(.peer):checked~*) {
        --tw-ring-offset-color: var(--color-slate-900)
    }

    .dark\:file\:bg-gray-200:where([data-theme=dark], [data-theme=dark] *)::file-selector-button {
        background-color: var(--color-gray-200)
    }

    .dark\:file\:text-dark:where([data-theme=dark], [data-theme=dark] *)::file-selector-button {
        color: var(--color-dark)
    }

    .dark\:checked\:border-blue-500:where([data-theme=dark], [data-theme=dark] *):checked {
        border-color: var(--color-blue-500)
    }

    .dark\:checked\:border-info:where([data-theme=dark], [data-theme=dark] *):checked {
        border-color: var(--color-info)
    }

    .dark\:checked\:bg-blue-500:where([data-theme=dark], [data-theme=dark] *):checked {
        background-color: var(--color-blue-500)
    }

    .dark\:checked\:bg-info:where([data-theme=dark], [data-theme=dark] *):checked {
        background-color: var(--color-info)
    }

    @media(hover:hover) {
        .dark\:hover\:border-primary:where([data-theme=dark], [data-theme=dark] *):hover {
            border-color: var(--color-primary)
        }

        .dark\:hover\:border-white:where([data-theme=dark], [data-theme=dark] *):hover {
            border-color: var(--color-white)
        }

        .dark\:hover\:bg-neutral-700:where([data-theme=dark], [data-theme=dark] *):hover {
            background-color: var(--color-neutral-700)
        }

        .dark\:hover\:bg-neutral-800:where([data-theme=dark], [data-theme=dark] *):hover {
            background-color: var(--color-neutral-800)
        }

        .dark\:hover\:bg-primary:where([data-theme=dark], [data-theme=dark] *):hover {
            background-color: var(--color-primary)
        }

        .dark\:hover\:bg-purple-50\!:where([data-theme=dark], [data-theme=dark] *):hover {
            background-color: var(--color-purple-50) !important
        }

        .dark\:hover\:bg-white\/5:where([data-theme=dark], [data-theme=dark] *):hover {
            background-color: #ffffff0d
        }

        @supports (color:color-mix(in lab, red, red)) {
            .dark\:hover\:bg-white\/5:where([data-theme=dark], [data-theme=dark] *):hover {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent)
            }
        }

        .dark\:hover\:text-danger:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-danger)
        }

        .dark\:hover\:text-dark:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-dark)
        }

        .dark\:hover\:text-dark\!:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-dark) !important
        }

        .dark\:hover\:text-neutral-200:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-neutral-200)
        }

        .dark\:hover\:text-neutral-300:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-neutral-300)
        }

        .dark\:hover\:text-primary:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-primary)
        }

        .dark\:hover\:text-warning:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-warning)
        }

        .dark\:hover\:text-white:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-white)
        }

        .dark\:hover\:text-white\!:where([data-theme=dark], [data-theme=dark] *):hover {
            color: var(--color-white) !important
        }

        .hover\:dark\:text-dark:hover:where([data-theme=dark], [data-theme=dark] *) {
            color: var(--color-dark)
        }
    }

    .dark\:focus\:bg-neutral-700:where([data-theme=dark], [data-theme=dark] *):focus {
        background-color: var(--color-neutral-700)
    }

    .dark\:focus\:bg-neutral-800:where([data-theme=dark], [data-theme=dark] *):focus {
        background-color: var(--color-neutral-800)
    }

    .dark\:focus\:text-dark:where([data-theme=dark], [data-theme=dark] *):focus {
        color: var(--color-dark)
    }

    .dark\:focus\:text-neutral-300:where([data-theme=dark], [data-theme=dark] *):focus {
        color: var(--color-neutral-300)
    }

    .hs-dropdown-open\:rotate-180.hs-dropdown-menu.open,
    .hs-dropdown.open>.hs-dropdown-open\:rotate-180,
    .hs-dropdown.open>.hs-dropdown-toggle .hs-dropdown-open\:rotate-180,
    .hs-dropdown.open>.hs-dropdown-menu>.hs-dropdown-open\:rotate-180 {
        rotate: 180deg
    }

    .hs-dropdown-open\:bg-light.hs-dropdown-menu.open,
    .hs-dropdown.open>.hs-dropdown-open\:bg-light,
    .hs-dropdown.open>.hs-dropdown-toggle .hs-dropdown-open\:bg-light,
    .hs-dropdown.open>.hs-dropdown-menu>.hs-dropdown-open\:bg-light {
        background-color: var(--color-light)
    }

    .hs-dropdown-open\:bg-primary-50.hs-dropdown-menu.open,
    .hs-dropdown.open>.hs-dropdown-open\:bg-primary-50,
    .hs-dropdown.open>.hs-dropdown-toggle .hs-dropdown-open\:bg-primary-50,
    .hs-dropdown.open>.hs-dropdown-menu>.hs-dropdown-open\:bg-primary-50 {
        background-color: var(--color-primary-50)
    }

    .hs-dropdown-open\:text-primary.hs-dropdown-menu.open,
    .hs-dropdown.open>.hs-dropdown-open\:text-primary,
    .hs-dropdown.open>.hs-dropdown-toggle .hs-dropdown-open\:text-primary,
    .hs-dropdown.open>.hs-dropdown-menu>.hs-dropdown-open\:text-primary {
        color: var(--color-primary)
    }

    .hs-dropdown-open\:opacity-100.hs-dropdown-menu.open,
    .hs-dropdown.open>.hs-dropdown-open\:opacity-100,
    .hs-dropdown.open>.hs-dropdown-toggle .hs-dropdown-open\:opacity-100,
    .hs-dropdown.open>.hs-dropdown-menu>.hs-dropdown-open\:opacity-100 {
        opacity: 1
    }

    .hs-tooltip-shown\:visible.hs-tooltip-content.show,
    .hs-tooltip.show .hs-tooltip-shown\:visible {
        visibility: visible
    }

    .hs-tooltip-shown\:opacity-100.hs-tooltip-content.show,
    .hs-tooltip.show .hs-tooltip-shown\:opacity-100 {
        opacity: 1
    }

    .hs-accordion-active\:block.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:block,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:block,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:block,
    .hs-accordion.active>.hs-accordion-active\:block.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:block.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:block.hs-accordion-force-active {
        display: block
    }

    .hs-accordion-active\:flex.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:flex,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:flex,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:flex,
    .hs-accordion.active>.hs-accordion-active\:flex.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:flex.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:flex.hs-accordion-force-active {
        display: flex
    }

    .hs-accordion-active\:hidden.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:hidden,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:hidden,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:hidden,
    .hs-accordion.active>.hs-accordion-active\:hidden.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:hidden.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:hidden.hs-accordion-force-active {
        display: none
    }

    .hs-accordion-active\:rounded-t-lg.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:rounded-t-lg,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:rounded-t-lg,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:rounded-t-lg,
    .hs-accordion.active>.hs-accordion-active\:rounded-t-lg.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:rounded-t-lg.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:rounded-t-lg.hs-accordion-force-active {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg)
    }

    .hs-accordion-active\:border-0.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:border-0,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:border-0,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:border-0,
    .hs-accordion.active>.hs-accordion-active\:border-0.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:border-0.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:border-0.hs-accordion-force-active {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .hs-accordion-active\:border-b.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:border-b,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:border-b,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:border-b,
    .hs-accordion.active>.hs-accordion-active\:border-b.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:border-b.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:border-b.hs-accordion-force-active {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .hs-accordion-active\:bg-danger.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-danger,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-danger,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-danger,
    .hs-accordion.active>.hs-accordion-active\:bg-danger.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-danger.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-danger.hs-accordion-force-active {
        background-color: var(--color-danger)
    }

    .hs-accordion-active\:bg-dark.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-dark,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-dark,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-dark,
    .hs-accordion.active>.hs-accordion-active\:bg-dark.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-dark.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-dark.hs-accordion-force-active {
        background-color: var(--color-dark)
    }

    .hs-accordion-active\:bg-gray-100.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-gray-100,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-gray-100,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-gray-100,
    .hs-accordion.active>.hs-accordion-active\:bg-gray-100.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-gray-100.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-gray-100.hs-accordion-force-active {
        background-color: var(--color-gray-100)
    }

    .hs-accordion-active\:bg-info.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-info,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-info,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-info,
    .hs-accordion.active>.hs-accordion-active\:bg-info.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-info.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-info.hs-accordion-force-active {
        background-color: var(--color-info)
    }

    .hs-accordion-active\:bg-light.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-light,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-light,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-light,
    .hs-accordion.active>.hs-accordion-active\:bg-light.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-light.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-light.hs-accordion-force-active {
        background-color: var(--color-light)
    }

    .hs-accordion-active\:bg-primary.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-primary,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-primary,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-primary,
    .hs-accordion.active>.hs-accordion-active\:bg-primary.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-primary.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-primary.hs-accordion-force-active {
        background-color: var(--color-primary)
    }

    .hs-accordion-active\:bg-primary-100.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-primary-100,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-primary-100,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-primary-100,
    .hs-accordion.active>.hs-accordion-active\:bg-primary-100.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-primary-100.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-primary-100.hs-accordion-force-active {
        background-color: var(--color-primary-100)
    }

    .hs-accordion-active\:bg-success.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-success,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-success,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-success,
    .hs-accordion.active>.hs-accordion-active\:bg-success.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-success.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-success.hs-accordion-force-active {
        background-color: var(--color-success)
    }

    .hs-accordion-active\:bg-warning.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-warning,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-warning,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-warning,
    .hs-accordion.active>.hs-accordion-active\:bg-warning.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-warning.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-warning.hs-accordion-force-active {
        background-color: var(--color-warning)
    }

    .hs-accordion-active\:bg-white.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:bg-white,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:bg-white,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:bg-white,
    .hs-accordion.active>.hs-accordion-active\:bg-white.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:bg-white.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:bg-white.hs-accordion-force-active {
        background-color: var(--color-white)
    }

    .hs-accordion-active\:text-danger.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-danger,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-danger,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-danger,
    .hs-accordion.active>.hs-accordion-active\:text-danger.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-danger.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-danger.hs-accordion-force-active {
        color: var(--color-danger)
    }

    .hs-accordion-active\:text-dark.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-dark,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-dark,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-dark,
    .hs-accordion.active>.hs-accordion-active\:text-dark.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-dark.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-dark.hs-accordion-force-active {
        color: var(--color-dark)
    }

    .hs-accordion-active\:text-info.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-info,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-info,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-info,
    .hs-accordion.active>.hs-accordion-active\:text-info.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-info.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-info.hs-accordion-force-active {
        color: var(--color-info)
    }

    .hs-accordion-active\:text-primary.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-primary,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-primary,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-primary,
    .hs-accordion.active>.hs-accordion-active\:text-primary.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-primary.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-primary.hs-accordion-force-active {
        color: var(--color-primary)
    }

    .hs-accordion-active\:text-success.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-success,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-success,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-success,
    .hs-accordion.active>.hs-accordion-active\:text-success.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-success.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-success.hs-accordion-force-active {
        color: var(--color-success)
    }

    .hs-accordion-active\:text-warning.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-warning,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-warning,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-warning,
    .hs-accordion.active>.hs-accordion-active\:text-warning.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-warning.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-warning.hs-accordion-force-active {
        color: var(--color-warning)
    }

    .hs-accordion-active\:text-white.hs-accordion.active,
    .hs-accordion.active>.hs-accordion-active\:text-white,
    .hs-accordion.active>.hs-accordion-toggle .hs-accordion-active\:text-white,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-toggle .hs-accordion-active\:text-white,
    .hs-accordion.active>.hs-accordion-active\:text-white.hs-accordion-toggle,
    .hs-accordion.active>.hs-accordion-heading>.hs-accordion-active\:text-white.hs-accordion-toggle,
    .hs-accordion.active .hs-accordion-active\:text-white.hs-accordion-force-active {
        color: var(--color-white)
    }

    .hs-tab-active\:border[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .hs-tab-active\:border-primary[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:border-primary {
        border-color: var(--color-primary)
    }

    .hs-tab-active\:bg-light[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:bg-light {
        background-color: var(--color-light)
    }

    .hs-tab-active\:bg-primary[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:bg-primary {
        background-color: var(--color-primary)
    }

    .hs-tab-active\:bg-success[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:bg-success {
        background-color: var(--color-success)
    }

    .hs-tab-active\:font-semibold[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .hs-tab-active\:text-primary[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:text-primary {
        color: var(--color-primary)
    }

    .hs-tab-active\:text-white[data-hs-tab].active,
    [data-hs-tab].active .hs-tab-active\:text-white {
        color: var(--color-white)
    }

    .dark\:hs-tab-active\:text-dark:where([data-theme=dark], [data-theme=dark] *)[data-hs-tab].active,
    [data-hs-tab].active .dark\:hs-tab-active\:text-dark:where([data-theme=dark], [data-theme=dark] *) {
        color: var(--color-dark)
    }

    .hs-overlay-open\:translate-x-0.open,
    .open .hs-overlay-open\:translate-x-0 {
        --tw-translate-x: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .hs-overlay-open\:translate-y-0.open,
    .open .hs-overlay-open\:translate-y-0 {
        --tw-translate-y: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .hs-overlay-open\:opacity-100.open,
    .open .hs-overlay-open\:opacity-100 {
        opacity: 1
    }

    .hs-overlay-open\:duration-500.open,
    .open .hs-overlay-open\:duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    @media(min-width:768px) {

        .md\:hs-overlay-open\:mt-10.open,
        .open .md\:hs-overlay-open\:mt-10 {
            margin-top: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:992px) {

        .lg\:hs-overlay-open\:mt-10.open,
        .open .lg\:hs-overlay-open\:mt-10 {
            margin-top: calc(var(--spacing) * 10)
        }
    }

    @media(min-width:1200px) {

        .xl\:hs-overlay-open\:mt-10.open,
        .open .xl\:hs-overlay-open\:mt-10 {
            margin-top: calc(var(--spacing) * 10)
        }
    }

    .hs-selected\:block.selected,
    .selected .hs-selected\:block {
        display: block
    }

    .hs-selected\:bg-gray-100.selected,
    .selected .hs-selected\:bg-gray-100 {
        background-color: var(--color-gray-100)
    }

    .dark\:hs-selected\:bg-gray-700:where([data-theme=dark], [data-theme=dark] *).selected,
    .selected .dark\:hs-selected\:bg-gray-700:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-gray-700)
    }

    .dark\:hs-selected\:bg-neutral-800:where([data-theme=dark], [data-theme=dark] *).selected,
    .selected .dark\:hs-selected\:bg-neutral-800:where([data-theme=dark], [data-theme=dark] *) {
        background-color: var(--color-neutral-800)
    }

    .hs-select-disabled\:pointer-events-none.disabled,
    .disabled .hs-select-disabled\:pointer-events-none {
        pointer-events: none
    }

    .hs-select-disabled\:opacity-50.disabled,
    .disabled .hs-select-disabled\:opacity-50 {
        opacity: .5
    }

    .hs-password-active\:block.active,
    .active .hs-password-active\:block {
        display: block
    }

    .hs-password-active\:hidden.active,
    .active .hs-password-active\:hidden {
        display: none
    }

    .hs-combo-box-selected\:block.selected,
    .selected .hs-combo-box-selected\:block {
        display: block
    }

    .hs-file-upload-complete\:bg-green-600.complete,
    .complete .hs-file-upload-complete\:bg-green-600 {
        background-color: var(--color-green-600)
    }

    .\[\&\.active\]\:border-primary.active {
        border-color: var(--color-primary)
    }

    .\[\&\.active\]\:bg-light.active {
        background-color: var(--color-light)
    }

    .\[\&\.active\]\:bg-primary-50.active {
        background-color: var(--color-primary-50)
    }

    .\[\&\:\:-moz-range-thumb\]\:w-2\.5::-moz-range-thumb {
        width: calc(var(--spacing) * 2.5)
    }

    .\[\&\:\:-moz-range-thumb\]\:appearance-none::-moz-range-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .\[\&\:\:-moz-range-thumb\]\:rounded-full::-moz-range-thumb {
        border-radius: 3.40282e38px
    }

    .\[\&\:\:-moz-range-thumb\]\:border-4::-moz-range-thumb {
        border-style: var(--tw-border-style);
        border-width: 4px
    }

    .\[\&\:\:-moz-range-thumb\]\:border-blue-600::-moz-range-thumb {
        border-color: var(--color-blue-600)
    }

    .\[\&\:\:-moz-range-thumb\]\:bg-white::-moz-range-thumb {
        background-color: var(--color-white)
    }

    .\[\&\:\:-moz-range-thumb\]\:transition-all::-moz-range-thumb {
        -moz-transition-property: all;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .\[\&\:\:-moz-range-thumb\]\:duration-150::-moz-range-thumb {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .\[\&\:\:-moz-range-thumb\]\:ease-in-out::-moz-range-thumb {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .\[\&\:\:-moz-range-track\]\:w-full::-moz-range-track {
        width: 100%
    }

    .\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track {
        border-radius: 3.40282e38px
    }

    .\[\&\:\:-moz-range-track\]\:bg-gray-100::-moz-range-track {
        background-color: var(--color-gray-100)
    }

    .\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
        width: calc(var(--spacing) * 2)
    }

    .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
        border-radius: 3.40282e38px
    }

    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-gray-300::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-300)
    }

    .dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500:where([data-theme=dark], [data-theme=dark] *)::-webkit-scrollbar-thumb {
        background-color: var(--color-neutral-500)
    }

    .\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-100::-webkit-scrollbar-track {
        background-color: var(--color-gray-100)
    }

    .dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700:where([data-theme=dark], [data-theme=dark] *)::-webkit-scrollbar-track {
        background-color: var(--color-neutral-700)
    }

    .\[\&\:\:-webkit-slider-runnable-track\]\:w-full::-webkit-slider-runnable-track {
        width: 100%
    }

    .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full::-webkit-slider-runnable-track {
        border-radius: 3.40282e38px
    }

    .\[\&\:\:-webkit-slider-runnable-track\]\:bg-gray-100::-webkit-slider-runnable-track {
        background-color: var(--color-gray-100)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:-mt-0\.5::-webkit-slider-thumb {
        margin-top: calc(var(--spacing) * -.5)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:h-2\.5::-webkit-slider-thumb {
        height: calc(var(--spacing) * 2.5)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:w-2\.5::-webkit-slider-thumb {
        width: calc(var(--spacing) * 2.5)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb {
        border-radius: 3.40282e38px
    }

    .\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb {
        background-color: var(--color-white)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:shadow-\[0_0_0_4px_rgba\(37\,99\,235\,1\)\]::-webkit-slider-thumb {
        --tw-shadow: 0 0 0 4px var(--tw-shadow-color, #2563eb);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .\[\&\:\:-webkit-slider-thumb\]\:transition-all::-webkit-slider-thumb {
        -webkit-transition-property: all;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .\[\&\:\:-webkit-slider-thumb\]\:duration-150::-webkit-slider-thumb {
        --tw-duration: .15s;
        transition-duration: .15s
    }

    .\[\&\:\:-webkit-slider-thumb\]\:ease-in-out::-webkit-slider-thumb {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }

    .\[\&\:checked\+label\]\:bg-light:checked+label {
        background-color: var(--color-light)
    }

    .\[\&\:checked\+label\]\:text-primary:checked+label {
        color: var(--color-primary)
    }

    .\[\&\>i\]\:text-\[11px\]>i {
        font-size: 11px
    }

    .\[\&\>i\]\:text-\[13px\]>i {
        font-size: 13px
    }

    .\[\&\>i\]\:text-gray-400>i {
        color: var(--color-gray-400)
    }

    #generate-resume-backdrop,
    #generate-color-backdrop {
        z-index: -1 !important;
        background-color: #0000 !important
    }

    @keyframes anim-rotate {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    .striped-progress {
        border-radius: var(--radius-lg);
        background-image: linear-gradient(45deg, #ffffff26 25%, #0000 25%, #0000 50%, #ffffff26 50%, #ffffff26 75%, #0000 75%, #0000);
        background-repeat: repeat;
        background-size: 1rem 1rem;
        height: 100%;
        animation: 1s linear infinite progress-stripes
    }

    @keyframes progress-stripes {
        0% {
            background-position: 0 0
        }

        to {
            background-position: 1rem 0
        }
    }
}

@layer pages {

    .todo-strike .strike-info,
    .todo-strike-content .strike-info {
        text-decoration-line: line-through
    }

    .curve-shape-one:before {
        z-index: 1;
        height: calc(var(--spacing) * 6);
        --tw-shadow: 4px 8px 0 0 var(--tw-shadow-color, #fff);
        width: 23px;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-content: "";
        content: var(--tw-content);
        border-radius: 78%;
        position: absolute;
        top: 27px;
        bottom: 0;
        right: 76px;
        rotate: 240deg
    }

    .curve-shape-one:after {
        z-index: 1;
        height: calc(var(--spacing) * 6);
        width: calc(var(--spacing) * 7);
        --tw-shadow: 4px 8px 0 0 var(--tw-shadow-color, #fff);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-content: "";
        content: var(--tw-content);
        border-radius: 78%;
        position: absolute;
        bottom: -21px;
        right: 33px;
        rotate: 244deg
    }

    .curve-shape-two:before {
        z-index: 1;
        height: calc(var(--spacing) * 6);
        --tw-shadow: 4px 8px 0 0 var(--tw-shadow-color, #fff);
        width: 23px;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-content: "";
        content: var(--tw-content);
        border-radius: 78%;
        position: absolute;
        top: -23.6px;
        right: 22px;
        rotate: 96deg
    }

    .curve-shape-two:after {
        z-index: 1;
        --tw-shadow: 4px 8px 0 0 var(--tw-shadow-color, #fff);
        width: 21px;
        height: 22px;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-content: "";
        content: var(--tw-content);
        border-radius: 78%;
        position: absolute;
        bottom: 30px;
        right: -18px;
        rotate: 89deg
    }

    .feed-page {
        overflow: hidden
    }

    @media not all and (min-width:1200px) {
        .feed-page {
            overflow-y: auto
        }
    }

    .feed-scroll {
        height: calc(100vh - 220px);
        overflow-y: auto
    }

    @media not all and (min-width:1200px) {
        .feed-scroll {
            height: auto;
            overflow: auto
        }
    }
}

[data-theme=light] {
    --color-default: #4a5565;
    --color-border-color: #e5e7eb
}

.custom-select {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    width: 100%;
    display: flex
}

.custom-select .choices {
    width: 50% !important
}

.ai-chat-grid .chat-right,
.ai-chat-grid .chat-left {
    height: calc(100vh - 250px)
}

.dt-paging .pagination {
    align-items: center !important;
    gap: var(--spacing) !important;
    padding: 0 !important;
    display: flex !important
}

.dt-paging .pagination a {
    border-radius: var(--radius-lg) !important
}

.dt-paging .pagination a:focus {
    border-style: var(--tw-border-style) !important;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    border-width: 0 !important
}

#tableinfo .dt-info {
    color: var(--color-dark)
}

.dt-length label {
    color: var(--color-dark) !important
}

.dt-container {
    overflow: auto !important
}

.dt-empty {
    padding: calc(var(--spacing) * 5) !important
}

.dt-length select {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    padding-right: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg) !important;
    background-color: var(--color-white) !important;
    width: 65px !important;
    padding-block: var(--spacing) !important
}

.dt-paging nav {
    align-items: center !important;
    gap: var(--spacing) !important;
    padding: 0 !important;
    display: flex !important
}

.dt-paging .dt-paging-button {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: var(--radius-lg) !important;
    background-color: var(--color-white) !important;
    width: 28px !important;
    height: 28px !important;
    color: var(--color-dark) !important
}

@media(hover:hover) {
    .dt-paging .dt-paging-button:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important
    }
}

.dt-paging-button.current {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important
}

.dt-paging-button.disabled {
    pointer-events: none !important;
    color: var(--color-gray-300) !important
}

@media(hover:hover) {
    .dt-paging-button.disabled:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important
    }
}

#calendar {
    border-radius: var(--radius-lg) !important;
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
    border-color: var(--color-border-color) !important;
    background-color: var(--color-white) !important
}

.fc .fc-toolbar.fc-header-toolbar {
    gap: calc(var(--spacing) * 4) !important;
    padding: calc(var(--spacing) * 5) !important;
    flex-wrap: wrap !important;
    margin: 0 !important
}

.fc-header-toolbar .fc-toolbar-chunk>div {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.fc-header-toolbar .fc-toolbar-chunk .fc-button-group {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: var(--spacing);
    display: flex
}

.fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button {
    border-radius: var(--radius-lg);
    border-top-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-dark);
    border-top-width: 2px;
    border-style: var(--tw-border-style) !important;
    background-color: var(--color-white) !important;
    text-transform: capitalize !important;
    border-width: 0 !important
}

@media(hover:hover) {
    .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:hover {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important
    }
}

.fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:focus {
    --tw-outline-style: none;
    outline-style: none
}

@media(forced-colors:active) {
    .fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:focus {
        outline-offset: 2px;
        outline: 2px solid #0000
    }
}

.fc-header-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:disabled {
    pointer-events: none;
    opacity: .5
}

.fc .fc-button-group>.fc-button.fc-button-active {
    border-radius: var(--radius-lg);
    border-top-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-white);
    border-color: #0000;
    border-top-width: 2px;
    background-color: var(--color-primary) !important
}

@media(hover:hover) {
    .fc .fc-button-group>.fc-button.fc-button-active:hover {
        background-color: var(--color-primary);
        color: var(--color-white) !important
    }
}

.fc .fc-button-group>.fc-button.fc-button-active:focus {
    --tw-outline-style: none;
    outline-style: none
}

@media(forced-colors:active) {
    .fc .fc-button-group>.fc-button.fc-button-active:focus {
        outline-offset: 2px;
        outline: 2px solid #0000
    }
}

.fc .fc-button-group>.fc-button.fc-button-active:disabled {
    pointer-events: none;
    opacity: .5
}

.fc .fc-button-group>.fc-button.fc-button-active:focus {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important
}

.fc-toolbar-title {
    --tw-leading: 1px;
    line-height: 1px;
    margin: 0 !important;
    font-size: 17.5px !important
}

@media not all and (min-width:992px) {
    .fc-toolbar-title {
        font-size: var(--text-base) !important;
        line-height: var(--tw-leading, var(--text-base--line-height)) !important
    }
}

@media not all and (min-width:576px) {
    .fc-toolbar-title {
        font-size: 11px !important
    }
}

.fc-prev-button,
.fc-next-button {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    border-radius: var(--radius-md) !important;
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
    border-color: var(--color-border-color) !important;
    background-color: var(--color-light) !important;
    padding: calc(var(--spacing) * 2) !important;
    color: var(--color-dark) !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important
}

@media(hover:hover) {
    :is(.fc-prev-button, .fc-next-button):hover {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important
    }
}

:is(.fc-prev-button, .fc-next-button):focus {
    --tw-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
}

.fc-prev-button span,
.fc-next-button span {
    font-size: 16px !important
}

.fc .fc-button-primary:focus {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
}

.fc-toolbar-chunk .fc-fcTodayBtn-button {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.75);
    align-items: center !important;
    -moz-column-gap: calc(var(--spacing) * 2) !important;
    column-gap: calc(var(--spacing) * 2) !important;
    border-radius: var(--radius-lg) !important;
    border-style: var(--tw-border-style) !important;
    background-color: var(--color-dark) !important;
    text-align: center !important;
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-white) !important;
    border-width: 0 !important;
    display: flex !important
}

@media(hover:hover) {
    .fc-toolbar-chunk .fc-fcTodayBtn-button:hover {
        border-color: var(--color-primary-800);
        color: var(--color-white);
        background-color: var(--color-primary-800) !important
    }
}

.fc-toolbar-chunk .fc-addEventBtn-button {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.75);
    align-items: center !important;
    -moz-column-gap: calc(var(--spacing) * 2) !important;
    column-gap: calc(var(--spacing) * 2) !important;
    border-radius: var(--radius-lg) !important;
    border-style: var(--tw-border-style) !important;
    background-color: var(--color-primary) !important;
    text-align: center !important;
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-white) !important;
    border-width: 0 !important;
    margin: 0 !important;
    display: flex !important
}

@media(hover:hover) {
    .fc-toolbar-chunk .fc-addEventBtn-button:hover {
        border-color: var(--color-primary-800);
        color: var(--color-white);
        background-color: var(--color-primary-800) !important
    }
}

.fc-header-toolbar .fc-toolbar-chunk:last-child {
    align-items: center !important;
    gap: calc(var(--spacing) * 2) !important;
    display: flex !important
}

.fc-timeGridWeek-view {
    max-height: 100vh !important;
    overflow: auto !important
}

.fc-v-event .fc-event-title-container {
    flex: none !important
}

.fc-v-event .fc-event-main-frame {
    justify-content: space-between !important
}

.fc .fc-event-time {
    margin-top: var(--spacing);
    gap: var(--spacing);
    display: inline-flex
}

.fc .fc-event-time span {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    background-color: #fff9
}

.fc .event-avatars {
    padding-left: calc(var(--spacing) * 1.5);
    align-items: center;
    display: flex
}

@media not all and (min-width:576px) {
    .fc .event-avatars {
        display: none
    }
}

.fc .event-avatars img,
.fc .event-avatars span {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    width: 26px;
    height: 26px;
    margin-left: -6px
}

.fc .event-avatars span {
    color: var(--color-gray-900);
    justify-content: center;
    align-items: center;
    display: flex
}

.fc .fc-event-title {
    font-size: 11px;
    font-weight: 600
}

.fc .fc-event-main {
    padding: 0
}

.fc .fc-timegrid-event {
    background-clip: padding-box;
    border-width: 1px;
    border-radius: 10px;
    margin: 5px 3px;
    padding: 8px 2px;
    box-shadow: 0 1px 2px #0000000a
}

.fc .fc-timegrid-event:before {
    display: none
}

.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-slot-minor {
    padding: calc(var(--spacing) * 3.5) !important
}

@media not all and (min-width:576px) {
    .fc .fc-col-header-cell-cushion {
        font-size: 10px
    }
}

.fc-daygrid-event-dot {
    display: none !important
}

.fc .fc-scrollgrid {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
    border-left-style: var(--tw-border-style);
    border-left-width: 0
}

.fc .fc-scrollgrid td:last-of-type,
.fc .fc-scrollgrid th:last-of-type {
    border-right-style: var(--tw-border-style) !important;
    border-right-width: 0 !important
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    min-height: 70px !important
}

.fc .fc-scrollgrid tr:last-child td,
.fc .fc-scrollgrid-section-body table,
.fc .fc-scrollgrid-section-footer table,
.fc-theme-standard .fc-scrollgrid {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 0 !important
}

.custom-snow-edit .ql-toolbar.ql-snow,
.custom-snow-edit .ql-editor {
    background-color: var(--color-white) !important
}

.custom-snow-edit .ql-editor {
    height: 66vh !important
}

.custom-snow-edit .ql-editor ol li:before {
    --tw-content: none !important;
    content: none !important;
    padding: 0 !important
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus {
    color: var(--color-primary)
}

.hs-overlay {
    z-index: 99999 !important
}

.hs-overlay-backdrop {
    --tw-backdrop-blur: blur(5px);
    -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, );
    z-index: 9999 !important
}

.hs-tooltip-content {
    z-index: 999999 !important
}

#tablesearch .dt-search input {
    margin: 0 !important
}

.glightbox-clean .gslide-title {
    margin-bottom: calc(var(--spacing) * 3) !important;
    font-family: var(--font-family-primary) !important;
    --tw-font-weight: var(--font-weight-bold) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-dark) !important
}

.fc .fc-daygrid-day-frame {
    height: 92px;
    background-color: var(--color-white) !important
}

.fc-fcToday-button {
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important
}

@media(hover:hover) {
    .fc-fcToday-button:hover {
        border-color: var(--color-primary-800);
        color: var(--color-white);
        background-color: var(--color-primary-800) !important
    }
}

.fc-addEvent-button {
    border-radius: var(--radius-lg) !important;
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important
}

@media(hover:hover) {
    .fc-addEvent-button:hover {
        border-color: var(--color-primary-800);
        color: var(--color-white);
        background-color: var(--color-primary-800) !important
    }
}

.fc-direction-ltr .fc-toolbar>*>:not(:first-child) {
    margin-left: 0 !important
}

.fc-h-event .fc-event-main-frame {
    padding-block: calc(var(--spacing) * 1.5);
    padding-inline: var(--spacing) !important;
    flex-direction: column !important
}

.fc-dayGridMonth-view .fc-scroller-liquid-absolute {
    overflow: hidden !important
}

.fc-dayGridDay-view .fc-event {
    width: -moz-fit-content !important;
    width: fit-content !important
}

.fc-timegrid-axis-cushion {
    white-space: nowrap;
    position: relative;
    left: -7px;
    padding: 3px !important
}

.fc-timeGridDay-view .fc-event-today,
.fc-timeGridDay-view .fc-timegrid-event {
    width: -moz-fit-content !important;
    width: fit-content !important
}

.dt-search input {
    border-radius: var(--radius-lg) !important;
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
    border-color: var(--color-border-color) !important;
    background-color: var(--color-white) !important;
    height: 35px !important;
    padding-inline: calc(var(--spacing) * 3) !important;
    padding-block: calc(var(--spacing) * 2) !important;
    color: var(--color-dark) !important
}

.dt-search input:focus {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
}

[data-theme=dark] {
    --color-dark: #e6e6e6;
    --color-light: #131214;
    --color-white: #090212;
    --color-default: #b4b1b8;
    --color-gray-50: #131214;
    --color-gray-100: #2a292b;
    --color-gray-200: #363537;
    --color-gray-300: #414141;
    --color-gray-400: #515151;
    --color-gray-500: #878787;
    --color-gray-600: #b4b1b8;
    --color-gray-700: #c5c2c9;
    --color-gray-800: #d5d3d8;
    --color-gray-900: #e5e1e9;
    --color-gray-950: #f0eef3;
    --color-primary-50: #0c0421;
    --color-primary-100: #12062d;
    --color-primary-200: #1b0e3d;
    --color-primary-300: #271452;
    --color-primary-400: #301367;
    --color-primary-500: #411583;
    --color-primary-600: #5611a8;
    --color-primary-700: #4d0e96;
    --color-primary-800: #440f82;
    --color-primary-900: #310661;
    --color-primary-950: #250551;
    --background-image-linear-gradient-200: #090212;
    --color-border-color: #2a292b;
    --color-success-50: #093a23;
    --color-warning-50: #3c3407;
    --color-danger-50: #380606;
    --color-info-50: #061d39;
    --color-pink-50: #320d21;
    --color-purple-50: #140638;
    --color-orange-50: #3b2407;
    --color-indigo-50: #06133a;
    --color-cyan-50: #07393c;
    --color-teal-50: #0d342b;
    --shadow: 0 0 0 0 #e7e7e778;
    --shadow-sm: 0 0 0 0 #bebebe45;
    --shadow-lg: 0 0 0 #1e20251f;
    --shadow-inset: 0 0 0 0 #e5e5e540 inset;
    --sidebar-bg: #090212;
    --sidebar-border: #1c1c1c;
    --sidebar-menu-item: var(--color-gray-900);
    --sidebar-menu-active-item: #fff;
    --sidebar-icon-item: var(--color-gray-900);
    --sidebar-icon-bg: var(--color-white);
    --sidebar-icon-active-item: var(--color-primary);
    --sidebar-icon-active-bg: var(--color-light);
    --sidebar-title: var(--color-gray-900);
    --sidebar-submenu-item: var(--color-gray-900);
    --sidebar-submenu-active-item: var(--color-primary);
    --topbar-bg: var(--color-light);
    --topbar-item: var(--color-gray-900);
    --topbar-item-bg: var(--color-white);
    --topbar-item-border: var(--color-border-color);
    --topbar-item-active: var(--color-gray-900);
    --topbar-item-active-bg: var(--color-light);
    --topbar-item-active-border: var(--color-light);
    --topbar-input-bg: var(--color-white);
    --topbar-input-border: var(--color-border-color);
    --topbar-input-placeholder: var(--color-gray-400);
    --topbar-input-icon: var(--color-gray-900)
}

[data-theme=dark] .text-white {
    color: #fff
}

[data-theme=dark] .shadow,
[data-theme=dark] .shadow-sm,
[data-theme=dark] .shadow-lg,
[data-theme=dark] .shadow-inset {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
}

[data-theme=dark] .sidebar-twocol.sidebar .sidebar-right .sidebar-logo .logo-normal {
    display: none
}

[data-theme=dark] .sidebar-twocol.sidebar .sidebar-right .sidebar-logo .logo-white {
    display: block !important
}

[data-theme=dark] .btn:hover,
[data-theme=dark] .btn:focus {
    color: var(--color-dark)
}

[data-theme=dark] .dt-search input {
    color: var(--color-dark);
    background-color: #0000 !important
}

[data-theme=dark] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme=dark] .flatpickr-current-month input.cur-year {
    color: var(--color-dark) !important
}

[data-theme=dark] .flatpickr-calendar {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-100);
    background-color: var(--color-white);
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
}

[data-theme=dark] .flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--color-dark) !important
}

[data-theme=dark] .flatpickr-day {
    color: var(--color-gray-600)
}

[data-theme=dark] .flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: var(--color-gray-300)
}

[data-theme=dark] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--color-white) !important
}

[data-theme=dark] .flatpickr-day.today {
    border-style: var(--tw-border-style);
    background-color: var(--color-primary);
    color: var(--color-dark);
    border-width: 0
}

[data-theme=dark] .flatpickr-day.selected,
[data-theme=dark] .flatpickr-day.startRange,
[data-theme=dark] .flatpickr-day.endRange,
[data-theme=dark] .flatpickr-day.selected.inRange,
[data-theme=dark] .flatpickr-day.startRange.inRange,
[data-theme=dark] .flatpickr-day.endRange.inRange,
[data-theme=dark] .flatpickr-day.selected:focus,
[data-theme=dark] .flatpickr-day.startRange:focus,
[data-theme=dark] .flatpickr-day.endRange:focus,
[data-theme=dark] .flatpickr-day.selected:hover,
[data-theme=dark] .flatpickr-day.startRange:hover,
[data-theme=dark] .flatpickr-day.endRange:hover,
[data-theme=dark] .flatpickr-day.selected.prevMonthDay,
[data-theme=dark] .flatpickr-day.startRange.prevMonthDay,
[data-theme=dark] .flatpickr-day.endRange.prevMonthDay,
[data-theme=dark] .flatpickr-day.selected.nextMonthDay,
[data-theme=dark] .flatpickr-day.startRange.nextMonthDay,
[data-theme=dark] .flatpickr-day.endRange.nextMonthDay {
    color: var(--color-dark) !important
}

[data-theme=dark] .dt-length {
    background-color: #0000 !important
}

[data-theme=dark] .dt-length select {
    background-color: var(--color-white) !important
}

[data-theme=dark] .ph-moon {
    opacity: 1
}

[data-theme=dark] .ph-moon:before {
    --tw-content: "";
    content: var(--tw-content)
}

[data-theme=dark] .ph-moon:after {
    --tw-content: "";
    content: var(--tw-content)
}

[data-theme=dark] .ph-moon {
    font-family: Phosphor-Duotone !important
}

[data-theme=dark] textarea,
[data-theme=dark] .choices__input {
    background-color: var(--color-white) !important
}

[data-theme=dark] .choices__inner {
    border-color: var(--color-gray-200)
}

[data-theme=dark] input:where([type=checkbox]),
[data-theme=dark] input:where([type=radio]) {
    background-color: var(--color-white) !important
}

[data-theme=dark] .noUi-target {
    background-color: var(--color-white) !important;
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important
}

[data-theme=dark] .custom-snow-edit .ql-toolbar.ql-snow,
[data-theme=dark] .custom-snow-edit .ql-editor,
[data-theme=dark] .ql-container.ql-snow {
    border-color: var(--color-gray-200) !important
}

[data-theme=dark] .choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    border-color: var(--color-gray-200) !important;
    background-color: var(--color-white) !important
}

[data-theme=dark] .flatpickr-day.prevMonthDay.inRange,
[data-theme=dark] .flatpickr-day.nextMonthDay.inRange,
[data-theme=dark] .flatpickr-day.today.inRange,
[data-theme=dark] .flatpickr-day.prevMonthDay.today.inRange,
[data-theme=dark] .flatpickr-day.nextMonthDay.today.inRange,
[data-theme=dark] .flatpickr-day:hover,
[data-theme=dark] .flatpickr-day.prevMonthDay:hover,
[data-theme=dark] .flatpickr-day.nextMonthDay:hover,
[data-theme=dark].flatpickr-day:focus,
[data-theme=dark] .flatpickr-day.prevMonthDay:focus,
[data-theme=dark] .flatpickr-day.nextMonthDay:focus {
    border-style: var(--tw-border-style) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-dark) !important;
    border-width: 0 !important
}

[data-theme=dark] .flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus,
[data-theme=dark] .flatpickr-time input {
    background-color: var(--color-white) !important
}

[data-theme=dark] .ql-toolbar.ql-snow {
    border-color: var(--color-gray-200) !important
}

@media(hover:hover) {
    [data-theme=dark] .dt-paging .pagination a:hover {
        color: var(--color-dark) !important
    }
}

[data-theme=dark] .flatpickr-calendar.hasTime .flatpickr-time,
[data-theme=dark] .choices[data-type*=select-one] .choices__input,
[data-theme=dark] .choices__list--dropdown,
[data-theme=dark] .choices__list[aria-expanded] {
    border-color: var(--color-border-color) !important
}

[data-theme=dark] .choices__list--dropdown .choices__item,
[data-theme=dark] .choices__list[aria-expanded] .choices__item,
[data-theme=dark] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme=dark] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: var(--color-dark) !important
}

[data-theme=dark] .flatpickr-weekwrapper .flatpickr-weeks .flatpickr-day {
    color: var(--color-gray-300) !important
}

[data-theme=dark] .code,
[data-theme=dark] code {
    background-color: var(--color-white) !important
}

[data-theme=dark] .fc .fc-button-group>.fc-button.fc-button-active,
[data-theme=dark] .fc .fc-button-group>.fc-button {
    color: var(--color-dark) !important
}

@media(hover:hover) {
    [data-theme=dark] .fc .fc-button-group>.fc-button:hover {
        color: var(--color-dark) !important
    }
}

[data-theme=dark] .fc-fcToday-button,
[data-theme=dark] .fc-addEvent-button {
    color: var(--color-dark) !important
}

[data-theme=dark] .fc-theme-standard td,
[data-theme=dark] .fc-theme-standard th {
    border-color: var(--color-gray-200) !important
}

[data-theme=dark] .fc-theme-standard .fc-scrollgrid {
    border-top-color: var(--color-gray-200) !important
}

[data-theme=dark] button[aria-selected=true] {
    background-color: var(--color-primary);
    color: var(--color-dark)
}

[data-theme=dark] pre[class*=language-],
[data-theme=dark] code[class*=language-] {
    background-color: var(--color-light) !important;
    color: var(--color-dark) !important
}

.studio-workspace {
    --studio-radius: 18px;
    --studio-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
}

.studio-workspace ul {
    padding-inline-start: 0
}

.studio-workspace ul li {
    margin-bottom: 0;
    list-style-type: none
}

.studio-panel {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    border-radius: var(--studio-radius);
    flex-direction: column;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden
}

.studio-bar {
    box-shadow: var(--shadow-card)
}

.studio-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
    min-height: 0;
    overflow: hidden auto
}

.studio-scroll::-webkit-scrollbar {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5)
}

.studio-scroll::-webkit-scrollbar-track {
    background-color: #0000
}

.studio-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-300);
    border-radius: 3.40282e38px
}

.studio-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-400) !important
}

.studio-eyebrow {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .09em;
    letter-spacing: .09em;
    color: var(--color-gray-400);
    text-transform: uppercase
}

.studio-avatar {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    border-radius: var(--radius-xl);
    background-image: var(--background-image-primary-gradient);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-avatar-sm {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    border-radius: var(--radius-md);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-glyph {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-chip-live {
    border-color: var(--color-success-50);
    background-color: var(--color-success-50);
    color: var(--color-success)
}

.studio-dot-live {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    background-color: var(--color-success);
    border-radius: 3.40282e38px;
    animation: 2.4s ease-in-out infinite studio-breathe
}

.studio-chip-mini {
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--color-gray-500);
    display: inline-flex
}

.studio-meter-fill {
    border-radius: 3.40282e38px;
    height: 100%;
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
    display: block
}

.studio-btn-primary {
    height: calc(var(--spacing) * 9);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    background-image: var(--background-image-primary-gradient);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    border-width: 0;
    transition: transform .2s, box-shadow .2s, opacity .2s;
    display: inline-flex
}

.studio-btn-primary:hover {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    box-shadow: 0 6px 18px #7a13f047
}

.studio-btn-primary:active {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
}

.studio-btn-primary:disabled {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: not-allowed;
    opacity: .6;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

.studio-btn-ghost {
    height: calc(var(--spacing) * 9);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: inline-flex
}

.studio-btn-ghost:hover,
.studio-btn-ghost.is-on {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-btn-ghost span {
    white-space: nowrap
}

.studio-btn-soft {
    height: calc(var(--spacing) * 9);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: inline-flex
}

.studio-btn-soft:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-btn-mini {
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    flex-shrink: 0;
    transition-duration: .2s;
    display: inline-flex
}

.studio-btn-mini:hover,
.studio-btn-mini.is-on {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-icon-btn {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    cursor: pointer;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition-duration: .2s;
    display: inline-flex
}

.studio-icon-btn:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-icon-btn-sm {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-500);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    justify-content: center;
    align-items: center;
    transition-duration: .2s;
    display: inline-flex
}

.studio-icon-btn-sm:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-segment {
    align-items: center;
    gap: calc(var(--spacing) * .5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * .5);
    display: inline-flex
}

.studio-segment-btn {
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-500);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    border-radius: 9px;
    transition-duration: .2s;
    display: inline-flex
}

.studio-segment-btn:hover {
    color: var(--color-primary)
}

.studio-segment-btn.is-on {
    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow: 0 1px 2px #10182814
}

.studio-actions .studio-btn-primary {
    text-wrap: nowrap
}

.studio-field-group {
    margin-bottom: calc(var(--spacing) * 3)
}

.studio-label {
    margin-bottom: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    display: block
}

.studio-field {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-dark);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: block;
    font-size: 13px !important
}

.studio-field:focus {
    border-color: var(--color-primary);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
    --tw-outline-style: none;
    outline-style: none
}

select.studio-field {
    padding-inline-end: calc(var(--spacing) * 7)
}

textarea.studio-field {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed)
}

.studio-field-xs {
    height: calc(var(--spacing) * 7);
    width: auto;
    padding-block: 0;
    font-size: 11px !important
}

.studio-field-icon {
    padding-inline-start: calc(var(--spacing) * 8)
}

.studio-menu {
    z-index: 30;
    margin-top: calc(var(--spacing) * 2);
    min-width: calc(var(--spacing) * 52);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 1.5);
    box-shadow: 0 12px 32px #1018281f
}

.studio-menu-item {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    font-size: 13px;
    transition-duration: .2s;
    display: flex
}

.studio-menu-item span {
    color: var(--color-gray-400);
    font-size: 10px
}

.studio-menu-item:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-rail {
    transition: width .28s cubic-bezier(.22, 1, .36, 1)
}

@media(max-width:576px) {
    .studio-rail {
        width: calc(var(--spacing) * 27) !important;
        z-index: 11111 !important
    }

    #set-page .studio-rail {
        width: calc(var(--spacing) * 60) !important
    }
}

.studio-rail-full {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex
}

.studio-rail-mini {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    min-height: 0;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    flex-direction: column;
    flex: 1;
    display: none
}

.studio-rail.is-mini {
    width: 60px !important
}

.studio-rail.is-mini .studio-rail-full {
    display: none
}

.studio-rail.is-mini .studio-rail-mini {
    display: flex
}

.studio-rail.is-mini~.studio-resizer[data-studio-resize=rail] {
    display: none
}

.studio-mini-btn {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    cursor: pointer;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition-duration: .2s;
    display: inline-flex
}

.studio-mini-btn:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-mini-btn.is-accent {
    background-image: var(--background-image-primary-gradient);
    color: var(--color-white)
}

.studio-mini-btn.is-accent:hover {
    color: var(--color-white);
    opacity: .9
}

.studio-mini-swatch {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    cursor: pointer;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    opacity: .55;
    border-width: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition-duration: .2s;
    display: inline-flex;
    position: relative
}

.studio-mini-swatch:hover {
    opacity: .85
}

.studio-mini-swatch.is-active {
    opacity: 1
}

.studio-mini-swatch.is-active:before {
    content: "";
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * .5);
    background-color: var(--color-primary);
    inset-inline-start: -8px;
    border-radius: 3.40282e38px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

[data-theme=dark] .studio-mini-btn.is-accent,
[data-theme=dark] .studio-mini-swatch {
    color: #fff
}

.studio-group {
    margin-bottom: calc(var(--spacing) * .5)
}

.studio-group-head {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .07em;
    letter-spacing: .07em;
    color: var(--color-gray-400);
    text-transform: uppercase;
    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));
    --tw-duration: .2s;
    list-style-type: none;
    transition-duration: .2s;
    display: flex
}

.studio-group-head::-webkit-details-marker {
    display: none
}

.studio-group-head:hover {
    background-color: var(--color-light);
    color: var(--color-gray-600)
}

.studio-caret {
    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));
    --tw-duration: .2s;
    font-size: 10px;
    transition-duration: .2s
}

details[open]>.studio-group-head>.studio-caret,
details[open]>.studio-tree-folder>.studio-caret {
    transform: rotate(90deg)
}

[dir=rtl] .studio-caret {
    transform: rotate(180deg)
}

[dir=rtl] details[open]>.studio-group-head>.studio-caret,
[dir=rtl] details[open]>.studio-tree-folder>.studio-caret {
    transform: rotate(90deg)
}

.studio-item {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    text-align: start;
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    transition-duration: .2s;
    display: flex
}

.studio-item:hover {
    background-color: var(--color-light)
}

.studio-item.is-active {
    background-color: var(--color-primary-50)
}

.studio-item.is-active .studio-item-title {
    color: var(--color-primary)
}

.studio-swatch {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-item-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-dark);
    display: block;
    overflow: hidden
}

.studio-item-icon {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
    flex-shrink: 0
}

.studio-turn {
    margin-bottom: calc(var(--spacing) * 5)
}

.studio-turn:last-child {
    margin-bottom: 0
}

.studio-turn-head {
    margin-bottom: calc(var(--spacing) * 1.5);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.studio-turn-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.studio-turn-time {
    color: var(--color-gray-400);
    --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, );
    font-size: 10px
}

.studio-turn-text {
    margin-bottom: calc(var(--spacing) * 2.5);
    --tw-leading: var(--leading-relaxed);
    font-size: 13px;
    line-height: var(--leading-relaxed);
    padding-inline-start: calc(var(--spacing) * 7)
}

.studio-bubble {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-leading: var(--leading-relaxed);
    font-size: 13px;
    line-height: var(--leading-relaxed);
    color: var(--color-dark);
    border-start-start-radius: var(--radius-sm);
    margin-inline-start: calc(var(--spacing) * 7)
}

.studio-card {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    overflow: hidden
}

.studio-turn .studio-card {
    margin-inline-start: calc(var(--spacing) * 7)
}

.studio-card-head {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    display: flex
}

.studio-card-title {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    display: inline-flex
}

.studio-plan-item {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    --tw-leading: var(--leading-relaxed);
    font-size: 12.5px;
    line-height: var(--leading-relaxed);
    display: flex
}

.studio-plan-item b {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.studio-result {
    margin-inline-start: calc(var(--spacing) * 7);
    margin-top: calc(var(--spacing) * 2.5);
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    display: flex
}

.studio-result-file {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: inline-flex
}

.studio-result-file span {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
    --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, )
}

.studio-result-file:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-steps {
    padding: calc(var(--spacing) * 3.5);
    flex-direction: column;
    gap: 0;
    display: flex
}

.studio-step {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3.5);
    display: flex;
    position: relative
}

.studio-step:last-child {
    padding-bottom: 0
}

.studio-step:before {
    content: "";
    background-color: var(--color-border-color);
    inset-inline-start: 5px;
    width: 1px;
    position: absolute;
    top: 14px;
    bottom: 0
}

.studio-step:last-child:before {
    display: none
}

.studio-step-dot {
    z-index: 1;
    margin-top: var(--spacing);
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
    background-color: var(--color-gray-200);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    transition: background-color .3s;
    position: relative
}

.studio-step.is-done .studio-step-dot {
    background-color: var(--color-success)
}

.studio-step.is-active .studio-step-dot {
    background-color: var(--color-primary);
    animation: 1.6s ease-out infinite studio-ring
}

.studio-step-body {
    gap: var(--spacing);
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.studio-step-label {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-400);
    transition: color .3s;
    display: flex
}

.studio-step.is-done .studio-step-label,
.studio-step.is-active .studio-step-label {
    color: var(--color-dark)
}

.studio-step-time {
    --tw-font-weight: var(--font-weight-normal);
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-400);
    --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, );
    flex-shrink: 0
}

.studio-step-note {
    --tw-leading: var(--leading-snug);
    font-size: 11px;
    line-height: var(--leading-snug);
    color: var(--color-gray-400);
    opacity: 0;
    transition: opacity .35s
}

.studio-step.is-done .studio-step-note,
.studio-step.is-active .studio-step-note {
    opacity: 1
}

.studio-step-bar {
    margin-top: calc(var(--spacing) * .5);
    height: calc(var(--spacing) * .5);
    background-color: var(--color-gray-200);
    border-radius: 3.40282e38px;
    width: 100%;
    display: block;
    overflow: hidden
}

.studio-step-fill {
    background-color: var(--color-gray-300);
    border-radius: 3.40282e38px;
    width: 0;
    height: 100%;
    transition: width .5s linear;
    display: block
}

.studio-step.is-done .studio-step-fill {
    background-color: var(--color-success);
    width: 100%
}

.studio-step.is-active .studio-step-fill {
    background-image: var(--background-image-primary-gradient)
}

.studio-composer {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3)
}

.studio-suggests {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 2.5);
    scrollbar-width: none;
    display: flex;
    overflow-x: auto
}

.studio-suggests::-webkit-scrollbar {
    display: none
}

.studio-suggest-label {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .08em;
    letter-spacing: .08em;
    color: var(--color-gray-400);
    text-transform: uppercase;
    flex-shrink: 0;
    padding-inline-end: calc(var(--spacing) * .5)
}

.studio-suggest {
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    align-items: center;
    transition-duration: .2s;
    display: inline-flex
}

.studio-suggest:hover,
.studio-suggest.is-on {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-composer-box {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    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));
    --tw-duration: .2s;
    transition-duration: .2s
}

.studio-composer-box:focus-within {
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 3px #7a13f014
}

.studio-prompt {
    resize: none;
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 3.5);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
    --tw-leading: var(--leading-relaxed);
    font-size: 13.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-dark);
    background-color: #0000;
    border-width: 0;
    max-height: 168px;
    display: block
}

.studio-prompt:focus {
    border-style: var(--tw-border-style);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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);
    --tw-outline-style: none;
    border-width: 0;
    outline-style: none
}

.studio-composer-hint kbd {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 9px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    border-radius: .25rem;
    display: inline-block
}

.studio-actions {
    margin-top: calc(var(--spacing) * 2.5);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    display: flex;
    overflow: auto hidden
}

.studio-actions::-webkit-scrollbar {
    height: var(--spacing)
}

.studio-actions::-webkit-scrollbar-track {
    background-color: #0000
}

.studio-actions::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-300);
    border-radius: 3.40282e38px
}

.studio-actions::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-400) !important
}

.studio-actions>* {
    flex-shrink: 0
}

.studio-toolbar {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    background: #ffffffb8;
    display: flex;
    overflow-x: auto
}

@supports (color:color-mix(in lab, red, red)) {
    .studio-toolbar {
        background: color-mix(in srgb, var(--color-white) 72%, transparent)
    }
}

.studio-toolbar {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none
}

.studio-toolbar::-webkit-scrollbar {
    display: none
}

.studio-toolbar>* {
    flex-shrink: 0
}

.studio-explorer {
    width: calc(var(--spacing) * 48);
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    flex-direction: column;
    flex-shrink: 0;
    display: flex
}

.studio-explorer-head {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    display: flex
}

.studio-explorer-head>span:first-child {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    overflow: hidden
}

.studio-tree-folder {
    margin-inline: calc(var(--spacing) * 1.5);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    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));
    --tw-duration: .2s;
    list-style-type: none;
    transition-duration: .2s;
    display: flex
}

.studio-tree-folder::-webkit-details-marker {
    display: none
}

.studio-tree-folder:hover {
    background-color: var(--color-white)
}

.studio-tree-file {
    margin-inline: calc(var(--spacing) * 1.5);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    text-align: start;
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    width: calc(100% - 12px);
    font-size: 12px;
    transition-duration: .2s;
    display: flex
}

.studio-tree-file i {
    color: var(--color-gray-400);
    flex-shrink: 0;
    font-size: 11px
}

.studio-tree-file:hover {
    background-color: var(--color-white);
    color: var(--color-dark)
}

.studio-tree-file.is-active {
    background-color: var(--color-primary-50);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary)
}

.studio-tree-file.is-active i {
    color: var(--color-primary)
}

.studio-stage {
    transition: flex-basis .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1)
}

.studio-stage-full {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex
}

.studio-stage-mini {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    min-height: 0;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    flex-direction: column;
    flex: 1;
    display: none
}

.studio-stage.is-mini {
    flex: 0 0 52px !important;
    width: 52px !important
}

.studio-stage.is-mini .studio-stage-full {
    display: none
}

.studio-stage.is-mini .studio-stage-mini {
    display: flex
}

.studio-stage-mini-label {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .12em;
    letter-spacing: .12em;
    white-space: nowrap;
    color: var(--color-gray-400);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    flex: 1;
    display: flex;
    transform: rotate(180deg)
}

.studio-mini-btn.is-on {
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-canvas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    position: relative
}

.studio-views {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex
}

.studio-views.is-split {
    flex-direction: column
}

.studio-views.is-split .studio-view-code {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-border-color)
}

.studio-view {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex
}

.studio-view-design {
    padding: calc(var(--spacing) * 4);
    background-color: var(--color-light);
    background-image: radial-gradient(circle at 1px 1px, var(--color-gray-200) 1px, transparent 0);
    background-size: 22px 22px;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: auto
}

#studio-page .studio-view-design,
#web-page .studio-view-design {
    flex: 1;
    align-items: flex-start;
    width: 100%;
    overflow: auto
}

#studio-page .studio-browser,
#web-page .studio-browser {
    width: 800px;
    max-width: 800px
}

.studio-browser {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    transition: max-width .35s cubic-bezier(.22, 1, .36, 1), opacity .3s;
    display: flex;
    overflow: hidden;
    box-shadow: 0 18px 48px #1018281f
}

.studio-browser[data-device=tablet] {
    max-width: 760px
}

.studio-browser[data-device=mobile] {
    max-width: 380px
}

.studio-browser-dots i {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    background-color: var(--color-gray-300);
    border-radius: 3.40282e38px
}

.studio-browser-body {
    transform-origin: 0 0;
    flex: 1;
    min-height: 0;
    overflow: auto
}

.mockapp {
    background: var(--color-light);
    height: 100%;
    min-height: 420px;
    font-size: 11px;
    display: flex
}

.mockapp-nav {
    width: calc(var(--spacing) * 36);
    gap: var(--spacing);
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2.5);
    flex-direction: column;
    flex-shrink: 0;
    display: flex
}

.mockapp-brand {
    margin-bottom: calc(var(--spacing) * 2);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: var(--spacing);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    display: flex
}

.mockapp-brand span {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    background-image: var(--background-image-primary-gradient)
}

.mockapp-link {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-gray-500);
    font-size: 10.5px;
    display: flex
}

.mockapp-link.is-on {
    background-color: var(--color-primary-50);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary)
}

.mockapp-main {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.mockapp-top {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    display: flex
}

.mockapp-search {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    min-width: 0;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    text-wrap: nowrap;
    color: var(--color-gray-400);
    flex: 1;
    font-size: 10px;
    display: flex
}

.mockapp-top-right {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-shrink: 0;
    display: flex
}

.mockapp-pill {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    color: var(--color-gray-500);
    justify-content: center;
    align-items: center;
    font-size: 10px;
    display: inline-flex
}

.mockapp-ava {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    background-image: var(--background-image-primary-gradient);
    border-radius: 3.40282e38px
}

.mockapp-body {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex
}

.mockapp-hero {
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    display: flex
}

.mockapp-hero-label {
    margin-bottom: var(--spacing);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    font-size: 9.5px
}

.mockapp-hero-value {
    margin-bottom: var(--spacing);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, )
}

.mockapp-hero-note {
    align-items: center;
    gap: var(--spacing);
    color: var(--color-success);
    margin-bottom: 0;
    font-size: 9.5px;
    display: flex
}

.mockapp-spark {
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 32);
    align-items: flex-end;
    gap: var(--spacing);
    flex-shrink: 0;
    display: flex
}

.mockapp-spark i {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    background-image: var(--background-image-primary-gradient);
    opacity: .8;
    flex: 1
}

.mockapp-grid {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid
}

.mockapp-tile {
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2.5);
    flex-direction: column;
    display: flex
}

.mockapp-tile span {
    color: var(--color-gray-400);
    font-size: 9.5px
}

.mockapp-tile b {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 15px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, )
}

.mockapp-bar {
    margin-top: calc(var(--spacing) * .5);
    height: var(--spacing);
    background-color: var(--color-gray-200);
    border-radius: 3.40282e38px;
    display: block;
    overflow: hidden
}

.mockapp-bar em {
    background-color: var(--color-primary);
    border-radius: 3.40282e38px;
    height: 100%;
    display: block
}

.mockapp-bar em.is-info {
    background-color: var(--color-info)
}

.mockapp-bar em.is-warn {
    background-color: var(--color-warning)
}

.mockapp-table {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    overflow: hidden
}

.mockapp-tr {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    grid-template-columns: 1fr 1fr 70px 60px;
    font-size: 10px;
    display: grid
}

.mockapp-tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
}

.mockapp-tr.is-head {
    background-color: var(--color-light);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    font-size: 9px
}

.mockapp-badge {
    width: -moz-fit-content;
    width: fit-content;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    border-radius: .25rem;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.mockapp-badge.is-paid {
    background-color: var(--color-success-50);
    color: var(--color-success)
}

.mockapp-badge.is-due {
    background-color: var(--color-warning-50);
    color: var(--color-warning)
}

.mockapp-badge.is-late {
    background-color: var(--color-danger-50);
    color: var(--color-danger)
}

.studio-overlay {
    z-index: 20;
    padding-inline: calc(var(--spacing) * 6);
    text-align: center;
    background: #ffffffd1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .studio-overlay {
        background: color-mix(in srgb, var(--color-white) 82%, transparent)
    }
}

.studio-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.studio-orb {
    margin-bottom: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
    background-image: var(--background-image-primary-gradient);
    border-radius: 3.40282e38px;
    animation: 2.4s ease-in-out infinite studio-orb;
    display: block
}

.studio-overlay-bar {
    height: var(--spacing);
    width: 100%;
    max-width: calc(var(--spacing) * 56);
    background-color: var(--color-gray-200);
    border-radius: 3.40282e38px;
    overflow: hidden
}

.studio-overlay-bar span {
    background-image: var(--background-image-primary-gradient);
    border-radius: 3.40282e38px;
    width: 0;
    height: 100%;
    transition: width .4s linear;
    display: block
}

.studio-tabs {
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    scrollbar-width: none;
    display: flex;
    overflow-x: auto
}

.studio-tabs::-webkit-scrollbar {
    display: none
}

.studio-tab {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    white-space: nowrap;
    color: var(--color-gray-500);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    flex-shrink: 0;
    font-size: 11.5px;
    transition-duration: .2s;
    display: inline-flex
}

.studio-tab:hover {
    background-color: var(--color-white);
    color: var(--color-dark)
}

.studio-tab.is-on {
    background-color: var(--color-white);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-dark);
    box-shadow: 0 1px 2px #10182814
}

.studio-code {
    background-color: var(--color-white);
    font-family: var(--studio-mono);
    display: flex;
    position: relative
}

.studio-code-gutter {
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-block: calc(var(--spacing) * 3.5);
    text-align: end;
    --tw-leading: 1.65;
    white-space: pre;
    color: var(--color-gray-300);
    -webkit-user-select: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding-inline-start: calc(var(--spacing) * 3.5);
    padding-inline-end: calc(var(--spacing) * 2.5);
    font-size: 11px;
    line-height: 1.65
}

.studio-code-pre {
    min-width: 0;
    padding: calc(var(--spacing) * 3.5);
    --tw-leading: 1.65;
    color: var(--color-dark);
    font-size: 11.5px;
    line-height: 1.65;
    font-family: var(--studio-mono);
    -moz-tab-size: 2;
    tab-size: 2;
    background-color: #0000;
    flex: 1;
    margin: 0;
    overflow-x: auto
}

.studio-code .tok-cmt {
    color: #99a1af;
    font-style: italic
}

.studio-code .tok-str {
    color: #007c56
}

.studio-code .tok-kw {
    color: #7a13f0;
    font-weight: 600
}

.studio-code .tok-num {
    color: #d97f06
}

.studio-code .tok-fn {
    color: #155dfc
}

.studio-code .tok-tag {
    color: #e60076
}

.studio-code .tok-attr {
    color: #0092b8
}

[data-theme=dark] .studio-code .tok-cmt {
    color: #6a7282
}

[data-theme=dark] .studio-code .tok-str {
    color: #6aebb5
}

[data-theme=dark] .studio-code .tok-kw {
    color: #c4a9ff
}

[data-theme=dark] .studio-code .tok-num {
    color: #fbc724
}

[data-theme=dark] .studio-code .tok-fn {
    color: #8ec5ff
}

[data-theme=dark] .studio-code .tok-tag {
    color: #fda5d5
}

[data-theme=dark] .studio-code .tok-attr {
    color: #53eafd
}

.studio-quick {
    z-index: 20;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    padding: var(--spacing);
    inset-inline-end: 18px;
    background: #ffffffc7;
    display: flex;
    position: absolute;
    bottom: 18px
}

@supports (color:color-mix(in lab, red, red)) {
    .studio-quick {
        background: color-mix(in srgb, var(--color-white) 78%, transparent)
    }
}

.studio-quick {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px #10182824
}

.studio-quick-btn {
    height: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    transition-duration: .2s;
    display: inline-flex
}

.studio-quick-btn:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.studio-quick-btn.is-accent {
    background-image: var(--background-image-primary-gradient);
    color: var(--color-white)
}

.studio-quick-btn.is-accent:hover {
    color: var(--color-white);
    opacity: .9
}

.studio-drawer {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    flex-direction: column;
    flex-shrink: 0;
    height: 190px;
    min-height: 40px;
    display: flex;
    position: relative
}

.studio-drawer.is-collapsed {
    height: 40px !important
}

.studio-drawer.is-collapsed .studio-drawer-body {
    display: none
}

.studio-drawer.is-collapsed [data-studio-action=drawer-toggle] i {
    transform: rotate(180deg)
}

.studio-drawer-tabs {
    margin-block: calc(var(--spacing) * -1);
    align-items: center;
    gap: calc(var(--spacing) * .5);
    min-width: 0;
    padding-block: var(--spacing);
    scrollbar-width: none;
    flex: 1;
    display: flex;
    overflow-x: auto
}

.studio-drawer-tabs::-webkit-scrollbar {
    display: none
}

.studio-drawer-tab {
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    padding-inline: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-500);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    flex-shrink: 0;
    transition-duration: .2s;
    display: inline-flex
}

.studio-drawer-tab:hover {
    background-color: var(--color-white);
    color: var(--color-dark)
}

.studio-drawer-tab.is-on {
    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow: 0 1px 2px #10182814
}

.studio-drawer-body {
    min-height: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    flex: 1
}

.studio-term {
    --tw-leading: 1.7;
    white-space: pre-wrap;
    color: var(--color-gray-600);
    font-size: 11.5px;
    line-height: 1.7;
    font-family: var(--studio-mono);
    background-color: #0000;
    margin: 0
}

.studio-term-p {
    color: var(--color-primary);
    font-weight: 600
}

.studio-term-c {
    color: var(--color-gray-400)
}

.studio-term-d {
    color: var(--color-gray-500)
}

.studio-term-ok {
    color: var(--color-success)
}

.studio-term-caret {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 1.5);
    background-color: var(--color-primary);
    vertical-align: middle;
    animation: 1.1s step-end infinite studio-caret;
    display: inline-block
}

.studio-log {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.studio-log li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    font-size: 11.5px;
    display: flex
}

.studio-log-time {
    color: var(--color-gray-400);
    --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, );
    font-size: 10px;
    font-family: var(--studio-mono);
    flex-shrink: 0
}

.studio-log-level {
    width: calc(var(--spacing) * 11);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: .25rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-log-level.is-info {
    background-color: var(--color-info-50);
    color: var(--color-info)
}

.studio-log-level.is-ok {
    background-color: var(--color-success-50);
    color: var(--color-success)
}

.studio-log-level.is-warn {
    background-color: var(--color-warning-50);
    color: var(--color-warning)
}

.studio-tasks {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.studio-tasks li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-gray-500);
    font-size: 12px;
    display: flex
}

.studio-tasks li i {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-300)
}

.studio-tasks li.is-done i {
    color: var(--color-success)
}

.studio-tasks li.is-active {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-dark)
}

.studio-tasks li.is-active i {
    color: var(--color-primary)
}

.studio-build-out {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.studio-build-out li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    font-size: 11.5px;
    font-family: var(--studio-mono);
    display: flex
}

.studio-build-out li b {
    color: var(--color-dark);
    --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, );
    margin-inline-start: auto
}

.studio-issues {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex
}

.studio-issues li {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-relaxed);
    font-size: 11.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    display: flex
}

.studio-issues li b {
    color: var(--color-dark)
}

.studio-issues code,
.studio-suggestions code {
    background-color: var(--color-primary-50);
    padding-inline: var(--spacing);
    color: var(--color-primary);
    font-size: 10.5px;
    font-family: var(--studio-mono);
    border-radius: .25rem;
    padding-block: 1px
}

.studio-issue-tag.is-warn {
    background-color: var(--color-warning-50);
    color: var(--color-warning)
}

.studio-git {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.studio-git li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    font-size: 11.5px;
    font-family: var(--studio-mono);
    display: flex
}

.studio-git-tag.is-add {
    background-color: var(--color-success-50);
    color: var(--color-success)
}

.studio-git-tag.is-mod {
    background-color: var(--color-info-50);
    color: var(--color-info)
}

.studio-git-tag.is-del {
    background-color: var(--color-danger-50);
    color: var(--color-danger)
}

.studio-notes {
    gap: calc(var(--spacing) * 2);
    display: grid
}

@media(min-width:576px) {
    .studio-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(min-width:1200px) {
    .studio-notes {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.studio-notes article {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 2.5)
}

.studio-switches {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex
}

.studio-switch {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 2.5);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: flex
}

.studio-switch:hover {
    border-color: var(--color-primary-200)
}

.studio-switch>span:first-child {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.studio-switch b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.studio-switch small {
    --tw-leading: var(--leading-snug);
    font-size: 10.5px;
    line-height: var(--leading-snug);
    color: var(--color-gray-400)
}

.studio-switch-track {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 8);
    background-color: var(--color-gray-200);
    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));
    --tw-duration: .2s;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    transition-duration: .2s;
    display: block;
    position: relative
}

.studio-switch-track:after {
    content: "";
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    background-color: var(--color-white);
    top: 50%;
    border-radius: 3.40282e38px;
    transition: transform .2s;
    position: absolute;
    inset-inline-start: 3px;
    transform: translateY(-50%);
    box-shadow: 0 1px 2px #10182833
}

.studio-switch input:checked~.studio-switch-track {
    background-color: var(--color-primary)
}

.studio-switch input:checked~.studio-switch-track:after {
    transform: translateY(-50%)translate(12px)
}

[dir=rtl] .studio-switch input:checked~.studio-switch-track:after {
    transform: translateY(-50%)translate(-12px)
}

.studio-switch input:focus-visible~.studio-switch-track {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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);
    --tw-ring-color: var(--color-primary);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
}

.studio-score {
    align-items: center;
    -moz-column-gap: calc(var(--spacing) * 2);
    column-gap: calc(var(--spacing) * 2);
    grid-template-columns: 1fr auto;
    display: grid
}

.studio-score span {
    color: var(--color-gray-600);
    font-size: 11.5px
}

.studio-score b {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark)
}

.studio-score i {
    margin-top: var(--spacing);
    grid-column: span 2/span 2
}

.studio-estimates {
    margin-top: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
}

.studio-estimates>div {
    gap: calc(var(--spacing) * .5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 2.5);
    flex-direction: column;
    display: flex
}

.studio-estimates span {
    color: var(--color-gray-400);
    font-size: 10px
}

.studio-estimates b {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, )
}

.studio-node {
    border-radius: var(--radius-lg);
    background-color: var(--color-primary);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-node.is-root {
    background-image: var(--background-image-primary-gradient)
}

.studio-node.is-soft {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    color: var(--color-gray-700)
}

.studio-node.is-leaf {
    background-color: var(--color-info);
    color: var(--color-white)
}

[data-theme=dark] .studio-btn-primary,
[data-theme=dark] .studio-avatar,
[data-theme=dark] .studio-avatar-sm,
[data-theme=dark] .studio-swatch,
[data-theme=dark] .studio-node,
[data-theme=dark] .studio-quick-btn.is-accent {
    color: #fff
}

.studio-deps {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex
}

.studio-deps li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-gray-600);
    grid-template-columns: 84px 1fr 34px;
    font-size: 11.5px;
    display: grid
}

.studio-deps li b {
    text-align: end;
    color: var(--color-gray-400);
    --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, );
    font-size: 10px
}

.studio-suggestions {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex
}

.studio-suggestions li {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 2.5);
    display: flex
}

.studio-suggestions li>span {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.studio-suggestions b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.studio-suggestions small {
    --tw-leading: var(--leading-snug);
    font-size: 10.5px;
    line-height: var(--leading-snug);
    color: var(--color-gray-400)
}

.studio-checklist {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.studio-checklist li {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-relaxed);
    font-size: 11.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    display: flex
}

.studio-checklist li i {
    margin-top: calc(var(--spacing) * .5);
    color: var(--color-gray-300);
    flex-shrink: 0;
    font-size: 11px
}

.studio-checklist li.is-done i {
    color: var(--color-success)
}

.studio-versions {
    flex-direction: column;
    display: flex
}

.studio-version {
    gap: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
    display: flex;
    position: relative
}

.studio-version:before {
    content: "";
    background-color: var(--color-border-color);
    inset-inline-start: 4px;
    width: 1px;
    position: absolute;
    top: 12px;
    bottom: 0
}

.studio-version:last-child {
    padding-bottom: 0
}

.studio-version:last-child:before {
    display: none
}

.studio-version-mark {
    z-index: 1;
    margin-top: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    background-color: var(--color-gray-300);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    position: relative
}

.studio-version.is-current .studio-version-mark {
    background-color: var(--color-primary);
    box-shadow: 0 0 0 3px #7a13f026
}

.studio-version-body {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    min-width: 0;
    padding: calc(var(--spacing) * 2.5);
    flex: 1
}

.studio-version.is-current .studio-version-body {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.studio-version-top {
    margin-bottom: var(--spacing);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.studio-version-top b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.studio-version-actions {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    display: flex
}

.studio-compare {
    margin-top: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    overflow: hidden
}

.studio-diff {
    padding: calc(var(--spacing) * 2.5);
    --tw-leading: 1.7;
    white-space: pre-wrap;
    font-size: 10.5px;
    line-height: 1.7;
    font-family: var(--studio-mono);
    margin: 0;
    overflow-x: auto
}

.studio-diff .is-meta {
    color: var(--color-gray-400)
}

.studio-diff .is-add {
    color: var(--color-success)
}

.studio-diff .is-del {
    color: var(--color-danger)
}

.studio-resizer {
    width: calc(var(--spacing) * 1.5);
    cursor: col-resize;
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    position: relative
}

@media not all and (min-width:1200px) {
    .studio-resizer {
        display: none
    }
}

.studio-resizer {
    transition: background-color .2s
}

.studio-resizer:after {
    content: "";
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * .5);
    background-color: var(--color-border-color);
    border-radius: 3.40282e38px;
    transition: background-color .2s, height .2s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.studio-resizer:hover:after,
.studio-resizer:focus-visible:after,
.studio-resizer.is-dragging:after {
    height: calc(var(--spacing) * 14);
    background-color: var(--color-primary)
}

.studio-resizer:focus-visible {
    --tw-outline-style: none;
    outline-style: none
}

.studio-resizer-y {
    z-index: 10;
    margin-top: calc(var(--spacing) * -.5);
    height: calc(var(--spacing) * 1.5);
    cursor: row-resize;
    inset-inline: 0;
    position: absolute;
    top: 0
}

@media not all and (min-width:1200px) {
    .studio-resizer-y {
        display: none
    }
}

.studio-resizer-y:after {
    content: "";
    height: calc(var(--spacing) * .5);
    width: calc(var(--spacing) * 9);
    background-color: #0000;
    border-radius: 3.40282e38px;
    transition: background-color .2s, width .2s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.studio-resizer-y:hover:after,
.studio-resizer-y:focus-visible:after,
.studio-resizer-y.is-dragging:after {
    width: calc(var(--spacing) * 14);
    background-color: var(--color-primary)
}

.studio-resizing,
.studio-resizing * {
    -webkit-user-select: none;
    user-select: none;
    cursor: col-resize !important
}

.studio-resizing-y,
.studio-resizing-y * {
    -webkit-user-select: none;
    user-select: none;
    cursor: row-resize !important
}

.studio-backdrop {
    z-index: 1000;
    background-color: #10182866;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

@supports (color:color-mix(in lab, red, red)) {
    .studio-backdrop {
        background-color: color-mix(in oklab, var(--color-dark) 40%, transparent)
    }
}

.studio-backdrop {
    --tw-backdrop-blur: blur(2px);
    -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:1400px) {
    .studio-backdrop {
        display: none
    }
}

.studio-toast {
    z-index: 1100;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    background-color: var(--color-dark);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    inset-inline-end: 24px;
    animation: .35s cubic-bezier(.22, 1, .36, 1) both studio-rise;
    display: flex;
    position: fixed;
    bottom: 24px;
    box-shadow: 0 12px 32px #10182847
}

[data-theme=dark] .studio-toast {
    background-color: var(--color-gray-200);
    color: var(--color-dark)
}

.studio-panel.is-hidden,
.studio-resizer.is-hidden,
.studio-explorer.is-hidden {
    display: none
}

.studio-view.hidden,
.studio-blank-hero.hidden,
.studio-overlay.hidden,
.studio-toast[hidden],
.studio-backdrop[hidden] {
    display: none !important
}

@media(max-width:575.98px) {
    .studio-hide-sm {
        display: none !important
    }
}

@media(max-width:1199.98px) {
    .studio-hide-mobile {
        display: none !important
    }
}

@media(max-width:767.98px) {
    .studio-hide-md {
        display: none !important
    }
}

@media(max-width:1399.98px) {
    .studio-hide-narrow {
        display: none !important
    }
}

@media(min-width:1200px) {
    .studio-hide-desk {
        display: none !important
    }
}

@media(min-width:1400px) {
    .studio-hide-wide {
        display: none !important
    }
}

@keyframes studio-ring {
    0% {
        box-shadow: 0 0 #7a13f061
    }

    70% {
        box-shadow: 0 0 0 7px #7a13f000
    }

    to {
        box-shadow: 0 0 #7a13f000
    }
}

@keyframes studio-breathe {

    0%,
    to {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .45;
        transform: scale(.82)
    }
}

@keyframes studio-caret {

    0%,
    49% {
        opacity: 1
    }

    50%,
    to {
        opacity: 0
    }
}

@keyframes studio-rise {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes studio-orb {

    0%,
    to {
        opacity: 1;
        border-radius: 999px;
        transform: scale(1)
    }

    50% {
        opacity: .78;
        border-radius: 42%;
        transform: scale(1.14)
    }
}

.studio-rise {
    animation: .4s cubic-bezier(.22, 1, .36, 1) both studio-rise
}

@media(prefers-reduced-motion:reduce) {

    .studio-dot-live,
    .studio-orb,
    .studio-term-caret,
    .studio-step.is-active .studio-step-dot,
    .studio-rise,
    .studio-toast {
        animation: none !important
    }
}

@media(max-width:1399.98px) {
    .studio-assist {
        z-index: 1001;
        border-block-style: var(--tw-border-style);
        top: 0;
        bottom: 0;
        border-block-width: 0;
        border-radius: 0;
        width: 300px;
        max-width: 86vw;
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
        position: fixed;
        inset-inline-end: 0;
        transform: translate(102%)
    }

    [dir=rtl] .studio-assist {
        transform: translate(-102%)
    }

    .studio-assist-open .studio-assist {
        transform: none !important
    }

    .studio-resizer[data-studio-resize=assist] {
        display: none
    }

    .studio-assist.is-hidden {
        display: flex
    }
}

@media(max-width:1199.98px) {
    .studio-rail {
        z-index: 1001;
        border-block-style: var(--tw-border-style);
        top: 0;
        bottom: 0;
        border-block-width: 0;
        border-radius: 0;
        width: 292px;
        max-width: 86vw;
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
        position: fixed;
        inset-inline-start: 0;
        transform: translate(-102%)
    }

    [dir=rtl] .studio-rail {
        transform: translate(102%)
    }

    .studio-rail-open .studio-rail {
        transform: none !important
    }

    .studio-rail.is-hidden {
        display: flex
    }

    .studio-rail.is-mini {
        z-index: 9999;
        width: 292px !important
    }

    .studio-rail.is-mini .studio-rail-full {
        display: flex
    }

    .studio-rail.is-mini .studio-rail-mini {
        display: none
    }

    .studio-stage.is-mini {
        flex: none !important;
        width: 100% !important
    }

    .studio-stage.is-mini .studio-stage-full {
        display: flex
    }

    .studio-stage.is-mini .studio-stage-mini {
        display: none
    }

    .studio-stage {
        height: 640px;
        flex: none !important;
        width: 100% !important
    }

    .studio-build {
        min-height: 560px
    }
}

@media(max-width:767.98px) {
    .studio-explorer {
        width: calc(var(--spacing) * 40)
    }

    .studio-quick {
        inset-inline-end: 10px;
        bottom: 10px
    }

    .studio-stage {
        height: 560px
    }
}

.studio-help {
    margin-top: var(--spacing);
    --tw-leading: var(--leading-snug);
    font-size: 10.5px;
    line-height: var(--leading-snug);
    color: var(--color-gray-400);
    margin-bottom: 0
}

.studio-range {
    height: calc(var(--spacing) * 1.5);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-gray-200);
    width: 100%;
    accent-color: var(--color-primary);
    border-radius: 3.40282e38px
}

.studio-range:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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);
    --tw-ring-color: var(--color-primary);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none
}

.studio-pill {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--color-gray-600);
    align-items: center;
    display: inline-flex
}

.studio-pill.is-ok {
    border-color: var(--color-success-50);
    background-color: var(--color-success-50);
    color: var(--color-success)
}

.studio-pill.is-warn {
    border-color: var(--color-warning-50);
    background-color: var(--color-warning-50);
    color: var(--color-warning)
}

.studio-pill.is-info {
    border-color: var(--color-info-50);
    background-color: var(--color-info-50);
    color: var(--color-info)
}

.studio-history {
    gap: var(--spacing);
    flex-direction: column;
    padding-inline-start: 0;
    display: flex
}

.studio-history li {
    margin-bottom: 0;
    list-style-type: none
}

.studio-history-row {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: flex
}

.studio-history-row:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.studio-history-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-dark);
    align-items: center;
    font-size: 11.5px;
    display: flex;
    overflow: hidden
}

.studio-history-meta {
    color: var(--color-gray-400);
    --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, );
    flex-shrink: 0;
    font-size: 10px
}

.studio-vars {
    gap: var(--spacing);
    flex-direction: column;
    display: flex
}

.studio-vars li {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    display: flex
}

.studio-vars code {
    color: var(--color-primary);
    font-size: 10.5px;
    font-family: var(--studio-mono)
}

.studio-vars span {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-gray-500);
    font-size: 11px;
    overflow: hidden
}

.studio-view-doc {
    background-color: var(--color-light);
    position: relative;
    overflow: hidden
}

.studio-paper {
    width: 100%;
    min-height: 0;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    flex: 1;
    overflow: auto
}

@media(min-width:576px) {
    .studio-paper {
        padding-inline: calc(var(--spacing) * 6)
    }
}

.studio-paper {
    scrollbar-width: thin;
    scroll-behavior: smooth
}

.studio-paper>div:first-child {
    width: 650px
}

.studio-doc {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    width: 68ch;
    max-width: 68ch;
    padding: calc(var(--spacing) * 6);
    margin-inline: auto
}

@media(min-width:576px) {
    .studio-doc {
        padding: calc(var(--spacing) * 8)
    }
}

.studio-doc {
    box-shadow: 0 18px 48px #1018281a
}

.studio-doc-meta {
    margin-bottom: calc(var(--spacing) * 5);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-bottom: calc(var(--spacing) * 4);
    flex-wrap: wrap;
    display: flex
}

.studio-doc h1 {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-leading: var(--leading-tight);
    font-size: 26px;
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
    color: var(--color-gray-900)
}

.studio-doc h2 {
    margin-top: calc(var(--spacing) * 7);
    margin-bottom: calc(var(--spacing) * 2.5);
    --tw-leading: var(--leading-snug);
    font-size: 18px;
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900)
}

.studio-doc h3 {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-snug);
    font-size: 15px;
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900)
}

.studio-doc p {
    margin-bottom: calc(var(--spacing) * 3.5);
    --tw-leading: 1.75;
    color: var(--color-default);
    font-size: 13.5px;
    line-height: 1.75
}

.studio-doc ul,
.studio-doc ol {
    margin-bottom: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    padding-inline-start: calc(var(--spacing) * 5);
    display: flex
}

.studio-doc li {
    --tw-leading: 1.7;
    color: var(--color-default);
    font-size: 13.5px;
    line-height: 1.7;
    list-style-type: disc
}

.studio-doc ol li {
    list-style-type: decimal
}

.studio-doc blockquote {
    margin-block: calc(var(--spacing) * 4);
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 2px;
    border-color: var(--color-primary);
    padding-block: calc(var(--spacing) * 2);
    --tw-leading: 1.7;
    color: var(--color-gray-700);
    padding-inline-start: calc(var(--spacing) * 4);
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.7
}

.studio-doc hr {
    margin-block: calc(var(--spacing) * 6);
    border-style: var(--tw-border-style);
    background-color: var(--color-border-color);
    border-width: 0;
    height: 1px
}

.studio-doc a {
    color: var(--color-primary);
    text-underline-offset: 2px;
    text-decoration-line: underline
}

.studio-doc-scroll {
    margin-inline: calc(var(--spacing) * -1);
    margin-bottom: calc(var(--spacing) * 4);
    padding-inline: var(--spacing);
    scrollbar-width: thin;
    overflow-x: auto
}

.studio-doc table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px
}

.studio-doc th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--color-dark)
}

.studio-doc td {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    vertical-align: top;
    color: var(--color-default)
}

.studio-doc-pre {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 3.5);
    --tw-leading: 1.7;
    font-size: 11.5px;
    line-height: 1.7;
    font-family: var(--studio-mono);
    -moz-tab-size: 2;
    tab-size: 2;
    overflow-x: auto
}

.studio-doc code {
    font-family: var(--studio-mono)
}

.studio-doc-pre code {
    color: var(--color-dark)
}

.studio-callout {
    margin-block: calc(var(--spacing) * 4);
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    padding: calc(var(--spacing) * 3.5);
    border-width: 1px;
    display: flex
}

.studio-callout b {
    margin-bottom: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    display: block
}

.studio-callout p {
    --tw-leading: var(--leading-relaxed) !important;
    font-size: 12.5px !important;
    line-height: var(--leading-relaxed) !important;
    margin-bottom: 0 !important
}

.studio-callout>i {
    margin-top: calc(var(--spacing) * .5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    flex-shrink: 0
}

.studio-callout.is-info {
    border-color: var(--color-info-50);
    background-color: var(--color-info-50)
}

.studio-callout.is-info>i {
    color: var(--color-info)
}

.studio-callout.is-warn {
    border-color: var(--color-warning-50);
    background-color: var(--color-warning-50)
}

.studio-callout.is-warn>i {
    color: var(--color-warning)
}

.studio-flow {
    margin-block: calc(var(--spacing) * 4);
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 3.5);
    flex-wrap: wrap;
    display: flex
}

.studio-flow>i {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
    flex-shrink: 0
}

[dir=rtl] .studio-flow>i {
    transform: scaleX(-1)
}

.studio-flow-node {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    align-items: center;
    display: inline-flex
}

.studio-flow-node.is-accent {
    border-style: var(--tw-border-style);
    background-image: var(--background-image-primary-gradient);
    color: var(--color-white);
    border-width: 0
}

[data-theme=dark] .studio-flow-node.is-accent {
    color: #fff
}

.studio-formula {
    margin-block: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-family: var(--studio-mono);
    color: var(--color-dark) !important;
    font-size: 17px !important
}

.studio-figure {
    margin-block: calc(var(--spacing) * 5)
}

.studio-figure figcaption {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
    --tw-leading: var(--leading-relaxed);
    font-size: 11px;
    line-height: var(--leading-relaxed);
    color: var(--color-gray-500)
}

.studio-bars {
    height: calc(var(--spacing) * 36);
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 3.5);
    display: flex
}

.studio-bars>span {
    justify-content: flex-end;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    flex: 1;
    height: 100%;
    display: flex
}

.studio-bars i {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    background-color: #7a13f040;
    width: 100%;
    display: block
}

@supports (color:color-mix(in lab, red, red)) {
    .studio-bars i {
        background-color: color-mix(in oklab, var(--color-primary) 25%, transparent)
    }
}

.studio-bars i {
    transition: height .5s cubic-bezier(.22, 1, .36, 1)
}

.studio-bars i.is-accent {
    background-image: var(--background-image-primary-gradient)
}

.studio-bars em {
    color: var(--color-gray-400);
    --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, );
    font-size: 9.5px;
    font-style: normal
}

.studio-artifact {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 3.5)
}

.studio-vs-head {
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    flex-direction: column;
    flex-shrink: 0;
    display: flex
}

@media(min-width:576px) {
    .studio-vs-head {
        flex-direction: row;
        align-items: center
    }
}

.studio-vs {
    gap: calc(var(--spacing) * 2.5);
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    display: grid
}

.studio-vs-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3.5);
    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));
    --tw-duration: .2s;
    flex-direction: column;
    transition-duration: .2s;
    display: flex
}

.studio-vs-card:hover {
    border-color: var(--color-primary-200)
}

.studio-vs-card.is-best {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.studio-vs-metrics {
    margin-bottom: calc(var(--spacing) * 2.5);
    gap: calc(var(--spacing) * 1.5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid
}

.studio-vs-metrics>div {
    gap: calc(var(--spacing) * .5);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.studio-vs-metrics dt {
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    font-size: 9px;
    overflow: hidden
}

.studio-vs-metrics dd {
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, );
    overflow: hidden
}

.studio-vs-note {
    margin-bottom: var(--spacing);
    align-items: flex-start;
    gap: calc(var(--spacing) * 1.5);
    --tw-leading: var(--leading-snug);
    font-size: 11px;
    line-height: var(--leading-snug);
    color: var(--color-gray-600);
    display: flex
}

.studio-vs-note:last-child {
    margin-bottom: 0
}

.studio-vs-note i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 10px
}

.studio-blank-hero {
    min-height: 0;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow-y: auto
}

.studio-hero-soft {
    fill: var(--color-light);
    stroke: var(--color-border-color);
    stroke-width: 1.5px
}

.studio-hero-card {
    fill: var(--color-white);
    stroke: var(--color-primary);
    stroke-width: 1.5px
}

.studio-hero-line {
    fill: var(--color-gray-200)
}

.studio-hero-accent {
    fill: var(--color-primary)
}

.studio-hero-ring {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5px;
    opacity: .45
}

.studio-hero-tick {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.4px;
    stroke-linecap: round;
    stroke-linejoin: round
}

.studio-browser[data-device=laptop] {
    max-width: 1120px
}

.studio-stagenav {
    width: calc(var(--spacing) * 48);
    border-inline-end-style: var(--tw-border-style);
    border-inline-end-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    flex-direction: column;
    flex-shrink: 0;
    display: flex
}

@media(max-width:576px) {
    .studio-stagenav {
        width: calc(var(--spacing) * 27) !important
    }
}

.studio-stagenav-head {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    display: flex
}

.studio-outline-item {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    text-align: start;
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    background-color: #0000;
    border-width: 0;
    font-size: 12px;
    transition-duration: .2s;
    display: flex
}

.studio-outline-item i {
    color: var(--color-gray-400);
    flex-shrink: 0;
    font-size: 11px
}

.studio-outline-item:hover {
    background-color: var(--color-white);
    color: var(--color-dark)
}

.studio-outline-item.is-active {
    background-color: var(--color-primary-50);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary)
}

.studio-outline-item.is-active i {
    color: var(--color-primary)
}

@media not all and (min-width:576px) {

    .report-stage,
    #studio-stage-body {
        flex-direction: column
    }

    .report-stage .studio-stagenav,
    #studio-stage-body .studio-explorer {
        width: 100% !important
    }

    .report-stage .studio-canvas,
    #studio-stage-body .studio-canvas {
        height: calc(var(--spacing) * 120);
        flex: auto
    }

    .report-stage .studio-view {
        flex: auto
    }

    #rpt-stage.studio-stage,
    #web-stage.studio-stage,
    #inv-stage.studio-stage,
    #chat-stage.studio-stage,
    .studio-stage {
        height: auto
    }
}

.studio-structure {
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3.5);
    flex-direction: column;
    display: flex
}

.studio-structure-row {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2.5);
    display: flex
}

.studio-structure-row.is-active {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.studio-structure-glyph {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    background-color: var(--color-light);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.studio-structure-row.is-active .studio-structure-glyph {
    background-color: var(--color-white);
    color: var(--color-primary)
}

.studio-structure-body {
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    min-width: 0;
    display: flex
}

.studio-structure-body b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.studio-structure-body small {
    color: var(--color-gray-400);
    font-size: 10.5px
}

.sitemock {
    --sm-bg: #fff;
    --sm-surface: #f7f8fb;
    --sm-ink: #10131c;
    --sm-muted: #626879;
    --sm-line: #e6e9f0;
    --sm-accent: #7a13f0;
    --sm-accent-soft: #f3ecff;
    --tw-leading: var(--leading-relaxed);
    min-height: 100%;
    font-size: 11px;
    line-height: var(--leading-relaxed);
    background: var(--sm-bg);
    color: var(--sm-muted);
    display: block
}

.sitemock.is-dark {
    --sm-bg: #0c0d13;
    --sm-surface: #14161f;
    --sm-ink: #eef0f6;
    --sm-muted: #9aa1b4;
    --sm-line: #232634;
    --sm-accent: #aa7dff;
    --sm-accent-soft: #1c1330
}

.sitemock [data-web-section] {
    transition: opacity .5s, transform .5s cubic-bezier(.22, 1, .36, 1)
}

.sitemock.is-building [data-web-section] {
    opacity: 0;
    transform: translateY(14px)
}

.sitemock.is-building [data-web-section].is-revealed {
    opacity: 1;
    transform: none
}

.sitemock-inner {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4)
}

@media(min-width:576px) {
    .sitemock-inner {
        padding-inline: calc(var(--spacing) * 7)
    }
}

.sitemock-eyebrow {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .12em;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sm-accent);
    background: var(--sm-accent-soft);
    border-radius: 3.40282e38px;
    display: inline-flex
}

.sitemock-h2 {
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-leading: var(--leading-tight);
    font-size: 17px;
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
    color: var(--sm-ink)
}

.sitemock-sub {
    margin-bottom: calc(var(--spacing) * 4);
    color: var(--sm-muted);
    font-size: 10.5px
}

.sitemock-center {
    text-align: center
}

.sitemock-center .sitemock-sub {
    max-width: 34ch;
    margin-inline: auto
}

.sitemock-nav {
    z-index: 10;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    display: flex;
    position: sticky;
    top: 0
}

@media(min-width:576px) {
    .sitemock-nav {
        padding-inline: calc(var(--spacing) * 7)
    }
}

.sitemock-nav {
    background: var(--sm-bg)
}

@supports (color:color-mix(in lab, red, red)) {
    .sitemock-nav {
        background: color-mix(in srgb, var(--sm-bg) 82%, transparent)
    }
}

.sitemock-nav {
    border-bottom: 1px solid var(--sm-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.sitemock-brand {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--sm-ink);
    flex-shrink: 0;
    display: flex
}

.sitemock-brand span {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--sm-accent), #ff1ade)
}

.sitemock-links {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-inline-start: auto;
    display: flex
}

@media not all and (min-width:768px) {
    .sitemock-links {
        display: none
    }
}

.sitemock-links a {
    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));
    --tw-duration: .2s;
    color: var(--sm-muted);
    font-size: 10px;
    text-decoration-line: none;
    transition-duration: .2s
}

.sitemock-links a:hover,
.sitemock-links a.is-on {
    color: var(--sm-accent)
}

.sitemock-cta {
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background: var(--sm-accent);
    flex-shrink: 0;
    align-items: center;
    display: inline-flex
}

.sitemock-cta.is-ghost {
    color: var(--sm-ink);
    border: 1px solid var(--sm-line);
    background: 0 0
}

.sitemock-hero {
    gap: calc(var(--spacing) * 5);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 8);
    display: grid
}

@media(min-width:576px) {
    .sitemock-hero {
        padding-inline: calc(var(--spacing) * 7)
    }
}

@media(min-width:992px) {
    .sitemock-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center
    }
}

.sitemock-hero {
    background: radial-gradient(120% 90% at 12% 0%, var(--sm-accent-soft) 0%, transparent 62%)
}

.sitemock-hero h1 {
    margin-block: calc(var(--spacing) * 2.5);
    --tw-leading: 1.1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 14px;
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
    --tw-tracking: -.02em;
    letter-spacing: -.02em
}

@media(min-width:576px) {
    .sitemock-hero h1 {
        font-size: 26px
    }
}

.sitemock-hero h1 {
    color: var(--sm-ink)
}

.sitemock-hero p {
    margin-bottom: calc(var(--spacing) * 4);
    max-width: 38ch;
    color: var(--sm-muted);
    font-size: 11px
}

.sitemock-stats {
    gap: calc(var(--spacing) * 5);
    flex-wrap: wrap;
    display: flex
}

.sitemock-stats div {
    flex-direction: column;
    display: flex
}

.sitemock-stats b {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 15px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    --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, );
    color: var(--sm-ink)
}

.sitemock-stats span {
    margin-top: var(--spacing);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--sm-muted);
    font-size: 9px
}

.sitemock-visual {
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 3);
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px #10131c1f
}

.sitemock-visual-bar {
    margin-bottom: calc(var(--spacing) * 2.5);
    align-items: center;
    gap: var(--spacing);
    display: flex
}

.sitemock-visual-bar i {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    background: var(--sm-line);
    border-radius: 3.40282e38px
}

.sitemock-visual-grid {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid
}

.sitemock-visual-grid span {
    height: calc(var(--spacing) * 10);
    border-radius: var(--radius-lg);
    background: var(--sm-bg);
    border: 1px solid var(--sm-line);
    display: block
}

.sitemock-visual-grid span:first-child {
    height: calc(var(--spacing) * 10);
    background: linear-gradient(135deg, var(--sm-accent), #ff1ade);
    border: 0;
    grid-column: span 2/span 2
}

.sitemock-visual-lines {
    margin-top: calc(var(--spacing) * 2);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.sitemock-visual-lines i {
    height: calc(var(--spacing) * 1.5);
    background: var(--sm-line);
    border-radius: 3.40282e38px;
    display: block
}

.sitemock-visual-lines i:nth-child(2) {
    width: 72%
}

.sitemock-visual-lines i:nth-child(3) {
    width: 48%
}

.sitemock-logos {
    justify-content: center;
    align-items: center;
    -moz-column-gap: calc(var(--spacing) * 7);
    column-gap: calc(var(--spacing) * 7);
    row-gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    border-block: 1px solid var(--sm-line);
    background: var(--sm-surface);
    flex-wrap: wrap;
    display: flex
}

.sitemock-logos span {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    opacity: .45;
    color: var(--sm-ink)
}

.sitemock-band {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 7)
}

@media(min-width:576px) {
    .sitemock-band {
        padding-inline: calc(var(--spacing) * 7)
    }
}

.sitemock-band.is-surface {
    background: var(--sm-surface)
}

.sitemock-card {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3.5);
    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));
    --tw-duration: .2s;
    background: var(--sm-bg);
    border: 1px solid var(--sm-line);
    transition-duration: .2s
}

.sitemock-card:hover {
    --tw-translate-y: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    box-shadow: 0 12px 28px #10131c1a
}

.sitemock-card b {
    margin-bottom: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--sm-ink);
    display: block
}

.sitemock-card p {
    color: var(--sm-muted);
    margin-bottom: 0;
    font-size: 10px
}

.sitemock-ico {
    margin-bottom: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    color: var(--sm-accent);
    background: var(--sm-accent-soft);
    justify-content: center;
    align-items: center;
    font-size: 12px;
    display: inline-flex
}

.sitemock-shot {
    height: calc(var(--spacing) * 24);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--sm-accent-soft), var(--sm-surface));
    border: 1px solid var(--sm-line);
    color: var(--sm-muted);
    justify-content: center;
    align-items: center;
    font-size: 10px;
    display: flex
}

.sitemock-price {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3.5);
    background: var(--sm-bg);
    border: 1px solid var(--sm-line);
    flex-direction: column;
    display: flex
}

.sitemock-price.is-featured {
    border-color: var(--sm-accent);
    box-shadow: 0 14px 34px #7a13f029
}

.sitemock-price-top {
    margin-bottom: calc(var(--spacing) * 2);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.sitemock-price-top b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--sm-ink)
}

.sitemock-price-amount {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 20px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    --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, );
    color: var(--sm-ink)
}

.sitemock-price-amount small {
    --tw-font-weight: var(--font-weight-normal);
    font-size: 9px;
    font-weight: var(--font-weight-normal);
    color: var(--sm-muted)
}

.sitemock-price ul {
    margin-bottom: calc(var(--spacing) * 3.5);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    padding: 0;
    display: flex
}

.sitemock-price li {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    color: var(--sm-muted);
    font-size: 10px;
    list-style-type: none;
    display: flex
}

.sitemock-price li i {
    color: var(--sm-accent);
    font-size: 10px
}

.sitemock-quote {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3.5);
    background: var(--sm-bg);
    border: 1px solid var(--sm-line)
}

.sitemock-quote p {
    margin-bottom: calc(var(--spacing) * 3);
    color: var(--sm-ink);
    font-size: 10.5px;
    font-style: italic
}

.sitemock-who {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.sitemock-ava {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    background: linear-gradient(135deg, var(--sm-accent), #ff1ade);
    border-radius: 3.40282e38px;
    flex-shrink: 0
}

.sitemock-who b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--sm-ink);
    display: block
}

.sitemock-who span {
    color: var(--sm-muted);
    font-size: 9px;
    display: block
}

.sitemock-faq {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    max-width: 46ch;
    margin-inline: auto;
    display: flex
}

.sitemock-faq div {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 10.5px;
    font-weight: var(--font-weight-medium);
    background: var(--sm-bg);
    border: 1px solid var(--sm-line);
    color: var(--sm-ink);
    display: flex
}

.sitemock-faq i {
    color: var(--sm-accent);
    flex-shrink: 0;
    font-size: 10px
}

.sitemock-form {
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3.5);
    background: var(--sm-bg);
    border: 1px solid var(--sm-line);
    flex-direction: column;
    display: flex
}

.sitemock-input {
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    color: var(--sm-muted);
    align-items: center;
    font-size: 10px;
    display: flex
}

.sitemock-input.is-area {
    height: calc(var(--spacing) * 14);
    padding-top: calc(var(--spacing) * 2);
    align-items: flex-start
}

.sitemock-contact-list {
    gap: calc(var(--spacing) * 2.5);
    flex-direction: column;
    padding: 0;
    display: flex
}

.sitemock-contact-list li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--sm-muted);
    font-size: 10px;
    list-style-type: none;
    display: flex
}

.sitemock-contact-list i {
    color: var(--sm-accent);
    font-size: 11px
}

.sitemock-footer {
    padding-inline: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 7);
    padding-bottom: calc(var(--spacing) * 4)
}

@media(min-width:576px) {
    .sitemock-footer {
        padding-inline: calc(var(--spacing) * 7)
    }
}

.sitemock-footer {
    background: var(--sm-surface);
    border-top: 1px solid var(--sm-line)
}

.sitemock-footer-grid {
    margin-bottom: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 4);
    display: grid
}

@media(min-width:576px) {
    .sitemock-footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.sitemock-footer-grid b {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--sm-ink);
    display: block
}

.sitemock-footer-grid a {
    margin-bottom: calc(var(--spacing) * 1.5);
    color: var(--sm-muted);
    font-size: 10px;
    text-decoration-line: none;
    display: block
}

.sitemock-footer-bottom {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
    border-top: 1px solid var(--sm-line);
    color: var(--sm-muted);
    flex-wrap: wrap;
    font-size: 9.5px;
    display: flex
}

.invpage {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 650px;
    margin-inline: auto;
    transition: max-width .35s cubic-bezier(.22, 1, .36, 1);
    display: flex
}

.invpage[data-device=tablet] {
    max-width: 620px
}

.invpage[data-device=mobile] {
    max-width: 500px
}

.invdoc {
    --inv-ink: #10131c;
    --inv-muted: #626879;
    --inv-line: #e6e9f0;
    --inv-surface: #f8f9fc;
    --inv-accent: #7a13f0;
    --inv-accent-soft: #f3ecff;
    border-radius: var(--radius-2xl);
    width: 100%;
    padding: calc(var(--spacing) * 6);
    position: relative;
    overflow: hidden
}

@media(min-width:576px) {
    .invdoc {
        padding: calc(var(--spacing) * 8)
    }
}

.invdoc {
    color: var(--inv-muted);
    background: #fff;
    font-size: 11px;
    line-height: 1.6;
    box-shadow: 0 24px 60px #10131c29
}

.invdoc.is-print {
    --inv-accent: #10131c;
    --inv-accent-soft: #f1f2f5;
    box-shadow: 0 0 0 1px var(--inv-line);
    border-radius: 0
}

.invdoc.is-watermarked:after {
    content: "PREVIEW";
    pointer-events: none;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 64px;
    font-weight: var(--font-weight-bold);
    --tw-tracking: .2em;
    letter-spacing: .2em;
    color: var(--inv-accent);
    opacity: .05;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: rotate(-24deg)
}

.invdoc [data-inv-section] {
    transition: opacity .5s, transform .5s cubic-bezier(.22, 1, .36, 1)
}

.invdoc.is-building [data-inv-section] {
    opacity: 0;
    transform: translateY(12px)
}

.invdoc.is-building [data-inv-section].is-revealed {
    opacity: 1;
    transform: none
}

.invdoc-top {
    margin-bottom: calc(var(--spacing) * 5);
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 5);
    border-bottom: 1px solid var(--inv-line);
    flex-wrap: wrap;
    display: flex
}

.invdoc-logo {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--inv-ink);
    display: flex
}

.invdoc-logo span {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    background: linear-gradient(135deg, var(--inv-accent), #ff1ade);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.invdoc.is-print .invdoc-logo span {
    background: var(--inv-ink)
}

.invdoc-title {
    margin-bottom: var(--spacing);
    text-align: end;
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 26px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    color: var(--inv-ink)
}

.invdoc-ref {
    text-align: end;
    font-size: 10.5px
}

.invdoc-ref b {
    color: var(--inv-ink)
}

.invdoc-grid {
    margin-bottom: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 4);
    display: grid
}

@media(min-width:576px) {
    .invdoc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.invdoc-block b {
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .12em;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--inv-accent);
    display: block
}

.invdoc.is-print .invdoc-block b {
    color: var(--inv-muted)
}

.invdoc-block p {
    --tw-leading: var(--leading-relaxed);
    font-size: 10.5px;
    line-height: var(--leading-relaxed);
    margin-bottom: 0
}

.invdoc-block strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--inv-ink);
    display: block
}

.invdoc-meta {
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    background: var(--inv-surface);
    flex-direction: column;
    display: flex
}

.invdoc-meta div {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 10.5px;
    display: flex
}

.invdoc-meta b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--inv-ink)
}

.invdoc-scroll {
    margin-inline: calc(var(--spacing) * -1);
    margin-bottom: calc(var(--spacing) * 4);
    padding-inline: var(--spacing);
    scrollbar-width: thin;
    overflow-x: auto
}

.invdoc-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 10.5px
}

.invdoc-table th {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--inv-muted);
    border-bottom: 1px solid var(--inv-line)
}

.invdoc-table td {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2.5);
    vertical-align: top;
    border-bottom: 1px solid var(--inv-line)
}

.invdoc-table tbody tr:last-child td {
    border-bottom: 0
}

.invdoc-table .is-num {
    text-align: end;
    white-space: nowrap;
    --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, )
}

.invdoc-table strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--inv-ink);
    display: block
}

.invdoc-table small {
    font-size: 9.5px;
    display: block
}

.invdoc-summary {
    margin-inline-start: auto;
    margin-bottom: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    display: flex
}

.invdoc-summary div {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    font-size: 10.5px;
    display: flex
}

.invdoc-summary div b {
    --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, );
    color: var(--inv-ink)
}

.invdoc-total {
    margin-top: calc(var(--spacing) * 1.5);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 2.5);
    border-top: 1px solid var(--inv-line);
    display: flex
}

.invdoc-total span {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--inv-ink)
}

.invdoc-total b {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 19px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    --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, );
    color: var(--inv-accent)
}

.invdoc.is-print .invdoc-total b {
    color: var(--inv-ink)
}

.invdoc-pay {
    margin-bottom: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    display: grid
}

@media(min-width:576px) {
    .invdoc-pay {
        grid-template-columns: 1fr auto
    }
}

.invdoc-pay {
    background: var(--inv-surface)
}

.invdoc-pay-rows {
    margin-top: calc(var(--spacing) * 2);
    gap: var(--spacing);
    flex-direction: column;
    display: flex
}

.invdoc-pay-rows div {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 10.5px;
    display: flex
}

.invdoc-pay-rows span {
    width: calc(var(--spacing) * 20);
    flex-shrink: 0
}

.invdoc-pay-rows b {
    --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, );
    color: var(--inv-ink)
}

.invdoc-qr {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 2.5);
    border: 1px solid var(--inv-line);
    background: #fff;
    flex-direction: column;
    display: flex
}

.invdoc-qr svg {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
    display: block
}

.invdoc-qr span {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: 8.5px
}

.invdoc-fine {
    margin-bottom: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 4);
    display: grid
}

@media(min-width:576px) {
    .invdoc-fine {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.invdoc-fine p {
    --tw-leading: var(--leading-relaxed);
    font-size: 10px;
    line-height: var(--leading-relaxed);
    margin-bottom: 0
}

.invdoc-sign {
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 4);
    border-top: 1px solid var(--inv-line);
    flex-wrap: wrap;
    display: flex
}

.invdoc-sign-mark {
    color: var(--inv-ink);
    font-family: Georgia, Times New Roman, serif;
    font-size: 20px;
    font-style: italic
}

.invdoc-sign-rule {
    width: calc(var(--spacing) * 40);
    padding-top: calc(var(--spacing) * 1.5);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-top: 1px solid var(--inv-line);
    font-size: 9.5px
}

.invdoc-stamp {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
    text-align: center;
    --tw-leading: var(--leading-tight);
    font-size: 8px;
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--inv-accent);
    border: 2px solid var(--inv-accent);
    opacity: .55;
    border-radius: 3.40282e38px;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    transform: rotate(-12deg)
}

.invdoc.is-print .invdoc-stamp {
    color: var(--inv-ink);
    border-color: var(--inv-ink)
}

.invbreak {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3.5);
    display: grid
}

@media(min-width:576px) {
    .invbreak {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.invbreak-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3.5)
}

.invbreak-card h6 {
    margin-bottom: calc(var(--spacing) * 2.5);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    display: flex
}

.invbreak-rows {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.invbreak-rows li {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    color: var(--color-gray-600);
    font-size: 11.5px;
    display: flex
}

.invbreak-rows b {
    color: var(--color-dark);
    --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, )
}

.rptdoc {
    --rpt-ink: #10131c;
    --rpt-muted: #626879;
    --rpt-line: #e6e9f0;
    --rpt-surface: #f8f9fc;
    --rpt-accent: #7a13f0;
    --rpt-accent-soft: #f3ecff;
    --rpt-teal: #009689;
    --rpt-amber: #d97f06;
    align-items: center;
    gap: calc(var(--spacing) * 5);
    flex-direction: column;
    width: 650px;
    margin-inline: auto;
    transition: max-width .35s cubic-bezier(.22, 1, .36, 1);
    display: flex
}

.rptdoc[data-device=tablet] {
    max-width: 620px
}

.rptdoc[data-device=presentation] {
    max-width: 1080px
}

.rptdoc.is-print {
    --rpt-accent: #10131c;
    --rpt-accent-soft: #f1f2f5;
    --rpt-teal: #4a5565;
    --rpt-amber: #6a7282
}

.rptpage {
    border-radius: var(--radius-2xl);
    width: 100%;
    padding: calc(var(--spacing) * 7);
    position: relative;
    overflow: hidden
}

@media(min-width:576px) {
    .rptpage {
        padding: calc(var(--spacing) * 9)
    }
}

.rptpage {
    color: var(--rpt-muted);
    background: #fff;
    font-size: 11px;
    line-height: 1.65;
    box-shadow: 0 24px 60px #10131c29
}

.rptdoc.is-print .rptpage {
    box-shadow: 0 0 0 1px var(--rpt-line);
    border-radius: 0
}

.rptdoc[data-device=presentation] .rptpage {
    padding: calc(var(--spacing) * 10);
    aspect-ratio: 16/9
}

.rptpage-num {
    --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, );
    color: var(--rpt-muted);
    opacity: .6;
    inset-inline-end: 28px;
    font-size: 9px;
    position: absolute;
    bottom: 16px
}

.rptdoc [data-rpt-section] {
    transition: opacity .5s, transform .5s cubic-bezier(.22, 1, .36, 1)
}

.rptdoc.is-building [data-rpt-section] {
    opacity: 0;
    transform: translateY(14px)
}

.rptdoc.is-building [data-rpt-section].is-revealed {
    opacity: 1;
    transform: none
}

.rptcover {
    border-radius: var(--radius-xl);
    min-height: 420px;
    padding: calc(var(--spacing) * 8);
    flex-direction: column;
    justify-content: space-between;
    display: flex
}

@media(min-width:576px) {
    .rptcover {
        padding: calc(var(--spacing) * 10)
    }
}

.rptcover {
    background: linear-gradient(150deg, var(--rpt-accent) 0%, #3d0a80 58%, #10131c 100%);
    color: #fff
}

.rptdoc.is-print .rptcover {
    background: var(--rpt-ink)
}

.rptcover-tag {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    width: -moz-fit-content;
    width: fit-content;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .14em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: #ffffff29;
    border-radius: 3.40282e38px;
    display: inline-flex
}

.rptcover h1 {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 2.5);
    --tw-leading: 1.1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 30px;
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
    --tw-tracking: -.02em;
    letter-spacing: -.02em;
    color: #fff
}

.rptcover p {
    color: #ffffffc7;
    max-width: 42ch;
    margin-bottom: 0;
    font-size: 12px
}

.rptcover-foot {
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid #ffffff2e;
    flex-wrap: wrap;
    display: flex
}

.rptcover-meta {
    gap: calc(var(--spacing) * .5);
    color: #ffffffb3;
    flex-direction: column;
    font-size: 10px;
    display: flex
}

.rptcover-meta b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: #fff
}

.rptcover-brand {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    display: flex
}

.rptcover-brand span {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    background: #ffffff2e;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.rpteyebrow {
    margin-bottom: calc(var(--spacing) * 2);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: .14em;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rpt-accent);
    display: flex
}

.rpteyebrow:after {
    content: "";
    background: var(--rpt-line);
    flex: 1;
    height: 1px
}

.rptpage h2 {
    margin-bottom: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-snug);
    font-size: 17px;
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: -.01em;
    letter-spacing: -.01em;
    color: var(--rpt-ink)
}

.rptpage h3 {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-ink)
}

.rptpage p {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-leading: 1.75;
    font-size: 11px;
    line-height: 1.75
}

.rptpage p:last-child {
    margin-bottom: 0
}

.rptlead {
    color: var(--rpt-ink);
    --tw-leading: 1.7 !important;
    font-size: 12px !important;
    line-height: 1.7 !important
}

.rptpage ul {
    margin-bottom: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    padding: 0;
    display: flex
}

.rptpage ul li {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-relaxed);
    font-size: 11px;
    line-height: var(--leading-relaxed);
    list-style-type: none;
    display: flex
}

.rptpage ul li i {
    margin-top: calc(var(--spacing) * .5);
    color: var(--rpt-accent);
    flex-shrink: 0;
    font-size: 10px
}

.rptsection+.rptsection {
    margin-top: calc(var(--spacing) * 7)
}

.rpttoc {
    flex-direction: column;
    gap: 0;
    padding: 0;
    display: flex
}

.rpttoc li {
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    border-bottom: 1px dashed var(--rpt-line);
    font-size: 11px;
    list-style-type: none;
    display: flex
}

.rpttoc li:last-child {
    border-bottom: 0
}

.rpttoc-no {
    width: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    --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, );
    color: var(--rpt-accent);
    flex-shrink: 0
}

.rpttoc-name {
    color: var(--rpt-ink)
}

.rpttoc-dots {
    background: repeating-linear-gradient(90deg, var(--rpt-line) 0 2px, transparent 2px 6px);
    flex: 1;
    align-self: center;
    height: 1px
}

.rptkpis {
    margin-bottom: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 2.5);
    display: grid
}

@media(min-width:576px) {
    .rptkpis {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.rptkpi {
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    background: var(--rpt-surface);
    border: 1px solid var(--rpt-line);
    flex-direction: column;
    display: flex
}

.rptkpi span {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: 9px
}

.rptkpi b {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 16px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    --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, );
    color: var(--rpt-ink)
}

.rptkpi small {
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-teal);
    display: flex
}

.rptkpi small.is-down {
    color: #e61c1c
}

.rptfig {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background: var(--rpt-surface);
    border: 1px solid var(--rpt-line)
}

.rptfig-head {
    margin-bottom: calc(var(--spacing) * 3);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex
}

.rptfig-head b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-ink)
}

.rptfig-head span {
    font-size: 9.5px
}

.rptfig figcaption {
    margin-top: calc(var(--spacing) * 2.5);
    --tw-leading: var(--leading-relaxed);
    font-size: 9.5px;
    line-height: var(--leading-relaxed)
}

.rptbars {
    height: calc(var(--spacing) * 32);
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.rptbars>div {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    flex: 1;
    height: 100%;
    display: flex
}

.rptbars-pair {
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing);
    flex: 1;
    width: 100%;
    display: flex
}

.rptbars-pair i {
    width: calc(var(--spacing) * 2.5);
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    background: var(--rpt-line);
    transition: height .6s cubic-bezier(.22, 1, .36, 1);
    display: block
}

.rptbars-pair i.is-a {
    background: var(--rpt-accent)
}

@supports (color:color-mix(in lab, red, red)) {
    .rptbars-pair i.is-a {
        background: color-mix(in srgb, var(--rpt-accent) 35%, transparent)
    }
}

.rptbars-pair i.is-b {
    background: var(--rpt-accent)
}

.rptbars em {
    --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, );
    font-size: 9px;
    font-style: normal
}

.rptlegend span {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    display: flex
}

.rptlegend i {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    display: block
}

.rptdonut-wrap {
    align-items: center;
    gap: calc(var(--spacing) * 4);
    display: flex
}

.rptdonut {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
    background: conic-gradient(var(--rpt-accent) 0 42%, var(--rpt-teal) 42% 70%, var(--rpt-amber) 70% 88%, var(--rpt-line) 88% 100%);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    place-items: center;
    display: grid;
    position: relative
}

.rptdonut:after {
    content: "";
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
    background: var(--rpt-surface);
    border-radius: 3.40282e38px;
    position: absolute
}

.rptdonut b {
    z-index: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    --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, );
    color: var(--rpt-ink);
    position: relative
}

.rptdonut-keys {
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.rptdonut-keys div {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 10px;
    display: flex
}

.rptdonut-keys i {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: block
}

.rptdonut-keys b {
    --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, );
    color: var(--rpt-ink);
    margin-inline-start: auto
}

.rptline {
    height: calc(var(--spacing) * 28);
    width: 100%;
    display: block
}

.rptline-fill {
    fill: var(--rpt-accent)
}

@supports (color:color-mix(in lab, red, red)) {
    .rptline-fill {
        fill: color-mix(in srgb, var(--rpt-accent) 14%, transparent)
    }
}

.rptline-stroke {
    fill: none;
    stroke: var(--rpt-accent);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round
}

.rptline-dot {
    fill: var(--rpt-accent)
}

.rptline-grid {
    stroke: var(--rpt-line);
    stroke-width: 1px
}

.rptscroll {
    margin-inline: calc(var(--spacing) * -1);
    padding-inline: var(--spacing);
    scrollbar-width: thin;
    overflow-x: auto
}

.rpttable {
    border-collapse: collapse;
    width: 100%;
    font-size: 10.5px
}

.rpttable caption {
    padding-bottom: calc(var(--spacing) * 2);
    text-align: start;
    font-size: 9.5px
}

.rpttable th {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--rpt-muted);
    background: var(--rpt-surface);
    border-bottom: 1px solid var(--rpt-line)
}

.rpttable td {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    vertical-align: top;
    border-bottom: 1px solid var(--rpt-line)
}

.rpttable tbody tr:last-child td {
    border-bottom: 0
}

.rpttable .is-num {
    text-align: end;
    white-space: nowrap;
    --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, )
}

.rpttable strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-ink)
}

.rpttrend {
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9.5px;
    font-weight: var(--font-weight-semibold);
    display: inline-flex
}

.rpttrend.is-up {
    color: var(--rpt-teal)
}

.rpttrend.is-down {
    color: #e61c1c
}

.rptswot {
    gap: calc(var(--spacing) * 2.5);
    display: grid
}

@media(min-width:576px) {
    .rptswot {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.rptswot-cell {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    background: var(--rpt-surface);
    border: 1px solid var(--rpt-line);
    border-top-width: 3px
}

.rptswot-cell b {
    margin-bottom: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--rpt-ink);
    display: block
}

.rptswot-cell.is-s {
    border-top-color: var(--rpt-teal)
}

.rptswot-cell.is-w {
    border-top-color: #e61c1c
}

.rptswot-cell.is-o {
    border-top-color: var(--rpt-accent)
}

.rptswot-cell.is-t {
    border-top-color: var(--rpt-amber)
}

.rptrecs {
    gap: calc(var(--spacing) * 2.5);
    flex-direction: column;
    padding: 0;
    display: flex
}

.rptrec {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    background: var(--rpt-surface);
    border: 1px solid var(--rpt-line);
    list-style-type: none;
    display: flex
}

.rptrec-no {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    background: var(--rpt-accent);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.rptrec b {
    margin-bottom: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-ink);
    display: block
}

.rptrec p {
    margin-bottom: 0;
    font-size: 10.5px !important
}

.rptrec-tag {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-accent);
    background: var(--rpt-accent-soft);
    flex-shrink: 0;
    align-items: center;
    display: inline-flex
}

.rptplan {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    padding: 0;
    padding-inline-start: calc(var(--spacing) * 5);
    display: flex;
    position: relative
}

.rptplan:before {
    content: "";
    background: var(--rpt-line);
    inset-inline-start: 5px;
    width: 1px;
    position: absolute;
    top: 6px;
    bottom: 6px
}

.rptplan li {
    align-items: baseline;
    -moz-column-gap: calc(var(--spacing) * 3);
    column-gap: calc(var(--spacing) * 3);
    row-gap: var(--spacing);
    flex-wrap: wrap;
    font-size: 10.5px;
    list-style-type: none;
    display: flex;
    position: relative
}

.rptplan li:before {
    content: "";
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
    border: 2px solid var(--rpt-accent);
    inset-inline-start: -19px;
    background: #fff;
    border-radius: 3.40282e38px;
    position: absolute;
    top: 4px
}

.rptplan b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--rpt-ink)
}

.rptplan span {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: 9.5px
}

.rptrefs {
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    padding: 0;
    display: flex
}

.rptrefs li {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    --tw-leading: var(--leading-relaxed);
    font-size: 10.5px;
    line-height: var(--leading-relaxed);
    list-style-type: none;
    display: flex
}

.rptrefs-no {
    --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, );
    color: var(--rpt-accent);
    flex-shrink: 0
}

.rptinsights {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3.5);
    display: grid
}

@media(min-width:576px) {
    .rptinsights {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.studio-doc.chatdoc ul li {
    list-style-type: disc
}

.studio-doc.chatdoc ol li {
    list-style-type: decimal
}

.studio-doc.is-reading {
    max-width: 80ch
}

.studio-doc.is-reading .studio-doc-meta,
.studio-doc.is-reading .chatart-grid,
.studio-doc.is-reading .chatfollow {
    display: none
}

.chatdoc [data-chat-block] {
    transition: opacity .45s, transform .45s cubic-bezier(.22, 1, .36, 1)
}

.chatdoc.is-building [data-chat-block] {
    opacity: 0;
    transform: translateY(14px)
}

.chatdoc.is-building [data-chat-block].is-revealed {
    opacity: 1;
    transform: none
}

.chathit {
    border-radius: 12px;
    animation: 1.5s chat-hit
}

@keyframes chat-hit {

    0%,
    to {
        box-shadow: 0 0 #7a13f000
    }

    22% {
        box-shadow: 0 0 0 5px #7a13f029
    }
}

.chatfold {
    margin-block: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    overflow: hidden
}

.chatfold>summary {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    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));
    --tw-duration: .2s;
    list-style-type: none;
    transition-duration: .2s;
    display: flex
}

.chatfold>summary::-webkit-details-marker {
    display: none
}

.chatfold>summary:hover {
    background-color: var(--color-white)
}

details[open]>.chatfold-head>.studio-caret,
[dir=rtl] details[open]>.chatfold-head>.studio-caret {
    transform: rotate(90deg)
}

.chatfold-body {
    padding-inline: calc(var(--spacing) * 3.5);
    padding-bottom: calc(var(--spacing) * 3.5)
}

.chatfold-body>:last-child {
    margin-bottom: 0
}

.chatgraph {
    margin-block: calc(var(--spacing) * 4);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 4);
    flex-direction: column;
    display: flex
}

.chatgraph-node {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    display: inline-flex
}

.chatgraph-node i {
    color: var(--color-gray-400);
    font-size: 11px
}

.chatgraph-node.is-accent {
    border-style: var(--tw-border-style);
    background-image: var(--background-image-primary-gradient);
    color: var(--color-white);
    border-width: 0
}

.chatgraph-node.is-accent i {
    color: var(--color-white)
}

[data-theme=dark] .chatgraph-node.is-accent,
[data-theme=dark] .chatgraph-node.is-accent i {
    color: #fff
}

.chatmedia {
    margin-block: calc(var(--spacing) * 4);
    justify-content: flex-end;
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    min-height: 172px;
    padding: calc(var(--spacing) * 4);
    color: #fff;
    background: linear-gradient(135deg, #7a13f0, #4318a8 46%, #14162a);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden
}

.chatmedia:before {
    content: "";
    background-image: radial-gradient(circle at 1px 1px, #ffffff38 1px, #0000 0);
    background-size: 18px 18px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.chatmedia>* {
    position: relative
}

.chatmedia b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 13px;
    font-weight: var(--font-weight-semibold)
}

.chatmedia small {
    opacity: .7;
    font-size: 11px
}

.chatmedia-tag {
    inset-inline-end: calc(var(--spacing) * 4);
    top: calc(var(--spacing) * 4);
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    background: #ffffff29;
    display: inline-flex;
    position: absolute
}

.chatart-grid {
    margin-block: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 2);
    display: grid
}

@media(min-width:576px) {
    .chatart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.chatart {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    width: 100%;
    padding: calc(var(--spacing) * 2.5);
    text-align: start;
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: flex
}

.chatart:hover,
.chatart.is-active {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.chatfollow {
    margin-top: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 1.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-border-color);
    padding-top: calc(var(--spacing) * 4);
    flex-wrap: wrap;
    display: flex
}

.chatfollow-btn {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    font-size: 11.5px;
    transition-duration: .2s;
    display: inline-flex
}

.chatfollow-btn:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.chatfollow-btn i {
    color: var(--color-gray-400);
    flex-shrink: 0;
    font-size: 11px
}

.chatfollow-btn:hover i {
    color: var(--color-primary)
}

.chatmd {
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 92ch;
    padding: calc(var(--spacing) * 5);
    white-space: pre-wrap;
    margin-inline: auto
}

.chatmd .md-h {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary)
}

.chatmd .md-b {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.chatmd .md-c {
    color: var(--color-teal)
}

.chatmd .md-q {
    color: var(--color-gray-400)
}

.chatmeter {
    gap: calc(var(--spacing) * 2.5);
    flex-direction: column;
    display: flex
}

.chatmeter-top b {
    color: var(--color-dark);
    --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, )
}

.chatdoc .tok-cmt {
    color: #99a1af;
    font-style: italic
}

.chatdoc .tok-str {
    color: #007c56
}

.chatdoc .tok-kw {
    color: #7a13f0;
    font-weight: 600
}

.chatdoc .tok-num {
    color: #d97f06
}

.chatdoc .tok-fn {
    color: #155dfc
}

.chatdoc .tok-tag {
    color: #e60076
}

.chatdoc .tok-attr {
    color: #0092b8
}

[data-theme=dark] .chatdoc .tok-cmt {
    color: #6a7282
}

[data-theme=dark] .chatdoc .tok-str {
    color: #6aebb5
}

[data-theme=dark] .chatdoc .tok-kw {
    color: #c4a9ff
}

[data-theme=dark] .chatdoc .tok-num {
    color: #fbc724
}

[data-theme=dark] .chatdoc .tok-fn {
    color: #8ec5ff
}

[data-theme=dark] .chatdoc .tok-tag {
    color: #fda5d5
}

[data-theme=dark] .chatdoc .tok-attr {
    color: #53eafd
}

.chatart-grid.hidden,
.chatgraph.hidden,
.chatfollow.hidden {
    display: none !important
}

.setcanvas {
    min-height: 0;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    flex: 1;
    overflow-y: auto
}

@media(min-width:576px) {
    .setcanvas {
        padding-inline: calc(var(--spacing) * 5)
    }
}

.setcanvas {
    scrollbar-width: thin
}

.setpane {
    width: 100%;
    margin-inline: auto
}

.setpane-head {
    margin-bottom: calc(var(--spacing) * 4);
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    display: flex
}

.setpane-head h4 {
    margin-bottom: var(--spacing)
}

.setpane-head p {
    --tw-leading: var(--leading-relaxed);
    font-size: 12.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-gray-500);
    margin-bottom: 0
}

.setcard {
    margin-bottom: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    box-shadow: var(--shadow-card);
    overflow: hidden
}

.setcard.mb-0 {
    margin-bottom: 0
}

.setcard-title {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    margin-bottom: 0;
    display: flex
}

.setcard-title i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
}

.setcard-foot {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--color-light);
    flex-wrap: wrap;
    display: flex
}

.setrow {
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-block: calc(var(--spacing) * 3);
    flex-wrap: wrap;
    display: flex
}

@media not all and (min-width:576px) {
    .setrow {
        flex-direction: column
    }
}

@media(min-width:576px) {
    .setrow {
        align-items: center
    }
}

.setrow:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
}

.setrow-body {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.setrow-label {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    margin-bottom: 0;
    display: flex
}

.setrow-stack {
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-block: calc(var(--spacing) * 3.5);
    flex-direction: column;
    display: flex
}

.setrow-stack:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
}

.setchoice {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    display: grid
}

.setchoice-item {
    cursor: pointer;
    display: block;
    position: relative
}

.setchoice-box {
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    height: 100%;
    padding: calc(var(--spacing) * 3);
    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));
    --tw-duration: .2s;
    flex-direction: column;
    transition-duration: .2s;
    display: flex
}

.setchoice-box b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark)
}

.setchoice-box small {
    --tw-leading: var(--leading-snug);
    font-size: 10.5px;
    line-height: var(--leading-snug);
    color: var(--color-gray-500)
}

.setchoice-icon {
    margin-bottom: calc(var(--spacing) * .5);
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-gray-500);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.setchoice-item:hover .setchoice-box {
    border-color: var(--color-primary-200)
}

.setchoice-item input:checked~.setchoice-box {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.setchoice-item input:checked~.setchoice-box .setchoice-icon {
    border-color: var(--color-primary-200);
    color: var(--color-primary)
}

.setchoice-item input:focus-visible~.setchoice-box {
    outline-style: var(--tw-outline-style);
    outline-offset: 2px;
    outline-width: 2px;
    outline-color: var(--color-primary)
}

.setswatches {
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex
}

.setswatch {
    cursor: pointer;
    display: block;
    position: relative
}

.setswatch-dot {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-style: var(--tw-border-style);
    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));
    --tw-duration: .2s;
    box-shadow: 0 0 0 1px var(--color-border-color) inset;
    border-width: 2px;
    border-color: #0000;
    border-radius: 3.40282e38px;
    transition-duration: .2s;
    display: block
}

.setswatch:hover .setswatch-dot {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y)
}

.setswatch input:checked~.setswatch-dot {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    border-color: var(--color-dark)
}

.setswatch input:focus-visible~.setswatch-dot {
    outline-style: var(--tw-outline-style);
    outline-offset: 2px;
    outline-width: 2px;
    outline-color: var(--color-primary)
}

.setpreview {
    margin-inline: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 4);
    border-radius: var(--sp-radius, 16px);
    font-size: var(--sp-font, 13px);
    flex-direction: column;
    display: flex
}

.setpreview-bar {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2.5);
    border-radius: calc(var(--sp-radius, 16px) * .6);
    background-color: var(--sp-accent, #7a13f0);
    color: #fff;
    display: flex
}

.setpreview-bar b {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: .92em;
    font-weight: var(--font-weight-semibold)
}

.setpreview-chip {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: .7em;
    font-weight: var(--font-weight-semibold);
    border-radius: calc(var(--sp-radius, 16px) * .4);
    background: #fff3;
    margin-inline-start: auto
}

.setpreview-card {
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    border-radius: calc(var(--sp-radius, 16px) * .6);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
    display: flex
}

.setpreview.is-still .setpreview-card {
    transition: none
}

.setpreview:not(.is-still) .setpreview-card:hover {
    transform: translateY(-2px)
}

.setpreview.is-compact .setpreview-card {
    padding-block: calc(var(--spacing) * 1.5)
}

.setpreview.is-glass .setpreview-card {
    background-color: #ffffff9e
}

@supports (color:color-mix(in lab, red, red)) {
    .setpreview.is-glass .setpreview-card {
        background-color: color-mix(in srgb, var(--color-white) 62%, transparent)
    }
}

.setpreview.is-glass .setpreview-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.setpreview-dot {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    background-color: var(--sp-accent, #7a13f0);
    border-radius: 3.40282e38px;
    flex-shrink: 0
}

.setpreview-code {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    --tw-leading: var(--leading-relaxed);
    font-size: .82em;
    line-height: var(--leading-relaxed);
    border-radius: calc(var(--sp-radius, 16px) * .6);
    font-family: var(--sp-mono, var(--studio-mono));
    overflow-x: auto
}

.setint {
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-block: calc(var(--spacing) * 3);
    display: flex
}

@media not all and (min-width:576px) {
    .setint {
        flex-direction: column
    }
}

@media(min-width:576px) {
    .setint {
        align-items: center
    }
}

.setint:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
}

.setint-name {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    display: flex
}

.setplan {
    margin: calc(var(--spacing) * 4);
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 4);
    color: #fff;
    background: linear-gradient(135deg, #7a13f0, #4318a8 58%, #1b1035);
    flex-wrap: wrap;
    display: flex
}

.setusage {
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    display: grid
}

@media(min-width:576px) {
    .setusage {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.setusage-top {
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    display: flex
}

.setusage-top b {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, )
}

.setusage-top span {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    font-size: 10px
}

.setbanner {
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--color-white);
    flex-wrap: wrap;
    flex-shrink: 0;
    animation: .3s cubic-bezier(.22, 1, .36, 1) studio-rise;
    display: flex;
    box-shadow: 0 -8px 24px #1018280f
}

.setbanner[hidden] {
    display: none !important
}

.setbanner-count {
    height: calc(var(--spacing) * 5);
    min-width: calc(var(--spacing) * 5);
    background-color: var(--color-warning);
    padding-inline: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

[data-theme=dark] .setbanner-count {
    color: #fff
}

.setrow.is-dirty>.setrow-body>.setrow-label:after,
.setrow-stack.is-dirty>.setrow-label:after {
    content: "";
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    background-color: var(--color-warning);
    border-radius: 3.40282e38px;
    display: inline-block
}

.setempty {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
}

.setempty h5 {
    margin-bottom: calc(var(--spacing) * 1.5)
}

.setempty p {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 4);
    max-width: var(--container-sm);
    --tw-leading: var(--leading-relaxed);
    font-size: 12.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-gray-500)
}

.setcard.hidden,
.setrow.hidden,
.setrow-stack.hidden,
.setint.hidden,
.setpane.hidden,
.setempty.hidden,
.setpreview.hidden {
    display: none !important
}

.settip {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    padding: calc(var(--spacing) * 3);
    --tw-leading: var(--leading-relaxed);
    font-size: 11.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-gray-600);
    display: flex
}

.settip i {
    margin-top: calc(var(--spacing) * .5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-primary);
    flex-shrink: 0
}

.studio-switch.hidden,
.studio-switches.hidden {
    display: none !important
}

.studio-switch.is-dirty b:after {
    content: "";
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    background-color: var(--color-warning);
    vertical-align: middle;
    border-radius: 3.40282e38px;
    margin-inline-start: calc(var(--spacing) * 1.5);
    display: inline-block
}

.postmock {
    --pm-card: #fff;
    --pm-text: #16181c;
    --pm-muted: #5b6470;
    --pm-line: #e3e6eb;
    --pm-soft: #f5f6f8;
    --pm-accent: #0a66c2;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    width: 100%;
    padding-block: var(--spacing);
    color: var(--pm-text);
    flex-direction: column;
    max-width: 560px;
    margin-inline: auto;
    transition: max-width .35s cubic-bezier(.22, 1, .36, 1);
    display: flex
}

.postmock[data-device=mobile] {
    max-width: 380px
}

.postmock[data-device=carousel] {
    max-width: 620px
}

.postmock.is-dark {
    --pm-card: #16181d;
    --pm-text: #e9ebee;
    --pm-muted: #949ca8;
    --pm-line: #262a31;
    --pm-soft: #1d2027
}

.postmock[data-platform=linkedin] {
    --pm-accent: #0a66c2
}

.postmock[data-platform=instagram] {
    --pm-accent: #d6249f
}

.postmock[data-platform=facebook] {
    --pm-accent: #1877f2
}

.postmock[data-platform=x] {
    --pm-accent: #16181c
}

.postmock[data-platform=threads] {
    --pm-accent: #4a4a4a
}

.postmock[data-platform=tiktok] {
    --pm-accent: #00b8c4
}

.postmock[data-platform=youtube] {
    --pm-accent: #e62117
}

.postmock[data-platform=pinterest] {
    --pm-accent: #c8232c
}

.postmock.is-dark[data-platform=x],
.postmock.is-dark[data-platform=threads] {
    --pm-accent: #e9ebee
}

.postcard {
    background-color: var(--pm-card);
    border: 1px solid var(--pm-line);
    border-radius: 14px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 12px 32px #1018281a
}

.postmock[data-platform=x] .postcard,
.postmock[data-platform=threads] .postcard {
    border-radius: 18px
}

.posthead {
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-top: calc(var(--spacing) * 3.5);
    display: flex
}

.postavatar {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--pm-accent), #7a13f0);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.postname {
    align-items: center;
    gap: var(--spacing);
    --tw-leading: var(--leading-tight);
    font-size: 13px;
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pm-text);
    display: flex
}

.postname i {
    color: var(--pm-accent);
    font-size: 11px
}

.postmeta {
    align-items: center;
    gap: var(--spacing);
    --tw-leading: var(--leading-tight);
    font-size: 11px;
    line-height: var(--leading-tight);
    color: var(--pm-muted);
    display: flex
}

.posthead-more {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--pm-muted);
    flex-shrink: 0
}

.postbody {
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3)
}

.posttext {
    --tw-leading: 1.6;
    white-space: pre-line;
    color: var(--pm-text);
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.6
}

.posttext+.posttext {
    margin-top: calc(var(--spacing) * 2.5)
}

.posttags {
    margin-top: calc(var(--spacing) * 2.5);
    -moz-column-gap: calc(var(--spacing) * 1.5);
    column-gap: calc(var(--spacing) * 1.5);
    row-gap: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12.5px;
    font-weight: var(--font-weight-medium);
    color: var(--pm-accent);
    flex-wrap: wrap;
    display: flex
}

.postmention {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--pm-accent)
}

.postmedia {
    padding: calc(var(--spacing) * 4);
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--pm-accent) 0%, #4318a8 62%, #14162a 100%);
    color: #fff;
    border-block: 1px solid var(--pm-line);
    flex-direction: column;
    justify-content: flex-end;
    display: flex;
    position: relative;
    overflow: hidden
}

.postmedia:before {
    content: "";
    background-image: radial-gradient(circle at 1px 1px, #fff3 1px, #0000 0);
    background-size: 16px 16px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.postmedia>* {
    position: relative
}

.postmedia b {
    --tw-leading: var(--leading-snug);
    font-size: 15px;
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold)
}

.postmedia small {
    opacity: .75;
    font-size: 11px
}

.postmedia-tag {
    inset-inline-end: calc(var(--spacing) * 3.5);
    top: calc(var(--spacing) * 3.5);
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    background: #ffffff2e;
    display: inline-flex;
    position: absolute
}

.postmock[data-platform=instagram] .postmedia,
.postmock[data-platform=tiktok] .postmedia,
.postmock[data-platform=pinterest] .postmedia {
    aspect-ratio: 4/5
}

.postvideo-play {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    inset-inline-start: 50%;
    background: #ffffff38;
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.postvideo-time {
    inset-inline-end: calc(var(--spacing) * 3.5);
    bottom: calc(var(--spacing) * 3.5);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    --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, );
    background: #0009;
    border-radius: .25rem;
    position: absolute
}

.postcarousel {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-bottom: var(--spacing);
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    display: flex;
    overflow-x: auto
}

.postslide {
    border-radius: var(--radius-xl);
    width: 62%;
    padding: calc(var(--spacing) * 3.5);
    aspect-ratio: 4/5;
    scroll-snap-align: start;
    background: linear-gradient(150deg, var(--pm-accent) 0%, #3b1078 70%, #14162a 100%);
    color: #fff;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: space-between;
    display: flex;
    position: relative;
    overflow: hidden
}

.postslide b {
    --tw-leading: var(--leading-snug);
    font-size: 14px;
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold)
}

.postslide small {
    opacity: .75;
    font-size: 10.5px
}

.postslide-no {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    background: #fff3;
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.postdots {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 2.5);
    display: flex
}

.postdot {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    background-color: var(--pm-line);
    border-radius: 3.40282e38px;
    display: block
}

.postdot.is-on {
    width: calc(var(--spacing) * 4);
    background-color: var(--pm-accent)
}

.postgrid {
    gap: calc(var(--spacing) * .5);
    border-block: 1px solid var(--pm-line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
}

.postgrid>span {
    padding: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    aspect-ratio: 1;
    background: linear-gradient(150deg, var(--pm-accent), #24123f);
    align-items: flex-end;
    display: flex;
    position: relative
}

.postgrid>span:nth-child(2) {
    background: linear-gradient(150deg, #7a13f0, #14162a)
}

.postgrid>span:nth-child(3) {
    background: linear-gradient(150deg, #0f8f86, #14162a)
}

.postgrid>span:nth-child(4) {
    background: linear-gradient(150deg, #c2410c, #14162a)
}

.postpoll {
    margin-top: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    display: flex
}

.postpoll-row {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--pm-line);
    color: var(--pm-text);
    display: flex;
    position: relative;
    overflow: hidden
}

.postpoll-fill {
    background-color: var(--pm-accent);
    opacity: .14;
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--spacing) * 0)
}

.postpoll-row>span {
    position: relative
}

.postpoll-row b {
    --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, );
    color: var(--pm-accent);
    position: relative
}

.postpoll-meta {
    margin-top: calc(var(--spacing) * 1.5);
    color: var(--pm-muted);
    margin-bottom: 0;
    font-size: 10.5px
}

.postlink {
    margin-top: calc(var(--spacing) * 3);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    border: 1px solid var(--pm-line);
    background-color: var(--pm-soft);
    display: flex
}

.postlink-thumb {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-white);
    background: linear-gradient(135deg, var(--pm-accent), #4318a8);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.postlink-host {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--pm-muted);
    font-size: 10px
}

.postlink-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--pm-text);
    overflow: hidden
}

.postlink-desc {
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pm-muted);
    font-size: 11px;
    overflow: hidden
}

.postmetrics {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    color: var(--pm-muted);
    border-top: 1px solid var(--pm-line);
    font-size: 11.5px;
    display: flex
}

.postreact {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--color-white);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    margin-inline-start: calc(var(--spacing) * -1);
    font-size: 8px;
    display: inline-flex
}

.postreact:first-child {
    margin-inline-start: 0
}

.postreact {
    border: 1.5px solid var(--pm-card)
}

.postbar {
    border-top: 1px solid var(--pm-line);
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    display: grid
}

.postaction {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    padding-block: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    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));
    --tw-duration: .2s;
    color: var(--pm-muted);
    background-color: #0000;
    border-width: 0;
    transition-duration: .2s;
    display: inline-flex
}

.postaction:hover {
    background-color: var(--pm-soft);
    color: var(--pm-accent)
}

.postaction i {
    font-size: 13px
}

.postcomments {
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--pm-line);
    background-color: var(--pm-soft);
    flex-direction: column;
    display: flex
}

.postcomment-avatar {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg, #7a13f0, #4318a8);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.postcomment-body {
    border-radius: var(--radius-xl);
    min-width: 0;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    background-color: var(--pm-card);
    flex-direction: column;
    display: flex
}

.postcomment-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--pm-text)
}

.postcomment-text {
    --tw-leading: var(--leading-snug);
    font-size: 11.5px;
    line-height: var(--leading-snug);
    color: var(--pm-muted);
    margin-bottom: 0
}

.postlimit {
    gap: var(--spacing);
    width: 100%;
    padding-inline: var(--spacing);
    flex-direction: column;
    display: flex
}

.postlimit-top {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--pm-muted);
    font-size: 10.5px;
    display: flex
}

.postlimit-top b {
    --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, );
    color: var(--pm-text)
}

.postlimit-bar {
    height: var(--spacing);
    background-color: var(--pm-line);
    border-radius: 3.40282e38px;
    width: 100%;
    display: block;
    overflow: hidden
}

.postlimit-fill {
    background-color: var(--pm-accent);
    border-radius: 3.40282e38px;
    height: 100%;
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
    display: block
}

.postlimit-fill.is-over {
    background-color: var(--color-danger)
}

.socplat {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-border-color);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    scrollbar-width: none;
    flex-shrink: 0;
    display: flex;
    overflow-x: auto
}

.socplat::-webkit-scrollbar {
    display: none
}

.socplat-btn {
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    flex-shrink: 0;
    transition-duration: .2s;
    display: inline-flex
}

.socplat-btn:hover {
    border-color: var(--color-primary-200)
}

.socplat-btn.is-on {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.socplat-btn i {
    font-size: 13px
}

.postmock [data-soc-part] {
    transition: opacity .45s, transform .45s cubic-bezier(.22, 1, .36, 1)
}

.postmock.is-building [data-soc-part] {
    opacity: 0;
    transform: translateY(12px)
}

.postmock.is-building [data-soc-part].is-revealed {
    opacity: 1;
    transform: none
}

.socinspect {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3.5);
    display: grid
}

@media(min-width:576px) {
    .socinspect {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.soctag {
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: inline-flex
}

.soctag:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white)
}

[data-theme=dark] .soctag:hover {
    color: #fff
}

.soctag.is-off {
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    color: var(--color-gray-400);
    text-decoration-line: line-through
}

.socvars {
    gap: calc(var(--spacing) * 2.5);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    display: grid
}

.socvar {
    cursor: pointer;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    text-align: start;
    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));
    --tw-duration: .2s;
    flex-direction: column;
    transition-duration: .2s;
    display: flex
}

.socvar:hover {
    border-color: var(--color-primary-200)
}

.socvar.is-on {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.sochash {
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    display: flex
}

.socassets {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    display: grid
}

.socasset {
    cursor: pointer;
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 2);
    text-align: start;
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    aspect-ratio: 4/3;
    background: linear-gradient(150deg, #7a13f0, #24123f);
    flex-direction: column;
    justify-content: flex-end;
    display: flex;
    position: relative;
    overflow: hidden
}

.socasset:nth-child(3n+2) {
    background: linear-gradient(150deg, #0f8f86, #10222b)
}

.socasset:nth-child(3n+3) {
    background: linear-gradient(150deg, #c2410c, #2b1410)
}

.socasset span {
    position: relative
}

.socasset .socasset-kind {
    inset-inline-end: calc(var(--spacing) * 2);
    top: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    background: #fff3;
    border-radius: .25rem;
    font-size: 9px;
    position: absolute
}

.soccal {
    gap: calc(var(--spacing) * 1.5);
    padding: calc(var(--spacing) * 3.5);
    grid-template-columns: repeat(7, minmax(0, 1fr));
    display: grid
}

.soccal-slot.is-on {
    background-image: var(--background-image-primary-gradient)
}

.soccal-day.is-today {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.postmock.hidden,
.postcard.hidden,
.postmedia.hidden,
.postcarousel.hidden,
.postgrid.hidden,
.postpoll.hidden,
.postlink.hidden,
.postvideo-play.hidden,
.postcomments.hidden,
.postdots.hidden,
.socvar.hidden,
.socasset.hidden {
    display: none !important
}

.lcdot {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    background-color: var(--color-gray-300);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    margin-inline-start: auto;
    display: block
}

.lcdot.is-live {
    background-color: var(--color-success);
    animation: 2.4s ease-in-out infinite studio-breathe
}

.lcdot.is-waiting {
    background-color: var(--color-warning)
}

.lcdot.is-escalated {
    background-color: var(--color-danger)
}

.lcdot.is-human {
    background-color: var(--color-info)
}

.lcdot.is-resolved {
    background-color: var(--color-gray-300)
}

.lcstream {
    gap: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex
}

.lcmsg {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    max-width: 86%;
    display: flex
}

.lcmsg.is-user {
    flex-direction: row-reverse;
    margin-inline-start: auto
}

.lcmsg-avatar {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.lcmsg-body {
    flex-direction: column;
    min-width: 0;
    display: flex
}

.lcbubble {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-relaxed);
    font-size: 12.5px;
    line-height: var(--leading-relaxed);
    color: var(--color-default)
}

.lcmsg.is-user .lcbubble {
    background-color: var(--color-white);
    color: var(--color-dark)
}

.lcmsg.is-ai .lcbubble {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50)
}

.lcmsg-foot {
    margin-top: var(--spacing);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    color: var(--color-gray-400);
    flex-wrap: wrap;
    font-size: 10px;
    display: flex
}

.lcmsg.is-user .lcmsg-foot {
    justify-content: flex-end
}

.lctyping {
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    display: inline-flex
}

.lctyping span {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    background-color: var(--color-gray-400);
    border-radius: 3.40282e38px;
    animation: 1.2s ease-in-out infinite lc-typing;
    display: block
}

.lctyping span:nth-child(2) {
    animation-delay: .15s
}

.lctyping span:nth-child(3) {
    animation-delay: .3s
}

@keyframes lc-typing {

    0%,
    60%,
    to {
        opacity: .3;
        transform: translateY(0)
    }

    30% {
        opacity: 1;
        transform: translateY(-3px)
    }
}

.lcmark {
    margin-block: var(--spacing);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    display: flex
}

.lcmark:before,
.lcmark:after {
    content: "";
    background-color: var(--color-border-color);
    flex: 1;
    height: 1px
}

.lcmark.is-alert {
    color: var(--color-danger)
}

.lcrefs {
    margin-top: calc(var(--spacing) * 1.5);
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    display: flex
}

.lcref {
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-info-50);
    background-color: var(--color-info-50);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-info);
    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));
    --tw-duration: .2s;
    transition-duration: .2s;
    display: inline-flex
}

.lcref:hover {
    border-color: var(--color-info);
    background-color: var(--color-info);
    color: var(--color-white)
}

[data-theme=dark] .lcref:hover {
    color: #fff
}

.lcsugs {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex
}

.lcsug {
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    font-size: 11.5px;
    transition-duration: .2s;
    display: inline-flex
}

.lcsug:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.lcsug i {
    color: var(--color-gray-400);
    flex-shrink: 0;
    font-size: 11px
}

.lcsug:hover i {
    color: var(--color-primary)
}

.lcsummary {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 3)
}

.lcfeed {
    padding-block: var(--spacing);
    flex-direction: column;
    gap: 0;
    padding-inline-start: var(--spacing);
    display: flex;
    position: relative
}

.lcevent {
    gap: calc(var(--spacing) * 3);
    padding-inline-start: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 4);
    display: flex;
    position: relative
}

.lcevent:before {
    content: "";
    top: calc(var(--spacing) * 5);
    background-color: var(--color-border-color);
    bottom: 0;
    width: 1px;
    position: absolute;
    inset-inline-start: 7px
}

.lcevent:last-child:before {
    display: none
}

.lcevent-dot {
    top: var(--spacing);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    background-color: var(--color-gray-300);
    color: var(--color-white);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    display: inline-flex;
    position: absolute;
    inset-inline-start: 0
}

.lcevent-dot.is-ok {
    background-color: var(--color-success)
}

.lcevent-dot.is-info {
    background-color: var(--color-info)
}

.lcevent-dot.is-ai {
    background-color: var(--color-primary)
}

.lcevent-dot.is-warn {
    background-color: var(--color-warning)
}

.lcevent-dot.is-alert {
    background-color: var(--color-danger)
}

[data-theme=dark] .lcevent-dot {
    color: #fff
}

.lcevent-dot.is-live {
    animation: 2s ease-in-out infinite studio-breathe
}

.lcevent-body {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.lcevent-title {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    display: flex
}

.lcevent-time {
    --tw-font-weight: var(--font-weight-normal);
    font-size: 10px;
    font-weight: var(--font-weight-normal);
    color: var(--color-gray-400);
    --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, );
    flex-shrink: 0
}

.lcevent-note {
    margin-top: calc(var(--spacing) * .5);
    --tw-leading: var(--leading-snug);
    font-size: 11.5px;
    line-height: var(--leading-snug);
    color: var(--color-gray-500);
    margin-bottom: 0
}

.lcring {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
    background: conic-gradient(var(--color-primary) calc(var(--lc-score, 0) * 1%), var(--color-gray-200) 0);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.lcring:after {
    content: "";
    background-color: var(--color-white);
    border-radius: 3.40282e38px;
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px
}

.lcring b {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, );
    position: relative
}

.lcring small {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    font-size: 9px;
    display: block;
    position: relative
}

.lccmds {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
}

.lccmd {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    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));
    --tw-duration: .2s;
    flex-direction: column;
    transition-duration: .2s;
    display: inline-flex
}

.lccmd:hover {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.lccmd i {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
}

.lccmd.is-on {
    border-color: var(--color-primary-200);
    background-color: var(--color-primary-50);
    color: var(--color-primary)
}

.lccmd.is-danger:hover {
    border-color: var(--color-danger-50);
    background-color: var(--color-danger-50);
    color: var(--color-danger)
}

.lcjourney {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3.5);
    flex-wrap: wrap;
    display: flex
}

.lcstep {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    display: inline-flex
}

.lcstep.is-done {
    border-color: var(--color-success-50);
    background-color: var(--color-success-50);
    color: var(--color-success)
}

.lcstep.is-now {
    border-style: var(--tw-border-style);
    background-image: var(--background-image-primary-gradient);
    color: var(--color-white);
    border-width: 0
}

[data-theme=dark] .lcstep.is-now {
    color: #fff
}

.lcjourney>i {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-gray-400);
    flex-shrink: 0
}

[dir=rtl] .lcjourney>i {
    transform: scaleX(-1)
}

.lcmetrics {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3.5);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    display: grid
}

.lcmetric {
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-light);
    padding: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex
}

.lcmetric-top b {
    --tw-leading: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-size: 16px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    --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, )
}

.lcmetric-top span {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-400);
    text-transform: uppercase;
    font-size: 9.5px
}

.lcmsg.hidden,
.lctyping.hidden,
.lcmark.hidden,
.lcsugs.hidden,
.lcsummary.hidden,
.lcevent.hidden,
.lcstep.hidden,
.lcmetric.hidden {
    display: none !important
}

[data-theme=dark] .lcmsg-avatar {
    color: #fff
}

.emldoc {
    --em-card: #fff;
    --em-text: #16181c;
    --em-muted: #5b6470;
    --em-line: #e3e6eb;
    --em-soft: #f5f6f8;
    --em-accent: #7a13f0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    width: 100%;
    padding-block: var(--spacing);
    color: var(--em-text);
    flex-direction: column;
    max-width: 640px;
    margin-inline: auto;
    transition: max-width .35s cubic-bezier(.22, 1, .36, 1);
    display: flex
}

.emldoc[data-device=mobile] {
    max-width: 400px
}

.emldoc.is-dark {
    --em-card: #16181d;
    --em-text: #e9ebee;
    --em-muted: #949ca8;
    --em-line: #262a31;
    --em-soft: #1d2027;
    --em-accent: #c4a9ff
}

.emlwin {
    background-color: var(--em-card);
    border: 1px solid var(--em-line);
    border-radius: 14px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 14px 38px #1018281a
}

.emlwin-head {
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--em-line);
    background-color: var(--em-soft);
    flex-direction: column;
    display: flex
}

.emlrow-label {
    width: calc(var(--spacing) * 11);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 9.5px;
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--em-muted);
    flex-shrink: 0
}

.emlrow-value {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--em-text);
    display: flex;
    overflow: hidden
}

.emlrow-avatar {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 8px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--em-accent), #4318a8);
    border-radius: 3.40282e38px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.emlrow-chip {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * .5);
    --tw-font-weight: var(--font-weight-medium);
    font-size: 9.5px;
    font-weight: var(--font-weight-medium);
    background-color: var(--em-card);
    border: 1px solid var(--em-line);
    color: var(--em-muted);
    border-radius: .25rem;
    align-items: center;
    display: inline-flex
}

.emlsubject {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--em-line)
}

.emlsubject h2 {
    --tw-leading: var(--leading-snug);
    font-size: 16px;
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--em-text);
    margin-bottom: 0
}

.emlpaper {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4)
}

@media(min-width:576px) {
    .emlpaper {
        padding-inline: calc(var(--spacing) * 6);
        padding-block: calc(var(--spacing) * 5)
    }
}

.emlgreet {
    margin-bottom: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 13.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--em-text)
}

.emltext {
    margin-bottom: calc(var(--spacing) * 3.5);
    --tw-leading: 1.75;
    color: var(--em-text);
    font-size: 13px;
    line-height: 1.75
}

.emltext:last-child {
    margin-bottom: 0
}

.emltext b,
.emltext strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold)
}

.emllist {
    margin-bottom: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: column;
    padding: 0;
    display: flex
}

.emllist li {
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    --tw-leading: 1.7;
    color: var(--em-text);
    font-size: 13px;
    line-height: 1.7;
    list-style-type: none;
    display: flex
}

.emllist li i {
    margin-top: var(--spacing);
    color: var(--em-accent);
    flex-shrink: 0;
    font-size: 11px
}

.emlquote {
    margin-block: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-leading: var(--leading-relaxed);
    font-size: 12.5px;
    line-height: var(--leading-relaxed);
    border-inline-start: 2px solid var(--em-accent);
    color: var(--em-muted);
    padding-inline-start: calc(var(--spacing) * 3.5);
    font-style: italic
}

.emlscroll {
    margin-inline: calc(var(--spacing) * -1);
    margin-bottom: calc(var(--spacing) * 4);
    padding-inline: var(--spacing);
    scrollbar-width: thin;
    overflow-x: auto
}

.emltable {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px
}

.emltable th {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    text-align: start;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--em-text);
    background-color: var(--em-soft);
    border: 1px solid var(--em-line)
}

.emltable td {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    vertical-align: top;
    color: var(--em-text);
    border: 1px solid var(--em-line)
}

.emltable td.is-num {
    text-align: end;
    --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, )
}

.emlcta {
    margin-block: calc(var(--spacing) * 5);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-direction: column;
    display: flex
}

.emlcta-btn {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--em-accent), #4318a8);
    display: inline-flex;
    box-shadow: 0 6px 18px #7a13f03d
}

.emldoc.is-dark .emlcta-btn {
    color: #14162a
}

.emlcta-note {
    color: var(--em-muted);
    margin-bottom: 0;
    font-size: 10.5px
}

.emlsig {
    margin-top: calc(var(--spacing) * 5);
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
    border-top: 1px solid var(--em-line);
    display: flex
}

.emlsig-avatar {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
    border-radius: var(--radius-xl);
    --tw-font-weight: var(--font-weight-bold);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--em-accent), #4318a8);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.emlsig-name {
    --tw-font-weight: var(--font-weight-bold);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--em-text)
}

.emlsig-role {
    color: var(--em-muted);
    font-size: 11.5px
}

.emlsig-links {
    margin-top: calc(var(--spacing) * 1.5);
    align-items: center;
    -moz-column-gap: calc(var(--spacing) * 3);
    column-gap: calc(var(--spacing) * 3);
    row-gap: var(--spacing);
    color: var(--em-muted);
    flex-wrap: wrap;
    font-size: 11px;
    display: flex
}

.emlsig-links span {
    align-items: center;
    gap: var(--spacing);
    display: inline-flex
}

.emlsig-links i {
    color: var(--em-accent);
    font-size: 11px
}

.emlbrand {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--em-line);
    background-color: var(--em-soft);
    color: var(--em-muted);
    flex-wrap: wrap;
    font-size: 10px;
    display: flex
}

.emlbrand-mark {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--em-text);
    display: inline-flex
}

.emlbrand-mark span {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    border-radius: var(--radius-md);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--em-accent), #4318a8);
    justify-content: center;
    align-items: center;
    font-size: 10px;
    display: inline-flex
}

.emlattach {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--em-line);
    flex-wrap: wrap;
    display: flex
}

.emlfile {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    background-color: var(--em-soft);
    border: 1px solid var(--em-line);
    color: var(--em-text);
    font-size: 11px;
    display: inline-flex
}

.emlfile i {
    color: var(--em-accent);
    font-size: 13px
}

.emlfile small {
    color: var(--em-muted)
}

.emlmeter {
    gap: var(--spacing);
    width: 100%;
    padding-inline: var(--spacing);
    flex-direction: column;
    display: flex
}

.emlmeter-top {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--em-muted);
    font-size: 10.5px;
    display: flex
}

.emlmeter-top b {
    --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, );
    color: var(--em-text)
}

.emlmeter-bar {
    height: var(--spacing);
    background-color: var(--em-line);
    border-radius: 3.40282e38px;
    width: 100%;
    display: block;
    overflow: hidden
}

.emlmeter-fill {
    background-color: var(--em-accent);
    border-radius: 3.40282e38px;
    height: 100%;
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
    display: block
}

.emlmeter-fill.is-long {
    background-color: var(--color-warning)
}

.emldoc.is-reading {
    max-width: 650px
}

.emldoc.is-reading .emlwin {
    box-shadow: none;
    background-color: #0000;
    border-color: #0000
}

.emldoc.is-reading .emlwin-head,
.emldoc.is-reading .emlbrand,
.emldoc.is-reading .emlattach {
    display: none
}

.emldoc.is-reading .emlsubject {
    border-bottom: 0
}

.emldoc.is-reading .emltext,
.emldoc.is-reading .emllist li {
    --tw-leading: 1.85;
    font-size: 14.5px;
    line-height: 1.85
}

.emldoc [data-eml-part] {
    transition: opacity .45s, transform .45s cubic-bezier(.22, 1, .36, 1)
}

.emldoc.is-building [data-eml-part] {
    opacity: 0;
    transform: translateY(12px)
}

.emldoc.is-building [data-eml-part].is-revealed {
    opacity: 1;
    transform: none
}

.emlinspect {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3.5);
    display: grid
}

@media(min-width:576px) {
    .emlinspect {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.emlcard {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-border-color);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    flex-direction: column;
    display: flex
}

.emldoc.hidden,
.emlwin.hidden,
.emlcta.hidden,
.emltable.hidden,
.emlattach.hidden,
.emllist.hidden,
.emlsig.hidden,
.emlbrand.hidden,
.emlcard.hidden,
.emlscroll.hidden {
    display: none !important
}

@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-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-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-divide-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: 0
}

@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-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-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

@property --tw-text-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-text-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes ping {

    75%,
    to {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}