/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: #fff4f3;
    --color-red-100: #ffe4e2;
    --color-red-200: #fbcbc7;
    --color-red-300: #ffa8a0;
    --color-red-400: #ff7c6b;
    --color-red-500: #ff5530;
    --color-red-600: #e53f00;
    --color-red-700: #c03300;
    --color-red-800: #9f2900;
    --color-red-900: #87250b;
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-green-50: #f4fef6;
    --color-green-100: #e0fce7;
    --color-green-200: #baf9cc;
    --color-green-300: #8af7ac;
    --color-green-400: #41e683;
    --color-green-500: #01cb69;
    --color-green-600: #01a856;
    --color-green-700: #058443;
    --color-green-800: #0f6835;
    --color-green-900: #10562d;
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-blue-50: rgb(239 248 255);
    --color-blue-100: rgb(209 233 255);
    --color-blue-200: rgb(178 221 255);
    --color-blue-300: rgb(132 202 255);
    --color-blue-400: rgb(83 177 253);
    --color-blue-500: rgb(46 144 250);
    --color-blue-600: rgb(21 112 239);
    --color-blue-700: rgb(23 92 211);
    --color-blue-800: rgb(24 73 169);
    --color-blue-900: rgb(25 65 133);
    --color-blue-950: rgb(16 42 86);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-purple-50: #f6f3ff;
    --color-purple-100: #f0ebff;
    --color-purple-200: #e0d5ff;
    --color-purple-300: #c6b0fb;
    --color-purple-400: #ac83fd;
    --color-purple-500: #9450fc;
    --color-purple-600: #852df2;
    --color-purple-700: #6e2ec5;
    --color-purple-800: #592e9a;
    --color-purple-900: #4a336d;
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-50: rgb(250 250 250);
    --color-gray-100: rgb(245 245 245);
    --color-gray-200: rgb(233 234 235);
    --color-gray-300: rgb(213 215 218);
    --color-gray-400: rgb(164 167 174);
    --color-gray-500: rgb(113 118 128);
    --color-gray-600: rgb(83 88 98);
    --color-gray-700: rgb(65 70 81);
    --color-gray-800: rgb(37 43 55);
    --color-gray-900: rgb(24 29 39);
    --color-gray-950: rgb(10 13 18);
    --color-black: rgb(0 0 0);
    --color-white: rgb(255 255 255);
    --spacing: 0.25rem;
    --container-3xs: 16rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: calc(var(--spacing) * 3);
    --text-xs--line-height: calc(var(--spacing) * 4.5);
    --text-sm: calc(var(--spacing) * 3.5);
    --text-sm--line-height: calc(var(--spacing) * 5);
    --text-lg: calc(var(--spacing) * 4.5);
    --text-lg--line-height: calc(var(--spacing) * 7);
    --text-xl: calc(var(--spacing) * 5);
    --text-xl--line-height: calc(var(--spacing) * 7.5);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --leading-snug: 1.375;
    --radius-xs: 0.25rem;
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-signature-authentication-mitid: #0060e6;
    --color-signature-authentication-mitid_hover: #0056cf;
    --color-signature-authentication-bankid: #183E4F;
    --color-signature-authentication-bankid_hover: #122f3c;
    --color-signature-authentication-ftn: var(--color-gray-800);
    --color-signature-authentication-ftn_hover: var(--color-gray-900);
    --color-signature-authentication-email-otp: linear-gradient(to top right, #8CA3DA, #CFBEC7);
    --color-signature-authentication-email-otp_hover: linear-gradient(to top right, #7B93CC, #C1AEB9);
    --color-print-body: var(--color-black);
    --color-contract-status-draft-100: var(--color-slate-100);
    --color-contract-status-draft-200: var(--color-slate-200);
    --color-contract-status-draft-300: var(--color-slate-300);
    --color-contract-status-draft-400: var(--color-slate-400);
    --color-contract-status-draft-500: var(--color-slate-500);
    --color-contract-status-draft-600: var(--color-slate-600);
    --color-contract-status-draft-700: var(--color-slate-700);
    --color-contract-status-draft-800: var(--color-slate-800);
    --color-contract-status-draft-900: var(--color-slate-900);
    --color-contract-status-pending-100: var(--color-blue-100);
    --color-contract-status-pending-200: var(--color-blue-200);
    --color-contract-status-pending-300: var(--color-blue-300);
    --color-contract-status-pending-400: var(--color-blue-400);
    --color-contract-status-pending-500: var(--color-blue-500);
    --color-contract-status-pending-600: var(--color-blue-600);
    --color-contract-status-pending-700: var(--color-blue-700);
    --color-contract-status-pending-800: var(--color-blue-800);
    --color-contract-status-pending-900: var(--color-blue-900);
    --color-contract-status-signed-100: var(--color-green-100);
    --color-contract-status-signed-200: var(--color-green-200);
    --color-contract-status-signed-300: var(--color-green-300);
    --color-contract-status-signed-400: var(--color-green-400);
    --color-contract-status-signed-500: var(--color-green-500);
    --color-contract-status-signed-600: var(--color-green-600);
    --color-contract-status-signed-700: var(--color-green-700);
    --color-contract-status-signed-800: var(--color-green-800);
    --color-contract-status-signed-900: var(--color-green-900);
    --color-contract-status-rejected-100: var(--color-red-100);
    --color-contract-status-rejected-200: var(--color-red-200);
    --color-contract-status-rejected-300: var(--color-red-300);
    --color-contract-status-rejected-400: var(--color-red-400);
    --color-contract-status-rejected-500: var(--color-red-500);
    --color-contract-status-rejected-600: var(--color-red-600);
    --color-contract-status-rejected-700: var(--color-red-700);
    --color-contract-status-rejected-800: var(--color-red-800);
    --color-contract-status-rejected-900: var(--color-red-900);
    --color-contract-status-cancelled-100: var(--color-slate-100);
    --color-contract-status-cancelled-200: var(--color-slate-200);
    --color-contract-status-cancelled-300: var(--color-slate-300);
    --color-contract-status-cancelled-400: var(--color-slate-400);
    --color-contract-status-cancelled-500: var(--color-slate-500);
    --color-contract-status-cancelled-600: var(--color-slate-600);
    --color-contract-status-cancelled-700: var(--color-slate-700);
    --color-contract-status-cancelled-800: var(--color-slate-800);
    --color-contract-status-cancelled-900: var(--color-slate-900);
    --color-fill-mode-issuer-100: var(--color-blue-100);
    --color-fill-mode-issuer-200: var(--color-blue-200);
    --color-fill-mode-issuer-300: var(--color-blue-300);
    --color-fill-mode-issuer-400: var(--color-blue-400);
    --color-fill-mode-issuer-500: var(--color-blue-500);
    --color-fill-mode-issuer-600: var(--color-blue-600);
    --color-fill-mode-issuer-700: var(--color-blue-700);
    --color-fill-mode-issuer-800: var(--color-blue-800);
    --color-fill-mode-issuer-900: var(--color-blue-900);
    --color-fill-mode-signer-100: var(--color-green-100);
    --color-fill-mode-signer-200: var(--color-green-200);
    --color-fill-mode-signer-300: var(--color-green-300);
    --color-fill-mode-signer-400: var(--color-green-400);
    --color-fill-mode-signer-500: var(--color-green-500);
    --color-fill-mode-signer-600: var(--color-green-600);
    --color-fill-mode-signer-700: var(--color-green-700);
    --color-fill-mode-signer-800: var(--color-green-800);
    --color-fill-mode-signer-900: var(--color-green-900);
    --font-body: "Albert Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Switzer", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --text-md: calc(var(--spacing) * 4);
    --text-md--line-height: calc(var(--spacing) * 6);
    --text-display-xs: calc(var(--spacing) * 6);
    --text-display-xs--line-height: calc(var(--spacing) * 8);
    --text-display-sm: calc(var(--spacing) * 7.5);
    --text-display-sm--line-height: calc(var(--spacing) * 9.5);
    --text-display-xl: calc(var(--spacing) * 15);
    --text-display-xl--line-height: calc(var(--spacing) * 18);
    --text-display-xl--letter-spacing: -1.2px;
    --radius-none: 0px;
    --radius-full: 9999px;
    --shadow-skeumorphic: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
    --color-brand-50: #F7EEFF;
    --color-brand-100: #EDD9FF;
    --color-brand-200: #D9B0FF;
    --color-brand-300: #C588FF;
    --color-brand-500: #9E36FF;
    --color-brand-600: #8300FD;
    --color-brand-700: #6600C5;
    --color-brand-800: #49008D;
    --color-brand-900: #2C0055;
    --color-connie-brand-600: #8300FD;
    --color-connie-brand-900: #2C0055;
    --color-error-50: rgb(254 243 242);
    --color-error-100: rgb(254 228 226);
    --color-error-200: rgb(254 205 202);
    --color-error-300: rgb(253 162 155);
    --color-error-500: rgb(240 68 56);
    --color-error-600: rgb(217 45 32);
    --color-error-700: rgb(180 35 24);
    --color-warning-50: rgb(255 250 235);
    --color-warning-100: rgb(254 240 199);
    --color-warning-200: rgb(254 223 137);
    --color-warning-400: rgb(253 176 34);
    --color-warning-500: rgb(247 144 9);
    --color-warning-600: rgb(220 104 3);
    --color-warning-700: rgb(181 71 8);
    --color-success-25: #F7FEF7;
    --color-success-50: #E4FBE3;
    --color-success-100: #D2F8D1;
    --color-success-200: #B0F3AE;
    --color-success-300: #8DEE8A;
    --color-success-500: #48E343;
    --color-success-600: #24CF1F;
    --color-success-700: #1C9E18;
    --color-utility-blue-50: var(--color-blue-50);
    --color-utility-blue-200: var(--color-blue-200);
    --color-utility-blue-500: var(--color-blue-500);
    --color-utility-blue-700: var(--color-blue-700);
    --color-utility-brand-50: var(--color-brand-50);
    --color-utility-brand-200: var(--color-brand-200);
    --color-utility-brand-500: var(--color-brand-500);
    --color-utility-brand-700: var(--color-brand-700);
    --color-utility-gray-50: var(--color-gray-50);
    --color-utility-gray-200: var(--color-gray-200);
    --color-utility-gray-500: var(--color-gray-500);
    --color-utility-gray-700: var(--color-gray-700);
    --color-utility-error-50: var(--color-error-50);
    --color-utility-error-200: var(--color-error-200);
    --color-utility-error-500: var(--color-error-500);
    --color-utility-error-700: var(--color-error-700);
    --color-utility-warning-50: var(--color-warning-50);
    --color-utility-warning-200: var(--color-warning-200);
    --color-utility-warning-500: var(--color-warning-500);
    --color-utility-warning-700: var(--color-warning-700);
    --color-utility-success-50: var(--color-success-50);
    --color-utility-success-200: var(--color-success-200);
    --color-utility-success-300: var(--color-success-300);
    --color-utility-success-500: var(--color-success-500);
    --color-utility-success-700: var(--color-success-700);
    --color-utility-orange-50: var(--color-orange-50);
    --color-utility-orange-200: var(--color-orange-200);
    --color-utility-orange-500: var(--color-orange-500);
    --color-utility-orange-700: var(--color-orange-700);
    --color-utility-indigo-50: var(--color-indigo-50);
    --color-utility-indigo-200: var(--color-indigo-200);
    --color-utility-indigo-500: var(--color-indigo-500);
    --color-utility-indigo-700: var(--color-indigo-700);
    --color-utility-pink-50: var(--color-pink-50);
    --color-utility-pink-200: var(--color-pink-200);
    --color-utility-pink-500: var(--color-pink-500);
    --color-utility-pink-700: var(--color-pink-700);
    --color-utility-purple-50: var(--color-purple-50);
    --color-utility-purple-200: var(--color-purple-200);
    --color-utility-purple-500: var(--color-purple-500);
    --color-utility-purple-700: var(--color-purple-700);
    --color-text-primary: var(--color-gray-900);
    --color-text-tertiary: var(--color-gray-600);
    --color-text-error-primary: var(--color-error-600);
    --color-text-secondary: var(--color-gray-700);
    --color-text-secondary_hover: var(--color-gray-800);
    --color-text-tertiary_hover: var(--color-gray-700);
    --color-text-brand-secondary: var(--color-brand-700);
    --color-text-placeholder: var(--color-gray-500);
    --color-text-placeholder_subtle: var(--color-gray-300);
    --color-text-brand-tertiary: var(--color-brand-600);
    --color-text-quaternary: var(--color-gray-500);
    --color-text-quaternary_hover: var(--color-gray-600);
    --color-text-brand-primary: var(--color-brand-900);
    --color-text-primary_on-brand: var(--color-white);
    --color-text-brand-tertiary_alt: var(--color-brand-600);
    --color-text-brand-secondary_hover: var(--color-brand-800);
    --color-text-error-primary_hover: var(--color-error-700);
    --color-text-quinary: var(--color-gray-400);
    --color-text-quinary_hover: var(--color-gray-500);
    --color-border-secondary: var(--color-gray-200);
    --color-border-error_subtle: var(--color-error-300);
    --color-border-primary: var(--color-gray-300);
    --color-border-brand: var(--color-brand-500);
    --color-border-disabled: var(--color-gray-300);
    --color-border-error: var(--color-error-500);
    --color-border-disabled_subtle: var(--color-gray-200);
    --color-border-secondary_alt: rgb(0 0 0 / 0.08);
    --color-fg-secondary: var(--color-gray-700);
    --color-fg-white: var(--color-white);
    --color-fg-secondary_hover: var(--color-gray-800);
    --color-fg-primary: var(--color-gray-900);
    --color-fg-disabled: var(--color-gray-400);
    --color-fg-brand-secondary: var(--color-brand-500);
    --color-fg-brand-primary: var(--color-brand-600);
    --color-fg-quaternary: var(--color-gray-400);
    --color-fg-quaternary_hover: var(--color-gray-500);
    --color-fg-error-primary: var(--color-error-600);
    --color-fg-disabled_subtle: var(--color-gray-300);
    --color-fg-error-secondary: var(--color-error-500);
    --color-fg-brand-primary_alt: var(--color-fg-brand-primary);
    --color-fg-brand-secondary_alt: var(--color-fg-brand-secondary);
    --color-fg-brand-secondary_hover: var(--color-brand-600);
    --color-bg-primary: var(--color-white);
    --color-bg-tertiary: var(--color-gray-100);
    --color-bg-tertiary_hover: var(--color-gray-200);
    --color-bg-error-secondary: var(--color-error-100);
    --color-bg-warning-secondary: var(--color-warning-100);
    --color-bg-success-secondary: var(--color-success-100);
    --color-bg-brand-solid: var(--color-brand-600);
    --color-bg-error-solid: var(--color-error-600);
    --color-bg-warning-solid: var(--color-warning-600);
    --color-bg-success-solid: var(--color-success-600);
    --color-bg-success-solid_hover: var(--color-success-700);
    --color-bg-secondary_hover: var(--color-gray-100);
    --color-bg-primary_hover: var(--color-gray-50);
    --color-bg-disabled: var(--color-gray-100);
    --color-bg-active: var(--color-gray-50);
    --color-bg-brand-solid_hover: var(--color-brand-700);
    --color-bg-brand-secondary: var(--color-brand-100);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-disabled_subtle: var(--color-gray-50);
    --color-bg-quaternary: var(--color-gray-200);
    --color-bg-quaternary_hover: var(--color-gray-300);
    --color-bg-primary_alt: var(--color-white);
    --color-bg-secondary_alt: var(--color-gray-50);
    --color-bg-overlay: var(--color-gray-950);
    --color-bg-primary-solid: var(--color-gray-950);
    --color-avatar-bg: var(--color-gray-100);
    --color-avatar-contrast-border: rgb(0 0 0 / 0.08);
    --color-button-primary-icon: var(--color-brand-300);
    --color-button-primary-icon_hover: var(--color-brand-200);
    --color-featured-icon-light-fg-brand: var(--color-brand-600);
    --color-featured-icon-light-fg-error: var(--color-error-600);
    --color-featured-icon-light-fg-gray: var(--color-gray-500);
    --color-featured-icon-light-fg-success: var(--color-success-600);
    --color-featured-icon-light-fg-warning: var(--color-warning-600);
    --color-focus-ring: var(--color-brand-500);
    --color-toggle-border: var(--color-gray-300);
    --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
    --background-color-quaternary: var(--color-bg-quaternary);
    --background-color-quaternary_hover: var(--color-bg-quaternary_hover);
    --background-color-brand-solid: var(--color-bg-brand-solid);
    --background-color-disabled: var(--color-bg-disabled);
    --background-color-primary: var(--color-bg-primary);
    --background-color-primary-solid: var(--color-bg-primary-solid);
    --background-color-primary_alt: var(--color-bg-primary_alt);
    --background-color-primary_hover: var(--color-bg-primary_hover);
    --background-color-secondary: var(--color-bg-secondary);
    --background-color-secondary_alt: var(--color-bg-secondary_alt);
    --background-color-secondary_hover: var(--color-bg-secondary_hover);
    --background-color-tertiary: var(--color-bg-tertiary);
    --background-color-tertiary_hover: var(--color-bg-tertiary_hover);
    --background-color-active: var(--color-bg-active);
    --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
    --background-color-overlay: var(--color-bg-overlay);
    --background-color-brand-secondary: var(--color-bg-brand-secondary);
    --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
    --background-color-error-secondary: var(--color-bg-error-secondary);
    --background-color-error-solid: var(--color-bg-error-solid);
    --background-color-warning-secondary: var(--color-bg-warning-secondary);
    --background-color-warning-solid: var(--color-bg-warning-solid);
    --background-color-success-secondary: var(--color-bg-success-secondary);
    --background-color-success-solid: var(--color-bg-success-solid);
    --background-color-success-solid_hover: var(--color-bg-success-solid_hover);
    --background-color-draft: var(--color-gray-400);
    --background-color-pending: var(--color-blue-500);
    --background-color-signed: var(--color-success-500);
    --background-color-rejected: var(--color-error-500);
    --background-color-expired: var(--color-warning-400);
    --text-color-primary: var(--color-text-primary);
    --text-color-primary_on-brand: var(--color-text-primary_on-brand);
    --text-color-secondary: var(--color-text-secondary);
    --text-color-secondary_hover: var(--color-text-secondary_hover);
    --text-color-tertiary: var(--color-text-tertiary);
    --text-color-tertiary_hover: var(--color-text-tertiary_hover);
    --text-color-quaternary: var(--color-text-quaternary);
    --text-color-quaternary_hover: var(--color-text-quaternary_hover);
    --text-color-placeholder: var(--color-text-placeholder);
    --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
    --text-color-brand-secondary: var(--color-text-brand-secondary);
    --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
    --text-color-brand-tertiary: var(--color-text-brand-tertiary);
    --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
    --text-color-error-primary: var(--color-text-error-primary);
    --text-color-error-primary_hover: var(--color-text-error-primary_hover);
    --text-color-draft: var(--color-gray-500);
    --text-color-pending: var(--color-blue-600);
    --text-color-signed: var(--color-success-600);
    --text-color-rejected: var(--color-error-600);
    --text-color-expired: var(--color-warning-500);
    --text-color-quinary: var(--color-text-quinary);
    --text-color-quinary_hover: var(--color-text-quinary_hover);
    --border-color-primary: var(--color-border-primary);
    --border-color-secondary: var(--color-border-secondary);
    --border-color-brand-solid: var(--color-bg-brand-solid);
    --border-color-error: var(--color-border-error);
    --border-color-draft: var(--color-gray-400);
    --border-color-pending: var(--color-blue-600);
    --border-color-signed: var(--color-success-600);
    --border-color-rejected: var(--color-error-600);
    --border-color-expired: var(--color-warning-400);
    --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
    --ring-color-primary: var(--color-border-primary);
    --ring-color-secondary: var(--color-border-secondary);
    --ring-color-secondary_alt: var(--color-border-secondary_alt);
    --ring-color-disabled: var(--color-border-disabled);
    --ring-color-brand: var(--color-border-brand);
    --ring-color-error: var(--color-border-error);
    --ring-color-disabled_subtle: var(--color-border-disabled_subtle);
    --ring-color-error_subtle: var(--color-border-error_subtle);
    --ring-color-draft: var(--color-gray-400);
    --ring-color-pending: var(--color-blue-600);
    --ring-color-signed: var(--color-success-600);
    --ring-color-rejected: var(--color-error-600);
    --outline-color-brand: var(--color-border-brand);
    --outline-color-error: var(--color-border-error);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-x-0 {
    inset-inline: 0;
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }
  .-top-2\.5 {
    top: calc(var(--spacing) * -2.5);
  }
  .-top-11\.25 {
    top: calc(var(--spacing) * -11.25);
  }
  .top-0 {
    top: 0;
  }
  .top-0\.25 {
    top: calc(var(--spacing) * 0.25);
  }
  .top-1\.75 {
    top: calc(var(--spacing) * 1.75);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-\[55\%\] {
    top: 55%;
  }
  .top-\[65\%\] {
    top: 65%;
  }
  .top-\[75\%\] {
    top: 75%;
  }
  .-right-6 {
    right: calc(var(--spacing) * -6);
  }
  .right-0 {
    right: 0;
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-2\.75 {
    right: calc(var(--spacing) * 2.75);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-12 {
    right: calc(var(--spacing) * 12);
  }
  .right-17 {
    right: calc(var(--spacing) * 17);
  }
  .-bottom-6 {
    bottom: calc(var(--spacing) * -6);
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-1\.75 {
    bottom: calc(var(--spacing) * 1.75);
  }
  .bottom-2\.5 {
    bottom: calc(var(--spacing) * 2.5);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }
  .left-0 {
    left: 0;
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-2\.75 {
    left: calc(var(--spacing) * 2.75);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-3\.5 {
    left: calc(var(--spacing) * 3.5);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-12 {
    left: calc(var(--spacing) * 12);
  }
  .left-17 {
    left: calc(var(--spacing) * 17);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .container {
    width: 100%;
    @media (width >= 320px) {
      max-width: 320px;
    }
    @media (width >= 600px) {
      max-width: 600px;
    }
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }
  .m-0 {
    margin: 0;
  }
  .m-0\! {
    margin: 0 !important;
  }
  .-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) * -0.5);
  }
  .-my-1 {
    margin-block: calc(var(--spacing) * -1);
  }
  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }
  .my-1 {
    margin-block: var(--spacing);
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: var(--spacing);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .-mb-3 {
    margin-bottom: calc(var(--spacing) * -3);
  }
  .-mb-12 {
    margin-bottom: calc(var(--spacing) * -12);
  }
  .-mb-px {
    margin-bottom: -1px;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-auto {
    margin-left: auto;
  }
  .icon {
    flex-shrink: 0;
    mask-repeat: no-repeat;
    background-color: currentColor;
    vertical-align: middle;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
  }
  .file-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 2.5rem;
    height: 2.5rem;
  }
  .flag {
    background-image: var(--flag);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 9999px;
    vertical-align: middle;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
  }
  .hero-check-solid {
    --hero-check-solid: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20data-slot%3D%22icon%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M19.916%204.626a.75.75%200%200%201%20.208%201.04l-9%2013.5a.75.75%200%200%201-1.154.114l-6-6a.75.75%200%200%201%201.06-1.06l5.353%205.353%208.493-12.74a.75.75%200%200%201%201.04-.207Z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    -webkit-mask: var(--hero-check-solid);
    mask: var(--hero-check-solid);
    mask-repeat: no-repeat;
    background-color: currentColor;
    vertical-align: middle;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
  }
  .hero-x-mark-solid {
    --hero-x-mark-solid: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%20data-slot%3D%22icon%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.47%205.47a.75.75%200%200%201%201.06%200L12%2010.94l5.47-5.47a.75.75%200%201%201%201.06%201.06L13.06%2012l5.47%205.47a.75.75%200%201%201-1.06%201.06L12%2013.06l-5.47%205.47a.75.75%200%200%201-1.06-1.06L10.94%2012%205.47%206.53a.75.75%200%200%201%200-1.06Z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    -webkit-mask: var(--hero-x-mark-solid);
    mask: var(--hero-x-mark-solid);
    mask-repeat: no-repeat;
    background-color: currentColor;
    vertical-align: middle;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  .line-clamp-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .aspect-\[744\/1052\] {
    aspect-ratio: 744/1052;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .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\/2 {
    width: calc(1 / 2 * 100%);
    height: calc(1 / 2 * 100%);
  }
  .size-1\/3 {
    width: calc(1 / 3 * 100%);
    height: calc(1 / 3 * 100%);
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .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-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }
  .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-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .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-15 {
    width: calc(var(--spacing) * 15);
    height: calc(var(--spacing) * 15);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-18 {
    width: calc(var(--spacing) * 18);
    height: calc(var(--spacing) * 18);
  }
  .size-22 {
    width: calc(var(--spacing) * 22);
    height: calc(var(--spacing) * 22);
  }
  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }
  .size-\[480px\] {
    width: 480px;
    height: 480px;
  }
  .size-auto {
    width: auto;
    height: auto;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-0\.75 {
    height: calc(var(--spacing) * 0.75);
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-13 {
    height: calc(var(--spacing) * 13);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-15 {
    height: calc(var(--spacing) * 15);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-17 {
    height: calc(var(--spacing) * 17);
  }
  .h-18 {
    height: calc(var(--spacing) * 18);
  }
  .h-19 {
    height: calc(var(--spacing) * 19);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-21 {
    height: calc(var(--spacing) * 21);
  }
  .h-22 {
    height: calc(var(--spacing) * 22);
  }
  .h-23 {
    height: calc(var(--spacing) * 23);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-25 {
    height: calc(var(--spacing) * 25);
  }
  .h-26 {
    height: calc(var(--spacing) * 26);
  }
  .h-27 {
    height: calc(var(--spacing) * 27);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-29 {
    height: calc(var(--spacing) * 29);
  }
  .h-30 {
    height: calc(var(--spacing) * 30);
  }
  .h-31 {
    height: calc(var(--spacing) * 31);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-33 {
    height: calc(var(--spacing) * 33);
  }
  .h-34 {
    height: calc(var(--spacing) * 34);
  }
  .h-35 {
    height: calc(var(--spacing) * 35);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-37 {
    height: calc(var(--spacing) * 37);
  }
  .h-38 {
    height: calc(var(--spacing) * 38);
  }
  .h-39 {
    height: calc(var(--spacing) * 39);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-41 {
    height: calc(var(--spacing) * 41);
  }
  .h-42 {
    height: calc(var(--spacing) * 42);
  }
  .h-43 {
    height: calc(var(--spacing) * 43);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-45 {
    height: calc(var(--spacing) * 45);
  }
  .h-46 {
    height: calc(var(--spacing) * 46);
  }
  .h-47 {
    height: calc(var(--spacing) * 47);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-49 {
    height: calc(var(--spacing) * 49);
  }
  .h-50 {
    height: calc(var(--spacing) * 50);
  }
  .h-51 {
    height: calc(var(--spacing) * 51);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-53 {
    height: calc(var(--spacing) * 53);
  }
  .h-54 {
    height: calc(var(--spacing) * 54);
  }
  .h-55 {
    height: calc(var(--spacing) * 55);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-57 {
    height: calc(var(--spacing) * 57);
  }
  .h-58 {
    height: calc(var(--spacing) * 58);
  }
  .h-59 {
    height: calc(var(--spacing) * 59);
  }
  .h-60 {
    height: calc(var(--spacing) * 60);
  }
  .h-61 {
    height: calc(var(--spacing) * 61);
  }
  .h-62 {
    height: calc(var(--spacing) * 62);
  }
  .h-63 {
    height: calc(var(--spacing) * 63);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-65 {
    height: calc(var(--spacing) * 65);
  }
  .h-66 {
    height: calc(var(--spacing) * 66);
  }
  .h-67 {
    height: calc(var(--spacing) * 67);
  }
  .h-68 {
    height: calc(var(--spacing) * 68);
  }
  .h-69 {
    height: calc(var(--spacing) * 69);
  }
  .h-70 {
    height: calc(var(--spacing) * 70);
  }
  .h-71 {
    height: calc(var(--spacing) * 71);
  }
  .h-72 {
    height: calc(var(--spacing) * 72);
  }
  .h-73 {
    height: calc(var(--spacing) * 73);
  }
  .h-74 {
    height: calc(var(--spacing) * 74);
  }
  .h-75 {
    height: calc(var(--spacing) * 75);
  }
  .h-76 {
    height: calc(var(--spacing) * 76);
  }
  .h-77 {
    height: calc(var(--spacing) * 77);
  }
  .h-78 {
    height: calc(var(--spacing) * 78);
  }
  .h-79 {
    height: calc(var(--spacing) * 79);
  }
  .h-80 {
    height: calc(var(--spacing) * 80);
  }
  .h-81 {
    height: calc(var(--spacing) * 81);
  }
  .h-82 {
    height: calc(var(--spacing) * 82);
  }
  .h-83 {
    height: calc(var(--spacing) * 83);
  }
  .h-84 {
    height: calc(var(--spacing) * 84);
  }
  .h-85 {
    height: calc(var(--spacing) * 85);
  }
  .h-86 {
    height: calc(var(--spacing) * 86);
  }
  .h-87 {
    height: calc(var(--spacing) * 87);
  }
  .h-88 {
    height: calc(var(--spacing) * 88);
  }
  .h-89 {
    height: calc(var(--spacing) * 89);
  }
  .h-90 {
    height: calc(var(--spacing) * 90);
  }
  .h-91 {
    height: calc(var(--spacing) * 91);
  }
  .h-92 {
    height: calc(var(--spacing) * 92);
  }
  .h-93 {
    height: calc(var(--spacing) * 93);
  }
  .h-94 {
    height: calc(var(--spacing) * 94);
  }
  .h-95 {
    height: calc(var(--spacing) * 95);
  }
  .h-96 {
    height: calc(var(--spacing) * 96);
  }
  .h-97 {
    height: calc(var(--spacing) * 97);
  }
  .h-98 {
    height: calc(var(--spacing) * 98);
  }
  .h-99 {
    height: calc(var(--spacing) * 99);
  }
  .h-100 {
    height: calc(var(--spacing) * 100);
  }
  .h-\[7px\] {
    height: 7px;
  }
  .h-\[10\%\] {
    height: 10%;
  }
  .h-\[174px\] {
    height: 174px;
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-max {
    height: max-content;
  }
  .h-px {
    height: 1px;
  }
  .max-h-24 {
    max-height: calc(var(--spacing) * 24);
  }
  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }
  .max-h-\[80vh\] {
    max-height: 80vh;
  }
  .max-h-none {
    max-height: none;
  }
  .min-h-0 {
    min-height: 0;
  }
  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }
  .min-h-6 {
    min-height: calc(var(--spacing) * 6);
  }
  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .min-h-full {
    min-height: 100%;
  }
  .w-0 {
    width: 0;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-1 {
    width: var(--spacing);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-2xl {
    width: var(--container-2xl);
  }
  .w-2xs {
    width: var(--container-2xs);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3xl {
    width: var(--container-3xl);
  }
  .w-3xs {
    width: var(--container-3xs);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }
  .w-4xl {
    width: var(--container-4xl);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-5xl {
    width: var(--container-5xl);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-6xl {
    width: var(--container-6xl);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-7xl {
    width: var(--container-7xl);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-13 {
    width: calc(var(--spacing) * 13);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-15 {
    width: calc(var(--spacing) * 15);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .w-18 {
    width: calc(var(--spacing) * 18);
  }
  .w-19 {
    width: calc(var(--spacing) * 19);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-21 {
    width: calc(var(--spacing) * 21);
  }
  .w-22 {
    width: calc(var(--spacing) * 22);
  }
  .w-23 {
    width: calc(var(--spacing) * 23);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-25 {
    width: calc(var(--spacing) * 25);
  }
  .w-26 {
    width: calc(var(--spacing) * 26);
  }
  .w-27 {
    width: calc(var(--spacing) * 27);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-29 {
    width: calc(var(--spacing) * 29);
  }
  .w-30 {
    width: calc(var(--spacing) * 30);
  }
  .w-31 {
    width: calc(var(--spacing) * 31);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-33 {
    width: calc(var(--spacing) * 33);
  }
  .w-34 {
    width: calc(var(--spacing) * 34);
  }
  .w-35 {
    width: calc(var(--spacing) * 35);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-37 {
    width: calc(var(--spacing) * 37);
  }
  .w-38 {
    width: calc(var(--spacing) * 38);
  }
  .w-39 {
    width: calc(var(--spacing) * 39);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-41 {
    width: calc(var(--spacing) * 41);
  }
  .w-42 {
    width: calc(var(--spacing) * 42);
  }
  .w-43 {
    width: calc(var(--spacing) * 43);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-45 {
    width: calc(var(--spacing) * 45);
  }
  .w-46 {
    width: calc(var(--spacing) * 46);
  }
  .w-47 {
    width: calc(var(--spacing) * 47);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-49 {
    width: calc(var(--spacing) * 49);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-51 {
    width: calc(var(--spacing) * 51);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-53 {
    width: calc(var(--spacing) * 53);
  }
  .w-54 {
    width: calc(var(--spacing) * 54);
  }
  .w-55 {
    width: calc(var(--spacing) * 55);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-57 {
    width: calc(var(--spacing) * 57);
  }
  .w-58 {
    width: calc(var(--spacing) * 58);
  }
  .w-59 {
    width: calc(var(--spacing) * 59);
  }
  .w-60 {
    width: calc(var(--spacing) * 60);
  }
  .w-61 {
    width: calc(var(--spacing) * 61);
  }
  .w-62 {
    width: calc(var(--spacing) * 62);
  }
  .w-63 {
    width: calc(var(--spacing) * 63);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-65 {
    width: calc(var(--spacing) * 65);
  }
  .w-66 {
    width: calc(var(--spacing) * 66);
  }
  .w-67 {
    width: calc(var(--spacing) * 67);
  }
  .w-68 {
    width: calc(var(--spacing) * 68);
  }
  .w-69 {
    width: calc(var(--spacing) * 69);
  }
  .w-70 {
    width: calc(var(--spacing) * 70);
  }
  .w-71 {
    width: calc(var(--spacing) * 71);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-73 {
    width: calc(var(--spacing) * 73);
  }
  .w-74 {
    width: calc(var(--spacing) * 74);
  }
  .w-75 {
    width: calc(var(--spacing) * 75);
  }
  .w-76 {
    width: calc(var(--spacing) * 76);
  }
  .w-77 {
    width: calc(var(--spacing) * 77);
  }
  .w-78 {
    width: calc(var(--spacing) * 78);
  }
  .w-79 {
    width: calc(var(--spacing) * 79);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-81 {
    width: calc(var(--spacing) * 81);
  }
  .w-82 {
    width: calc(var(--spacing) * 82);
  }
  .w-83 {
    width: calc(var(--spacing) * 83);
  }
  .w-84 {
    width: calc(var(--spacing) * 84);
  }
  .w-85 {
    width: calc(var(--spacing) * 85);
  }
  .w-86 {
    width: calc(var(--spacing) * 86);
  }
  .w-87 {
    width: calc(var(--spacing) * 87);
  }
  .w-88 {
    width: calc(var(--spacing) * 88);
  }
  .w-89 {
    width: calc(var(--spacing) * 89);
  }
  .w-90 {
    width: calc(var(--spacing) * 90);
  }
  .w-91 {
    width: calc(var(--spacing) * 91);
  }
  .w-92 {
    width: calc(var(--spacing) * 92);
  }
  .w-93 {
    width: calc(var(--spacing) * 93);
  }
  .w-94 {
    width: calc(var(--spacing) * 94);
  }
  .w-95 {
    width: calc(var(--spacing) * 95);
  }
  .w-96 {
    width: calc(var(--spacing) * 96);
  }
  .w-97 {
    width: calc(var(--spacing) * 97);
  }
  .w-98 {
    width: calc(var(--spacing) * 98);
  }
  .w-99 {
    width: calc(var(--spacing) * 99);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-\[18\%\] {
    width: 18%;
  }
  .w-\[20\%\] {
    width: 20%;
  }
  .w-\[25\%\] {
    width: 25%;
  }
  .w-\[calc\(100\%---spacing\(4\)\)\] {
    width: calc(100% - calc(var(--spacing) * 4));
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-lg {
    width: var(--container-lg);
  }
  .w-max {
    width: max-content;
  }
  .w-md {
    width: var(--container-md);
  }
  .w-px {
    width: 1px;
  }
  .w-screen {
    width: 100vw;
  }
  .w-sm {
    width: var(--container-sm);
  }
  .w-xl {
    width: var(--container-xl);
  }
  .w-xs {
    width: var(--container-xs);
  }
  .max-w-0 {
    max-width: 0;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-2xs {
    max-width: var(--container-2xs);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-3xs {
    max-width: var(--container-3xs);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-32 {
    max-width: calc(var(--spacing) * 32);
  }
  .max-w-52 {
    max-width: calc(var(--spacing) * 52);
  }
  .max-w-84 {
    max-width: calc(var(--spacing) * 84);
  }
  .max-w-\[180px\] {
    max-width: 180px;
  }
  .max-w-\[200px\] {
    max-width: 200px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .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-0 {
    min-width: 0;
  }
  .min-w-\[120px\] {
    min-width: 120px;
  }
  .min-w-\[130px\] {
    min-width: 130px;
  }
  .min-w-\[140px\] {
    min-width: 140px;
  }
  .min-w-\[170px\] {
    min-width: 170px;
  }
  .min-w-\[180px\] {
    min-width: 180px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .table-fixed {
    table-layout: fixed;
  }
  .origin-bottom {
    transform-origin: bottom;
  }
  .origin-left {
    transform-origin: 0;
  }
  .origin-right {
    transform-origin: 100%;
  }
  .origin-top {
    transform-origin: top;
  }
  .-translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * -0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    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-0 {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * 0.5);
    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-5 {
    --tw-translate-x: calc(var(--spacing) * 5);
    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-0\.5 {
    --tw-translate-y: calc(var(--spacing) * -0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-\[44\%\] {
    --tw-translate-y: calc(44% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0\.5 {
    --tw-translate-y: calc(var(--spacing) * 0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1 {
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1\/2 {
    --tw-translate-y: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-8 {
    --tw-translate-y: calc(var(--spacing) * 8);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .scroll-py-3 {
    scroll-padding-block: calc(var(--spacing) * 3);
  }
  .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-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-content-center {
    place-content: center;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .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);
  }
  .space-y-1 {
    :where(& > :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)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .-space-x-2 {
    :where(& > :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)));
    }
  }
  .space-x-2 {
    :where(& > :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)));
    }
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-secondary {
    :where(& > :not(:last-child)) {
      border-color: var(--border-color-secondary);
    }
  }
  .divide-white {
    :where(& > :not(:last-child)) {
      border-color: var(--color-white);
    }
  }
  .self-stretch {
    align-self: stretch;
  }
  .justify-self-start {
    justify-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-full {
    border-radius: var(--radius-full);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: var(--radius-none);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
  .rounded-t {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-t-full {
    border-top-left-radius: var(--radius-full);
    border-top-right-radius: var(--radius-full);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-l-full {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-r {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }
  .rounded-r-full {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-b-full {
    border-bottom-right-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
  }
  .rounded-b-md {
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .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-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-black\/10 {
    border-color: color-mix(in srgb, rgb(0 0 0) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .border-brand-200 {
    border-color: var(--color-brand-200);
  }
  .border-brand-solid {
    border-color: var(--border-color-brand-solid);
  }
  .border-contract-status-cancelled-100 {
    border-color: var(--color-contract-status-cancelled-100);
  }
  .border-contract-status-cancelled-200 {
    border-color: var(--color-contract-status-cancelled-200);
  }
  .border-contract-status-cancelled-300 {
    border-color: var(--color-contract-status-cancelled-300);
  }
  .border-contract-status-cancelled-400 {
    border-color: var(--color-contract-status-cancelled-400);
  }
  .border-contract-status-cancelled-500 {
    border-color: var(--color-contract-status-cancelled-500);
  }
  .border-contract-status-cancelled-600 {
    border-color: var(--color-contract-status-cancelled-600);
  }
  .border-contract-status-cancelled-700 {
    border-color: var(--color-contract-status-cancelled-700);
  }
  .border-contract-status-cancelled-800 {
    border-color: var(--color-contract-status-cancelled-800);
  }
  .border-contract-status-cancelled-900 {
    border-color: var(--color-contract-status-cancelled-900);
  }
  .border-contract-status-draft-100 {
    border-color: var(--color-contract-status-draft-100);
  }
  .border-contract-status-draft-200 {
    border-color: var(--color-contract-status-draft-200);
  }
  .border-contract-status-draft-300 {
    border-color: var(--color-contract-status-draft-300);
  }
  .border-contract-status-draft-400 {
    border-color: var(--color-contract-status-draft-400);
  }
  .border-contract-status-draft-500 {
    border-color: var(--color-contract-status-draft-500);
  }
  .border-contract-status-draft-600 {
    border-color: var(--color-contract-status-draft-600);
  }
  .border-contract-status-draft-700 {
    border-color: var(--color-contract-status-draft-700);
  }
  .border-contract-status-draft-800 {
    border-color: var(--color-contract-status-draft-800);
  }
  .border-contract-status-draft-900 {
    border-color: var(--color-contract-status-draft-900);
  }
  .border-contract-status-pending-100 {
    border-color: var(--color-contract-status-pending-100);
  }
  .border-contract-status-pending-200 {
    border-color: var(--color-contract-status-pending-200);
  }
  .border-contract-status-pending-300 {
    border-color: var(--color-contract-status-pending-300);
  }
  .border-contract-status-pending-400 {
    border-color: var(--color-contract-status-pending-400);
  }
  .border-contract-status-pending-500 {
    border-color: var(--color-contract-status-pending-500);
  }
  .border-contract-status-pending-600 {
    border-color: var(--color-contract-status-pending-600);
  }
  .border-contract-status-pending-700 {
    border-color: var(--color-contract-status-pending-700);
  }
  .border-contract-status-pending-800 {
    border-color: var(--color-contract-status-pending-800);
  }
  .border-contract-status-pending-900 {
    border-color: var(--color-contract-status-pending-900);
  }
  .border-contract-status-rejected-100 {
    border-color: var(--color-contract-status-rejected-100);
  }
  .border-contract-status-rejected-200 {
    border-color: var(--color-contract-status-rejected-200);
  }
  .border-contract-status-rejected-300 {
    border-color: var(--color-contract-status-rejected-300);
  }
  .border-contract-status-rejected-400 {
    border-color: var(--color-contract-status-rejected-400);
  }
  .border-contract-status-rejected-500 {
    border-color: var(--color-contract-status-rejected-500);
  }
  .border-contract-status-rejected-600 {
    border-color: var(--color-contract-status-rejected-600);
  }
  .border-contract-status-rejected-700 {
    border-color: var(--color-contract-status-rejected-700);
  }
  .border-contract-status-rejected-800 {
    border-color: var(--color-contract-status-rejected-800);
  }
  .border-contract-status-rejected-900 {
    border-color: var(--color-contract-status-rejected-900);
  }
  .border-contract-status-signed-100 {
    border-color: var(--color-contract-status-signed-100);
  }
  .border-contract-status-signed-200 {
    border-color: var(--color-contract-status-signed-200);
  }
  .border-contract-status-signed-300 {
    border-color: var(--color-contract-status-signed-300);
  }
  .border-contract-status-signed-400 {
    border-color: var(--color-contract-status-signed-400);
  }
  .border-contract-status-signed-500 {
    border-color: var(--color-contract-status-signed-500);
  }
  .border-contract-status-signed-600 {
    border-color: var(--color-contract-status-signed-600);
  }
  .border-contract-status-signed-700 {
    border-color: var(--color-contract-status-signed-700);
  }
  .border-contract-status-signed-800 {
    border-color: var(--color-contract-status-signed-800);
  }
  .border-contract-status-signed-900 {
    border-color: var(--color-contract-status-signed-900);
  }
  .border-draft {
    border-color: var(--border-color-draft);
  }
  .border-expired {
    border-color: var(--border-color-expired);
  }
  .border-fg-brand-primary_alt {
    border-color: var(--color-fg-brand-primary_alt);
  }
  .border-fill-mode-issuer-100 {
    border-color: var(--color-fill-mode-issuer-100);
  }
  .border-fill-mode-issuer-200 {
    border-color: var(--color-fill-mode-issuer-200);
  }
  .border-fill-mode-issuer-300 {
    border-color: var(--color-fill-mode-issuer-300);
  }
  .border-fill-mode-issuer-400 {
    border-color: var(--color-fill-mode-issuer-400);
  }
  .border-fill-mode-issuer-500 {
    border-color: var(--color-fill-mode-issuer-500);
  }
  .border-fill-mode-issuer-600 {
    border-color: var(--color-fill-mode-issuer-600);
  }
  .border-fill-mode-issuer-700 {
    border-color: var(--color-fill-mode-issuer-700);
  }
  .border-fill-mode-issuer-800 {
    border-color: var(--color-fill-mode-issuer-800);
  }
  .border-fill-mode-issuer-900 {
    border-color: var(--color-fill-mode-issuer-900);
  }
  .border-fill-mode-signer-100 {
    border-color: var(--color-fill-mode-signer-100);
  }
  .border-fill-mode-signer-200 {
    border-color: var(--color-fill-mode-signer-200);
  }
  .border-fill-mode-signer-300 {
    border-color: var(--color-fill-mode-signer-300);
  }
  .border-fill-mode-signer-400 {
    border-color: var(--color-fill-mode-signer-400);
  }
  .border-fill-mode-signer-500 {
    border-color: var(--color-fill-mode-signer-500);
  }
  .border-fill-mode-signer-600 {
    border-color: var(--color-fill-mode-signer-600);
  }
  .border-fill-mode-signer-700 {
    border-color: var(--color-fill-mode-signer-700);
  }
  .border-fill-mode-signer-800 {
    border-color: var(--color-fill-mode-signer-800);
  }
  .border-fill-mode-signer-900 {
    border-color: var(--color-fill-mode-signer-900);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-pending {
    border-color: var(--border-color-pending);
  }
  .border-primary {
    border-color: var(--border-color-primary);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-rejected {
    border-color: var(--border-color-rejected);
  }
  .border-secondary {
    border-color: var(--border-color-secondary);
  }
  .border-signed {
    border-color: var(--border-color-signed);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-300 {
    border-color: var(--color-slate-300);
  }
  .border-toggle-border {
    border-color: var(--color-toggle-border);
  }
  .border-toggle-slim-border_pressed {
    border-color: var(--color-toggle-slim-border_pressed);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-utility-error-200 {
    border-color: var(--color-utility-error-200);
  }
  .border-utility-orange-200 {
    border-color: var(--color-utility-orange-200);
  }
  .border-utility-success-300 {
    border-color: var(--color-utility-success-300);
  }
  .border-utility-warning-200 {
    border-color: var(--color-utility-warning-200);
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-white\/25 {
    border-color: color-mix(in srgb, rgb(255 255 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .bg-active {
    background-color: var(--background-color-active);
  }
  .bg-avatar-bg {
    background-color: var(--color-avatar-bg);
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, rgb(0 0 0) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, rgb(0 0 0) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-border-secondary {
    background-color: var(--color-border-secondary);
  }
  .bg-brand-secondary {
    background-color: var(--background-color-brand-secondary);
  }
  .bg-brand-solid {
    background-color: var(--background-color-brand-solid);
  }
  .bg-contract-status-cancelled-100 {
    background-color: var(--color-contract-status-cancelled-100);
  }
  .bg-contract-status-cancelled-100\/25 {
    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-100) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-200 {
    background-color: var(--color-contract-status-cancelled-200);
  }
  .bg-contract-status-cancelled-200\/25 {
    background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-200) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-300 {
    background-color: var(--color-contract-status-cancelled-300);
  }
  .bg-contract-status-cancelled-300\/25 {
    background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-300) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-400 {
    background-color: var(--color-contract-status-cancelled-400);
  }
  .bg-contract-status-cancelled-400\/25 {
    background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-400) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-500 {
    background-color: var(--color-contract-status-cancelled-500);
  }
  .bg-contract-status-cancelled-500\/25 {
    background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-500) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-600 {
    background-color: var(--color-contract-status-cancelled-600);
  }
  .bg-contract-status-cancelled-600\/25 {
    background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-600) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-700 {
    background-color: var(--color-contract-status-cancelled-700);
  }
  .bg-contract-status-cancelled-700\/25 {
    background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-700) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-800 {
    background-color: var(--color-contract-status-cancelled-800);
  }
  .bg-contract-status-cancelled-800\/25 {
    background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-800) 25%, transparent);
    }
  }
  .bg-contract-status-cancelled-900 {
    background-color: var(--color-contract-status-cancelled-900);
  }
  .bg-contract-status-cancelled-900\/25 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-cancelled-900) 25%, transparent);
    }
  }
  .bg-contract-status-draft-100 {
    background-color: var(--color-contract-status-draft-100);
  }
  .bg-contract-status-draft-100\/25 {
    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-100) 25%, transparent);
    }
  }
  .bg-contract-status-draft-200 {
    background-color: var(--color-contract-status-draft-200);
  }
  .bg-contract-status-draft-200\/25 {
    background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-200) 25%, transparent);
    }
  }
  .bg-contract-status-draft-300 {
    background-color: var(--color-contract-status-draft-300);
  }
  .bg-contract-status-draft-300\/25 {
    background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-300) 25%, transparent);
    }
  }
  .bg-contract-status-draft-400 {
    background-color: var(--color-contract-status-draft-400);
  }
  .bg-contract-status-draft-400\/25 {
    background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-400) 25%, transparent);
    }
  }
  .bg-contract-status-draft-500 {
    background-color: var(--color-contract-status-draft-500);
  }
  .bg-contract-status-draft-500\/25 {
    background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-500) 25%, transparent);
    }
  }
  .bg-contract-status-draft-600 {
    background-color: var(--color-contract-status-draft-600);
  }
  .bg-contract-status-draft-600\/25 {
    background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-600) 25%, transparent);
    }
  }
  .bg-contract-status-draft-700 {
    background-color: var(--color-contract-status-draft-700);
  }
  .bg-contract-status-draft-700\/25 {
    background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-700) 25%, transparent);
    }
  }
  .bg-contract-status-draft-800 {
    background-color: var(--color-contract-status-draft-800);
  }
  .bg-contract-status-draft-800\/25 {
    background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-800) 25%, transparent);
    }
  }
  .bg-contract-status-draft-900 {
    background-color: var(--color-contract-status-draft-900);
  }
  .bg-contract-status-draft-900\/25 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-draft-900) 25%, transparent);
    }
  }
  .bg-contract-status-pending-100 {
    background-color: var(--color-contract-status-pending-100);
  }
  .bg-contract-status-pending-100\/25 {
    background-color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-100) 25%, transparent);
    }
  }
  .bg-contract-status-pending-200 {
    background-color: var(--color-contract-status-pending-200);
  }
  .bg-contract-status-pending-200\/25 {
    background-color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-200) 25%, transparent);
    }
  }
  .bg-contract-status-pending-300 {
    background-color: var(--color-contract-status-pending-300);
  }
  .bg-contract-status-pending-300\/25 {
    background-color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-300) 25%, transparent);
    }
  }
  .bg-contract-status-pending-400 {
    background-color: var(--color-contract-status-pending-400);
  }
  .bg-contract-status-pending-400\/25 {
    background-color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-400) 25%, transparent);
    }
  }
  .bg-contract-status-pending-500 {
    background-color: var(--color-contract-status-pending-500);
  }
  .bg-contract-status-pending-500\/25 {
    background-color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-500) 25%, transparent);
    }
  }
  .bg-contract-status-pending-600 {
    background-color: var(--color-contract-status-pending-600);
  }
  .bg-contract-status-pending-600\/25 {
    background-color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-600) 25%, transparent);
    }
  }
  .bg-contract-status-pending-700 {
    background-color: var(--color-contract-status-pending-700);
  }
  .bg-contract-status-pending-700\/25 {
    background-color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-700) 25%, transparent);
    }
  }
  .bg-contract-status-pending-800 {
    background-color: var(--color-contract-status-pending-800);
  }
  .bg-contract-status-pending-800\/25 {
    background-color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-800) 25%, transparent);
    }
  }
  .bg-contract-status-pending-900 {
    background-color: var(--color-contract-status-pending-900);
  }
  .bg-contract-status-pending-900\/25 {
    background-color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-pending-900) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-100 {
    background-color: var(--color-contract-status-rejected-100);
  }
  .bg-contract-status-rejected-100\/25 {
    background-color: color-mix(in srgb, #ffe4e2 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-100) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-200 {
    background-color: var(--color-contract-status-rejected-200);
  }
  .bg-contract-status-rejected-200\/25 {
    background-color: color-mix(in srgb, #fbcbc7 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-200) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-300 {
    background-color: var(--color-contract-status-rejected-300);
  }
  .bg-contract-status-rejected-300\/25 {
    background-color: color-mix(in srgb, #ffa8a0 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-300) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-400 {
    background-color: var(--color-contract-status-rejected-400);
  }
  .bg-contract-status-rejected-400\/25 {
    background-color: color-mix(in srgb, #ff7c6b 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-400) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-500 {
    background-color: var(--color-contract-status-rejected-500);
  }
  .bg-contract-status-rejected-500\/25 {
    background-color: color-mix(in srgb, #ff5530 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-500) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-600 {
    background-color: var(--color-contract-status-rejected-600);
  }
  .bg-contract-status-rejected-600\/25 {
    background-color: color-mix(in srgb, #e53f00 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-600) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-700 {
    background-color: var(--color-contract-status-rejected-700);
  }
  .bg-contract-status-rejected-700\/25 {
    background-color: color-mix(in srgb, #c03300 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-700) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-800 {
    background-color: var(--color-contract-status-rejected-800);
  }
  .bg-contract-status-rejected-800\/25 {
    background-color: color-mix(in srgb, #9f2900 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-800) 25%, transparent);
    }
  }
  .bg-contract-status-rejected-900 {
    background-color: var(--color-contract-status-rejected-900);
  }
  .bg-contract-status-rejected-900\/25 {
    background-color: color-mix(in srgb, #87250b 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-rejected-900) 25%, transparent);
    }
  }
  .bg-contract-status-signed-100 {
    background-color: var(--color-contract-status-signed-100);
  }
  .bg-contract-status-signed-100\/25 {
    background-color: color-mix(in srgb, #e0fce7 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-100) 25%, transparent);
    }
  }
  .bg-contract-status-signed-200 {
    background-color: var(--color-contract-status-signed-200);
  }
  .bg-contract-status-signed-200\/25 {
    background-color: color-mix(in srgb, #baf9cc 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-200) 25%, transparent);
    }
  }
  .bg-contract-status-signed-300 {
    background-color: var(--color-contract-status-signed-300);
  }
  .bg-contract-status-signed-300\/25 {
    background-color: color-mix(in srgb, #8af7ac 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-300) 25%, transparent);
    }
  }
  .bg-contract-status-signed-400 {
    background-color: var(--color-contract-status-signed-400);
  }
  .bg-contract-status-signed-400\/25 {
    background-color: color-mix(in srgb, #41e683 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-400) 25%, transparent);
    }
  }
  .bg-contract-status-signed-500 {
    background-color: var(--color-contract-status-signed-500);
  }
  .bg-contract-status-signed-500\/25 {
    background-color: color-mix(in srgb, #01cb69 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-500) 25%, transparent);
    }
  }
  .bg-contract-status-signed-600 {
    background-color: var(--color-contract-status-signed-600);
  }
  .bg-contract-status-signed-600\/25 {
    background-color: color-mix(in srgb, #01a856 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-600) 25%, transparent);
    }
  }
  .bg-contract-status-signed-700 {
    background-color: var(--color-contract-status-signed-700);
  }
  .bg-contract-status-signed-700\/25 {
    background-color: color-mix(in srgb, #058443 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-700) 25%, transparent);
    }
  }
  .bg-contract-status-signed-800 {
    background-color: var(--color-contract-status-signed-800);
  }
  .bg-contract-status-signed-800\/25 {
    background-color: color-mix(in srgb, #0f6835 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-800) 25%, transparent);
    }
  }
  .bg-contract-status-signed-900 {
    background-color: var(--color-contract-status-signed-900);
  }
  .bg-contract-status-signed-900\/25 {
    background-color: color-mix(in srgb, #10562d 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-contract-status-signed-900) 25%, transparent);
    }
  }
  .bg-disabled_subtle {
    background-color: var(--background-color-disabled_subtle);
  }
  .bg-draft {
    background-color: var(--background-color-draft);
  }
  .bg-error-secondary {
    background-color: var(--background-color-error-secondary);
  }
  .bg-error-solid {
    background-color: var(--background-color-error-solid);
  }
  .bg-expired {
    background-color: var(--background-color-expired);
  }
  .bg-fg-brand-primary {
    background-color: var(--color-fg-brand-primary);
  }
  .bg-fg-disabled_subtle {
    background-color: var(--color-fg-disabled_subtle);
  }
  .bg-fg-quaternary {
    background-color: var(--color-fg-quaternary);
  }
  .bg-fg-white {
    background-color: var(--color-fg-white);
  }
  .bg-fill-mode-issuer-100 {
    background-color: var(--color-fill-mode-issuer-100);
  }
  .bg-fill-mode-issuer-100\/25 {
    background-color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-100) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-200 {
    background-color: var(--color-fill-mode-issuer-200);
  }
  .bg-fill-mode-issuer-200\/25 {
    background-color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-200) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-300 {
    background-color: var(--color-fill-mode-issuer-300);
  }
  .bg-fill-mode-issuer-300\/25 {
    background-color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-300) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-400 {
    background-color: var(--color-fill-mode-issuer-400);
  }
  .bg-fill-mode-issuer-400\/25 {
    background-color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-400) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-500 {
    background-color: var(--color-fill-mode-issuer-500);
  }
  .bg-fill-mode-issuer-500\/25 {
    background-color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-500) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-600 {
    background-color: var(--color-fill-mode-issuer-600);
  }
  .bg-fill-mode-issuer-600\/25 {
    background-color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-600) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-700 {
    background-color: var(--color-fill-mode-issuer-700);
  }
  .bg-fill-mode-issuer-700\/25 {
    background-color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-700) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-800 {
    background-color: var(--color-fill-mode-issuer-800);
  }
  .bg-fill-mode-issuer-800\/25 {
    background-color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-800) 25%, transparent);
    }
  }
  .bg-fill-mode-issuer-900 {
    background-color: var(--color-fill-mode-issuer-900);
  }
  .bg-fill-mode-issuer-900\/25 {
    background-color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-issuer-900) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-100 {
    background-color: var(--color-fill-mode-signer-100);
  }
  .bg-fill-mode-signer-100\/25 {
    background-color: color-mix(in srgb, #e0fce7 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-100) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-200 {
    background-color: var(--color-fill-mode-signer-200);
  }
  .bg-fill-mode-signer-200\/25 {
    background-color: color-mix(in srgb, #baf9cc 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-200) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-300 {
    background-color: var(--color-fill-mode-signer-300);
  }
  .bg-fill-mode-signer-300\/25 {
    background-color: color-mix(in srgb, #8af7ac 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-300) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-400 {
    background-color: var(--color-fill-mode-signer-400);
  }
  .bg-fill-mode-signer-400\/25 {
    background-color: color-mix(in srgb, #41e683 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-400) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-500 {
    background-color: var(--color-fill-mode-signer-500);
  }
  .bg-fill-mode-signer-500\/25 {
    background-color: color-mix(in srgb, #01cb69 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-500) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-600 {
    background-color: var(--color-fill-mode-signer-600);
  }
  .bg-fill-mode-signer-600\/25 {
    background-color: color-mix(in srgb, #01a856 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-600) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-700 {
    background-color: var(--color-fill-mode-signer-700);
  }
  .bg-fill-mode-signer-700\/25 {
    background-color: color-mix(in srgb, #058443 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-700) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-800 {
    background-color: var(--color-fill-mode-signer-800);
  }
  .bg-fill-mode-signer-800\/25 {
    background-color: color-mix(in srgb, #0f6835 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-800) 25%, transparent);
    }
  }
  .bg-fill-mode-signer-900 {
    background-color: var(--color-fill-mode-signer-900);
  }
  .bg-fill-mode-signer-900\/25 {
    background-color: color-mix(in srgb, #10562d 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-fill-mode-signer-900) 25%, transparent);
    }
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-pending {
    background-color: var(--background-color-pending);
  }
  .bg-primary {
    background-color: var(--background-color-primary);
  }
  .bg-primary-solid {
    background-color: var(--background-color-primary-solid);
  }
  .bg-primary_alt {
    background-color: var(--background-color-primary_alt);
  }
  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }
  .bg-quaternary {
    background-color: var(--background-color-quaternary);
  }
  .bg-quaternary\/50 {
    background-color: color-mix(in srgb, rgb(233 234 235) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--background-color-quaternary) 50%, transparent);
    }
  }
  .bg-rejected {
    background-color: var(--background-color-rejected);
  }
  .bg-secondary {
    background-color: var(--background-color-secondary);
  }
  .bg-secondary_alt {
    background-color: var(--background-color-secondary_alt);
  }
  .bg-signature-authentication-bankid {
    background-color: var(--color-signature-authentication-bankid);
  }
  .bg-signature-authentication-email-otp {
    background-color: var(--color-signature-authentication-email-otp);
  }
  .bg-signature-authentication-ftn {
    background-color: var(--color-signature-authentication-ftn);
  }
  .bg-signature-authentication-mitid {
    background-color: var(--color-signature-authentication-mitid);
  }
  .bg-signed {
    background-color: var(--background-color-signed);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-200\/90 {
    background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-200) 90%, transparent);
    }
  }
  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }
  .bg-slate-900\/50 {
    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }
  .bg-success-25 {
    background-color: var(--color-success-25);
  }
  .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-secondary {
    background-color: var(--background-color-success-secondary);
  }
  .bg-success-solid {
    background-color: var(--background-color-success-solid);
  }
  .bg-tertiary {
    background-color: var(--background-color-tertiary);
  }
  .bg-tertiary\/90 {
    background-color: color-mix(in srgb, rgb(245 245 245) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--background-color-tertiary) 90%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-utility-blue-50 {
    background-color: var(--color-utility-blue-50);
  }
  .bg-utility-brand-50 {
    background-color: var(--color-utility-brand-50);
  }
  .bg-utility-error-50 {
    background-color: var(--color-utility-error-50);
  }
  .bg-utility-gray-50 {
    background-color: var(--color-utility-gray-50);
  }
  .bg-utility-gray-700 {
    background-color: var(--color-utility-gray-700);
  }
  .bg-utility-indigo-50 {
    background-color: var(--color-utility-indigo-50);
  }
  .bg-utility-orange-50 {
    background-color: var(--color-utility-orange-50);
  }
  .bg-utility-pink-50 {
    background-color: var(--color-utility-pink-50);
  }
  .bg-utility-purple-50 {
    background-color: var(--color-utility-purple-50);
  }
  .bg-utility-success-50 {
    background-color: var(--color-utility-success-50);
  }
  .bg-utility-warning-50 {
    background-color: var(--color-utility-warning-50);
  }
  .bg-warning-secondary {
    background-color: var(--background-color-warning-secondary);
  }
  .bg-warning-solid {
    background-color: var(--background-color-warning-solid);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/60 {
    background-color: color-mix(in srgb, rgb(255 255 255) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .bg-linear-to-b {
    --tw-gradient-position: to bottom;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-br {
    --tw-gradient-position: to bottom right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-tr {
    --tw-gradient-position: to top right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-\[\#E9DEFA\] {
    --tw-gradient-from: #E9DEFA;
    --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-bg-quaternary {
    --tw-gradient-from: var(--color-bg-quaternary);
    --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-black {
    --tw-gradient-from: var(--color-black);
    --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-brand-100 {
    --tw-gradient-from: var(--color-brand-100);
    --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-connie-brand-900 {
    --tw-gradient-from: var(--color-connie-brand-900);
    --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-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --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-gray-900 {
    --tw-gradient-from: var(--color-gray-900);
    --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-white {
    --tw-gradient-from: var(--color-white);
    --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-\[\#9749EA\] {
    --tw-gradient-to: #9749EA;
    --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-\[\#FFF6EB\] {
    --tw-gradient-to: #FFF6EB;
    --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-bg-quaternary_hover {
    --tw-gradient-to: var(--color-bg-quaternary_hover);
    --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-bg-tertiary {
    --tw-gradient-to: var(--color-bg-tertiary);
    --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-connie-brand-600 {
    --tw-gradient-to: var(--color-connie-brand-600);
    --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-gray-200 {
    --tw-gradient-to: var(--color-gray-200);
    --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));
  }
  .to-70\% {
    --tw-gradient-to-position: 70%;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .p-0 {
    padding: 0;
  }
  .p-0\! {
    padding: 0 !important;
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-0\.25 {
    padding: calc(var(--spacing) * 0.25);
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\! {
    padding: calc(var(--spacing) * 2) !important;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.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-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-8\! {
    padding-block: calc(var(--spacing) * 8) !important;
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-px {
    padding-block: 1px;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-35 {
    padding-top: calc(var(--spacing) * 35);
  }
  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-3\.5 {
    padding-right: calc(var(--spacing) * 3.5);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.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-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pl-0\.75 {
    padding-left: calc(var(--spacing) * 0.75);
  }
  .pl-1 {
    padding-left: var(--spacing);
  }
  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .pl-10\.5 {
    padding-left: calc(var(--spacing) * 10.5);
  }
  .pl-64 {
    padding-left: calc(var(--spacing) * 64);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .indent-0 {
    text-indent: 0;
  }
  .indent-1 {
    text-indent: var(--spacing);
  }
  .indent-2 {
    text-indent: calc(var(--spacing) * 2);
  }
  .font-display {
    font-family: var(--font-display);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-display-xl {
    font-size: var(--text-display-xl);
    line-height: var(--tw-leading, var(--text-display-xl--line-height));
    letter-spacing: var(--tw-tracking, var(--text-display-xl--letter-spacing));
  }
  .text-display-sm {
    font-size: var(--text-display-sm);
    line-height: var(--tw-leading, var(--text-display-sm--line-height));
  }
  .text-display-xs {
    font-size: var(--text-display-xs);
    line-height: var(--tw-leading, var(--text-display-xs--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-md {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-normal\! {
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-black {
    color: var(--color-black);
  }
  .text-blue-100 {
    color: var(--color-blue-100);
  }
  .text-brand-secondary {
    color: var(--text-color-brand-secondary);
  }
  .text-brand-tertiary {
    color: var(--text-color-brand-tertiary);
  }
  .text-brand-tertiary_alt\! {
    color: var(--text-color-brand-tertiary_alt) !important;
  }
  .text-button-primary-icon {
    color: var(--color-button-primary-icon);
  }
  .text-contract-status-cancelled-100 {
    color: var(--color-contract-status-cancelled-100);
  }
  .text-contract-status-cancelled-100\/25 {
    color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-100) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-200 {
    color: var(--color-contract-status-cancelled-200);
  }
  .text-contract-status-cancelled-200\/25 {
    color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-200) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-300 {
    color: var(--color-contract-status-cancelled-300);
  }
  .text-contract-status-cancelled-300\/25 {
    color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-300) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-400 {
    color: var(--color-contract-status-cancelled-400);
  }
  .text-contract-status-cancelled-400\/25 {
    color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-400) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-500 {
    color: var(--color-contract-status-cancelled-500);
  }
  .text-contract-status-cancelled-500\/25 {
    color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-500) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-600 {
    color: var(--color-contract-status-cancelled-600);
  }
  .text-contract-status-cancelled-600\/25 {
    color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-600) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-700 {
    color: var(--color-contract-status-cancelled-700);
  }
  .text-contract-status-cancelled-700\/25 {
    color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-700) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-800 {
    color: var(--color-contract-status-cancelled-800);
  }
  .text-contract-status-cancelled-800\/25 {
    color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-800) 25%, transparent);
    }
  }
  .text-contract-status-cancelled-900 {
    color: var(--color-contract-status-cancelled-900);
  }
  .text-contract-status-cancelled-900\/25 {
    color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-cancelled-900) 25%, transparent);
    }
  }
  .text-contract-status-draft-100 {
    color: var(--color-contract-status-draft-100);
  }
  .text-contract-status-draft-100\/25 {
    color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-100) 25%, transparent);
    }
  }
  .text-contract-status-draft-200 {
    color: var(--color-contract-status-draft-200);
  }
  .text-contract-status-draft-200\/25 {
    color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-200) 25%, transparent);
    }
  }
  .text-contract-status-draft-300 {
    color: var(--color-contract-status-draft-300);
  }
  .text-contract-status-draft-300\/25 {
    color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-300) 25%, transparent);
    }
  }
  .text-contract-status-draft-400 {
    color: var(--color-contract-status-draft-400);
  }
  .text-contract-status-draft-400\/25 {
    color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-400) 25%, transparent);
    }
  }
  .text-contract-status-draft-500 {
    color: var(--color-contract-status-draft-500);
  }
  .text-contract-status-draft-500\/25 {
    color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-500) 25%, transparent);
    }
  }
  .text-contract-status-draft-600 {
    color: var(--color-contract-status-draft-600);
  }
  .text-contract-status-draft-600\/25 {
    color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-600) 25%, transparent);
    }
  }
  .text-contract-status-draft-700 {
    color: var(--color-contract-status-draft-700);
  }
  .text-contract-status-draft-700\/25 {
    color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-700) 25%, transparent);
    }
  }
  .text-contract-status-draft-800 {
    color: var(--color-contract-status-draft-800);
  }
  .text-contract-status-draft-800\/25 {
    color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-800) 25%, transparent);
    }
  }
  .text-contract-status-draft-900 {
    color: var(--color-contract-status-draft-900);
  }
  .text-contract-status-draft-900\/25 {
    color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-draft-900) 25%, transparent);
    }
  }
  .text-contract-status-pending-100 {
    color: var(--color-contract-status-pending-100);
  }
  .text-contract-status-pending-100\/25 {
    color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-100) 25%, transparent);
    }
  }
  .text-contract-status-pending-200 {
    color: var(--color-contract-status-pending-200);
  }
  .text-contract-status-pending-200\/25 {
    color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-200) 25%, transparent);
    }
  }
  .text-contract-status-pending-300 {
    color: var(--color-contract-status-pending-300);
  }
  .text-contract-status-pending-300\/25 {
    color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-300) 25%, transparent);
    }
  }
  .text-contract-status-pending-400 {
    color: var(--color-contract-status-pending-400);
  }
  .text-contract-status-pending-400\/25 {
    color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-400) 25%, transparent);
    }
  }
  .text-contract-status-pending-500 {
    color: var(--color-contract-status-pending-500);
  }
  .text-contract-status-pending-500\/25 {
    color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-500) 25%, transparent);
    }
  }
  .text-contract-status-pending-600 {
    color: var(--color-contract-status-pending-600);
  }
  .text-contract-status-pending-600\/25 {
    color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-600) 25%, transparent);
    }
  }
  .text-contract-status-pending-700 {
    color: var(--color-contract-status-pending-700);
  }
  .text-contract-status-pending-700\/25 {
    color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-700) 25%, transparent);
    }
  }
  .text-contract-status-pending-800 {
    color: var(--color-contract-status-pending-800);
  }
  .text-contract-status-pending-800\/25 {
    color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-800) 25%, transparent);
    }
  }
  .text-contract-status-pending-900 {
    color: var(--color-contract-status-pending-900);
  }
  .text-contract-status-pending-900\/25 {
    color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-pending-900) 25%, transparent);
    }
  }
  .text-contract-status-rejected-100 {
    color: var(--color-contract-status-rejected-100);
  }
  .text-contract-status-rejected-100\/25 {
    color: color-mix(in srgb, #ffe4e2 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-100) 25%, transparent);
    }
  }
  .text-contract-status-rejected-200 {
    color: var(--color-contract-status-rejected-200);
  }
  .text-contract-status-rejected-200\/25 {
    color: color-mix(in srgb, #fbcbc7 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-200) 25%, transparent);
    }
  }
  .text-contract-status-rejected-300 {
    color: var(--color-contract-status-rejected-300);
  }
  .text-contract-status-rejected-300\/25 {
    color: color-mix(in srgb, #ffa8a0 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-300) 25%, transparent);
    }
  }
  .text-contract-status-rejected-400 {
    color: var(--color-contract-status-rejected-400);
  }
  .text-contract-status-rejected-400\/25 {
    color: color-mix(in srgb, #ff7c6b 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-400) 25%, transparent);
    }
  }
  .text-contract-status-rejected-500 {
    color: var(--color-contract-status-rejected-500);
  }
  .text-contract-status-rejected-500\/25 {
    color: color-mix(in srgb, #ff5530 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-500) 25%, transparent);
    }
  }
  .text-contract-status-rejected-600 {
    color: var(--color-contract-status-rejected-600);
  }
  .text-contract-status-rejected-600\/25 {
    color: color-mix(in srgb, #e53f00 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-600) 25%, transparent);
    }
  }
  .text-contract-status-rejected-700 {
    color: var(--color-contract-status-rejected-700);
  }
  .text-contract-status-rejected-700\/25 {
    color: color-mix(in srgb, #c03300 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-700) 25%, transparent);
    }
  }
  .text-contract-status-rejected-800 {
    color: var(--color-contract-status-rejected-800);
  }
  .text-contract-status-rejected-800\/25 {
    color: color-mix(in srgb, #9f2900 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-800) 25%, transparent);
    }
  }
  .text-contract-status-rejected-900 {
    color: var(--color-contract-status-rejected-900);
  }
  .text-contract-status-rejected-900\/25 {
    color: color-mix(in srgb, #87250b 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-rejected-900) 25%, transparent);
    }
  }
  .text-contract-status-signed-100 {
    color: var(--color-contract-status-signed-100);
  }
  .text-contract-status-signed-100\/25 {
    color: color-mix(in srgb, #e0fce7 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-100) 25%, transparent);
    }
  }
  .text-contract-status-signed-200 {
    color: var(--color-contract-status-signed-200);
  }
  .text-contract-status-signed-200\/25 {
    color: color-mix(in srgb, #baf9cc 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-200) 25%, transparent);
    }
  }
  .text-contract-status-signed-300 {
    color: var(--color-contract-status-signed-300);
  }
  .text-contract-status-signed-300\/25 {
    color: color-mix(in srgb, #8af7ac 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-300) 25%, transparent);
    }
  }
  .text-contract-status-signed-400 {
    color: var(--color-contract-status-signed-400);
  }
  .text-contract-status-signed-400\/25 {
    color: color-mix(in srgb, #41e683 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-400) 25%, transparent);
    }
  }
  .text-contract-status-signed-500 {
    color: var(--color-contract-status-signed-500);
  }
  .text-contract-status-signed-500\/25 {
    color: color-mix(in srgb, #01cb69 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-500) 25%, transparent);
    }
  }
  .text-contract-status-signed-600 {
    color: var(--color-contract-status-signed-600);
  }
  .text-contract-status-signed-600\/25 {
    color: color-mix(in srgb, #01a856 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-600) 25%, transparent);
    }
  }
  .text-contract-status-signed-700 {
    color: var(--color-contract-status-signed-700);
  }
  .text-contract-status-signed-700\/25 {
    color: color-mix(in srgb, #058443 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-700) 25%, transparent);
    }
  }
  .text-contract-status-signed-800 {
    color: var(--color-contract-status-signed-800);
  }
  .text-contract-status-signed-800\/25 {
    color: color-mix(in srgb, #0f6835 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-800) 25%, transparent);
    }
  }
  .text-contract-status-signed-900 {
    color: var(--color-contract-status-signed-900);
  }
  .text-contract-status-signed-900\/25 {
    color: color-mix(in srgb, #10562d 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-contract-status-signed-900) 25%, transparent);
    }
  }
  .text-draft {
    color: var(--text-color-draft);
  }
  .text-error-primary {
    color: var(--text-color-error-primary);
  }
  .text-expired {
    color: var(--text-color-expired);
  }
  .text-featured-icon-light-fg-brand {
    color: var(--color-featured-icon-light-fg-brand);
  }
  .text-featured-icon-light-fg-error {
    color: var(--color-featured-icon-light-fg-error);
  }
  .text-featured-icon-light-fg-gray {
    color: var(--color-featured-icon-light-fg-gray);
  }
  .text-featured-icon-light-fg-success {
    color: var(--color-featured-icon-light-fg-success);
  }
  .text-featured-icon-light-fg-warning {
    color: var(--color-featured-icon-light-fg-warning);
  }
  .text-fg-brand-primary {
    color: var(--color-fg-brand-primary);
  }
  .text-fg-brand-secondary_alt {
    color: var(--color-fg-brand-secondary_alt);
  }
  .text-fg-error-primary {
    color: var(--color-fg-error-primary);
  }
  .text-fg-error-secondary {
    color: var(--color-fg-error-secondary);
  }
  .text-fg-primary {
    color: var(--color-fg-primary);
  }
  .text-fg-quaternary {
    color: var(--color-fg-quaternary);
  }
  .text-fg-secondary {
    color: var(--color-fg-secondary);
  }
  .text-fg-white {
    color: var(--color-fg-white);
  }
  .text-fill-mode-issuer-100 {
    color: var(--color-fill-mode-issuer-100);
  }
  .text-fill-mode-issuer-100\/25 {
    color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-100) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-200 {
    color: var(--color-fill-mode-issuer-200);
  }
  .text-fill-mode-issuer-200\/25 {
    color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-200) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-300 {
    color: var(--color-fill-mode-issuer-300);
  }
  .text-fill-mode-issuer-300\/25 {
    color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-300) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-400 {
    color: var(--color-fill-mode-issuer-400);
  }
  .text-fill-mode-issuer-400\/25 {
    color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-400) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-500 {
    color: var(--color-fill-mode-issuer-500);
  }
  .text-fill-mode-issuer-500\/25 {
    color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-500) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-600 {
    color: var(--color-fill-mode-issuer-600);
  }
  .text-fill-mode-issuer-600\/25 {
    color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-600) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-700 {
    color: var(--color-fill-mode-issuer-700);
  }
  .text-fill-mode-issuer-700\/25 {
    color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-700) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-800 {
    color: var(--color-fill-mode-issuer-800);
  }
  .text-fill-mode-issuer-800\/25 {
    color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-800) 25%, transparent);
    }
  }
  .text-fill-mode-issuer-900 {
    color: var(--color-fill-mode-issuer-900);
  }
  .text-fill-mode-issuer-900\/25 {
    color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-issuer-900) 25%, transparent);
    }
  }
  .text-fill-mode-signer-100 {
    color: var(--color-fill-mode-signer-100);
  }
  .text-fill-mode-signer-100\/25 {
    color: color-mix(in srgb, #e0fce7 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-100) 25%, transparent);
    }
  }
  .text-fill-mode-signer-200 {
    color: var(--color-fill-mode-signer-200);
  }
  .text-fill-mode-signer-200\/25 {
    color: color-mix(in srgb, #baf9cc 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-200) 25%, transparent);
    }
  }
  .text-fill-mode-signer-300 {
    color: var(--color-fill-mode-signer-300);
  }
  .text-fill-mode-signer-300\/25 {
    color: color-mix(in srgb, #8af7ac 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-300) 25%, transparent);
    }
  }
  .text-fill-mode-signer-400 {
    color: var(--color-fill-mode-signer-400);
  }
  .text-fill-mode-signer-400\/25 {
    color: color-mix(in srgb, #41e683 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-400) 25%, transparent);
    }
  }
  .text-fill-mode-signer-500 {
    color: var(--color-fill-mode-signer-500);
  }
  .text-fill-mode-signer-500\/25 {
    color: color-mix(in srgb, #01cb69 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-500) 25%, transparent);
    }
  }
  .text-fill-mode-signer-600 {
    color: var(--color-fill-mode-signer-600);
  }
  .text-fill-mode-signer-600\/25 {
    color: color-mix(in srgb, #01a856 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-600) 25%, transparent);
    }
  }
  .text-fill-mode-signer-700 {
    color: var(--color-fill-mode-signer-700);
  }
  .text-fill-mode-signer-700\/25 {
    color: color-mix(in srgb, #058443 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-700) 25%, transparent);
    }
  }
  .text-fill-mode-signer-800 {
    color: var(--color-fill-mode-signer-800);
  }
  .text-fill-mode-signer-800\/25 {
    color: color-mix(in srgb, #0f6835 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-800) 25%, transparent);
    }
  }
  .text-fill-mode-signer-900 {
    color: var(--color-fill-mode-signer-900);
  }
  .text-fill-mode-signer-900\/25 {
    color: color-mix(in srgb, #10562d 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-fill-mode-signer-900) 25%, transparent);
    }
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-pending {
    color: var(--text-color-pending);
  }
  .text-placeholder {
    color: var(--text-color-placeholder);
  }
  .text-placeholder_subtle {
    color: var(--text-color-placeholder_subtle);
  }
  .text-primary {
    color: var(--text-color-primary);
  }
  .text-primary_on-brand {
    color: var(--text-color-primary_on-brand);
  }
  .text-primary_on-brand\/70 {
    color: color-mix(in srgb, rgb(255 255 255) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--text-color-primary_on-brand) 70%, transparent);
    }
  }
  .text-quaternary {
    color: var(--text-color-quaternary);
  }
  .text-quinary {
    color: var(--text-color-quinary);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-rejected {
    color: var(--text-color-rejected);
  }
  .text-secondary {
    color: var(--text-color-secondary);
  }
  .text-secondary_hover {
    color: var(--text-color-secondary_hover);
  }
  .text-signed {
    color: var(--text-color-signed);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-400\! {
    color: var(--color-slate-400) !important;
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-tertiary {
    color: var(--text-color-tertiary);
  }
  .text-utility-blue-500 {
    color: var(--color-utility-blue-500);
  }
  .text-utility-blue-700 {
    color: var(--color-utility-blue-700);
  }
  .text-utility-brand-500 {
    color: var(--color-utility-brand-500);
  }
  .text-utility-brand-700 {
    color: var(--color-utility-brand-700);
  }
  .text-utility-error-500 {
    color: var(--color-utility-error-500);
  }
  .text-utility-error-700 {
    color: var(--color-utility-error-700);
  }
  .text-utility-gray-50 {
    color: var(--color-utility-gray-50);
  }
  .text-utility-gray-500 {
    color: var(--color-utility-gray-500);
  }
  .text-utility-gray-700 {
    color: var(--color-utility-gray-700);
  }
  .text-utility-indigo-500 {
    color: var(--color-utility-indigo-500);
  }
  .text-utility-indigo-700 {
    color: var(--color-utility-indigo-700);
  }
  .text-utility-orange-500 {
    color: var(--color-utility-orange-500);
  }
  .text-utility-orange-700 {
    color: var(--color-utility-orange-700);
  }
  .text-utility-pink-500 {
    color: var(--color-utility-pink-500);
  }
  .text-utility-pink-700 {
    color: var(--color-utility-pink-700);
  }
  .text-utility-purple-500 {
    color: var(--color-utility-purple-500);
  }
  .text-utility-purple-700 {
    color: var(--color-utility-purple-700);
  }
  .text-utility-success-500 {
    color: var(--color-utility-success-500);
  }
  .text-utility-success-700 {
    color: var(--color-utility-success-700);
  }
  .text-utility-warning-500 {
    color: var(--color-utility-warning-500);
  }
  .text-utility-warning-700 {
    color: var(--color-utility-warning-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\! {
    color: var(--color-white) !important;
  }
  .text-white\/60 {
    color: color-mix(in srgb, rgb(255 255 255) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, rgb(255 255 255) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .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,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-transparent {
    text-decoration-color: transparent;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0px 24px 48px -12px var(--tw-shadow-color, rgba(10, 13, 18, 0.18)), 0px 4px 4px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
    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: 0px 12px 16px -4px var(--tw-shadow-color, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
    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: 0px 4px 6px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 2px 4px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.06));
    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 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0px 20px 24px -4px var(--tw-shadow-color, rgba(10, 13, 18, 0.08)), 0px 8px 8px -4px var(--tw-shadow-color, rgba(10, 13, 18, 0.03)), 0px 3px 3px -1.5px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
    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: 0px 1px 2px var(--tw-shadow-color, rgba(10, 13, 18, 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs-skeumorphic {
    --tw-shadow: var(--shadow-skeumorphic), var(--shadow-xs);
    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) !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;
  }
  .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-0 {
    --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);
  }
  .ring-0\! {
    --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;
  }
  .ring-1 {
    --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-\[1\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + 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-\[3px\]\! {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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;
  }
  .inset-ring {
    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .inset-ring-2 {
    --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .inset-ring-4 {
    --tw-inset-ring-shadow: inset 0 0 0 4px var(--tw-inset-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);
  }
  .shadow-green-900\/20 {
    --tw-shadow-color: color-mix(in srgb, #10562d 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-red-900\/20 {
    --tw-shadow-color: color-mix(in srgb, #87250b 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .\!ring-brand {
    --tw-ring-color: var(--ring-color-brand) !important;
  }
  .ring-bg-brand-solid {
    --tw-ring-color: var(--ring-color-bg-brand-solid);
  }
  .ring-black\/5 {
    --tw-ring-color: color-mix(in srgb, rgb(0 0 0) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .ring-black\/10 {
    --tw-ring-color: color-mix(in srgb, rgb(0 0 0) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .ring-blue-700 {
    --tw-ring-color: var(--color-blue-700);
  }
  .ring-brand-600 {
    --tw-ring-color: var(--color-brand-600);
  }
  .ring-disabled_subtle {
    --tw-ring-color: var(--ring-color-disabled_subtle);
  }
  .ring-draft {
    --tw-ring-color: var(--ring-color-draft);
  }
  .ring-draft\! {
    --tw-ring-color: var(--ring-color-draft) !important;
  }
  .ring-error {
    --tw-ring-color: var(--ring-color-error);
  }
  .ring-focus-ring {
    --tw-ring-color: var(--color-focus-ring);
  }
  .ring-green-500 {
    --tw-ring-color: var(--color-green-500);
  }
  .ring-pending {
    --tw-ring-color: var(--ring-color-pending);
  }
  .ring-pending\! {
    --tw-ring-color: var(--ring-color-pending) !important;
  }
  .ring-primary {
    --tw-ring-color: var(--ring-color-primary);
  }
  .ring-purple-400 {
    --tw-ring-color: var(--color-purple-400);
  }
  .ring-red-500 {
    --tw-ring-color: var(--color-red-500);
  }
  .ring-rejected {
    --tw-ring-color: var(--ring-color-rejected);
  }
  .ring-rejected\! {
    --tw-ring-color: var(--ring-color-rejected) !important;
  }
  .ring-secondary {
    --tw-ring-color: var(--ring-color-secondary);
  }
  .ring-secondary_alt {
    --tw-ring-color: var(--ring-color-secondary_alt);
  }
  .ring-signed {
    --tw-ring-color: var(--ring-color-signed);
  }
  .ring-signed\! {
    --tw-ring-color: var(--ring-color-signed) !important;
  }
  .ring-slate-200 {
    --tw-ring-color: var(--color-slate-200);
  }
  .ring-transparent {
    --tw-ring-color: transparent;
  }
  .ring-utility-blue-200 {
    --tw-ring-color: var(--color-utility-blue-200);
  }
  .ring-utility-brand-200 {
    --tw-ring-color: var(--color-utility-brand-200);
  }
  .ring-utility-error-200 {
    --tw-ring-color: var(--color-utility-error-200);
  }
  .ring-utility-gray-200 {
    --tw-ring-color: var(--color-utility-gray-200);
  }
  .ring-utility-indigo-200 {
    --tw-ring-color: var(--color-utility-indigo-200);
  }
  .ring-utility-orange-200 {
    --tw-ring-color: var(--color-utility-orange-200);
  }
  .ring-utility-pink-200 {
    --tw-ring-color: var(--color-utility-pink-200);
  }
  .ring-utility-purple-200 {
    --tw-ring-color: var(--color-utility-purple-200);
  }
  .ring-utility-success-200 {
    --tw-ring-color: var(--color-utility-success-200);
  }
  .ring-utility-warning-200 {
    --tw-ring-color: var(--color-utility-warning-200);
  }
  .inset-ring-secondary {
    --tw-inset-ring-color: var(--ring-color-secondary);
  }
  .inset-ring-white\/50 {
    --tw-inset-ring-color: color-mix(in srgb, rgb(255 255 255) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-inset-ring-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .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);
  }
  .ring-offset-bg-primary {
    --tw-ring-offset-color: var(--color-bg-primary);
  }
  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-1 {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .-outline-offset-1 {
    outline-offset: calc(1px * -1);
  }
  .outline-offset-2 {
    outline-offset: 2px;
  }
  .outline-avatar-contrast-border {
    outline-color: var(--color-avatar-contrast-border);
  }
  .outline-brand {
    outline-color: var(--outline-color-brand);
  }
  .outline-error {
    outline-color: var(--outline-color-error);
  }
  .outline-focus-ring {
    outline-color: var(--color-focus-ring);
  }
  .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,);
  }
  .drop-shadow-xl {
    --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .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-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, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[display\,opacity\,overlay\] {
    transition-property: display,opacity,overlay;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[display\,opacity\,width\,background-color\,color\,box-shadow\] {
    transition-property: display,opacity,width,background-color,color,box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[display\,opacity\] {
    transition-property: display,opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[display\,scale\] {
    transition-property: display,scale;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[display\,translate\] {
    transition-property: display,translate;
    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\,text-decoration-color\] {
    transition-property: opacity,text-decoration-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,visibility\] {
    transition-property: opacity,visibility;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    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));
  }
  .transition-discrete {
    transition-behavior: allow-discrete;
  }
  .delay-0 {
    transition-delay: 0ms;
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .icon-alert-circle {
    --icon-alert-circle: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%208v4m0%204h.01M22%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012%206.477%202%2012%202s10%204.477%2010%2010Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-alert-circle);
    mask: var(--icon-alert-circle);
  }
  .icon-alert-triangle {
    --icon-alert-triangle: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%209v4m0%204h.01M10.615%203.892%202.39%2018.098c-.456.788-.684%201.182-.65%201.506a1%201%200%200%200%20.406.705c.263.191.718.191%201.629.191h16.45c.91%200%201.365%200%201.628-.191a1%201%200%200%200%20.407-.705c.034-.324-.195-.718-.65-1.506L13.383%203.892c-.454-.785-.681-1.178-.978-1.31a1%201%200%200%200-.813%200c-.296.132-.523.525-.978%201.31Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-alert-triangle);
    mask: var(--icon-alert-triangle);
  }
  .icon-annotation-question {
    --icon-annotation-question: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%208.502a2.248%202.248%200%200%201%204.37.75c0%201.499-2.25%202.248-2.25%202.248m.03%203h.01M9.9%2019.2l1.46%201.947c.217.29.326.434.459.486a.5.5%200%200%200%20.362%200c.133-.052.242-.197.459-.486L14.1%2019.2c.293-.39.44-.586.619-.735a2%202%200%200%201%20.822-.412c.226-.053.47-.053.959-.053%201.398%200%202.097%200%202.648-.228a3%203%200%200%200%201.624-1.624C21%2015.597%2021%2014.898%2021%2013.5V7.8c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C18.72%203%2017.88%203%2016.2%203H7.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C3%205.28%203%206.12%203%207.8v5.7c0%201.398%200%202.097.228%202.648a3%203%200%200%200%201.624%201.624C5.403%2018%206.102%2018%207.5%2018c.489%200%20.733%200%20.96.053a2%202%200%200%201%20.821.412c.18.149.326.344.619.735Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-annotation-question);
    mask: var(--icon-annotation-question);
  }
  .icon-arrow-right {
    --icon-arrow-right: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012h14m0%200-7-7m7%207-7%207%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-arrow-right);
    mask: var(--icon-arrow-right);
  }
  .icon-building-06 {
    --icon-building-06: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%2011H6.2c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C3%2012.52%203%2013.08%203%2014.2V21m18%200V6.2c0-1.12%200-1.68-.218-2.108a2%202%200%200%200-.874-.874C19.48%203%2018.92%203%2017.8%203h-3.6c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C11%204.52%2011%205.08%2011%206.2V21m11%200H2M14.5%207h3m-3%204h3m-3%204h3%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-building-06);
    mask: var(--icon-building-06);
  }
  .icon-calendar {
    --icon-calendar: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21%2010H3m13-8v4M8%202v4m-.2%2016h8.4c1.68%200%202.52%200%203.162-.327a3%203%200%200%200%201.311-1.311C21%2019.72%2021%2018.88%2021%2017.2V8.8c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C18.72%204%2017.88%204%2016.2%204H7.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C3%206.28%203%207.12%203%208.8v8.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C5.28%2022%206.12%2022%207.8%2022Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-calendar);
    mask: var(--icon-calendar);
  }
  .icon-check {
    --icon-check: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-check);
    mask: var(--icon-check);
  }
  .icon-check-circle {
    --icon-check-circle: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m7.5%2012%203%203%206-6m5.5%203c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012%206.477%202%2012%202s10%204.477%2010%2010Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-check-circle);
    mask: var(--icon-check-circle);
  }
  .icon-check-verified-02 {
    --icon-check-verified-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m9%2012%202%202%204.5-4.5m2.401-4.501a2.03%202.03%200%200%200%201.1%201.1l1.744.723a2.033%202.033%200%200%201%201.1%202.656l-.722%201.744a2.03%202.03%200%200%200%200%201.556l.722%201.744a2.033%202.033%200%200%201-1.1%202.656L19%2017.901A2.033%202.033%200%200%200%2017.9%2019l-.723%201.745a2.032%202.032%200%200%201-2.656%201.1l-1.744-.722a2.032%202.032%200%200%200-1.555%200l-1.745.723a2.033%202.033%200%200%201-2.654-1.1L6.1%2019.001A2.033%202.033%200%200%200%205%2017.9l-1.744-.723a2.033%202.033%200%200%201-1.1-2.654l.721-1.744a2.033%202.033%200%200%200%200-1.556l-.722-1.746a2.033%202.033%200%200%201%201.1-2.657L5%206.098A2.03%202.03%200%200%200%206.1%205l.723-1.745a2.033%202.033%200%200%201%202.656-1.1l1.744.722a2.033%202.033%200%200%200%201.555-.001l1.746-.72a2.032%202.032%200%200%201%202.655%201.1l.723%201.746v-.003Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-check-verified-02);
    mask: var(--icon-check-verified-02);
  }
  .icon-chevron-down {
    --icon-chevron-down: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-chevron-down);
    mask: var(--icon-chevron-down);
  }
  .icon-chevron-left {
    --icon-chevron-left: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-chevron-left);
    mask: var(--icon-chevron-left);
  }
  .icon-chevron-left-double {
    --icon-chevron-left-double: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m18%2017-5-5%205-5m-7%2010-5-5%205-5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-chevron-left-double);
    mask: var(--icon-chevron-left-double);
  }
  .icon-chevron-right {
    --icon-chevron-right: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-chevron-right);
    mask: var(--icon-chevron-right);
  }
  .icon-chevron-selector-vertical {
    --icon-chevron-selector-vertical: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m7%2015%205%205%205-5M7%209l5-5%205%205%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-chevron-selector-vertical);
    mask: var(--icon-chevron-selector-vertical);
  }
  .icon-clapperboard {
    --icon-clapperboard: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%203%208%208m8-5-1%205m7%200H2m4.8%2013h10.4c1.68%200%202.52%200%203.162-.327a3%203%200%200%200%201.311-1.311C22%2018.72%2022%2017.88%2022%2016.2V7.8c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C19.72%203%2018.88%203%2017.2%203H6.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C2%205.28%202%206.12%202%207.8v8.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C4.28%2021%205.12%2021%206.8%2021Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-clapperboard);
    mask: var(--icon-clapperboard);
  }
  .icon-copy-01 {
    --icon-copy-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2015c-.932%200-1.398%200-1.765-.152a2%202%200%200%201-1.083-1.083C2%2013.398%202%2012.932%202%2012V5.2c0-1.12%200-1.68.218-2.108a2%202%200%200%201%20.874-.874C3.52%202%204.08%202%205.2%202H12c.932%200%201.398%200%201.765.152a2%202%200%200%201%201.083%201.083C15%203.602%2015%204.068%2015%205m-2.8%2017h6.6c1.12%200%201.68%200%202.108-.218a2%202%200%200%200%20.874-.874C22%2020.48%2022%2019.92%2022%2018.8v-6.6c0-1.12%200-1.68-.218-2.108a2%202%200%200%200-.874-.874C20.48%209%2019.92%209%2018.8%209h-6.6c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C9%2010.52%209%2011.08%209%2012.2v6.6c0%201.12%200%201.68.218%202.108a2%202%200%200%200%20.874.874C10.52%2022%2011.08%2022%2012.2%2022Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-copy-01);
    mask: var(--icon-copy-01);
  }
  .icon-copy-03 {
    --icon-copy-03: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%208V5.2c0-1.12%200-1.68.218-2.108a2%202%200%200%201%20.874-.874C9.52%202%2010.08%202%2011.2%202h7.6c1.12%200%201.68%200%202.108.218a2%202%200%200%201%20.874.874C22%203.52%2022%204.08%2022%205.2v7.6c0%201.12%200%201.68-.218%202.108a2%202%200%200%201-.874.874C20.48%2016%2019.92%2016%2018.8%2016H16M5.2%2022h7.6c1.12%200%201.68%200%202.108-.218a2%202%200%200%200%20.874-.874C16%2020.48%2016%2019.92%2016%2018.8v-7.6c0-1.12%200-1.68-.218-2.108a2%202%200%200%200-.874-.874C14.48%208%2013.92%208%2012.8%208H5.2c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C2%209.52%202%2010.08%202%2011.2v7.6c0%201.12%200%201.68.218%202.108a2%202%200%200%200%20.874.874C3.52%2022%204.08%2022%205.2%2022Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-copy-03);
    mask: var(--icon-copy-03);
  }
  .icon-dots-vertical {
    --icon-dots-vertical: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2013a1%201%200%201%200%200-2%201%201%200%200%200%200%202Zm0-7a1%201%200%201%200%200-2%201%201%200%200%200%200%202Zm0%2014a1%201%200%201%200%200-2%201%201%200%200%200%200%202Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-dots-vertical);
    mask: var(--icon-dots-vertical);
  }
  .icon-download-01 {
    --icon-download-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21%2015v1.2c0%201.68%200%202.52-.327%203.162a3%203%200%200%201-1.311%201.311C18.72%2021%2017.88%2021%2016.2%2021H7.8c-1.68%200-2.52%200-3.162-.327a3%203%200%200%201-1.311-1.311C3%2018.72%203%2017.88%203%2016.2V15m14-5-5%205m0%200-5-5m5%205V3%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-download-01);
    mask: var(--icon-download-01);
  }
  .icon-edit-02 {
    --icon-edit-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m18%2010-4-4M2.5%2021.5l3.384-.376c.414-.046.62-.069.814-.131a2%202%200%200%200%20.485-.234c.17-.111.317-.259.61-.553L21%207a2.828%202.828%200%201%200-4-4L3.794%2016.206c-.294.294-.442.442-.553.611a2%202%200%200%200-.234.485c-.062.193-.085.4-.131.814L2.5%2021.5Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-edit-02);
    mask: var(--icon-edit-02);
  }
  .icon-edit-03 {
    --icon-edit-03: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2020h9M3%2020h1.675c.489%200%20.733%200%20.964-.055.204-.05.399-.13.578-.24.201-.123.374-.296.72-.642L19.5%206.5a2.121%202.121%200%200%200-3-3L3.937%2016.063c-.346.346-.519.519-.642.72a2%202%200%200%200-.24.578c-.055.23-.055.475-.055.965V20Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-edit-03);
    mask: var(--icon-edit-03);
  }
  .icon-edit-05 {
    --icon-edit-05: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%204H6.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C2%206.28%202%207.12%202%208.8v8.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C4.28%2022%205.12%2022%206.8%2022h8.4c1.68%200%202.52%200%203.162-.327a3%203%200%200%200%201.311-1.311C20%2019.72%2020%2018.88%2020%2017.2V13M8%2016h1.675c.489%200%20.733%200%20.963-.055.204-.05.4-.13.579-.24.201-.123.374-.296.72-.642L21.5%205.5a2.121%202.121%200%200%200-3-3l-9.563%209.563c-.346.346-.519.519-.642.72a2%202%200%200%200-.24.579c-.055.23-.055.474-.055.963V16Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-edit-05);
    mask: var(--icon-edit-05);
  }
  .icon-eye {
    --icon-eye: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.42%2012.713c-.136-.215-.204-.323-.242-.49a1.173%201.173%200%200%201%200-.446c.038-.167.106-.274.242-.49C3.546%209.505%206.895%205%2012%205s8.455%204.505%209.58%206.287c.137.215.205.323.243.49.029.125.029.322%200%20.446-.038.167-.106.274-.242.49C20.455%2014.495%2017.105%2019%2012%2019c-5.106%200-8.455-4.505-9.58-6.287Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-eye);
    mask: var(--icon-eye);
  }
  .icon-file-lock-02 {
    --icon-file-lock-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%2010V6.8c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C17.72%202%2016.88%202%2015.2%202H8.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C4%204.28%204%205.12%204%206.8v10.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C6.28%2022%207.12%2022%208.8%2022h1.7M13%2011H8m3%204H8m8-8H8m11.25%2010v-1.75a1.75%201.75%200%201%200-3.5%200V17m-.15%204h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C21%2020.24%2021%2019.96%2021%2019.4v-.8c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C20.24%2017%2019.96%2017%2019.4%2017h-3.8c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C14%2017.76%2014%2018.04%2014%2018.6v.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C14.76%2021%2015.04%2021%2015.6%2021Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-file-lock-02);
    mask: var(--icon-file-lock-02);
  }
  .icon-file-plus-02 {
    --icon-file-plus-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%2010.5V6.8c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C17.72%202%2016.88%202%2015.2%202H8.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C4%204.28%204%205.12%204%206.8v10.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C6.28%2022%207.12%2022%208.8%2022H12m2-11H8m2%204H8m8-8H8m10%2014v-6m-3%203h6%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-file-plus-02);
    mask: var(--icon-file-plus-02);
  }
  .icon-file-search-02 {
    --icon-file-search-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14%2011H8m2%204H8m8-8H8m12%203.5V6.8c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C17.72%202%2016.88%202%2015.2%202H8.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C4%204.28%204%205.12%204%206.8v10.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C6.28%2022%207.12%2022%208.8%2022h2.7M22%2022l-1.5-1.5m1-2.5a3.5%203.5%200%201%201-7%200%203.5%203.5%200%200%201%207%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-file-search-02);
    mask: var(--icon-file-search-02);
  }
  .icon-folder {
    --icon-folder: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m13%207-1.116-2.231c-.32-.642-.481-.963-.72-1.198a2%202%200%200%200-.748-.462C10.1%203%209.74%203%209.022%203H5.2c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C2%204.52%202%205.08%202%206.2V7m0%200h15.2c1.68%200%202.52%200%203.162.327a3%203%200%200%201%201.311%201.311C22%209.28%2022%2010.12%2022%2011.8v4.4c0%201.68%200%202.52-.327%203.162a3%203%200%200%201-1.311%201.311C19.72%2021%2018.88%2021%2017.2%2021H6.8c-1.68%200-2.52%200-3.162-.327a3%203%200%200%201-1.311-1.311C2%2018.72%202%2017.88%202%2016.2V7Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-folder);
    mask: var(--icon-folder);
  }
  .icon-folder-closed {
    --icon-folder-closed: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m13%207-1.116-2.231c-.32-.642-.481-.963-.72-1.198a2%202%200%200%200-.748-.462C10.1%203%209.74%203%209.022%203H5.2c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C2%204.52%202%205.08%202%206.2V7m0%200h15.2c1.68%200%202.52%200%203.162.327a3%203%200%200%201%201.311%201.311C22%209.28%2022%2010.12%2022%2011.8v4.4c0%201.68%200%202.52-.327%203.162a3%203%200%200%201-1.311%201.311C19.72%2021%2018.88%2021%2017.2%2021H6.8c-1.68%200-2.52%200-3.162-.327a3%203%200%200%201-1.311-1.311C2%2018.72%202%2017.88%202%2016.2V7Zm7.5%204.5%205%205M16%2014a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-folder-closed);
    mask: var(--icon-folder-closed);
  }
  .icon-grid-01 {
    --icon-grid-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.4%203H4.6c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C3%203.76%203%204.04%203%204.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C3.76%2010%204.04%2010%204.6%2010h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C10%209.24%2010%208.96%2010%208.4V4.6c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C9.24%203%208.96%203%208.4%203Zm11%200h-3.8c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C14%203.76%2014%204.04%2014%204.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C14.76%2010%2015.04%2010%2015.6%2010h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C21%209.24%2021%208.96%2021%208.4V4.6c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C20.24%203%2019.96%203%2019.4%203Zm0%2011h-3.8c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C14%2014.76%2014%2015.04%2014%2015.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C14.76%2021%2015.04%2021%2015.6%2021h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C21%2020.24%2021%2019.96%2021%2019.4v-3.8c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C20.24%2014%2019.96%2014%2019.4%2014Zm-11%200H4.6c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C3%2014.76%203%2015.04%203%2015.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C3.76%2021%204.04%2021%204.6%2021h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C10%2020.24%2010%2019.96%2010%2019.4v-3.8c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C9.24%2014%208.96%2014%208.4%2014Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-grid-01);
    mask: var(--icon-grid-01);
  }
  .icon-help-circle {
    --icon-help-circle: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203m.08%204h.01M22%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012%206.477%202%2012%202s10%204.477%2010%2010Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-help-circle);
    mask: var(--icon-help-circle);
  }
  .icon-home-line {
    --icon-home-line: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%2017h8M11.018%202.764%204.235%208.039c-.453.353-.68.53-.843.75a2%202%200%200%200-.318.65C3%209.704%203%209.991%203%2010.565V17.8c0%201.12%200%201.68.218%202.108a2%202%200%200%200%20.874.874C4.52%2021%205.08%2021%206.2%2021h11.6c1.12%200%201.68%200%202.108-.218a2%202%200%200%200%20.874-.874C21%2019.48%2021%2018.92%2021%2017.8v-7.235c0-.574%200-.861-.074-1.126a2.002%202.002%200%200%200-.318-.65c-.163-.22-.39-.397-.843-.75l-6.783-5.275c-.351-.273-.527-.41-.72-.462a1%201%200%200%200-.523%200c-.194.052-.37.189-.721.462Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-home-line);
    mask: var(--icon-home-line);
  }
  .icon-hourglass-03 {
    --icon-hourglass-03: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2018.5h6M6.6%202h10.8c.56%200%20.84%200%201.054.109a1%201%200%200%201%20.437.437C19%202.76%2019%203.04%2019%203.6v2.075c0%20.489%200%20.733-.055.963-.05.205-.13.4-.24.579-.123.201-.296.374-.642.72L15.13%2010.87c-.396.396-.594.594-.668.822a1%201%200%200%200%200%20.618c.074.228.272.426.668.822l2.932%202.932c.346.346.519.519.642.72.11.18.19.374.24.578.055.23.055.475.055.965V20.4c0%20.56%200%20.84-.109%201.054a1%201%200%200%201-.437.437C18.24%2022%2017.96%2022%2017.4%2022H6.6c-.56%200-.84%200-1.054-.109a1%201%200%200%201-.437-.437C5%2021.24%205%2020.96%205%2020.4v-2.074c0-.49%200-.734.055-.965.05-.204.13-.399.24-.578.123-.201.296-.374.642-.72L8.87%2013.13c.396-.396.594-.594.668-.822a1%201%200%200%200%200-.618c-.074-.228-.272-.426-.668-.822L5.937%207.937c-.346-.346-.519-.519-.642-.72a2%202%200%200%201-.24-.579C5%206.408%205%206.164%205%205.675V3.6c0-.56%200-.84.109-1.054a1%201%200%200%201%20.437-.437C5.76%202%206.04%202%206.6%202Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-hourglass-03);
    mask: var(--icon-hourglass-03);
  }
  .icon-image-plus {
    --icon-image-plus: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5%203H7.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C3%205.28%203%206.12%203%207.8v8.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C5.28%2021%206.12%2021%207.8%2021H17c.93%200%201.395%200%201.776-.102a3%203%200%200%200%202.122-2.122C21%2018.395%2021%2017.93%2021%2017m-2-9V2m-3%203h6M10.5%208.5a2%202%200%201%201-4%200%202%202%200%200%201%204%200Zm4.49%203.418-8.459%207.69c-.476.433-.714.649-.735.836a.5.5%200%200%200%20.167.431C6.105%2021%206.426%2021%207.07%2021h9.387c1.44%200%202.159%200%202.724-.242a3%203%200%200%200%201.578-1.578c.242-.565.242-1.285.242-2.724%200-.484%200-.726-.053-.952a2.001%202.001%200%200%200-.374-.778c-.143-.182-.332-.333-.71-.636l-2.797-2.237c-.379-.303-.568-.454-.776-.508a1%201%200%200%200-.557.018c-.205.066-.384.23-.743.555Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-image-plus);
    mask: var(--icon-image-plus);
  }
  .icon-image-user-plus {
    --icon-image-user-plus: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%208V2m-3%203h6m0%207v5.2c0%201.68%200%202.52-.327%203.162a3%203%200%200%201-1.311%201.311C19.72%2022%2018.88%2022%2017.2%2022H6.8c-1.68%200-2.52%200-3.162-.327a3%203%200%200%201-1.311-1.311C2%2019.72%202%2018.88%202%2017.2V6.8c0-1.68%200-2.52.327-3.162a3%203%200%200%201%201.311-1.311C4.28%202%205.12%202%206.8%202H12M2.146%2019.926A4.002%204.002%200%200%201%206%2017h7c.93%200%201.394%200%201.78.077a4%204%200%200%201%203.143%203.143c.077.386.077.85.077%201.78M14%209.5a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-image-user-plus);
    mask: var(--icon-image-user-plus);
  }
  .icon-info-circle {
    --icon-info-circle: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2016v-4m0-4h.01M22%2012c0%205.523-4.477%2010-10%2010S2%2017.523%202%2012%206.477%202%2012%202s10%204.477%2010%2010Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-info-circle);
    mask: var(--icon-info-circle);
  }
  .icon-link-03 {
    --icon-link-03: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-link-03);
    mask: var(--icon-link-03);
  }
  .icon-link-broken-01 {
    --icon-link-broken-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%204V2m6%2018v2M4%209H2m18%206h2M4.914%204.914%203.5%203.5m15.586%2015.586L20.5%2020.5M12%2017.657l-2.121%202.121a4%204%200%201%201-5.657-5.657L6.343%2012m11.314%200%202.121-2.121a4%204%200%201%200-5.657-5.657L12%206.343%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-link-broken-01);
    mask: var(--icon-link-broken-01);
  }
  .icon-list {
    --icon-list: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21%2012H9m12-6H9m12%2012H9m-4-6a1%201%200%201%201-2%200%201%201%200%200%201%202%200Zm0-6a1%201%200%201%201-2%200%201%201%200%200%201%202%200Zm0%2012a1%201%200%201%201-2%200%201%201%200%200%201%202%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-list);
    mask: var(--icon-list);
  }
  .icon-lock-01 {
    --icon-lock-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17%2010V8A5%205%200%200%200%207%208v2m5%204.5v2M8.8%2021h6.4c1.68%200%202.52%200%203.162-.327a3%203%200%200%200%201.311-1.311C20%2018.72%2020%2017.88%2020%2016.2v-1.4c0-1.68%200-2.52-.327-3.162a3%203%200%200%200-1.311-1.311C17.72%2010%2016.88%2010%2015.2%2010H8.8c-1.68%200-2.52%200-3.162.327a3%203%200%200%200-1.311%201.311C4%2012.28%204%2013.12%204%2014.8v1.4c0%201.68%200%202.52.327%203.162a3%203%200%200%200%201.311%201.311C6.28%2021%207.12%2021%208.8%2021Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-lock-01);
    mask: var(--icon-lock-01);
  }
  .icon-menu-02 {
    --icon-menu-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3%2012h12M3%206h18M3%2018h18%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-menu-02);
    mask: var(--icon-menu-02);
  }
  .icon-message-chat-circle {
    --icon-message-chat-circle: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.094%2011.229A8.01%208.01%200%200%201%206%2010c0-4.418%203.605-8%208.053-8%204.447%200%208.052%203.582%208.052%208a7.94%207.94%200%200%201-.52%202.835c-.07.182-.105.274-.12.345a.897.897%200%200%200-.024.194c-.002.073.008.153.028.314l.403%203.27c.043.355.065.532.006.66a.5.5%200%200%201-.257.252c-.13.055-.306.03-.66-.022l-3.184-.467c-.167-.024-.25-.037-.326-.036a.898.898%200%200%200-.2.021%202.989%202.989%200%200%200-.358.122%208.174%208.174%200%200%201-4.07.42M7.632%2022C10.597%2022%2013%2019.538%2013%2016.5S10.597%2011%207.632%2011c-2.965%200-5.369%202.462-5.369%205.5%200%20.61.097%201.198.277%201.747.075.232.113.348.126.427.013.083.015.13.01.213-.005.08-.025.17-.065.351L2%2022l2.995-.409c.163-.022.245-.034.316-.033.076%200%20.115.005.19.02.07.013.173.05.381.123a5.246%205.246%200%200%200%201.75.299Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-message-chat-circle);
    mask: var(--icon-message-chat-circle);
  }
  .icon-plus {
    --icon-plus: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%205v14m-7-7h14%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-plus);
    mask: var(--icon-plus);
  }
  .icon-qr-code-02 {
    --icon-qr-code-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6.5%206.5h.01m10.99%200h.01M6.5%2017.5h.01M13%2013h.01m4.49%204.5h.01M17%2021h4v-4m-7-.5V21m7-7h-4.5m-.9-4h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C21%209.24%2021%208.96%2021%208.4V4.6c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C20.24%203%2019.96%203%2019.4%203h-3.8c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C14%203.76%2014%204.04%2014%204.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C14.76%2010%2015.04%2010%2015.6%2010Zm-11%200h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C10%209.24%2010%208.96%2010%208.4V4.6c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C9.24%203%208.96%203%208.4%203H4.6c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C3%203.76%203%204.04%203%204.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C3.76%2010%204.04%2010%204.6%2010Zm0%2011h3.8c.56%200%20.84%200%201.054-.109a1%201%200%200%200%20.437-.437C10%2020.24%2010%2019.96%2010%2019.4v-3.8c0-.56%200-.84-.109-1.054a1%201%200%200%200-.437-.437C9.24%2014%208.96%2014%208.4%2014H4.6c-.56%200-.84%200-1.054.109a1%201%200%200%200-.437.437C3%2014.76%203%2015.04%203%2015.6v3.8c0%20.56%200%20.84.109%201.054a1%201%200%200%200%20.437.437C3.76%2021%204.04%2021%204.6%2021Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-qr-code-02);
    mask: var(--icon-qr-code-02);
  }
  .icon-search-md {
    --icon-search-md: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m21%2021-4.35-4.35M19%2011a8%208%200%201%201-16%200%208%208%200%200%201%2016%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-search-md);
    mask: var(--icon-search-md);
  }
  .icon-search-sm {
    --icon-search-sm: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m21%2021-6-6m2-5a7%207%200%201%201-14%200%207%207%200%200%201%2014%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-search-sm);
    mask: var(--icon-search-sm);
  }
  .icon-settings-01 {
    --icon-settings-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M18.727%2014.727a1.5%201.5%200%200%200%20.3%201.655l.055.054a1.816%201.816%200%200%201%200%202.573%201.818%201.818%200%200%201-2.573%200l-.055-.055a1.5%201.5%200%200%200-1.654-.3%201.5%201.5%200%200%200-.91%201.373v.155a1.818%201.818%200%201%201-3.636%200V20.1a1.5%201.5%200%200%200-.981-1.373%201.5%201.5%200%200%200-1.655.3l-.054.055a1.818%201.818%200%200%201-3.106-1.287%201.818%201.818%200%200%201%20.533-1.286l.054-.055a1.5%201.5%200%200%200%20.3-1.654%201.5%201.5%200%200%200-1.372-.91h-.155a1.818%201.818%200%201%201%200-3.636H3.9a1.5%201.5%200%200%200%201.373-.981%201.5%201.5%200%200%200-.3-1.655l-.055-.054A1.818%201.818%200%201%201%207.491%204.99l.054.054a1.5%201.5%200%200%200%201.655.3h.073a1.5%201.5%200%200%200%20.909-1.372v-.155a1.818%201.818%200%200%201%203.636%200V3.9a1.499%201.499%200%200%200%20.91%201.373%201.5%201.5%200%200%200%201.654-.3l.054-.055a1.817%201.817%200%200%201%202.573%200%201.819%201.819%200%200%201%200%202.573l-.055.054a1.5%201.5%200%200%200-.3%201.655v.073a1.5%201.5%200%200%200%201.373.909h.155a1.818%201.818%200%200%201%200%203.636H20.1a1.499%201.499%200%200%200-1.373.91Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-settings-01);
    mask: var(--icon-settings-01);
  }
  .icon-trash-01 {
    --icon-trash-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%206v-.8c0-1.12%200-1.68-.218-2.108a2%202%200%200%200-.874-.874C14.48%202%2013.92%202%2012.8%202h-1.6c-1.12%200-1.68%200-2.108.218a2%202%200%200%200-.874.874C8%203.52%208%204.08%208%205.2V6m2%205.5v5m4-5v5M3%206h18m-2%200v11.2c0%201.68%200%202.52-.327%203.162a3%203%200%200%201-1.311%201.311C16.72%2022%2015.88%2022%2014.2%2022H9.8c-1.68%200-2.52%200-3.162-.327a3%203%200%200%201-1.311-1.311C5%2019.72%205%2018.88%205%2017.2V6%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-trash-01);
    mask: var(--icon-trash-01);
  }
  .icon-upload-cloud-02 {
    --icon-upload-cloud-02: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m8%2016%204-4m0%200%204%204m-4-4v9m8-4.257A5.5%205.5%200%200%200%2016.5%207a.62.62%200%200%201-.534-.302%207.5%207.5%200%201%200-11.78%209.096%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-upload-cloud-02);
    mask: var(--icon-upload-cloud-02);
  }
  .icon-user-01 {
    --icon-user-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20%2021c0-1.396%200-2.093-.172-2.661a4%204%200%200%200-2.667-2.667c-.568-.172-1.265-.172-2.661-.172h-5c-1.396%200-2.093%200-2.661.172a4%204%200%200%200-2.667%202.667C4%2018.907%204%2019.604%204%2021M16.5%207.5a4.5%204.5%200%201%201-9%200%204.5%204.5%200%200%201%209%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-user-01);
    mask: var(--icon-user-01);
  }
  .icon-user-check-01 {
    --icon-user-check-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2015.5H7.5c-1.396%200-2.093%200-2.661.172a4%204%200%200%200-2.667%202.667C2%2018.907%202%2019.604%202%2021m14-3%202%202%204-4m-7.5-8.5a4.5%204.5%200%201%201-9%200%204.5%204.5%200%200%201%209%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-user-check-01);
    mask: var(--icon-user-check-01);
  }
  .icon-users-01 {
    --icon-users-01: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M22%2021v-2a4.002%204.002%200%200%200-3-3.874M15.5%203.291a4.001%204.001%200%200%201%200%207.418M17%2021c0-1.864%200-2.796-.305-3.53a4%204%200%200%200-2.164-2.165C13.796%2015%2012.864%2015%2011%2015H8c-1.864%200-2.796%200-3.53.305a4%204%200%200%200-2.166%202.164C2%2018.204%202%2019.136%202%2021M13.5%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200Z%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-users-01);
    mask: var(--icon-users-01);
  }
  .icon-x {
    --icon-x: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17%207%207%2017M7%207l10%2010%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-x);
    mask: var(--icon-x);
  }
  .icon-x-close {
    --icon-x-close: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-x-close);
    mask: var(--icon-x-close);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .bg-signature-authentication-bankid {
    background: var(--color-signature-authentication-bankid) !important;
  }
  .bg-signature-authentication-email-otp {
    background: var(--color-signature-authentication-email-otp) !important;
  }
  .bg-signature-authentication-ftn {
    background: var(--color-signature-authentication-ftn) !important;
  }
  .bg-signature-authentication-mitid {
    background: var(--color-signature-authentication-mitid) !important;
  }
  .delay-0 {
    animation-delay: 0s;
  }
  .duration-75 {
    animation-duration: 75ms;
  }
  .duration-100 {
    animation-duration: 100ms;
  }
  .duration-150 {
    animation-duration: 150ms;
  }
  .duration-200 {
    animation-duration: 200ms;
  }
  .duration-300 {
    animation-duration: 300ms;
  }
  .ease-in {
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  .ease-in-out {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ease-linear {
    animation-timing-function: linear;
  }
  .ease-out {
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  .fade-in {
    --tw-enter-opacity: 0;
  }
  .flag-AD {
    --flag: url('/images/flags/AD.svg');
  }
  .flag-AE {
    --flag: url('/images/flags/AE.svg');
  }
  .flag-AF {
    --flag: url('/images/flags/AF.svg');
  }
  .flag-AG {
    --flag: url('/images/flags/AG.svg');
  }
  .flag-AI {
    --flag: url('/images/flags/AI.svg');
  }
  .flag-AL {
    --flag: url('/images/flags/AL.svg');
  }
  .flag-AM {
    --flag: url('/images/flags/AM.svg');
  }
  .flag-AO {
    --flag: url('/images/flags/AO.svg');
  }
  .flag-AR {
    --flag: url('/images/flags/AR.svg');
  }
  .flag-AS {
    --flag: url('/images/flags/AS.svg');
  }
  .flag-AT {
    --flag: url('/images/flags/AT.svg');
  }
  .flag-AU {
    --flag: url('/images/flags/AU.svg');
  }
  .flag-AW {
    --flag: url('/images/flags/AW.svg');
  }
  .flag-AX {
    --flag: url('/images/flags/AX.svg');
  }
  .flag-AZ {
    --flag: url('/images/flags/AZ.svg');
  }
  .flag-BA {
    --flag: url('/images/flags/BA.svg');
  }
  .flag-BB {
    --flag: url('/images/flags/BB.svg');
  }
  .flag-BD {
    --flag: url('/images/flags/BD.svg');
  }
  .flag-BE {
    --flag: url('/images/flags/BE.svg');
  }
  .flag-BF {
    --flag: url('/images/flags/BF.svg');
  }
  .flag-BG {
    --flag: url('/images/flags/BG.svg');
  }
  .flag-BH {
    --flag: url('/images/flags/BH.svg');
  }
  .flag-BI {
    --flag: url('/images/flags/BI.svg');
  }
  .flag-BJ {
    --flag: url('/images/flags/BJ.svg');
  }
  .flag-BL {
    --flag: url('/images/flags/BL.svg');
  }
  .flag-BM {
    --flag: url('/images/flags/BM.svg');
  }
  .flag-BN {
    --flag: url('/images/flags/BN.svg');
  }
  .flag-BO {
    --flag: url('/images/flags/BO.svg');
  }
  .flag-BR {
    --flag: url('/images/flags/BR.svg');
  }
  .flag-BS {
    --flag: url('/images/flags/BS.svg');
  }
  .flag-BT {
    --flag: url('/images/flags/BT.svg');
  }
  .flag-BW {
    --flag: url('/images/flags/BW.svg');
  }
  .flag-BY {
    --flag: url('/images/flags/BY.svg');
  }
  .flag-BZ {
    --flag: url('/images/flags/BZ.svg');
  }
  .flag-CA {
    --flag: url('/images/flags/CA.svg');
  }
  .flag-CC {
    --flag: url('/images/flags/CC.svg');
  }
  .flag-CD {
    --flag: url('/images/flags/CD.svg');
  }
  .flag-CF {
    --flag: url('/images/flags/CF.svg');
  }
  .flag-CH {
    --flag: url('/images/flags/CH.svg');
  }
  .flag-CK {
    --flag: url('/images/flags/CK.svg');
  }
  .flag-CL {
    --flag: url('/images/flags/CL.svg');
  }
  .flag-CM {
    --flag: url('/images/flags/CM.svg');
  }
  .flag-CN {
    --flag: url('/images/flags/CN.svg');
  }
  .flag-CO {
    --flag: url('/images/flags/CO.svg');
  }
  .flag-CR {
    --flag: url('/images/flags/CR.svg');
  }
  .flag-CU {
    --flag: url('/images/flags/CU.svg');
  }
  .flag-CW {
    --flag: url('/images/flags/CW.svg');
  }
  .flag-CX {
    --flag: url('/images/flags/CX.svg');
  }
  .flag-CY {
    --flag: url('/images/flags/CY.svg');
  }
  .flag-CZ {
    --flag: url('/images/flags/CZ.svg');
  }
  .flag-DE {
    --flag: url('/images/flags/DE.svg');
  }
  .flag-DJ {
    --flag: url('/images/flags/DJ.svg');
  }
  .flag-DK {
    --flag: url('/images/flags/DK.svg');
  }
  .flag-DM {
    --flag: url('/images/flags/DM.svg');
  }
  .flag-DO {
    --flag: url('/images/flags/DO.svg');
  }
  .flag-DZ {
    --flag: url('/images/flags/DZ.svg');
  }
  .flag-EARTH {
    --flag: url('/images/flags/EARTH.svg');
  }
  .flag-EC {
    --flag: url('/images/flags/EC.svg');
  }
  .flag-EE {
    --flag: url('/images/flags/EE.svg');
  }
  .flag-EG {
    --flag: url('/images/flags/EG.svg');
  }
  .flag-EH {
    --flag: url('/images/flags/EH.svg');
  }
  .flag-ER {
    --flag: url('/images/flags/ER.svg');
  }
  .flag-ES {
    --flag: url('/images/flags/ES.svg');
  }
  .flag-ET {
    --flag: url('/images/flags/ET.svg');
  }
  .flag-FI {
    --flag: url('/images/flags/FI.svg');
  }
  .flag-FJ {
    --flag: url('/images/flags/FJ.svg');
  }
  .flag-FK {
    --flag: url('/images/flags/FK.svg');
  }
  .flag-FM {
    --flag: url('/images/flags/FM.svg');
  }
  .flag-FO {
    --flag: url('/images/flags/FO.svg');
  }
  .flag-FR {
    --flag: url('/images/flags/FR.svg');
  }
  .flag-GA {
    --flag: url('/images/flags/GA.svg');
  }
  .flag-GB {
    --flag: url('/images/flags/GB.svg');
  }
  .flag-GD {
    --flag: url('/images/flags/GD.svg');
  }
  .flag-GE {
    --flag: url('/images/flags/GE.svg');
  }
  .flag-GG {
    --flag: url('/images/flags/GG.svg');
  }
  .flag-GH {
    --flag: url('/images/flags/GH.svg');
  }
  .flag-GI {
    --flag: url('/images/flags/GI.svg');
  }
  .flag-GL {
    --flag: url('/images/flags/GL.svg');
  }
  .flag-GM {
    --flag: url('/images/flags/GM.svg');
  }
  .flag-GN {
    --flag: url('/images/flags/GN.svg');
  }
  .flag-GQ {
    --flag: url('/images/flags/GQ.svg');
  }
  .flag-GR {
    --flag: url('/images/flags/GR.svg');
  }
  .flag-GT {
    --flag: url('/images/flags/GT.svg');
  }
  .flag-GU {
    --flag: url('/images/flags/GU.svg');
  }
  .flag-GW {
    --flag: url('/images/flags/GW.svg');
  }
  .flag-GY {
    --flag: url('/images/flags/GY.svg');
  }
  .flag-HK {
    --flag: url('/images/flags/HK.svg');
  }
  .flag-HN {
    --flag: url('/images/flags/HN.svg');
  }
  .flag-HR {
    --flag: url('/images/flags/HR.svg');
  }
  .flag-HT {
    --flag: url('/images/flags/HT.svg');
  }
  .flag-HU {
    --flag: url('/images/flags/HU.svg');
  }
  .flag-ID {
    --flag: url('/images/flags/ID.svg');
  }
  .flag-IE {
    --flag: url('/images/flags/IE.svg');
  }
  .flag-IL {
    --flag: url('/images/flags/IL.svg');
  }
  .flag-IM {
    --flag: url('/images/flags/IM.svg');
  }
  .flag-IN {
    --flag: url('/images/flags/IN.svg');
  }
  .flag-IO {
    --flag: url('/images/flags/IO.svg');
  }
  .flag-IQ {
    --flag: url('/images/flags/IQ.svg');
  }
  .flag-IR {
    --flag: url('/images/flags/IR.svg');
  }
  .flag-IS {
    --flag: url('/images/flags/IS.svg');
  }
  .flag-IT {
    --flag: url('/images/flags/IT.svg');
  }
  .flag-JE {
    --flag: url('/images/flags/JE.svg');
  }
  .flag-JM {
    --flag: url('/images/flags/JM.svg');
  }
  .flag-JO {
    --flag: url('/images/flags/JO.svg');
  }
  .flag-JP {
    --flag: url('/images/flags/JP.svg');
  }
  .flag-KE {
    --flag: url('/images/flags/KE.svg');
  }
  .flag-KG {
    --flag: url('/images/flags/KG.svg');
  }
  .flag-KH {
    --flag: url('/images/flags/KH.svg');
  }
  .flag-KI {
    --flag: url('/images/flags/KI.svg');
  }
  .flag-KM {
    --flag: url('/images/flags/KM.svg');
  }
  .flag-KN {
    --flag: url('/images/flags/KN.svg');
  }
  .flag-KP {
    --flag: url('/images/flags/KP.svg');
  }
  .flag-KR {
    --flag: url('/images/flags/KR.svg');
  }
  .flag-KW {
    --flag: url('/images/flags/KW.svg');
  }
  .flag-KY {
    --flag: url('/images/flags/KY.svg');
  }
  .flag-KZ {
    --flag: url('/images/flags/KZ.svg');
  }
  .flag-LA {
    --flag: url('/images/flags/LA.svg');
  }
  .flag-LB {
    --flag: url('/images/flags/LB.svg');
  }
  .flag-LC {
    --flag: url('/images/flags/LC.svg');
  }
  .flag-LI {
    --flag: url('/images/flags/LI.svg');
  }
  .flag-LK {
    --flag: url('/images/flags/LK.svg');
  }
  .flag-LR {
    --flag: url('/images/flags/LR.svg');
  }
  .flag-LS {
    --flag: url('/images/flags/LS.svg');
  }
  .flag-LT {
    --flag: url('/images/flags/LT.svg');
  }
  .flag-LU {
    --flag: url('/images/flags/LU.svg');
  }
  .flag-LV {
    --flag: url('/images/flags/LV.svg');
  }
  .flag-LY {
    --flag: url('/images/flags/LY.svg');
  }
  .flag-MA {
    --flag: url('/images/flags/MA.svg');
  }
  .flag-MC {
    --flag: url('/images/flags/MC.svg');
  }
  .flag-MD {
    --flag: url('/images/flags/MD.svg');
  }
  .flag-ME {
    --flag: url('/images/flags/ME.svg');
  }
  .flag-MG {
    --flag: url('/images/flags/MG.svg');
  }
  .flag-MH {
    --flag: url('/images/flags/MH.svg');
  }
  .flag-MK {
    --flag: url('/images/flags/MK.svg');
  }
  .flag-ML {
    --flag: url('/images/flags/ML.svg');
  }
  .flag-MM {
    --flag: url('/images/flags/MM.svg');
  }
  .flag-MN {
    --flag: url('/images/flags/MN.svg');
  }
  .flag-MO {
    --flag: url('/images/flags/MO.svg');
  }
  .flag-MP {
    --flag: url('/images/flags/MP.svg');
  }
  .flag-MQ {
    --flag: url('/images/flags/MQ.svg');
  }
  .flag-MR {
    --flag: url('/images/flags/MR.svg');
  }
  .flag-MS {
    --flag: url('/images/flags/MS.svg');
  }
  .flag-MT {
    --flag: url('/images/flags/MT.svg');
  }
  .flag-MU {
    --flag: url('/images/flags/MU.svg');
  }
  .flag-MV {
    --flag: url('/images/flags/MV.svg');
  }
  .flag-MW {
    --flag: url('/images/flags/MW.svg');
  }
  .flag-MX {
    --flag: url('/images/flags/MX.svg');
  }
  .flag-MY {
    --flag: url('/images/flags/MY.svg');
  }
  .flag-MZ {
    --flag: url('/images/flags/MZ.svg');
  }
  .flag-NA {
    --flag: url('/images/flags/NA.svg');
  }
  .flag-NE {
    --flag: url('/images/flags/NE.svg');
  }
  .flag-NF {
    --flag: url('/images/flags/NF.svg');
  }
  .flag-NG {
    --flag: url('/images/flags/NG.svg');
  }
  .flag-NI {
    --flag: url('/images/flags/NI.svg');
  }
  .flag-NL {
    --flag: url('/images/flags/NL.svg');
  }
  .flag-NO {
    --flag: url('/images/flags/NO.svg');
  }
  .flag-NP {
    --flag: url('/images/flags/NP.svg');
  }
  .flag-NR {
    --flag: url('/images/flags/NR.svg');
  }
  .flag-NU {
    --flag: url('/images/flags/NU.svg');
  }
  .flag-NZ {
    --flag: url('/images/flags/NZ.svg');
  }
  .flag-OM {
    --flag: url('/images/flags/OM.svg');
  }
  .flag-PA {
    --flag: url('/images/flags/PA.svg');
  }
  .flag-PE {
    --flag: url('/images/flags/PE.svg');
  }
  .flag-PF {
    --flag: url('/images/flags/PF.svg');
  }
  .flag-PG {
    --flag: url('/images/flags/PG.svg');
  }
  .flag-PH {
    --flag: url('/images/flags/PH.svg');
  }
  .flag-PK {
    --flag: url('/images/flags/PK.svg');
  }
  .flag-PL {
    --flag: url('/images/flags/PL.svg');
  }
  .flag-PN {
    --flag: url('/images/flags/PN.svg');
  }
  .flag-PR {
    --flag: url('/images/flags/PR.svg');
  }
  .flag-PS {
    --flag: url('/images/flags/PS.svg');
  }
  .flag-PT {
    --flag: url('/images/flags/PT.svg');
  }
  .flag-PW {
    --flag: url('/images/flags/PW.svg');
  }
  .flag-PY {
    --flag: url('/images/flags/PY.svg');
  }
  .flag-QA {
    --flag: url('/images/flags/QA.svg');
  }
  .flag-RO {
    --flag: url('/images/flags/RO.svg');
  }
  .flag-RS {
    --flag: url('/images/flags/RS.svg');
  }
  .flag-RU {
    --flag: url('/images/flags/RU.svg');
  }
  .flag-RW {
    --flag: url('/images/flags/RW.svg');
  }
  .flag-SA {
    --flag: url('/images/flags/SA.svg');
  }
  .flag-SB {
    --flag: url('/images/flags/SB.svg');
  }
  .flag-SC {
    --flag: url('/images/flags/SC.svg');
  }
  .flag-SD {
    --flag: url('/images/flags/SD.svg');
  }
  .flag-SE {
    --flag: url('/images/flags/SE.svg');
  }
  .flag-SG {
    --flag: url('/images/flags/SG.svg');
  }
  .flag-SI {
    --flag: url('/images/flags/SI.svg');
  }
  .flag-SK {
    --flag: url('/images/flags/SK.svg');
  }
  .flag-SL {
    --flag: url('/images/flags/SL.svg');
  }
  .flag-SM {
    --flag: url('/images/flags/SM.svg');
  }
  .flag-SN {
    --flag: url('/images/flags/SN.svg');
  }
  .flag-SO {
    --flag: url('/images/flags/SO.svg');
  }
  .flag-SR {
    --flag: url('/images/flags/SR.svg');
  }
  .flag-SS {
    --flag: url('/images/flags/SS.svg');
  }
  .flag-ST {
    --flag: url('/images/flags/ST.svg');
  }
  .flag-SV {
    --flag: url('/images/flags/SV.svg');
  }
  .flag-SX {
    --flag: url('/images/flags/SX.svg');
  }
  .flag-SY {
    --flag: url('/images/flags/SY.svg');
  }
  .flag-SZ {
    --flag: url('/images/flags/SZ.svg');
  }
  .flag-TC {
    --flag: url('/images/flags/TC.svg');
  }
  .flag-TD {
    --flag: url('/images/flags/TD.svg');
  }
  .flag-TG {
    --flag: url('/images/flags/TG.svg');
  }
  .flag-TH {
    --flag: url('/images/flags/TH.svg');
  }
  .flag-TJ {
    --flag: url('/images/flags/TJ.svg');
  }
  .flag-TK {
    --flag: url('/images/flags/TK.svg');
  }
  .flag-TL {
    --flag: url('/images/flags/TL.svg');
  }
  .flag-TM {
    --flag: url('/images/flags/TM.svg');
  }
  .flag-TN {
    --flag: url('/images/flags/TN.svg');
  }
  .flag-TO {
    --flag: url('/images/flags/TO.svg');
  }
  .flag-TR {
    --flag: url('/images/flags/TR.svg');
  }
  .flag-TT {
    --flag: url('/images/flags/TT.svg');
  }
  .flag-TV {
    --flag: url('/images/flags/TV.svg');
  }
  .flag-TW {
    --flag: url('/images/flags/TW.svg');
  }
  .flag-TZ {
    --flag: url('/images/flags/TZ.svg');
  }
  .flag-UA {
    --flag: url('/images/flags/UA.svg');
  }
  .flag-UG {
    --flag: url('/images/flags/UG.svg');
  }
  .flag-US {
    --flag: url('/images/flags/US.svg');
  }
  .flag-UY {
    --flag: url('/images/flags/UY.svg');
  }
  .flag-UZ {
    --flag: url('/images/flags/UZ.svg');
  }
  .flag-VC {
    --flag: url('/images/flags/VC.svg');
  }
  .flag-VE {
    --flag: url('/images/flags/VE.svg');
  }
  .flag-VG {
    --flag: url('/images/flags/VG.svg');
  }
  .flag-VI {
    --flag: url('/images/flags/VI.svg');
  }
  .flag-VN {
    --flag: url('/images/flags/VN.svg');
  }
  .flag-VU {
    --flag: url('/images/flags/VU.svg');
  }
  .flag-WS {
    --flag: url('/images/flags/WS.svg');
  }
  .flag-YE {
    --flag: url('/images/flags/YE.svg');
  }
  .flag-ZA {
    --flag: url('/images/flags/ZA.svg');
  }
  .flag-ZM {
    --flag: url('/images/flags/ZM.svg');
  }
  .flag-ZW {
    --flag: url('/images/flags/ZW.svg');
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .text-box-trim {
    text-box: trim-both cap alphabetic;
  }
  .transition-discrete-staggered {
    transition: opacity 150ms, translate 150ms, scale 150ms, display 200ms allow-discrete, overlay 200ms allow-discrete;
  }
  .\*\:min-h-64 {
    :is(& > *) {
      min-height: calc(var(--spacing) * 64);
    }
  }
  .\*\:w-full {
    :is(& > *) {
      width: 100%;
    }
  }
  .\*\:flex-1 {
    :is(& > *) {
      flex: 1;
    }
  }
  .\*\:shrink-0 {
    :is(& > *) {
      flex-shrink: 0;
    }
  }
  .\*\:grow {
    :is(& > *) {
      flex-grow: 1;
    }
  }
  .\*\:basis-full {
    :is(& > *) {
      flex-basis: 100%;
    }
  }
  .\*\:px-3 {
    :is(& > *) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .not-first\:-ml-px {
    &:not(*:first-child) {
      margin-left: -1px;
    }
  }
  .not-first\:border-l {
    &:not(*:first-child) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .\*\:not-first\:-ml-px {
    :is(& > *) {
      &:not(*:first-child) {
        margin-left: -1px;
      }
    }
  }
  .\*\:not-first\:rounded-l-none {
    :is(& > *) {
      &:not(*:first-child) {
        border-top-left-radius: var(--radius-none);
        border-bottom-left-radius: var(--radius-none);
      }
    }
  }
  .\*\:not-last\:rounded-r-none {
    :is(& > *) {
      &:not(*:last-child) {
        border-top-right-radius: var(--radius-none);
        border-bottom-right-radius: var(--radius-none);
      }
    }
  }
  .not-in-data-item\:hidden {
    &:not(:where(*[data-item]) *) {
      display: none;
    }
  }
  .group-hover\:text-secondary_hover {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--text-color-secondary_hover);
      }
    }
  }
  .group-hover\:opacity-90 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .group-hover\/avatar\:opacity-100 {
    &:is(:where(.group\/avatar):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/button\:text-button-primary-icon_hover {
    &:is(:where(.group\/button):hover *) {
      @media (hover: hover) {
        color: var(--color-button-primary-icon_hover);
      }
    }
  }
  .group-hover\/button\:text-fg-brand-secondary_hover {
    &:is(:where(.group\/button):hover *) {
      @media (hover: hover) {
        color: var(--color-fg-brand-secondary_hover);
      }
    }
  }
  .group-hover\/button\:text-fg-error-primary {
    &:is(:where(.group\/button):hover *) {
      @media (hover: hover) {
        color: var(--color-fg-error-primary);
      }
    }
  }
  .group-hover\/button\:text-fg-quaternary_hover {
    &:is(:where(.group\/button):hover *) {
      @media (hover: hover) {
        color: var(--color-fg-quaternary_hover);
      }
    }
  }
  .group-hover\/button\:text-primary_on-brand {
    &:is(:where(.group\/button):hover *) {
      @media (hover: hover) {
        color: var(--text-color-primary_on-brand);
      }
    }
  }
  .group-hover\/button\:decoration-current {
    &:is(:where(.group\/button):hover *) {
      @media (hover: hover) {
        text-decoration-color: currentcolor;
      }
    }
  }
  .group-hover\/upload\:text-brand-secondary_hover {
    &:is(:where(.group\/upload):hover *) {
      @media (hover: hover) {
        color: var(--text-color-brand-secondary_hover);
      }
    }
  }
  .group-hover\/upload\:decoration-current {
    &:is(:where(.group\/upload):hover *) {
      @media (hover: hover) {
        text-decoration-color: currentcolor;
      }
    }
  }
  .group-disabled\/button\:text-fg-disabled_subtle {
    &:is(:where(.group\/button):disabled *) {
      color: var(--color-fg-disabled_subtle);
    }
  }
  .group-has-checked\/checkbox\:opacity-100 {
    &:is(:where(.group\/checkbox):has(*:checked) *) {
      opacity: 100%;
    }
  }
  .group-has-checked\/radio\:opacity-100 {
    &:is(:where(.group\/radio):has(*:checked) *) {
      opacity: 100%;
    }
  }
  .group-has-checked\/toggle\:translate-x-3 {
    &:is(:where(.group\/toggle):has(*:checked) *) {
      --tw-translate-x: calc(var(--spacing) * 3);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-has-checked\/toggle\:translate-x-4 {
    &:is(:where(.group\/toggle):has(*:checked) *) {
      --tw-translate-x: calc(var(--spacing) * 4);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-has-checked\/toggle\:translate-x-5 {
    &:is(:where(.group\/toggle):has(*:checked) *) {
      --tw-translate-x: calc(var(--spacing) * 5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-has-checked\/toggle\:border-toggle-slim-border_pressed {
    &:is(:where(.group\/toggle):has(*:checked) *) {
      border-color: var(--color-toggle-slim-border_pressed);
    }
  }
  .group-has-disabled\/checkbox\:text-fg-disabled_subtle {
    &:is(:where(.group\/checkbox):has(*:disabled) *) {
      color: var(--color-fg-disabled_subtle);
    }
  }
  .group-data-open\/docked_slideout\:translate-x-0 {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-data-open\/docked_slideout\:rotate-180 {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      rotate: 180deg;
    }
  }
  .group-data-open\/docked_slideout\:opacity-100 {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      opacity: 100%;
    }
  }
  .group-data-open\/docked_slideout\:ease-out {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .group-data-open\/docked_slideout\:ease-out {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .group-data-open\/mobile_nav_dialog\:translate-x-0 {
    &:is(:where(.group\/mobile_nav_dialog)[data-open] *) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-data-open\/mobile_nav_dialog\:ease-out {
    &:is(:where(.group\/mobile_nav_dialog)[data-open] *) {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .group-data-open\/mobile_nav_dialog\:ease-out {
    &:is(:where(.group\/mobile_nav_dialog)[data-open] *) {
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .group-data-open\/modal\:scale-100 {
    &:is(:where(.group\/modal)[data-open] *) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .group-data-open\/modal\:ease-out {
    &:is(:where(.group\/modal)[data-open] *) {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .group-data-open\/modal\:ease-out {
    &:is(:where(.group\/modal)[data-open] *) {
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .group-data-open\/slideout\:translate-x-0 {
    &:is(:where(.group\/slideout)[data-open] *) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-data-open\/slideout\:ease-out {
    &:is(:where(.group\/slideout)[data-open] *) {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .group-data-open\/slideout\:ease-out {
    &:is(:where(.group\/slideout)[data-open] *) {
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .group-data-\[color\=error\]\/autosave\:bg-utility-error-50 {
    &:is(:where(.group\/autosave)[data-color="error"] *) {
      background-color: var(--color-utility-error-50);
    }
  }
  .group-data-\[color\=error\]\/autosave\:text-utility-error-700 {
    &:is(:where(.group\/autosave)[data-color="error"] *) {
      color: var(--color-utility-error-700);
    }
  }
  .group-data-\[color\=error\]\/autosave\:ring-utility-error-200 {
    &:is(:where(.group\/autosave)[data-color="error"] *) {
      --tw-ring-color: var(--color-utility-error-200);
    }
  }
  .group-data-\[color\=gray\]\/autosave\:bg-utility-gray-50 {
    &:is(:where(.group\/autosave)[data-color="gray"] *) {
      background-color: var(--color-utility-gray-50);
    }
  }
  .group-data-\[color\=gray\]\/autosave\:text-utility-gray-700 {
    &:is(:where(.group\/autosave)[data-color="gray"] *) {
      color: var(--color-utility-gray-700);
    }
  }
  .group-data-\[color\=gray\]\/autosave\:ring-utility-gray-200 {
    &:is(:where(.group\/autosave)[data-color="gray"] *) {
      --tw-ring-color: var(--color-utility-gray-200);
    }
  }
  .group-data-\[color\=success\]\/autosave\:bg-utility-success-50 {
    &:is(:where(.group\/autosave)[data-color="success"] *) {
      background-color: var(--color-utility-success-50);
    }
  }
  .group-data-\[color\=success\]\/autosave\:text-utility-success-700 {
    &:is(:where(.group\/autosave)[data-color="success"] *) {
      color: var(--color-utility-success-700);
    }
  }
  .group-data-\[color\=success\]\/autosave\:ring-utility-success-200 {
    &:is(:where(.group\/autosave)[data-color="success"] *) {
      --tw-ring-color: var(--color-utility-success-200);
    }
  }
  .group-data-\[focused\]\/item\:bg-primary_hover {
    &:is(:where(.group\/item)[data-focused] *) {
      background-color: var(--background-color-primary_hover);
    }
  }
  .group-data-\[focused\]\/item\:bg-secondary_hover {
    &:is(:where(.group\/item)[data-focused] *) {
      background-color: var(--background-color-secondary_hover);
    }
  }
  .group-data-\[selected\]\/item\:block {
    &:is(:where(.group\/item)[data-selected] *) {
      display: block;
    }
  }
  .group-data-\[state\]\/autosave\:inline-flex {
    &:is(:where(.group\/autosave)[data-state] *) {
      display: inline-flex;
    }
  }
  .group-data-\[state\=error\]\/autosave\:block {
    &:is(:where(.group\/autosave)[data-state="error"] *) {
      display: block;
    }
  }
  .group-data-\[state\=error\]\/autosave\:hidden {
    &:is(:where(.group\/autosave)[data-state="error"] *) {
      display: none;
    }
  }
  .group-data-\[state\=saving\]\/autosave\:block {
    &:is(:where(.group\/autosave)[data-state="saving"] *) {
      display: block;
    }
  }
  .group-data-\[state\=saving\]\/autosave\:hidden {
    &:is(:where(.group\/autosave)[data-state="saving"] *) {
      display: none;
    }
  }
  .group-phx-click-loading\/button\:visible {
    &:is(:where(.group\/button).phx-click-loading *) {
      visibility: visible;
    }
  }
  .group-phx-click-loading\/button\:w-6\.5 {
    &:is(:where(.group\/button).phx-click-loading *) {
      width: calc(var(--spacing) * 6.5);
    }
  }
  .group-phx-click-loading\/button\:opacity-0 {
    &:is(:where(.group\/button).phx-click-loading *) {
      opacity: 0%;
    }
  }
  .group-phx-click-loading\/button\:opacity-70 {
    &:is(:where(.group\/button).phx-click-loading *) {
      opacity: 70%;
    }
  }
  .group-phx-click-loading\/button\:opacity-100 {
    &:is(:where(.group\/button).phx-click-loading *) {
      opacity: 100%;
    }
  }
  .group-phx-click-loading\/button\:delay-500 {
    &:is(:where(.group\/button).phx-click-loading *) {
      transition-delay: 500ms;
    }
  }
  .group-phx-click-loading\/button\:delay-600 {
    &:is(:where(.group\/button).phx-click-loading *) {
      transition-delay: 600ms;
    }
  }
  .group-phx-click-loading\/button\:delay-500 {
    &:is(:where(.group\/button).phx-click-loading *) {
      animation-delay: 500ms;
    }
  }
  .group-phx-click-loading\/button\:delay-600 {
    &:is(:where(.group\/button).phx-click-loading *) {
      animation-delay: 600ms;
    }
  }
  .group-phx-submit-button-loading\/button\:visible {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      visibility: visible;
    }
  }
  .group-phx-submit-button-loading\/button\:w-6\.5 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      width: calc(var(--spacing) * 6.5);
    }
  }
  .group-phx-submit-button-loading\/button\:opacity-0 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      opacity: 0%;
    }
  }
  .group-phx-submit-button-loading\/button\:opacity-70 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      opacity: 70%;
    }
  }
  .group-phx-submit-button-loading\/button\:opacity-100 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      opacity: 100%;
    }
  }
  .group-phx-submit-button-loading\/button\:delay-500 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      transition-delay: 500ms;
    }
  }
  .group-phx-submit-button-loading\/button\:delay-600 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      transition-delay: 600ms;
    }
  }
  .group-phx-submit-button-loading\/button\:delay-500 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      animation-delay: 500ms;
    }
  }
  .group-phx-submit-button-loading\/button\:delay-600 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      animation-delay: 600ms;
    }
  }
  .placeholder\:text-placeholder {
    &::placeholder {
      color: var(--text-color-placeholder);
    }
  }
  .placeholder\:text-slate-400 {
    &::placeholder {
      color: var(--color-slate-400);
    }
  }
  .backdrop\:bg-overlay\/70 {
    &::backdrop {
      background-color: color-mix(in srgb, rgb(10 13 18) 70%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-overlay) 70%, transparent);
      }
    }
  }
  .backdrop\:opacity-0 {
    &::backdrop {
      opacity: 0%;
    }
  }
  .backdrop\:transition-\[display\,opacity\,overlay\] {
    &::backdrop {
      transition-property: display,opacity,overlay;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .backdrop\:transition-discrete {
    &::backdrop {
      transition-behavior: allow-discrete;
    }
  }
  .backdrop\:duration-300 {
    &::backdrop {
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
  }
  .backdrop\:ease-in {
    &::backdrop {
      --tw-ease: var(--ease-in);
      transition-timing-function: var(--ease-in);
    }
  }
  .backdrop\:duration-300 {
    &::backdrop {
      animation-duration: 300ms;
    }
  }
  .backdrop\:ease-in {
    &::backdrop {
      animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
  }
  .first\:mt-0 {
    &:first-child {
      margin-top: 0;
    }
  }
  .first\:rounded-l-full {
    &:first-child {
      border-top-left-radius: var(--radius-full);
      border-bottom-left-radius: var(--radius-full);
    }
  }
  .first\:\*\:pl-4 {
    &:first-child {
      :is(& > *) {
        padding-left: calc(var(--spacing) * 4);
      }
    }
  }
  .last\:rounded-r-full {
    &:last-child {
      border-top-right-radius: var(--radius-full);
      border-bottom-right-radius: var(--radius-full);
    }
  }
  .last\:rounded-b-xl {
    &:last-child {
      border-bottom-right-radius: var(--radius-xl);
      border-bottom-left-radius: var(--radius-xl);
    }
  }
  .last\:border-r-0 {
    &:last-child {
      border-right-style: var(--tw-border-style);
      border-right-width: 0px;
    }
  }
  .last\:\*\:pr-4 {
    &:last-child {
      :is(& > *) {
        padding-right: calc(var(--spacing) * 4);
      }
    }
  }
  .only\:table-row {
    &:only-child {
      display: table-row;
    }
  }
  .checked\:border-green-600 {
    &:checked {
      border-color: var(--color-green-600);
    }
  }
  .checked\:border-red-600 {
    &:checked {
      border-color: var(--color-red-600);
    }
  }
  .checked\:border-slate-300 {
    &:checked {
      border-color: var(--color-slate-300);
    }
  }
  .autofill\:rounded-lg {
    &:autofill {
      border-radius: var(--radius-lg);
    }
  }
  .autofill\:text-primary {
    &:autofill {
      color: var(--text-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-brand {
    &:focus-within {
      --tw-ring-color: var(--ring-color-brand);
    }
  }
  .hover\:border-contract-status-cancelled-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-100);
      }
    }
  }
  .hover\:border-contract-status-cancelled-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-200);
      }
    }
  }
  .hover\:border-contract-status-cancelled-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-300);
      }
    }
  }
  .hover\:border-contract-status-cancelled-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-400);
      }
    }
  }
  .hover\:border-contract-status-cancelled-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-500);
      }
    }
  }
  .hover\:border-contract-status-cancelled-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-600);
      }
    }
  }
  .hover\:border-contract-status-cancelled-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-700);
      }
    }
  }
  .hover\:border-contract-status-cancelled-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-800);
      }
    }
  }
  .hover\:border-contract-status-cancelled-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-cancelled-900);
      }
    }
  }
  .hover\:border-contract-status-draft-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-100);
      }
    }
  }
  .hover\:border-contract-status-draft-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-200);
      }
    }
  }
  .hover\:border-contract-status-draft-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-300);
      }
    }
  }
  .hover\:border-contract-status-draft-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-400);
      }
    }
  }
  .hover\:border-contract-status-draft-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-500);
      }
    }
  }
  .hover\:border-contract-status-draft-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-600);
      }
    }
  }
  .hover\:border-contract-status-draft-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-700);
      }
    }
  }
  .hover\:border-contract-status-draft-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-800);
      }
    }
  }
  .hover\:border-contract-status-draft-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-draft-900);
      }
    }
  }
  .hover\:border-contract-status-pending-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-100);
      }
    }
  }
  .hover\:border-contract-status-pending-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-200);
      }
    }
  }
  .hover\:border-contract-status-pending-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-300);
      }
    }
  }
  .hover\:border-contract-status-pending-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-400);
      }
    }
  }
  .hover\:border-contract-status-pending-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-500);
      }
    }
  }
  .hover\:border-contract-status-pending-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-600);
      }
    }
  }
  .hover\:border-contract-status-pending-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-700);
      }
    }
  }
  .hover\:border-contract-status-pending-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-800);
      }
    }
  }
  .hover\:border-contract-status-pending-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-pending-900);
      }
    }
  }
  .hover\:border-contract-status-rejected-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-100);
      }
    }
  }
  .hover\:border-contract-status-rejected-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-200);
      }
    }
  }
  .hover\:border-contract-status-rejected-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-300);
      }
    }
  }
  .hover\:border-contract-status-rejected-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-400);
      }
    }
  }
  .hover\:border-contract-status-rejected-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-500);
      }
    }
  }
  .hover\:border-contract-status-rejected-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-600);
      }
    }
  }
  .hover\:border-contract-status-rejected-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-700);
      }
    }
  }
  .hover\:border-contract-status-rejected-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-800);
      }
    }
  }
  .hover\:border-contract-status-rejected-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-rejected-900);
      }
    }
  }
  .hover\:border-contract-status-signed-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-100);
      }
    }
  }
  .hover\:border-contract-status-signed-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-200);
      }
    }
  }
  .hover\:border-contract-status-signed-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-300);
      }
    }
  }
  .hover\:border-contract-status-signed-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-400);
      }
    }
  }
  .hover\:border-contract-status-signed-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-500);
      }
    }
  }
  .hover\:border-contract-status-signed-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-600);
      }
    }
  }
  .hover\:border-contract-status-signed-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-700);
      }
    }
  }
  .hover\:border-contract-status-signed-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-800);
      }
    }
  }
  .hover\:border-contract-status-signed-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-contract-status-signed-900);
      }
    }
  }
  .hover\:border-fg-brand-primary_alt {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fg-brand-primary_alt);
      }
    }
  }
  .hover\:border-fill-mode-issuer-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-100);
      }
    }
  }
  .hover\:border-fill-mode-issuer-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-200);
      }
    }
  }
  .hover\:border-fill-mode-issuer-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-300);
      }
    }
  }
  .hover\:border-fill-mode-issuer-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-400);
      }
    }
  }
  .hover\:border-fill-mode-issuer-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-500);
      }
    }
  }
  .hover\:border-fill-mode-issuer-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-600);
      }
    }
  }
  .hover\:border-fill-mode-issuer-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-700);
      }
    }
  }
  .hover\:border-fill-mode-issuer-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-800);
      }
    }
  }
  .hover\:border-fill-mode-issuer-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-issuer-900);
      }
    }
  }
  .hover\:border-fill-mode-signer-100 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-100);
      }
    }
  }
  .hover\:border-fill-mode-signer-200 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-200);
      }
    }
  }
  .hover\:border-fill-mode-signer-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-300);
      }
    }
  }
  .hover\:border-fill-mode-signer-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-400);
      }
    }
  }
  .hover\:border-fill-mode-signer-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-500);
      }
    }
  }
  .hover\:border-fill-mode-signer-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-600);
      }
    }
  }
  .hover\:border-fill-mode-signer-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-700);
      }
    }
  }
  .hover\:border-fill-mode-signer-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-800);
      }
    }
  }
  .hover\:border-fill-mode-signer-900 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fill-mode-signer-900);
      }
    }
  }
  .hover\:bg-brand-solid_hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-brand-solid_hover);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-100);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-200);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-300);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-400);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-500);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-600);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-700);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-800);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-cancelled-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-cancelled-900);
      }
    }
  }
  .hover\:bg-contract-status-cancelled-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-cancelled-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-100);
      }
    }
  }
  .hover\:bg-contract-status-draft-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-200);
      }
    }
  }
  .hover\:bg-contract-status-draft-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-300);
      }
    }
  }
  .hover\:bg-contract-status-draft-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-400);
      }
    }
  }
  .hover\:bg-contract-status-draft-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-500);
      }
    }
  }
  .hover\:bg-contract-status-draft-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-600);
      }
    }
  }
  .hover\:bg-contract-status-draft-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-700);
      }
    }
  }
  .hover\:bg-contract-status-draft-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-800);
      }
    }
  }
  .hover\:bg-contract-status-draft-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-draft-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-draft-900);
      }
    }
  }
  .hover\:bg-contract-status-draft-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-draft-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-100);
      }
    }
  }
  .hover\:bg-contract-status-pending-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-200);
      }
    }
  }
  .hover\:bg-contract-status-pending-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-300);
      }
    }
  }
  .hover\:bg-contract-status-pending-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-400);
      }
    }
  }
  .hover\:bg-contract-status-pending-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-500);
      }
    }
  }
  .hover\:bg-contract-status-pending-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-600);
      }
    }
  }
  .hover\:bg-contract-status-pending-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-700);
      }
    }
  }
  .hover\:bg-contract-status-pending-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-800);
      }
    }
  }
  .hover\:bg-contract-status-pending-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-pending-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-pending-900);
      }
    }
  }
  .hover\:bg-contract-status-pending-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-pending-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-100);
      }
    }
  }
  .hover\:bg-contract-status-rejected-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffe4e2 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-200);
      }
    }
  }
  .hover\:bg-contract-status-rejected-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fbcbc7 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-300);
      }
    }
  }
  .hover\:bg-contract-status-rejected-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ffa8a0 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-400);
      }
    }
  }
  .hover\:bg-contract-status-rejected-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ff7c6b 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-500);
      }
    }
  }
  .hover\:bg-contract-status-rejected-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ff5530 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-600);
      }
    }
  }
  .hover\:bg-contract-status-rejected-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #e53f00 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-700);
      }
    }
  }
  .hover\:bg-contract-status-rejected-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #c03300 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-800);
      }
    }
  }
  .hover\:bg-contract-status-rejected-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #9f2900 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-rejected-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-rejected-900);
      }
    }
  }
  .hover\:bg-contract-status-rejected-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #87250b 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-rejected-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-100);
      }
    }
  }
  .hover\:bg-contract-status-signed-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #e0fce7 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-200);
      }
    }
  }
  .hover\:bg-contract-status-signed-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #baf9cc 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-300);
      }
    }
  }
  .hover\:bg-contract-status-signed-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #8af7ac 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-400);
      }
    }
  }
  .hover\:bg-contract-status-signed-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #41e683 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-500);
      }
    }
  }
  .hover\:bg-contract-status-signed-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #01cb69 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-600);
      }
    }
  }
  .hover\:bg-contract-status-signed-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #01a856 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-700);
      }
    }
  }
  .hover\:bg-contract-status-signed-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #058443 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-800);
      }
    }
  }
  .hover\:bg-contract-status-signed-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0f6835 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-contract-status-signed-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-contract-status-signed-900);
      }
    }
  }
  .hover\:bg-contract-status-signed-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #10562d 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-contract-status-signed-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-100);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-200);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-300);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-400);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-500);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-600);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-700);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-800);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-issuer-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-issuer-900);
      }
    }
  }
  .hover\:bg-fill-mode-issuer-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-issuer-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-100);
      }
    }
  }
  .hover\:bg-fill-mode-signer-100\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #e0fce7 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-200);
      }
    }
  }
  .hover\:bg-fill-mode-signer-200\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #baf9cc 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-300);
      }
    }
  }
  .hover\:bg-fill-mode-signer-300\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #8af7ac 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-400);
      }
    }
  }
  .hover\:bg-fill-mode-signer-400\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #41e683 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-500);
      }
    }
  }
  .hover\:bg-fill-mode-signer-500\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #01cb69 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-600);
      }
    }
  }
  .hover\:bg-fill-mode-signer-600\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #01a856 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-700);
      }
    }
  }
  .hover\:bg-fill-mode-signer-700\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #058443 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-800);
      }
    }
  }
  .hover\:bg-fill-mode-signer-800\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #0f6835 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-fill-mode-signer-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fill-mode-signer-900);
      }
    }
  }
  .hover\:bg-fill-mode-signer-900\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #10562d 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-fill-mode-signer-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-green-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-700);
      }
    }
  }
  .hover\:bg-primary_hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-primary_hover);
      }
    }
  }
  .hover\:bg-quaternary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-quaternary);
      }
    }
  }
  .hover\:bg-quaternary_hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-quaternary_hover);
      }
    }
  }
  .hover\:bg-secondary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-secondary);
      }
    }
  }
  .hover\:bg-secondary_hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-secondary_hover);
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-slate-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-200);
      }
    }
  }
  .hover\:bg-slate-200\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-slate-200) 90%, transparent);
        }
      }
    }
  }
  .hover\:bg-success-solid_hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-success-solid_hover);
      }
    }
  }
  .hover\:bg-tertiary_hover {
    &:hover {
      @media (hover: hover) {
        background-color: var(--background-color-tertiary_hover);
      }
    }
  }
  .hover\:text-brand-secondary {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-brand-secondary);
      }
    }
  }
  .hover\:text-brand-secondary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-brand-secondary_hover);
      }
    }
  }
  .hover\:text-contract-status-cancelled-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-100);
      }
    }
  }
  .hover\:text-contract-status-cancelled-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-200);
      }
    }
  }
  .hover\:text-contract-status-cancelled-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-300);
      }
    }
  }
  .hover\:text-contract-status-cancelled-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-400);
      }
    }
  }
  .hover\:text-contract-status-cancelled-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-500);
      }
    }
  }
  .hover\:text-contract-status-cancelled-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-600);
      }
    }
  }
  .hover\:text-contract-status-cancelled-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-700);
      }
    }
  }
  .hover\:text-contract-status-cancelled-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-800);
      }
    }
  }
  .hover\:text-contract-status-cancelled-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-cancelled-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-cancelled-900);
      }
    }
  }
  .hover\:text-contract-status-cancelled-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-cancelled-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-100);
      }
    }
  }
  .hover\:text-contract-status-draft-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-200);
      }
    }
  }
  .hover\:text-contract-status-draft-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-300);
      }
    }
  }
  .hover\:text-contract-status-draft-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-400);
      }
    }
  }
  .hover\:text-contract-status-draft-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-500);
      }
    }
  }
  .hover\:text-contract-status-draft-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-600);
      }
    }
  }
  .hover\:text-contract-status-draft-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-700);
      }
    }
  }
  .hover\:text-contract-status-draft-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-800);
      }
    }
  }
  .hover\:text-contract-status-draft-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-draft-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-draft-900);
      }
    }
  }
  .hover\:text-contract-status-draft-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-draft-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-100);
      }
    }
  }
  .hover\:text-contract-status-pending-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-200);
      }
    }
  }
  .hover\:text-contract-status-pending-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-300);
      }
    }
  }
  .hover\:text-contract-status-pending-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-400);
      }
    }
  }
  .hover\:text-contract-status-pending-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-500);
      }
    }
  }
  .hover\:text-contract-status-pending-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-600);
      }
    }
  }
  .hover\:text-contract-status-pending-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-700);
      }
    }
  }
  .hover\:text-contract-status-pending-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-800);
      }
    }
  }
  .hover\:text-contract-status-pending-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-pending-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-pending-900);
      }
    }
  }
  .hover\:text-contract-status-pending-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-pending-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-100);
      }
    }
  }
  .hover\:text-contract-status-rejected-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #ffe4e2 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-200);
      }
    }
  }
  .hover\:text-contract-status-rejected-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #fbcbc7 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-300);
      }
    }
  }
  .hover\:text-contract-status-rejected-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #ffa8a0 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-400);
      }
    }
  }
  .hover\:text-contract-status-rejected-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #ff7c6b 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-500);
      }
    }
  }
  .hover\:text-contract-status-rejected-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #ff5530 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-600);
      }
    }
  }
  .hover\:text-contract-status-rejected-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #e53f00 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-700);
      }
    }
  }
  .hover\:text-contract-status-rejected-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #c03300 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-800);
      }
    }
  }
  .hover\:text-contract-status-rejected-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #9f2900 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-rejected-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-rejected-900);
      }
    }
  }
  .hover\:text-contract-status-rejected-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #87250b 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-rejected-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-100);
      }
    }
  }
  .hover\:text-contract-status-signed-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #e0fce7 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-200);
      }
    }
  }
  .hover\:text-contract-status-signed-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #baf9cc 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-300);
      }
    }
  }
  .hover\:text-contract-status-signed-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #8af7ac 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-400);
      }
    }
  }
  .hover\:text-contract-status-signed-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #41e683 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-500);
      }
    }
  }
  .hover\:text-contract-status-signed-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #01cb69 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-600);
      }
    }
  }
  .hover\:text-contract-status-signed-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #01a856 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-700);
      }
    }
  }
  .hover\:text-contract-status-signed-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #058443 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-800);
      }
    }
  }
  .hover\:text-contract-status-signed-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #0f6835 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-contract-status-signed-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-contract-status-signed-900);
      }
    }
  }
  .hover\:text-contract-status-signed-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #10562d 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-contract-status-signed-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-error-primary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-error-primary_hover);
      }
    }
  }
  .hover\:text-fg-quaternary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg-quaternary_hover);
      }
    }
  }
  .hover\:text-fg-secondary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg-secondary);
      }
    }
  }
  .hover\:text-fg-secondary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fg-secondary_hover);
      }
    }
  }
  .hover\:text-fill-mode-issuer-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-100);
      }
    }
  }
  .hover\:text-fill-mode-issuer-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(209 233 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-200);
      }
    }
  }
  .hover\:text-fill-mode-issuer-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(178 221 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-300);
      }
    }
  }
  .hover\:text-fill-mode-issuer-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(132 202 255) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-400);
      }
    }
  }
  .hover\:text-fill-mode-issuer-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(83 177 253) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-500);
      }
    }
  }
  .hover\:text-fill-mode-issuer-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(46 144 250) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-600);
      }
    }
  }
  .hover\:text-fill-mode-issuer-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(21 112 239) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-700);
      }
    }
  }
  .hover\:text-fill-mode-issuer-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(23 92 211) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-800);
      }
    }
  }
  .hover\:text-fill-mode-issuer-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(24 73 169) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-issuer-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-issuer-900);
      }
    }
  }
  .hover\:text-fill-mode-issuer-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, rgb(25 65 133) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-issuer-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-100 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-100);
      }
    }
  }
  .hover\:text-fill-mode-signer-100\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #e0fce7 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-100) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-200);
      }
    }
  }
  .hover\:text-fill-mode-signer-200\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #baf9cc 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-200) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-300);
      }
    }
  }
  .hover\:text-fill-mode-signer-300\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #8af7ac 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-300) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-400);
      }
    }
  }
  .hover\:text-fill-mode-signer-400\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #41e683 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-400) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-500);
      }
    }
  }
  .hover\:text-fill-mode-signer-500\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #01cb69 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-500) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-600);
      }
    }
  }
  .hover\:text-fill-mode-signer-600\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #01a856 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-600) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-700);
      }
    }
  }
  .hover\:text-fill-mode-signer-700\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #058443 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-700) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-800);
      }
    }
  }
  .hover\:text-fill-mode-signer-800\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #0f6835 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-800) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-fill-mode-signer-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fill-mode-signer-900);
      }
    }
  }
  .hover\:text-fill-mode-signer-900\/25 {
    &:hover {
      @media (hover: hover) {
        color: color-mix(in srgb, #10562d 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-fill-mode-signer-900) 25%, transparent);
        }
      }
    }
  }
  .hover\:text-quaternary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-quaternary_hover);
      }
    }
  }
  .hover\:text-quinary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-quinary_hover);
      }
    }
  }
  .hover\:text-secondary {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-secondary);
      }
    }
  }
  .hover\:text-secondary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-secondary_hover);
      }
    }
  }
  .hover\:text-slate-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-700);
      }
    }
  }
  .hover\:text-slate-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .hover\:text-tertiary_hover {
    &:hover {
      @media (hover: hover) {
        color: var(--text-color-tertiary_hover);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:ring-2 {
    &:hover {
      @media (hover: 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-brand {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--ring-color-brand);
      }
    }
  }
  .hover\:ring-focus-ring {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-focus-ring);
      }
    }
  }
  .hover\:ring-offset-2 {
    &:hover {
      @media (hover: hover) {
        --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);
      }
    }
  }
  .hover\:ring-offset-bg-primary {
    &:hover {
      @media (hover: hover) {
        --tw-ring-offset-color: var(--color-bg-primary);
      }
    }
  }
  .focus\:z-10 {
    &:focus {
      z-index: 10;
    }
  }
  .focus\:border-transparent {
    &:focus {
      border-color: transparent;
    }
  }
  .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-brand {
    &:focus {
      --tw-ring-color: var(--ring-color-brand);
    }
  }
  .focus\:ring-brand-600 {
    &:focus {
      --tw-ring-color: var(--color-brand-600);
    }
  }
  .focus\:ring-focus-ring {
    &:focus {
      --tw-ring-color: var(--color-focus-ring);
    }
  }
  .focus\:ring-green-600 {
    &:focus {
      --tw-ring-color: var(--color-green-600);
    }
  }
  .focus\:ring-green-700 {
    &:focus {
      --tw-ring-color: var(--color-green-700);
    }
  }
  .focus\:ring-purple-400 {
    &:focus {
      --tw-ring-color: var(--color-purple-400);
    }
  }
  .focus\:ring-red-600 {
    &:focus {
      --tw-ring-color: var(--color-red-600);
    }
  }
  .focus\:ring-slate-300 {
    &:focus {
      --tw-ring-color: var(--color-slate-300);
    }
  }
  .focus\:ring-slate-600 {
    &:focus {
      --tw-ring-color: var(--color-slate-600);
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --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);
    }
  }
  .focus\:outline-hidden {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus\:ring-inset {
    &:focus {
      --tw-ring-inset: inset;
    }
  }
  .focus-visible\:z-1 {
    &:focus-visible {
      z-index: 1;
    }
  }
  .focus-visible\:z-10 {
    &:focus-visible {
      z-index: 10;
    }
  }
  .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-focus-ring {
    &:focus-visible {
      --tw-ring-color: var(--color-focus-ring);
    }
  }
  .focus-visible\:ring-offset-bg-primary {
    &:focus-visible {
      --tw-ring-offset-color: var(--color-bg-primary);
    }
  }
  .focus-visible\:outline-2 {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .focus-visible\:-outline-offset-2 {
    &:focus-visible {
      outline-offset: calc(2px * -1);
    }
  }
  .focus-visible\:outline-offset-2 {
    &:focus-visible {
      outline-offset: 2px;
    }
  }
  .focus-visible\:ring-inset {
    &:focus-visible {
      --tw-ring-inset: inset;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:text-fg-disabled_subtle {
    &:disabled {
      color: var(--color-fg-disabled_subtle);
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .disabled\:shadow-xs {
    &:disabled {
      --tw-shadow: 0px 1px 2px var(--tw-shadow-color, rgba(10, 13, 18, 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .disabled\:ring-disabled_subtle {
    &:disabled {
      --tw-ring-color: var(--ring-color-disabled_subtle);
    }
  }
  .disabled\:not-phx-submit-button-loading\:pointer-events-none {
    &:disabled {
      &:not(*[type="submit"].phx-submit-loading) {
        pointer-events: none;
      }
    }
  }
  .disabled\:not-phx-submit-button-loading\:cursor-not-allowed {
    &:disabled {
      &:not(*[type="submit"].phx-submit-loading) {
        cursor: not-allowed;
      }
    }
  }
  .disabled\:not-phx-submit-button-loading\:bg-disabled {
    &:disabled {
      &:not(*[type="submit"].phx-submit-loading) {
        background-color: var(--background-color-disabled);
      }
    }
  }
  .disabled\:not-phx-submit-button-loading\:text-fg-disabled {
    &:disabled {
      &:not(*[type="submit"].phx-submit-loading) {
        color: var(--color-fg-disabled);
      }
    }
  }
  .disabled\:not-phx-submit-button-loading\:ring-1 {
    &:disabled {
      &:not(*[type="submit"].phx-submit-loading) {
        --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);
      }
    }
  }
  .disabled\:not-phx-submit-button-loading\:ring-disabled_subtle {
    &:disabled {
      &:not(*[type="submit"].phx-submit-loading) {
        --tw-ring-color: var(--ring-color-disabled_subtle);
      }
    }
  }
  .has-checked\:bg-brand-solid {
    &:has(*:checked) {
      background-color: var(--background-color-brand-solid);
    }
  }
  .has-checked\:ring-bg-brand-solid {
    &:has(*:checked) {
      --tw-ring-color: var(--ring-color-bg-brand-solid);
    }
  }
  .has-checked\:ring-transparent {
    &:has(*:checked) {
      --tw-ring-color: transparent;
    }
  }
  .has-checked\:hover\:bg-brand-solid_hover {
    &:has(*:checked) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--background-color-brand-solid_hover);
        }
      }
    }
  }
  .has-focus-visible\:outline-2 {
    &:has(*:focus-visible) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .has-disabled\:cursor-not-allowed {
    &:has(*:disabled) {
      cursor: not-allowed;
    }
  }
  .has-disabled\:bg-disabled_subtle {
    &:has(*:disabled) {
      background-color: var(--background-color-disabled_subtle);
    }
  }
  .has-disabled\:ring-disabled {
    &:has(*:disabled) {
      --tw-ring-color: var(--ring-color-disabled);
    }
  }
  .has-disabled\:has-checked\:bg-disabled_subtle {
    &:has(*:disabled) {
      &:has(*:checked) {
        background-color: var(--background-color-disabled_subtle);
      }
    }
  }
  .has-disabled\:has-checked\:ring-disabled {
    &:has(*:disabled) {
      &:has(*:checked) {
        --tw-ring-color: var(--ring-color-disabled);
      }
    }
  }
  .has-\[\[data-control\=checkbox-md\]\]\:\[--connie-control-offset\:2rem\] {
    &:has(*:is([data-control=checkbox-md])) {
      --connie-control-offset: 2rem;
    }
  }
  .has-\[\[data-control\=checkbox-sm\]\]\:\[--connie-control-offset\:1\.5rem\] {
    &:has(*:is([data-control=checkbox-sm])) {
      --connie-control-offset: 1.5rem;
    }
  }
  .has-\[\[data-control\=radio-md\]\]\:\[--connie-control-offset\:2rem\] {
    &:has(*:is([data-control=radio-md])) {
      --connie-control-offset: 2rem;
    }
  }
  .has-\[\[data-control\=radio-sm\]\]\:\[--connie-control-offset\:1\.5rem\] {
    &:has(*:is([data-control=radio-sm])) {
      --connie-control-offset: 1.5rem;
    }
  }
  .has-\[\[data-control\=toggle-md\]\]\:\[--connie-control-offset\:3\.5rem\] {
    &:has(*:is([data-control=toggle-md])) {
      --connie-control-offset: 3.5rem;
    }
  }
  .has-\[\[data-control\=toggle-sm\]\]\:\[--connie-control-offset\:2\.75rem\] {
    &:has(*:is([data-control=toggle-sm])) {
      --connie-control-offset: 2.75rem;
    }
  }
  .\*\*\:data-avatar\:ring-\[1\.5px\] {
    :is(& *) {
      &[data-avatar] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + 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);
      }
    }
  }
  .\*\*\:data-avatar\:ring-bg-primary {
    :is(& *) {
      &[data-avatar] {
        --tw-ring-color: var(--color-bg-primary);
      }
    }
  }
  .\*\:data-component-root\:flex {
    :is(& > *) {
      &[data-component-root] {
        display: flex;
      }
    }
  }
  .\*\:data-component-root\:h-full {
    :is(& > *) {
      &[data-component-root] {
        height: 100%;
      }
    }
  }
  .\*\:data-component-root\:flex-1 {
    :is(& > *) {
      &[data-component-root] {
        flex: 1;
      }
    }
  }
  .\*\:data-component-root\:flex-col {
    :is(& > *) {
      &[data-component-root] {
        flex-direction: column;
      }
    }
  }
  .\*\:data-component-root\:gap-6 {
    :is(& > *) {
      &[data-component-root] {
        gap: calc(var(--spacing) * 6);
      }
    }
  }
  .data-hidden\:-translate-y-full {
    &[data-hidden] {
      --tw-translate-y: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-invalid\:ring-error_subtle {
    &[data-invalid] {
      --tw-ring-color: var(--ring-color-error_subtle);
    }
  }
  .data-invalid\:focus-within\:ring-2 {
    &[data-invalid] {
      &: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);
      }
    }
  }
  .data-invalid\:focus-within\:ring-error {
    &[data-invalid] {
      &:focus-within {
        --tw-ring-color: var(--ring-color-error);
      }
    }
  }
  .data-invalid\:focus\:ring-2 {
    &[data-invalid] {
      &: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);
      }
    }
  }
  .data-invalid\:focus\:ring-error {
    &[data-invalid] {
      &:focus {
        --tw-ring-color: var(--ring-color-error);
      }
    }
  }
  .data-open\:block {
    &[data-open] {
      display: block;
    }
  }
  .data-open\:-translate-x-0 {
    &[data-open] {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-open\:translate-x-0 {
    &[data-open] {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-open\:translate-y-0 {
    &[data-open] {
      --tw-translate-y: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-open\:scale-100 {
    &[data-open] {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .data-open\:opacity-100 {
    &[data-open] {
      opacity: 100%;
    }
  }
  .data-open\:ease-out {
    &[data-open] {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .data-open\:ease-out {
    &[data-open] {
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  .data-open\:backdrop\:opacity-100 {
    &[data-open] {
      &::backdrop {
        opacity: 100%;
      }
    }
  }
  .data-open\:backdrop\:ease-out {
    &[data-open] {
      &::backdrop {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out);
      }
    }
  }
  .data-open\:backdrop\:ease-out {
    &[data-open] {
      &::backdrop {
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }
  }
  .\*\*\:data-sign-tag\:ring-\[1\.5px\] {
    :is(& *) {
      &[data-sign-tag] {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + 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);
      }
    }
  }
  .\*\*\:data-sign-tag\:ring-bg-primary {
    :is(& *) {
      &[data-sign-tag] {
        --tw-ring-color: var(--color-bg-primary);
      }
    }
  }
  .max-xl\:hidden {
    @media (width < 80rem) {
      display: none;
    }
  }
  .max-xl\:max-w-none {
    @media (width < 80rem) {
      max-width: none;
    }
  }
  .max-xl\:translate-x-full {
    @media (width < 80rem) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .max-xl\:bg-overlay\/50 {
    @media (width < 80rem) {
      background-color: color-mix(in srgb, rgb(10 13 18) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--background-color-overlay) 50%, transparent);
      }
    }
  }
  .max-xl\:opacity-0 {
    @media (width < 80rem) {
      opacity: 0%;
    }
  }
  .max-xl\:group-data-open\/docked_slideout\:flex {
    @media (width < 80rem) {
      &:is(:where(.group\/docked_slideout)[data-open] *) {
        display: flex;
      }
    }
  }
  .max-md\:hidden {
    @media (width < 48rem) {
      display: none;
    }
  }
  .min-\[1500px\]\:table-cell {
    @media (width >= 1500px) {
      display: table-cell;
    }
  }
  .sm\:absolute {
    @media (width >= 40rem) {
      position: absolute;
    }
  }
  .sm\:top-auto {
    @media (width >= 40rem) {
      top: auto;
    }
  }
  .sm\:-right-8 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * -8);
    }
  }
  .sm\:-right-24 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * -24);
    }
  }
  .sm\:left-auto {
    @media (width >= 40rem) {
      left: auto;
    }
  }
  .sm\:-m-6 {
    @media (width >= 40rem) {
      margin: calc(var(--spacing) * -6);
    }
  }
  .sm\:-mx-3 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * -3);
    }
  }
  .sm\:-mx-6 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * -6);
    }
  }
  .sm\:my-8 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:mt-3 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:w-screen {
    @media (width >= 40rem) {
      width: 100vw;
    }
  }
  .sm\:max-w-2xl {
    @media (width >= 40rem) {
      max-width: var(--container-2xl);
    }
  }
  .sm\:max-w-2xs {
    @media (width >= 40rem) {
      max-width: var(--container-2xs);
    }
  }
  .sm\:max-w-3xl {
    @media (width >= 40rem) {
      max-width: var(--container-3xl);
    }
  }
  .sm\:max-w-3xs {
    @media (width >= 40rem) {
      max-width: var(--container-3xs);
    }
  }
  .sm\:max-w-4xl {
    @media (width >= 40rem) {
      max-width: var(--container-4xl);
    }
  }
  .sm\:max-w-5xl {
    @media (width >= 40rem) {
      max-width: var(--container-5xl);
    }
  }
  .sm\:max-w-6xl {
    @media (width >= 40rem) {
      max-width: var(--container-6xl);
    }
  }
  .sm\:max-w-7xl {
    @media (width >= 40rem) {
      max-width: var(--container-7xl);
    }
  }
  .sm\:max-w-56 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 56);
    }
  }
  .sm\:max-w-\[50\%\] {
    @media (width >= 40rem) {
      max-width: 50%;
    }
  }
  .sm\:max-w-lg {
    @media (width >= 40rem) {
      max-width: var(--container-lg);
    }
  }
  .sm\:max-w-md {
    @media (width >= 40rem) {
      max-width: var(--container-md);
    }
  }
  .sm\:max-w-sm {
    @media (width >= 40rem) {
      max-width: var(--container-sm);
    }
  }
  .sm\:max-w-xl {
    @media (width >= 40rem) {
      max-width: var(--container-xl);
    }
  }
  .sm\:max-w-xs {
    @media (width >= 40rem) {
      max-width: var(--container-xs);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:gap-8 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:bg-quaternary {
    @media (width >= 40rem) {
      background-color: var(--background-color-quaternary);
    }
  }
  .sm\:p-3 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-8 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .sm\:p-16 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:leading-6 {
    @media (width >= 40rem) {
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
  }
  .sm\:shadow-2xl {
    @media (width >= 40rem) {
      --tw-shadow: 0px 24px 48px -12px var(--tw-shadow-color, rgba(10, 13, 18, 0.18)), 0px 4px 4px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .sm\:\*\:flex-none {
    @media (width >= 40rem) {
      :is(& > *) {
        flex: none;
      }
    }
  }
  .sm\:\*\:data-component-root\:gap-8 {
    @media (width >= 40rem) {
      :is(& > *) {
        &[data-component-root] {
          gap: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:h-32 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 32);
    }
  }
  .md\:w-10 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 10);
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:flex-wrap {
    @media (width >= 48rem) {
      flex-wrap: wrap;
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:space-y-0 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: 0;
        margin-block-end: 0;
      }
    }
  }
  .md\:border-r {
    @media (width >= 48rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:pr-10 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 10);
    }
  }
  .md\:pl-10 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 10);
    }
  }
  .md\:\*\:max-w-xs {
    @media (width >= 48rem) {
      :is(& > *) {
        max-width: var(--container-xs);
      }
    }
  }
  .lg\:fixed {
    @media (width >= 64rem) {
      position: fixed;
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:inset-y-0 {
    @media (width >= 64rem) {
      inset-block: 0;
    }
  }
  .lg\:top-0 {
    @media (width >= 64rem) {
      top: 0;
    }
  }
  .lg\:bottom-0 {
    @media (width >= 64rem) {
      bottom: 0;
    }
  }
  .lg\:left-0 {
    @media (width >= 64rem) {
      left: 0;
    }
  }
  .lg\:z-10 {
    @media (width >= 64rem) {
      z-index: 10;
    }
  }
  .lg\:ml-auto {
    @media (width >= 64rem) {
      margin-left: auto;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:min-h-18 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 18);
    }
  }
  .lg\:w-3xs {
    @media (width >= 64rem) {
      width: var(--container-3xs);
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:max-w-1\/2 {
    @media (width >= 64rem) {
      max-width: calc(1 / 2 * 100%);
    }
  }
  .lg\:flex-1 {
    @media (width >= 64rem) {
      flex: 1;
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(0\,512px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(0,512px);
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:items-stretch {
    @media (width >= 64rem) {
      align-items: stretch;
    }
  }
  .lg\:gap-x-8 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-y-0 {
    @media (width >= 64rem) {
      row-gap: 0;
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-5 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:py-0 {
    @media (width >= 64rem) {
      padding-block: 0;
    }
  }
  .lg\:py-6 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .lg\:pt-2 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .lg\:\*\:flex-none {
    @media (width >= 64rem) {
      :is(& > *) {
        flex: none;
      }
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .group-data-open\/docked_slideout\:starting\:translate-x-full {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      @starting-style {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-data-open\/docked_slideout\:starting\:opacity-0 {
    &:is(:where(.group\/docked_slideout)[data-open] *) {
      @starting-style {
        opacity: 0%;
      }
    }
  }
  .group-data-open\/mobile_nav_dialog\:starting\:-translate-x-full {
    &:is(:where(.group\/mobile_nav_dialog)[data-open] *) {
      @starting-style {
        --tw-translate-x: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-data-open\/modal\:starting\:scale-95 {
    &:is(:where(.group\/modal)[data-open] *) {
      @starting-style {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-data-open\/slideout\:starting\:translate-x-full {
    &:is(:where(.group\/slideout)[data-open] *) {
      @starting-style {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-data-\[state\]\/autosave\:starting\:opacity-0 {
    &:is(:where(.group\/autosave)[data-state] *) {
      @starting-style {
        opacity: 0%;
      }
    }
  }
  .group-phx-click-loading\/button\:starting\:w-0 {
    &:is(:where(.group\/button).phx-click-loading *) {
      @starting-style {
        width: 0;
      }
    }
  }
  .group-phx-click-loading\/button\:starting\:opacity-0 {
    &:is(:where(.group\/button).phx-click-loading *) {
      @starting-style {
        opacity: 0%;
      }
    }
  }
  .group-phx-submit-button-loading\/button\:starting\:w-0 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      @starting-style {
        width: 0;
      }
    }
  }
  .group-phx-submit-button-loading\/button\:starting\:opacity-0 {
    &:is(:where(.group\/button)[type="submit"].phx-submit-loading *) {
      @starting-style {
        opacity: 0%;
      }
    }
  }
  .data-open\:starting\:-translate-x-0\.5 {
    &[data-open] {
      @starting-style {
        --tw-translate-x: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .data-open\:starting\:translate-x-0\.5 {
    &[data-open] {
      @starting-style {
        --tw-translate-x: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .data-open\:starting\:-translate-y-0\.5 {
    &[data-open] {
      @starting-style {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .data-open\:starting\:translate-y-0\.5 {
    &[data-open] {
      @starting-style {
        --tw-translate-y: calc(var(--spacing) * 0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .data-open\:starting\:scale-95 {
    &[data-open] {
      @starting-style {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .data-open\:starting\:opacity-0 {
    &[data-open] {
      @starting-style {
        opacity: 0%;
      }
    }
  }
  .data-open\:backdrop\:starting\:opacity-0 {
    &[data-open] {
      &::backdrop {
        @starting-style {
          opacity: 0%;
        }
      }
    }
  }
  .phx-click-loading\:pointer-events-none {
    &.phx-click-loading {
      pointer-events: none;
    }
  }
  .phx-click-loading\:bg-brand-solid_hover {
    &.phx-click-loading {
      background-color: var(--background-color-brand-solid_hover);
    }
  }
  .phx-click-loading\:bg-primary_hover {
    &.phx-click-loading {
      background-color: var(--background-color-primary_hover);
    }
  }
  .phx-click-loading\:bg-success-solid {
    &.phx-click-loading {
      background-color: var(--background-color-success-solid);
    }
  }
  .phx-submit-button-loading\:pointer-events-none {
    &[type="submit"].phx-submit-loading {
      pointer-events: none;
    }
  }
  .phx-submit-button-loading\:bg-brand-solid_hover {
    &[type="submit"].phx-submit-loading {
      background-color: var(--background-color-brand-solid_hover);
    }
  }
  .phx-submit-button-loading\:bg-primary_hover {
    &[type="submit"].phx-submit-loading {
      background-color: var(--background-color-primary_hover);
    }
  }
  .phx-submit-button-loading\:bg-success-solid {
    &[type="submit"].phx-submit-loading {
      background-color: var(--background-color-success-solid);
    }
  }
  .device-pointer\:hidden {
    @media (hover: hover) and (pointer: fine) {
      display: none;
    }
  }
  .inverted\:text-fg-disabled_subtle {
    &:is(.inverted *) {
      color: var(--color-fg-disabled_subtle);
    }
  }
  .inverted\:text-primary_on-brand {
    &:is(.inverted *) {
      color: var(--text-color-primary_on-brand);
    }
  }
  .inverted\:hover\:text-primary_on-brand {
    &:is(.inverted *) {
      &:hover {
        @media (hover: hover) {
          color: var(--text-color-primary_on-brand);
        }
      }
    }
  }
  .\[\&\:\:-webkit-resizer\]\:bg-\(image\:--resize-handle-bg\) {
    &::-webkit-resizer {
      background-image: var(--resize-handle-bg);
    }
  }
  .\[\&\:\:-webkit-resizer\]\:bg-contain {
    &::-webkit-resizer {
      background-size: contain;
    }
  }
  .\*\:data-component-root\:\*\:\[form\]\:flex {
    :is(& > *) {
      &[data-component-root] {
        :is(& > *) {
          &:is(form) {
            display: flex;
          }
        }
      }
    }
  }
  .\*\:data-component-root\:\*\:\[form\]\:h-full {
    :is(& > *) {
      &[data-component-root] {
        :is(& > *) {
          &:is(form) {
            height: 100%;
          }
        }
      }
    }
  }
  .\*\:data-component-root\:\*\:\[form\]\:flex-1 {
    :is(& > *) {
      &[data-component-root] {
        :is(& > *) {
          &:is(form) {
            flex: 1;
          }
        }
      }
    }
  }
  .\*\:data-component-root\:\*\:\[form\]\:flex-col {
    :is(& > *) {
      &[data-component-root] {
        :is(& > *) {
          &:is(form) {
            flex-direction: column;
          }
        }
      }
    }
  }
  .\[\&\>\[data-drop-overlay\]\]\:\!opacity-100 {
    &>[data-drop-overlay] {
      opacity: 100% !important;
    }
  }
  .\[\&\>\[data-error\]\]\:pl-\[var\(--connie-control-offset\,0px\)\] {
    &>[data-error] {
      padding-left: var(--connie-control-offset,0px);
    }
  }
  .\[\&\>\[data-hint\]\]\:pl-\[var\(--connie-control-offset\,0px\)\] {
    &>[data-hint] {
      padding-left: var(--connie-control-offset,0px);
    }
  }
  .\[\&\>\[data-hover-overlay\]\]\:\!opacity-0 {
    &>[data-hover-overlay] {
      opacity: 0% !important;
    }
  }
  .\[\&\>strong\]\:font-semibold {
    &>strong {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .\[\&\>strong\]\:text-primary {
    &>strong {
      color: var(--text-color-primary);
    }
  }
  .\[\&\>td\]\:border-b {
    &>td {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .\[\&\>td\]\:border-secondary {
    &>td {
      border-color: var(--border-color-secondary);
    }
  }
  .last\:\[\&\>td\]\:border-b-0 {
    &:last-child {
      &>td {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
    }
  }
  .\[\&\>tr\>th\]\:border-b {
    &>tr>th {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .\[\&\>tr\>th\]\:border-secondary {
    &>tr>th {
      border-color: var(--border-color-secondary);
    }
  }
  .\[\[data-branded\]_\&\]\:bg-gradient-to-b {
    [data-branded] & {
      --tw-gradient-position: to bottom in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
    }
  }
  .\[\[data-branded\]_\&\]\:from-gray-100 {
    [data-branded] & {
      --tw-gradient-from: var(--color-gray-100);
      --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));
    }
  }
  .\[\[data-branded\]_\&\]\:from-gray-800 {
    [data-branded] & {
      --tw-gradient-from: var(--color-gray-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));
    }
  }
  .\[\[data-branded\]_\&\]\:to-gray-200 {
    [data-branded] & {
      --tw-gradient-to: var(--color-gray-200);
      --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));
    }
  }
  .\[\[data-branded\]_\&\]\:to-gray-600 {
    [data-branded] & {
      --tw-gradient-to: var(--color-gray-600);
      --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));
    }
  }
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Italic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Italic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
@layer utilities {
  cui-template-tab-stops {
    display: block;
  }
  .template {
    color: var(--color-slate-700);
    --tw-text-opacity: 1;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .template strong {
    color: var(--color-slate-800);
    font-weight: 600;
  }
  .template ol {
    list-style-type: none;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
    counter-reset: l0 l1 l2 l3 l4 l5 l6 l7 l8 l9;
  }
  .template ol > li:not([data-level]) {
    counter-reset: l1 l2 l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l0;
  }
  .template ol > li:not([data-level])::marker {
    content: counter(l0) ". ";
  }
  .template ol > li[data-level="1"] {
    counter-reset: l2 l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l1;
  }
  .template ol > li[data-level="1"]::marker {
    content: counter(l0) "." counter(l1) ". ";
  }
  .template ol > li[data-level="2"] {
    counter-reset: l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l2;
  }
  .template ol > li[data-level="2"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) ". ";
  }
  .template ol > li[data-level="3"] {
    counter-reset: l4 l5 l6 l7 l8 l9;
    counter-increment: l3;
  }
  .template ol > li[data-level="3"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) ". ";
  }
  .template ol > li[data-level="4"] {
    counter-reset: l5 l6 l7 l8 l9;
    counter-increment: l4;
  }
  .template ol > li[data-level="4"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";
  }
  .template ol > li[data-level="5"] {
    counter-reset: l6 l7 l8 l9;
    counter-increment: l5;
  }
  .template ol > li[data-level="5"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";
  }
  .template ol > li[data-level="6"] {
    counter-reset: l7 l8 l9;
    counter-increment: l6;
  }
  .template ol > li[data-level="6"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) ". ";
  }
  .template ol > li[data-level="7"] {
    counter-reset: l8 l9;
    counter-increment: l7;
  }
  .template ol > li[data-level="7"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) ". ";
  }
  .template ol > li[data-level="8"] {
    counter-reset: l9;
    counter-increment: l8;
  }
  .template ol > li[data-level="8"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) "." counter(l8) ". ";
  }
  .template ol > li[data-level="9"] {
    counter-increment: l9;
  }
  .template ol > li[data-level="9"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) "." counter(l8) "." counter(l9) ". ";
  }
  .template mark {
    border-radius: var(--radius-sm);
    background-color: #FEF500;
    color: inherit;
  }
  .template ul {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
  }
  .template ol>li::marker {
    color: var(--color-slate-400);
    font-weight: 400;
  }
  .template ul>li::marker {
    color: var(--color-slate-400);
  }
  .template li ul, .template li ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .template .checkbox-paragraph {
    display: flex;
    gap: 0.5em;
  }
  .template .checkbox-paragraph > svg {
    flex-shrink: 0;
    margin-top: 0.125em;
  }
  .template .template-title, .template-editor .ProseMirror .template-title {
    color: var(--color-slate-900);
    font-size: 2em;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template h1 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.7em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h1 strong {
    font-weight: 900;
    color: inherit;
  }
  .template h2 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.4em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h2 strong {
    font-weight: 900;
    color: inherit;
  }
  .template h3 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h3 strong {
    font-weight: 900;
    color: inherit;
  }
  .template p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template p.small {
    font-size: 80%;
  }
  .template p, .template h1, .template h2, .template h3 {
    white-space: break-spaces;
    tab-size: var(--tab-stop, 80px);
  }
  .template a {
    color: var(--color-slate-500);
    text-decoration: underline;
  }
  .template a:hover {
    color: var(--color-slate-700);
  }
  .template li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template ol>li {
    padding-left: 0.375em;
  }
  .template ul>li {
    padding-left: 0.375em;
  }
  .template .prose>ul>li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template .prose>ul>li>*:first-child {
    margin-top: 1.25em;
  }
  .template .prose>ul>li>*:last-child {
    margin-bottom: 1.25em;
  }
  .template .prose>ol>li>*:first-child {
    margin-top: 1.25em;
  }
  .template .prose>ol>li>*:last-child {
    margin-bottom: 1.25em;
  }
  .template ul ul, ul ol, ol ul, ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template h2+* {
    margin-top: 0;
  }
  .template h3+* {
    margin-top: 0;
  }
  .template> :first-child {
    margin-top: 0;
  }
  .template>.logo:first-child+* {
    margin-top: 0;
  }
  .template> :last-child {
    margin-bottom: 0;
  }
  .template-print+.template-print {
    page-break-before: always;
  }
  .template-print strong {
    color: var(--color-print-body);
  }
  .template-print ol>li::marker {
    color: var(--color-print-body);
  }
  .template-print ul>li::marker {
    color: var(--color-print-body);
  }
  .template-print h1 {
    color: var(--color-print-body);
  }
  .template-print h2 {
    color: var(--color-print-body);
  }
  .template-print h3 {
    color: var(--color-print-body);
  }
  .template .internal-note {
    position: relative;
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 6);
  }
  .template .internal-note::before {
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    background-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
    content: "Internal Note";
  }
  .template table {
    margin-block: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * -8);
    width: calc(100% + 4rem);
    table-layout: fixed;
  }
  .template table, .template td, .template th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-color-secondary);
    padding-inline: calc(var(--spacing) * 2);
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .template td, .template th {
    position: relative;
  }
  .template .column-resize-handle {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    z-index: 3;
    width: var(--spacing);
    background-color: var(--background-color-quaternary);
  }
  .ProseMirror.resize-cursor {
    cursor: col-resize;
  }
  .template .optional-section {
    position: relative;
  }
  .template .optional-section::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing) * -4);
    height: 100%;
    width: 2px;
    background-color: var(--color-green-500);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #8af7ac;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
    content: "";
  }
  .template .optional-section-controls {
    margin-left: calc(var(--spacing) * -4);
    display: flex;
    align-items: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 4);
  }
  .template .optional-section-controls .optional-section-toggle {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .template .optional-section-controls .optional-section-toggle>div {
    position: relative;
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: transparent;
    background-color: var(--color-slate-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: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    &: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 {
      --tw-ring-color: var(--color-green-500);
    }
    &:focus {
      --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);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>div {
    background-color: var(--color-green-500);
  }
  .template .optional-section-controls .optional-section-toggle>div>span {
    pointer-events: none;
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    --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);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>div>span {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .template .optional-section-controls .optional-section-toggle>span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>span {
    color: var(--color-green-500);
  }
  .template .multi-section {
    position: relative;
  }
  .template .multi-section::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing) * -4);
    height: 100%;
    width: 2px;
    background-color: var(--color-green-500);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #8af7ac;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
    content: "";
  }
  .template .multi-section-controls {
    margin-left: calc(var(--spacing) * -4);
    display: flex;
    align-items: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    padding-right: var(--spacing);
    padding-left: calc(var(--spacing) * 4);
  }
  .template .multi-section-tabs {
    display: flex;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
  }
  .template .multi-section-tab {
    display: flex;
    height: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: 2px;
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab-content {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab .multi-section-tab-remove {
    display: none;
  }
  .template .multi-section-tab:hover {
    border-color: var(--color-slate-200);
  }
  .template .multi-section-tab:hover .multi-section-tab-content {
    color: var(--color-slate-600);
  }
  .template .multi-section-tab-active {
    border-color: var(--color-green-500);
  }
  .template .multi-section-tab-active .multi-section-tab-content {
    color: var(--color-green-500);
  }
  .template .multi-section-tab-active .multi-section-tab-remove {
    display: flex;
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab-active .multi-section-tab-remove:hover {
    color: var(--color-red-500);
  }
  .template .multi-section-tab-active:not(:only-child) {
    padding-right: var(--spacing);
  }
  .template .multi-section-tab-active:only-child .multi-section-tab-remove {
    display: none;
  }
  .template .multi-section-tab-active:hover {
    border-color: var(--color-green-500);
  }
  .template .multi-section-tab-active:hover .multi-section-tab-content {
    color: var(--color-green-500);
  }
  .template .multi-section-add-option {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-add-option:hover {
    color: var(--color-slate-600);
  }
  .template .page-break {
    position: relative;
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    margin-top: 6.5em;
    margin-bottom: 6.5em;
  }
  .template .page-break::before {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: 0;
    left: 0;
    margin-inline: calc(var(--spacing) * -12);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-top-color: var(--color-slate-300);
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * -24);
    }
    content: "";
  }
  .template .page-break::after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-sm);
    background-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
    content: "Page Break";
  }
  .template img {
    margin-inline: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template .logo {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding-bottom: calc(var(--spacing) * 24);
  }
  .template .logo>img {
    margin: 0;
    height: 100%;
    max-height: calc(var(--spacing) * 24);
    width: auto;
    @media (width >= 40rem) {
      max-width: 50%;
    }
  }
  .template .image-missing {
    margin-inline: auto;
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
  }
  .template .image-missing svg {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    color: var(--color-slate-200);
  }
  @supports (-webkit-touch-callout: none) {
    input[type="time"]:before {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      color: var(--color-slate-400);
      content: attr(placeholder);
      white-space: nowrap;
    }
    input[type="time"]:not([value=""]):before, input[type="time"]:focus:before {
      content: '';
    }
  }
}
@layer utilities {
  .ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: absolute;
  }
  .ProseMirror-gapcursor:after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid black;
    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
  }
  @keyframes ProseMirror-cursor-blink {
    to {
      visibility: hidden;
    }
  }
  .ProseMirror-focused .ProseMirror-gapcursor {
    display: block;
  }
  .ProseMirror {
    position: relative;
  }
  .ProseMirror {
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: break-spaces;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0;
  }
  .ProseMirror pre {
    white-space: pre-wrap;
  }
  .ProseMirror li {
    position: relative;
  }
  .ProseMirror-hideselection *::selection {
    background: transparent;
  }
  .ProseMirror-hideselection *::-moz-selection {
    background: transparent;
  }
  .ProseMirror-hideselection {
    caret-color: transparent;
  }
  .ProseMirror [draggable][contenteditable=false] {
    user-select: text;
  }
  .ProseMirror-selectednode {
    outline: 2px solid #8cf;
  }
  li.ProseMirror-selectednode {
    outline: none;
  }
  li.ProseMirror-selectednode:after {
    content: "";
    position: absolute;
    left: -32px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    border: 2px solid #8cf;
    pointer-events: none;
  }
  img.ProseMirror-separator {
    display: inline !important;
    border: none !important;
    margin: 0 !important;
  }
  .ProseMirror .tableWrapper {
    overflow-x: auto;
  }
  .ProseMirror table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
  }
  .ProseMirror td, .ProseMirror th {
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
  }
  .ProseMirror td:not([data-colwidth]):not(.column-resize-dragging), .ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
    min-width: var(--default-cell-min-width);
  }
  .ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 20;
    background-color: #adf;
    pointer-events: none;
  }
  .ProseMirror.resize-cursor {
    cursor: ew-resize;
    cursor: col-resize;
  }
  .ProseMirror .selectedCell:after {
    z-index: 2;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(200, 200, 255, 0.4);
    pointer-events: none;
  }
  cui-template-tab-stops {
    display: block;
  }
  .template {
    color: var(--color-slate-700);
    --tw-text-opacity: 1;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .template strong {
    color: var(--color-slate-800);
    font-weight: 600;
  }
  .template ol {
    list-style-type: none;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
    counter-reset: l0 l1 l2 l3 l4 l5 l6 l7 l8 l9;
  }
  .template ol > li:not([data-level]) {
    counter-reset: l1 l2 l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l0;
  }
  .template ol > li:not([data-level])::marker {
    content: counter(l0) ". ";
  }
  .template ol > li[data-level="1"] {
    counter-reset: l2 l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l1;
  }
  .template ol > li[data-level="1"]::marker {
    content: counter(l0) "." counter(l1) ". ";
  }
  .template ol > li[data-level="2"] {
    counter-reset: l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l2;
  }
  .template ol > li[data-level="2"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) ". ";
  }
  .template ol > li[data-level="3"] {
    counter-reset: l4 l5 l6 l7 l8 l9;
    counter-increment: l3;
  }
  .template ol > li[data-level="3"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) ". ";
  }
  .template ol > li[data-level="4"] {
    counter-reset: l5 l6 l7 l8 l9;
    counter-increment: l4;
  }
  .template ol > li[data-level="4"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";
  }
  .template ol > li[data-level="5"] {
    counter-reset: l6 l7 l8 l9;
    counter-increment: l5;
  }
  .template ol > li[data-level="5"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";
  }
  .template ol > li[data-level="6"] {
    counter-reset: l7 l8 l9;
    counter-increment: l6;
  }
  .template ol > li[data-level="6"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) ". ";
  }
  .template ol > li[data-level="7"] {
    counter-reset: l8 l9;
    counter-increment: l7;
  }
  .template ol > li[data-level="7"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) ". ";
  }
  .template ol > li[data-level="8"] {
    counter-reset: l9;
    counter-increment: l8;
  }
  .template ol > li[data-level="8"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) "." counter(l8) ". ";
  }
  .template ol > li[data-level="9"] {
    counter-increment: l9;
  }
  .template ol > li[data-level="9"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) "." counter(l8) "." counter(l9) ". ";
  }
  .template mark {
    border-radius: var(--radius-sm);
    background-color: #FEF500;
    color: inherit;
  }
  .template ul {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
  }
  .template ol>li::marker {
    color: var(--color-slate-400);
    font-weight: 400;
  }
  .template ul>li::marker {
    color: var(--color-slate-400);
  }
  .template li ul, .template li ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .template .checkbox-paragraph {
    display: flex;
    gap: 0.5em;
  }
  .template .checkbox-paragraph > svg {
    flex-shrink: 0;
    margin-top: 0.125em;
  }
  .template .template-title, .template-editor .ProseMirror .template-title {
    color: var(--color-slate-900);
    font-size: 2em;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template h1 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.7em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h1 strong {
    font-weight: 900;
    color: inherit;
  }
  .template h2 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.4em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h2 strong {
    font-weight: 900;
    color: inherit;
  }
  .template h3 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h3 strong {
    font-weight: 900;
    color: inherit;
  }
  .template p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template p.small {
    font-size: 80%;
  }
  .template p, .template h1, .template h2, .template h3 {
    white-space: break-spaces;
    tab-size: var(--tab-stop, 80px);
  }
  .template a {
    color: var(--color-slate-500);
    text-decoration: underline;
  }
  .template a:hover {
    color: var(--color-slate-700);
  }
  .template li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template ol>li {
    padding-left: 0.375em;
  }
  .template ul>li {
    padding-left: 0.375em;
  }
  .template .prose>ul>li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template .prose>ul>li>*:first-child {
    margin-top: 1.25em;
  }
  .template .prose>ul>li>*:last-child {
    margin-bottom: 1.25em;
  }
  .template .prose>ol>li>*:first-child {
    margin-top: 1.25em;
  }
  .template .prose>ol>li>*:last-child {
    margin-bottom: 1.25em;
  }
  .template ul ul, ul ol, ol ul, ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template h2+* {
    margin-top: 0;
  }
  .template h3+* {
    margin-top: 0;
  }
  .template> :first-child {
    margin-top: 0;
  }
  .template>.logo:first-child+* {
    margin-top: 0;
  }
  .template> :last-child {
    margin-bottom: 0;
  }
  .template-print+.template-print {
    page-break-before: always;
  }
  .template-print strong {
    color: var(--color-print-body);
  }
  .template-print ol>li::marker {
    color: var(--color-print-body);
  }
  .template-print ul>li::marker {
    color: var(--color-print-body);
  }
  .template-print h1 {
    color: var(--color-print-body);
  }
  .template-print h2 {
    color: var(--color-print-body);
  }
  .template-print h3 {
    color: var(--color-print-body);
  }
  .template .internal-note {
    position: relative;
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 6);
  }
  .template .internal-note::before {
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    background-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
    content: "Internal Note";
  }
  .template table {
    margin-block: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * -8);
    width: calc(100% + 4rem);
    table-layout: fixed;
  }
  .template table, .template td, .template th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-color-secondary);
    padding-inline: calc(var(--spacing) * 2);
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .template td, .template th {
    position: relative;
  }
  .template .column-resize-handle {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    z-index: 3;
    width: var(--spacing);
    background-color: var(--background-color-quaternary);
  }
  .ProseMirror.resize-cursor {
    cursor: col-resize;
  }
  .template .optional-section {
    position: relative;
  }
  .template .optional-section::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing) * -4);
    height: 100%;
    width: 2px;
    background-color: var(--color-green-500);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #8af7ac;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
    content: "";
  }
  .template .optional-section-controls {
    margin-left: calc(var(--spacing) * -4);
    display: flex;
    align-items: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 4);
  }
  .template .optional-section-controls .optional-section-toggle {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .template .optional-section-controls .optional-section-toggle>div {
    position: relative;
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: transparent;
    background-color: var(--color-slate-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: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    &: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 {
      --tw-ring-color: var(--color-green-500);
    }
    &:focus {
      --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);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>div {
    background-color: var(--color-green-500);
  }
  .template .optional-section-controls .optional-section-toggle>div>span {
    pointer-events: none;
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    --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);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>div>span {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .template .optional-section-controls .optional-section-toggle>span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>span {
    color: var(--color-green-500);
  }
  .template .multi-section {
    position: relative;
  }
  .template .multi-section::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing) * -4);
    height: 100%;
    width: 2px;
    background-color: var(--color-green-500);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #8af7ac;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
    content: "";
  }
  .template .multi-section-controls {
    margin-left: calc(var(--spacing) * -4);
    display: flex;
    align-items: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    padding-right: var(--spacing);
    padding-left: calc(var(--spacing) * 4);
  }
  .template .multi-section-tabs {
    display: flex;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
  }
  .template .multi-section-tab {
    display: flex;
    height: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: 2px;
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab-content {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab .multi-section-tab-remove {
    display: none;
  }
  .template .multi-section-tab:hover {
    border-color: var(--color-slate-200);
  }
  .template .multi-section-tab:hover .multi-section-tab-content {
    color: var(--color-slate-600);
  }
  .template .multi-section-tab-active {
    border-color: var(--color-green-500);
  }
  .template .multi-section-tab-active .multi-section-tab-content {
    color: var(--color-green-500);
  }
  .template .multi-section-tab-active .multi-section-tab-remove {
    display: flex;
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab-active .multi-section-tab-remove:hover {
    color: var(--color-red-500);
  }
  .template .multi-section-tab-active:not(:only-child) {
    padding-right: var(--spacing);
  }
  .template .multi-section-tab-active:only-child .multi-section-tab-remove {
    display: none;
  }
  .template .multi-section-tab-active:hover {
    border-color: var(--color-green-500);
  }
  .template .multi-section-tab-active:hover .multi-section-tab-content {
    color: var(--color-green-500);
  }
  .template .multi-section-add-option {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-add-option:hover {
    color: var(--color-slate-600);
  }
  .template .page-break {
    position: relative;
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    margin-top: 6.5em;
    margin-bottom: 6.5em;
  }
  .template .page-break::before {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: 0;
    left: 0;
    margin-inline: calc(var(--spacing) * -12);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-top-color: var(--color-slate-300);
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * -24);
    }
    content: "";
  }
  .template .page-break::after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-sm);
    background-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
    content: "Page Break";
  }
  .template img {
    margin-inline: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template .logo {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding-bottom: calc(var(--spacing) * 24);
  }
  .template .logo>img {
    margin: 0;
    height: 100%;
    max-height: calc(var(--spacing) * 24);
    width: auto;
    @media (width >= 40rem) {
      max-width: 50%;
    }
  }
  .template .image-missing {
    margin-inline: auto;
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
  }
  .template .image-missing svg {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    color: var(--color-slate-200);
  }
  @supports (-webkit-touch-callout: none) {
    input[type="time"]:before {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      color: var(--color-slate-400);
      content: attr(placeholder);
      white-space: nowrap;
    }
    input[type="time"]:not([value=""]):before, input[type="time"]:focus:before {
      content: '';
    }
  }
  .email-template-editor {
    position: relative;
    padding-top: calc(var(--spacing) * 4);
  }
  .email-template-editor:not([data-plaintext]) {
    min-height: 10rem;
  }
  .email-template-editor .ProseMirror {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0px 1px 2px var(--tw-shadow-color, rgba(10, 13, 18, 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    min-height: inherit;
    outline: none;
  }
  .email-template-editor[data-has-error] .ProseMirror {
    border-color: var(--border-color-error);
  }
  .email-template-editor[data-disable-tags][data-plaintext] .ProseMirror {
    padding-top: calc(var(--spacing) * 2);
  }
  .email-template-editor .ProseMirror-selectednode {
    --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-purple-400);
    --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: none;
  }
  .email-template-editor .template-placeholder:first-child::before {
    content: attr(data-placeholder);
    color: var(--text-color-tertiary);
    pointer-events: none;
    float: left;
    height: 0;
  }
}
@layer utilities {
  .ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: absolute;
  }
  .ProseMirror-gapcursor:after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid black;
    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
  }
  @keyframes ProseMirror-cursor-blink {
    to {
      visibility: hidden;
    }
  }
  .ProseMirror-focused .ProseMirror-gapcursor {
    display: block;
  }
  .ProseMirror {
    position: relative;
  }
  .ProseMirror {
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: break-spaces;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0;
  }
  .ProseMirror pre {
    white-space: pre-wrap;
  }
  .ProseMirror li {
    position: relative;
  }
  .ProseMirror-hideselection *::selection {
    background: transparent;
  }
  .ProseMirror-hideselection *::-moz-selection {
    background: transparent;
  }
  .ProseMirror-hideselection {
    caret-color: transparent;
  }
  .ProseMirror [draggable][contenteditable=false] {
    user-select: text;
  }
  .ProseMirror-selectednode {
    outline: 2px solid #8cf;
  }
  li.ProseMirror-selectednode {
    outline: none;
  }
  li.ProseMirror-selectednode:after {
    content: "";
    position: absolute;
    left: -32px;
    right: -2px;
    top: -2px;
    bottom: -2px;
    border: 2px solid #8cf;
    pointer-events: none;
  }
  img.ProseMirror-separator {
    display: inline !important;
    border: none !important;
    margin: 0 !important;
  }
  .ProseMirror .tableWrapper {
    overflow-x: auto;
  }
  .ProseMirror table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
  }
  .ProseMirror td, .ProseMirror th {
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
  }
  .ProseMirror td:not([data-colwidth]):not(.column-resize-dragging), .ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
    min-width: var(--default-cell-min-width);
  }
  .ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 20;
    background-color: #adf;
    pointer-events: none;
  }
  .ProseMirror.resize-cursor {
    cursor: ew-resize;
    cursor: col-resize;
  }
  .ProseMirror .selectedCell:after {
    z-index: 2;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(200, 200, 255, 0.4);
    pointer-events: none;
  }
  cui-template-tab-stops {
    display: block;
  }
  .template {
    color: var(--color-slate-700);
    --tw-text-opacity: 1;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .template strong {
    color: var(--color-slate-800);
    font-weight: 600;
  }
  .template ol {
    list-style-type: none;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
    counter-reset: l0 l1 l2 l3 l4 l5 l6 l7 l8 l9;
  }
  .template ol > li:not([data-level]) {
    counter-reset: l1 l2 l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l0;
  }
  .template ol > li:not([data-level])::marker {
    content: counter(l0) ". ";
  }
  .template ol > li[data-level="1"] {
    counter-reset: l2 l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l1;
  }
  .template ol > li[data-level="1"]::marker {
    content: counter(l0) "." counter(l1) ". ";
  }
  .template ol > li[data-level="2"] {
    counter-reset: l3 l4 l5 l6 l7 l8 l9;
    counter-increment: l2;
  }
  .template ol > li[data-level="2"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) ". ";
  }
  .template ol > li[data-level="3"] {
    counter-reset: l4 l5 l6 l7 l8 l9;
    counter-increment: l3;
  }
  .template ol > li[data-level="3"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) ". ";
  }
  .template ol > li[data-level="4"] {
    counter-reset: l5 l6 l7 l8 l9;
    counter-increment: l4;
  }
  .template ol > li[data-level="4"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";
  }
  .template ol > li[data-level="5"] {
    counter-reset: l6 l7 l8 l9;
    counter-increment: l5;
  }
  .template ol > li[data-level="5"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";
  }
  .template ol > li[data-level="6"] {
    counter-reset: l7 l8 l9;
    counter-increment: l6;
  }
  .template ol > li[data-level="6"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) ". ";
  }
  .template ol > li[data-level="7"] {
    counter-reset: l8 l9;
    counter-increment: l7;
  }
  .template ol > li[data-level="7"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) ". ";
  }
  .template ol > li[data-level="8"] {
    counter-reset: l9;
    counter-increment: l8;
  }
  .template ol > li[data-level="8"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) "." counter(l8) ". ";
  }
  .template ol > li[data-level="9"] {
    counter-increment: l9;
  }
  .template ol > li[data-level="9"]::marker {
    content: counter(l0) "." counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) "." counter(l6) "." counter(l7) "." counter(l8) "." counter(l9) ". ";
  }
  .template mark {
    border-radius: var(--radius-sm);
    background-color: #FEF500;
    color: inherit;
  }
  .template ul {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
  }
  .template ol>li::marker {
    color: var(--color-slate-400);
    font-weight: 400;
  }
  .template ul>li::marker {
    color: var(--color-slate-400);
  }
  .template li ul, .template li ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .template .checkbox-paragraph {
    display: flex;
    gap: 0.5em;
  }
  .template .checkbox-paragraph > svg {
    flex-shrink: 0;
    margin-top: 0.125em;
  }
  .template .template-title, .template-editor .ProseMirror .template-title {
    color: var(--color-slate-900);
    font-size: 2em;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template h1 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.7em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h1 strong {
    font-weight: 900;
    color: inherit;
  }
  .template h2 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.4em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h2 strong {
    font-weight: 900;
    color: inherit;
  }
  .template h3 {
    color: var(--color-slate-900);
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
  .template h3 strong {
    font-weight: 900;
    color: inherit;
  }
  .template p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template p.small {
    font-size: 80%;
  }
  .template p, .template h1, .template h2, .template h3 {
    white-space: break-spaces;
    tab-size: var(--tab-stop, 80px);
  }
  .template a {
    color: var(--color-slate-500);
    text-decoration: underline;
  }
  .template a:hover {
    color: var(--color-slate-700);
  }
  .template li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template ol>li {
    padding-left: 0.375em;
  }
  .template ul>li {
    padding-left: 0.375em;
  }
  .template .prose>ul>li p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template .prose>ul>li>*:first-child {
    margin-top: 1.25em;
  }
  .template .prose>ul>li>*:last-child {
    margin-bottom: 1.25em;
  }
  .template .prose>ol>li>*:first-child {
    margin-top: 1.25em;
  }
  .template .prose>ol>li>*:last-child {
    margin-bottom: 1.25em;
  }
  .template ul ul, ul ol, ol ul, ol ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  .template h2+* {
    margin-top: 0;
  }
  .template h3+* {
    margin-top: 0;
  }
  .template> :first-child {
    margin-top: 0;
  }
  .template>.logo:first-child+* {
    margin-top: 0;
  }
  .template> :last-child {
    margin-bottom: 0;
  }
  .template-print+.template-print {
    page-break-before: always;
  }
  .template-print strong {
    color: var(--color-print-body);
  }
  .template-print ol>li::marker {
    color: var(--color-print-body);
  }
  .template-print ul>li::marker {
    color: var(--color-print-body);
  }
  .template-print h1 {
    color: var(--color-print-body);
  }
  .template-print h2 {
    color: var(--color-print-body);
  }
  .template-print h3 {
    color: var(--color-print-body);
  }
  .template .internal-note {
    position: relative;
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 6);
  }
  .template .internal-note::before {
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    background-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
    content: "Internal Note";
  }
  .template table {
    margin-block: calc(var(--spacing) * 2);
    margin-left: calc(var(--spacing) * -8);
    width: calc(100% + 4rem);
    table-layout: fixed;
  }
  .template table, .template td, .template th {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-color-secondary);
    padding-inline: calc(var(--spacing) * 2);
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .template td, .template th {
    position: relative;
  }
  .template .column-resize-handle {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    z-index: 3;
    width: var(--spacing);
    background-color: var(--background-color-quaternary);
  }
  .ProseMirror.resize-cursor {
    cursor: col-resize;
  }
  .template .optional-section {
    position: relative;
  }
  .template .optional-section::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing) * -4);
    height: 100%;
    width: 2px;
    background-color: var(--color-green-500);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #8af7ac;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
    content: "";
  }
  .template .optional-section-controls {
    margin-left: calc(var(--spacing) * -4);
    display: flex;
    align-items: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 4);
  }
  .template .optional-section-controls .optional-section-toggle {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .template .optional-section-controls .optional-section-toggle>div {
    position: relative;
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: transparent;
    background-color: var(--color-slate-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: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    &: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 {
      --tw-ring-color: var(--color-green-500);
    }
    &:focus {
      --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);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>div {
    background-color: var(--color-green-500);
  }
  .template .optional-section-controls .optional-section-toggle>div>span {
    pointer-events: none;
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    --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);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>div>span {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .template .optional-section-controls .optional-section-toggle>span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .optional-section-controls .optional-section-toggle.optional-section-toggle-active>span {
    color: var(--color-green-500);
  }
  .template .multi-section {
    position: relative;
  }
  .template .multi-section::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing) * -4);
    height: 100%;
    width: 2px;
    background-color: var(--color-green-500);
    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(10, 13, 18, 0.1)), 0px 1px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-shadow-color: #8af7ac;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-green-300) var(--tw-shadow-alpha), transparent);
    }
    content: "";
  }
  .template .multi-section-controls {
    margin-left: calc(var(--spacing) * -4);
    display: flex;
    align-items: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background-color: var(--color-slate-50);
    padding-right: var(--spacing);
    padding-left: calc(var(--spacing) * 4);
  }
  .template .multi-section-tabs {
    display: flex;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
  }
  .template .multi-section-tab {
    display: flex;
    height: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: 2px;
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab-content {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab .multi-section-tab-remove {
    display: none;
  }
  .template .multi-section-tab:hover {
    border-color: var(--color-slate-200);
  }
  .template .multi-section-tab:hover .multi-section-tab-content {
    color: var(--color-slate-600);
  }
  .template .multi-section-tab-active {
    border-color: var(--color-green-500);
  }
  .template .multi-section-tab-active .multi-section-tab-content {
    color: var(--color-green-500);
  }
  .template .multi-section-tab-active .multi-section-tab-remove {
    display: flex;
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-tab-active .multi-section-tab-remove:hover {
    color: var(--color-red-500);
  }
  .template .multi-section-tab-active:not(:only-child) {
    padding-right: var(--spacing);
  }
  .template .multi-section-tab-active:only-child .multi-section-tab-remove {
    display: none;
  }
  .template .multi-section-tab-active:hover {
    border-color: var(--color-green-500);
  }
  .template .multi-section-tab-active:hover .multi-section-tab-content {
    color: var(--color-green-500);
  }
  .template .multi-section-add-option {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-slate-400);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    animation-duration: 200ms;
  }
  .template .multi-section-add-option:hover {
    color: var(--color-slate-600);
  }
  .template .page-break {
    position: relative;
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-lg);
    margin-top: 6.5em;
    margin-bottom: 6.5em;
  }
  .template .page-break::before {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: 0;
    left: 0;
    margin-inline: calc(var(--spacing) * -12);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-top-color: var(--color-slate-300);
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * -24);
    }
    content: "";
  }
  .template .page-break::after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-sm);
    background-color: var(--color-slate-200);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
    content: "Page Break";
  }
  .template img {
    margin-inline: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .template .logo {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding-bottom: calc(var(--spacing) * 24);
  }
  .template .logo>img {
    margin: 0;
    height: 100%;
    max-height: calc(var(--spacing) * 24);
    width: auto;
    @media (width >= 40rem) {
      max-width: 50%;
    }
  }
  .template .image-missing {
    margin-inline: auto;
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
  }
  .template .image-missing svg {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    color: var(--color-slate-200);
  }
  @supports (-webkit-touch-callout: none) {
    input[type="time"]:before {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      color: var(--color-slate-400);
      content: attr(placeholder);
      white-space: nowrap;
    }
    input[type="time"]:not([value=""]):before, input[type="time"]:focus:before {
      content: '';
    }
  }
  :has(> .template-paper), :has(> .template-editor) {
    container-type: inline-size;
  }
  .template-paper, .template-editor {
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 12);
    padding-block: calc(var(--spacing) * 24);
    --tw-shadow: 0px 12px 16px -4px var(--tw-shadow-color, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
    --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);
    --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 24);
    }
    min-height: calc(100cqi * 1.4142);
  }
  .template-editor {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .template-editor .ProseMirror {
    flex-grow: 1;
    outline: none;
    container-type: inline-size;
  }
  .template-editor .ProseMirror-selectednode {
    --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-purple-400);
    --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: none;
  }
  .template-editor .ProseMirror-selectednode:has(> [data-smart-tag]) {
    --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-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);
  }
  .template-editor .ProseMirror-selectednode > [data-smart-tag] {
    --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-purple-400);
    --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);
  }
  .template-editor .template-placeholder::before {
    content: attr(data-placeholder);
    color: var(--color-slate-400);
    pointer-events: none;
    float: left;
    height: 0;
  }
  .template-editor .ProseMirror p:has(> .ProseMirror-trailingBreak):not(:has(br:not(.ProseMirror-trailingBreak))):not(:has([data-smart-tag])), .template-editor .ProseMirror h1:has(> .ProseMirror-trailingBreak):not(:has(br:not(.ProseMirror-trailingBreak))):not(:has([data-smart-tag])), .template-editor .ProseMirror h2:has(> .ProseMirror-trailingBreak):not(:has(br:not(.ProseMirror-trailingBreak))):not(:has([data-smart-tag])), .template-editor .ProseMirror h3:has(> .ProseMirror-trailingBreak):not(:has(br:not(.ProseMirror-trailingBreak))):not(:has([data-smart-tag])) {
    line-height: 1.2;
  }
  .template-editor .ProseMirror p:has(> .ProseMirror-trailingBreak):not(:has(br:not(.ProseMirror-trailingBreak))):not(:has([data-smart-tag])) {
    min-height: 1.5em;
  }
  .pm-inline-atom-cursor-target {
    letter-spacing: 0;
    white-space: nowrap;
  }
  .ProseMirror-yjs-cursor {
    pointer-events: none;
    position: relative;
    margin-inline: calc(1px * -1);
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
    --tw-border-style: solid;
    border-style: solid;
    overflow-wrap: normal;
    word-break: normal;
  }
  .ProseMirror-yjs-user {
    pointer-events: auto;
    position: absolute;
    top: -2px;
    left: 0;
    transform: translateX(-50%) translateY(-100%);
    width: 40px;
    height: 40px;
    --drop-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.029%2016.971A9.941%209.941%200%201%200%204.971%2016.971L12.000%2024.000Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-image: var(--drop-mask);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--drop-mask);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-mode: alpha;
  }
  .ProseMirror-yjs-image {
    position: absolute;
    border-radius: var(--radius-full);
    background-size: cover;
    width: 28px;
    height: 28px;
    left: 50%;
    top: calc(9.9413 / 24 * 100%);
    transform: translate(-50%, -50%);
  }
  .ProseMirror-yjs-hover {
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--color-white);
    opacity: 0%;
    top: calc(-2px - 40px + 9.9413 / 24 * 40px);
    left: 22px;
    transform: translateY(-50%) scale(0.95);
    transition: opacity 150ms ease-in, transform 150ms ease-in;
  }
  .ProseMirror-yjs-user:hover ~ .ProseMirror-yjs-hover {
    opacity: 100%;
    transform: translateY(-50%) scale(1);
    transition-timing-function: ease-out;
  }
  .document-import-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: rgba(147, 51, 234, 0.08);
    border: 2px dashed rgb(147, 51, 234);
  }
  .document-import-overlay.active {
    display: flex;
  }
  .document-import-overlay-content {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-purple-700);
    -webkit-user-select: none;
    user-select: none;
  }
  .template-editor[data-crdt-disabled] {
    cursor: not-allowed;
    background-color: var(--background-color-secondary);
  }
  .template-editor[data-crdt-disabled] .ProseMirror {
    pointer-events: none;
    opacity: 60%;
    -webkit-user-select: none;
    user-select: none;
  }
  .document-import-indicator {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.85);
  }
  .document-import-indicator.active {
    display: flex;
  }
  .document-import-indicator-content {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-600);
  }
  .template-editor .ProseMirror .pm-block-anchor {
    position: relative;
  }
  .template-editor .ProseMirror .pm-numberable, .template-paper .pm-numberable {
    position: relative;
    padding-left: var(--pm-number-width, 4ch);
  }
  .template-editor .ProseMirror .pm-numberable > .pm-number, .template-paper .pm-numberable > .pm-number {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pm-number-width, 4ch);
    text-align: left;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--color-slate-500);
  }
  .template-editor .ProseMirror p.pm-numberable > .pm-number, .template-paper p.pm-numberable > .pm-number {
    color: var(--color-slate-400);
    line-height: 1.5;
  }
  .template-editor .ProseMirror .pm-block-handle {
    position: absolute;
    left: calc(-2.5rem - var(--pm-block-indent, 0px));
    top: 0;
    height: 1lh;
    width: calc(2.5rem + var(--pm-block-indent, 0px));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    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: 100ms;
    transition-duration: 100ms;
    --tw-ease: linear;
    transition-timing-function: linear;
    animation-duration: 100ms;
    animation-timing-function: linear;
  }
  .template-editor .ProseMirror .pm-block-handle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.375rem;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-fg-quaternary);
    outline-color: var(--color-focus-ring);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: linear;
    transition-timing-function: linear;
    animation-duration: 100ms;
    animation-timing-function: linear;
  }
  .template-editor .ProseMirror .pm-block-handle-button:hover {
    color: var(--color-fg-quaternary_hover);
  }
  .template-editor .ProseMirror .pm-block-anchor:hover > .pm-block-handle, .template-editor .ProseMirror .pm-block-handle:has(:focus-visible), .template-editor .ProseMirror .pm-block-handle[aria-expanded="true"] {
    opacity: 1;
  }
  .template-editor .ProseMirror .pm-block-anchor:has(.pm-block-anchor:hover) > .pm-block-handle {
    opacity: 0;
  }
  .template-editor .ProseMirror .pm-block-handle:focus-visible {
    outline-width: 2px;
    outline-offset: 2px;
  }
  .pm-block-handle-popover {
    position: absolute;
    z-index: 50;
  }
}
@layer components {
  calendar-date, calendar-range {
    display: block;
    width: calc(var(--spacing) * 70);
  }
  calendar-date::part(container), calendar-range::part(container) {
    gap: calc(var(--spacing) * 3);
  }
  calendar-date::part(header), calendar-range::part(header) {
    gap: calc(var(--spacing) * 2);
    align-items: center;
  }
  calendar-date::part(button), calendar-range::part(button) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    color: var(--color-fg-quaternary);
    background-color: transparent;
    border-radius: var(--radius-lg);
    border: 0;
    transition-property: all;
    transition-duration: 100ms;
    transition-timing-function: linear;
  }
  calendar-date::part(button):hover, calendar-range::part(button):hover {
    background-color: var(--color-bg-primary_hover);
    color: var(--color-fg-quaternary_hover);
  }
  calendar-date::part(button):focus, calendar-range::part(button):focus {
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: var(--color-focus-ring);
  }
  calendar-month {
    width: 100%;
  }
  calendar-month::part(heading) {
    display: none;
  }
  calendar-month::part(day) {
    font-size: var(--text-sm);
    font-family: var(--font-body);
  }
  calendar-month::part(day th) {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }
  calendar-month::part(day button) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
  }
  calendar-month::part(day button):hover {
    background-color: var(--color-bg-primary_hover);
    color: var(--color-text-secondary_hover);
    font-weight: var(--font-weight-medium);
  }
  calendar-month::part(today) {
    position: relative;
    background-color: var(--color-bg-active);
    color: var(--color-text-brand-primary);
    font-weight: var(--font-weight-medium);
  }
  calendar-month::part(today):hover {
    background-color: var(--color-bg-secondary_hover);
  }
  calendar-month::part(today)::after {
    content: '';
    position: absolute;
    bottom: calc(var(--spacing) * 1);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--spacing) * 1.25);
    height: calc(var(--spacing) * 1.25);
    border-radius: var(--radius-full);
    background-color: var(--color-fg-brand-primary);
  }
  calendar-month::part(today selected)::after {
    background-color: white !important;
  }
  calendar-month::part(selected) {
    background-color: var(--color-bg-brand-solid) !important;
    color: white !important;
    font-weight: var(--font-weight-medium);
  }
  calendar-month::part(selected):hover {
    background-color: var(--color-bg-brand-solid_hover) !important;
  }
  calendar-month::part(range-inner) {
    border-radius: 0 !important;
  }
  calendar-month::part(range-start) {
    border-top-left-radius: var(--radius-full) !important;
    border-bottom-left-radius: var(--radius-full) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  calendar-month::part(range-end) {
    border-top-right-radius: var(--radius-full) !important;
    border-bottom-right-radius: var(--radius-full) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  calendar-month::part(range-start range-end) {
    border-radius: var(--radius-full) !important;
  }
}
[data-phx-session], [data-phx-teleported-src] {
  display: contents;
}
@layer base {
  strong, b {
    font-weight: 600;
  }
}
body:has(dialog[open]) {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  overflow: hidden;
}
@media (width < 40rem) {
  body:has([data-scroll-lock="sm"]) {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}
@media (width < 48rem) {
  body:has([data-scroll-lock="md"]) {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}
@media (width < 64rem) {
  body:has([data-scroll-lock="lg"]) {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}
@media (width < 80rem) {
  body:has([data-scroll-lock="xl"]) {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  }
}
@layer utilities {
  .legacy[type='number'] {
    -moz-appearance: revert !important;
    appearance: revert !important;
  }
  .legacy[type='number']::-webkit-outer-spin-button, .legacy[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: revert !important;
    margin: revert !important;
  }
  .hover\:bg-darken:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  }
  .arrow-down-shadow {
    position: absolute;
    top: 1px;
    filter: blur(1px);
    width: 0;
    height: 0;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    border-top: 1.5rem solid rgba(0, 0, 0, 0.1);
  }
  .arrow-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    border-top: 1.5rem solid #fff;
  }
  .arrow-down-edge {
    position: absolute;
    top: -5px;
    left: 0;
    width: 3rem;
    height: 5px;
    background-color: #fff;
  }
}
@layer components {
  textarea {
    --resize-handle-bg: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%202L2%2010%22%20stroke%3D%22%23D5D7DA%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%207L7%2011%22%20stroke%3D%22%23D5D7DA%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  }
  .icon-blank {
    --icon-blank: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-blank);
    mask: var(--icon-blank);
  }
  .icon-dot {
    --icon-dot: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-dot);
    mask: var(--icon-dot);
  }
  .icon-spinner {
    --icon-spinner: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cstyle%3E%40keyframes%20spin%7Bto%7Btransform%3Arotate(360deg)%7D%7D%3C%2Fstyle%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20stroke-width%3D%222%22%20style%3D%22opacity%3A.3%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20stroke-dasharray%3D%2212.5%2050%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20style%3D%22transform-origin%3Acenter%3Banimation%3Aspin%201s%20infinite%20linear%22%2F%3E%3C%2Fsvg%3E');
    -webkit-mask: var(--icon-spinner);
    mask: var(--icon-spinner);
    mask-repeat: no-repeat;
    background-color: currentColor;
    vertical-align: middle;
    display: inline-block;
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .icon-feature {
    background-color: transparent;
    background-image: linear-gradient(to bottom, #A5C0EE, #FBC5EC);
  }
  input[type=range] {
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-color: transparent;
  }
  input[type="range"]:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-200);
  }
  input[type="range"]::-moz-range-track {
    height: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-200);
  }
  input[type="range"]::-webkit-slider-thumb {
    margin-top: calc(var(--spacing) * -1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    appearance: none;
    border-radius: var(--radius-full);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-purple-600);
  }
  input[type="range"]::-moz-range-thumb {
    margin-top: calc(var(--spacing) * -1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    appearance: none;
    border-radius: var(--radius-full);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-purple-600);
  }
  input[type="range"]:focus::-webkit-slider-thumb {
    --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-purple-600);
    --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);
  }
  input[type="range"]:focus::-moz-range-thumb {
    --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-purple-600);
    --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);
  }
  input[type=range]::-moz-range-track {
    border-radius: var(--radius-full);
    background-color: var(--color-slate-200);
  }
  .legacy[type='text'], input.legacy:where(:not([type])), .legacy[type='email'], .legacy[type='url'], .legacy[type='password'], .legacy[type='number'], .legacy[type='date'], .legacy[type='datetime-local'], .legacy[type='month'], .legacy[type='search'], .legacy[type='tel'], .legacy[type='time'], .legacy[type='week'], .legacy[multiple], textarea.legacy, select.legacy {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
  }
  .legacy[type='text']:focus, input.legacy:where(:not([type])):focus, .legacy[type='email']:focus, .legacy[type='url']:focus, .legacy[type='password']:focus, .legacy[type='number']:focus, .legacy[type='date']:focus, .legacy[type='datetime-local']:focus, .legacy[type='month']:focus, .legacy[type='search']:focus, .legacy[type='tel']:focus, .legacy[type='time']:focus, .legacy[type='week']:focus, .legacy[multiple]:focus, textarea.legacy:focus, select.legacy:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, #2563eb);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    border-color: #2563eb;
  }
  .legacy::-moz-placeholder {
    color: #6b7280;
    opacity: 1;
  }
  .legacy::placeholder {
    color: #6b7280;
    opacity: 1;
  }
  .legacy::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  .legacy::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit;
  }
  .legacy::-webkit-datetime-edit {
    display: inline-flex;
  }
  .legacy::-webkit-datetime-edit, .legacy::-webkit-datetime-edit-year-field, .legacy::-webkit-datetime-edit-month-field, .legacy::-webkit-datetime-edit-day-field, .legacy::-webkit-datetime-edit-hour-field, .legacy::-webkit-datetime-edit-minute-field, .legacy::-webkit-datetime-edit-second-field, .legacy::-webkit-datetime-edit-millisecond-field, .legacy::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select.legacy {
    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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .legacy[type='checkbox'],.legacy[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
  }
  .legacy[type='checkbox'] {
    border-radius: 0px;
  }
  .legacy[type='radio'] {
    border-radius: 100%;
  }
  .legacy[type='checkbox']:focus,.legacy[type='radio']:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
  }
  .legacy[type='checkbox']:checked,.legacy[type='radio']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .legacy[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) {
    .legacy[type='checkbox']:checked {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
    }
  }
  .legacy[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) {
    .legacy[type='radio']:checked {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
    }
  }
  .legacy[type='checkbox']:checked:hover,.legacy[type='checkbox']:checked:focus,.legacy[type='radio']:checked:hover,.legacy[type='radio']:checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  .legacy[type='checkbox']:indeterminate {
    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");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  @media (forced-colors: active) {
    .legacy[type='checkbox']:indeterminate {
      -webkit-appearance: auto;
      -moz-appearance: auto;
      appearance: auto;
    }
  }
  .legacy[type='checkbox']:indeterminate:hover,.legacy[type='checkbox']:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
}
@keyframes flash {
  from {
    opacity: 0%;
  }
  10% {
    opacity: 100%;
  }
  80% {
    opacity: 100%;
  }
  to {
    opacity: 0%;
  }
}
.animate-flash {
  animation: flash 2s ease-out;
  animation-iteration-count: 1;
}
.features ul {
  padding: 0px;
  &>li {
    list-style: none;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23475569%22%20aria-hidden%3D%22true%22%20data-slot%3D%22icon%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2.25%2012c0-5.385%204.365-9.75%209.75-9.75s9.75%204.365%209.75%209.75-4.365%209.75-9.75%209.75S2.25%2017.385%202.25%2012Zm13.36-1.814a.75.75%200%201%200-1.22-.872l-3.236%204.53L9.53%2012.22a.75.75%200%200%200-1.06%201.06l2.25%202.25a.75.75%200%200%200%201.14-.094l3.75-5.25Z%22%20clip-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    background-repeat: no-repeat;
    background-position: left 0.1rem;
    background-size: 1.25rem 1.25rem;
    padding-left: 2rem;
  }
}
.feature {
  position: relative;
  &.feature-locked {
    pointer-events: none;
    .feature-lock {
      position: absolute;
      inset: 0;
      background-color: color-mix(in srgb, rgb(255 255 255) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
      .feature-controls {
        pointer-events: auto;
        text-align: left;
        .feature-lock-icon {
          position: absolute;
          top: 0;
          right: 0;
          height: calc(var(--spacing) * 5);
          width: calc(var(--spacing) * 5);
          color: var(--color-slate-500);
        }
        .feature-description {
          visibility: hidden;
          position: absolute;
          top: calc(var(--spacing) * 6);
          right: 0;
          z-index: 10;
          width: calc(var(--spacing) * 72);
          border-radius: var(--radius-lg);
          background-color: var(--color-slate-100);
          padding: calc(var(--spacing) * 4);
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          color: var(--color-slate-600);
          opacity: 0%;
          --tw-shadow: 0px 12px 16px -4px var(--tw-shadow-color, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
          --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);
          --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--default-transition-duration));
          transition-delay: 100ms;
          --tw-duration: 300ms;
          transition-duration: 300ms;
          --tw-ease: var(--ease-in-out);
          transition-timing-function: var(--ease-in-out);
          animation-delay: 100ms;
          animation-duration: 300ms;
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-behavior: allow-discrete;
        }
        &:hover .feature-description {
          visibility: visible;
          opacity: 100%;
        }
      }
    }
    &.feature-inset {
      .feature-lock {
        .feature-controls {
          .feature-lock-icon {
            top: calc(var(--spacing) * 2);
            right: calc(var(--spacing) * 2);
          }
          .feature-description {
            top: calc(var(--spacing) * 8);
            right: calc(var(--spacing) * 2);
          }
        }
      }
    }
  }
}
.feature-button {
  position: relative;
  &.feature-locked {
    .feature-button-content {
      pointer-events: none;
      opacity: 50%;
      * {
        pointer-events: none;
      }
      &>*::after {
        --hero-lock-closed: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20aria-hidden%3D%22true%22%20data-slot%3D%22icon%22%3E%0A%20%20%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M16.5%2010.5V6.75a4.5%204.5%200%201%200-9%200v3.75m-.75%2011.25h10.5a2.25%202.25%200%200%200%202.25-2.25v-6.75a2.25%202.25%200%200%200-2.25-2.25H6.75a2.25%202.25%200%200%200-2.25%202.25v6.75a2.25%202.25%200%200%200%202.25%202.25Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
        -webkit-mask: var(--hero-lock-closed);
        mask: var(--hero-lock-closed);
        mask-repeat: no-repeat;
        background-color: currentColor;
        vertical-align: middle;
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        height: calc(var(--spacing) * 5);
        width: calc(var(--spacing) * 5);
        content: "";
      }
      &>.button-xs::after {
        height: calc(var(--spacing) * 4);
        width: calc(var(--spacing) * 4);
      }
    }
    .feature-lock {
      position: absolute;
      top: 100%;
      z-index: 10;
      margin-top: calc(var(--spacing) * 2);
      display: none;
      width: calc(var(--spacing) * 72);
      border-radius: var(--radius-lg);
      background-color: var(--color-slate-100);
      padding: calc(var(--spacing) * 4);
      text-align: left;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--color-slate-600);
      opacity: 0%;
      --tw-shadow: 0px 12px 16px -4px var(--tw-shadow-color, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--tw-shadow-color, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--tw-shadow-color, rgba(10, 13, 18, 0.04));
      --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);
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
      transition-delay: 100ms;
      --tw-duration: 300ms;
      transition-duration: 300ms;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      animation-delay: 100ms;
      animation-duration: 300ms;
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-property: opacity, display;
      transition-behavior: allow-discrete;
      &.feature-lock-left {
        left: 0;
      }
      &.feature-lock-right {
        right: 0;
      }
      &.feature-lock-center {
        left: calc(1 / 2 * 100%);
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      }
    }
    &:hover .feature-lock {
      display: block;
      opacity: 100%;
    }
  }
}
html, body {
  font-weight: var(--font-weight-normal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
  -webkit-font-kerning: normal;
  font-kerning: normal;
}
details summary::-webkit-details-marker {
  display: none;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --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;
    }
  }
}