@charset "UTF-8";
/**
 * @antumo/design-web — Core Library (DEFAULT bundle)
 * Tokens, base styles, components, and utilities — the framework-agnostic DS.
 *
 * Framework integrations (Metronic, ASP.NET Zero, PrimeNG, ngx-bootstrap,
 * ng-select, Bootstrap shims) are NOT included here. They ship as an opt-in
 * bundle: `@antumo/design/integrations` (SCSS: antumo-integrations.scss).
 *
 * Why: those integrations emit GLOBAL rules (e.g. a `.dropdown { ...!important }`
 * Metronic reset) that collide with DS components in apps that don't use those
 * frameworks. Plain consumers (Blazor, vanilla, BS5) get a clean DS; Angular/
 * ASP.NET Zero apps add `@use '@antumo/design/integrations'` (or the granular
 * `@antumo/design/integrations/<name>` exports) on top.
 */
/**
 * Antumo Design System — CSS Custom Properties
 * All design tokens as CSS variables with light mode defaults.
 * Dark mode overrides are in _theme-dark.scss.
 *
 * Naming: --antumo-{category}-{name}
 * Source: Generated from tokens/*.json via tokens/build.mjs
 */
:root {
  --antumo-color-white: #ffffff;
  --antumo-color-black: #000000;
  --antumo-color-focus: #5b6ef2;
  --antumo-blue-25: #fbfdff;
  --antumo-blue-50: #f5faff;
  --antumo-blue-100: #e6f1fb;
  --antumo-blue-200: #cfe3f6;
  --antumo-blue-300: #b3d3ef;
  --antumo-blue-400: #9cc3e8;
  --antumo-blue-500: #7faedd;
  --antumo-blue-600: #6a97c8;
  --antumo-blue-700: #557faf;
  --antumo-blue-800: #3e5f85;
  --antumo-blue-900: #2c425e;
  --antumo-blue-950: #1b2a3f;
  --antumo-yellow-25: #fffdf5;
  --antumo-yellow-50: #fff9e8;
  --antumo-yellow-100: #fff3d4;
  --antumo-yellow-200: #ffe7a8;
  --antumo-yellow-300: #fddc79;
  --antumo-yellow-400: #f4cf53;
  --antumo-yellow-500: #f1c846;
  --antumo-yellow-600: #d4ab32;
  --antumo-yellow-700: #ac8624;
  --antumo-yellow-800: #7f6118;
  --antumo-yellow-900: #523d0f;
  --antumo-yellow-950: #2f2208;
  --antumo-green-25: #f6fcf9;
  --antumo-green-50: #ecf8f2;
  --antumo-green-100: #d7f0e5;
  --antumo-green-200: #b3e3cf;
  --antumo-green-300: #82d1b4;
  --antumo-green-400: #4dbd95;
  --antumo-green-500: #2fa46f;
  --antumo-green-600: #268a5e;
  --antumo-green-700: #1f6f4d;
  --antumo-green-800: #184f38;
  --antumo-green-900: #103325;
  --antumo-green-950: #081d14;
  --antumo-red-25: #fef6f6;
  --antumo-red-50: #fdecec;
  --antumo-red-100: #fad7d7;
  --antumo-red-200: #f4b3b3;
  --antumo-red-300: #ea8282;
  --antumo-red-400: #de6363;
  --antumo-red-500: #d14c4c;
  --antumo-red-600: #b53f3f;
  --antumo-red-700: #923434;
  --antumo-red-800: #6b2626;
  --antumo-red-900: #441818;
  --antumo-red-950: #260d0d;
  --antumo-violet-25: #fbfafe;
  --antumo-violet-50: #f5f3fc;
  --antumo-violet-100: #e7e3f7;
  --antumo-violet-200: #cec6f0;
  --antumo-violet-300: #b1a8e7;
  --antumo-violet-400: #9a8dda;
  --antumo-violet-500: #8b7fd1;
  --antumo-violet-600: #7568b8;
  --antumo-violet-700: #5e5497;
  --antumo-violet-800: #443e6e;
  --antumo-violet-900: #2e2a4a;
  --antumo-violet-950: #1b182c;
  --antumo-alpha-black-10: rgba(0, 0, 0, 0.1);
  --antumo-alpha-black-20: rgba(0, 0, 0, 0.2);
  --antumo-alpha-black-30: rgba(0, 0, 0, 0.3);
  --antumo-alpha-black-40: rgba(0, 0, 0, 0.4);
  --antumo-alpha-black-50: rgba(0, 0, 0, 0.5);
  --antumo-alpha-black-60: rgba(0, 0, 0, 0.6);
  --antumo-alpha-black-70: rgba(0, 0, 0, 0.7);
  --antumo-alpha-black-80: rgba(0, 0, 0, 0.8);
  --antumo-alpha-black-90: rgba(0, 0, 0, 0.9);
  --antumo-alpha-black-100: rgba(0, 0, 0, 1);
  --antumo-alpha-white-10: rgba(255, 255, 255, 0.1);
  --antumo-alpha-white-20: rgba(255, 255, 255, 0.2);
  --antumo-alpha-white-30: rgba(255, 255, 255, 0.3);
  --antumo-alpha-white-40: rgba(255, 255, 255, 0.4);
  --antumo-alpha-white-50: rgba(255, 255, 255, 0.5);
  --antumo-alpha-white-60: rgba(255, 255, 255, 0.6);
  --antumo-alpha-white-70: rgba(255, 255, 255, 0.7);
  --antumo-alpha-white-80: rgba(255, 255, 255, 0.8);
  --antumo-alpha-white-90: rgba(255, 255, 255, 0.9);
  --antumo-alpha-white-100: rgba(255, 255, 255, 1);
  --antumo-alpha-focus-20: rgba(91, 110, 242, 0.2);
  --antumo-alpha-focus-40: rgba(91, 110, 242, 0.4);
  --antumo-font-heading: 'CircularXX', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --antumo-font-body: 'Circular LL', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --antumo-font-size-xs: 12px;
  --antumo-font-size-sm: 14px;
  --antumo-font-size-md: 16px;
  --antumo-font-size-lg: 18px;
  --antumo-font-size-xl: 20px;
  --antumo-font-size-2xl: 24px;
  --antumo-font-size-3xl: 28px;
  --antumo-font-size-4xl: 32px;
  --antumo-line-height-xs: 16px;
  --antumo-line-height-sm: 20px;
  --antumo-line-height-md: 24px;
  --antumo-line-height-lg: 28px;
  --antumo-line-height-xl: 32px;
  --antumo-line-height-2xl: 36px;
  --antumo-font-weight-light: 300;
  --antumo-font-weight-regular: 400;
  --antumo-font-weight-medium: 500;
  --antumo-font-weight-bold: 700;
  --antumo-letter-spacing-tight: -0.01em;
  --antumo-letter-spacing-normal: 0;
  --antumo-spacing-none: 0px;
  --antumo-spacing-xxs: 2px;
  --antumo-spacing-xs: 4px;
  --antumo-spacing-sm: 6px;
  --antumo-spacing-md: 8px;
  --antumo-spacing-lg: 10px;
  --antumo-spacing-xl: 12px;
  --antumo-spacing-2xl: 14px;
  --antumo-spacing-3xl: 16px;
  --antumo-spacing-4xl: 20px;
  --antumo-spacing-5xl: 22px;
  --antumo-spacing-6xl: 24px;
  --antumo-spacing-7xl: 32px;
  --antumo-spacing-8xl: 40px;
  --antumo-spacing-9xl: 48px;
  --antumo-spacing-10xl: 64px;
  --antumo-spacing-11xl: 80px;
  --antumo-spacing-12xl: 96px;
  --antumo-spacing-13xl: 128px;
  --antumo-spacing-14xl: 160px;
  --antumo-size-2xs: 28px;
  --antumo-size-xs: 32px;
  --antumo-size-sm: 36px;
  --antumo-size-md: 40px;
  --antumo-size-lg: 48px;
  --antumo-size-xl: 56px;
  --antumo-radius-none: 0px;
  --antumo-radius-xxs: 2px;
  --antumo-radius-xs: 4px;
  --antumo-radius-sm: 6px;
  --antumo-radius-md: 8px;
  --antumo-radius-lg: 10px;
  --antumo-radius-xl: 12px;
  --antumo-radius-2xl: 16px;
  --antumo-radius-3xl: 20px;
  --antumo-radius-4xl: 24px;
  --antumo-radius-full: 999px;
  --antumo-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  --antumo-shadow-sm: 0px 1px 3px 0px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
  --antumo-shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
  --antumo-shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  --antumo-shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  --antumo-focus-ring: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #5b6ef2;
  --antumo-focus-ring-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #5b6ef2;
}

:root,
[data-theme=light] {
  --antumo-gray-25: #fdfdfd;
  --antumo-gray-50: #fafafa;
  --antumo-gray-100: #f5f5f5;
  --antumo-gray-200: #e9eaeb;
  --antumo-gray-300: #d5d7da;
  --antumo-gray-400: #a4a7ae;
  --antumo-gray-500: #717680;
  --antumo-gray-600: #535862;
  --antumo-gray-700: #414651;
  --antumo-gray-800: #252b37;
  --antumo-gray-900: #181d27;
  --antumo-gray-950: #0a0d12;
  --antumo-navy-25: #fbfbfd;
  --antumo-navy-50: #f6f7fa;
  --antumo-navy-100: #e6e8f0;
  --antumo-navy-200: #c7cad9;
  --antumo-navy-300: #a4a7bf;
  --antumo-navy-400: #6c6f92;
  --antumo-navy-500: #3a3a66;
  --antumo-navy-600: #32355a;
  --antumo-navy-700: #2a2d4f;
  --antumo-navy-800: #21243f;
  --antumo-navy-900: #171a2d;
  --antumo-navy-950: #0f1220;
  --antumo-text-primary: var(--antumo-gray-900);
  --antumo-text-secondary: var(--antumo-gray-700);
  --antumo-text-secondary-hover: var(--antumo-gray-800);
  --antumo-text-tertiary: var(--antumo-gray-600);
  --antumo-text-tertiary-hover: var(--antumo-gray-700);
  --antumo-text-quaternary: var(--antumo-gray-500);
  --antumo-text-disabled: var(--antumo-gray-400);
  --antumo-text-placeholder: var(--antumo-gray-500);
  --antumo-text-white: var(--antumo-color-white);
  --antumo-text-brand-solid: var(--antumo-navy-500);
  --antumo-text-brand-hover: var(--antumo-navy-600);
  --antumo-text-error: var(--antumo-red-600);
  --antumo-text-error-hover: var(--antumo-red-700);
  --antumo-text-warning: var(--antumo-yellow-600);
  --antumo-text-success: var(--antumo-green-600);
  --antumo-text-brand-primary: var(--antumo-navy-900);
  --antumo-bg-primary: var(--antumo-color-white);
  --antumo-bg-primary-hover: var(--antumo-gray-50);
  --antumo-bg-primary-solid: var(--antumo-gray-950);
  --antumo-bg-secondary: var(--antumo-gray-50);
  --antumo-bg-secondary-hover: var(--antumo-gray-100);
  --antumo-bg-tertiary: var(--antumo-gray-100);
  --antumo-bg-quaternary: var(--antumo-gray-200);
  --antumo-bg-active: var(--antumo-gray-50);
  --antumo-bg-brand-primary: var(--antumo-navy-50);
  --antumo-bg-brand-secondary: var(--antumo-navy-100);
  --antumo-bg-brand-solid: var(--antumo-navy-500);
  --antumo-bg-brand-hover: var(--antumo-navy-600);
  --antumo-bg-sidebar: var(--antumo-navy-500);
  --antumo-bg-sidebar-item-active: var(--antumo-navy-400);
  --antumo-bg-row-error: var(--antumo-red-50);
  --antumo-bg-row-warning: var(--antumo-yellow-50);
  --antumo-bg-row-success: var(--antumo-green-50);
  --antumo-bg-row-info: var(--antumo-blue-50);
  --antumo-bg-disabled: var(--antumo-gray-100);
  --antumo-bg-disabled-subtle: var(--antumo-gray-50);
  --antumo-bg-overlay: var(--antumo-gray-900);
  --antumo-bg-error-primary: var(--antumo-red-50);
  --antumo-bg-error-secondary: var(--antumo-red-100);
  --antumo-bg-error-solid: var(--antumo-red-600);
  --antumo-bg-error-hover: var(--antumo-red-700);
  --antumo-bg-warning-primary: var(--antumo-yellow-50);
  --antumo-bg-warning-solid: var(--antumo-yellow-600);
  --antumo-bg-success-primary: var(--antumo-green-50);
  --antumo-bg-success-solid: var(--antumo-green-600);
  --antumo-bg-success-secondary: var(--antumo-green-100);
  --antumo-bg-secondary-alpha: var(--antumo-gray-100);
  --antumo-border-primary: var(--antumo-gray-300);
  --antumo-border-secondary: var(--antumo-gray-200);
  --antumo-border-tertiary: var(--antumo-gray-100);
  --antumo-border-sidebar: var(--antumo-navy-500);
  --antumo-border-disabled: var(--antumo-gray-300);
  --antumo-border-disabled-subtle: var(--antumo-gray-200);
  --antumo-border-brand: var(--antumo-navy-500);
  --antumo-border-error: var(--antumo-red-500);
  --antumo-border-error-subtle: var(--antumo-red-300);
  --antumo-border-focus: var(--antumo-color-focus);
  --antumo-fg-primary: var(--antumo-gray-900);
  --antumo-fg-secondary: var(--antumo-gray-700);
  --antumo-fg-secondary-hover: var(--antumo-gray-800);
  --antumo-fg-tertiary: var(--antumo-gray-600);
  --antumo-fg-tertiary-hover: var(--antumo-gray-700);
  --antumo-fg-quaternary: var(--antumo-gray-400);
  --antumo-fg-quaternary-hover: var(--antumo-gray-500);
  --antumo-fg-white: var(--antumo-color-white);
  --antumo-fg-disabled: var(--antumo-gray-400);
  --antumo-fg-disabled-subtle: var(--antumo-gray-300);
  --antumo-fg-brand-primary: var(--antumo-navy-500);
  --antumo-fg-brand-secondary-hover: var(--antumo-navy-600);
  --antumo-fg-info-primary: var(--antumo-blue-600);
  --antumo-fg-info-secondary: var(--antumo-blue-500);
  --antumo-fg-error-primary: var(--antumo-red-600);
  --antumo-fg-error-secondary: var(--antumo-red-500);
  --antumo-fg-warning-primary: var(--antumo-yellow-600);
  --antumo-fg-warning-secondary: var(--antumo-yellow-500);
  --antumo-fg-success-primary: var(--antumo-green-600);
  --antumo-fg-success-secondary: var(--antumo-green-500);
}

/**
 * Antumo Design System — Dark Mode Overrides
 * Activated via [data-theme="dark"] attribute on root element.
 * Auto-detection via prefers-color-scheme when no data-theme is set.
 *
 * Source: Generated from tokens/*.json via tokens/build.mjs
 */
[data-theme=dark] {
  --antumo-gray-25: #fafafa;
  --antumo-gray-50: #f7f7f7;
  --antumo-gray-100: #f0f0f1;
  --antumo-gray-200: #ececed;
  --antumo-gray-300: #cecfd2;
  --antumo-gray-400: #94979c;
  --antumo-gray-500: #85888e;
  --antumo-gray-600: #61656c;
  --antumo-gray-700: #373a41;
  --antumo-gray-800: #22262f;
  --antumo-gray-900: #181d27;
  --antumo-gray-950: #0c0e12;
  --antumo-navy-25: #fbfbfe;
  --antumo-navy-50: #f4f5fd;
  --antumo-navy-100: #e6e8f8;
  --antumo-navy-200: #cdd1f1;
  --antumo-navy-300: #b1b7e6;
  --antumo-navy-400: #9199da;
  --antumo-navy-500: #757dd0;
  --antumo-navy-600: #6068b8;
  --antumo-navy-700: #4c539a;
  --antumo-navy-800: #383d72;
  --antumo-navy-900: #26294d;
  --antumo-navy-950: #17192e;
  --antumo-text-primary: var(--antumo-gray-50);
  --antumo-text-secondary: var(--antumo-gray-300);
  --antumo-text-secondary-hover: var(--antumo-gray-200);
  --antumo-text-tertiary: var(--antumo-gray-400);
  --antumo-text-tertiary-hover: var(--antumo-gray-300);
  --antumo-text-quaternary: var(--antumo-gray-400);
  --antumo-text-disabled: var(--antumo-gray-500);
  --antumo-text-placeholder: #717680;
  --antumo-text-error: var(--antumo-red-400);
  --antumo-text-error-hover: var(--antumo-red-300);
  --antumo-text-warning: var(--antumo-yellow-400);
  --antumo-text-success: var(--antumo-green-400);
  --antumo-text-brand-primary: var(--antumo-navy-100);
  --antumo-bg-primary: var(--antumo-gray-950);
  --antumo-bg-primary-hover: var(--antumo-gray-800);
  --antumo-bg-primary-solid: var(--antumo-gray-900);
  --antumo-bg-secondary: var(--antumo-gray-900);
  --antumo-bg-secondary-hover: var(--antumo-gray-800);
  --antumo-bg-tertiary: var(--antumo-gray-800);
  --antumo-bg-quaternary: var(--antumo-gray-700);
  --antumo-bg-active: var(--antumo-gray-800);
  --antumo-bg-brand-primary: var(--antumo-navy-950);
  --antumo-bg-brand-secondary: #e6e8f0;
  --antumo-bg-sidebar: var(--antumo-gray-950);
  --antumo-bg-sidebar-item-active: var(--antumo-gray-700);
  --antumo-bg-row-error: var(--antumo-red-950);
  --antumo-bg-row-warning: var(--antumo-yellow-950);
  --antumo-bg-row-success: var(--antumo-green-950);
  --antumo-bg-row-info: var(--antumo-blue-950);
  --antumo-bg-disabled: var(--antumo-gray-900);
  --antumo-bg-disabled-subtle: var(--antumo-gray-700);
  --antumo-bg-overlay: var(--antumo-gray-700);
  --antumo-bg-error-primary: var(--antumo-red-950);
  --antumo-bg-error-secondary: var(--antumo-red-400);
  --antumo-bg-error-solid: var(--antumo-red-400);
  --antumo-bg-error-hover: var(--antumo-red-500);
  --antumo-bg-warning-primary: var(--antumo-yellow-950);
  --antumo-bg-warning-solid: var(--antumo-yellow-500);
  --antumo-bg-success-primary: var(--antumo-green-950);
  --antumo-bg-success-solid: var(--antumo-green-500);
  --antumo-bg-success-secondary: var(--antumo-green-400);
  --antumo-bg-secondary-alpha: var(--antumo-gray-800);
  --antumo-border-primary: var(--antumo-gray-700);
  --antumo-border-secondary: #252b37;
  --antumo-border-tertiary: var(--antumo-gray-800);
  --antumo-border-sidebar: var(--antumo-gray-800);
  --antumo-border-disabled: var(--antumo-gray-700);
  --antumo-border-disabled-subtle: var(--antumo-gray-800);
  --antumo-border-error: var(--antumo-red-400);
  --antumo-border-error-subtle: var(--antumo-red-500);
  --antumo-fg-primary: var(--antumo-color-white);
  --antumo-fg-secondary: var(--antumo-gray-300);
  --antumo-fg-secondary-hover: var(--antumo-gray-200);
  --antumo-fg-tertiary: var(--antumo-gray-400);
  --antumo-fg-tertiary-hover: var(--antumo-gray-300);
  --antumo-fg-quaternary: var(--antumo-gray-600);
  --antumo-fg-disabled: var(--antumo-gray-500);
  --antumo-fg-disabled-subtle: var(--antumo-gray-600);
  --antumo-fg-info-primary: var(--antumo-blue-500);
  --antumo-fg-info-secondary: var(--antumo-blue-400);
  --antumo-fg-error-primary: var(--antumo-red-500);
  --antumo-fg-error-secondary: var(--antumo-red-400);
  --antumo-fg-warning-primary: var(--antumo-yellow-500);
  --antumo-fg-warning-secondary: var(--antumo-yellow-400);
  --antumo-fg-success-primary: var(--antumo-green-500);
  --antumo-fg-success-secondary: var(--antumo-green-400);
  --antumo-focus-ring: 0px 0px 0px 2px var(--antumo-gray-950), 0px 0px 0px 4px #5b6ef2;
  --antumo-focus-ring-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px var(--antumo-gray-950), 0px 0px 0px 4px #5b6ef2;
}

/**
 * Antumo Design System — CSS Reboot
 * Full browser normalization for standalone operation without Bootstrap.
 * Based on modern-normalize + Bootstrap Reboot principles.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

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

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

pre,
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

p,
blockquote,
figure,
pre {
  margin-bottom: 1em;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--antumo-border-primary, currentColor);
  margin-block: 1em;
  color: inherit;
}

ol,
ul {
  list-style: none;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button,
[role=button] {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  padding: 0;
  width: 100%;
  float: left;
}
legend + * {
  clear: left;
}

[type=search] {
  -webkit-appearance: none;
  appearance: none;
  outline-offset: -2px;
}

::placeholder {
  color: var(--antumo-text-placeholder, currentColor);
  opacity: 1;
}

::file-selector-button {
  font: inherit;
}

summary {
  display: list-item;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/**
 * Antumo Design System — Font Face Declarations
 * CircularXX (headings, buttons) + Circular LL (body, labels)
 */
@font-face {
  font-family: "CircularXX";
  src: url("../assets/fonts/CircularXXTT-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularXX";
  src: url("../assets/fonts/CircularXXTT-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularXX";
  src: url("../assets/fonts/CircularXXTT-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular LL";
  src: url("../assets/fonts/CircularLLTT-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular LL";
  src: url("../assets/fonts/CircularLLTT-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/**
 * Antumo Design System — Global Base Styles
 * Default body/html typography, heading hierarchy, link styles, and focus.
 */
body {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-primary);
  background-color: var(--antumo-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-4xl);
  line-height: var(--antumo-line-height-2xl);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-3xl);
  line-height: var(--antumo-line-height-xl);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-2xl);
  line-height: var(--antumo-line-height-lg);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-xl);
  line-height: var(--antumo-line-height-md);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
}

h5 {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-md);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
}

h6 {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
}

a {
  color: var(--antumo-text-brand-solid);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--antumo-text-brand-hover);
}

::selection {
  background: var(--antumo-navy-100);
  color: var(--antumo-navy-900);
}

/**
 * Antumo Design System — Component Index
 * @forward all component partials here.
 * Components are added as they are implemented in Phases 2 & 3.
 */
@keyframes btn-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
  border: 1px solid transparent;
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
}
.btn:hover, .btn:focus, .btn:active, .btn:visited {
  text-decoration: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring, 0px 0px 0px 2px var(--antumo-color-white), 0px 0px 0px 4px var(--antumo-color-focus));
}
.btn:disabled, .btn[disabled], .btn[aria-disabled=true] {
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn {
  height: var(--antumo-size-md);
  padding: 0 var(--antumo-spacing-2xl);
  font-size: var(--antumo-font-size-sm);
}
.btn .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-sm {
  height: var(--antumo-size-sm);
  padding: 0 var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-sm);
}
.btn-sm .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-md {
  height: var(--antumo-size-md);
  padding: 0 var(--antumo-spacing-2xl);
  font-size: var(--antumo-font-size-sm);
}
.btn-md .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-lg {
  height: var(--antumo-size-lg);
  padding: 0 var(--antumo-spacing-3xl);
  font-size: var(--antumo-font-size-sm);
}
.btn-lg .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-xl {
  height: var(--antumo-size-xl);
  padding: 0 var(--antumo-spacing-4xl);
  font-size: var(--antumo-font-size-md);
}
.btn-xl .btn-icon {
  width: 24px;
  height: 24px;
}
.btn-primary {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border-color: var(--antumo-bg-brand-solid);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-primary:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-brand-hover);
  border-color: var(--antumo-bg-brand-hover);
  color: var(--antumo-color-white);
}
.btn-primary:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-brand-hover);
  border-color: var(--antumo-bg-brand-hover);
  color: var(--antumo-color-white);
  transform: scale(0.98);
}
.btn-primary:disabled, .btn-primary[disabled], .btn-primary[aria-disabled=true] {
  background-color: var(--antumo-bg-disabled);
}
.btn-primary.btn-destructive {
  background-color: var(--antumo-bg-error-solid);
  color: var(--antumo-color-white);
  border-color: var(--antumo-bg-error-solid);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-primary.btn-destructive:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-hover);
  border-color: var(--antumo-bg-error-hover);
  color: var(--antumo-color-white);
}
.btn-primary.btn-destructive:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-hover);
  border-color: var(--antumo-bg-error-hover);
  color: var(--antumo-color-white);
  transform: scale(0.98);
}
.btn-primary.btn-destructive:disabled, .btn-primary.btn-destructive[disabled], .btn-primary.btn-destructive[aria-disabled=true] {
  background-color: var(--antumo-bg-disabled);
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
}
.btn-secondary {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  border-color: var(--antumo-border-primary);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-secondary:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-hover);
  border-color: var(--antumo-border-primary);
}
.btn-secondary:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-hover);
  border-color: var(--antumo-border-primary);
}
.btn-secondary:disabled, .btn-secondary[disabled], .btn-secondary[aria-disabled=true] {
  background-color: transparent;
  border-color: var(--antumo-border-primary);
}
.btn-secondary.btn-destructive {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-error);
  border-color: var(--antumo-border-error-subtle);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-secondary.btn-destructive:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-secondary);
  color: var(--antumo-text-error-hover);
  border-color: var(--antumo-border-error-subtle);
}
.btn-secondary.btn-destructive:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-secondary);
  color: var(--antumo-text-error-hover);
  border-color: var(--antumo-border-error-subtle);
  transform: scale(0.98);
}
.btn-secondary.btn-destructive:disabled, .btn-secondary.btn-destructive[disabled], .btn-secondary.btn-destructive[aria-disabled=true] {
  background-color: transparent;
  color: var(--antumo-text-disabled);
  border-color: var(--antumo-border-primary);
  box-shadow: none;
}
.btn-tertiary {
  background-color: transparent;
  color: var(--antumo-text-brand-solid);
  border-color: transparent;
  box-shadow: none;
}
.btn-tertiary:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-solid);
}
.btn-tertiary:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-solid);
  transform: scale(0.98);
}
.btn-tertiary.btn-destructive {
  background-color: transparent;
  color: var(--antumo-text-error);
  border-color: transparent;
  box-shadow: none;
}
.btn-tertiary.btn-destructive:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-secondary);
  color: var(--antumo-text-error-hover);
}
.btn-tertiary.btn-destructive:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-secondary);
  color: var(--antumo-text-error-hover);
  transform: scale(0.98);
}
.btn-tertiary.btn-destructive:disabled, .btn-tertiary.btn-destructive[disabled], .btn-tertiary.btn-destructive[aria-disabled=true] {
  background-color: transparent;
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
}
.btn-success, .btn-info {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border-color: var(--antumo-bg-brand-solid);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-success:hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-info:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-brand-hover);
  border-color: var(--antumo-bg-brand-hover);
  color: var(--antumo-color-white);
}
.btn-success:active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-info:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-brand-hover);
  border-color: var(--antumo-bg-brand-hover);
  color: var(--antumo-color-white);
  transform: scale(0.98);
}
.btn-success:disabled, .btn-success[disabled], .btn-success[aria-disabled=true], .btn-info:disabled, .btn-info[disabled], .btn-info[aria-disabled=true] {
  background-color: var(--antumo-bg-disabled);
}
.btn-warning {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  border-color: var(--antumo-border-primary);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-warning:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-hover);
  border-color: var(--antumo-border-primary);
}
.btn-warning:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-hover);
  border-color: var(--antumo-border-primary);
}
.btn-warning:disabled, .btn-warning[disabled], .btn-warning[aria-disabled=true] {
  background-color: transparent;
  border-color: var(--antumo-border-primary);
}
.btn-danger {
  background-color: var(--antumo-bg-error-solid);
  color: var(--antumo-color-white);
  border-color: var(--antumo-bg-error-solid);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-danger:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-hover);
  border-color: var(--antumo-bg-error-hover);
  color: var(--antumo-color-white);
}
.btn-danger:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-hover);
  border-color: var(--antumo-bg-error-hover);
  color: var(--antumo-color-white);
  transform: scale(0.98);
}
.btn-danger:disabled, .btn-danger[disabled], .btn-danger[aria-disabled=true] {
  background-color: var(--antumo-bg-disabled);
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  border-color: var(--antumo-border-primary);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-outline-primary:hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-secondary:hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-success:hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-info:hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-warning:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-hover);
  border-color: var(--antumo-border-primary);
}
.btn-outline-primary:active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-secondary:active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-success:active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-info:active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-outline-warning:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-brand-hover);
  border-color: var(--antumo-border-primary);
}
.btn-outline-primary:disabled, .btn-outline-primary[disabled], .btn-outline-primary[aria-disabled=true], .btn-outline-secondary:disabled, .btn-outline-secondary[disabled], .btn-outline-secondary[aria-disabled=true], .btn-outline-success:disabled, .btn-outline-success[disabled], .btn-outline-success[aria-disabled=true], .btn-outline-info:disabled, .btn-outline-info[disabled], .btn-outline-info[aria-disabled=true], .btn-outline-warning:disabled, .btn-outline-warning[disabled], .btn-outline-warning[aria-disabled=true] {
  background-color: transparent;
  border-color: var(--antumo-border-primary);
}
.btn-outline-danger {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-error);
  border-color: var(--antumo-border-error-subtle);
  box-shadow: var(--antumo-shadow-xs);
}
.btn-outline-danger:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-secondary);
  color: var(--antumo-text-error-hover);
  border-color: var(--antumo-border-error-subtle);
}
.btn-outline-danger:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: var(--antumo-bg-error-secondary);
  color: var(--antumo-text-error-hover);
  border-color: var(--antumo-border-error-subtle);
  transform: scale(0.98);
}
.btn-outline-danger:disabled, .btn-outline-danger[disabled], .btn-outline-danger[aria-disabled=true] {
  background-color: transparent;
  color: var(--antumo-text-disabled);
  border-color: var(--antumo-border-primary);
  box-shadow: none;
}
.btn-link {
  background-color: transparent;
  color: var(--antumo-text-brand-solid);
  border-color: transparent;
  border-radius: var(--antumo-radius-xxs);
  box-shadow: none;
}
.btn-link:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: transparent;
  color: var(--antumo-text-brand-hover);
}
.btn-link:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: transparent;
  color: var(--antumo-text-brand-hover);
}
.btn-link:disabled, .btn-link[disabled], .btn-link[aria-disabled=true] {
  background-color: transparent;
}
.btn-link {
  height: auto;
  padding: 0;
}
.btn-link.btn-lg {
  padding: var(--antumo-spacing-xxs) 0;
}
.btn-link.btn-destructive {
  background-color: transparent;
  color: var(--antumo-text-error);
  border-color: transparent;
  border-radius: var(--antumo-radius-xxs);
  box-shadow: none;
}
.btn-link.btn-destructive:hover:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: transparent;
  color: var(--antumo-text-error-hover);
}
.btn-link.btn-destructive:active:not(:disabled):not([disabled]):not([aria-disabled=true]) {
  background-color: transparent;
  color: var(--antumo-text-error-hover);
}
.btn-link.btn-destructive:disabled, .btn-link.btn-destructive[disabled], .btn-link.btn-destructive[aria-disabled=true] {
  background-color: transparent;
}
.btn-icon-only {
  padding: 0;
  gap: 0;
}
.btn-icon-only.btn-sm {
  width: var(--antumo-size-sm);
}
.btn-icon-only.btn-md {
  width: var(--antumo-size-md);
}
.btn-icon-only.btn-lg {
  width: var(--antumo-size-lg);
}
.btn-icon-only.btn-xl {
  width: var(--antumo-size-xl);
}
.btn-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spinner 600ms linear infinite;
  color: var(--antumo-color-white);
}
.btn-loading.btn-secondary::after, .btn-loading.btn-tertiary::after, .btn-loading.btn-link::after {
  color: var(--antumo-text-brand-solid);
}
.btn-loading.btn-link.btn-destructive::after {
  color: var(--antumo-text-error);
}
.btn-loading.btn-primary.btn-destructive {
  background-color: var(--antumo-bg-error-hover);
  border-color: var(--antumo-bg-error-hover);
}
.btn-loading.btn-secondary.btn-destructive {
  background-color: var(--antumo-bg-error-secondary);
  border-color: var(--antumo-border-error-subtle);
}
.btn-loading.btn-secondary.btn-destructive::after {
  color: var(--antumo-text-error-hover);
}
.btn-loading.btn-tertiary.btn-destructive {
  background-color: var(--antumo-bg-error-secondary);
}
.btn-loading.btn-tertiary.btn-destructive::after {
  color: var(--antumo-text-error-hover);
}
.btn-loading.btn-xl::after {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
}
.btn-full-width {
  width: 100%;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.btn-icon svg {
  width: 100%;
  height: 100%;
}
.btn-label {
  display: inline-flex;
  align-items: center;
}

.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
  border: 1px solid transparent;
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
}
.btn-close:hover, .btn-close:focus, .btn-close:active, .btn-close:visited {
  text-decoration: none;
}
.btn-close:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring, 0px 0px 0px 2px var(--antumo-color-white), 0px 0px 0px 4px var(--antumo-color-focus));
}
.btn-close:disabled, .btn-close[disabled], .btn-close[aria-disabled=true] {
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-close {
  background-color: transparent;
  color: var(--antumo-fg-quaternary);
  border-color: transparent;
  border-radius: var(--antumo-radius-md);
  box-shadow: none;
  padding: 0;
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
}
.btn-close .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-close:hover:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-fg-quaternary-hover);
}
.btn-close:active:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-fg-quaternary-hover);
}
.btn-close-sm {
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
}
.btn-close-sm .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-close-md {
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
}
.btn-close-xl {
  width: var(--antumo-size-xl);
  height: var(--antumo-size-xl);
}
.btn-close-xl .btn-icon {
  width: 24px;
  height: 24px;
}

.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
  border: 1px solid transparent;
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
}
.btn-delete:hover, .btn-delete:focus, .btn-delete:active, .btn-delete:visited {
  text-decoration: none;
}
.btn-delete:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring, 0px 0px 0px 2px var(--antumo-color-white), 0px 0px 0px 4px var(--antumo-color-focus));
}
.btn-delete:disabled, .btn-delete[disabled], .btn-delete[aria-disabled=true] {
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-delete {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-fg-quaternary);
  border-color: transparent;
  border-radius: var(--antumo-radius-md);
  box-shadow: none;
  padding: 0;
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
}
.btn-delete .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-delete:hover:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-error);
}
.btn-delete:active:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-error);
}
.btn-delete-lg {
  width: 48px;
  height: 48px;
}
.btn-delete-xl {
  width: var(--antumo-size-xl);
  height: var(--antumo-size-xl);
}
.btn-delete-xl .btn-icon {
  width: 24px;
  height: 24px;
}

.btn-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
  border: 1px solid transparent;
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
}
.btn-utility:hover, .btn-utility:focus, .btn-utility:active, .btn-utility:visited {
  text-decoration: none;
}
.btn-utility:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring, 0px 0px 0px 2px var(--antumo-color-white), 0px 0px 0px 4px var(--antumo-color-focus));
}
.btn-utility:disabled, .btn-utility[disabled], .btn-utility[aria-disabled=true] {
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-utility {
  background-color: transparent;
  color: var(--antumo-fg-quaternary);
  border-color: transparent;
  border-radius: var(--antumo-radius-sm);
  box-shadow: none;
  width: var(--antumo-size-xs);
  height: var(--antumo-size-xs);
  padding: 0;
}
.btn-utility .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-utility:hover:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-fg-quaternary-hover);
}
.btn-utility:active:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-fg-quaternary-hover);
}
.btn-utility:focus-visible {
  background-color: var(--antumo-bg-primary);
}
.btn-utility:disabled, .btn-utility[disabled] {
  background-color: transparent;
  color: var(--antumo-fg-disabled-subtle);
}
.btn-utility-xs {
  width: var(--antumo-size-2xs);
  height: var(--antumo-size-2xs);
}
.btn-utility-xs .btn-icon {
  width: 16px;
  height: 16px;
}
.btn-utility-sm {
  width: var(--antumo-size-xs);
  height: var(--antumo-size-xs);
}
.btn-utility-sm .btn-icon {
  width: 20px;
  height: 20px;
}

.btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  flex-wrap: wrap;
}
.btn-group:has(.dropdown-toggle-split) {
  gap: 0;
  flex-wrap: nowrap;
}
.btn-group:has(.dropdown-toggle-split) > .btn:not(.dropdown-toggle-split) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.btn-group > .dropdown-toggle-split {
  padding: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: var(--antumo-size-md);
}
.btn-group > .dropdown-toggle-split.btn-sm {
  width: var(--antumo-size-sm);
}
.btn-group > .dropdown-toggle-split.btn-lg {
  width: var(--antumo-size-lg);
}
.btn-group > .dropdown-toggle-split.btn-xl {
  width: var(--antumo-size-xl);
}
.btn-group > .dropdown-toggle-split.btn-xl .btn-icon {
  width: 24px;
  height: 24px;
}
.btn-group > .dropdown-toggle-split .btn-icon {
  transition: transform 150ms ease-in-out;
}
.btn-group > .dropdown-toggle-split.is-active .btn-icon, .btn-group > .dropdown-toggle-split[aria-expanded=true] .btn-icon {
  transform: rotate(180deg);
}
.btn-group > .dropdown-toggle-split.btn-primary:not(.btn-destructive) {
  border-left: 1px solid var(--antumo-alpha-white-20);
}
.btn-group > .dropdown-toggle-split.btn-primary:not(.btn-destructive):hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-group > .dropdown-toggle-split.btn-primary:not(.btn-destructive):active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-group > .dropdown-toggle-split.btn-primary:not(.btn-destructive).is-active, .btn-group > .dropdown-toggle-split.btn-primary:not(.btn-destructive)[aria-expanded=true] {
  border-left-color: var(--antumo-alpha-white-20);
}
.btn-group > .dropdown-toggle-split.btn-primary.btn-destructive {
  border-left: 1px solid var(--antumo-alpha-white-20);
}
.btn-group > .dropdown-toggle-split.btn-primary.btn-destructive:hover:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-group > .dropdown-toggle-split.btn-primary.btn-destructive:active:not(:disabled):not([disabled]):not([aria-disabled=true]), .btn-group > .dropdown-toggle-split.btn-primary.btn-destructive.is-active, .btn-group > .dropdown-toggle-split.btn-primary.btn-destructive[aria-expanded=true] {
  border-left-color: var(--antumo-alpha-white-20);
}
.btn-group-flush {
  gap: 0;
}
.btn-group-flush > .btn,
.btn-group-flush > .btn-utility {
  border-radius: 0;
}
.btn-group-flush > .btn:first-child,
.btn-group-flush > .btn-utility:first-child {
  border-top-left-radius: var(--antumo-radius-full);
  border-bottom-left-radius: var(--antumo-radius-full);
}
.btn-group-flush > .btn:last-child,
.btn-group-flush > .btn-utility:last-child {
  border-top-right-radius: var(--antumo-radius-full);
  border-bottom-right-radius: var(--antumo-radius-full);
}
.btn-group-flush > .btn:not(:first-child),
.btn-group-flush > .btn-utility:not(:first-child) {
  margin-left: -1px;
}

.btn-floating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
  border: 1px solid transparent;
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
}
.btn-floating:hover, .btn-floating:focus, .btn-floating:active, .btn-floating:visited {
  text-decoration: none;
}
.btn-floating:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring, 0px 0px 0px 2px var(--antumo-color-white), 0px 0px 0px 4px var(--antumo-color-focus));
}
.btn-floating:disabled, .btn-floating[disabled], .btn-floating[aria-disabled=true] {
  color: var(--antumo-text-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-floating {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-full);
  box-shadow: var(--antumo-shadow-md);
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
  padding: 0;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}
.btn-floating .btn-icon {
  width: 20px;
  height: 20px;
}
.btn-floating:hover:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-secondary-hover);
  color: var(--antumo-text-brand-solid);
  box-shadow: var(--antumo-shadow-lg);
}
.btn-floating:active:not(:disabled):not([disabled]) {
  background-color: var(--antumo-bg-active);
  transform: scale(0.96);
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: var(--antumo-spacing-3xl);
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group.row {
  flex-direction: row;
  flex-wrap: wrap;
}

.form-label {
  margin-bottom: var(--antumo-spacing-sm);
}

.form-label {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  letter-spacing: 0;
  color: var(--antumo-text-secondary);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.form-label-xl {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.form-label-required::after {
  content: " *";
  color: var(--antumo-text-error);
  margin-left: var(--antumo-spacing-xxs);
}

.col-form-label {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: 0;
  color: var(--antumo-text-secondary);
  padding-top: calc(var(--antumo-spacing-md) + 1px);
  padding-bottom: calc(var(--antumo-spacing-md) + 1px);
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  align-self: stretch;
}
.input-group > .form-control,
.input-group > .btn,
.input-group > .input-group-text,
.input-group > .input-group-btn > .btn,
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn {
  position: relative;
  border-radius: 0 !important;
}
.input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:not(:last-child) {
  border-right: none !important;
}
.input-group > .form-control:focus {
  z-index: 3;
  border-right: 1px solid var(--antumo-color-focus) !important;
}
.input-group > :first-child,
.input-group > .input-group-btn:first-child > .btn,
.input-group > .input-group-prepend:first-child > .btn {
  border-top-left-radius: var(--antumo-radius-md) !important;
  border-bottom-left-radius: var(--antumo-radius-md) !important;
}
.input-group > :last-child,
.input-group > .input-group-btn:last-child > .btn,
.input-group > .input-group-append:last-child > .btn {
  border-top-right-radius: var(--antumo-radius-md) !important;
  border-bottom-right-radius: var(--antumo-radius-md) !important;
}
.input-group > .input-group-btn {
  display: flex;
}
.input-group > .input-group-append,
.input-group > .input-group-prepend {
  display: contents;
}
.input-group > .btn,
.input-group > .input-group-btn > .btn,
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn {
  height: auto !important;
  border: 1px solid var(--antumo-border-primary) !important;
}

.form-text {
  display: flex;
  align-items: flex-start;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  letter-spacing: 0;
  color: var(--antumo-fg-tertiary);
  margin-top: var(--antumo-spacing-sm);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.form-text-error {
  color: var(--antumo-text-error);
  gap: var(--antumo-spacing-sm);
}
.form-text-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: var(--antumo-spacing-xxs);
}

.form-control.form-control--group {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
}
.form-control.form-control--group .form-control__field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
}
.form-control.form-control--group .form-control__field::placeholder {
  color: var(--antumo-text-quaternary);
  opacity: 1;
}
.form-control.form-control--group .form-control__field:disabled {
  cursor: not-allowed;
}

.form-control-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.form-control-xl .form-control-icon {
  width: 24px;
  height: 24px;
}
.form-control-icon-trailing {
  margin-left: auto;
}

.form-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  letter-spacing: 0;
  color: var(--antumo-text-quaternary);
  background: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-primary);
  box-shadow: var(--antumo-shadow-xs);
  cursor: text;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  border-radius: var(--antumo-radius-md);
}
.form-control::placeholder {
  color: var(--antumo-text-quaternary);
  opacity: 1;
}
.form-control-md {
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  border-radius: var(--antumo-radius-md);
}
.form-control-lg {
  padding: var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  border-radius: var(--antumo-radius-md);
}
.form-control-xl {
  padding: var(--antumo-spacing-2xl);
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
  border-radius: var(--antumo-radius-lg);
}
.form-control-hover {
  border-color: var(--antumo-color-focus);
}
.form-control-focused {
  border: 2px solid var(--antumo-color-focus);
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-focused.form-control-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-focused.form-control-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
}
.form-control-typing {
  border: 2px solid var(--antumo-color-focus);
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  color: var(--antumo-text-primary);
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-typing.form-control-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-typing.form-control-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
}
.form-control-filled {
  color: var(--antumo-text-primary);
}
.form-control-disabled, .form-control:disabled, .form-control[disabled] {
  background: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-secondary);
  box-shadow: none;
  cursor: not-allowed;
  color: var(--antumo-text-quaternary);
  pointer-events: none;
}
.form-control-readonly {
  background: var(--antumo-bg-secondary);
  border-style: dashed;
  border-color: var(--antumo-border-secondary);
  box-shadow: none;
  cursor: default;
  color: var(--antumo-text-secondary);
}
.form-control-error {
  border-color: var(--antumo-border-error);
}
.form-control-error-filled {
  border-color: var(--antumo-border-error);
  color: var(--antumo-text-primary);
}
.form-control-error-focused {
  border: 2px solid var(--antumo-border-error);
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-error-focused.form-control-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-error-focused.form-control-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
}
.form-control:hover:not(.form-control-disabled):not(.form-control-readonly):not(.form-control-focused):not(.form-control-typing):not(.form-control-error-focused) {
  border-color: var(--antumo-color-focus);
}
.form-control:focus:not(.form-control-error):not(.form-control-error-filled):not(.form-control-error-focused):not(.form-control-disabled):not(.form-control-readonly) {
  border: 2px solid var(--antumo-color-focus);
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
}
.form-control:focus:not(.form-control-error):not(.form-control-error-filled):not(.form-control-error-focused):not(.form-control-disabled):not(.form-control-readonly).form-control-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
}
.form-control:focus:not(.form-control-error):not(.form-control-error-filled):not(.form-control-error-focused):not(.form-control-disabled):not(.form-control-readonly).form-control-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
}
.form-control:focus-within:not(.form-control-error):not(.form-control-error-filled):not(.form-control-error-focused):not(.form-control-disabled):not(.form-control-readonly) {
  border: 2px solid var(--antumo-color-focus);
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
}
.form-control:focus-within:not(.form-control-error):not(.form-control-error-filled):not(.form-control-error-focused):not(.form-control-disabled):not(.form-control-readonly).form-control-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
}
.form-control:focus-within:not(.form-control-error):not(.form-control-error-filled):not(.form-control-error-focused):not(.form-control-disabled):not(.form-control-readonly).form-control-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
}
.form-control-error:focus, .form-control-error-filled:focus, .form-control-error:focus-within, .form-control-error-filled:focus-within {
  border: 2px solid var(--antumo-border-error);
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-error:focus.form-control-lg, .form-control-error-filled:focus.form-control-lg, .form-control-error:focus-within.form-control-lg, .form-control-error-filled:focus-within.form-control-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
}
.form-control-error:focus.form-control-xl, .form-control-error-filled:focus.form-control-xl, .form-control-error:focus-within.form-control-xl, .form-control-error-filled:focus-within.form-control-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
}
.form-control::selection {
  background: var(--antumo-alpha-focus-20);
}

textarea.form-control {
  resize: vertical;
  vertical-align: top;
  overflow: auto;
  min-height: 104px;
}

textarea.form-control-xl {
  min-height: 128px;
}

textarea.form-control-disabled,
textarea.form-control-readonly {
  resize: none;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233a3a66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--antumo-spacing-xl) center;
  background-size: 20px 20px;
  padding-right: calc(var(--antumo-spacing-xl) + 20px + var(--antumo-spacing-md));
}
select.form-control::-ms-expand {
  display: none;
}
select.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--antumo-text-primary);
}
select.form-control.form-control-lg {
  padding-right: calc(var(--antumo-spacing-xl) + 20px + var(--antumo-spacing-md));
}
select.form-control.form-control-xl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233a3a66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right var(--antumo-spacing-2xl) center;
  background-size: 24px 24px;
  padding-right: calc(var(--antumo-spacing-2xl) + 24px + var(--antumo-spacing-lg));
}
select.form-control:disabled, select.form-control[disabled], select.form-control.form-control-disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23a4a7ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  cursor: not-allowed;
}
select.form-control.form-control-xl:disabled, select.form-control.form-control-xl[disabled], select.form-control.form-control-xl.form-control-disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a4a7ae' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
/**
 * Checkbox Component — Bootstrap 5 compatible
 * @antumo/design-web
 *
 * Production markup (BS5):
 *   <div class="form-check">
 *     <input class="form-check-input" type="checkbox" id="myCheck">
 *     <label class="form-check-label" for="myCheck">Label</label>
 *   </div>
 *
 * Without label (tables, etc.):
 *   <input class="form-check-input" type="checkbox" aria-label="Select row">
 *
 * Size modifiers on wrapper: .form-check-sm, .form-check-lg (default = md, 20px)
 * Error state: .is-invalid on input (or aria-invalid="true")
 * Indeterminate: set via JS — el.indeterminate = true
 *
 * Sizes: sm (16px), md (20px), lg (24px)
 * States: default, hover, focused, error, disabled × unchecked/checked/indeterminate
 */
.form-check-input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-check-input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-xs);
  background-color: var(--antumo-bg-primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.form-check-input[type=checkbox]:checked {
  background-color: var(--antumo-navy-500);
  border-color: var(--antumo-navy-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--antumo-navy-500);
  border-color: var(--antumo-navy-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.form-check-input[type=checkbox]:hover:not(:disabled):not(:checked):not(:indeterminate) {
  background-color: var(--antumo-bg-secondary);
}
.form-check-input[type=checkbox]:checked:hover:not(:disabled), .form-check-input[type=checkbox]:indeterminate:hover:not(:disabled) {
  background-color: var(--antumo-navy-600);
  border-color: var(--antumo-navy-600);
}
.form-check-input[type=checkbox]:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring);
}
.form-check-input[type=checkbox]:disabled {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-primary);
  cursor: not-allowed;
}
.form-check-input[type=checkbox]:disabled:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5d7da' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.form-check-input[type=checkbox]:disabled:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5d7da' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.form-check-input[type=checkbox].is-invalid, .form-check-input[type=checkbox][aria-invalid=true] {
  border-color: var(--antumo-border-error);
}
.form-check-input[type=checkbox].is-invalid:checked, .form-check-input[type=checkbox].is-invalid:indeterminate, .form-check-input[type=checkbox][aria-invalid=true]:checked, .form-check-input[type=checkbox][aria-invalid=true]:indeterminate {
  border-color: var(--antumo-border-error);
}

.form-switch .form-check-input[type=checkbox] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

.form-check:has(> .form-check-input[type=checkbox]) {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  width: auto;
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
}
.form-check:has(> .form-check-input[type=checkbox]):has(.form-check-input:disabled) {
  cursor: not-allowed;
  color: var(--antumo-text-disabled);
}

.form-check-sm > .form-check-input[type=checkbox],
.form-check-input[type=checkbox].form-check-input-sm {
  width: 16px;
  height: 16px;
  border-radius: var(--antumo-radius-xs);
  background-size: 10px;
}

.form-check-lg > .form-check-input[type=checkbox],
.form-check-input[type=checkbox].form-check-input-lg {
  width: 24px;
  height: 24px;
  border-radius: var(--antumo-radius-sm);
  background-size: 18px;
}

.form-check:not(.form-switch) > .form-check-label {
  font-family: var(--antumo-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--antumo-text-primary);
  cursor: pointer;
  user-select: none;
}

.form-check:has(.form-check-input:disabled) > .form-check-label {
  cursor: not-allowed;
  color: var(--antumo-text-disabled);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-md);
  margin-top: var(--antumo-spacing-lg);
}

.form-check:not(:has(> .form-check-input)) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--antumo-bg-primary);
  border-color: var(--antumo-border-primary);
}
.form-check:not(:has(> .form-check-input)):hover:not(.form-check-disabled):not(.form-check-checked):not(.form-check-indeterminate) {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-primary);
}
.form-check:not(:has(> .form-check-input)):focus-visible {
  box-shadow: var(--antumo-focus-ring);
}

.form-check-sm {
  width: 16px;
  height: 16px;
  border-radius: var(--antumo-radius-xs);
}
.form-check-sm .checkbox-icon {
  width: 12px;
  height: 12px;
}

.form-check-md {
  width: 20px;
  height: 20px;
  border-radius: var(--antumo-radius-xs);
}
.form-check-md .checkbox-icon {
  width: 16px;
  height: 16px;
}

.form-check-lg {
  width: 24px;
  height: 24px;
  border-radius: var(--antumo-radius-sm);
}
.form-check-lg .checkbox-icon {
  width: 20px;
  height: 20px;
}

.form-check .checkbox-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: var(--antumo-color-white);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-check-checked {
  background-color: var(--antumo-navy-500);
  border-color: var(--antumo-navy-500);
  padding: var(--antumo-spacing-xxs);
}
.form-check-checked .checkbox-icon {
  opacity: 1;
  color: var(--antumo-color-white);
}
.form-check-checked:hover:not(.form-check-disabled) {
  background-color: var(--antumo-navy-600);
  border-color: var(--antumo-navy-600);
}

.form-check-indeterminate {
  background-color: var(--antumo-navy-500);
  border-color: var(--antumo-navy-500);
  padding: var(--antumo-spacing-xxs);
}
.form-check-indeterminate .checkbox-icon {
  opacity: 1;
  color: var(--antumo-color-white);
}
.form-check-indeterminate:hover:not(.form-check-disabled) {
  background-color: var(--antumo-navy-600);
  border-color: var(--antumo-navy-600);
}

.form-check-error {
  border-color: var(--antumo-border-error);
}
.form-check-error.form-check-checked, .form-check-error.form-check-indeterminate {
  border-color: var(--antumo-border-error);
}

.form-check-disabled {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-primary);
  cursor: not-allowed;
}
.form-check-disabled.form-check-checked, .form-check-disabled.form-check-indeterminate {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-primary);
}
.form-check-disabled.form-check-checked .checkbox-icon, .form-check-disabled.form-check-indeterminate .checkbox-icon {
  color: var(--antumo-border-primary);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  cursor: pointer;
  user-select: none;
}
.checkbox-field:has(.form-check-disabled), .checkbox-field:has(.form-check-input:disabled) {
  cursor: not-allowed;
  color: var(--antumo-text-disabled);
}

@media (prefers-reduced-motion: reduce) {
  .form-check-input[type=checkbox],
  .form-check,
  .form-check .checkbox-icon {
    transition: none;
  }
}
/**
 * Radio Button Component
 * @antumo/design-web
 *
 * Sizes: sm (16px), md (20px), lg (24px) — always circular
 * States: default, hover, focused, error, disabled × unselected/selected
 *
 * Architecture (Figma):
 *   - Unselected: white bg, 1px gray-300 border
 *   - Selected: navy-500 bg, navy-500 border (invisible), white inner dot
 *   - Hover (unselected): bg-secondary (#FAFAFA), same gray border
 *   - Hover (selected): no visual change vs default selected
 *   - Focused: + focus ring (both selected/unselected)
 *   - Error (unselected): white bg, red border
 *   - Error (selected): navy bg + red border + white dot
 *   - Disabled (unselected): bg-secondary, gray-300 border
 *   - Disabled (selected): bg-secondary, gray-300 border, gray-300 inner dot
 *
 * All .form-check styles are scoped under .radio-field to avoid
 * conflicting with checkbox's .form-check base styles.
 */
.radio-field .form-check {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  background-color: var(--antumo-bg-primary);
  border-color: var(--antumo-border-primary);
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

.radio-field .form-check-sm .radio-inner {
  width: 8px;
  height: 8px;
}

.radio-field .form-check-md .radio-inner {
  width: 10px;
  height: 10px;
}

.radio-field .form-check-lg .radio-inner {
  width: 12px;
  height: 12px;
}

.radio-field .form-check .radio-inner {
  position: absolute;
  border-radius: 50%;
  background-color: var(--antumo-color-white);
  opacity: 0;
  transform: scale(0);
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, background-color 200ms ease-in-out;
}

.radio-field .form-check:hover:not(.form-check-disabled):not(.form-check-checked) {
  background-color: var(--antumo-bg-secondary);
}

.radio-field .form-check-input:not(:checked):not(:disabled):hover + .form-check:not(.form-check-checked) {
  background-color: var(--antumo-bg-secondary);
}

.radio-field .form-check-checked,
.radio-field .form-check-input:checked + .form-check {
  background-color: var(--antumo-navy-500);
  border-color: var(--antumo-navy-500);
}
.radio-field .form-check-checked .radio-inner,
.radio-field .form-check-input:checked + .form-check .radio-inner {
  opacity: 1;
  transform: scale(1);
  background-color: var(--antumo-color-white);
}

.radio-field .form-check:focus-visible,
.radio-field .form-check-input:focus-visible + .form-check {
  box-shadow: var(--antumo-focus-ring);
}

.radio-field .form-check-error {
  border-color: var(--antumo-border-error);
}
.radio-field .form-check-error:hover:not(.form-check-disabled) {
  border-color: var(--antumo-border-error);
}

.radio-field .form-check-error.form-check-checked {
  border-color: var(--antumo-border-error);
}

.radio-field .form-check-input[aria-invalid=true] + .form-check {
  border-color: var(--antumo-border-error);
}

.radio-field .form-check-disabled,
.radio-field .form-check-input:disabled + .form-check {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-primary);
  cursor: not-allowed;
}

.radio-field .form-check-disabled.form-check-checked,
.radio-field .form-check-input:disabled:checked + .form-check {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-primary);
}
.radio-field .form-check-disabled.form-check-checked .radio-inner,
.radio-field .form-check-input:disabled:checked + .form-check .radio-inner {
  background-color: var(--antumo-gray-300);
}

.radio-field {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  cursor: pointer;
  user-select: none;
}
.radio-field:has(.form-check-disabled), .radio-field:has(.form-check-input:disabled) {
  cursor: not-allowed;
  color: var(--antumo-text-disabled);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
}
.radio-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--antumo-spacing-6xl);
}

@media (prefers-reduced-motion: reduce) {
  .radio-field .form-check,
  .radio-field .form-check .radio-inner {
    transition: none;
  }
}
.form-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.form-switch .toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--antumo-radius-full);
  background-color: var(--antumo-gray-100);
  transition: background-color 200ms ease-in-out;
  padding: var(--antumo-spacing-xxs);
}
.form-switch .toggle-handle {
  display: block;
  background-color: var(--antumo-color-white);
  border-radius: 50%;
  box-shadow: var(--antumo-shadow-sm);
  transition: transform 200ms ease-in-out;
  flex-shrink: 0;
}
.form-switch-sm {
  gap: var(--antumo-spacing-xl);
}
.form-switch-sm .toggle-track {
  width: 36px;
  height: 20px;
}
.form-switch-sm .toggle-handle {
  width: 16px;
  height: 16px;
  transform: translateX(0);
}
.form-switch-sm.form-switch-checked .toggle-handle,
.form-switch-sm .form-check-input:checked ~ .toggle-track .toggle-handle {
  transform: translateX(16px);
}
.form-switch-md {
  gap: var(--antumo-spacing-xl);
}
.form-switch-md .toggle-track {
  width: 44px;
  height: 24px;
}
.form-switch-md .toggle-handle {
  width: 20px;
  height: 20px;
  transform: translateX(0);
}
.form-switch-md.form-switch-checked .toggle-handle,
.form-switch-md .form-check-input:checked ~ .toggle-track .toggle-handle {
  transform: translateX(20px);
}
.form-switch-checked .toggle-track,
.form-switch .form-check-input:checked ~ .toggle-track {
  background-color: var(--antumo-navy-500);
}
.form-switch-checked:hover:not(.form-switch-disabled) .toggle-track, .form-switch:hover:not(.form-switch-disabled) .form-check-input:checked ~ .toggle-track {
  background-color: var(--antumo-navy-600);
}
.form-switch:focus-visible .toggle-track, .form-switch.is-focused .toggle-track,
.form-switch .form-check-input:focus-visible ~ .toggle-track {
  box-shadow: var(--antumo-focus-ring);
}
.form-switch:focus:not(:focus-visible) .toggle-track {
  box-shadow: none;
}
.form-switch-disabled, .form-switch:has(.form-check-input:disabled) {
  cursor: not-allowed;
}
.form-switch-disabled .toggle-track, .form-switch:has(.form-check-input:disabled) .toggle-track {
  background-color: var(--antumo-gray-100);
}
.form-switch-disabled .toggle-handle, .form-switch:has(.form-check-input:disabled) .toggle-handle {
  background-color: var(--antumo-gray-50);
}
.form-switch-disabled.form-switch-checked .toggle-track, .form-switch:has(.form-check-input:disabled).form-switch-checked .toggle-track {
  background-color: var(--antumo-gray-100);
}
.form-switch .form-check-input:disabled ~ .toggle-track {
  background-color: var(--antumo-gray-100);
  cursor: not-allowed;
}
.form-switch .form-check-input:disabled ~ .toggle-track .toggle-handle {
  background-color: var(--antumo-gray-50);
}
.form-switch .form-check-input:disabled:checked ~ .toggle-track {
  background-color: var(--antumo-gray-100);
}
.form-switch .form-check-label {
  color: var(--antumo-fg-secondary);
  font-family: var(--antumo-font-body);
  cursor: pointer;
}
.form-switch-sm .form-check-label {
  font-size: var(--antumo-font-size-sm);
  line-height: 1.43;
}
.form-switch-md .form-check-label {
  font-size: var(--antumo-font-size-md);
  line-height: 1.5;
}
.form-switch-disabled .form-check-label, .form-switch:has(.form-check-input:disabled) .form-check-label {
  color: var(--antumo-gray-500);
  cursor: not-allowed;
}

.toggle-supporting-text {
  color: var(--antumo-fg-tertiary);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: 1.43;
}

.form-switch-disabled ~ .toggle-supporting-text,
.toggle-wrapper.is-disabled .toggle-supporting-text {
  color: var(--antumo-gray-500);
}

.toggle-wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
}

@media (prefers-reduced-motion: reduce) {
  .form-switch .toggle-track,
  .form-switch .toggle-handle {
    transition: none;
  }
}
.antumo-select {
  position: relative;
  display: block;
  width: 100%;
}

.form-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  letter-spacing: 0;
  text-align: left;
  color: var(--antumo-text-quaternary);
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-primary);
  box-shadow: var(--antumo-shadow-xs);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233a3a66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--antumo-spacing-xl) center;
  background-size: 20px 20px;
}
.form-select, .form-select-md {
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  padding-right: calc(var(--antumo-spacing-xl) + 20px + var(--antumo-spacing-md));
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  border-radius: var(--antumo-radius-md);
}
.form-select-lg {
  padding: var(--antumo-spacing-xl);
  padding-right: calc(var(--antumo-spacing-xl) + 20px + var(--antumo-spacing-md));
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  border-radius: var(--antumo-radius-md);
}
.form-select-xl {
  padding: var(--antumo-spacing-2xl);
  padding-right: calc(var(--antumo-spacing-2xl) + 24px + var(--antumo-spacing-lg));
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
  border-radius: var(--antumo-radius-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233a3a66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right var(--antumo-spacing-2xl) center;
  background-size: 24px 24px;
}
.form-select-hover {
  border-color: var(--antumo-border-brand);
}
.form-select-focused {
  border: 2px solid var(--antumo-border-brand);
  box-shadow: var(--antumo-shadow-xs);
}
.form-select-focused.form-select-md, .form-select-focused:not(.form-select-lg):not(.form-select-xl) {
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select-focused.form-select-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select-focused.form-select-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
  padding-right: calc(var(--antumo-spacing-2xl) - 1px + 24px + var(--antumo-spacing-lg));
}
.form-select-active {
  border: 2px solid var(--antumo-border-brand);
  box-shadow: var(--antumo-shadow-xs);
  color: var(--antumo-text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233a3a66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 7.5 15 12.5'/%3E%3C/svg%3E");
}
.form-select-active.form-select-md, .form-select-active:not(.form-select-lg):not(.form-select-xl) {
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select-active.form-select-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select-active.form-select-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
  padding-right: calc(var(--antumo-spacing-2xl) - 1px + 24px + var(--antumo-spacing-lg));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233a3a66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E");
}
.form-select-selected {
  color: var(--antumo-text-primary);
}
.form-select-error {
  border-color: var(--antumo-border-error);
}
.form-select-disabled, .form-select:disabled {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-secondary);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--antumo-text-quaternary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23a4a7ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
}
.form-select-disabled.form-select-xl, .form-select:disabled.form-select-xl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a4a7ae' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.form-select:hover:not(.form-select-disabled):not(.form-select:disabled):not(.form-select-focused):not(.form-select-active):not(.form-select-error) {
  border-color: var(--antumo-border-brand);
}
.form-select:focus:not(.form-select-disabled):not(.form-select:disabled):not(.form-select-error) {
  border: 2px solid var(--antumo-border-brand);
  box-shadow: var(--antumo-shadow-xs);
}
.form-select:focus:not(.form-select-disabled):not(.form-select:disabled):not(.form-select-error):not(.form-select-lg):not(.form-select-xl) {
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select:focus:not(.form-select-disabled):not(.form-select:disabled):not(.form-select-error).form-select-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select:focus:not(.form-select-disabled):not(.form-select:disabled):not(.form-select-error).form-select-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
  padding-right: calc(var(--antumo-spacing-2xl) - 1px + 24px + var(--antumo-spacing-lg));
}
.form-select-error:focus, .form-select-error:focus-within {
  border: 2px solid var(--antumo-border-error);
  box-shadow: var(--antumo-shadow-xs);
}
.form-select-error:focus:not(.form-select-lg):not(.form-select-xl), .form-select-error:focus-within:not(.form-select-lg):not(.form-select-xl) {
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select-error:focus.form-select-lg, .form-select-error:focus-within.form-select-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select-error:focus.form-select-xl, .form-select-error:focus-within.form-select-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
  padding-right: calc(var(--antumo-spacing-2xl) - 1px + 24px + var(--antumo-spacing-lg));
}
.form-select:invalid:not(:focus) {
  border-color: var(--antumo-border-error);
}
.form-select[disabled] {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-secondary);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--antumo-text-quaternary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23a4a7ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
}
.form-select[disabled].form-select-xl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a4a7ae' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.form-select.is-hovered {
  border-color: var(--antumo-border-brand);
}
.form-select.is-focused {
  border: 2px solid var(--antumo-border-brand);
  box-shadow: var(--antumo-shadow-xs);
}
.form-select.is-focused:not(.form-select-lg):not(.form-select-xl) {
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select.is-focused.form-select-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select.is-focused.form-select-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
  padding-right: calc(var(--antumo-spacing-2xl) - 1px + 24px + var(--antumo-spacing-lg));
}
.form-select.is-active {
  border: 2px solid var(--antumo-border-brand);
  box-shadow: var(--antumo-shadow-xs);
  color: var(--antumo-text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233a3a66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 7.5 15 12.5'/%3E%3C/svg%3E");
}
.form-select.is-active:not(.form-select-lg):not(.form-select-xl) {
  padding: calc(var(--antumo-spacing-md) - 1px) calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select.is-active.form-select-lg {
  padding: calc(var(--antumo-spacing-xl) - 1px);
  padding-right: calc(var(--antumo-spacing-xl) - 1px + 20px + var(--antumo-spacing-md));
}
.form-select.is-active.form-select-xl {
  padding: calc(var(--antumo-spacing-2xl) - 1px);
  padding-right: calc(var(--antumo-spacing-2xl) - 1px + 24px + var(--antumo-spacing-lg));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233a3a66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
/**
 * Dropdown Component
 * @antumo/design-web
 *
 * Sizes: md, xl
 * Variants: text, radioButton, checkbox, flag, icon, divider, header
 * States: default, hover, active, disabled
 *
 * Three-tier architecture:
 *   .dropdown (wrapper)
 *     └─ .dropdown-item (entry)
 *         └─ .dropdown-item-content (bg area)
 *             └─ .dropdown-item-wrapper (flex row)
 *                 ├─ control / icon (optional)
 *                 └─ .dropdown-item-text
 */
.antumo-select .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  flex-direction: column;
  width: 100%;
  max-height: 282px;
  margin-top: var(--antumo-spacing-xs);
  padding: var(--antumo-spacing-xs) 0;
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-md);
  box-shadow: var(--antumo-shadow-lg);
  overflow-y: auto;
  box-sizing: border-box;
}
.antumo-select .dropdown.show {
  display: inline-flex;
}

.nav-profile-popover {
  flex-direction: column;
  max-height: 282px;
  padding: var(--antumo-spacing-xs) 0;
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-md);
  box-shadow: var(--antumo-shadow-lg);
  overflow-y: auto;
  box-sizing: border-box;
}

.antumo-select .dropdown-item,
.nav-profile-popover .dropdown-item {
  display: flex;
  flex-direction: column;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-sm);
  min-width: 160px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.antumo-select .dropdown-item-default .dropdown-item-content,
.nav-profile-popover .dropdown-item-default .dropdown-item-content {
  background-color: transparent;
}
.antumo-select .dropdown-item-default .dropdown-item-text,
.nav-profile-popover .dropdown-item-default .dropdown-item-text {
  color: var(--antumo-gray-700);
}
.antumo-select .dropdown-item-hover .dropdown-item-content,
.nav-profile-popover .dropdown-item-hover .dropdown-item-content {
  background-color: var(--antumo-gray-50);
}
.antumo-select .dropdown-item-hover .dropdown-item-text,
.nav-profile-popover .dropdown-item-hover .dropdown-item-text {
  color: var(--antumo-gray-700);
}
.antumo-select .dropdown-item.active .dropdown-item-content,
.nav-profile-popover .dropdown-item.active .dropdown-item-content {
  background-color: var(--antumo-gray-50);
}
.antumo-select .dropdown-item.active .dropdown-item-text,
.nav-profile-popover .dropdown-item.active .dropdown-item-text {
  color: var(--antumo-gray-700);
}
.antumo-select .dropdown-item.disabled,
.nav-profile-popover .dropdown-item.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.antumo-select .dropdown-item.disabled .dropdown-item-content,
.nav-profile-popover .dropdown-item.disabled .dropdown-item-content {
  background-color: transparent;
}
.antumo-select .dropdown-item.disabled .dropdown-item-text,
.nav-profile-popover .dropdown-item.disabled .dropdown-item-text {
  color: var(--antumo-gray-500);
}
.antumo-select .dropdown-item.disabled .dropdown-checkbox,
.antumo-select .dropdown-item.disabled .dropdown-radio,
.nav-profile-popover .dropdown-item.disabled .dropdown-checkbox,
.nav-profile-popover .dropdown-item.disabled .dropdown-radio {
  border-color: var(--antumo-border-primary);
  background-color: var(--antumo-gray-50);
}
.antumo-select .dropdown-item:hover:not(.antumo-select .dropdown-item.disabled,
.nav-profile-popover .dropdown-item.disabled):not(.antumo-select .dropdown-item-divider,
.nav-profile-popover .dropdown-item-divider):not(.antumo-select .dropdown-item-header,
.nav-profile-popover .dropdown-item-header) .dropdown-item-content,
.nav-profile-popover .dropdown-item:hover:not(.antumo-select .dropdown-item.disabled,
.nav-profile-popover .dropdown-item.disabled):not(.antumo-select .dropdown-item-divider,
.nav-profile-popover .dropdown-item-divider):not(.antumo-select .dropdown-item-header,
.nav-profile-popover .dropdown-item-header) .dropdown-item-content {
  background-color: var(--antumo-gray-50);
}
.antumo-select .dropdown-item:focus-visible,
.nav-profile-popover .dropdown-item:focus-visible {
  outline: 2px solid var(--antumo-gray-700);
  outline-offset: -2px;
  border-radius: var(--antumo-radius-sm);
}
.antumo-select .dropdown-item-header,
.nav-profile-popover .dropdown-item-header {
  padding: var(--antumo-spacing-3xl) var(--antumo-spacing-sm) var(--antumo-spacing-sm);
  cursor: default;
  pointer-events: none;
}
.antumo-select .dropdown-item-header .dropdown-item-text,
.nav-profile-popover .dropdown-item-header .dropdown-item-text {
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  color: var(--antumo-gray-900);
}
.antumo-select .dropdown-item-divider,
.nav-profile-popover .dropdown-item-divider {
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-sm);
  cursor: default;
  pointer-events: none;
}

.antumo-select .dropdown-item-content,
.nav-profile-popover .dropdown-item-content {
  display: flex;
  flex-direction: column;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-lg);
  border-radius: var(--antumo-radius-sm);
  width: 100%;
  box-sizing: border-box;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.antumo-select .dropdown-item-wrapper,
.nav-profile-popover .dropdown-item-wrapper {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  width: 100%;
}

.antumo-select .dropdown-item-text,
.nav-profile-popover .dropdown-item-text {
  flex: 1 0 0;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  letter-spacing: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.antumo-select .dropdown-checkbox {
  flex-shrink: 0;
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-xs);
  background-color: var(--antumo-bg-primary);
  box-sizing: border-box;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.antumo-select .dropdown-radio {
  flex-shrink: 0;
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-full);
  background-color: var(--antumo-bg-primary);
  box-sizing: border-box;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.antumo-select .dropdown-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.antumo-select .dropdown-icon img,
.antumo-select .dropdown-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.antumo-select .dropdown-flag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.antumo-select .dropdown-flag img,
.antumo-select .dropdown-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.antumo-select .dropdown-divider {
  width: 100%;
  height: 1px;
  background-color: var(--antumo-border-primary);
  border: none;
  margin: 0;
}

.antumo-select .dropdown-md .dropdown-item-text {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.antumo-select .dropdown-md .dropdown-item-header .dropdown-item-text {
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  letter-spacing: -0.12px;
}
.antumo-select .dropdown-md .dropdown-icon {
  width: 20px;
  height: 20px;
}
.antumo-select .dropdown-md .dropdown-flag {
  width: 20px;
  height: 20px;
}
.antumo-select .dropdown-md .dropdown-checkbox {
  width: 16px;
  height: 16px;
}
.antumo-select .dropdown-md .dropdown-radio {
  width: 16px;
  height: 16px;
}

.antumo-select .dropdown-xl .dropdown-item-text {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.antumo-select .dropdown-xl .dropdown-item-header .dropdown-item-text {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
}
.antumo-select .dropdown-xl .dropdown-icon {
  width: 24px;
  height: 24px;
}
.antumo-select .dropdown-xl .dropdown-flag {
  width: 20px;
  height: 20px;
}
.antumo-select .dropdown-xl .dropdown-checkbox {
  width: 20px;
  height: 20px;
}
.antumo-select .dropdown-xl .dropdown-radio {
  width: 20px;
  height: 20px;
}

.dropdown-menu {
  display: none;
  flex-direction: column;
  min-width: 180px;
  padding: var(--antumo-spacing-xs) 0;
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-md);
  box-shadow: var(--antumo-shadow-lg);
  list-style: none;
  margin: var(--antumo-spacing-xs) 0 0;
  z-index: 1050;
  box-sizing: border-box;
  overflow: hidden;
}
.dropdown-menu.show, .dropdown-menu.open {
  display: flex;
}
.dropdown-menu > li {
  list-style: none;
}
.dropdown-menu .dropdown-item,
.dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  width: 100%;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: none;
  box-sizing: border-box;
  transition: background-color 150ms ease, color 150ms ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu > li > a:hover {
  background-color: var(--antumo-bg-tertiary);
  color: var(--antumo-text-primary);
  text-decoration: none;
}
.dropdown-menu .dropdown-item:focus-visible,
.dropdown-menu > li > a:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: -2px;
  border-radius: var(--antumo-radius-xs);
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active,
.dropdown-menu > li > a.active,
.dropdown-menu > li > a:active {
  background-color: var(--antumo-bg-secondary);
  color: var(--antumo-text-primary);
}
.dropdown-menu .dropdown-item.disabled, .dropdown-menu .dropdown-item:disabled,
.dropdown-menu > li > a.disabled,
.dropdown-menu > li > a:disabled {
  color: var(--antumo-text-quaternary);
  pointer-events: none;
  cursor: not-allowed;
}
.dropdown-menu .dropdown-item svg,
.dropdown-menu > li > a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.dropdown-menu li.dropdown-item > a {
  color: inherit;
  text-decoration: none;
  padding: 0;
  display: contents;
}
.dropdown-menu .dropdown-divider {
  height: 1px;
  margin: var(--antumo-spacing-xs) 0;
  background-color: var(--antumo-border-secondary);
  border: none;
}
.dropdown-menu .dropdown-header {
  display: block;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-xs);
  color: var(--antumo-text-quaternary);
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-item,
  .dropdown-item-content,
  .dropdown-item-text,
  .dropdown-checkbox,
  .dropdown-radio {
    transition: none;
  }
  .dropdown-menu .dropdown-item,
  .dropdown-menu > li > a {
    transition: none;
  }
}
.nav {
  display: flex;
  padding: 0;
  margin: 0;
  background: transparent;
  list-style: none;
}
.nav-horizontal {
  flex-direction: row;
}
.nav-vertical {
  flex-direction: column;
}
.nav-horizontal.nav-tabs {
  border-bottom: 1px solid var(--antumo-gray-200);
}
.nav-vertical.nav-tabs {
  border-right: 1px solid var(--antumo-gray-200);
}
.nav-horizontal.nav-pills, .nav-vertical.nav-pills {
  background: var(--antumo-gray-50);
  border: 1px solid var(--antumo-gray-200);
  border-radius: var(--antumo-radius-md);
}
.nav-vertical.nav-pills {
  border-right: none;
}

.tab-group-flush {
  border: none;
}

.tab-group-centered {
  justify-content: center;
}

.tab-group-end {
  justify-content: flex-end;
}

.tab-group-full-width .nav-link {
  flex: 1;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
}
.nav-link-underline.nav-link-md {
  padding: 0 var(--antumo-spacing-xl) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  gap: var(--antumo-spacing-md);
}
.nav-link-underline.nav-link-lg {
  padding: 0 var(--antumo-spacing-xl) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  gap: var(--antumo-spacing-md);
}
.nav-link-button-minimal.nav-link-md {
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  gap: var(--antumo-spacing-md);
}
.nav-link-button-minimal.nav-link-lg {
  padding: var(--antumo-spacing-lg) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  gap: var(--antumo-spacing-md);
}
.nav-link-underline {
  background: transparent;
  border-radius: var(--antumo-radius-xxs) var(--antumo-radius-xxs) 0 0;
}
.nav-link-underline::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background-color 200ms ease;
}
.nav-link-underline:hover:not(.active):not(.disabled) {
  background: transparent;
  color: var(--antumo-gray-500);
}
.nav-link-underline:hover:not(.active):not(.disabled)::after {
  background: var(--antumo-navy-500);
}
.nav-link-underline.active:hover {
  color: var(--antumo-navy-500);
}
.nav-link-underline.active {
  color: var(--antumo-navy-500);
  font-weight: var(--antumo-font-weight-medium);
}
.nav-link-underline.active::after {
  background: var(--antumo-navy-500);
}
.nav-link-underline:focus-visible, .nav-link-underline.is-focused {
  box-shadow: var(--antumo-focus-ring);
  background: var(--antumo-color-white);
  z-index: 1;
}
.nav-link-underline:focus-visible::after, .nav-link-underline.is-focused::after {
  background: var(--antumo-navy-500);
}
.nav-link-button-minimal {
  border-radius: var(--antumo-radius-md);
  border: 1px solid transparent;
}
.nav-link-button-minimal:hover:not(.active):not(.disabled) {
  color: var(--antumo-gray-700);
  background: transparent;
  border-color: transparent;
}
.nav-link-button-minimal.active:hover {
  color: var(--antumo-gray-700);
}
.nav-link-button-minimal.active {
  color: var(--antumo-gray-700);
  background: var(--antumo-color-white);
  border-color: var(--antumo-gray-300);
  box-shadow: var(--antumo-shadow-xs);
  font-weight: var(--antumo-font-weight-medium);
}
.nav-link-button-minimal:focus-visible:not(.active), .nav-link-button-minimal.is-focused:not(.active) {
  color: var(--antumo-gray-500);
  background: var(--antumo-color-white);
  border-color: transparent;
  box-shadow: var(--antumo-focus-ring);
  z-index: 1;
}
.nav-link-button-minimal.active:focus-visible, .nav-link-button-minimal.active.is-focused {
  box-shadow: var(--antumo-focus-ring-shadow-xs);
  z-index: 1;
}
.nav-link.disabled {
  color: var(--antumo-gray-300);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.nav-link-underline.is-hovered:not(.active):not(.disabled) {
  color: var(--antumo-gray-500);
}
.nav-link-underline.is-hovered:not(.active):not(.disabled)::after {
  background: var(--antumo-navy-500);
}
.nav-link-button-minimal.is-hovered:not(.active):not(.disabled) {
  color: var(--antumo-gray-700);
  background: transparent;
  border-color: transparent;
}
.nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.nav-link-icon svg {
  width: 100%;
  height: 100%;
}
.nav-link-lg .nav-link-icon {
  width: 24px;
  height: 24px;
}
.nav-link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--antumo-spacing-md);
  font-size: var(--antumo-font-size-xs);
  font-weight: var(--antumo-font-weight-medium);
  line-height: 1;
  border-radius: var(--antumo-radius-full);
  margin-left: var(--antumo-spacing-xs);
  background: var(--antumo-gray-50);
  color: var(--antumo-gray-700);
  border: 1px solid var(--antumo-gray-200);
}
.nav-link.active .nav-link-badge {
  background: var(--antumo-navy-50);
  color: var(--antumo-navy-600);
  border-color: var(--antumo-navy-200);
}
.nav-link-lg .nav-link-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--antumo-spacing-lg);
  font-size: var(--antumo-font-size-sm);
}

.tab-panel {
  padding: var(--antumo-spacing-3xl) 0;
  animation: antumo-tab-fadeIn 200ms ease;
}
.tab-panel[hidden] {
  display: none;
}

.tab-content > .tab-pane {
  display: none;
  padding-top: var(--antumo-spacing-3xl);
}
.tab-content > .tab-pane.active {
  display: block;
}

.nav-tabs {
  gap: 0;
  border-bottom: 1px solid var(--antumo-gray-200);
}
.nav-tabs .nav-item {
  list-style: none;
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal) {
  position: relative;
  padding: 0 var(--antumo-spacing-xl) var(--antumo-spacing-xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-gray-500);
  background: transparent;
  border: none;
  border-radius: var(--antumo-radius-xxs) var(--antumo-radius-xxs) 0 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal)::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background-color 200ms ease;
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal):hover:not(.active) {
  color: var(--antumo-gray-500);
  background: transparent;
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal):hover:not(.active)::after {
  background: var(--antumo-navy-500);
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal).active {
  color: var(--antumo-navy-500);
  background: transparent;
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal).active::after {
  background: var(--antumo-navy-500);
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal):focus-visible {
  box-shadow: var(--antumo-focus-ring);
  z-index: 1;
}
.nav-tabs .nav-link:not(.nav-link-underline):not(.nav-link-button-minimal):focus-visible::after {
  background: var(--antumo-navy-500);
}

@keyframes antumo-tab-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-link::after,
  .tab-panel {
    transition: none;
    animation: none;
  }
}
/**
 * Badge Component
 * @antumo/design-web
 *
 * Sizes: md (24px), lg (28px)
 * Colors: gray, navy, blue, yellow, green, red, violet
 * Semantic: success, error, warning, info, neutral, professional, special
 * Variants: basic (default), dot (with ::before indicator)
 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--antumo-radius-full);
  border: 1px solid;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  height: 24px;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-lg);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.badge-md {
  height: 24px;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-lg);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.badge-lg {
  height: 28px;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}

.badge-gray {
  background-color: var(--antumo-gray-50, #fafafa);
  border-color: var(--antumo-gray-200, #e9eaeb);
  color: var(--antumo-gray-700, #414651);
}

.badge-navy {
  background-color: var(--antumo-navy-50, #f6f7fa);
  border-color: var(--antumo-navy-200, #c7cad9);
  color: var(--antumo-navy-600, #32355a);
}

.badge-blue {
  background-color: var(--antumo-blue-50, #f5faff);
  border-color: var(--antumo-blue-200, #cfe3f6);
  color: var(--antumo-blue-800, #3e5f85);
}

.badge-yellow {
  background-color: var(--antumo-yellow-50, #fff9e8);
  border-color: var(--antumo-yellow-200, #ffe7a8);
  color: var(--antumo-yellow-800, #7f6118);
}

.badge-green {
  background-color: var(--antumo-green-50, #ecf8f2);
  border-color: var(--antumo-green-200, #b3e3cf);
  color: var(--antumo-green-700, #1f6f4d);
}

.badge-red {
  background-color: var(--antumo-red-50, #fdecec);
  border-color: var(--antumo-red-200, #f4b3b3);
  color: var(--antumo-red-700, #923434);
}

.badge-violet {
  background-color: var(--antumo-violet-50, #f5f3fc);
  border-color: var(--antumo-violet-200, #cec6f0);
  color: var(--antumo-violet-700, #5e5497);
}

.badge-success {
  background-color: var(--antumo-green-50, #ecf8f2);
  border-color: var(--antumo-green-200, #b3e3cf);
  color: var(--antumo-green-700, #1f6f4d);
}

.badge-error {
  background-color: var(--antumo-red-50, #fdecec);
  border-color: var(--antumo-red-200, #f4b3b3);
  color: var(--antumo-red-700, #923434);
}

.badge-warning {
  background-color: var(--antumo-yellow-50, #fff9e8);
  border-color: var(--antumo-yellow-200, #ffe7a8);
  color: var(--antumo-yellow-800, #7f6118);
}

.badge-info {
  background-color: var(--antumo-blue-50, #f5faff);
  border-color: var(--antumo-blue-200, #cfe3f6);
  color: var(--antumo-blue-800, #3e5f85);
}

.badge-neutral {
  background-color: var(--antumo-gray-50, #fafafa);
  border-color: var(--antumo-gray-200, #e9eaeb);
  color: var(--antumo-gray-700, #414651);
}

.badge-professional {
  background-color: var(--antumo-navy-50, #f6f7fa);
  border-color: var(--antumo-navy-200, #c7cad9);
  color: var(--antumo-navy-600, #32355a);
}

.badge-special {
  background-color: var(--antumo-violet-50, #f5f3fc);
  border-color: var(--antumo-violet-200, #cec6f0);
  color: var(--antumo-violet-700, #5e5497);
}

.badge-dot {
  border: none;
  background: transparent;
  position: relative;
  color: var(--antumo-gray-700, #414651);
}
.badge-dot::before {
  content: "";
  flex-shrink: 0;
  border-radius: 50%;
}

.badge-dot.badge-md {
  padding-left: var(--antumo-spacing-md);
  gap: var(--antumo-spacing-sm);
}
.badge-dot.badge-md::before {
  width: 6px;
  height: 6px;
}

.badge-dot.badge-lg {
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-lg);
  gap: var(--antumo-spacing-sm);
}
.badge-dot.badge-lg::before {
  width: 8px;
  height: 8px;
}

.badge-dot.badge-gray::before {
  background-color: var(--antumo-gray-500, #717680);
}

.badge-dot.badge-navy::before {
  background-color: var(--antumo-navy-500, #3a3a66);
}

.badge-dot.badge-blue::before {
  background-color: var(--antumo-blue-500, #7faedd);
}

.badge-dot.badge-yellow::before {
  background-color: var(--antumo-yellow-500, #f1c846);
}

.badge-dot.badge-green::before {
  background-color: var(--antumo-green-500, #2fa46f);
}

.badge-dot.badge-red::before {
  background-color: var(--antumo-red-500, #d14c4c);
}

.badge-dot.badge-violet::before {
  background-color: var(--antumo-violet-500, #8b7fd1);
}

.badge-dot.badge-success::before {
  background-color: var(--antumo-green-500, #2fa46f);
}

.badge-dot.badge-error::before {
  background-color: var(--antumo-red-500, #d14c4c);
}

.badge-dot.badge-warning::before {
  background-color: var(--antumo-yellow-500, #f1c846);
}

.badge-dot.badge-info::before {
  background-color: var(--antumo-blue-500, #7faedd);
}

.badge-dot.badge-neutral::before {
  background-color: var(--antumo-gray-500, #717680);
}

.badge-dot.badge-professional::before {
  background-color: var(--antumo-navy-500, #3a3a66);
}

.badge-dot.badge-special::before {
  background-color: var(--antumo-violet-500, #8b7fd1);
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--antumo-radius-full);
  box-sizing: border-box;
  flex-shrink: 0;
}
.avatar-xs {
  width: 24px;
  height: 24px;
}
.avatar-xs svg {
  width: 16px;
  height: 16px;
}
.avatar-xs .avatar-online-indicator {
  width: 6px;
  height: 6px;
}
.avatar-sm {
  width: var(--antumo-size-xs);
  height: var(--antumo-size-xs);
}
.avatar-sm svg {
  width: 20px;
  height: 20px;
}
.avatar-sm .avatar-online-indicator {
  width: 8px;
  height: 8px;
}
.avatar-image {
  background: transparent;
}
.avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--antumo-radius-full);
}
.avatar-icon {
  background-color: var(--antumo-navy-50);
  border: 1px solid var(--antumo-navy-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--antumo-navy-400);
}
.avatar-icon svg {
  fill: currentColor;
}
.avatar-online-indicator {
  position: absolute;
  bottom: 0px;
  right: 0px;
  border: 1.5px solid var(--antumo-bg-primary);
  border-radius: var(--antumo-radius-full);
}
.avatar-online-indicator-active {
  background-color: var(--antumo-green-600);
}
.avatar-online-indicator-default {
  background-color: var(--antumo-gray-300);
}
.avatar-icon .avatar-online-indicator {
  bottom: -1px;
  right: -1px;
}

.avatar-group {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
}
.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--antumo-bg-primary);
  box-sizing: content-box;
}
.avatar-group .avatar:last-child {
  margin-left: 0;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-first,
.breadcrumb-middle,
.breadcrumb-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-md);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-medium);
  letter-spacing: 0;
  border-radius: var(--antumo-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.breadcrumb-first {
  gap: var(--antumo-spacing-sm);
  color: var(--antumo-gray-600);
  cursor: pointer;
}
.breadcrumb-first:hover, .breadcrumb-first.is-hovered {
  background-color: var(--antumo-bg-tertiary);
  color: var(--antumo-gray-700);
}
.breadcrumb-first:focus-visible, .breadcrumb-first.is-focused {
  background-color: var(--antumo-bg-tertiary);
  color: var(--antumo-gray-700);
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}
.breadcrumb-first:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.breadcrumb-middle {
  gap: var(--antumo-spacing-lg);
  color: var(--antumo-gray-600);
  cursor: pointer;
}
.breadcrumb-middle:hover, .breadcrumb-middle.is-hovered {
  background-color: var(--antumo-bg-tertiary);
  color: var(--antumo-gray-700);
}
.breadcrumb-middle:focus-visible, .breadcrumb-middle.is-focused {
  background-color: var(--antumo-bg-tertiary);
  color: var(--antumo-gray-700);
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}
.breadcrumb-middle:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.breadcrumb-current {
  gap: var(--antumo-spacing-lg);
  color: var(--antumo-navy-500);
  cursor: default;
  pointer-events: none;
}

.breadcrumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--antumo-gray-600);
}
.breadcrumb-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--antumo-gray-600);
}
.breadcrumb-separator svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.breadcrumb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb-first,
  .breadcrumb-middle,
  .breadcrumb-current {
    transition: none;
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--antumo-spacing-lg);
  padding: 0 var(--antumo-spacing-6xl);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--antumo-font-body);
}
.pagination-section {
  display: flex;
  align-items: center;
}
.pagination-section-left {
  display: flex;
  align-items: center;
}
.pagination-section-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pagination-numbers {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
  color: var(--antumo-gray-500);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  user-select: none;
}
.pagination-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  text-align: center;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  color: var(--antumo-gray-500);
  transition: background-color 150ms ease, color 150ms ease;
}
.pagination-button-md {
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.pagination-button-lg {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.pagination-button-xl {
  width: var(--antumo-size-xl);
  height: var(--antumo-size-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.pagination-button:hover:not(.pagination-button-disabled):not(.pagination-button-active) {
  background-color: var(--antumo-gray-50);
}
.pagination-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.pagination-button-active {
  background-color: var(--antumo-gray-50);
  color: var(--antumo-gray-500);
}
.pagination-button-disabled {
  color: var(--antumo-gray-300);
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-button.is-hovered {
  background-color: var(--antumo-gray-50);
}
.pagination-button.is-focused {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.pagination-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-xs);
  padding: var(--antumo-spacing-md);
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
  border: none;
  border-radius: var(--antumo-radius-full);
  background-color: transparent;
  color: var(--antumo-gray-500);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.pagination-nav-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.pagination-nav-btn:hover:not(.pagination-nav-btn-disabled) {
  color: var(--antumo-gray-900);
  background-color: var(--antumo-gray-50);
}
.pagination-nav-btn:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.pagination-nav-btn-disabled {
  color: var(--antumo-gray-300);
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-text-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
  padding: 0;
  border: none;
  border-radius: var(--antumo-radius-xxs);
  background-color: transparent;
  color: var(--antumo-navy-500);
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.pagination-text-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.pagination-text-btn:hover:not(.pagination-text-btn-disabled) {
  opacity: 0.8;
}
.pagination-text-btn:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.pagination-text-btn-disabled {
  color: var(--antumo-gray-400);
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-select {
  width: 80px;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-md);
  background-color: var(--antumo-bg-primary, #fff);
  color: var(--antumo-gray-900);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  box-shadow: var(--antumo-shadow-xs);
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
}
.pagination-select:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.pagination-info {
  display: flex;
  align-items: baseline;
  gap: var(--antumo-spacing-md);
}
.pagination-label {
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-gray-500);
  font-family: var(--antumo-font-body);
}
.pagination-value {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-gray-900);
  font-family: var(--antumo-font-body);
}
.pagination-variant-dropdown .pagination-section-left {
  width: 229px;
  flex-shrink: 0;
}
.pagination-variant-dropdown .pagination-section-right {
  width: 229px;
  flex-shrink: 0;
  gap: var(--antumo-spacing-4xl);
}
.pagination-variant-buttons .pagination-section-left,
.pagination-variant-buttons .pagination-section-right {
  width: 104px;
  flex-shrink: 0;
}
.pagination-variant-buttons .pagination-section-right {
  justify-content: flex-end;
}
.pagination-variant-simple .pagination-section-left {
  width: 128px;
  flex-shrink: 0;
}
.pagination-variant-simple .pagination-section-right {
  width: 128px;
  flex-shrink: 0;
}

.pagination .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pagination-button,
  .pagination-nav-btn,
  .pagination-text-btn {
    transition: none;
  }
}
.tooltip {
  position: absolute;
  z-index: 9999;
  width: max-content;
  max-width: 320px;
  background-color: var(--antumo-gray-950);
  color: var(--antumo-color-white);
  border-radius: var(--antumo-radius-sm);
  box-shadow: var(--antumo-shadow-lg);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: 1.43;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), visibility 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tooltip-simple {
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
}
.tooltip-with-supporting {
  padding: var(--antumo-spacing-xl);
}
.tooltip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tooltip-top {
  transform: translateY(4px);
}
.tooltip-top.show {
  transform: translateY(0);
}
.tooltip-top .tooltip-arrow {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 8px 0;
  border-color: var(--antumo-gray-950) transparent transparent transparent;
}
.tooltip-topLeft {
  transform: translateY(4px);
}
.tooltip-topLeft.show {
  transform: translateY(0);
}
.tooltip-topLeft .tooltip-arrow {
  bottom: -6px;
  left: 12px;
  border-width: 6px 14px 0;
  border-color: var(--antumo-gray-950) transparent transparent transparent;
}
.tooltip-topRight {
  transform: translateY(4px);
}
.tooltip-topRight.show {
  transform: translateY(0);
}
.tooltip-topRight .tooltip-arrow {
  bottom: -6px;
  right: 12px;
  border-width: 6px 14px 0;
  border-color: var(--antumo-gray-950) transparent transparent transparent;
}
.tooltip-bottom {
  transform: translateY(-4px);
}
.tooltip-bottom.show {
  transform: translateY(0);
}
.tooltip-bottom .tooltip-arrow {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 6px;
  border-color: transparent transparent var(--antumo-gray-950) transparent;
}
.tooltip-left {
  transform: translateX(4px);
}
.tooltip-left.show {
  transform: translateX(0);
}
.tooltip-left .tooltip-arrow {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 6px;
  border-color: transparent transparent transparent var(--antumo-gray-950);
}
.tooltip-right {
  transform: translateX(-4px);
}
.tooltip-right.show {
  transform: translateX(0);
}
.tooltip-right .tooltip-arrow {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 6px 8px 0;
  border-color: transparent var(--antumo-gray-950) transparent transparent;
}
.tooltip[aria-hidden=true] {
  display: none;
}
.tooltip-content {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
}
.tooltip-heading {
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: 1.43;
  color: var(--antumo-color-white);
  margin: 0;
}
.tooltip-supporting {
  font-size: var(--antumo-font-size-xs);
  font-weight: var(--antumo-font-weight-regular);
  line-height: 1.33;
  color: var(--antumo-gray-300);
  margin: 0;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: help;
}
.tooltip-trigger:focus {
  outline: none;
}
.tooltip-trigger:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-xxs);
}

.tooltip-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--antumo-gray-400);
  cursor: help;
  user-select: none;
  transition: color 150ms ease;
}
.tooltip-help-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.25px;
  fill: none;
}
.tooltip-help-icon-open {
  color: var(--antumo-gray-500);
}
.tooltip-help-icon:hover, .tooltip-help-icon:focus {
  outline: none;
}
.tooltip-help-icon:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-xxs);
}

.tooltip-portal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip {
    transition: none;
    transform: none;
  }
  .tooltip-visible {
    transform: none;
  }
  .tooltip-help-icon {
    transition: none;
  }
}
@media print {
  .tooltip {
    display: none !important;
  }
}
/**
 * Tag Component
 * @antumo/design-web
 *
 * Sizes: md (24px), lg (28px), 2xl (32px)
 * Colors: neutral (single — white bg, gray-300 border, gray-700 text)
 * Features: removable, disabled, close icon, tag-group layout
 */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  background-color: var(--antumo-color-white, #ffffff);
  border-color: var(--antumo-gray-300, #d5d7da);
  color: var(--antumo-gray-700, #414651);
  box-shadow: var(--antumo-shadow-xs, 0px 1px 2px 0px rgba(10, 13, 18, 0.05));
  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out;
}

.tag-md {
  height: 24px;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-md);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  gap: var(--antumo-spacing-xs);
  border-radius: var(--antumo-radius-sm);
}

.tag-lg {
  height: var(--antumo-size-2xs);
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-lg);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  gap: var(--antumo-spacing-sm);
  border-radius: var(--antumo-radius-sm);
}

.tag-2xl {
  height: var(--antumo-size-xs);
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  gap: var(--antumo-spacing-sm);
  border-radius: var(--antumo-radius-md);
}

.tag-has-close.tag-md {
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-xs) var(--antumo-spacing-xxs) var(--antumo-spacing-md);
}

.tag-has-close.tag-lg {
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-sm) var(--antumo-spacing-xs) var(--antumo-spacing-lg);
}

.tag-has-close.tag-2xl {
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-sm) var(--antumo-spacing-xs) var(--antumo-spacing-xl);
}

.tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background-color: var(--antumo-color-white, #ffffff);
  transition: background-color 150ms ease-in-out;
}
.tag-close svg {
  display: block;
  stroke: var(--antumo-gray-400, #a4a7ae);
  transition: stroke 150ms ease-in-out;
}
.tag-close:hover {
  background-color: var(--antumo-gray-50, #fafafa);
}
.tag-close:hover svg {
  stroke: var(--antumo-gray-500, #717680);
}
.tag-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.tag-close-md,
.tag-close-lg {
  width: 16px;
  height: 16px;
  padding: var(--antumo-spacing-xxs);
  border-radius: var(--antumo-radius-xxs);
}
.tag-close-md svg,
.tag-close-lg svg {
  width: 12px;
  height: 12px;
  stroke-width: 1px;
}

.tag-close-2xl {
  width: 20px;
  height: 20px;
  padding: var(--antumo-spacing-xxs);
  border-radius: var(--antumo-radius-xs);
}
.tag-close-2xl svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.25px;
}

.tag-removable {
  cursor: pointer;
}
.tag-removable:hover {
  opacity: 0.85;
}
.tag-removable:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.tag-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tag-clickable {
  cursor: pointer;
}
.tag-clickable:hover {
  opacity: 0.85;
}

.tag-truncate .tag-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--antumo-spacing-md);
  align-items: center;
}

.tag-group-compact {
  gap: var(--antumo-spacing-xs);
}

.tag-group-vertical {
  flex-direction: column;
  align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .tag,
  .tag-close {
    transition: none;
  }
}
/**
 * Search Component
 * @antumo/design-web
 *
 * Sizes: md (40px), lg (48px), xl (56px)
 * Variants: regular, subtle
 * States: default, hover, focused, typing, filled, disabled
 */
.search {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-sm);
  font-family: var(--antumo-font-body);
}
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--antumo-bg-primary);
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 150ms ease, border-width 150ms ease, box-shadow 150ms ease;
}
.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font-family: var(--antumo-font-body);
  outline: none;
  color: var(--antumo-text-primary);
  transition: color 150ms ease;
}
.search-input::placeholder {
  color: var(--antumo-text-placeholder);
}
.search-input:focus {
  outline: none;
}
.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--antumo-text-placeholder);
}
.search-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--antumo-text-placeholder);
  transition: background-color 150ms ease, color 150ms ease;
}
.search-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--antumo-text-primary);
}
.search-button:active {
  background-color: rgba(0, 0, 0, 0.08);
}
.search-button-clear {
  display: none;
  color: var(--antumo-fg-quaternary);
}
.search-button-search {
  color: var(--antumo-navy-500);
}
.search-md .search-box {
  height: var(--antumo-size-md);
  gap: var(--antumo-spacing-md);
  padding-left: var(--antumo-spacing-xl);
}
.search-md .search-input {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.search-md .search-icon {
  width: 20px;
  height: 20px;
}
.search-md .search-button {
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
}
.search-lg .search-box {
  height: var(--antumo-size-lg);
  gap: var(--antumo-spacing-md);
  padding-left: var(--antumo-spacing-xl);
}
.search-lg .search-input {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.search-lg .search-icon {
  width: 20px;
  height: 20px;
}
.search-lg .search-button {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
}
.search-xl .search-box {
  height: var(--antumo-size-xl);
  gap: var(--antumo-spacing-lg);
  padding-left: var(--antumo-spacing-2xl);
}
.search-xl .search-input {
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
}
.search-xl .search-icon {
  width: 24px;
  height: 24px;
}
.search-xl .search-button {
  width: var(--antumo-size-xl);
  height: var(--antumo-size-xl);
}
.search-regular .search-box {
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-md);
  box-shadow: var(--antumo-shadow-xs);
}
.search-regular.search-xl .search-box {
  border-radius: var(--antumo-radius-lg);
}
.search-subtle .search-box {
  border: none;
  border-bottom: 1px solid var(--antumo-border-secondary);
  border-radius: 0;
  box-shadow: none;
  padding-left: var(--antumo-spacing-3xl);
}
.search:hover:not(.search-disabled):not(.search-focused):not(.search-typing) .search-box, .search-hover:not(.search-disabled):not(.search-focused):not(.search-typing) .search-box {
  border-color: var(--antumo-navy-500);
}
.search:hover:not(.search-disabled):not(.search-focused):not(.search-typing).search-subtle .search-box, .search-hover:not(.search-disabled):not(.search-focused):not(.search-typing).search-subtle .search-box {
  border-bottom-color: var(--antumo-navy-500);
}
.search-focused .search-box {
  border-color: var(--antumo-navy-500);
  border-width: 2px;
}
.search-focused.search-subtle .search-box {
  border-bottom-width: 2px;
  border-bottom-color: var(--antumo-navy-500);
}
.search-focused .search-input {
  color: var(--antumo-text-primary);
}
.search-typing .search-box {
  border-color: var(--antumo-navy-500);
  border-width: 2px;
}
.search-typing.search-subtle .search-box {
  border-bottom-width: 2px;
  border-bottom-color: var(--antumo-navy-500);
}
.search-typing .search-input {
  color: var(--antumo-text-primary);
}
.search-typing .search-button-clear {
  display: flex;
}
.search-filled .search-box {
  border-color: var(--antumo-border-primary);
}
.search-filled.search-subtle .search-box {
  border-bottom-color: var(--antumo-border-secondary);
}
.search-filled .search-input {
  color: var(--antumo-text-primary);
}
.search-filled .search-button-clear {
  display: flex;
}
.search-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.search-disabled .search-input {
  cursor: not-allowed;
}
.search-label {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  font-weight: var(--antumo-font-weight-medium);
}
.search-label-required::after {
  content: "*";
  color: var(--antumo-text-error);
  margin-left: var(--antumo-spacing-xxs);
}
.search-hint {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-fg-tertiary);
}

.search:not(.search-disabled) .search-input:focus-visible {
  outline: none;
}

.search-regular:not(.search-disabled):not(.search-focused):not(.search-typing) .search-box:has(.search-input:focus) {
  border-color: var(--antumo-navy-500);
  border-width: 2px;
}

.search-subtle:not(.search-disabled):not(.search-focused):not(.search-typing) .search-box:has(.search-input:focus) {
  border-bottom-color: var(--antumo-navy-500);
  border-bottom-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .search-box,
  .search-input,
  .search-button {
    transition: none;
  }
}
@media (max-width: 768px) {
  .search-xl .search-box {
    height: var(--antumo-size-lg);
  }
  .search-xl .search-input {
    font-size: var(--antumo-font-size-md);
    line-height: var(--antumo-line-height-md);
  }
}
.slider-thumb {
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
  background-color: var(--antumo-color-white);
  border: 2px solid var(--antumo-navy-500);
  border-radius: var(--antumo-radius-full);
  box-shadow: var(--antumo-shadow-sm);
  cursor: grab;
  transform: translateX(-50%);
  z-index: 10;
  box-sizing: border-box;
}
.slider-thumb:hover {
  cursor: grab;
}
.slider-thumb--focused, .slider-thumb:focus-visible {
  outline: none;
  box-shadow: var(--antumo-focus-ring-shadow-xs);
}
.slider-thumb:focus:not(:focus-visible) {
  outline: none;
  box-shadow: var(--antumo-shadow-sm);
}
.slider-thumb:active {
  cursor: grabbing;
}

.slider-thumb-label {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.form-range {
  position: relative;
  width: 100%;
  height: 24px;
  box-sizing: border-box;
  user-select: none;
}

.form-range-track {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--antumo-gray-200);
  border-radius: var(--antumo-radius-full);
}

.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--antumo-navy-500);
  border-radius: var(--antumo-radius-full);
  pointer-events: none;
}

.form-range-group {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
  width: 320px;
}

.form-range-label {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
}

.form-range-label-req {
  color: var(--antumo-text-error);
}

@media (prefers-reduced-motion: reduce) {
  .form-range,
  .form-range *,
  .slider-thumb {
    transition: none;
    animation: none;
  }
}
@media print {
  .form-range-group,
  .form-range {
    page-break-inside: avoid;
  }
}
/**
 * Scrollbar Component
 * @antumo/design-web
 *
 * Orientations: vertical, horizontal, both
 * Sizes: thin (4px), default (6px), thick (8px)
 * Themes: light, dark
 * States: hidden, always-visible, disabled, loading
 */
@keyframes antumo-scrollbar-pulse {
  0%, 100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.3;
  }
}
.scrollbar {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--antumo-radius-full);
}
.scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--antumo-color-white, #ffffff);
  border-radius: var(--antumo-radius-full);
  min-height: var(--antumo-size-md);
  transition: opacity 150ms ease-out;
}
.scrollbar::-webkit-scrollbar-thumb:hover, .scrollbar::-webkit-scrollbar-thumb:active {
  background: var(--antumo-alpha-black-30);
}
.scrollbar:hover {
  scrollbar-color: var(--antumo-alpha-black-30) transparent;
}
.scrollbar:focus {
  outline: none;
}
.scrollbar:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.scrollbar-vertical {
  overflow-x: hidden;
  overflow-y: auto;
}
.scrollbar-vertical::-webkit-scrollbar {
  width: 6px;
}
.scrollbar-horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}
.scrollbar-horizontal::-webkit-scrollbar {
  height: 6px;
}
.scrollbar-horizontal::-webkit-scrollbar-thumb {
  min-width: var(--antumo-size-md);
  min-height: auto;
}
.scrollbar-both {
  overflow: auto;
}
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
.scrollbar-always-visible::-webkit-scrollbar-thumb {
  opacity: 1;
  background: rgba(0, 0, 0, 0.15);
}
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-thick::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar-light {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.scrollbar-light::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-color: var(--antumo-color-white, #ffffff);
}
.scrollbar-light::-webkit-scrollbar-thumb:hover, .scrollbar-light::-webkit-scrollbar-thumb:active {
  background: var(--antumo-alpha-black-30);
}
.scrollbar-light:hover {
  scrollbar-color: var(--antumo-alpha-black-30) transparent;
}
.scrollbar-dark {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.scrollbar-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--antumo-color-black, #000000);
}
.scrollbar-dark::-webkit-scrollbar-thumb:hover, .scrollbar-dark::-webkit-scrollbar-thumb:active {
  background: var(--antumo-alpha-white-30);
}
.scrollbar-dark:hover {
  scrollbar-color: var(--antumo-alpha-white-30) transparent;
}
.scrollbar-disabled, .scrollbar[disabled] {
  overflow: hidden;
  pointer-events: none;
}
.scrollbar-disabled::-webkit-scrollbar-thumb, .scrollbar[disabled]::-webkit-scrollbar-thumb {
  opacity: 0;
  pointer-events: none;
}
.scrollbar-loading {
  pointer-events: none;
}
.scrollbar-loading::-webkit-scrollbar-thumb {
  animation: antumo-scrollbar-pulse 1.5s ease-in-out infinite;
}
.scrollbar button,
.scrollbar a,
.scrollbar input,
.scrollbar textarea,
.scrollbar select {
  pointer-events: auto;
}

.scrollbar-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.scrollbar-container .scrollbar {
  width: 100%;
  height: 100%;
}

[data-theme=dark] .scrollbar {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
[data-theme=dark] .scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--antumo-color-black, #000000);
}
[data-theme=dark] .scrollbar::-webkit-scrollbar-thumb:hover, [data-theme=dark] .scrollbar::-webkit-scrollbar-thumb:active {
  background: var(--antumo-alpha-white-30);
}
[data-theme=dark] .scrollbar:hover {
  scrollbar-color: var(--antumo-alpha-white-30) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .scrollbar {
    scroll-behavior: auto;
  }
  .scrollbar::-webkit-scrollbar-thumb {
    transition: none;
  }
  .scrollbar-loading::-webkit-scrollbar-thumb {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .scrollbar {
    scroll-behavior: smooth;
  }
}
.alert {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  padding: var(--antumo-spacing-3xl);
  background: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  box-shadow: var(--antumo-shadow-lg);
  width: 400px;
  position: relative;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.alert-close-button {
  position: absolute;
  top: var(--antumo-spacing-md);
  right: var(--antumo-spacing-md);
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
  border-radius: var(--antumo-radius-md);
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--antumo-fg-quaternary);
  padding: 0;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.alert-close-button:hover {
  background: var(--antumo-bg-secondary);
  color: var(--antumo-fg-secondary);
}
.alert-close-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.alert-close-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--_alert-icon-color, var(--antumo-fg-quaternary));
}
.alert-icon svg {
  width: 100%;
  height: 100%;
}
.alert-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  flex: 1;
  padding-right: var(--antumo-spacing-7xl);
}
.alert-body {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
  flex: 1;
}
.alert-header {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
}
.alert-title {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-text-primary);
  letter-spacing: 0;
  margin: 0;
}
.alert-message {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-secondary);
  letter-spacing: 0;
  margin: 0;
}
.alert-link {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
  padding: 0;
  border: none;
  border-radius: var(--antumo-radius-xxs);
  background: transparent;
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--antumo-fg-brand-primary);
  cursor: pointer;
  text-decoration: none;
}
.alert-link:hover {
  text-decoration: underline;
}
.alert-link:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.alert-danger, .alert-error {
  --_alert-icon-color: var(--antumo-fg-error-primary);
}
.alert-warning {
  --_alert-icon-color: var(--antumo-fg-warning-primary);
}
.alert-success {
  --_alert-icon-color: var(--antumo-fg-success-primary);
}
@media (max-width: 767px) {
  .alert {
    width: 100%;
  }
  .alert-close-button {
    width: var(--antumo-size-md);
    height: var(--antumo-size-md);
  }
  .alert-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .alert-link {
    padding: var(--antumo-spacing-xxs) 0;
    gap: var(--antumo-spacing-sm);
  }
}

.notification-message {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-md);
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-6xl);
}
.notification-message__top {
  display: flex;
  flex-direction: row;
  gap: var(--antumo-spacing-md);
  width: 296px;
}
.notification-message__dot {
  position: relative;
  width: 10px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.notification-message__dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--_msg-dot-color, var(--antumo-gray-400));
}
.notification-message__header {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
  flex: 1;
}
.notification-message__title {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-text-primary);
  margin: 0;
}
.notification-message__subtitle {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-tertiary);
  margin: 0;
}
.notification-message__bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  padding-left: 18px;
}
.notification-message__timestamp {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-quaternary);
  margin: 0;
}
.notification-message__action {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
  padding: 0;
  border: none;
  border-radius: var(--antumo-radius-xxs);
  background: transparent;
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--antumo-fg-brand-primary);
  cursor: pointer;
  text-decoration: none;
}
.notification-message__action:hover {
  text-decoration: underline;
}
.notification-message__action:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.notification-message--warning {
  --_msg-dot-color: var(--antumo-yellow-500);
}
.notification-message--success {
  --_msg-dot-color: var(--antumo-green-500);
}
.notification-message--error {
  --_msg-dot-color: var(--antumo-red-500);
}
.notification-message--neutral {
  --_msg-dot-color: var(--antumo-navy-500);
}
.notification-message--read .notification-message__dot::after {
  display: none;
}
.notification-message--read .notification-message__title {
  color: var(--antumo-text-secondary);
}
.notification-message--read .notification-message__action {
  display: none;
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--antumo-radius-full);
  background: var(--antumo-yellow-500);
  color: var(--antumo-text-primary);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
}
.notification-badge--sm {
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  font-size: 0;
}
.notification-badge--md {
  height: 16px;
  min-width: 16px;
  padding: 0 var(--antumo-spacing-xs);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  text-align: center;
}
.notification-badge--lg {
  height: 20px;
  min-width: 20px;
  padding: 0 var(--antumo-spacing-xs);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  text-align: center;
}

#antumo-toast-container {
  position: fixed;
  z-index: 1080;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-md);
  max-width: 400px;
}
#antumo-toast-container > .alert {
  pointer-events: auto;
}
#antumo-toast-container.antumo-toast-container--top-right {
  top: var(--antumo-spacing-3xl);
  right: var(--antumo-spacing-3xl);
}
#antumo-toast-container.antumo-toast-container--top-left {
  top: var(--antumo-spacing-3xl);
  left: var(--antumo-spacing-3xl);
}
#antumo-toast-container.antumo-toast-container--bottom-right {
  bottom: var(--antumo-spacing-3xl);
  right: var(--antumo-spacing-3xl);
  flex-direction: column-reverse;
}
#antumo-toast-container.antumo-toast-container--bottom-left {
  bottom: var(--antumo-spacing-3xl);
  left: var(--antumo-spacing-3xl);
  flex-direction: column-reverse;
}
@media (max-width: 767px) {
  #antumo-toast-container {
    left: var(--antumo-spacing-3xl);
    right: var(--antumo-spacing-3xl);
    max-width: none;
  }
}

.alert.antumo-toast-entering {
  opacity: 0;
  transform: translateY(-8px);
}

.alert.antumo-toast-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

.antumo-toast-container--bottom-right .alert.antumo-toast-entering,
.antumo-toast-container--bottom-right .alert.antumo-toast-leaving,
.antumo-toast-container--bottom-left .alert.antumo-toast-entering,
.antumo-toast-container--bottom-left .alert.antumo-toast-leaving {
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .alert,
  .alert-close-button {
    transition: none;
  }
  .alert.antumo-toast-entering,
  .alert.antumo-toast-leaving {
    transform: none;
  }
}
@keyframes antumo-progress-fill {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}
.progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--antumo-spacing-md);
  width: 100%;
}
.progress .progress-track {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--antumo-gray-200);
  border-radius: var(--antumo-radius-md);
  overflow: hidden;
}
.progress .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--antumo-navy-500);
  border-radius: var(--antumo-radius-md);
  transition: width 300ms ease;
}
.progress .progress-text {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  white-space: nowrap;
}
.progress-md .progress-track {
  height: 8px;
  border-radius: var(--antumo-radius-md);
}
.progress-md .progress-fill {
  border-radius: var(--antumo-radius-md);
}
.progress-lg .progress-track {
  height: 10px;
  border-radius: var(--antumo-radius-lg);
}
.progress-lg .progress-fill {
  border-radius: var(--antumo-radius-lg);
}
.progress-lg .progress-text {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.progress-success .progress-fill {
  background-color: var(--antumo-green-500);
}
.progress-warning .progress-fill {
  background-color: var(--antumo-yellow-500);
}
.progress-error .progress-fill {
  background-color: var(--antumo-red-500);
}
.progress:has(> .progress-bar) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--antumo-gray-200);
  border-radius: var(--antumo-radius-md);
  overflow: hidden;
  gap: 0;
}
.progress:has(> .progress-bar) > .progress-bar {
  display: block;
  height: 100%;
  background-color: var(--antumo-navy-500);
  border-radius: inherit;
  transition: width 300ms ease;
  color: var(--antumo-color-white);
  font-size: var(--antumo-font-size-xs);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.progress:has(> .progress-bar) > .progress-bar.bg-success {
  background-color: var(--antumo-fg-success-primary) !important;
}
.progress:has(> .progress-bar) > .progress-bar.bg-warning {
  background-color: var(--antumo-fg-warning-primary) !important;
}
.progress:has(> .progress-bar) > .progress-bar.bg-danger, .progress:has(> .progress-bar) > .progress-bar.bg-error {
  background-color: var(--antumo-fg-error-primary) !important;
}
.progress:has(> .progress-bar) > .progress-bar.bg-info {
  background-color: var(--antumo-blue-500) !important;
}
.progress:has(> .progress-bar) > .progress-bar.bg-primary {
  background-color: var(--antumo-fg-brand-primary) !important;
}
.progress:has(> .progress-bar) > .progress-bar.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.progress:has(> .progress-bar) > .progress-bar.progress-bar-animated, .progress:has(> .progress-bar) > .progress-bar.active {
  animation: antumo-progress-bar-stripes 1s linear infinite;
}
.progress:has(> .progress-bar) > .progress-bar.progress-bar-success {
  background-color: var(--antumo-green-500);
}
.progress:has(> .progress-bar) > .progress-bar.progress-bar-danger {
  background-color: var(--antumo-red-500);
}
.progress:has(> .progress-bar) > .progress-bar.progress-bar-warning {
  background-color: var(--antumo-yellow-500);
}
.progress:has(> .progress-bar) > .progress-bar.progress-bar-info {
  background-color: var(--antumo-blue-500);
}
.progress-xs:has(> .progress-bar) {
  height: 4px;
  border-radius: var(--antumo-radius-xs);
}
.progress-sm:has(> .progress-bar) {
  height: 6px;
  border-radius: var(--antumo-radius-sm);
}
.progress-md:has(> .progress-bar) {
  height: 8px;
  border-radius: var(--antumo-radius-md);
}
.progress-lg:has(> .progress-bar) {
  height: 10px;
  border-radius: var(--antumo-radius-lg);
}

@keyframes antumo-progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--antumo-spacing-md);
  width: 100%;
}
.progress-2 .progress-2-value {
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  font-size: var(--antumo-font-size-xl);
  line-height: var(--antumo-line-height-md);
  letter-spacing: -0.01em;
  color: var(--antumo-text-secondary);
  white-space: nowrap;
}
.progress-2 .progress-2-track {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--antumo-gray-200);
  border-radius: var(--antumo-radius-md);
  overflow: hidden;
}
.progress-2 .progress-2-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--antumo-navy-500);
  border-radius: var(--antumo-radius-md);
  transition: width 300ms ease;
}
.progress-2-brand .progress-2-fill {
  background-color: var(--antumo-navy-500);
}
.progress-2-red .progress-2-fill {
  background-color: var(--antumo-red-500);
}
.progress-2-green .progress-2-fill {
  background-color: var(--antumo-green-500);
}

.card-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--antumo-spacing-6xl);
  width: 100%;
  max-width: 438px;
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl) var(--antumo-spacing-6xl);
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-lg);
  box-shadow: var(--antumo-shadow-xs);
  box-sizing: border-box;
}
.card-progress .card-progress-header {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
  width: 100%;
}
.card-progress .card-progress-title {
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.01em;
  color: var(--antumo-text-brand-solid);
  width: 100%;
}
.card-progress .card-progress-body {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  width: 100%;
}
.card-progress .card-progress-progress {
  width: 100%;
}

.progress-full-width {
  width: 100%;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .progress .progress-fill,
  .progress-2 .progress-2-fill {
    transition: none;
  }
}
@media print {
  .progress .progress-fill,
  .progress-2 .progress-2-fill {
    transition: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .progress .progress-track,
  .progress-2 .progress-2-track {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
@keyframes antumo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes antumo-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.antumo-spin {
  animation: antumo-spin 1s linear infinite;
}

.spinner-border {
  display: inline-block;
  border-style: solid;
  border-radius: var(--antumo-radius-full);
  animation: antumo-spin 0.75s linear infinite;
  flex-shrink: 0;
  box-sizing: border-box;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-width: 1.75px;
  border-color: var(--antumo-navy-200);
  border-top-color: var(--antumo-navy-600);
}
.spinner-border-sm {
  width: 20px;
  height: 20px;
  border-width: 1.5px;
}
.spinner-border-2xl {
  width: 48px;
  height: 48px;
  border-width: 2.5px;
}
.spinner-border-brand {
  border-color: var(--antumo-navy-200);
  border-top-color: var(--antumo-navy-600);
}
.spinner-border-error {
  border-color: var(--antumo-red-100);
  border-top-color: var(--antumo-red-700);
}
.spinner-border-inverted {
  border-color: var(--antumo-alpha-white-20);
  border-top-color: var(--antumo-color-white);
}

.loading {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--antumo-spacing-3xl);
}
.loading .loading-text {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  text-align: center;
  margin: 0;
}
.loading-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  width: 100%;
}
.loading-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--antumo-alpha-white-90);
}
.loading-fullscreen.loading-dark {
  background-color: var(--antumo-alpha-black-80);
}
.loading-fullscreen.loading-dark .loading-text {
  color: var(--antumo-color-white);
}

[data-theme=dark] .loading-fullscreen {
  background-color: var(--antumo-alpha-black-80);
}
[data-theme=dark] .loading-fullscreen .loading-text {
  color: var(--antumo-color-white);
}

.skeleton {
  background: linear-gradient(90deg, var(--antumo-gray-200) 0%, var(--antumo-gray-100) 50%, var(--antumo-gray-200) 100%);
  background-size: 200% 100%;
  animation: antumo-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--antumo-radius-xs);
  position: relative;
  overflow: hidden;
}
.skeleton-text {
  width: 100%;
  height: 16px;
  border-radius: var(--antumo-radius-xs);
}
.skeleton-text-sm {
  height: 12px;
}
.skeleton-text-md {
  height: 16px;
}
.skeleton-text-lg {
  height: 20px;
}
.skeleton-text-block {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-md);
  width: 100%;
  background: none;
  animation: none;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-rectangle {
  width: 100%;
  height: 200px;
  border-radius: var(--antumo-radius-md);
}
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
  width: 100%;
  height: 200px;
  padding: var(--antumo-spacing-3xl);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  background: var(--antumo-bg-primary);
  animation: none;
  box-sizing: border-box;
}
.skeleton-card .skeleton-card-header {
  display: flex;
  gap: var(--antumo-spacing-xl);
  align-items: center;
}
.skeleton-card .skeleton-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-md);
}
.skeleton-list-item {
  display: flex;
  gap: var(--antumo-spacing-xl);
  align-items: center;
  width: 100%;
  padding: var(--antumo-spacing-xl);
  border-bottom: 1px solid var(--antumo-border-secondary);
  background: none;
  animation: none;
  box-sizing: border-box;
}
.skeleton-list-item:last-child {
  border-bottom: none;
}
.skeleton-list-item .skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--antumo-gray-200) 0%, var(--antumo-gray-100) 50%, var(--antumo-gray-200) 100%);
  background-size: 200% 100%;
  animation: antumo-shimmer 1.5s ease-in-out infinite;
}
.skeleton-list-item .skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-sm);
  flex: 1;
}
.skeleton-list-item .skeleton-line {
  height: 14px;
  border-radius: var(--antumo-radius-xs);
  background: linear-gradient(90deg, var(--antumo-gray-200) 0%, var(--antumo-gray-100) 50%, var(--antumo-gray-200) 100%);
  background-size: 200% 100%;
  animation: antumo-shimmer 1.5s ease-in-out infinite;
}
.skeleton-list-item .skeleton-line:first-child {
  width: 100%;
}
.skeleton-list-item .skeleton-line:last-child {
  width: 60%;
}

.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
  width: 100%;
}

.skeleton-row {
  display: flex;
  gap: var(--antumo-spacing-xl);
  align-items: center;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border {
    animation: none;
    opacity: 0.7;
  }
  .skeleton,
  .skeleton-list-item .skeleton-avatar,
  .skeleton-list-item .skeleton-line {
    animation: none;
    background: var(--antumo-gray-200);
    background-size: auto;
  }
}
.counter {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
}
.counter-md .counter-value {
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.counter-lg .counter-value {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.counter-xl .counter-value {
  width: var(--antumo-size-xl);
  height: var(--antumo-size-xl);
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
}

.counter-value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-text-primary);
  text-align: center;
  user-select: none;
  flex-shrink: 0;
}

.counter-labeled {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-6xl);
}
.counter-labeled-lg .counter-label {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.counter-labeled-xl .counter-label {
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
}

.counter-label {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-text-primary);
}

.counter .btn:disabled {
  color: var(--antumo-fg-disabled-subtle);
}

.counter .btn-tertiary.btn-destructive {
  color: var(--antumo-red-500);
}

@media (prefers-reduced-motion: reduce) {
  .counter .btn {
    transition: none;
  }
}
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--antumo-border-secondary);
  border: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  height: auto;
  background: none;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-text-quaternary);
  white-space: nowrap;
}
.divider-text::before, .divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--antumo-border-secondary);
}

hr.divider {
  border: none;
}

@media (prefers-reduced-motion: reduce) {
  .divider {
    transition: none;
  }
}
.antumo-steps {
  display: flex;
  flex-direction: row;
  gap: var(--antumo-spacing-3xl);
  width: 100%;
}
.antumo-steps > .antumo-step {
  flex: 1;
  min-width: 0;
}

.antumo-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.antumo-step__bar {
  width: 100%;
  border-radius: var(--antumo-radius-xs);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--antumo-gray-200, #e9eaeb);
}

.antumo-step__bar-fill {
  height: 100%;
  border-radius: inherit;
  background-color: var(--antumo-navy-500, #3a3a66);
  transition: width 300ms ease-in-out;
}

.antumo-step__content {
  display: flex;
  flex-direction: row;
  align-self: stretch;
}

.antumo-step__icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.antumo-step__icon > svg {
  display: block;
}

.antumo-step__text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

.antumo-step__label {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
}

.antumo-step__hint {
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
}

.antumo-step--sm {
  gap: var(--antumo-spacing-md);
}
.antumo-step--sm .antumo-step__bar {
  height: 4px;
  border-radius: var(--antumo-radius-xs);
}
.antumo-step--sm .antumo-step__content {
  gap: var(--antumo-spacing-sm);
}
.antumo-step--sm .antumo-step__icon {
  height: 24px;
}
.antumo-step--sm .antumo-step__icon > svg {
  width: 20px;
  height: 20px;
}
.antumo-step--sm .antumo-step__label {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.antumo-step--sm .antumo-step__hint {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.antumo-step--md {
  gap: var(--antumo-spacing-md);
}
.antumo-step--md .antumo-step__bar {
  height: 4px;
  border-radius: var(--antumo-radius-xs);
}
.antumo-step--md .antumo-step__content {
  gap: var(--antumo-spacing-sm);
}
.antumo-step--md .antumo-step__icon {
  height: 24px;
}
.antumo-step--md .antumo-step__icon > svg {
  width: 20px;
  height: 20px;
}
.antumo-step--md .antumo-step__label {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.antumo-step--md .antumo-step__hint {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.antumo-step--lg {
  gap: var(--antumo-spacing-xl);
}
.antumo-step--lg .antumo-step__bar {
  height: 8px;
  border-radius: var(--antumo-radius-md);
}
.antumo-step--lg .antumo-step__content {
  gap: var(--antumo-spacing-md);
}
.antumo-step--lg .antumo-step__icon {
  height: 28px;
}
.antumo-step--lg .antumo-step__icon > svg {
  width: 24px;
  height: 24px;
}
.antumo-step--lg .antumo-step__text {
  gap: var(--antumo-spacing-xxs);
}
.antumo-step--lg .antumo-step__label {
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
}
.antumo-step--lg .antumo-step__hint {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}

.antumo-step--incomplete .antumo-step__bar {
  background-color: var(--antumo-gray-200, #e9eaeb);
}
.antumo-step--incomplete .antumo-step__bar-fill {
  width: 0;
}
.antumo-step--incomplete .antumo-step__icon {
  color: var(--antumo-gray-400, #a4a7ae);
}
.antumo-step--incomplete .antumo-step__label,
.antumo-step--incomplete .antumo-step__hint {
  color: var(--antumo-gray-500, #717680);
}

.antumo-step--current .antumo-step__bar {
  background-color: var(--antumo-gray-200, #e9eaeb);
}
.antumo-step--current .antumo-step__bar-fill {
  width: 50%;
}
.antumo-step--current .antumo-step__icon {
  color: var(--antumo-navy-500, #3a3a66);
}
.antumo-step--current .antumo-step__label,
.antumo-step--current .antumo-step__hint {
  color: var(--antumo-navy-500, #3a3a66);
}

.antumo-step--complete .antumo-step__bar {
  background-color: var(--antumo-navy-500, #3a3a66);
}
.antumo-step--complete .antumo-step__bar-fill {
  width: 100%;
}
.antumo-step--complete .antumo-step__icon {
  color: var(--antumo-gray-400, #a4a7ae);
}
.antumo-step--complete .antumo-step__label,
.antumo-step--complete .antumo-step__hint {
  color: var(--antumo-gray-700, #414651);
}

@media (prefers-reduced-motion: reduce) {
  .antumo-step__bar-fill {
    transition: none;
  }
}
@media print {
  .antumo-step__bar {
    border: 1px solid var(--antumo-gray-400, #a4a7ae);
  }
}
@media (forced-colors: active) {
  .antumo-step__bar {
    border: 1px solid ButtonText;
  }
  .antumo-step__bar-fill {
    background-color: Highlight;
  }
  .antumo-step--current .antumo-step__icon {
    color: Highlight;
  }
  .antumo-step--complete .antumo-step__icon {
    color: Highlight;
  }
}
/**
 * Overlay Component
 * @antumo/design-web
 *
 * Opacity levels: light (0.2), default (0.4), medium (0.6), heavy (0.8)
 * Animations: fade-in, fade-out
 * Modes: no-interaction, persistent, absolute, fixed
 */
@keyframes antumo-overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--antumo-overlay-opacity, 0.4);
  }
}
@keyframes antumo-overlay-fade-out {
  from {
    opacity: var(--antumo-overlay-opacity, 0.4);
  }
  to {
    opacity: 0;
  }
}
.overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--antumo-bg-overlay);
  z-index: 1000;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.4;
  --antumo-overlay-opacity: 0.4;
}
.overlay-light {
  opacity: 0.2;
  --antumo-overlay-opacity: 0.2;
}
.overlay-default {
  opacity: 0.4;
  --antumo-overlay-opacity: 0.4;
}
.overlay-medium {
  opacity: 0.6;
  --antumo-overlay-opacity: 0.6;
}
.overlay-heavy {
  opacity: 0.8;
  --antumo-overlay-opacity: 0.8;
}
.overlay-fade-in {
  animation: antumo-overlay-fade-in 200ms ease-out;
}
.overlay-fade-out {
  animation: antumo-overlay-fade-out 200ms ease-out;
}
.overlay-no-interaction {
  pointer-events: none;
  cursor: default;
}
.overlay-persistent {
  cursor: default;
}
.overlay-absolute {
  position: absolute;
}
.overlay-fixed {
  position: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .overlay-fade-in,
  .overlay-fade-out {
    animation: none;
    transition: opacity 200ms ease-out;
  }
  .overlay-fade-in {
    opacity: var(--antumo-overlay-opacity, 0.4);
  }
  .overlay-fade-out {
    opacity: 0;
  }
}
@media (forced-colors: active) {
  .overlay {
    background-color: var(--antumo-color-black);
    opacity: 0.7;
  }
}
.antumo-side-drawer-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.antumo-side-drawer-backdrop.antumo-side-drawer-backdrop--right {
  justify-content: flex-end;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.antumo-side-drawer-backdrop.antumo-side-drawer-backdrop--left {
  justify-content: flex-start;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
.antumo-side-drawer-backdrop.antumo-side-drawer-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

.antumo-side-drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100%;
  height: 100%;
  background: var(--antumo-bg-primary);
  box-shadow: var(--antumo-shadow-lg);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.antumo-side-drawer-backdrop--right .antumo-side-drawer {
  border-left: 1px solid var(--antumo-border-secondary);
  transform: translateX(100%);
}
.antumo-side-drawer-backdrop--left .antumo-side-drawer {
  border-right: 1px solid var(--antumo-border-secondary);
  transform: translateX(-100%);
}
.antumo-side-drawer-backdrop--open .antumo-side-drawer {
  transform: translateX(0);
}

.antumo-side-drawer__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--antumo-spacing-xl);
  padding: var(--antumo-spacing-6xl) var(--antumo-spacing-10xl) var(--antumo-spacing-3xl) var(--antumo-spacing-6xl);
  border-bottom: 1px solid var(--antumo-border-secondary);
  flex-shrink: 0;
}

.antumo-side-drawer__title {
  margin: 0;
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-xl);
  line-height: 24px;
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--antumo-text-primary);
}

.antumo-side-drawer__close {
  position: absolute;
  top: var(--antumo-spacing-md);
  right: var(--antumo-spacing-md);
  width: 36px;
  height: 36px;
  border-radius: var(--antumo-radius-md);
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--antumo-fg-quaternary);
  padding: 0;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.antumo-side-drawer__close:hover {
  background: var(--antumo-bg-secondary);
  color: var(--antumo-fg-secondary);
}
.antumo-side-drawer__close:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.antumo-side-drawer__close svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.antumo-side-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--antumo-spacing-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-sm);
}

.antumo-side-drawer__empty {
  padding: var(--antumo-spacing-7xl) var(--antumo-spacing-6xl);
  text-align: center;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  color: var(--antumo-text-tertiary);
}

.antumo-side-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--antumo-spacing-xl);
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  border-top: 1px solid var(--antumo-border-secondary);
  flex-shrink: 0;
}

body.antumo-side-drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .antumo-side-drawer-backdrop,
  .antumo-side-drawer {
    transition: none;
  }
}
/**
 * Slot Component
 * @antumo/design-web
 *
 * Placeholder component for content injection.
 * Sizes: sm (80px min-h), md (120px), lg (160px)
 * Variants: default, outlined, filled
 * States: empty, filled
 */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--antumo-radius-md);
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, opacity 200ms ease-in-out;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.slot-sm {
  min-height: 80px;
  min-width: 120px;
  padding: var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.slot-md {
  min-height: 120px;
  min-width: 180px;
  padding: var(--antumo-spacing-3xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}
.slot-lg {
  min-height: 160px;
  min-width: 240px;
  padding: var(--antumo-spacing-6xl);
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
}
.slot-default {
  background-color: var(--antumo-gray-50, #fafafa);
  border: 1px solid var(--antumo-border-secondary, #e9eaeb);
  color: var(--antumo-text-tertiary, #565d6d);
}
.slot-outlined {
  background-color: transparent;
  border: 1px solid var(--antumo-border-primary, #d2d5db);
  color: var(--antumo-text-secondary, #414651);
}
.slot-filled {
  background-color: var(--antumo-gray-100, #f4f5f6);
  border: 1px solid var(--antumo-border-primary, #d2d5db);
  color: var(--antumo-text-secondary, #414651);
}
.slot-empty {
  border-style: dashed;
  border-width: 2px;
  opacity: 0.7;
}
.slot-empty::before {
  content: attr(data-placeholder);
  color: currentColor;
  font-style: italic;
  text-align: center;
}
.slot-empty.slot-filled, .slot:not(.slot-empty) {
  border-style: solid;
  border-width: 1px;
  opacity: 1;
}
.slot-align-start {
  align-items: flex-start;
  justify-content: flex-start;
}
.slot-align-end {
  align-items: flex-end;
  justify-content: flex-end;
}
.slot-align-stretch {
  align-items: stretch;
}
.slot-full-width {
  width: 100%;
}
.slot-full-height {
  height: 100%;
}
.slot:hover {
  opacity: 0.9;
}
.slot:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #0066cc);
  outline-offset: 2px;
}
.slot:focus:not(:focus-visible) {
  outline: none;
}

@media (max-width: 768px) {
  .slot-lg {
    min-height: 120px;
    min-width: 180px;
    padding: var(--antumo-spacing-3xl);
    font-size: var(--antumo-font-size-md);
    line-height: var(--antumo-line-height-md);
  }
  .slot-md {
    min-height: 80px;
    min-width: 120px;
    padding: var(--antumo-spacing-xl);
    font-size: var(--antumo-font-size-sm);
    line-height: var(--antumo-line-height-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .slot {
    transition: none;
  }
}
.text-element {
  display: flex;
  font-family: var(--antumo-font-body);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

dt.text-element-label,
dd.text-element-value {
  margin: 0;
  padding: 0;
}

.text-element-horizontal {
  flex-direction: row;
  gap: var(--antumo-spacing-md);
  align-items: baseline;
}

.text-element-vertical {
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
  align-items: flex-start;
}

.text-element-label {
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}

.text-element-value {
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-element-md .text-element-label {
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
}
.text-element-md .text-element-value {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.text-element-lg .text-element-label {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}
.text-element-lg .text-element-value {
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-lg);
}

@media (prefers-reduced-motion: reduce) {
  .text-element {
    transition: none;
  }
}
:root {
  --antumo-icon-size-xs: 12px;
  --antumo-icon-size-sm: 16px;
  --antumo-icon-size-md: 20px;
  --antumo-icon-size-base: 24px;
  --antumo-icon-size-lg: 28px;
  --antumo-icon-size-xl: 40px;
  --antumo-icon-stroke-xs: 1;
  --antumo-icon-stroke-sm: 1.25;
  --antumo-icon-stroke-md: 1.5;
  --antumo-icon-stroke-base: 1.75;
  --antumo-icon-stroke-lg: 2;
  --antumo-icon-stroke-xl: 2.5;
}

.icon {
  display: inline-flex;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon-xs {
  width: var(--antumo-icon-size-xs);
  height: var(--antumo-icon-size-xs);
  stroke-width: var(--antumo-icon-stroke-xs);
}

.icon-sm {
  width: var(--antumo-icon-size-sm);
  height: var(--antumo-icon-size-sm);
  stroke-width: var(--antumo-icon-stroke-sm);
}

.icon-md {
  width: var(--antumo-icon-size-md);
  height: var(--antumo-icon-size-md);
  stroke-width: var(--antumo-icon-stroke-md);
}

.icon-base {
  width: var(--antumo-icon-size-base);
  height: var(--antumo-icon-size-base);
  stroke-width: var(--antumo-icon-stroke-base);
}

.icon-lg {
  width: var(--antumo-icon-size-lg);
  height: var(--antumo-icon-size-lg);
  stroke-width: var(--antumo-icon-stroke-lg);
}

.icon-xl {
  width: var(--antumo-icon-size-xl);
  height: var(--antumo-icon-size-xl);
  stroke-width: var(--antumo-icon-stroke-xl);
}

/**
 * Misc Icons Component
 * @antumo/design-web
 *
 * Three sub-components: Dot, Featured Icon, Flag
 */
.dot {
  display: inline-block;
  border-radius: 50%;
  background-color: var(--antumo-text-primary, #181d27);
  flex-shrink: 0;
}
.dot-sm {
  width: 8px;
  height: 8px;
}
.dot-md {
  width: 10px;
  height: 10px;
}

.featured-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}
.featured-icon-sm {
  width: var(--antumo-size-xs);
  height: var(--antumo-size-xs);
}
.featured-icon-sm .featured-icon-icon {
  width: 16px;
  height: 16px;
}
.featured-icon-md {
  width: var(--antumo-size-md);
  height: var(--antumo-size-md);
}
.featured-icon-md .featured-icon-icon {
  width: 20px;
  height: 20px;
}
.featured-icon-lg {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
}
.featured-icon-lg .featured-icon-icon {
  width: 24px;
  height: 24px;
}
.featured-icon-xl {
  width: 56px;
  height: 56px;
}
.featured-icon-xl .featured-icon-icon {
  width: 28px;
  height: 28px;
}
.featured-icon-stroke {
  background-color: var(--antumo-color-white, #ffffff);
  border: 1px solid var(--antumo-gray-300, #d5d7da);
  color: var(--antumo-gray-600, #535862);
}
.featured-icon-stroke.featured-icon-sm {
  border-radius: var(--antumo-radius-sm);
}
.featured-icon-stroke.featured-icon-md {
  border-radius: var(--antumo-radius-md);
}
.featured-icon-stroke.featured-icon-lg {
  border-radius: var(--antumo-radius-lg);
}
.featured-icon-stroke.featured-icon-xl {
  border-radius: var(--antumo-radius-xl);
}
.featured-icon-success {
  background-color: var(--antumo-green-100, #d7f0e5);
  color: var(--antumo-green-600, #0f9253);
  border: none;
  border-radius: var(--antumo-radius-full);
}
.featured-icon-warning {
  background-color: var(--antumo-yellow-100, #fff3d4);
  color: var(--antumo-yellow-600, #c07d00);
  border: none;
  border-radius: var(--antumo-radius-full);
}
.featured-icon-error {
  background-color: var(--antumo-red-50, #fdecec);
  color: var(--antumo-text-error, #b53f3f);
  border: none;
  border-radius: var(--antumo-radius-full);
}
.featured-icon-neutral {
  background-color: var(--antumo-gray-100, #f5f5f5);
  color: var(--antumo-gray-600, #535862);
  border: none;
  border-radius: var(--antumo-radius-full);
}
.featured-icon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.featured-icon-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.flag {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.flag--12 {
  width: 12px;
  height: 12px;
}
.flag--16 {
  width: 16px;
  height: 16px;
}
.flag--20 {
  width: 20px;
  height: 20px;
}
.flag--24 {
  width: 24px;
  height: 24px;
}
.flag--28 {
  width: 28px;
  height: 28px;
}
.flag--40 {
  width: 40px;
  height: 40px;
}
.flag-image {
  position: absolute;
  top: 20.83%;
  right: 8.33%;
  bottom: 20.83%;
  left: 8.33%;
  width: 83.34%;
  height: 58.34%;
  object-fit: cover;
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 576px;
  background-color: var(--antumo-bg-primary);
  border-radius: var(--antumo-radius-2xl);
  overflow: hidden;
  padding: var(--antumo-spacing-6xl);
}

.accordion-sm {
  padding: var(--antumo-spacing-3xl);
}
.accordion-sm .accordion-button {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-sm);
}
.accordion-sm .accordion-body {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.accordion-md {
  padding: var(--antumo-spacing-6xl);
}
.accordion-md .accordion-button {
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-md);
}
.accordion-md .accordion-body {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.accordion-lg {
  padding: var(--antumo-spacing-6xl);
}
.accordion-lg .accordion-button {
  font-size: var(--antumo-font-size-xl);
  line-height: var(--antumo-line-height-md);
}
.accordion-lg .accordion-body {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}

.accordion-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.accordion-header {
  margin: 0;
}

.accordion-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--antumo-spacing-3xl);
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  outline: none;
  box-sizing: border-box;
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  color: var(--antumo-text-secondary);
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-md);
}
.accordion-button:focus-visible {
  border-radius: var(--antumo-radius-2xl);
  box-shadow: var(--antumo-focus-ring);
}
.accordion-button::after {
  display: none;
}

.accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--antumo-fg-quaternary);
  transition: transform 200ms ease-in-out;
}
.accordion-icon svg {
  width: 100%;
  height: 100%;
}
.accordion-button:not(.collapsed) .accordion-icon {
  transform: rotate(180deg);
}

.accordion-collapse.collapse {
  display: none;
}
.accordion-collapse.collapse.show {
  display: block;
}

.accordion-body {
  padding-top: var(--antumo-spacing-xs);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-tertiary);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.accordion-item-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.accordion-item-disabled .accordion-button {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-icon {
    transition: none;
  }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  box-shadow: var(--antumo-shadow-xs);
  overflow: hidden;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-5xl);
}

.card-footer {
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-5xl);
  border-top: 1px solid var(--antumo-border-tertiary);
}

.card-metric {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-4xl);
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-5xl);
}

.card-metric-header {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
}

.card-metric-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-md);
  font-weight: var(--antumo-font-weight-bold);
  line-height: 1.5;
  color: var(--antumo-text-primary);
  margin: 0;
}

.card-metric-text {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: 1.43;
  color: var(--antumo-text-secondary);
  margin: 0;
}

.card-metric-value {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-2xl);
  font-weight: var(--antumo-font-weight-bold);
  line-height: 1.33;
  color: var(--antumo-text-primary);
}

.card-metric-row {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-3xl);
}

/**
 * Input Leading Dropdown Component
 * @antumo/design-web
 *
 * Extends base input with an inline dropdown trigger on the left side.
 * Sizes: md, lg, xl (inherits base input sizes)
 * Reuses: .form-group, .form-control-wrapper, .form-control,
 *         .form-label, .form-text
 *
 * HTML structure:
 *   <div class="antumo-input-wrapper">
 *     <label class="antumo-input__label">Phone</label>
 *     <div class="antumo-input antumo-input--md">
 *       <div class="antumo-input-leading-dropdown">
 *         <span class="antumo-input-leading-dropdown__value">+1</span>
 *         <span class="antumo-input-leading-dropdown__chevron">▼</span>
 *       </div>
 *       <input class="antumo-input__field" />
 *     </div>
 *     <div class="antumo-input__hint">Hint text</div>
 *   </div>
 */
.antumo-input-leading-dropdown {
  display: flex;
  align-items: center;
  min-width: 80px;
  padding: 0 var(--antumo-spacing-xl);
  border-right: 1px solid var(--antumo-border-primary);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  font-size: var(--antumo-font-size-sm);
  color: var(--antumo-text-primary);
  cursor: pointer;
  gap: var(--antumo-spacing-xs);
  flex-shrink: 0;
  align-self: stretch;
  margin: -1px 0;
}
.antumo-input-leading-dropdown__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.antumo-input-leading-dropdown__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--antumo-fg-tertiary);
  margin-left: auto;
}
.antumo-input-leading-dropdown__chevron svg {
  width: 100%;
  height: 100%;
}
.form-control-disabled .antumo-input-leading-dropdown {
  color: var(--antumo-text-disabled);
  cursor: not-allowed;
  border-right-color: var(--antumo-border-secondary);
}
.form-control-disabled .antumo-input-leading-dropdown .antumo-input-leading-dropdown__chevron {
  color: var(--antumo-fg-disabled, var(--antumo-gray-400));
}
.form-control-readonly .antumo-input-leading-dropdown {
  color: var(--antumo-text-tertiary);
  cursor: default;
  border-right-style: dashed;
  border-right-color: var(--antumo-border-secondary);
}
.form-control-error .antumo-input-leading-dropdown, .form-control-error-filled .antumo-input-leading-dropdown, .form-control-error-focused .antumo-input-leading-dropdown {
  border-right-color: var(--antumo-border-error);
}
.form-control-focused .antumo-input-leading-dropdown, .form-control-typing .antumo-input-leading-dropdown, .form-control-error-focused .antumo-input-leading-dropdown {
  margin: -2px 0;
}

/**
 * Input Prefix/Suffix Component
 * @antumo/design-web
 *
 * Extends base input with visually attached prefix and/or suffix sections.
 * Sizes: md, lg, xl (inherits base input sizes)
 * Reuses: .form-group, .form-control-wrapper, .form-control,
 *         .form-label, .form-text
 *
 * HTML structure:
 *   <div class="antumo-input-wrapper">
 *     <label class="antumo-input__label">Website</label>
 *     <div class="antumo-input antumo-input--md">
 *       <span class="antumo-input-prefix">https://</span>
 *       <input class="antumo-input__field" />
 *       <span class="antumo-input-suffix">.com</span>
 *     </div>
 *     <div class="antumo-input__hint">Hint text</div>
 *   </div>
 */
.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--antumo-spacing-xl);
  background: var(--antumo-bg-secondary);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  font-size: var(--antumo-font-size-sm);
  color: var(--antumo-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: stretch;
  margin: -1px 0;
  border-right: 1px solid var(--antumo-border-primary);
}
.form-control-md > .input-prefix:first-child {
  border-radius: 7px 0 0 7px; /* TODO(tokens): no DS token for border-radius 7px */
}
.form-control-lg > .input-prefix:first-child {
  border-radius: 7px 0 0 7px; /* TODO(tokens): no DS token for border-radius 7px */
}
.form-control-xl > .input-prefix:first-child {
  border-radius: 9px 0 0 9px; /* TODO(tokens): no DS token for border-radius 9px */
}
.form-control-disabled .input-prefix {
  background: var(--antumo-bg-disabled, var(--antumo-gray-50));
  color: var(--antumo-text-disabled);
  border-right-color: var(--antumo-border-secondary);
}
.form-control-readonly .input-prefix {
  border-right-style: dashed;
  color: var(--antumo-text-tertiary);
}
.form-control-error .input-prefix, .form-control-error-filled .input-prefix, .form-control-error-focused .input-prefix {
  border-right-color: var(--antumo-border-error);
}
.form-control-focused .input-prefix, .form-control-typing .input-prefix, .form-control-error-focused .input-prefix {
  margin: -2px 0 -2px -1px;
}

.input-suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--antumo-spacing-xl);
  background: var(--antumo-bg-secondary);
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-regular);
  font-size: var(--antumo-font-size-sm);
  color: var(--antumo-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: stretch;
  margin: -1px 0;
  border-left: 1px solid var(--antumo-border-primary);
}
.form-control-md > .input-suffix:last-child {
  border-radius: 0 7px 7px 0;
}
.form-control-lg > .input-suffix:last-child {
  border-radius: 0 7px 7px 0;
}
.form-control-xl > .input-suffix:last-child {
  border-radius: 0 9px 9px 0;
}
.form-control-disabled .input-suffix {
  background: var(--antumo-bg-disabled, var(--antumo-gray-50));
  color: var(--antumo-text-disabled);
  border-left-color: var(--antumo-border-secondary);
}
.form-control-readonly .input-suffix {
  border-left-style: dashed;
  color: var(--antumo-text-tertiary);
}
.form-control-error .input-suffix, .form-control-error-filled .input-suffix, .form-control-error-focused .input-suffix {
  border-left-color: var(--antumo-border-error);
}
.form-control-focused .input-suffix, .form-control-typing .input-suffix, .form-control-error-focused .input-suffix {
  margin: -2px -1px -2px 0;
}

/**
 * Tables Component
 * @antumo/design-web
 *
 * Comprehensive data table component with MDM (desktop) and POS (touch) variants.
 * Cell types: text, badge, action, checkbox, radio, toggle, multiline, compound,
 *             avatar, icon, flag, button, splitButton, actionIcons, price, route
 * Features: sorting, selection, zebra striping, sticky header, loading, empty state
 */
.table-container {
  width: 100%;
  overflow-x: auto;
  position: relative;
}

.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: var(--antumo-bg-secondary);
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--antumo-border-primary);
  border-radius: var(--antumo-radius-xs);
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--antumo-gray-400);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--antumo-bg-primary);
  font-family: var(--antumo-font-body);
  color: var(--antumo-text-secondary);
  position: relative;
}

.table *,
.table *::before,
.table *::after {
  box-sizing: border-box;
}

.table > :not(caption) > * > th,
.table > thead > th,
.table > tr > th {
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-4xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: 500;
  color: var(--antumo-text-quaternary);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  border-bottom: 1px solid var(--antumo-border-secondary);
}

.table > :not(caption) > * > td,
.table > tr > td {
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-4xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: 400;
  color: var(--antumo-text-secondary);
  text-align: left;
  vertical-align: middle;
}

.table > thead {
  background: var(--antumo-bg-secondary);
  border-bottom: 1px solid var(--antumo-border-secondary);
}

.table > tr:first-child:has(th) {
  background: var(--antumo-bg-secondary);
  border-bottom: 1px solid var(--antumo-border-secondary);
}

.table > tbody > tr,
.table > tr {
  border-bottom: 1px solid var(--antumo-border-secondary);
  transition: background-color 150ms ease;
}

.table > tbody > tr:last-child,
.table > tr:last-child {
  border-bottom: none;
}

.table-header {
  background: var(--antumo-bg-secondary);
  border-bottom: 1px solid var(--antumo-border-secondary);
}

.table-header-cell {
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
  border-bottom: 1px solid var(--antumo-border-secondary);
  font-family: var(--antumo-font-body);
  color: var(--antumo-text-quaternary);
}

.table-header-cell-sortable {
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.table-header-cell-sortable:hover {
  background: var(--antumo-bg-tertiary);
  color: var(--antumo-text-tertiary);
}

.table-header-cell-sortable:hover .table-sort-indicator {
  color: var(--antumo-text-tertiary);
}

.table-header-cell-center {
  text-align: center;
}

.table-header-cell-right {
  text-align: right;
}

.table-header-content {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
}

.table-sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--antumo-text-quaternary);
  transition: transform 200ms ease, color 200ms ease;
}

.table-sort-indicator-asc {
  transform: rotate(0deg);
}

.table-sort-indicator-desc {
  transform: rotate(180deg);
}

.table-row {
  border-bottom: 1px solid var(--antumo-border-secondary);
  transition: background-color 150ms ease;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row-hover:hover {
  background: var(--antumo-bg-tertiary);
}

.table-row-selected {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: var(--antumo-border-brand);
}

.table-row-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.table-row-clickable {
  cursor: pointer;
}

.table-cell {
  vertical-align: middle;
  text-align: left;
}

.table-cell-left {
  text-align: left;
}

.table-cell-center {
  text-align: center;
}

.table-cell-right {
  text-align: right;
}

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

.table-cell-badge {
  white-space: normal;
}

.table-cell-action {
  white-space: normal;
}

.table-cell-checkbox,
.table-cell-radio,
.table-cell-toggle {
  text-align: center;
  width: 52px;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
}

.table-cell-multiline,
.table-cell-compound {
  white-space: normal;
}

.table-cell-price {
  text-align: right;
}

.table-badge-container {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
  flex-wrap: wrap;
}

.table-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-lg);
  border-radius: var(--antumo-radius-full);
  border: 1px solid;
  font-family: var(--antumo-font-body);
  font-weight: 500;
  white-space: nowrap;
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.table-badge-success {
  background: var(--antumo-green-50);
  border-color: var(--antumo-green-200);
  color: var(--antumo-green-700);
}

.table-badge-info {
  background: var(--antumo-blue-50);
  border-color: var(--antumo-blue-200);
  color: var(--antumo-blue-800);
}

.table-badge-warning {
  background: var(--antumo-yellow-50);
  border-color: var(--antumo-yellow-200);
  color: var(--antumo-yellow-800);
}

.table-badge-error {
  background: var(--antumo-red-50);
  border-color: var(--antumo-red-200);
  color: var(--antumo-red-700);
}

.table-badge-overflow {
  background: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-secondary);
  color: var(--antumo-text-secondary);
}

.table-action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
  color: var(--antumo-text-brand-solid);
  font-family: var(--antumo-font-heading);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, text-decoration 150ms ease;
}

.table-action-link:hover {
  color: var(--antumo-text-brand-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.table-action-link:focus {
  outline: 2px solid var(--antumo-border-brand);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-xxs);
}

.table-action-link-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.table-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-xs);
  background: var(--antumo-bg-primary);
  position: relative;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.table-checkbox:hover {
  border-color: var(--antumo-border-brand);
}

.table-checkbox:checked {
  background: var(--antumo-bg-brand-solid);
  border-color: var(--antumo-border-brand);
}

.table-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid var(--antumo-color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.table-checkbox:focus {
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}

.table-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-radio {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-full);
  background: var(--antumo-bg-primary);
  position: relative;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.table-radio:hover {
  border-color: var(--antumo-border-brand);
}

.table-radio:checked {
  border-color: var(--antumo-border-brand);
  border-width: 6px;
}

.table-radio:focus {
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}

.table-radio:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-toggle {
  width: 36px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border-radius: var(--antumo-radius-full);
  background: var(--antumo-bg-tertiary);
  position: relative;
  transition: background-color 150ms ease;
  padding: var(--antumo-spacing-xxs);
  border: none;
  flex-shrink: 0;
}

.table-toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--antumo-radius-full);
  background: var(--antumo-color-white);
  box-shadow: var(--antumo-shadow-sm);
  transition: transform 150ms ease;
}

.table-toggle:checked {
  background: var(--antumo-bg-brand-solid);
}

.table-toggle:checked::after {
  transform: translateX(16px);
}

.table-toggle:focus {
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}

.table-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-compound-container {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
  align-items: flex-start;
}

.table-compound-primary {
  font-family: var(--antumo-font-body);
  font-weight: 500;
  color: var(--antumo-text-secondary);
}

.table-compound-secondary {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  color: var(--antumo-text-tertiary);
}

.table-avatar-container {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
}

.table-avatar {
  border-radius: var(--antumo-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

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

.table-icon-container {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
}

.table-icon {
  flex-shrink: 0;
}

.table-flag-container {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
}

.table-flag {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: cover;
}

.table-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-full);
  background: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  cursor: pointer;
  box-shadow: var(--antumo-shadow-xs);
  transition: all 150ms ease;
  font-family: var(--antumo-font-heading);
  font-weight: 700;
}

.table-button:hover {
  background: var(--antumo-bg-tertiary);
  border-color: var(--antumo-border-brand);
}

.table-button:active {
  transform: translateY(1px);
}

.table-button:focus {
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}

.table-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.table-split-button {
  display: inline-flex;
  align-items: center;
}

.table-split-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--antumo-border-primary);
  border-right: none;
  border-radius: var(--antumo-radius-full) 0 0 var(--antumo-radius-full);
  background: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  cursor: pointer;
  font-family: var(--antumo-font-heading);
  font-weight: 700;
  transition: all 150ms ease;
}

.table-split-button-primary:hover {
  background: var(--antumo-bg-tertiary);
}

.table-split-button-divider {
  width: 1px;
  background: var(--antumo-border-primary);
  align-self: stretch;
}

.table-split-button-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--antumo-border-primary);
  border-left: none;
  border-radius: 0 999px 999px 0;
  background: var(--antumo-bg-primary);
  color: var(--antumo-text-secondary);
  cursor: pointer;
  padding: 0 var(--antumo-spacing-md);
  transition: all 150ms ease;
}

.table-split-button-toggle:hover {
  background: var(--antumo-bg-tertiary);
}

.table-action-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-xs);
}

.table-cell-tags {
  display: flex;
  gap: var(--antumo-spacing-xs);
  flex-wrap: wrap;
}

.table-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--antumo-radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--antumo-text-secondary);
  transition: background-color 150ms ease;
}

.table-icon-button:hover {
  background: var(--antumo-bg-tertiary);
}

.table-icon-button:focus {
  box-shadow: var(--antumo-focus-ring);
  outline: none;
}

.table-icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.table-price {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-md);
  font-weight: var(--antumo-font-weight-bold);
  letter-spacing: var(--antumo-letter-spacing-tight);
  color: var(--antumo-text-secondary);
  text-align: right;
}

.table-route-container {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
}

.table-route-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--antumo-fg-quaternary);
}

.table-loading {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--antumo-alpha-white-80);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.table-empty {
  padding: var(--antumo-spacing-9xl) var(--antumo-spacing-6xl);
  text-align: center;
  color: var(--antumo-text-tertiary);
  font-family: var(--antumo-font-body);
}

.table-empty-icon {
  margin-bottom: var(--antumo-spacing-3xl);
  color: var(--antumo-fg-quaternary);
}

.table-empty-title {
  font-family: var(--antumo-font-heading);
  font-weight: 700;
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  color: var(--antumo-text-secondary);
  margin-bottom: var(--antumo-spacing-xs);
}

.table-empty-description {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary);
}

.table-striped > tbody > tr:nth-of-type(even),
.table-striped .table-row:nth-child(even) {
  background: var(--antumo-bg-secondary);
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped .table-row:nth-child(odd) {
  background: var(--antumo-bg-primary);
}

.table-zebra > tbody > tr:nth-of-type(even),
.table-zebra .table-row:nth-child(even) {
  background: var(--antumo-bg-secondary);
}

.table-zebra > tbody > tr:nth-of-type(odd),
.table-zebra .table-row:nth-child(odd) {
  background: var(--antumo-bg-primary);
}

.table-hover > tbody > tr:hover,
.table-hover > tr:hover,
.table-hover .table-row:hover {
  background: var(--antumo-bg-tertiary);
}

.table-bordered {
  border: none;
}
.table-bordered > :not(caption) > * > th,
.table-bordered > :not(caption) > * > td {
  border-width: 0 0 1px 0;
  border-color: var(--antumo-border-secondary);
}

.table-sm > :not(caption) > * > th,
.table-sm > :not(caption) > * > td,
.table-sm .table-header-cell,
.table-sm .table-cell {
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
}

.table-full-width {
  width: 100%;
}

.table-sticky-header .table-header,
.table-sticky-header > thead {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--antumo-shadow-xs);
}

.table-sticky-first-column .table-header-cell:first-child,
.table-sticky-first-column .table-cell:first-child,
.table-sticky-first-column > :not(caption) > * > th:first-child,
.table-sticky-first-column > :not(caption) > * > td:first-child {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 5;
}

.table-sticky-first-column.table-sticky-header .table-header-cell:first-child,
.table-sticky-first-column.table-sticky-header > thead > tr > th:first-child {
  z-index: 15;
}

.table-mdm {
  min-width: 600px;
}

.table-mdm .table-header-cell {
  height: 40px;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-4xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: 500;
  color: var(--antumo-text-quaternary);
}

.table-mdm .table-cell {
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-4xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: 400;
  color: var(--antumo-text-secondary);
}

.table-mdm .table-row {
  height: 64px;
}

.table-mdm .table-row-short {
  height: 40px;
}

.table-mdm .table-row-short .table-cell {
  padding: var(--antumo-spacing-lg) var(--antumo-spacing-4xl);
}

.table-mdm .table-avatar {
  width: 32px;
  height: 32px;
}

.table-mdm .table-icon {
  width: 20px;
  height: 20px;
}

.table-mdm .table-icon-button {
  width: 32px;
  height: 32px;
}

.table-mdm .table-button {
  height: 36px;
  padding: 0 var(--antumo-spacing-xl);
  gap: var(--antumo-spacing-xs);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.table-mdm .table-action-link {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  font-weight: 700;
}

.table-mdm .table-badge {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-lg);
}

.table-mdm .table-compound-primary {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.table-mdm .table-compound-secondary {
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
}

.table-mdm .table-split-button-primary {
  height: 36px;
  padding: 0 var(--antumo-spacing-xl);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.table-mdm .table-split-button-toggle {
  height: 36px;
}

.table-pos {
  min-width: 800px;
}

.table-pos .table-header-cell {
  height: 40px;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-6xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  font-weight: 500;
  color: var(--antumo-text-quaternary);
}

.table-pos .table-cell {
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-6xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  font-weight: 400;
  color: var(--antumo-text-secondary);
}

.table-pos .table-row {
  height: 88px;
  min-height: 88px;
  max-height: 96px;
}

.table-pos .table-avatar {
  width: 40px;
  height: 40px;
}

.table-pos .table-icon {
  width: 24px;
  height: 24px;
}

.table-pos .table-icon-button {
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
}

.table-pos .table-button {
  height: 56px;
  padding: 0 var(--antumo-spacing-4xl);
  gap: var(--antumo-spacing-sm);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  min-height: 44px;
}

.table-pos .table-action-link {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  font-weight: 700;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

.table-pos .table-badge {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-xl);
  height: 28px;
}

.table-pos .table-compound-primary {
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}

.table-pos .table-compound-secondary {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

.table-pos .table-checkbox,
.table-pos .table-radio,
.table-pos .table-toggle {
  min-width: 44px;
  min-height: 44px;
}

.table-pos .table-flag {
  width: 24px;
  height: 24px;
}

.table-pos .table-route-arrow {
  width: 24px;
  height: 24px;
}

.table-pos .table-split-button-primary {
  height: 56px;
  padding: 0 var(--antumo-spacing-4xl);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  min-height: 44px;
}

.table-pos .table-split-button-toggle {
  height: 56px;
  min-height: 44px;
}

.table-pos .table-cell-checkbox,
.table-pos .table-cell-radio,
.table-pos .table-cell-toggle {
  width: 68px;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-4xl);
}

.table-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table-cell:focus,
.table-header-cell:focus,
.table > :not(caption) > * > td:focus,
.table > :not(caption) > * > th:focus {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: -2px;
}

.table-cell:focus-visible,
.table-header-cell:focus-visible,
.table > :not(caption) > * > td:focus-visible,
.table > :not(caption) > * > th:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: -2px;
}

@media (max-width: 768px) {
  .table-container {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .table {
    min-width: 600px;
  }
  .table > :not(caption) > * > th,
  .table > :not(caption) > * > td,
  .table-header-cell,
  .table-cell {
    padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  }
  .table-mdm .table-header-cell,
  .table-mdm .table-cell {
    padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  }
  .table-pos .table-header-cell,
  .table-pos .table-cell {
    padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
  }
}
@media print {
  .table {
    border: 1px solid var(--antumo-color-black);
  }
  .table-row,
  .table > tbody > tr {
    page-break-inside: avoid;
    border-bottom: 1px solid var(--antumo-color-black);
  }
  .table-header,
  .table > thead {
    background: none;
    border-bottom: 2px solid var(--antumo-color-black);
  }
  .table-header-cell,
  .table > :not(caption) > * > th {
    color: var(--antumo-color-black);
    font-weight: 700;
  }
  .table-checkbox,
  .table-radio,
  .table-toggle,
  .table-button,
  .table-icon-button,
  .table-action-link,
  .table-split-button,
  .table-action-icons {
    display: none;
  }
  .table-sort-indicator {
    display: none;
  }
  .table-loading-overlay {
    display: none;
  }
  .table-loading {
    opacity: 1;
    pointer-events: auto;
    cursor: auto;
  }
}
.row-error,
.row-error > td,
.row-error > th {
  background-color: var(--antumo-bg-row-error) !important;
}

.row-warning,
.row-warning > td,
.row-warning > th {
  background-color: var(--antumo-bg-row-warning) !important;
}

.row-success,
.row-success > td,
.row-success > th {
  background-color: var(--antumo-bg-row-success) !important;
}

.row-info,
.row-info > td,
.row-info > th {
  background-color: var(--antumo-bg-row-info) !important;
}

.row-error:hover,
.row-error:hover > td,
.row-error:hover > th,
.row-warning:hover,
.row-warning:hover > td,
.row-warning:hover > th,
.row-success:hover,
.row-success:hover > td,
.row-success:hover > th,
.row-info:hover,
.row-info:hover > td,
.row-info:hover > th {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.04);
}

@keyframes antumo-modal-overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes antumo-modal-overlay-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes antumo-modal-container-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes antumo-modal-container-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}
@keyframes antumo-modal-button-spin {
  to {
    transform: rotate(360deg);
  }
}
body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--antumo-alpha-black-50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-3xl);
  cursor: default;
  overflow: hidden;
  outline: 0;
}

.modal.fade {
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.fade.show {
  display: flex !important;
  opacity: 1;
}

.modal:not(.fade) {
  animation: antumo-modal-overlay-fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.modal-closing {
  animation: antumo-modal-overlay-fade-out 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 752px;
  margin: 0;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-dialog.modal-sm {
  max-width: 400px;
}

.modal-dialog.modal-md {
  max-width: 600px;
}

.modal-dialog.modal-lg {
  max-width: 752px;
}

.modal-dialog.modal-xl {
  max-width: 968px;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--antumo-bg-primary, #ffffff);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-2xl);
  box-shadow: var(--antumo-shadow-xl);
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.modal:not(.fade) .modal-content {
  animation: antumo-modal-container-enter 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content-closing {
  animation: antumo-modal-container-exit 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content:focus {
  outline: none;
}

.modal-content:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
}

.modal-content.modal-sm {
  max-width: 400px;
}

.modal-content.modal-md {
  max-width: 600px;
}

.modal-content.modal-lg {
  max-width: 752px;
}

.modal-content.modal-xl {
  max-width: 968px;
}

.modal-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--antumo-border-secondary);
  gap: var(--antumo-spacing-3xl);
}

.modal-header-bordered {
  border-bottom: 1px solid var(--antumo-border-tertiary, #f5f5f5);
}

.modal-header-simple {
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-9xl) var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--antumo-spacing-md);
}

.modal-header-simple .modal-header-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--antumo-fg-quaternary, #a4a7ae);
}
.modal-header-simple .modal-header-icon svg {
  width: 20px;
  height: 20px;
}

.modal-header-simple .modal-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
  flex: 1;
  min-width: 0;
}

.modal-header-left-aligned {
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-9xl) var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
}

.modal-header-left-aligned .modal-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
}

.modal-header-center-aligned {
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--antumo-spacing-3xl);
}

.modal-header-center-aligned .modal-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xxs);
}

.modal-title,
.modal-header-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-lg);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-md);
  letter-spacing: var(--antumo-letter-spacing-tight, -0.01em);
  color: var(--antumo-text-primary, #181d27);
  margin: 0;
}

.modal-header-description {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-regular);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary, #535862);
  margin: 0;
}

.btn-close,
.modal-header-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--antumo-fg-quaternary, #a4a7ae);
  transition: background-color 150ms ease, color 150ms ease;
}

.btn-close:hover,
.modal-header-close:hover {
  background-color: var(--antumo-bg-tertiary, #f5f5f5);
  color: var(--antumo-fg-quaternary-hover, #717680);
}

.btn-close:focus-visible,
.modal-header-close:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
}

.btn-close svg,
.modal-header-close svg {
  width: 20px;
  height: 20px;
}

.close,
button.close,
[data-dismiss=modal].close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  opacity: 1;
  transition: all 150ms ease;
}
.close:focus-visible,
button.close:focus-visible,
[data-dismiss=modal].close:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}
.close span,
button.close span,
[data-dismiss=modal].close span {
  line-height: 1;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px;
  min-height: 0;
  scroll-behavior: smooth;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--antumo-gray-300, #d5d7da);
  border-radius: var(--antumo-radius-xs);
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--antumo-gray-400, #a4a7ae);
}

.modal-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 88px;
  padding: 24px 32px;
  border-top: 1px solid var(--antumo-border-secondary);
  gap: 8px;
}

.modal-footer-bordered {
  border-top: 1px solid var(--antumo-border-tertiary, #f5f5f5);
}

.modal-footer-horizontal-right {
  padding: var(--antumo-spacing-6xl);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.modal-footer-horizontal-right .modal-footer-buttons {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  margin-left: auto;
}

.modal-footer-horizontal-right .modal-footer-left {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
}

.modal-footer-horizontal-right .modal-footer-checkbox {
  display: flex;
  align-items: center;
}

.modal-footer-horizontal-fill {
  padding: var(--antumo-spacing-6xl);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.modal-footer-horizontal-fill .modal-footer-buttons {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  flex: 1;
}

.modal-footer-horizontal-fill .modal-footer-buttons .btn {
  flex: 1;
  min-width: 0;
}

.modal-footer-vertical-fill {
  padding: var(--antumo-spacing-6xl);
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
}

.modal-footer-vertical-fill .modal-footer-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
}

.modal-footer-vertical-fill .modal-footer-buttons .btn {
  width: 100%;
}

.modal-content.modal--destructive .btn-primary:not(.btn-destructive),
.modal-content.modal--destructive .modal-footer .btn-primary,
.modal-content.modal--destructive .modal-footer .btn-danger {
  background-color: var(--antumo-bg-error-solid);
  border-color: var(--antumo-bg-error-solid);
  color: var(--antumo-color-white, #ffffff);
}
.modal-content.modal--destructive .btn-primary:not(.btn-destructive):hover:not(:disabled),
.modal-content.modal--destructive .modal-footer .btn-primary:hover:not(:disabled),
.modal-content.modal--destructive .modal-footer .btn-danger:hover:not(:disabled) {
  background-color: var(--antumo-bg-error-hover);
  border-color: var(--antumo-bg-error-hover);
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-backdrop.fade {
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-backdrop.show {
  opacity: 1;
}

@media (max-width: 768px) {
  .modal {
    align-items: flex-end;
  }
  .modal-dialog {
    max-width: calc(100vw - 32px);
  }
  .modal-content {
    max-width: 100% !important;
  }
  .modal-header-simple {
    padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  }
  .modal-header-left-aligned {
    padding: var(--antumo-spacing-6xl);
  }
  .modal-header-center-aligned {
    padding: var(--antumo-spacing-6xl);
  }
  .modal-body {
    padding: 20px 24px;
  }
  .modal-footer {
    flex-direction: column-reverse;
    padding: 24px;
    gap: 12px;
  }
  .modal-footer-horizontal-right {
    padding: var(--antumo-spacing-6xl);
    flex-direction: column;
    gap: var(--antumo-spacing-xl);
  }
  .modal-footer-horizontal-right .modal-footer-left {
    width: 100%;
  }
  .modal-footer-horizontal-right .modal-footer-checkbox {
    min-height: 64px;
    display: flex;
    align-items: center;
  }
  .modal-footer-horizontal-right .modal-footer-buttons {
    flex-direction: column-reverse;
    width: 100%;
    gap: var(--antumo-spacing-xl);
    margin-left: 0;
  }
  .modal-footer-horizontal-right .modal-footer-buttons .btn {
    width: 100%;
  }
  .modal-footer-horizontal-fill {
    padding: var(--antumo-spacing-6xl);
    flex-direction: column;
    gap: var(--antumo-spacing-xl);
  }
  .modal-footer-horizontal-fill .modal-footer-buttons {
    flex-direction: column-reverse;
    width: 100%;
  }
  .modal-footer-horizontal-fill .modal-footer-buttons .btn {
    width: 100%;
    flex: none;
  }
  .modal-footer-vertical-fill {
    padding: var(--antumo-spacing-6xl);
  }
  .modal-footer-vertical-fill .modal-footer-buttons .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-content {
    animation: none;
  }
  .modal.modal-closing,
  .modal-content-closing {
    animation: none;
  }
  .btn-close,
  .modal-header-close {
    transition: none;
  }
  .modal.fade,
  .modal-dialog,
  .modal-backdrop.fade {
    transition: none;
  }
}
.modal-hidden {
  display: none;
}

.modal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   Navigation — Sidebar Navigation Component
   Application component for the Antumo Design System
   ========================================================================== */
/* Layout custom properties
   Exposed for consuming layouts to calculate content offset.
   - body-inset: margin around the sidebar panel (Figma: 8px)
   - content-gap: space between sidebar and main content (Figma: 10px)
   - offset-expanded/collapsed: total horizontal space consumed
   ========================================================================== */
:root {
  --antumo-nav-body-inset: var(--antumo-spacing-md); /* 8px */
  --antumo-nav-content-gap: var(--antumo-spacing-lg); /* 10px */
  --antumo-nav-width-expanded: 280px;
  --antumo-nav-width-collapsed: 72px;
  --antumo-nav-offset-expanded: 298px; /* 8 + 280 + 10 */
  --antumo-nav-offset-collapsed: 90px; /* 8 + 72 + 10 */
}

/* Container */
.nav-sidebar {
  position: fixed;
  top: var(--antumo-nav-body-inset);
  left: var(--antumo-nav-body-inset);
  bottom: var(--antumo-nav-body-inset);
  height: auto;
  background-color: var(--antumo-bg-sidebar);
  border: 1px solid var(--antumo-border-sidebar);
  border-radius: var(--antumo-radius-2xl); /* 16px - per Figma spec */
  box-shadow: var(--antumo-shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  transition: width 250ms ease;
}

.navigation-expanded {
  width: var(--antumo-nav-width-expanded);
}

.navigation-collapsed {
  width: var(--antumo-nav-width-collapsed);
}

/* Header */
.navigation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--antumo-spacing-6xl) var(--antumo-spacing-3xl);
  flex-shrink: 0;
}

.navigation-logo {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  color: var(--antumo-color-white);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.navigation-logo-icon {
  width: var(--antumo-size-xs);
  height: var(--antumo-size-xs);
  flex-shrink: 0;
}

.navigation-logo-text {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-lg);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-md);
  color: var(--antumo-color-white);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 250ms ease, width 250ms ease;
}

.navigation-logo-icon:has(~ .navigation-logo-text) {
  display: none;
}

.navigation-collapsed .navigation-logo-icon {
  display: block;
}

.navigation-collapsed .navigation-logo-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Content (scrollable area) */
.navigation-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--antumo-spacing-md) 0;
}

.navigation-content::-webkit-scrollbar {
  width: 4px;
}

.navigation-content::-webkit-scrollbar-track {
  background: transparent;
}

.navigation-content::-webkit-scrollbar-thumb {
  background: var(--antumo-alpha-white-20);
  border-radius: var(--antumo-radius-xxs);
}

.navigation-content::-webkit-scrollbar-thumb:hover {
  background: var(--antumo-alpha-white-30);
}

/* Footer */
.navigation-footer {
  position: relative;
  padding: var(--antumo-spacing-3xl) var(--antumo-spacing-3xl) var(--antumo-spacing-6xl);
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
}
.navigation-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--antumo-spacing-3xl);
  right: var(--antumo-spacing-3xl);
  height: 1px;
  background-color: var(--antumo-alpha-white-20);
}

/* Nav Item */
.nav-sidebar-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: var(--antumo-spacing-lg);
  border-radius: var(--antumo-radius-full);
  gap: var(--antumo-spacing-md);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-color-white);
  opacity: 0.9;
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
  position: relative;
  white-space: nowrap;
  text-align: left;
}

.nav-sidebar-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.nav-sidebar-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 250ms ease, width 250ms ease;
}

.nav-item-badge {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  background-color: var(--antumo-bg-error-solid, #e5484d);
  color: var(--antumo-color-white);
  font-size: 11px;
  font-weight: var(--antumo-font-weight-bold);
  line-height: 1;
  border-radius: 9px;
  flex-shrink: 0;
  transition: opacity 250ms ease, width 250ms ease;
}

.nav-item-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, opacity 250ms ease, width 250ms ease;
  color: inherit;
  opacity: 0.7;
}

/* Nav Item — States
   color must be explicit to override global a:hover rules in base reset
   and Bootstrap integration layer. Figma fill_V68EFE = #FFFFFF for all states. */
.nav-sidebar-item:hover,
.nav-item-hover {
  background-color: var(--antumo-bg-sidebar-item-active);
  color: var(--antumo-color-white);
  opacity: 1;
  text-decoration: none;
}

.nav-sidebar-item:focus-visible,
.nav-item-focused {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-full);
  color: var(--antumo-color-white);
  opacity: 1;
  text-decoration: none;
}

.nav-item-current,
.nav-sidebar-item.active {
  background-color: var(--antumo-bg-sidebar-item-active);
  font-weight: var(--antumo-font-weight-medium);
  color: var(--antumo-color-white);
  opacity: 1;
  text-decoration: none;
}

.nav-item-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Nav Item — Sizes */
.nav-item-md {
  height: 44px;
  padding: var(--antumo-spacing-lg);
  font-size: var(--antumo-font-size-sm);
}

.nav-item-md .nav-sidebar-icon {
  width: 20px;
  height: 20px;
}

.nav-item-xl {
  height: 56px;
  padding: 0 12px 0 14px;
  font-size: var(--antumo-font-size-md);
  border-radius: var(--antumo-radius-full);
  gap: var(--antumo-spacing-xl);
}

.nav-item-xl .nav-sidebar-icon {
  width: 24px;
  height: 24px;
}

.nav-item-xl .nav-item-chevron {
  width: 20px;
  height: 20px;
}

/* Nav Item — Levels */
.nav-item-first {
  font-weight: var(--antumo-font-weight-medium);
}

.nav-item-second {
  font-weight: var(--antumo-font-weight-medium);
  padding-left: 56px;
  padding-right: var(--antumo-spacing-6xl); /* 24px — Figma layout_5HL0H1 */
  font-size: 13.3px;
}

.nav-item-xl.nav-item-second {
  padding-left: 68px;
  font-size: 15.2px;
}

/* Nav Group */
.nav-group {
  margin-top: var(--antumo-spacing-4xl);
}

.nav-group:first-child {
  margin-top: 0;
}

.nav-group-title {
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  font-weight: 600;
  line-height: var(--antumo-line-height-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--antumo-alpha-white-70);
  white-space: nowrap;
  overflow: hidden;
  transition: height 250ms ease, opacity 250ms ease, padding 250ms ease;
}

.nav-group-divider {
  height: 1px;
  background-color: var(--antumo-alpha-white-20);
  margin: var(--antumo-spacing-3xl) var(--antumo-spacing-3xl); /* 16px all — inset to match nav items */
  border: none;
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
  padding: 0 var(--antumo-spacing-3xl); /* 16px — Figma layout_R9XAAD */
}

/* Collapsed State */
.navigation-collapsed .nav-group-title {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.navigation-collapsed .nav-sidebar-item {
  justify-content: center;
  padding: var(--antumo-spacing-lg);
  gap: 0; /* prevent hidden elements from creating flex gaps */
}

.navigation-collapsed .nav-sidebar-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.navigation-collapsed .nav-item-badge {
  opacity: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.navigation-collapsed .nav-item-chevron {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.navigation-collapsed .nav-item-second {
  padding-left: var(--antumo-spacing-lg);
}

.navigation-collapsed .navigation-header {
  justify-content: center;
}

.navigation-collapsed .navigation-logo {
  gap: 0; /* prevent hidden logo-text from creating flex gap */
}

.navigation-collapsed .navigation-header {
  position: relative;
}

.navigation-collapsed .navigation-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.navigation-collapsed .navigation-header:hover .navigation-toggle {
  opacity: 0.85;
  pointer-events: auto;
}

.navigation-collapsed .navigation-header:hover .navigation-logo {
  opacity: 0;
}

/* Dropdown */
.nav-dropdown {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}

.nav-dropdown-open {
  max-height: 1000px;
  padding-top: var(--antumo-spacing-xs);
  padding-bottom: var(--antumo-spacing-xs);
}

.nav-dropdown .nav-sidebar-item {
  padding-left: 56px;
}

.nav-dropdown .nav-item-xl {
  padding-left: 68px;
}

.nav-item-dropdown-open .nav-item-chevron {
  transform: rotate(90deg);
}

.navigation-collapsed .nav-dropdown {
  max-height: 0;
  padding: 0;
}

/* Toggle Button */
.navigation-toggle {
  width: var(--antumo-size-md);
  height: var(--antumo-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--antumo-color-white);
  border: none;
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
  flex-shrink: 0;
  opacity: 0.85;
}

.navigation-toggle:hover {
  opacity: 1;
  background-color: var(--antumo-alpha-white-20);
}

.navigation-toggle:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

.navigation-toggle-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 250ms ease;
}

.navigation-collapsed .navigation-toggle-icon {
  transform: rotate(180deg);
}

/* Profile Section */
.nav-profile {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  border-radius: var(--antumo-radius-full);
  cursor: pointer;
  transition: background-color 150ms ease;
  color: var(--antumo-color-white);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.nav-profile:hover {
  background-color: var(--antumo-bg-sidebar-item-active);
  color: var(--antumo-color-white);
  text-decoration: none;
}

.nav-profile:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

.nav-profile-active {
  background-color: var(--antumo-bg-sidebar-item-active);
}

.nav-profile-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--antumo-gray-50);
  border: 1px solid var(--antumo-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--antumo-navy-400);
}

.nav-profile-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
}

.nav-profile-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  transition: opacity 250ms ease, width 250ms ease;
}

.nav-profile-name {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 600;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-profile-email {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  font-weight: var(--antumo-font-weight-regular);
  line-height: var(--antumo-line-height-xs);
  color: var(--antumo-alpha-white-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-footer-extras {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
}

.nav-item-badge.badge-yellow {
  background-color: var(--antumo-yellow-400);
  color: var(--antumo-gray-900);
}

.nav-profile-popover {
  position: absolute;
  bottom: 100%;
  left: var(--antumo-spacing-md);
  right: var(--antumo-spacing-md);
  margin-bottom: var(--antumo-spacing-xs);
  z-index: 100;
  display: none;
  width: auto;
}
.nav-profile-popover.show {
  display: flex;
}

.navigation-collapsed .nav-profile-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.navigation-collapsed .nav-profile {
  justify-content: center;
  padding: var(--antumo-spacing-md);
  gap: 0; /* prevent hidden elements from creating flex gaps */
}

.navigation-collapsed .nav-profile-chevron {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Mobile — max-width: 768px */
@media (max-width: 768px) {
  .nav-sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 0;
    transform: translateX(-100%);
    max-width: 85vw;
    width: 280px;
    box-shadow: 4px 0 24px var(--antumo-alpha-black-30);
    transition: transform 300ms ease;
  }
  .navigation-open {
    transform: translateX(0);
  }
  .navigation-collapsed {
    width: 280px;
  }
  .navigation-collapsed .nav-sidebar-label,
  .navigation-collapsed .nav-item-badge,
  .navigation-collapsed .nav-item-chevron {
    opacity: 1;
    width: auto;
    overflow: visible;
  }
  .navigation-collapsed .nav-item-badge {
    min-width: 18px;
    padding: 0 5px;
  }
  .navigation-collapsed .nav-sidebar-item {
    justify-content: flex-start;
    padding: var(--antumo-spacing-lg);
  }
  .navigation-collapsed .nav-group-title {
    height: auto;
    opacity: 1;
    padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
    overflow: visible;
  }
  .navigation-collapsed .nav-profile-info {
    opacity: 1;
    width: auto;
    overflow: visible;
  }
  .navigation-collapsed .nav-profile {
    justify-content: flex-start;
    padding: var(--antumo-spacing-md) var(--antumo-spacing-xl);
  }
}
/* Overlay (mobile backdrop) */
.navigation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--antumo-alpha-black-50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.navigation-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger (mobile trigger) */
.navigation-hamburger {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--antumo-color-white);
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms ease;
}

.navigation-hamburger:hover {
  background-color: var(--antumo-bg-sidebar-item-active);
}

.navigation-hamburger:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

.navigation-hamburger-icon {
  width: 24px;
  height: 24px;
}

/* Desktop — min-width: 769px */
@media (min-width: 769px) {
  .navigation-hamburger {
    display: none;
  }
  .navigation-overlay {
    display: none;
  }
}
/* Accessibility — Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .nav-sidebar,
  .navigation-logo-text,
  .nav-sidebar-item,
  .nav-sidebar-label,
  .nav-item-badge,
  .nav-item-chevron,
  .nav-group-title,
  .nav-dropdown,
  .navigation-toggle,
  .navigation-toggle-icon,
  .nav-profile,
  .nav-profile-info,
  .navigation-overlay,
  .navigation-hamburger {
    transition: none;
  }
}
/* Utility Classes */
.nav-item-no-icon {
  padding-left: var(--antumo-spacing-lg);
}

.nav-item-no-icon.nav-item-xl {
  padding-left: var(--antumo-spacing-2xl);
}

.nav-item-with-badge .nav-sidebar-label {
  margin-right: var(--antumo-spacing-md);
}

.nav-spacer {
  height: 16px;
  flex-shrink: 0;
}

.nav-divider {
  height: 1px;
  background-color: var(--antumo-alpha-white-20);
  margin: var(--antumo-spacing-3xl);
  border: none;
  flex-shrink: 0;
}

/* ==========================================================================
   App Layout — Antumo Design System
   Application shell layout: main content area alongside sidebar navigation.
   No Bootstrap 5 equivalent — uses .antumo- prefix per convention.

   Consumes --antumo-nav-offset-* variables exposed by _navigation.scss.
   Requires: _navigation.scss loaded first (provides CSS custom properties).

   Figma reference:
   - Main frame (layout_7HPRYK): column, padding 32px 0px 0px
   - Content inner (layout_YLQRBW): padding 0px 32px

   Usage:

     <body>
       <aside>
         <nav class="nav-sidebar navigation-expanded">...</nav>
       </aside>

       <main class="antumo-app-main">
         <div class="antumo-app-content">
           <div class="page-header page-header-desktop-mdm">...</div>
           <!-- page content here -->
         </div>
         <footer class="footer footer-mdm">...</footer>
       </main>
     </body>

   Sidebar collapse: add .sidebar-collapsed to <body> and toggle
   .navigation-expanded / .navigation-collapsed on .nav-sidebar.
   ========================================================================== */
/* Main content area — sits beside the sidebar
   ========================================================================== */
.antumo-app-main {
  margin-left: var(--antumo-nav-offset-expanded); /* 298px = 8 + 280 + 10 */
  margin-top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

/* Collapsed sidebar variant */
.sidebar-collapsed .antumo-app-main {
  margin-left: var(--antumo-nav-offset-collapsed); /* 90px = 8 + 72 + 10 */
}

/* Content area — inner padding matching Figma specs
   Figma: 32px top (from Main frame), 32px horizontal (from content areas)
   ========================================================================== */
.antumo-app-content {
  flex: 1;
  padding: var(--antumo-spacing-7xl); /* 32px — matches Figma */
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-6xl); /* 24px — page rhythm between sections */
}

/* Page header inside app content — container provides padding, strip own */
.antumo-app-content > .page-header {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* Mobile — sidebar becomes drawer, content takes full width
   ========================================================================== */
@media (max-width: 768px) {
  .antumo-app-main {
    margin-left: 0;
    margin-top: 0;
  }
  .antumo-app-content {
    padding: var(--antumo-spacing-3xl); /* 16px — tighter on mobile */
    gap: var(--antumo-spacing-3xl); /* 16px — tighter gap on mobile */
  }
}
/* Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .antumo-app-main {
    transition: none;
  }
}
/* ==========================================================================
   Page Headers — Antumo Design System
   Application component with desktop-mdm, mobile-mdm, and pos variants.
   ========================================================================== */
/* Base
   ========================================================================== */
.page-header {
  display: flex;
  position: relative;
  background-color: transparent;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
}

.page-header *,
.page-header *::before,
.page-header *::after {
  box-sizing: border-box;
}

/* Variant: Desktop MDM — adds horizontal padding for standalone use
   ========================================================================== */
.page-header-desktop-mdm {
  --page-header-width: 100%;
  --page-header-height: auto;
  --page-header-padding-h: 32px;
  --page-header-padding-v: 0px;
  --page-header-gap: 16px;
  padding: 0 var(--antumo-spacing-7xl);
}

/* Variant: Mobile MDM
   ========================================================================== */
.page-header-mobile-mdm {
  --page-header-width: 100%;
  --page-header-height: auto;
  --page-header-padding-h: 16px;
  --page-header-padding-v: 0px;
  --page-header-gap: 16px;
  width: 100%;
  padding: 0 var(--antumo-spacing-3xl);
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
}

/* Variant: POS
   ========================================================================== */
.page-header-pos {
  --page-header-width: 100%;
  --page-header-height: 48px;
  --page-header-padding-h: 32px;
  --page-header-padding-v: 0px;
  --page-header-gap: 0px;
  width: 100%;
  height: var(--antumo-size-lg);
  padding: 0 var(--antumo-spacing-7xl);
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* Breadcrumbs (desktop-mdm only)
   ========================================================================== */
.page-header-breadcrumbs {
  display: none;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  flex-shrink: 0;
}

.page-header-with-breadcrumbs .page-header-breadcrumbs {
  display: flex;
}

.page-header-breadcrumbs-item {
  display: flex;
  align-items: center;
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-sm);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
  border: none;
  background: transparent;
}

.page-header-breadcrumbs-item:hover {
  background-color: rgba(58, 58, 102, 0.08);
  color: var(--antumo-text-brand-solid);
}

.page-header-breadcrumbs-item:active {
  background-color: rgba(58, 58, 102, 0.12);
}

.page-header-breadcrumbs-item-active {
  color: var(--antumo-text-brand-solid);
  cursor: default;
  pointer-events: none;
}

.page-header-breadcrumbs-item-first {
  gap: var(--antumo-spacing-sm);
}

.page-header-breadcrumbs-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.page-header-breadcrumbs-separator {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--antumo-text-tertiary);
  font-size: var(--antumo-font-size-xs);
}

/* Back Button (mobile-mdm and pos)
   ========================================================================== */
.page-header-back-button {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.page-header-with-back-button .page-header-back-button {
  display: flex;
}

.page-header-back-button:hover {
  opacity: 0.8;
}

.page-header-back-button:active {
  opacity: 0.6;
}

.page-header-back-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus, var(--antumo-focus-ring, var(--antumo-text-brand-solid)));
  outline-offset: 2px;
  border-radius: var(--antumo-radius-xs);
}

.page-header-back-button-icon {
  flex-shrink: 0;
}

.page-header-back-button-text {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  color: var(--antumo-text-brand-solid);
}

/* Back button — mobile-mdm variant */
.page-header-mobile-mdm .page-header-back-button {
  gap: var(--antumo-spacing-sm);
  padding: var(--antumo-spacing-xxs) 0;
}

.page-header-mobile-mdm .page-header-back-button-icon {
  width: 20px;
  height: 20px;
}

/* Back button — pos variant */
.page-header-pos .page-header-back-button {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  border-radius: var(--antumo-radius-full);
}

.page-header-pos .page-header-back-button:hover {
  opacity: 1;
  background-color: rgba(58, 58, 102, 0.08);
}

.page-header-pos .page-header-back-button-icon {
  width: 24px;
  height: 24px;
}

.page-header-pos .page-header-back-button-text {
  display: none;
}

/* Header Container
   ========================================================================== */
.page-header-header-container {
  display: flex;
  width: 100%;
  flex-shrink: 0;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--antumo-spacing-3xl);
  align-items: flex-start;
}

.page-header-mobile-mdm .page-header-header-container {
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
}

.page-header-pos .page-header-header-container {
  flex-direction: row;
  flex: 1;
  min-width: 0;
}

/* Content
   ========================================================================== */
.page-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
  flex: 1;
  min-width: 0;
}

.page-header-content {
  padding-right: var(--antumo-spacing-8xl);
}

.page-header-desktop-mdm .page-header-content {
  padding-right: var(--antumo-spacing-8xl);
}

.page-header-mobile-mdm .page-header-content {
  width: 100%;
}

.page-header-pos .page-header-content {
  gap: 0;
  padding-right: var(--antumo-spacing-8xl);
}

/* Title
   ========================================================================== */
.page-header-title {
  margin: 0;
  word-break: break-word;
  flex-shrink: 0;
  width: 100%;
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-2xl);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-lg);
  letter-spacing: -0.24px;
  color: var(--antumo-text-primary);
}

.page-header-mobile-mdm .page-header-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-xl);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-md);
  letter-spacing: -0.2px;
  color: var(--antumo-text-primary);
}

.page-header-pos .page-header-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-2xl);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-lg);
  letter-spacing: -0.24px;
  color: var(--antumo-text-primary);
}

/* Supporting Text
   ========================================================================== */
.page-header-text {
  margin: 0;
  flex-shrink: 0;
  width: 100%;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  font-weight: var(--antumo-font-weight-regular);
  line-height: var(--antumo-line-height-md);
  color: var(--antumo-text-secondary);
}

.page-header-mobile-mdm .page-header-text {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-regular);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
}

.page-header-pos .page-header-text {
  display: none;
}

.page-header-no-supporting-text .page-header-text {
  display: none;
}

/* Actions
   ========================================================================== */
.page-header-actions {
  display: none;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  flex-shrink: 0;
}

.page-header-with-actions .page-header-actions {
  display: flex;
}

.page-header-mobile-mdm .page-header-actions {
  width: 100%;
  flex-wrap: wrap;
}

.page-header-pos .page-header-actions {
  display: none;
}

/* Action Buttons
   ========================================================================== */
.page-header-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-xs);
  height: var(--antumo-size-md);
  padding: 0 var(--antumo-spacing-2xl);
  border-radius: var(--antumo-radius-full);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  box-shadow: var(--antumo-shadow-xs);
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, transform 100ms ease;
}

.page-header-action-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus, var(--antumo-focus-ring, var(--antumo-text-brand-solid)));
  outline-offset: 2px;
}

.page-header-action-button:active {
  transform: translateY(1px);
}

.page-header-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-header-action-button:disabled:active {
  transform: none;
}

/* Action Button — Primary */
.page-header-action-button-primary {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
}

.page-header-action-button-primary:hover {
  background-color: var(--antumo-navy-700);
}

.page-header-action-button-primary:active {
  background-color: var(--antumo-navy-800);
}

/* Action Button — Secondary */
.page-header-action-button-secondary {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-brand-solid);
  border: 1px solid var(--antumo-border-primary);
}

.page-header-action-button-secondary:hover {
  background-color: var(--antumo-gray-50);
  border-color: var(--antumo-gray-300);
}

.page-header-action-button-secondary:active {
  background-color: var(--antumo-gray-100);
  border-color: var(--antumo-gray-400);
}

/* Action Button Icon */
.page-header-action-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive Auto-Switching
   ========================================================================== */
@media (max-width: 767px) {
  .page-header-desktop-mdm {
    display: none;
  }
  .page-header-pos {
    display: none;
  }
  .page-header-mobile-mdm {
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .page-header-desktop-mdm {
    display: none;
  }
  .page-header-mobile-mdm {
    display: none;
  }
  .page-header-pos {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .page-header-mobile-mdm {
    display: none;
  }
  .page-header-pos {
    display: none;
  }
  .page-header-desktop-mdm {
    display: flex;
  }
}
/* Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-header-breadcrumbs-item,
  .page-header-back-button,
  .page-header-action-button {
    transition: none;
  }
}
/* Print
   ========================================================================== */
@media print {
  .page-header-actions {
    display: none;
  }
  .page-header-back-button {
    display: none;
  }
  .page-header {
    border-bottom: 1px solid black;
  }
}
/* ==========================================================================
   Top Navigation Bar
   Application component for POS top navigation bar.
   ========================================================================== */
/* Container
   ========================================================================== */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1176px;
  min-width: 1176px;
  height: 72px;
  padding: var(--antumo-spacing-lg) var(--antumo-spacing-7xl);
  background-color: var(--antumo-bg-primary, #ffffff);
  border-bottom: 1px solid var(--antumo-border-secondary, #e9eaeb);
  box-sizing: border-box;
  position: relative;
  z-index: 100;
}

/* Utility modifiers
   ========================================================================== */
.top-nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 1176px;
  z-index: 1000;
}

.top-nav-shadow {
  box-shadow: var(--antumo-shadow-sm);
}

.top-nav-transparent {
  background-color: transparent;
  border-bottom-color: transparent;
}

/* Logo
   ========================================================================== */
.top-nav-logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.top-nav-logo {
  width: 188px;
  height: 40px;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.top-nav-logo:hover {
  opacity: 0.8;
}

.top-nav-logo:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-sm);
}

/* Right section
   ========================================================================== */
.top-nav-right-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--antumo-spacing-xl);
  flex-shrink: 0;
}

/* Account section
   ========================================================================== */
.top-nav-account {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  height: 52px;
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-2xl) var(--antumo-spacing-xs) var(--antumo-spacing-lg);
  border-radius: var(--antumo-radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 200ms ease;
}

.top-nav-account:hover,
.top-nav-account-hover {
  background-color: var(--antumo-bg-secondary, #fafafa);
}

.top-nav-account:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-sm);
}

.top-nav-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--antumo-navy-50);
  border: 1px solid var(--antumo-navy-100);
  flex-shrink: 0;
}

.top-nav-account-icon svg,
.top-nav-account-icon img {
  width: 20px;
  height: 20px;
  color: var(--antumo-text-tertiary, #535862);
}

.top-nav-account-name {
  font-family: var(--antumo-font-body, sans-serif);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  font-weight: 500;
  color: var(--antumo-text-secondary, #414651);
  white-space: nowrap;
}

/* Keyboard button
   ========================================================================== */
.top-nav-keyboard-button {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  height: 52px;
  width: 120px;
  padding: 0 var(--antumo-spacing-2xl);
  border: none;
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.top-nav-keyboard-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-sm);
}

.top-nav-keyboard-button-off {
  background-color: var(--antumo-bg-primary, #ffffff);
  border: 1px solid transparent;
}

.top-nav-keyboard-button-off:hover {
  background-color: var(--antumo-bg-secondary, #fafafa);
}

.top-nav-keyboard-button-on {
  background-color: var(--antumo-navy-50);
  border: 1px solid var(--antumo-color-focus);
}

.top-nav-keyboard-button-on:hover {
  background-color: var(--antumo-navy-100);
}

.top-nav-keyboard-button-pressed,
.top-nav-keyboard-button:active {
  background-color: var(--antumo-gray-100);
  transform: scale(0.98);
}

.top-nav-keyboard-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--antumo-text-secondary, #414651);
}

.top-nav-keyboard-label {
  font-family: var(--antumo-font-body, sans-serif);
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
  font-weight: 500;
  color: var(--antumo-text-secondary, #414651);
  width: 56px;
  white-space: nowrap;
}

/* DateTime display
   ========================================================================== */
.top-nav-datetime {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  height: 24px;
  font-family: var(--antumo-font-heading, sans-serif);
  font-weight: 700;
  color: var(--antumo-text-primary, #181d27);
  user-select: none;
}

.top-nav-date {
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  white-space: nowrap;
}

.top-nav-time {
  font-size: var(--antumo-font-size-xl);
  line-height: var(--antumo-line-height-md);
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Flag button
   ========================================================================== */
.top-nav-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--antumo-radius-md);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  padding: 0;
  transition: background-color 200ms ease;
}

.top-nav-flag:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-sm);
}

.top-nav-flag-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.top-nav-flag-default {
  background-color: transparent;
}

.top-nav-flag-hover,
.top-nav-flag-open {
  background-color: var(--antumo-bg-secondary, #fafafa);
}

.top-nav-flag-focused {
  background-color: transparent;
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: -2px;
  border-radius: var(--antumo-radius-xl);
}

/* Dropdown
   ========================================================================== */
.top-nav-dropdown {
  position: absolute;
  width: 320px;
  min-height: 120px;
  background-color: var(--antumo-bg-primary, #ffffff);
  border: 1px solid var(--antumo-border-secondary, #e9eaeb);
  border-radius: var(--antumo-radius-md);
  padding: var(--antumo-spacing-xs);
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
  box-sizing: border-box;
}

.top-nav-dropdown-account {
  top: 60px;
  right: 0;
}

.top-nav-dropdown-language {
  top: -44px;
  left: var(--antumo-spacing-9xl);
  height: 280px;
}

.top-nav-dropdown-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Dropdown items
   ========================================================================== */
.top-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-lg);
  padding: var(--antumo-spacing-md) var(--antumo-spacing-lg);
  border-radius: var(--antumo-radius-sm);
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  font-family: var(--antumo-font-body, sans-serif);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary, #414651);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 200ms ease, color 200ms ease;
}

.top-nav-dropdown-item:hover {
  background-color: var(--antumo-gray-100);
}

.top-nav-dropdown-item-active {
  background-color: var(--antumo-navy-50);
  color: var(--antumo-color-focus);
}

.top-nav-dropdown-item:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-sm);
}

/* Dropdown divider
   ========================================================================== */
.top-nav-dropdown-divider {
  height: 1px;
  background-color: var(--antumo-border-secondary, #e9eaeb);
  margin: var(--antumo-spacing-xs) 0;
  border: none;
}

/* Focus ring element
   ========================================================================== */
.top-nav-focus-ring {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--antumo-color-focus, #5b6ef2);
  border-radius: var(--antumo-radius-xl);
  pointer-events: none;
}

/* Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .top-nav {
    width: 100%;
    min-width: 100%;
    padding: var(--antumo-spacing-lg) var(--antumo-spacing-3xl);
  }
  .top-nav-fixed {
    min-width: 100%;
  }
  .top-nav-right-section {
    gap: var(--antumo-spacing-md);
  }
  .top-nav-account-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .top-nav-logo,
  .top-nav-account,
  .top-nav-keyboard-button,
  .top-nav-flag,
  .top-nav-dropdown,
  .top-nav-dropdown-item {
    transition: none !important;
    animation: none !important;
  }
}
/* Dark mode
   ========================================================================== */
[data-theme=dark] .top-nav {
  background-color: var(--antumo-bg-primary, #1a1d23);
  border-bottom-color: var(--antumo-border-secondary, #2d3139);
}
[data-theme=dark] .top-nav-transparent {
  background-color: transparent;
  border-bottom-color: transparent;
}
[data-theme=dark] .top-nav-account:hover,
[data-theme=dark] .top-nav-account-hover {
  background-color: var(--antumo-gray-800);
}
[data-theme=dark] .top-nav-account-icon {
  background-color: var(--antumo-gray-800);
  border-color: var(--antumo-gray-800);
}
[data-theme=dark] .top-nav-account-icon svg,
[data-theme=dark] .top-nav-account-icon img {
  color: var(--antumo-gray-300);
}
[data-theme=dark] .top-nav-account-name {
  color: var(--antumo-text-secondary, #d4d6dd);
}
[data-theme=dark] .top-nav-keyboard-button-off {
  background-color: var(--antumo-bg-primary, #1a1d23);
}
[data-theme=dark] .top-nav-keyboard-button-off:hover {
  background-color: var(--antumo-gray-800);
}
[data-theme=dark] .top-nav-keyboard-button-on {
  background-color: var(--antumo-navy-800);
  border-color: var(--antumo-color-focus);
}
[data-theme=dark] .top-nav-keyboard-button-on:hover {
  background-color: var(--antumo-navy-900);
}
[data-theme=dark] .top-nav-keyboard-button-pressed,
[data-theme=dark] .top-nav-keyboard-button:active {
  background-color: var(--antumo-gray-800);
}
[data-theme=dark] .top-nav-keyboard-icon {
  color: var(--antumo-text-secondary, #d4d6dd);
}
[data-theme=dark] .top-nav-keyboard-label {
  color: var(--antumo-text-secondary, #d4d6dd);
}
[data-theme=dark] .top-nav-datetime {
  color: var(--antumo-text-primary, #f0f1f5);
}
[data-theme=dark] .top-nav-flag-hover,
[data-theme=dark] .top-nav-flag-open {
  background-color: var(--antumo-gray-800);
}
[data-theme=dark] .top-nav-dropdown {
  background-color: var(--antumo-bg-primary, #1a1d23);
  border-color: var(--antumo-border-secondary, #2d3139);
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.15), 0 12px 16px -4px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--antumo-alpha-black-10);
}
[data-theme=dark] .top-nav-dropdown-item {
  color: var(--antumo-text-secondary, #d4d6dd);
}
[data-theme=dark] .top-nav-dropdown-item:hover {
  background-color: var(--antumo-gray-800);
}
[data-theme=dark] .top-nav-dropdown-item-active {
  background-color: var(--antumo-navy-800);
  color: var(--antumo-color-focus);
}
[data-theme=dark] .top-nav-dropdown-divider {
  background-color: var(--antumo-border-secondary, #2d3139);
}

/* Print
   ========================================================================== */
@media print {
  .top-nav {
    border-bottom: 2px solid black;
    box-shadow: none;
  }
  .top-nav-keyboard-button {
    display: none;
  }
  .top-nav-dropdown {
    display: none;
  }
  .top-nav-flag {
    display: none;
  }
}
/* ==========================================================================
   Side Drawer (Panel/Sheet)
   Application component — slides in from left or right with overlay backdrop.
   ========================================================================== */
/* Overlay
   ========================================================================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--antumo-alpha-black-50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.drawer-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer container
   ========================================================================== */
.offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  background: var(--antumo-bg-primary, #ffffff);
  box-shadow: var(--antumo-shadow-lg);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Sizes */
.offcanvas-sm {
  width: 360px;
}

.offcanvas-md {
  width: 440px;
}

.offcanvas-lg {
  width: 600px;
}

/* Position — right (default) */
.drawer-right {
  right: 0;
  transform: translateX(100%);
}

.drawer-right.drawer-open {
  transform: translateX(0);
}

/* Position — left */
.drawer-left {
  left: 0;
  transform: translateX(-100%);
}

.drawer-left.drawer-open {
  transform: translateX(0);
}

/* Header
   ========================================================================== */
.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  min-height: 64px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--antumo-border-tertiary);
  gap: var(--antumo-spacing-xl);
}

.drawer-header-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--antumo-spacing-xxs);
}

.drawer-title {
  font-family: var(--antumo-font-heading, "CircularXX Bold", sans-serif);
  font-size: var(--antumo-font-size-lg);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-md);
  color: var(--antumo-text-primary, #181d27);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-description {
  font-family: var(--antumo-font-body, "Circular LL", sans-serif);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-regular);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary, #535862);
  margin: var(--antumo-spacing-xs) 0 0 0;
}

/* Close button
   ========================================================================== */
.drawer-close-button {
  width: var(--antumo-size-sm);
  height: var(--antumo-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  color: var(--antumo-text-tertiary, #535862);
  flex-shrink: 0;
  padding: 0;
  transition: background-color 150ms ease, color 150ms ease;
}

.drawer-close-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.drawer-close-button:active {
  background-color: var(--antumo-alpha-black-10);
}

.drawer-close-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
}

.drawer-close-icon {
  width: 20px;
  height: 20px;
}

/* Content area
   ========================================================================== */
.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--antumo-spacing-6xl);
  min-height: 0;
}

.drawer-content::-webkit-scrollbar {
  width: 6px;
}

.drawer-content::-webkit-scrollbar-track {
  background: transparent;
}

.drawer-content::-webkit-scrollbar-thumb {
  background: var(--antumo-alpha-black-10);
  border-radius: 3px;
}

.drawer-content-flush {
  padding: 0;
}

/* Actions / footer
   ========================================================================== */
.drawer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--antumo-spacing-xl);
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  flex-shrink: 0;
  border-top: 1px solid var(--antumo-border-secondary, #e9eaeb);
}

.drawer-actions-left-aligned {
  justify-content: flex-start;
}

.drawer-actions-space-between {
  justify-content: space-between;
}

/* Action buttons
   ========================================================================== */
.drawer-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-sm);
  height: var(--antumo-size-md);
  padding: 0 var(--antumo-spacing-3xl);
  border-radius: var(--antumo-radius-full);
  cursor: pointer;
  font-family: var(--antumo-font-heading, "CircularXX Bold", sans-serif);
  font-size: var(--antumo-font-size-sm);
  font-weight: var(--antumo-font-weight-bold);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  white-space: nowrap;
  border: none;
  background: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.drawer-action-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus, #5b6ef2);
  outline-offset: 2px;
}

.drawer-action-button:active {
  transform: translateY(1px);
}

.drawer-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.drawer-action-button:disabled:active {
  transform: none;
}

/* Primary */
.drawer-action-button-primary {
  background-color: var(--antumo-bg-brand-solid, #3a3a66);
  color: var(--antumo-color-white, #ffffff);
  border: none;
}

.drawer-action-button-primary:hover:not(:disabled) {
  background-color: var(--antumo-navy-700);
}

.drawer-action-button-primary:active:not(:disabled) {
  background-color: var(--antumo-navy-800);
}

/* Secondary */
.drawer-action-button-secondary {
  background-color: var(--antumo-bg-primary, #ffffff);
  color: var(--antumo-text-primary, #181d27);
  border: 1px solid var(--antumo-border-primary, #d5d7da);
}

.drawer-action-button-secondary:hover:not(:disabled) {
  background-color: var(--antumo-gray-50);
  border-color: var(--antumo-gray-300);
}

.drawer-action-button-secondary:active:not(:disabled) {
  background-color: var(--antumo-gray-100);
}

/* Destructive */
.drawer-action-button-destructive {
  background-color: var(--antumo-red-500);
  color: var(--antumo-color-white, #ffffff);
  border: none;
}

.drawer-action-button-destructive:hover:not(:disabled) {
  background-color: var(--antumo-red-700);
}

.drawer-action-button-destructive:active:not(:disabled) {
  background-color: var(--antumo-red-800);
}

/* Ghost */
.drawer-action-button-ghost {
  background-color: transparent;
  color: var(--antumo-text-secondary, #414651);
  border: none;
}

.drawer-action-button-ghost:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.06);
}

.drawer-action-button-ghost:active:not(:disabled) {
  background-color: var(--antumo-alpha-black-10);
}

/* Action icon */
.drawer-action-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Loading state
   ========================================================================== */
.drawer-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--antumo-alpha-white-80);
  z-index: 10;
}

.drawer-spinner {
  width: var(--antumo-size-xs);
  height: var(--antumo-size-xs);
  border: 3px solid var(--antumo-border-secondary, #e9eaeb);
  border-top-color: var(--antumo-bg-brand-solid, #3a3a66);
  border-radius: 50%;
  animation: antumo-drawer-spin 0.8s linear infinite;
}

@keyframes antumo-drawer-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Mobile responsive
   ========================================================================== */
@media (max-width: 640px) {
  .offcanvas {
    width: 100% !important;
    max-width: 100%;
    border-radius: 0;
  }
  .drawer-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}
/* Accessibility — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .drawer-overlay {
    transition: none;
  }
  .offcanvas {
    transition: none;
  }
  .drawer-close-button {
    transition: none;
  }
  .drawer-action-button {
    transition: none;
  }
  .drawer-spinner {
    animation: none;
  }
}
/* Print
   ========================================================================== */
@media print {
  .drawer-overlay {
    display: none;
  }
  .offcanvas {
    position: static;
    width: auto;
    box-shadow: none;
    transform: none;
  }
}
/* ==========================================================================
   Footer Component
   Application footer with logo and version information.
   Variant: --mdm (desktop/tablet)
   Figma: Footer MDM (1157:4676) — single COMPONENT, no COMPONENT_SET.
   ========================================================================== */
.footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--antumo-spacing-3xl);
  width: 100%;
  box-sizing: border-box;
  background: var(--antumo-bg-primary);
  font-family: var(--antumo-font-body);
  transition: background 0.15s ease;
  /* Default padding (MDM density) — works without .footer-mdm */
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-7xl);
}

/* Platform variants
   ========================================================================== */
.footer-mdm {
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-7xl);
}

/* [DEPRECATED] POS variant — does NOT exist in Figma. Retained for backward
   compatibility with existing integrations. Do not use in new code.
   Remove once all consuming projects have migrated. */
.footer-pos {
  padding: var(--antumo-spacing-6xl) var(--antumo-spacing-8xl);
}

/* Logo section
   ========================================================================== */
.footer-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer-logo-image {
  width: 73px;
  height: 16px;
  display: block;
}

/* [DEPRECATED] POS logo override — see .footer-pos note above. */
.footer-pos .footer-logo-image {
  width: 80px;
  height: 18px;
}

/* Version section
   ========================================================================== */
.footer-version {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-3xl);
  flex-shrink: 0;
}

.footer-version-text {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-quaternary);
  white-space: nowrap;
}

/* [DEPRECATED] Separate version-number styling — Figma uses a single text
   node for the entire version string. Retained for backward compatibility. */
.footer-version-number {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  font-weight: var(--antumo-font-weight-regular);
  color: var(--antumo-text-quaternary);
  white-space: nowrap;
}

/* Content section (optional center content — not in Figma spec)
   ========================================================================== */
.footer-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-3xl);
  min-width: 0;
}

/* Modifiers
   ========================================================================== */
.footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 50;
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.footer-centered {
  justify-content: center;
}

.footer-border-top {
  border-top: 1px solid var(--antumo-border-secondary);
}

.footer-no-border {
  border-top: none;
}

.footer-bg-secondary {
  background: var(--antumo-bg-secondary);
}

/* Mobile responsive
   NOTE: Figma does not define a mobile breakpoint for Footer.
   These styles are an implementation convenience, not Figma-verified.
   ========================================================================== */
@media (max-width: 640px) {
  .footer {
    flex-direction: column;
    padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
    gap: var(--antumo-spacing-xl);
    text-align: center;
  }
  .footer-mdm {
    padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
  }
  /* [DEPRECATED] */
  .footer-pos {
    padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
  }
  .footer-logo {
    width: 100%;
    justify-content: center;
  }
  .footer-version {
    width: 100%;
    justify-content: center;
  }
  .footer-version-text {
    white-space: normal;
  }
  .footer-content {
    width: 100%;
    justify-content: center;
  }
}
/* Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .footer {
    transition: none;
  }
}
/* Print
   ========================================================================== */
@media print {
  .footer {
    border-top: 1px solid black;
    background: transparent;
    position: static;
  }
  .footer-sticky,
  .footer-fixed {
    position: static;
  }
}
/* ==========================================================================
   Date Pickers — Antumo Design System
   Source of truth: Figma node 1099:2558
   ========================================================================== */
/* Container (Dates panel)
   Figma: bg #FFFFFF, border 1px #E9EAEB, radius 16px, shadow-lg
   ========================================================================== */
.datepicker {
  display: inline-flex;
  flex-direction: column;
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-2xl);
  box-shadow: var(--antumo-shadow-lg);
  overflow: hidden;
  user-select: none;
  width: 294px;
}

/* Size: md (default) — 40px cells, 294px total */
.datepicker-md {
  width: 294px;
}

.datepicker-md .datepicker-day {
  width: 40px;
  height: 40px;
  font-size: var(--antumo-font-size-sm);
}

.datepicker-md .datepicker-weekday {
  width: 40px;
  height: 36px;
}

/* Size: xl — 48px cells, 350px total */
.datepicker-xl {
  width: 350px;
}

.datepicker-xl .datepicker-day {
  width: 48px;
  height: 48px;
  font-size: var(--antumo-font-size-sm);
}

.datepicker-xl .datepicker-weekday {
  width: 48px;
  height: 40px;
}

/* Size: 2xl — 56px cells, 406px total */
.datepicker-2xl {
  width: 406px;
}

.datepicker-2xl .datepicker-day {
  width: 56px;
  height: 56px;
  font-size: var(--antumo-font-size-md);
  line-height: var(--antumo-line-height-md);
}

.datepicker-2xl .datepicker-weekday {
  width: 56px;
  height: 44px;
}

/* Navigation bar
   Figma: row, space-between, Button utility sm (32×32, radius 6px)
   Month/Year: Label md (Circular LL 500 14px), text-primary
   ========================================================================== */
.datepicker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
  gap: var(--antumo-spacing-md);
}

.datepicker-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background-color: transparent;
  border-radius: var(--antumo-radius-sm);
  cursor: pointer;
  color: var(--antumo-text-secondary);
  transition: background-color 150ms ease, color 150ms ease;
}

.datepicker-nav-button:hover {
  background-color: var(--antumo-gray-100);
}

.datepicker-nav-button:active {
  background-color: var(--antumo-bg-tertiary);
}

.datepicker-nav-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

.datepicker-nav-button:disabled,
.datepicker-nav-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.datepicker-nav-icon {
  width: 20px;
  height: 20px;
}

/* Nav title: Label md — Circular LL 500 14px, text-primary */
.datepicker-nav-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-xs);
  text-align: center;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-primary);
  cursor: pointer;
  transition: color 150ms ease;
}

.datepicker-nav-title:hover {
  color: var(--antumo-bg-brand-solid);
}

/* Weekday header row
   Figma: Body md (Circular LL 400 14px), text-tertiary (#535862)
   NO uppercase, NO letter-spacing, NO background
   Height: 36px (md), bottom border
   ========================================================================== */
.datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 var(--antumo-spacing-md);
  border-bottom: 1px solid var(--antumo-border-secondary);
}

.datepicker-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary);
}

/* Calendar grid
   Figma: 7 columns, no gap, cells are adjacent
   ========================================================================== */
.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: var(--antumo-spacing-xs) var(--antumo-spacing-md) var(--antumo-spacing-md);
  gap: 0;
}

/* Day cell
   Figma: Label md (Circular LL 500 14px), text-secondary (#414651)
   borderRadius 999px (pill/circle), transparent bg
   ========================================================================== */
.datepicker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--antumo-radius-full);
  cursor: pointer;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  transition: background-color 150ms ease, color 150ms ease;
  position: relative;
  border: none;
  background-color: transparent;
  padding: 0;
}

/* Day: hover (Default type) — bg gray-50 (#FAFAFA) */
.datepicker-day:hover,
.datepicker-day-hover {
  background-color: var(--antumo-gray-50);
}

.datepicker-day:active {
  background-color: var(--antumo-gray-100);
}

.datepicker-day:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
  border-radius: var(--antumo-radius-full);
}

/* Day: today — bg gray-50 (#FAFAFA), same text color, fontWeight 500
   Figma: visually identical to Active type. No dot, no border, no blue. */
.datepicker-day-today {
  background-color: var(--antumo-gray-50);
}

.datepicker-day-today:hover {
  background-color: var(--antumo-gray-100);
}

/* Day: active (event marker, etc.) — bg gray-50 (#FAFAFA)
   Figma: visually identical to Today's date */
.datepicker-day-active {
  background-color: var(--antumo-gray-50);
}

.datepicker-day-active:hover {
  background-color: var(--antumo-gray-100);
}

/* Day: selected — bg navy-500 (#3A3A66), white text, fontWeight 500 */
.datepicker-day-selected {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
}

/* Day: selected hover — bg navy-600 (#32355A) */
.datepicker-day-selected:hover,
.datepicker-day-selected.datepicker-day-hover {
  background-color: var(--antumo-navy-600);
}

/* Day: disabled — explicit colors, NO opacity, fontWeight 400 (Body md)
   Figma: Disabled cells drop from Label md (500) to Body md (400) */
.datepicker-day-disabled {
  color: var(--antumo-gray-500);
  font-weight: 400;
  cursor: not-allowed;
  pointer-events: none;
}

/* Day: disabled + active/today/selected — bg gray-50, gray-500 text */
.datepicker-day-disabled.datepicker-day-today,
.datepicker-day-disabled.datepicker-day-active,
.datepicker-day-disabled.datepicker-day-selected {
  background-color: var(--antumo-gray-50);
  color: var(--antumo-gray-500);
}

/* Day: outside month (overflow from adjacent months) */
.datepicker-day-outside-month {
  color: var(--antumo-gray-500);
  font-weight: 400;
}

/* Day: in range (between start and end) — navy-500 at 8% opacity */
.datepicker-day-in-range {
  background-color: rgba(58, 58, 102, 0.08);
  border-radius: 0;
}

/* Day: range start — navy-500 bg, pill-left radius */
.datepicker-day-range-start {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border-radius: var(--antumo-radius-full) 0 0 var(--antumo-radius-full);
}

/* Day: range end — navy-500 bg, pill-right radius */
.datepicker-day-range-end {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border-radius: 0 999px 999px 0;
}

/* Day: single day range (start + end) */
.datepicker-day-range-start.datepicker-day-range-end {
  border-radius: var(--antumo-radius-full);
}

/* Range connectors — background behind cells for visual range bridge */
.datepicker-day-connector-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(58, 58, 102, 0.08);
  z-index: -1;
}

.datepicker-day-connector-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(58, 58, 102, 0.08);
  z-index: -1;
}

/* Tab bar (Multi-date / Date Range toggle)
   Figma: Horizontal tabs, style=button minimal
   Container: bg gray-50, border border-secondary, radius 8px
   Active tab: bg white, shadow-xs, radius 8px
   Inactive tab: text gray-500
   ========================================================================== */
.datepicker-tabs {
  display: flex;
  margin: 0 var(--antumo-spacing-3xl);
  padding: var(--antumo-spacing-xs);
  background-color: var(--antumo-gray-50);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-md);
  gap: 0;
}

.datepicker-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-sm) var(--antumo-spacing-xl);
  border: none;
  border-radius: var(--antumo-radius-md);
  background-color: transparent;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-gray-500);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.datepicker-tab:hover {
  color: var(--antumo-text-secondary);
}

.datepicker-tab-active {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-text-secondary);
  box-shadow: var(--antumo-shadow-xs);
}

/* Month / Year selector
   ========================================================================== */
.datepicker-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--antumo-spacing-xs);
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl) var(--antumo-spacing-3xl);
}

.datepicker-month-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-md);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  cursor: pointer;
  border: none;
  background-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}

.datepicker-month-cell:hover {
  background-color: var(--antumo-gray-50);
}

.datepicker-month-cell:active {
  background-color: var(--antumo-gray-100);
}

.datepicker-month-cell-selected {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
}

.datepicker-month-cell-selected:hover {
  background-color: var(--antumo-navy-600);
}

.datepicker-month-cell-current {
  font-weight: 600;
}

.datepicker-month-cell-disabled {
  color: var(--antumo-gray-500);
  font-weight: 400;
  cursor: not-allowed;
  pointer-events: none;
}

/* Year selection grid
   Figma: Year cell (1787:28769) — 56×40px, 4 columns × 3 rows
   Default: text-secondary, no bg. Selected: navy-500, white, pill.
   ========================================================================== */
.datepicker-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--antumo-spacing-xs);
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl) var(--antumo-spacing-3xl);
}

.datepicker-year-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--antumo-spacing-lg);
  border: none;
  background-color: transparent;
  border-radius: 0;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.datepicker-year-cell:hover {
  background-color: var(--antumo-gray-50);
  border-radius: var(--antumo-radius-full);
}

.datepicker-year-cell-selected {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border-radius: var(--antumo-radius-full);
}

.datepicker-year-cell-selected:hover {
  background-color: var(--antumo-navy-600);
}

.datepicker-year-cell-current {
  font-weight: 600;
}

.datepicker-year-cell-disabled {
  color: var(--antumo-gray-500);
  font-weight: 400;
  cursor: not-allowed;
  pointer-events: none;
}

/* Time section
   ========================================================================== */
.datepicker-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-md);
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
  border-top: 1px solid var(--antumo-border-secondary);
}

.datepicker-time-input {
  width: 60px;
  height: 36px;
  text-align: center;
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-md);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  color: var(--antumo-text-primary);
  background-color: transparent;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.datepicker-time-input:focus {
  border-color: var(--antumo-color-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--antumo-alpha-focus-20);
}

.datepicker-time-separator {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 600;
  color: var(--antumo-text-tertiary);
}

.datepicker-time-period {
  display: flex;
  gap: var(--antumo-spacing-xs);
}

.datepicker-time-period-button {
  padding: var(--antumo-spacing-sm) var(--antumo-spacing-xl);
  border-radius: var(--antumo-radius-sm);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--antumo-border-secondary);
  background-color: transparent;
  color: var(--antumo-text-primary);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.datepicker-time-period-button:hover {
  background-color: var(--antumo-gray-50);
}

.datepicker-time-period-button-active {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border-color: var(--antumo-bg-brand-solid);
}

/* Actions footer
   ========================================================================== */
.datepicker-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--antumo-spacing-md);
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
  border-top: 1px solid var(--antumo-border-secondary);
}

.datepicker-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
  border-radius: var(--antumo-radius-md);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.datepicker-action-button-secondary {
  background-color: transparent;
  color: var(--antumo-text-secondary);
  border: 1px solid var(--antumo-border-secondary);
}

.datepicker-action-button-secondary:hover {
  background-color: var(--antumo-gray-50);
}

.datepicker-action-button-secondary:active {
  background-color: var(--antumo-gray-100);
}

.datepicker-action-button-primary {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border: 1px solid var(--antumo-bg-brand-solid);
}

.datepicker-action-button-primary:hover {
  background-color: var(--antumo-navy-600);
  border-color: var(--antumo-navy-600);
}

.datepicker-action-button-primary:active {
  background-color: var(--antumo-navy-700);
  border-color: var(--antumo-navy-700);
}

.datepicker-action-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

/* Dual calendar layout (side-by-side)
   Figma: Two panels, left radius 16px 0 0 16px, right 0 16px 16px 0
   ========================================================================== */
.datepicker-dual {
  display: flex;
  flex-direction: row;
}

.datepicker-dual > .datepicker:first-child {
  border-radius: var(--antumo-radius-2xl) 0 0 var(--antumo-radius-2xl);
  border-right: none;
}

.datepicker-dual > .datepicker:last-child {
  border-radius: 0 16px 16px 0;
}

/* Stacked calendar layout (vertical)
   Figma: Two panels, top radius 16px 16px 0 0, bottom 0 0 16px 16px
   ========================================================================== */
.datepicker-stacked {
  display: flex;
  flex-direction: column;
}

.datepicker-stacked > .datepicker:first-child {
  border-radius: var(--antumo-radius-2xl) var(--antumo-radius-2xl) 0 0;
  border-bottom: none;
}

.datepicker-stacked > .datepicker:last-child {
  border-radius: 0 0 16px 16px;
}

/* Inline variant (no shadow/border)
   ========================================================================== */
.datepicker-inline {
  box-shadow: none;
  border: none;
  border-radius: 0;
}

/* Animation: entering
   ========================================================================== */
@keyframes antumo-datepicker-enter {
  from {
    opacity: 0;
    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
.datepicker-entering {
  animation: antumo-datepicker-enter 200ms ease-out;
  transform-origin: top center;
}

/* Mobile responsive
   ========================================================================== */
@media (max-width: 480px) {
  .datepicker {
    width: 100%;
    min-width: 0;
    border-radius: 0;
  }
  .datepicker-md .datepicker-day {
    font-size: var(--antumo-font-size-xs);
  }
  .datepicker-md .datepicker-weekday {
    font-size: var(--antumo-font-size-xs);
  }
  .datepicker-dual {
    flex-direction: column;
  }
  .datepicker-dual > .datepicker:first-child {
    border-radius: var(--antumo-radius-2xl) var(--antumo-radius-2xl) 0 0;
    border-right: 1px solid var(--antumo-border-secondary);
    border-bottom: none;
  }
  .datepicker-dual > .datepicker:last-child {
    border-radius: 0 0 16px 16px;
  }
}
/* Accessibility: reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .datepicker-nav-button,
  .datepicker-day,
  .datepicker-month-cell,
  .datepicker-year-cell,
  .datepicker-tab,
  .datepicker-time-input,
  .datepicker-time-period-button,
  .datepicker-action-button,
  .datepicker-nav-title {
    transition: none;
  }
  .datepicker-entering {
    animation: none;
  }
}
/* ==========================================================================
   File Upload — Antumo Design System
   Figma: _File upload base (1118:5310) + _File upload item (1431:119457)
   ========================================================================== */
/* Drop Zone (Upload Base)
   Figma: padding 16px 24px, border 1px #D5D7DA, bg #FFFFFF, radius 12px
   ========================================================================== */
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--antumo-spacing-lg);
  width: 100%;
  max-width: 434px;
  padding: var(--antumo-spacing-3xl) var(--antumo-spacing-6xl);
  border: 1px solid var(--antumo-border-primary);
  border-radius: var(--antumo-radius-xl);
  background-color: var(--antumo-bg-primary);
  cursor: pointer;
  user-select: none;
  transition: border-color 200ms ease, background-color 200ms ease;
  box-sizing: border-box;
}

/* Drop Zone — Hover: border navy-500, bg stays white */
.upload-dropzone-hover,
.upload-dropzone:hover {
  border-color: var(--antumo-border-brand);
}

/* Drop Zone — Dragging: border navy-500 solid, bg stays white */
.upload-dropzone-dragging {
  border-color: var(--antumo-border-brand);
}

/* Drop Zone — Disabled: bg gray-50, border border-secondary */
.upload-dropzone-disabled {
  background-color: var(--antumo-bg-secondary);
  border-color: var(--antumo-border-secondary);
  cursor: not-allowed;
  pointer-events: none;
}

.upload-dropzone-error {
  border-color: var(--antumo-border-error);
}

/* Drop Zone — Inner content area (Frame 2): column, center, gap 12px */
.upload-dropzone-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: var(--antumo-spacing-xl);
}

/* Featured Icon container: 40×40, bg white, border 1px #D5D7DA, radius 8px */
.upload-dropzone-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--antumo-radius-md);
  background-color: var(--antumo-bg-primary);
  border: 1px solid var(--antumo-border-primary);
}

/* Upload icon inside featured icon: 20×20, stroke #414651 */
.upload-dropzone-icon svg {
  width: 20px;
  height: 20px;
  color: var(--antumo-text-secondary);
}

/* Text area (Frame 3): column, center, gap 4px */
.upload-dropzone-text-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: var(--antumo-spacing-xs);
}

/* Text row (Frame 1): row, baseline, gap 4px */
.upload-dropzone-text {
  display: flex;
  align-items: baseline;
  gap: var(--antumo-spacing-xs);
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary);
  text-align: center;
}

/* "Choose a File" link: Link md, 500, navy-500 */
.upload-dropzone-browse {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-brand-solid);
  cursor: pointer;
  text-decoration: underline;
  transition: opacity 150ms ease;
  background: none;
  border: none;
  padding: 0;
}

.upload-dropzone-browse:hover {
  opacity: 0.8;
}

/* Hint text: Body md, 400, 14px, text-tertiary */
.upload-dropzone-hint {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary);
  text-align: center;
}

/* Hidden file input */
.upload-dropzone-input {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* File List Container
   Figma assembled: gap 12px
   ========================================================================== */
.upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
  width: 100%;
  max-width: 434px;
  box-sizing: border-box;
}

/* File Item
   Figma: column, stretch, gap 10px, padding 16px, radius 12px, border 1px #E9EAEB
   ========================================================================== */
.upload-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--antumo-spacing-lg);
  padding: var(--antumo-spacing-3xl);
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  background-color: var(--antumo-bg-primary);
  position: relative;
  transition: border-color 200ms ease;
  box-sizing: border-box;
}

/* File Item — States */
.upload-item-completed {
  border-color: var(--antumo-border-secondary);
}

.upload-item-uploading {
  border-color: var(--antumo-border-secondary);
}

.upload-item-failed {
  border-color: var(--antumo-border-error);
}

/* File Item — File Info row: row, gap 10px, fill width */
.upload-item-file-info {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  gap: var(--antumo-spacing-lg);
}

/* File icon: 20×20, stroke #A4A7AE */
.upload-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--antumo-gray-400);
}

.upload-item-icon svg {
  width: 20px;
  height: 20px;
}

/* File info container: column, gap 5px, fill width */
.upload-item-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

/* File name: Label md, 500, 14px, text-secondary #414651 */
.upload-item-filename {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Metadata row: row, center, gap 8px */
.upload-item-metadata {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
}

/* File size: Body md, 400, 14px, text-tertiary #535862 */
.upload-item-filesize {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-tertiary);
}

/* Metadata separator line */
.upload-item-separator {
  width: 1px;
  height: 12px;
  background-color: var(--antumo-gray-400);
  flex-shrink: 0;
}

/* Status indicator: row, center, gap 4px */
.upload-item-status {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xs);
}

.upload-item-status-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Status text: Label sm, 500, 12px */
.upload-item-status-text {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  font-weight: 500;
  line-height: var(--antumo-line-height-xs);
}

/* Completed status: green-600 #268A5E */
.upload-item-status-completed .upload-item-status-icon {
  color: var(--antumo-fg-success-primary);
}

.upload-item-status-completed .upload-item-status-text {
  color: var(--antumo-fg-success-primary);
}

/* Uploading status: gray-500 #717680 */
.upload-item-status-uploading .upload-item-status-icon {
  color: var(--antumo-text-quaternary);
}

.upload-item-status-uploading .upload-item-status-text {
  color: var(--antumo-text-quaternary);
}

/* Failed status: red-600 #B53F3F */
.upload-item-status-failed .upload-item-status-icon {
  color: var(--antumo-text-error);
}

.upload-item-status-failed .upload-item-status-text {
  color: var(--antumo-text-error);
}

/* "Try again" link: Button md (Circular XX 700), navy-500 */
.upload-item-retry-link {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  font-weight: 700;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-brand-solid);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: opacity 150ms ease;
}

.upload-item-retry-link:hover {
  opacity: 0.8;
}

/* Delete Button (Button utility sm): 32×32, absolute top-right, radius 6px */
.upload-item-delete-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--antumo-radius-sm);
  cursor: pointer;
  color: var(--antumo-text-tertiary);
  padding: 0;
  position: absolute;
  top: var(--antumo-spacing-sm);
  right: var(--antumo-spacing-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.upload-item-delete-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--antumo-text-error);
}

.upload-item-delete-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 1px;
}

/* Delete button icon: 20×20 (trash-2) */
.upload-item-delete-button svg {
  width: 20px;
  height: 20px;
}

/* Progress Bar
   Figma: column, align flex-end, gap 8px, fill width
   Bar: height 8px, radius 8px, track #E9EAEB, fill navy-500
   ========================================================================== */
.upload-item-progress-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  gap: var(--antumo-spacing-md);
}

.upload-item-progress {
  width: 100%;
  height: 8px;
  background-color: var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-md);
  overflow: hidden;
}

.upload-item-progress-bar {
  height: 100%;
  background-color: var(--antumo-navy-500);
  border-radius: var(--antumo-radius-md);
  transition: width 300ms ease;
  width: 0%;
}

.upload-item-progress-bar-failed {
  background-color: var(--antumo-bg-error-solid);
}

/* Progress percentage: Label md, 500, 14px, text-secondary #414651 */
.upload-item-percentage {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
}

/* Assembled File Upload Container
   Figma: column, stretch, gap 12px
   ========================================================================== */
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--antumo-spacing-xl);
  width: 100%;
  max-width: 434px;
}

/* Compact Variant (not in Figma — implementation convenience)
   ========================================================================== */
.upload-dropzone-compact {
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
}

.upload-dropzone-compact .upload-dropzone-icon {
  width: 32px;
  height: 32px;
}

.upload-dropzone-compact .upload-dropzone-icon svg {
  width: 16px;
  height: 16px;
}

.upload-dropzone-compact .upload-dropzone-hint {
  display: none;
}

/* Mobile Responsive
   ========================================================================== */
@media (max-width: 480px) {
  .upload-dropzone {
    max-width: 100%;
  }
  .upload-list {
    max-width: 100%;
  }
  .upload-container {
    max-width: 100%;
  }
}
/* Accessibility — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .upload-dropzone {
    transition: none;
  }
  .upload-item {
    transition: none;
  }
  .upload-item-progress-bar {
    transition: none;
  }
  .upload-item-delete-button {
    transition: none;
  }
  .upload-dropzone-browse {
    transition: none;
  }
  .upload-item-retry-link {
    transition: none;
  }
}
/* Print
   ========================================================================== */
@media print {
  .upload-dropzone {
    display: none;
  }
  .upload-item {
    border: 1px solid black;
    background: white;
  }
  .upload-item-progress {
    display: none;
  }
  .upload-item-delete-button {
    display: none;
  }
}
/* ==========================================================================
   Empty States
   Application component for displaying placeholder content when no data exists.
   Supports horizontal (inline) and vertical (stacked) layouts.
   DS Figma: node 1586:108659
   ========================================================================== */
/* Base
   ========================================================================== */
.empty-state {
  display: flex;
  align-items: center;
  border-radius: var(--antumo-radius-xl);
  box-sizing: border-box;
}

/* Layout: Horizontal
   DS: row, gap 12px, padding 16px, bg #F5F5F5, border-radius 12px
   ========================================================================== */
.empty-state-horizontal {
  flex-direction: row;
  gap: var(--antumo-spacing-xl);
  background-color: var(--antumo-bg-tertiary);
  padding: var(--antumo-spacing-3xl);
}

/* Layout: Vertical
   DS: column wrapper, gap 20px (icon → content), padding 16px
   ========================================================================== */
.empty-state-vertical {
  flex-direction: column;
  text-align: center;
  gap: var(--antumo-spacing-4xl);
  padding: var(--antumo-spacing-3xl);
}

/* Icon Container
   ========================================================================== */
.empty-state-icon-container {
  flex-shrink: 0;
}

/* Vertical: DS Featured icon lg Neutral — 48×48, bg #F5F5F5, circle */
.empty-state-vertical .empty-state-icon-container {
  width: 48px;
  height: 48px;
  border-radius: var(--antumo-radius-full);
  background-color: var(--antumo-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon
   ========================================================================== */
/* Horizontal: 20×20 placeholder icon, gray-400 (#A4A7AE) per Figma */
.empty-state-icon {
  width: 20px;
  height: 20px;
  color: var(--antumo-gray-400);
  flex-shrink: 0;
}

/* Vertical: 24×24 icon inside featured circle, stroke #535862 */
.empty-state-vertical .empty-state-icon {
  width: 24px;
  height: 24px;
  color: var(--antumo-text-tertiary);
}

/* Content
   DS: gap 4px between heading and body; action spacing via margin-top
   ========================================================================== */
.empty-state-content {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
  flex: 1;
  min-width: 0;
}

.empty-state-vertical .empty-state-content {
  align-items: center;
  text-align: center;
}

/* Heading — DS Label md: Circular LL, 500, 14/20, #414651
   ========================================================================== */
.empty-state-heading {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 500;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  margin: 0;
}

/* Body Text — DS Body md: Circular LL, 400, 14/20, #414651
   ========================================================================== */
.empty-state-body {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-text-secondary);
  margin: 0;
}

/* Action Button — DS Button secondary sm, pill (999px radius)
   Horizontal: 12px from body → 4px content gap + 8px margin
   Vertical:   16px from body → 4px content gap + 12px margin
   ========================================================================== */
.empty-state-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--antumo-spacing-xs);
  height: 36px;
  padding: 0 var(--antumo-spacing-2xl);
  border-radius: var(--antumo-radius-full);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-sm);
  font-weight: 700;
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  white-space: nowrap;
  margin-top: var(--antumo-spacing-md);
  text-decoration: none;
  box-sizing: border-box;
}

.empty-state-vertical .empty-state-action {
  margin-top: var(--antumo-spacing-xl);
}

.empty-state-action:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

/* Action: Primary
   ========================================================================== */
.empty-state-action-primary {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
  border: none;
}

.empty-state-action-primary:hover {
  background-color: var(--antumo-navy-600);
}

/* Action: Secondary — DS: bg white, border #D5D7DA, shadow-xs
   ========================================================================== */
.empty-state-action-secondary {
  background-color: var(--antumo-bg-primary);
  color: var(--antumo-navy-500);
  border: 1px solid var(--antumo-border-primary);
  box-shadow: var(--antumo-shadow-xs);
}

.empty-state-action-secondary:hover {
  background-color: var(--antumo-gray-50);
  border-color: var(--antumo-gray-400);
}

/* Action Icon
   ========================================================================== */
.empty-state-action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Modifier: Bordered
   ========================================================================== */
.empty-state-bordered {
  border: 1px solid var(--antumo-border-secondary);
}

/* Responsive: Mobile
   ========================================================================== */
@media (max-width: 480px) {
  .empty-state-horizontal {
    flex-direction: column;
    text-align: center;
  }
  .empty-state-horizontal .empty-state-content {
    align-items: center;
    text-align: center;
  }
}
/* Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .empty-state-action {
    transition: none;
  }
}
/* Print
   ========================================================================== */
@media print {
  .empty-state {
    border: 1px solid black;
    background-color: transparent;
  }
  .empty-state-horizontal {
    background-color: transparent;
  }
  .empty-state-icon-container {
    background-color: transparent;
  }
}
/* ==========================================================================
   Code Snippet — Antumo Design System
   Two-column code display with line numbers and syntax highlighting
   ========================================================================== */
/* Container
   ========================================================================== */
.code-snippet {
  width: 720px;
  max-width: 100%;
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  max-height: 400px;
  position: relative;
  background: var(--antumo-bg-primary);
}

/* Header (optional)
   ========================================================================== */
.code-snippet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--antumo-spacing-md) var(--antumo-spacing-3xl);
  border-bottom: 1px solid var(--antumo-border-secondary);
  background: var(--antumo-bg-secondary);
  min-height: 36px;
  flex-shrink: 0;
}

.code-snippet-filename {
  font-size: 13px;
  font-weight: 500;
  color: var(--antumo-text-primary);
}

.code-snippet-language {
  font-size: 11px;
  font-weight: 600;
  color: var(--antumo-text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sidebar (line numbers)
   ========================================================================== */
.code-snippet-sidebar {
  width: 49px;
  min-width: 49px;
  background: var(--antumo-bg-secondary);
  border-right: 1px solid var(--antumo-border-secondary);
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-3xl);
  overflow-y: auto;
  user-select: none;
  flex-shrink: 0;
}

.code-snippet-sidebar::-webkit-scrollbar {
  width: 4px;
}

.code-snippet-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.code-snippet-sidebar::-webkit-scrollbar-thumb {
  background: var(--antumo-alpha-black-10);
  border-radius: 2px;
}

.code-snippet-line-number {
  color: var(--antumo-text-quaternary);
  font-weight: 700;
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  text-align: right;
  white-space: nowrap;
  min-height: 20px;
}

/* Content area
   ========================================================================== */
.code-snippet-content {
  flex: 1;
  background: var(--antumo-bg-primary);
  padding: var(--antumo-spacing-4xl);
  overflow: auto;
  min-width: 0;
}

.code-snippet-content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.code-snippet-content::-webkit-scrollbar-track {
  background: transparent;
}

.code-snippet-content::-webkit-scrollbar-thumb {
  background: var(--antumo-alpha-black-10);
  border-radius: 2px;
}

.code-snippet-code {
  display: block;
}

.code-snippet-code-line {
  color: var(--antumo-text-primary);
  font-weight: 400;
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  white-space: pre;
  min-height: 20px;
  position: relative;
}

.code-snippet-code-line-highlighted {
  background: #fff8dc;
  margin-left: calc(-1 * var(--antumo-spacing-4xl));
  margin-right: calc(-1 * var(--antumo-spacing-4xl));
  padding-left: var(--antumo-spacing-4xl);
  padding-right: var(--antumo-spacing-4xl);
  border-left: 3px solid #ffd700;
}

/* Copy button
   ========================================================================== */
.code-snippet-copy-button {
  position: absolute;
  top: var(--antumo-spacing-xl);
  right: var(--antumo-spacing-xl);
  padding: var(--antumo-spacing-sm) var(--antumo-spacing-xl);
  font-size: 13px;
  font-family: var(--antumo-font-body), sans-serif;
  background: transparent;
  border: 1px solid var(--antumo-border-secondary);
  border-radius: var(--antumo-radius-sm);
  cursor: pointer;
  transition: opacity 200ms ease, background 200ms ease, border-color 200ms ease;
  opacity: 0;
  color: var(--antumo-text-primary);
  z-index: 2;
}

.code-snippet:hover .code-snippet-copy-button {
  opacity: 1;
}

.code-snippet-copy-button:hover {
  background: var(--antumo-bg-primary);
  border-color: var(--antumo-text-quaternary);
}

.code-snippet-copy-button:active {
  transform: scale(0.98);
}

.code-snippet-copy-button-copied {
  background: #dcfce7;
  border-color: #22c55e;
  color: #16a34a;
}

.code-snippet-copy-button:focus-visible {
  outline: 2px solid var(--antumo-color-focus);
  outline-offset: 2px;
}

/* Syntax highlighting — Light theme (default)
   ========================================================================== */
.code-snippet-syntax-keyword {
  color: #d73a49;
  font-weight: 600;
}

.code-snippet-syntax-string {
  color: #079455;
}

.code-snippet-syntax-number {
  color: #005cc5;
}

.code-snippet-syntax-comment {
  color: #6a737d;
  font-style: italic;
}

.code-snippet-syntax-function {
  color: #6f42c1;
}

.code-snippet-syntax-operator {
  color: #d73a49;
}

.code-snippet-syntax-variable {
  color: #e36209;
}

.code-snippet-syntax-tag {
  color: #22863a;
  font-weight: 600;
}

.code-snippet-syntax-attribute {
  color: #6f42c1;
}

.code-snippet-syntax-property {
  color: #005cc5;
}

/* Dark theme
   ========================================================================== */
[data-theme=dark] .code-snippet,
.code-snippet-dark {
  background: #1e1e1e;
  border-color: #3e3e42;
}

[data-theme=dark] .code-snippet .code-snippet-header,
.code-snippet-dark .code-snippet-header {
  background: #252526;
  border-bottom-color: #3e3e42;
}

[data-theme=dark] .code-snippet .code-snippet-filename,
.code-snippet-dark .code-snippet-filename {
  color: #d4d4d4;
}

[data-theme=dark] .code-snippet .code-snippet-language,
.code-snippet-dark .code-snippet-language {
  color: #858585;
}

[data-theme=dark] .code-snippet .code-snippet-sidebar,
.code-snippet-dark .code-snippet-sidebar {
  background: #252526;
  border-right-color: #3e3e42;
}

[data-theme=dark] .code-snippet .code-snippet-sidebar::-webkit-scrollbar-thumb,
.code-snippet-dark .code-snippet-sidebar::-webkit-scrollbar-thumb {
  background: var(--antumo-alpha-white-10);
}

[data-theme=dark] .code-snippet .code-snippet-line-number,
.code-snippet-dark .code-snippet-line-number {
  color: #858585;
}

[data-theme=dark] .code-snippet .code-snippet-content,
.code-snippet-dark .code-snippet-content {
  background: #1e1e1e;
}

[data-theme=dark] .code-snippet .code-snippet-content::-webkit-scrollbar-thumb,
.code-snippet-dark .code-snippet-content::-webkit-scrollbar-thumb {
  background: var(--antumo-alpha-white-10);
}

[data-theme=dark] .code-snippet .code-snippet-code-line,
.code-snippet-dark .code-snippet-code-line {
  color: #d4d4d4;
}

[data-theme=dark] .code-snippet .code-snippet-code-line-highlighted,
.code-snippet-dark .code-snippet-code-line-highlighted {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: #569cd6;
}

[data-theme=dark] .code-snippet .code-snippet-copy-button,
.code-snippet-dark .code-snippet-copy-button {
  border-color: #3e3e42;
  color: #d4d4d4;
}

[data-theme=dark] .code-snippet .code-snippet-copy-button:hover,
.code-snippet-dark .code-snippet-copy-button:hover {
  background: #252526;
  border-color: #858585;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-keyword,
.code-snippet-dark .code-snippet-syntax-keyword {
  color: #569cd6;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-string,
.code-snippet-dark .code-snippet-syntax-string {
  color: #ce9178;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-number,
.code-snippet-dark .code-snippet-syntax-number {
  color: #b5cea8;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-comment,
.code-snippet-dark .code-snippet-syntax-comment {
  color: #6a9955;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-function,
.code-snippet-dark .code-snippet-syntax-function {
  color: #dcdcaa;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-operator,
.code-snippet-dark .code-snippet-syntax-operator {
  color: #d4d4d4;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-variable,
.code-snippet-dark .code-snippet-syntax-variable {
  color: #9cdcfe;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-tag,
.code-snippet-dark .code-snippet-syntax-tag {
  color: #569cd6;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-attribute,
.code-snippet-dark .code-snippet-syntax-attribute {
  color: #9cdcfe;
}

[data-theme=dark] .code-snippet .code-snippet-syntax-property,
.code-snippet-dark .code-snippet-syntax-property {
  color: #9cdcfe;
}

/* GitHub theme
   ========================================================================== */
.code-snippet-github {
  background: #ffffff;
  border-color: #d0d7de;
}

.code-snippet-github .code-snippet-header {
  background: #f6f8fa;
  border-bottom-color: #d0d7de;
}

.code-snippet-github .code-snippet-filename {
  color: #24292f;
}

.code-snippet-github .code-snippet-language {
  color: #57606a;
}

.code-snippet-github .code-snippet-sidebar {
  background: #f6f8fa;
  border-right-color: #d0d7de;
}

.code-snippet-github .code-snippet-line-number {
  color: #57606a;
}

.code-snippet-github .code-snippet-content {
  background: #ffffff;
}

.code-snippet-github .code-snippet-code-line {
  color: #24292f;
}

.code-snippet-github .code-snippet-copy-button {
  border-color: #d0d7de;
  color: #24292f;
}

.code-snippet-github .code-snippet-copy-button:hover {
  background: #f6f8fa;
  border-color: #57606a;
}

.code-snippet-github .code-snippet-syntax-keyword {
  color: #cf222e;
}

.code-snippet-github .code-snippet-syntax-string {
  color: #0a3069;
}

.code-snippet-github .code-snippet-syntax-number {
  color: #0550ae;
}

.code-snippet-github .code-snippet-syntax-comment {
  color: #6e7781;
}

.code-snippet-github .code-snippet-syntax-function {
  color: #8250df;
}

.code-snippet-github .code-snippet-syntax-operator {
  color: #cf222e;
}

.code-snippet-github .code-snippet-syntax-variable {
  color: #953800;
}

.code-snippet-github .code-snippet-syntax-tag {
  color: #116329;
}

.code-snippet-github .code-snippet-syntax-attribute {
  color: #8250df;
}

.code-snippet-github .code-snippet-syntax-property {
  color: #0550ae;
}

/* Size variants
   ========================================================================== */
.code-snippet-compact {
  max-height: 200px;
}

.code-snippet-expanded {
  max-height: 600px;
}

.code-snippet-no-max-height {
  max-height: none;
}

.code-snippet-responsive {
  width: 100%;
}

/* Language badges (optional)
   ========================================================================== */
.code-snippet-language-javascript .code-snippet-header::before {
  content: "JS";
  display: inline-block;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-xs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--antumo-spacing-md);
  background: #f7df1e;
  color: #1a1a1a;
}

.code-snippet-language-typescript .code-snippet-header::before {
  content: "TS";
  display: inline-block;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-xs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--antumo-spacing-md);
  background: #3178c6;
  color: #ffffff;
}

.code-snippet-language-python .code-snippet-header::before {
  content: "PY";
  display: inline-block;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-xs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--antumo-spacing-md);
  background: #3776ab;
  color: #ffffff;
}

.code-snippet-language-html .code-snippet-header::before {
  content: "HTML";
  display: inline-block;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-xs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--antumo-spacing-md);
  background: #e34c26;
  color: #ffffff;
}

.code-snippet-language-css .code-snippet-header::before {
  content: "CSS";
  display: inline-block;
  padding: var(--antumo-spacing-xxs) var(--antumo-spacing-md);
  border-radius: var(--antumo-radius-xs);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--antumo-spacing-md);
  background: #264de4;
  color: #ffffff;
}

/* Mobile responsive
   ========================================================================== */
@media (max-width: 640px) {
  .code-snippet {
    width: 100%;
    border-radius: 0;
    font-size: var(--antumo-font-size-xs);
  }
  .code-snippet-sidebar {
    width: 36px;
    min-width: 36px;
    padding: var(--antumo-spacing-xl) var(--antumo-spacing-md);
  }
  .code-snippet-line-number {
    font-size: var(--antumo-font-size-xs);
  }
  .code-snippet-content {
    padding: var(--antumo-spacing-xl);
  }
  .code-snippet-code-line {
    font-size: var(--antumo-font-size-xs);
  }
  .code-snippet-code-line-highlighted {
    margin-left: calc(-1 * var(--antumo-spacing-xl));
    margin-right: calc(-1 * var(--antumo-spacing-xl));
    padding-left: var(--antumo-spacing-xl);
    padding-right: var(--antumo-spacing-xl);
  }
  .code-snippet-copy-button {
    opacity: 1;
    top: var(--antumo-spacing-md);
    right: var(--antumo-spacing-md);
    padding: var(--antumo-spacing-xs) var(--antumo-spacing-md);
    font-size: var(--antumo-font-size-xs);
  }
}
/* Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .code-snippet-copy-button {
    transition: none;
  }
}
/* Print
   ========================================================================== */
@media print {
  .code-snippet {
    border: 1px solid black;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    break-inside: avoid;
  }
  .code-snippet-copy-button {
    display: none;
  }
  .code-snippet-sidebar {
    overflow: visible;
  }
  .code-snippet-content {
    overflow: visible;
  }
}
/* ==========================================================================
   Card Header — Application Component
   Prefix: .card-header
   ========================================================================== */
/* Base
   ========================================================================== */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  background-color: var(--antumo-bg-primary);
  width: 100%;
  box-sizing: border-box;
  transition: all 200ms ease;
  /* Defaults (MDM density) — works without .card-header-mdm */
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  gap: var(--antumo-spacing-3xl);
}

/* Size Variants
   ========================================================================== */
/* Medium (mdm) */
.card-header-mdm {
  max-width: 954px;
  height: 86px;
  padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  gap: var(--antumo-spacing-3xl);
}

.card-header-mdm .card-header-left {
  gap: var(--antumo-spacing-md);
}

.card-header-mdm .card-header-icon {
  width: 20px;
  height: 20px;
  font-size: var(--antumo-font-size-xl);
}

.card-header-mdm .card-header-content {
  gap: var(--antumo-spacing-xs);
}

.card-header-mdm .card-header-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-lg);
  font-weight: 700;
  line-height: 1.4;
}

.card-header-mdm .card-header-text {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: 1.5;
}

/* Point of Sale (pos) */
.card-header-pos {
  max-width: 548px;
  height: 100px;
  padding: var(--antumo-spacing-6xl) var(--antumo-spacing-7xl);
  gap: var(--antumo-spacing-4xl);
}

.card-header-pos .card-header-left {
  gap: var(--antumo-spacing-lg);
}

.card-header-pos .card-header-icon {
  width: 24px;
  height: 24px;
  font-size: var(--antumo-font-size-2xl);
}

.card-header-pos .card-header-content {
  gap: var(--antumo-spacing-sm);
}

.card-header-pos .card-header-title {
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-xl);
  font-weight: 700;
  line-height: 1.4;
}

.card-header-pos .card-header-text {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  font-weight: 400;
  line-height: 1.5;
}

/* Bordered Modifier
   ========================================================================== */
.card-header-bordered {
  border-bottom: 1px solid var(--antumo-bg-tertiary);
}

/* Left Section
   ========================================================================== */
.card-header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--antumo-spacing-md);
}

/* Icon
   ========================================================================== */
.card-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: var(--antumo-font-size-xl);
}

/* Content
   ========================================================================== */
.card-header-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--antumo-spacing-xs);
}

/* Title
   ========================================================================== */
.card-header-title {
  color: var(--antumo-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--antumo-font-heading);
  font-size: var(--antumo-font-size-lg);
  font-weight: 700;
  line-height: 1.4;
}

.card-header-title-truncate {
  max-width: 100%;
}

/* Supporting Text
   ========================================================================== */
.card-header-text {
  color: var(--antumo-text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-sm);
  font-weight: 400;
  line-height: 1.5;
}

.card-header-supporting-text-truncate {
  max-width: 100%;
}

/* Right Section
   ========================================================================== */
.card-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.card-header-right-button-group {
  gap: var(--antumo-spacing-md);
}

.card-header-right-empty {
  display: none;
}

/* Focus States
   ========================================================================== */
.card-header-right a:focus-visible,
.card-header-right button:focus-visible {
  outline: 2px solid var(--antumo-text-primary);
  outline-offset: 2px;
}

/* Responsive — Tablet
   ========================================================================== */
@media (max-width: 1200px) {
  .card-header-mdm {
    width: 100%;
    max-width: 954px;
  }
}
@media (max-width: 768px) {
  .card-header:not(.card-header-pos),
  .card-header-mdm {
    padding: var(--antumo-spacing-3xl) var(--antumo-spacing-4xl);
    height: auto;
    min-height: 60px;
  }
  .card-header:not(.card-header-pos) .card-header-title,
  .card-header-mdm .card-header-title {
    font-size: var(--antumo-font-size-md);
  }
  .card-header:not(.card-header-pos) .card-header-text,
  .card-header-mdm .card-header-text {
    font-size: 13px;
  }
  .card-header-pos {
    width: 100%;
    max-width: 548px;
    padding: var(--antumo-spacing-4xl) var(--antumo-spacing-6xl);
  }
}
/* Responsive — Mobile
   ========================================================================== */
@media (max-width: 576px) {
  .card-header:not(.card-header-pos),
  .card-header-mdm {
    padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
    flex-wrap: wrap;
  }
  .card-header:not(.card-header-pos) .card-header-right-button-group,
  .card-header-mdm .card-header-right-button-group {
    width: 100%;
    margin-top: var(--antumo-spacing-xl);
    justify-content: flex-end;
  }
}
/* Print
   ========================================================================== */
@media print {
  .card-header {
    border-bottom: 1px solid black;
    page-break-after: avoid;
  }
  .card-header-right {
    display: none;
  }
}
/* Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .card-header {
    transition: none;
  }
}
/* ==========================================================================
   Background Patterns — Antumo Design System
   Decorative background patterns for headers and hero sections.
   ========================================================================== */
/* Animation
   ========================================================================== */
@keyframes antumo-pattern-fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* Container
   ========================================================================== */
.bg-pattern-container {
  position: relative;
  overflow: hidden;
  background-color: var(--antumo-bg-primary);
  display: block;
  width: 100%;
}

.bg-pattern-container-mdm {
  min-height: 184px;
}

.bg-pattern-container-pos {
  min-height: 245px;
}

/* Pattern image layer
   ========================================================================== */
.bg-pattern {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 1;
  transition: all 300ms ease;
  animation: antumo-pattern-fade-in 600ms ease-in-out forwards;
}

.bg-pattern-mdm {
  width: 1440px;
  height: 184px;
}

.bg-pattern-pos {
  width: 1920px;
  height: 245px;
}

.bg-pattern-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay
   ========================================================================== */
.bg-pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Figma: 181deg, gray-100 at 0 opacity → gray-50 solid.
     transparent avoids dark interpolation artifacts. */
  background: linear-gradient(181deg, transparent 10%, var(--antumo-bg-secondary) 79%);
  z-index: 2;
  pointer-events: none;
  display: none;
}

.bg-pattern-container-with-overlay .bg-pattern-overlay {
  display: block;
}

/* Content layer
   ========================================================================== */
.bg-pattern-content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
}

/* Inverted variant
   ========================================================================== */
.bg-pattern-container-inverted {
  background-color: var(--antumo-bg-secondary);
}

.bg-pattern-container-inverted .bg-pattern-overlay {
  background: linear-gradient(181deg, transparent 10%, var(--antumo-bg-primary) 79%);
}

/* Page-level corner pattern (body class)
   Theme-aware dot grid generated purely from CSS - no PNG dependency.
   Add .bg-pattern-page to <body>. Dot color follows --antumo-border-primary
   (gray-300 in light, dark-gray-700 in dark) so the pattern adapts to the
   active theme without baking a solid background into a raster asset.
   The previous PNG asset baked a #FAFAFA background into the image, which
   produced a bright white smudge in dark mode.

   Token override knobs:
     --antumo-pattern-dot-color   color of each dot (default: border-primary)
     --antumo-pattern-dot-size    radius of each dot in px (default: 1.5px)
     --antumo-pattern-dot-step    grid spacing in px (default: 18px, matches Figma)
     --antumo-pattern-z           stacking order (default: 0). Set to -1 in a
                                  shell that lifts content above the pattern
                                  without a wrapper stacking context (e.g. so
                                  body-level modal backdrops still stack above).
     --antumo-pattern-max-width   cap pattern width (default: 100%). Use e.g.
                                  calc(100% - 280px) to reserve a fixed sidebar
                                  so the pattern only paints over the content
                                  column.
   ========================================================================== */
.bg-pattern-page::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 1360px;
  max-width: var(--antumo-pattern-max-width, 100%);
  height: 184px;
  background-image: radial-gradient(circle, var(--antumo-pattern-dot-color, var(--antumo-border-primary)) var(--antumo-pattern-dot-size, 1.5px), transparent calc(var(--antumo-pattern-dot-size, 1.5px) + 0.5px));
  background-repeat: repeat;
  background-position: top right;
  background-size: var(--antumo-pattern-dot-step, 18px) var(--antumo-pattern-dot-step, 18px);
  pointer-events: none;
  z-index: var(--antumo-pattern-z, 0);
  opacity: 1;
  mask-image: radial-gradient(ellipse 100% 100% at top right, black 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at top right, black 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
}

/* Utility classes
   ========================================================================== */
.bg-pattern-container-hidden {
  display: none;
}

.bg-pattern-no-animation {
  animation: none;
}

.bg-pattern-container-full-height {
  min-height: 100vh;
}

.bg-pattern-container-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive — Tablet landscape (769px – 1024px)
   ========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
  .bg-pattern-container-mdm {
    min-height: 156px;
  }
  .bg-pattern-container-pos {
    min-height: 208px;
  }
  .bg-pattern {
    transform: translate(-50%, -50%) scale(0.85);
  }
}
/* Responsive — Tablet portrait (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .bg-pattern-container-mdm {
    min-height: 129px;
  }
  .bg-pattern-container-pos {
    min-height: 172px;
  }
  .bg-pattern {
    transform: translate(-50%, -50%) scale(0.7);
  }
}
/* Responsive — Mobile (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .bg-pattern-container-mdm,
  .bg-pattern-container-pos {
    min-height: 100px;
  }
  .bg-pattern {
    transform: translate(-50%, -50%) scale(0.5);
  }
}
/* Accessibility — Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bg-pattern {
    animation: none;
    transition: none;
  }
  @keyframes antumo-pattern-fade-in {
    from {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}
/* Print
   ========================================================================== */
@media print {
  .bg-pattern-container {
    background-color: white;
  }
  .bg-pattern {
    display: none;
  }
  .bg-pattern-overlay {
    display: none;
  }
}
/* ==========================================================================
   Mobile Navigation
   Application component — mobile header + slide-out drawer for ≤767px
   ========================================================================== */
/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.mobile-nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: var(--antumo-bg-primary);
  border-bottom: 1px solid var(--antumo-border-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--antumo-spacing-3xl);
  padding-right: var(--antumo-spacing-xs);
  z-index: 1000;
  box-sizing: border-box;
}

.mobile-nav-header-logo {
  width: 114px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-nav-header-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mobile-nav-header-actions {
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-xxs);
  flex-shrink: 0;
}

.mobile-nav-header-button {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--antumo-bg-primary);
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  position: relative;
  transition: background-color 150ms ease;
  padding: 0;
}

.mobile-nav-header-button:hover {
  background-color: var(--antumo-gray-100);
}

.mobile-nav-header-button:active {
  background-color: var(--antumo-border-secondary);
}

.mobile-nav-header-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.mobile-nav-header-button-icon {
  width: 20px;
  height: 20px;
  color: var(--antumo-bg-brand-solid);
}

.mobile-nav-header-button-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--antumo-spacing-xs);
  background-color: var(--antumo-red-500);
  color: var(--antumo-color-white);
  font-size: 10px;
  font-weight: 600;
  line-height: var(--antumo-line-height-xs);
  border-radius: var(--antumo-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Drawer
   --------------------------------------------------------------------------- */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 295px;
  height: 100vh;
  max-height: 812px;
  background-color: var(--antumo-bg-brand-solid);
  border-top-right-radius: var(--antumo-radius-2xl);
  border-bottom-right-radius: var(--antumo-radius-2xl);
  box-shadow: 12px 0 24px rgba(0, 0, 0, 0.12), 4px 0 8px rgba(0, 0, 0, 0.08), 2px 0 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-7xl);
  padding: var(--antumo-spacing-3xl) 0;
  z-index: 1001;
  overflow: hidden;
  transition: transform 300ms ease-out;
  transform: translateX(-100%);
  box-sizing: border-box;
}

.mobile-nav-drawer-open {
  transform: translateX(0);
}

.mobile-nav-drawer-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--antumo-spacing-3xl);
  position: relative;
  flex-shrink: 0;
}

.mobile-nav-drawer-logo {
  width: 117px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-drawer-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mobile-nav-drawer-close {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  position: absolute;
  top: -8px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  border-radius: var(--antumo-radius-md);
  cursor: pointer;
  color: var(--antumo-color-white);
  transition: background-color 150ms ease;
  padding: 0;
}

.mobile-nav-drawer-close:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.mobile-nav-drawer-close:active {
  background-color: rgba(255, 255, 255, 0.12);
}

.mobile-nav-drawer-close:focus-visible {
  outline: 2px solid var(--antumo-color-white);
  outline-offset: 2px;
}

.mobile-nav-drawer-close-icon {
  width: 20px;
  height: 20px;
}

.mobile-nav-drawer-navigation {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.mobile-nav-drawer-menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 var(--antumo-spacing-3xl);
  list-style: none;
  margin: 0;
}

.mobile-nav-drawer-menu::-webkit-scrollbar {
  width: 4px;
}

.mobile-nav-drawer-menu::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.05);
}

.mobile-nav-drawer-menu::-webkit-scrollbar-thumb {
  background-color: var(--antumo-alpha-white-20);
  border-radius: var(--antumo-radius-xxs);
}

/* ---------------------------------------------------------------------------
   Menu Item
   --------------------------------------------------------------------------- */
.mobile-nav-menu-item {
  width: 100%;
  padding: var(--antumo-spacing-xxs) 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.mobile-nav-menu-item-content {
  width: 100%;
  height: var(--antumo-size-md);
  padding: var(--antumo-spacing-lg);
  background-color: transparent;
  border: none;
  border-radius: var(--antumo-radius-full);
  display: flex;
  align-items: center;
  gap: var(--antumo-spacing-md);
  cursor: pointer;
  text-align: left;
  color: var(--antumo-color-white);
  transition: background-color 150ms ease;
  text-decoration: none;
  box-sizing: border-box;
}

.mobile-nav-menu-item-content:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.mobile-nav-menu-item-content:active {
  background-color: rgba(255, 255, 255, 0.12);
}

.mobile-nav-menu-item-content:focus-visible {
  outline: 2px solid var(--antumo-color-white);
  outline-offset: 2px;
}

.mobile-nav-menu-item-active .mobile-nav-menu-item-content {
  background-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.mobile-nav-menu-item-icon-wrapper {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-nav-menu-item-icon {
  width: 100%;
  height: 100%;
  color: var(--antumo-color-white);
}

.mobile-nav-menu-item-label {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  color: var(--antumo-color-white);
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-nav-menu-item-chevron {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--antumo-spacing-xl);
  color: var(--antumo-color-white);
  transition: transform 200ms ease;
}

.mobile-nav-menu-item-expanded .mobile-nav-menu-item-chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Backdrop
   --------------------------------------------------------------------------- */
.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--antumo-alpha-black-30);
  z-index: 1000;
  transition: opacity 300ms ease-out;
  opacity: 0;
  pointer-events: none;
}

.mobile-nav-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   Body Scroll Lock
   --------------------------------------------------------------------------- */
.mobile-nav-no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 374px) {
  .mobile-nav-drawer {
    width: calc(100vw - 80px);
  }
}
@media (min-width: 768px) {
  .mobile-nav-header {
    display: none;
  }
  .mobile-nav-drawer {
    display: none;
  }
  .mobile-nav-backdrop {
    display: none;
  }
}
/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer {
    transition: none;
  }
  .mobile-nav-backdrop {
    transition: none;
  }
  .mobile-nav-header-button {
    transition: none;
  }
  .mobile-nav-drawer-close {
    transition: none;
  }
  .mobile-nav-menu-item-content {
    transition: none;
  }
  .mobile-nav-menu-item-chevron {
    transition: none;
  }
}
/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */
@media print {
  .mobile-nav-header {
    display: none !important;
  }
  .mobile-nav-drawer {
    display: none !important;
  }
  .mobile-nav-backdrop {
    display: none !important;
  }
}
/* ==========================================================================
   Mobile App Components
   Application component — touch-optimised mobile UI primitives: top bar,
   CTA section, CTA button, button icon, text content, app bar
   ========================================================================== */
/* ---------------------------------------------------------------------------
   Top Bar
   --------------------------------------------------------------------------- */
.mobile-top-bar {
  width: 100%;
  max-width: 412px;
  height: 116px;
  padding: var(--antumo-spacing-lg) var(--antumo-spacing-6xl);
  background-color: var(--antumo-bg-primary);
  border-bottom: 1px solid var(--antumo-gray-100);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile-top-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.mobile-top-bar-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  font-family: var(--antumo-font-body);
  font-weight: var(--antumo-font-weight-medium);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
}

/* ---------------------------------------------------------------------------
   CTA Section
   --------------------------------------------------------------------------- */
.mobile-cta-section {
  width: 100%;
  max-width: 412px;
  min-height: 216px;
  padding: var(--antumo-spacing-xl) var(--antumo-spacing-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-3xl);
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-cta-section-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xl);
}

.mobile-cta-section-handle {
  width: 108px;
  height: 4px;
  background-color: var(--antumo-gray-950);
  border-radius: var(--antumo-radius-xl);
  margin: var(--antumo-spacing-md) auto 0;
  cursor: grab;
}

.mobile-cta-section-handle:active {
  cursor: grabbing;
}

/* ---------------------------------------------------------------------------
   CTA Button
   --------------------------------------------------------------------------- */
.mobile-cta-button {
  width: 100%;
  height: var(--antumo-size-lg);
  min-height: var(--antumo-size-lg);
  border-radius: var(--antumo-radius-full);
  font-family: var(--antumo-font-heading);
  font-weight: var(--antumo-font-weight-bold);
  font-size: var(--antumo-font-size-sm);
  line-height: var(--antumo-line-height-sm);
  letter-spacing: -0.14px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-cta-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mobile-cta-button:focus-visible {
  outline: 4px solid var(--antumo-bg-brand-solid);
  outline-offset: 2px;
}

/* Primary */
.mobile-cta-button-primary {
  background-color: var(--antumo-bg-brand-solid);
  color: var(--antumo-color-white);
}

.mobile-cta-button-primary:active:not(:disabled) {
  background-color: var(--antumo-navy-700);
  transform: scale(0.95);
}

/* Secondary */
.mobile-cta-button-secondary {
  background-color: transparent;
  color: var(--antumo-bg-brand-solid);
  border: 1px solid var(--antumo-border-primary);
}

.mobile-cta-button-secondary:active:not(:disabled) {
  background-color: var(--antumo-bg-tertiary);
  transform: scale(0.95);
}

/* Tertiary */
.mobile-cta-button-tertiary {
  background-color: transparent;
  color: var(--antumo-bg-brand-solid);
  border: none;
  text-decoration: underline;
}

.mobile-cta-button-tertiary:active:not(:disabled) {
  background-color: transparent;
  transform: scale(0.95);
}

/* ---------------------------------------------------------------------------
   Button Icon
   --------------------------------------------------------------------------- */
.mobile-button-icon {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  min-width: var(--antumo-size-lg);
  min-height: var(--antumo-size-lg);
  border-radius: var(--antumo-radius-full);
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--antumo-spacing-xl);
  position: relative;
  transition: transform 150ms ease, background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
}

.mobile-button-icon-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* States */
.mobile-button-icon-pressed {
  background-color: var(--antumo-gray-100);
  transform: scale(0.95);
}

.mobile-button-icon-focused {
  outline: 4px solid var(--antumo-bg-brand-solid);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--antumo-color-white);
}

.mobile-button-icon-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.mobile-button-icon:active:not(:disabled) {
  background-color: var(--antumo-gray-100);
  transform: scale(0.95);
}

.mobile-button-icon:focus-visible {
  outline: 4px solid var(--antumo-bg-brand-solid);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--antumo-color-white);
}

/* ---------------------------------------------------------------------------
   Text Content
   --------------------------------------------------------------------------- */
.mobile-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--antumo-spacing-xs);
  max-width: 300px;
}

.mobile-text-content-label {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xl);
  line-height: var(--antumo-line-height-md);
  letter-spacing: -0.2px;
  font-weight: 600;
  color: var(--antumo-gray-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.mobile-text-content-supporting {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-xs);
  line-height: var(--antumo-line-height-xs);
  letter-spacing: -0.12px;
  color: var(--antumo-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Alignment variants */
.mobile-text-content-center {
  align-items: center;
  text-align: center;
}

.mobile-text-content-left {
  align-items: flex-start;
  text-align: left;
}

/* ---------------------------------------------------------------------------
   App Bar
   --------------------------------------------------------------------------- */
.mobile-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 412px;
  height: 64px;
  background-color: var(--antumo-bg-primary);
  padding: 0 var(--antumo-spacing-xs);
  box-sizing: border-box;
}

.mobile-app-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.mobile-app-bar-variant2 {
  padding-right: var(--antumo-spacing-3xl);
}

.mobile-app-bar-navigation {
  width: var(--antumo-size-lg);
  height: var(--antumo-size-lg);
  min-width: var(--antumo-size-lg);
  min-height: var(--antumo-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-app-bar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--antumo-spacing-md);
  min-width: 0;
}

.mobile-app-bar-trailing {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.mobile-app-bar-value {
  font-size: var(--antumo-font-size-lg);
  line-height: var(--antumo-line-height-md);
  letter-spacing: -0.18px;
  font-weight: var(--antumo-font-weight-bold);
  font-family: var(--antumo-font-heading);
  color: var(--antumo-gray-950);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Responsive — small mobile (≤ 360px)
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .mobile-top-bar {
    padding-left: var(--antumo-spacing-3xl);
    padding-right: var(--antumo-spacing-3xl);
  }
  .mobile-cta-section {
    padding-left: var(--antumo-spacing-xl);
    padding-right: var(--antumo-spacing-xl);
  }
  .mobile-text-content {
    max-width: 280px;
  }
}
/* ---------------------------------------------------------------------------
   Responsive — large mobile (≥ 480px)
   --------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .mobile-app-bar {
    margin: 0 auto;
  }
}
/* ---------------------------------------------------------------------------
   Responsive — landscape (max-height 480px)
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 480px) {
  .mobile-top-bar {
    height: auto;
    padding-top: var(--antumo-spacing-md);
    padding-bottom: var(--antumo-spacing-md);
  }
  .mobile-cta-section {
    min-height: auto;
    padding-top: var(--antumo-spacing-md);
    padding-bottom: var(--antumo-spacing-md);
  }
}
/* ---------------------------------------------------------------------------
   Accessibility — reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-button,
  .mobile-button-icon {
    transition: none;
  }
  .mobile-cta-button:active:not(:disabled),
  .mobile-button-icon:active:not(:disabled) {
    transform: none;
  }
}
/* ==========================================================================
   Progress Steps App Component
   Application-level multi-step workflow indicator.
   Uses brand purple (#757dd0) for active states.
   ========================================================================== */
/* Container */
.progress-steps-app {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--antumo-spacing-3xl);
  width: 100%;
  min-height: 48px;
}

/* Step */
.progress-steps-app-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--antumo-spacing-xl);
  flex: 1 0 0;
  min-width: 0;
}

/* Progress bar */
.progress-steps-app-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: var(--antumo-radius-md);
  overflow: hidden;
}

.progress-steps-app-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--antumo-radius-full);
  background-color: var(--antumo-gray-700);
  transition: background-color 200ms ease;
}

/* Active step — bar fill */
.progress-steps-app-step-active .progress-steps-app-bar-fill {
  background-color: var(--antumo-navy-500);
}

/* Content section */
.progress-steps-app-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--antumo-spacing-md);
  width: 100%;
}

/* Icon */
.progress-steps-app-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  flex-shrink: 0;
}

.progress-steps-app-icon svg,
.progress-steps-app-icon img {
  width: 24px;
  height: 24px;
  color: var(--antumo-gray-500);
  transition: color 200ms ease;
}

/* Active step — icon */
.progress-steps-app-step-active .progress-steps-app-icon svg,
.progress-steps-app-step-active .progress-steps-app-icon img {
  color: var(--antumo-navy-500);
}

/* Text container */
.progress-steps-app-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--antumo-spacing-xxs);
  flex: 1 0 0;
  min-width: 0;
}

/* Label */
.progress-steps-app-label {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-lg);
  font-weight: var(--antumo-font-weight-medium);
  line-height: var(--antumo-line-height-lg);
  letter-spacing: 0;
  color: var(--antumo-gray-500);
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
  transition: color 200ms ease;
}

/* Active step — label */
.progress-steps-app-step-active .progress-steps-app-label {
  color: var(--antumo-navy-500);
}

/* Hint */
.progress-steps-app-hint {
  font-family: var(--antumo-font-body);
  font-size: var(--antumo-font-size-md);
  font-weight: var(--antumo-font-weight-regular);
  line-height: var(--antumo-line-height-md);
  letter-spacing: 0;
  color: var(--antumo-gray-500);
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
}

/* ==========================================================================
   Variant Modifiers
   ========================================================================== */
/* Vertical layout */
.progress-steps-app-vertical {
  flex-direction: column;
  gap: var(--antumo-spacing-6xl);
}

.progress-steps-app-vertical .progress-steps-app-step {
  width: 100%;
}

/* Compact — hide hints */
.progress-steps-app-compact .progress-steps-app-hint {
  display: none;
}

/* No icons */
.progress-steps-app-no-icons .progress-steps-app-icon {
  display: none;
}

/* ==========================================================================
   Color Variants
   ========================================================================== */
/* Success */
.progress-steps-app-success .progress-steps-app-step-active .progress-steps-app-bar-fill {
  background-color: var(--antumo-green-500);
}

.progress-steps-app-success .progress-steps-app-step-active .progress-steps-app-label {
  color: var(--antumo-green-500);
}

.progress-steps-app-success .progress-steps-app-step-active .progress-steps-app-icon svg,
.progress-steps-app-success .progress-steps-app-step-active .progress-steps-app-icon img {
  color: var(--antumo-green-500);
}

/* Warning */
.progress-steps-app-warning .progress-steps-app-step-active .progress-steps-app-bar-fill {
  background-color: var(--antumo-yellow-500);
}

.progress-steps-app-warning .progress-steps-app-step-active .progress-steps-app-label {
  color: var(--antumo-yellow-500);
}

.progress-steps-app-warning .progress-steps-app-step-active .progress-steps-app-icon svg,
.progress-steps-app-warning .progress-steps-app-step-active .progress-steps-app-icon img {
  color: var(--antumo-yellow-500);
}

/* Error */
.progress-steps-app-error .progress-steps-app-step-active .progress-steps-app-bar-fill {
  background-color: var(--antumo-red-500);
}

.progress-steps-app-error .progress-steps-app-step-active .progress-steps-app-label {
  color: var(--antumo-red-500);
}

.progress-steps-app-error .progress-steps-app-step-active .progress-steps-app-icon svg,
.progress-steps-app-error .progress-steps-app-step-active .progress-steps-app-icon img {
  color: var(--antumo-red-500);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .progress-steps-app {
    flex-direction: column;
    gap: var(--antumo-spacing-6xl);
  }
  .progress-steps-app-step {
    width: 100%;
  }
  .progress-steps-app-bar {
    width: 100%;
  }
}
/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .progress-steps-app-bar-fill {
    transition: none;
  }
  .progress-steps-app-icon svg,
  .progress-steps-app-icon img {
    transition: none;
  }
  .progress-steps-app-label {
    transition: none;
  }
}
.progress-steps-app [role=progressbar] {
  position: relative;
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .progress-steps-app-bar-fill {
    background-color: var(--antumo-gray-200) !important;
  }
  .progress-steps-app-step-active .progress-steps-app-bar-fill {
    background-color: var(--antumo-color-black) !important;
  }
}
/**
 * Antumo Design System — Spacing Utilities
 * Based on 4px/8px grid. Scale: 0-16 (0 = 0px, 1 = 4px, 2 = 8px, ... 16 = 64px)
 * Uses CSS custom properties from design tokens.
 * Includes BS5 logical property aliases (ms-*, me-*, ps-*, pe-*).
 * Responsive variants for all breakpoints (sm, md, lg, xl, xxl).
 */
/**
 * Antumo Design System — Responsive Breakpoint System
 * Shared mixin system for generating responsive utility variants.
 * This file outputs NO CSS — it provides mixins consumed by other utility files.
 *
 * Usage:
 *   @use 'breakpoints' as bp;
 *   @include bp.breakpoint-up(md) { ... }
 */
.m-0 {
  margin: var(--antumo-spacing-none) !important;
}

.mt-0 {
  margin-top: var(--antumo-spacing-none) !important;
}

.mr-0, .me-0 {
  margin-right: var(--antumo-spacing-none) !important;
}

.mb-0 {
  margin-bottom: var(--antumo-spacing-none) !important;
}

.ml-0, .ms-0 {
  margin-left: var(--antumo-spacing-none) !important;
}

.mx-0 {
  margin-left: var(--antumo-spacing-none) !important;
  margin-right: var(--antumo-spacing-none) !important;
}

.my-0 {
  margin-top: var(--antumo-spacing-none) !important;
  margin-bottom: var(--antumo-spacing-none) !important;
}

.p-0 {
  padding: var(--antumo-spacing-none) !important;
}

.pt-0 {
  padding-top: var(--antumo-spacing-none) !important;
}

.pr-0, .pe-0 {
  padding-right: var(--antumo-spacing-none) !important;
}

.pb-0 {
  padding-bottom: var(--antumo-spacing-none) !important;
}

.pl-0, .ps-0 {
  padding-left: var(--antumo-spacing-none) !important;
}

.px-0 {
  padding-left: var(--antumo-spacing-none) !important;
  padding-right: var(--antumo-spacing-none) !important;
}

.py-0 {
  padding-top: var(--antumo-spacing-none) !important;
  padding-bottom: var(--antumo-spacing-none) !important;
}

.gap-0 {
  gap: var(--antumo-spacing-none) !important;
}

.row-gap-0 {
  row-gap: var(--antumo-spacing-none) !important;
}

.column-gap-0 {
  column-gap: var(--antumo-spacing-none) !important;
}

.m-1 {
  margin: var(--antumo-spacing-xs) !important;
}

.mt-1 {
  margin-top: var(--antumo-spacing-xs) !important;
}

.mr-1, .me-1 {
  margin-right: var(--antumo-spacing-xs) !important;
}

.mb-1 {
  margin-bottom: var(--antumo-spacing-xs) !important;
}

.ml-1, .ms-1 {
  margin-left: var(--antumo-spacing-xs) !important;
}

.mx-1 {
  margin-left: var(--antumo-spacing-xs) !important;
  margin-right: var(--antumo-spacing-xs) !important;
}

.my-1 {
  margin-top: var(--antumo-spacing-xs) !important;
  margin-bottom: var(--antumo-spacing-xs) !important;
}

.p-1 {
  padding: var(--antumo-spacing-xs) !important;
}

.pt-1 {
  padding-top: var(--antumo-spacing-xs) !important;
}

.pr-1, .pe-1 {
  padding-right: var(--antumo-spacing-xs) !important;
}

.pb-1 {
  padding-bottom: var(--antumo-spacing-xs) !important;
}

.pl-1, .ps-1 {
  padding-left: var(--antumo-spacing-xs) !important;
}

.px-1 {
  padding-left: var(--antumo-spacing-xs) !important;
  padding-right: var(--antumo-spacing-xs) !important;
}

.py-1 {
  padding-top: var(--antumo-spacing-xs) !important;
  padding-bottom: var(--antumo-spacing-xs) !important;
}

.gap-1 {
  gap: var(--antumo-spacing-xs) !important;
}

.row-gap-1 {
  row-gap: var(--antumo-spacing-xs) !important;
}

.column-gap-1 {
  column-gap: var(--antumo-spacing-xs) !important;
}

.m-2 {
  margin: var(--antumo-spacing-md) !important;
}

.mt-2 {
  margin-top: var(--antumo-spacing-md) !important;
}

.mr-2, .me-2 {
  margin-right: var(--antumo-spacing-md) !important;
}

.mb-2 {
  margin-bottom: var(--antumo-spacing-md) !important;
}

.ml-2, .ms-2 {
  margin-left: var(--antumo-spacing-md) !important;
}

.mx-2 {
  margin-left: var(--antumo-spacing-md) !important;
  margin-right: var(--antumo-spacing-md) !important;
}

.my-2 {
  margin-top: var(--antumo-spacing-md) !important;
  margin-bottom: var(--antumo-spacing-md) !important;
}

.p-2 {
  padding: var(--antumo-spacing-md) !important;
}

.pt-2 {
  padding-top: var(--antumo-spacing-md) !important;
}

.pr-2, .pe-2 {
  padding-right: var(--antumo-spacing-md) !important;
}

.pb-2 {
  padding-bottom: var(--antumo-spacing-md) !important;
}

.pl-2, .ps-2 {
  padding-left: var(--antumo-spacing-md) !important;
}

.px-2 {
  padding-left: var(--antumo-spacing-md) !important;
  padding-right: var(--antumo-spacing-md) !important;
}

.py-2 {
  padding-top: var(--antumo-spacing-md) !important;
  padding-bottom: var(--antumo-spacing-md) !important;
}

.gap-2 {
  gap: var(--antumo-spacing-md) !important;
}

.row-gap-2 {
  row-gap: var(--antumo-spacing-md) !important;
}

.column-gap-2 {
  column-gap: var(--antumo-spacing-md) !important;
}

.m-3 {
  margin: var(--antumo-spacing-xl) !important;
}

.mt-3 {
  margin-top: var(--antumo-spacing-xl) !important;
}

.mr-3, .me-3 {
  margin-right: var(--antumo-spacing-xl) !important;
}

.mb-3 {
  margin-bottom: var(--antumo-spacing-xl) !important;
}

.ml-3, .ms-3 {
  margin-left: var(--antumo-spacing-xl) !important;
}

.mx-3 {
  margin-left: var(--antumo-spacing-xl) !important;
  margin-right: var(--antumo-spacing-xl) !important;
}

.my-3 {
  margin-top: var(--antumo-spacing-xl) !important;
  margin-bottom: var(--antumo-spacing-xl) !important;
}

.p-3 {
  padding: var(--antumo-spacing-xl) !important;
}

.pt-3 {
  padding-top: var(--antumo-spacing-xl) !important;
}

.pr-3, .pe-3 {
  padding-right: var(--antumo-spacing-xl) !important;
}

.pb-3 {
  padding-bottom: var(--antumo-spacing-xl) !important;
}

.pl-3, .ps-3 {
  padding-left: var(--antumo-spacing-xl) !important;
}

.px-3 {
  padding-left: var(--antumo-spacing-xl) !important;
  padding-right: var(--antumo-spacing-xl) !important;
}

.py-3 {
  padding-top: var(--antumo-spacing-xl) !important;
  padding-bottom: var(--antumo-spacing-xl) !important;
}

.gap-3 {
  gap: var(--antumo-spacing-xl) !important;
}

.row-gap-3 {
  row-gap: var(--antumo-spacing-xl) !important;
}

.column-gap-3 {
  column-gap: var(--antumo-spacing-xl) !important;
}

.m-4 {
  margin: var(--antumo-spacing-3xl) !important;
}

.mt-4 {
  margin-top: var(--antumo-spacing-3xl) !important;
}

.mr-4, .me-4 {
  margin-right: var(--antumo-spacing-3xl) !important;
}

.mb-4 {
  margin-bottom: var(--antumo-spacing-3xl) !important;
}

.ml-4, .ms-4 {
  margin-left: var(--antumo-spacing-3xl) !important;
}

.mx-4 {
  margin-left: var(--antumo-spacing-3xl) !important;
  margin-right: var(--antumo-spacing-3xl) !important;
}

.my-4 {
  margin-top: var(--antumo-spacing-3xl) !important;
  margin-bottom: var(--antumo-spacing-3xl) !important;
}

.p-4 {
  padding: var(--antumo-spacing-3xl) !important;
}

.pt-4 {
  padding-top: var(--antumo-spacing-3xl) !important;
}

.pr-4, .pe-4 {
  padding-right: var(--antumo-spacing-3xl) !important;
}

.pb-4 {
  padding-bottom: var(--antumo-spacing-3xl) !important;
}

.pl-4, .ps-4 {
  padding-left: var(--antumo-spacing-3xl) !important;
}

.px-4 {
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
}

.py-4 {
  padding-top: var(--antumo-spacing-3xl) !important;
  padding-bottom: var(--antumo-spacing-3xl) !important;
}

.gap-4 {
  gap: var(--antumo-spacing-3xl) !important;
}

.row-gap-4 {
  row-gap: var(--antumo-spacing-3xl) !important;
}

.column-gap-4 {
  column-gap: var(--antumo-spacing-3xl) !important;
}

.m-5 {
  margin: var(--antumo-spacing-4xl) !important;
}

.mt-5 {
  margin-top: var(--antumo-spacing-4xl) !important;
}

.mr-5, .me-5 {
  margin-right: var(--antumo-spacing-4xl) !important;
}

.mb-5 {
  margin-bottom: var(--antumo-spacing-4xl) !important;
}

.ml-5, .ms-5 {
  margin-left: var(--antumo-spacing-4xl) !important;
}

.mx-5 {
  margin-left: var(--antumo-spacing-4xl) !important;
  margin-right: var(--antumo-spacing-4xl) !important;
}

.my-5 {
  margin-top: var(--antumo-spacing-4xl) !important;
  margin-bottom: var(--antumo-spacing-4xl) !important;
}

.p-5 {
  padding: var(--antumo-spacing-4xl) !important;
}

.pt-5 {
  padding-top: var(--antumo-spacing-4xl) !important;
}

.pr-5, .pe-5 {
  padding-right: var(--antumo-spacing-4xl) !important;
}

.pb-5 {
  padding-bottom: var(--antumo-spacing-4xl) !important;
}

.pl-5, .ps-5 {
  padding-left: var(--antumo-spacing-4xl) !important;
}

.px-5 {
  padding-left: var(--antumo-spacing-4xl) !important;
  padding-right: var(--antumo-spacing-4xl) !important;
}

.py-5 {
  padding-top: var(--antumo-spacing-4xl) !important;
  padding-bottom: var(--antumo-spacing-4xl) !important;
}

.gap-5 {
  gap: var(--antumo-spacing-4xl) !important;
}

.row-gap-5 {
  row-gap: var(--antumo-spacing-4xl) !important;
}

.column-gap-5 {
  column-gap: var(--antumo-spacing-4xl) !important;
}

.m-6 {
  margin: var(--antumo-spacing-6xl) !important;
}

.mt-6 {
  margin-top: var(--antumo-spacing-6xl) !important;
}

.mr-6, .me-6 {
  margin-right: var(--antumo-spacing-6xl) !important;
}

.mb-6 {
  margin-bottom: var(--antumo-spacing-6xl) !important;
}

.ml-6, .ms-6 {
  margin-left: var(--antumo-spacing-6xl) !important;
}

.mx-6 {
  margin-left: var(--antumo-spacing-6xl) !important;
  margin-right: var(--antumo-spacing-6xl) !important;
}

.my-6 {
  margin-top: var(--antumo-spacing-6xl) !important;
  margin-bottom: var(--antumo-spacing-6xl) !important;
}

.p-6 {
  padding: var(--antumo-spacing-6xl) !important;
}

.pt-6 {
  padding-top: var(--antumo-spacing-6xl) !important;
}

.pr-6, .pe-6 {
  padding-right: var(--antumo-spacing-6xl) !important;
}

.pb-6 {
  padding-bottom: var(--antumo-spacing-6xl) !important;
}

.pl-6, .ps-6 {
  padding-left: var(--antumo-spacing-6xl) !important;
}

.px-6 {
  padding-left: var(--antumo-spacing-6xl) !important;
  padding-right: var(--antumo-spacing-6xl) !important;
}

.py-6 {
  padding-top: var(--antumo-spacing-6xl) !important;
  padding-bottom: var(--antumo-spacing-6xl) !important;
}

.gap-6 {
  gap: var(--antumo-spacing-6xl) !important;
}

.row-gap-6 {
  row-gap: var(--antumo-spacing-6xl) !important;
}

.column-gap-6 {
  column-gap: var(--antumo-spacing-6xl) !important;
}

.m-8 {
  margin: var(--antumo-spacing-7xl) !important;
}

.mt-8 {
  margin-top: var(--antumo-spacing-7xl) !important;
}

.mr-8, .me-8 {
  margin-right: var(--antumo-spacing-7xl) !important;
}

.mb-8 {
  margin-bottom: var(--antumo-spacing-7xl) !important;
}

.ml-8, .ms-8 {
  margin-left: var(--antumo-spacing-7xl) !important;
}

.mx-8 {
  margin-left: var(--antumo-spacing-7xl) !important;
  margin-right: var(--antumo-spacing-7xl) !important;
}

.my-8 {
  margin-top: var(--antumo-spacing-7xl) !important;
  margin-bottom: var(--antumo-spacing-7xl) !important;
}

.p-8 {
  padding: var(--antumo-spacing-7xl) !important;
}

.pt-8 {
  padding-top: var(--antumo-spacing-7xl) !important;
}

.pr-8, .pe-8 {
  padding-right: var(--antumo-spacing-7xl) !important;
}

.pb-8 {
  padding-bottom: var(--antumo-spacing-7xl) !important;
}

.pl-8, .ps-8 {
  padding-left: var(--antumo-spacing-7xl) !important;
}

.px-8 {
  padding-left: var(--antumo-spacing-7xl) !important;
  padding-right: var(--antumo-spacing-7xl) !important;
}

.py-8 {
  padding-top: var(--antumo-spacing-7xl) !important;
  padding-bottom: var(--antumo-spacing-7xl) !important;
}

.gap-8 {
  gap: var(--antumo-spacing-7xl) !important;
}

.row-gap-8 {
  row-gap: var(--antumo-spacing-7xl) !important;
}

.column-gap-8 {
  column-gap: var(--antumo-spacing-7xl) !important;
}

.m-10 {
  margin: var(--antumo-spacing-8xl) !important;
}

.mt-10 {
  margin-top: var(--antumo-spacing-8xl) !important;
}

.mr-10, .me-10 {
  margin-right: var(--antumo-spacing-8xl) !important;
}

.mb-10 {
  margin-bottom: var(--antumo-spacing-8xl) !important;
}

.ml-10, .ms-10 {
  margin-left: var(--antumo-spacing-8xl) !important;
}

.mx-10 {
  margin-left: var(--antumo-spacing-8xl) !important;
  margin-right: var(--antumo-spacing-8xl) !important;
}

.my-10 {
  margin-top: var(--antumo-spacing-8xl) !important;
  margin-bottom: var(--antumo-spacing-8xl) !important;
}

.p-10 {
  padding: var(--antumo-spacing-8xl) !important;
}

.pt-10 {
  padding-top: var(--antumo-spacing-8xl) !important;
}

.pr-10, .pe-10 {
  padding-right: var(--antumo-spacing-8xl) !important;
}

.pb-10 {
  padding-bottom: var(--antumo-spacing-8xl) !important;
}

.pl-10, .ps-10 {
  padding-left: var(--antumo-spacing-8xl) !important;
}

.px-10 {
  padding-left: var(--antumo-spacing-8xl) !important;
  padding-right: var(--antumo-spacing-8xl) !important;
}

.py-10 {
  padding-top: var(--antumo-spacing-8xl) !important;
  padding-bottom: var(--antumo-spacing-8xl) !important;
}

.gap-10 {
  gap: var(--antumo-spacing-8xl) !important;
}

.row-gap-10 {
  row-gap: var(--antumo-spacing-8xl) !important;
}

.column-gap-10 {
  column-gap: var(--antumo-spacing-8xl) !important;
}

.m-12 {
  margin: var(--antumo-spacing-9xl) !important;
}

.mt-12 {
  margin-top: var(--antumo-spacing-9xl) !important;
}

.mr-12, .me-12 {
  margin-right: var(--antumo-spacing-9xl) !important;
}

.mb-12 {
  margin-bottom: var(--antumo-spacing-9xl) !important;
}

.ml-12, .ms-12 {
  margin-left: var(--antumo-spacing-9xl) !important;
}

.mx-12 {
  margin-left: var(--antumo-spacing-9xl) !important;
  margin-right: var(--antumo-spacing-9xl) !important;
}

.my-12 {
  margin-top: var(--antumo-spacing-9xl) !important;
  margin-bottom: var(--antumo-spacing-9xl) !important;
}

.p-12 {
  padding: var(--antumo-spacing-9xl) !important;
}

.pt-12 {
  padding-top: var(--antumo-spacing-9xl) !important;
}

.pr-12, .pe-12 {
  padding-right: var(--antumo-spacing-9xl) !important;
}

.pb-12 {
  padding-bottom: var(--antumo-spacing-9xl) !important;
}

.pl-12, .ps-12 {
  padding-left: var(--antumo-spacing-9xl) !important;
}

.px-12 {
  padding-left: var(--antumo-spacing-9xl) !important;
  padding-right: var(--antumo-spacing-9xl) !important;
}

.py-12 {
  padding-top: var(--antumo-spacing-9xl) !important;
  padding-bottom: var(--antumo-spacing-9xl) !important;
}

.gap-12 {
  gap: var(--antumo-spacing-9xl) !important;
}

.row-gap-12 {
  row-gap: var(--antumo-spacing-9xl) !important;
}

.column-gap-12 {
  column-gap: var(--antumo-spacing-9xl) !important;
}

.m-16 {
  margin: var(--antumo-spacing-10xl) !important;
}

.mt-16 {
  margin-top: var(--antumo-spacing-10xl) !important;
}

.mr-16, .me-16 {
  margin-right: var(--antumo-spacing-10xl) !important;
}

.mb-16 {
  margin-bottom: var(--antumo-spacing-10xl) !important;
}

.ml-16, .ms-16 {
  margin-left: var(--antumo-spacing-10xl) !important;
}

.mx-16 {
  margin-left: var(--antumo-spacing-10xl) !important;
  margin-right: var(--antumo-spacing-10xl) !important;
}

.my-16 {
  margin-top: var(--antumo-spacing-10xl) !important;
  margin-bottom: var(--antumo-spacing-10xl) !important;
}

.p-16 {
  padding: var(--antumo-spacing-10xl) !important;
}

.pt-16 {
  padding-top: var(--antumo-spacing-10xl) !important;
}

.pr-16, .pe-16 {
  padding-right: var(--antumo-spacing-10xl) !important;
}

.pb-16 {
  padding-bottom: var(--antumo-spacing-10xl) !important;
}

.pl-16, .ps-16 {
  padding-left: var(--antumo-spacing-10xl) !important;
}

.px-16 {
  padding-left: var(--antumo-spacing-10xl) !important;
  padding-right: var(--antumo-spacing-10xl) !important;
}

.py-16 {
  padding-top: var(--antumo-spacing-10xl) !important;
  padding-bottom: var(--antumo-spacing-10xl) !important;
}

.gap-16 {
  gap: var(--antumo-spacing-10xl) !important;
}

.row-gap-16 {
  row-gap: var(--antumo-spacing-10xl) !important;
}

.column-gap-16 {
  column-gap: var(--antumo-spacing-10xl) !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ms-auto, .ml-auto {
  margin-left: auto !important;
}

.me-auto, .mr-auto {
  margin-right: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: var(--antumo-spacing-none) !important;
  }
  .mt-sm-0 {
    margin-top: var(--antumo-spacing-none) !important;
  }
  .mr-sm-0, .me-sm-0 {
    margin-right: var(--antumo-spacing-none) !important;
  }
  .mb-sm-0 {
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .ml-sm-0, .ms-sm-0 {
    margin-left: var(--antumo-spacing-none) !important;
  }
  .mx-sm-0 {
    margin-left: var(--antumo-spacing-none) !important;
    margin-right: var(--antumo-spacing-none) !important;
  }
  .my-sm-0 {
    margin-top: var(--antumo-spacing-none) !important;
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .p-sm-0 {
    padding: var(--antumo-spacing-none) !important;
  }
  .pt-sm-0 {
    padding-top: var(--antumo-spacing-none) !important;
  }
  .pr-sm-0, .pe-sm-0 {
    padding-right: var(--antumo-spacing-none) !important;
  }
  .pb-sm-0 {
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .pl-sm-0, .ps-sm-0 {
    padding-left: var(--antumo-spacing-none) !important;
  }
  .px-sm-0 {
    padding-left: var(--antumo-spacing-none) !important;
    padding-right: var(--antumo-spacing-none) !important;
  }
  .py-sm-0 {
    padding-top: var(--antumo-spacing-none) !important;
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .gap-sm-0 {
    gap: var(--antumo-spacing-none) !important;
  }
  .row-gap-sm-0 {
    row-gap: var(--antumo-spacing-none) !important;
  }
  .column-gap-sm-0 {
    column-gap: var(--antumo-spacing-none) !important;
  }
  .m-sm-1 {
    margin: var(--antumo-spacing-xs) !important;
  }
  .mt-sm-1 {
    margin-top: var(--antumo-spacing-xs) !important;
  }
  .mr-sm-1, .me-sm-1 {
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .mb-sm-1 {
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .ml-sm-1, .ms-sm-1 {
    margin-left: var(--antumo-spacing-xs) !important;
  }
  .mx-sm-1 {
    margin-left: var(--antumo-spacing-xs) !important;
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .my-sm-1 {
    margin-top: var(--antumo-spacing-xs) !important;
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .p-sm-1 {
    padding: var(--antumo-spacing-xs) !important;
  }
  .pt-sm-1 {
    padding-top: var(--antumo-spacing-xs) !important;
  }
  .pr-sm-1, .pe-sm-1 {
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .pb-sm-1 {
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .pl-sm-1, .ps-sm-1 {
    padding-left: var(--antumo-spacing-xs) !important;
  }
  .px-sm-1 {
    padding-left: var(--antumo-spacing-xs) !important;
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .py-sm-1 {
    padding-top: var(--antumo-spacing-xs) !important;
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .gap-sm-1 {
    gap: var(--antumo-spacing-xs) !important;
  }
  .row-gap-sm-1 {
    row-gap: var(--antumo-spacing-xs) !important;
  }
  .column-gap-sm-1 {
    column-gap: var(--antumo-spacing-xs) !important;
  }
  .m-sm-2 {
    margin: var(--antumo-spacing-md) !important;
  }
  .mt-sm-2 {
    margin-top: var(--antumo-spacing-md) !important;
  }
  .mr-sm-2, .me-sm-2 {
    margin-right: var(--antumo-spacing-md) !important;
  }
  .mb-sm-2 {
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .ml-sm-2, .ms-sm-2 {
    margin-left: var(--antumo-spacing-md) !important;
  }
  .mx-sm-2 {
    margin-left: var(--antumo-spacing-md) !important;
    margin-right: var(--antumo-spacing-md) !important;
  }
  .my-sm-2 {
    margin-top: var(--antumo-spacing-md) !important;
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .p-sm-2 {
    padding: var(--antumo-spacing-md) !important;
  }
  .pt-sm-2 {
    padding-top: var(--antumo-spacing-md) !important;
  }
  .pr-sm-2, .pe-sm-2 {
    padding-right: var(--antumo-spacing-md) !important;
  }
  .pb-sm-2 {
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .pl-sm-2, .ps-sm-2 {
    padding-left: var(--antumo-spacing-md) !important;
  }
  .px-sm-2 {
    padding-left: var(--antumo-spacing-md) !important;
    padding-right: var(--antumo-spacing-md) !important;
  }
  .py-sm-2 {
    padding-top: var(--antumo-spacing-md) !important;
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .gap-sm-2 {
    gap: var(--antumo-spacing-md) !important;
  }
  .row-gap-sm-2 {
    row-gap: var(--antumo-spacing-md) !important;
  }
  .column-gap-sm-2 {
    column-gap: var(--antumo-spacing-md) !important;
  }
  .m-sm-3 {
    margin: var(--antumo-spacing-xl) !important;
  }
  .mt-sm-3 {
    margin-top: var(--antumo-spacing-xl) !important;
  }
  .mr-sm-3, .me-sm-3 {
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .mb-sm-3 {
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .ml-sm-3, .ms-sm-3 {
    margin-left: var(--antumo-spacing-xl) !important;
  }
  .mx-sm-3 {
    margin-left: var(--antumo-spacing-xl) !important;
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .my-sm-3 {
    margin-top: var(--antumo-spacing-xl) !important;
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .p-sm-3 {
    padding: var(--antumo-spacing-xl) !important;
  }
  .pt-sm-3 {
    padding-top: var(--antumo-spacing-xl) !important;
  }
  .pr-sm-3, .pe-sm-3 {
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .pb-sm-3 {
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .pl-sm-3, .ps-sm-3 {
    padding-left: var(--antumo-spacing-xl) !important;
  }
  .px-sm-3 {
    padding-left: var(--antumo-spacing-xl) !important;
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .py-sm-3 {
    padding-top: var(--antumo-spacing-xl) !important;
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .gap-sm-3 {
    gap: var(--antumo-spacing-xl) !important;
  }
  .row-gap-sm-3 {
    row-gap: var(--antumo-spacing-xl) !important;
  }
  .column-gap-sm-3 {
    column-gap: var(--antumo-spacing-xl) !important;
  }
  .m-sm-4 {
    margin: var(--antumo-spacing-3xl) !important;
  }
  .mt-sm-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
  }
  .mr-sm-4, .me-sm-4 {
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .mb-sm-4 {
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .ml-sm-4, .ms-sm-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
  }
  .mx-sm-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .my-sm-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .p-sm-4 {
    padding: var(--antumo-spacing-3xl) !important;
  }
  .pt-sm-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
  }
  .pr-sm-4, .pe-sm-4 {
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .pb-sm-4 {
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .pl-sm-4, .ps-sm-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
  }
  .px-sm-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .py-sm-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .gap-sm-4 {
    gap: var(--antumo-spacing-3xl) !important;
  }
  .row-gap-sm-4 {
    row-gap: var(--antumo-spacing-3xl) !important;
  }
  .column-gap-sm-4 {
    column-gap: var(--antumo-spacing-3xl) !important;
  }
  .m-sm-5 {
    margin: var(--antumo-spacing-4xl) !important;
  }
  .mt-sm-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
  }
  .mr-sm-5, .me-sm-5 {
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .mb-sm-5 {
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .ml-sm-5, .ms-sm-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
  }
  .mx-sm-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .my-sm-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .p-sm-5 {
    padding: var(--antumo-spacing-4xl) !important;
  }
  .pt-sm-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
  }
  .pr-sm-5, .pe-sm-5 {
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .pb-sm-5 {
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .pl-sm-5, .ps-sm-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
  }
  .px-sm-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .py-sm-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .gap-sm-5 {
    gap: var(--antumo-spacing-4xl) !important;
  }
  .row-gap-sm-5 {
    row-gap: var(--antumo-spacing-4xl) !important;
  }
  .column-gap-sm-5 {
    column-gap: var(--antumo-spacing-4xl) !important;
  }
  .m-sm-6 {
    margin: var(--antumo-spacing-6xl) !important;
  }
  .mt-sm-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
  }
  .mr-sm-6, .me-sm-6 {
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .mb-sm-6 {
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .ml-sm-6, .ms-sm-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
  }
  .mx-sm-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .my-sm-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .p-sm-6 {
    padding: var(--antumo-spacing-6xl) !important;
  }
  .pt-sm-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
  }
  .pr-sm-6, .pe-sm-6 {
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .pb-sm-6 {
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .pl-sm-6, .ps-sm-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
  }
  .px-sm-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .py-sm-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .gap-sm-6 {
    gap: var(--antumo-spacing-6xl) !important;
  }
  .row-gap-sm-6 {
    row-gap: var(--antumo-spacing-6xl) !important;
  }
  .column-gap-sm-6 {
    column-gap: var(--antumo-spacing-6xl) !important;
  }
  .m-sm-8 {
    margin: var(--antumo-spacing-7xl) !important;
  }
  .mt-sm-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
  }
  .mr-sm-8, .me-sm-8 {
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .mb-sm-8 {
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .ml-sm-8, .ms-sm-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
  }
  .mx-sm-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .my-sm-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .p-sm-8 {
    padding: var(--antumo-spacing-7xl) !important;
  }
  .pt-sm-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
  }
  .pr-sm-8, .pe-sm-8 {
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .pb-sm-8 {
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .pl-sm-8, .ps-sm-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
  }
  .px-sm-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .py-sm-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .gap-sm-8 {
    gap: var(--antumo-spacing-7xl) !important;
  }
  .row-gap-sm-8 {
    row-gap: var(--antumo-spacing-7xl) !important;
  }
  .column-gap-sm-8 {
    column-gap: var(--antumo-spacing-7xl) !important;
  }
  .m-sm-10 {
    margin: var(--antumo-spacing-8xl) !important;
  }
  .mt-sm-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
  }
  .mr-sm-10, .me-sm-10 {
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .mb-sm-10 {
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .ml-sm-10, .ms-sm-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
  }
  .mx-sm-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .my-sm-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .p-sm-10 {
    padding: var(--antumo-spacing-8xl) !important;
  }
  .pt-sm-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
  }
  .pr-sm-10, .pe-sm-10 {
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .pb-sm-10 {
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .pl-sm-10, .ps-sm-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
  }
  .px-sm-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .py-sm-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .gap-sm-10 {
    gap: var(--antumo-spacing-8xl) !important;
  }
  .row-gap-sm-10 {
    row-gap: var(--antumo-spacing-8xl) !important;
  }
  .column-gap-sm-10 {
    column-gap: var(--antumo-spacing-8xl) !important;
  }
  .m-sm-12 {
    margin: var(--antumo-spacing-9xl) !important;
  }
  .mt-sm-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
  }
  .mr-sm-12, .me-sm-12 {
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .mb-sm-12 {
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .ml-sm-12, .ms-sm-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
  }
  .mx-sm-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .my-sm-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .p-sm-12 {
    padding: var(--antumo-spacing-9xl) !important;
  }
  .pt-sm-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
  }
  .pr-sm-12, .pe-sm-12 {
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .pb-sm-12 {
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .pl-sm-12, .ps-sm-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
  }
  .px-sm-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .py-sm-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .gap-sm-12 {
    gap: var(--antumo-spacing-9xl) !important;
  }
  .row-gap-sm-12 {
    row-gap: var(--antumo-spacing-9xl) !important;
  }
  .column-gap-sm-12 {
    column-gap: var(--antumo-spacing-9xl) !important;
  }
  .m-sm-16 {
    margin: var(--antumo-spacing-10xl) !important;
  }
  .mt-sm-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
  }
  .mr-sm-16, .me-sm-16 {
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .mb-sm-16 {
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .ml-sm-16, .ms-sm-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
  }
  .mx-sm-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .my-sm-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .p-sm-16 {
    padding: var(--antumo-spacing-10xl) !important;
  }
  .pt-sm-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
  }
  .pr-sm-16, .pe-sm-16 {
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .pb-sm-16 {
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .pl-sm-16, .ps-sm-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
  }
  .px-sm-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .py-sm-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .gap-sm-16 {
    gap: var(--antumo-spacing-10xl) !important;
  }
  .row-gap-sm-16 {
    row-gap: var(--antumo-spacing-10xl) !important;
  }
  .column-gap-sm-16 {
    column-gap: var(--antumo-spacing-10xl) !important;
  }
  .mx-sm-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-sm-auto, .ml-sm-auto {
    margin-left: auto !important;
  }
  .me-sm-auto, .mr-sm-auto {
    margin-right: auto !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media (min-width: 768px) {
  .m-md-0 {
    margin: var(--antumo-spacing-none) !important;
  }
  .mt-md-0 {
    margin-top: var(--antumo-spacing-none) !important;
  }
  .mr-md-0, .me-md-0 {
    margin-right: var(--antumo-spacing-none) !important;
  }
  .mb-md-0 {
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .ml-md-0, .ms-md-0 {
    margin-left: var(--antumo-spacing-none) !important;
  }
  .mx-md-0 {
    margin-left: var(--antumo-spacing-none) !important;
    margin-right: var(--antumo-spacing-none) !important;
  }
  .my-md-0 {
    margin-top: var(--antumo-spacing-none) !important;
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .p-md-0 {
    padding: var(--antumo-spacing-none) !important;
  }
  .pt-md-0 {
    padding-top: var(--antumo-spacing-none) !important;
  }
  .pr-md-0, .pe-md-0 {
    padding-right: var(--antumo-spacing-none) !important;
  }
  .pb-md-0 {
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .pl-md-0, .ps-md-0 {
    padding-left: var(--antumo-spacing-none) !important;
  }
  .px-md-0 {
    padding-left: var(--antumo-spacing-none) !important;
    padding-right: var(--antumo-spacing-none) !important;
  }
  .py-md-0 {
    padding-top: var(--antumo-spacing-none) !important;
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .gap-md-0 {
    gap: var(--antumo-spacing-none) !important;
  }
  .row-gap-md-0 {
    row-gap: var(--antumo-spacing-none) !important;
  }
  .column-gap-md-0 {
    column-gap: var(--antumo-spacing-none) !important;
  }
  .m-md-1 {
    margin: var(--antumo-spacing-xs) !important;
  }
  .mt-md-1 {
    margin-top: var(--antumo-spacing-xs) !important;
  }
  .mr-md-1, .me-md-1 {
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .mb-md-1 {
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .ml-md-1, .ms-md-1 {
    margin-left: var(--antumo-spacing-xs) !important;
  }
  .mx-md-1 {
    margin-left: var(--antumo-spacing-xs) !important;
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .my-md-1 {
    margin-top: var(--antumo-spacing-xs) !important;
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .p-md-1 {
    padding: var(--antumo-spacing-xs) !important;
  }
  .pt-md-1 {
    padding-top: var(--antumo-spacing-xs) !important;
  }
  .pr-md-1, .pe-md-1 {
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .pb-md-1 {
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .pl-md-1, .ps-md-1 {
    padding-left: var(--antumo-spacing-xs) !important;
  }
  .px-md-1 {
    padding-left: var(--antumo-spacing-xs) !important;
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .py-md-1 {
    padding-top: var(--antumo-spacing-xs) !important;
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .gap-md-1 {
    gap: var(--antumo-spacing-xs) !important;
  }
  .row-gap-md-1 {
    row-gap: var(--antumo-spacing-xs) !important;
  }
  .column-gap-md-1 {
    column-gap: var(--antumo-spacing-xs) !important;
  }
  .m-md-2 {
    margin: var(--antumo-spacing-md) !important;
  }
  .mt-md-2 {
    margin-top: var(--antumo-spacing-md) !important;
  }
  .mr-md-2, .me-md-2 {
    margin-right: var(--antumo-spacing-md) !important;
  }
  .mb-md-2 {
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .ml-md-2, .ms-md-2 {
    margin-left: var(--antumo-spacing-md) !important;
  }
  .mx-md-2 {
    margin-left: var(--antumo-spacing-md) !important;
    margin-right: var(--antumo-spacing-md) !important;
  }
  .my-md-2 {
    margin-top: var(--antumo-spacing-md) !important;
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .p-md-2 {
    padding: var(--antumo-spacing-md) !important;
  }
  .pt-md-2 {
    padding-top: var(--antumo-spacing-md) !important;
  }
  .pr-md-2, .pe-md-2 {
    padding-right: var(--antumo-spacing-md) !important;
  }
  .pb-md-2 {
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .pl-md-2, .ps-md-2 {
    padding-left: var(--antumo-spacing-md) !important;
  }
  .px-md-2 {
    padding-left: var(--antumo-spacing-md) !important;
    padding-right: var(--antumo-spacing-md) !important;
  }
  .py-md-2 {
    padding-top: var(--antumo-spacing-md) !important;
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .gap-md-2 {
    gap: var(--antumo-spacing-md) !important;
  }
  .row-gap-md-2 {
    row-gap: var(--antumo-spacing-md) !important;
  }
  .column-gap-md-2 {
    column-gap: var(--antumo-spacing-md) !important;
  }
  .m-md-3 {
    margin: var(--antumo-spacing-xl) !important;
  }
  .mt-md-3 {
    margin-top: var(--antumo-spacing-xl) !important;
  }
  .mr-md-3, .me-md-3 {
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .mb-md-3 {
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .ml-md-3, .ms-md-3 {
    margin-left: var(--antumo-spacing-xl) !important;
  }
  .mx-md-3 {
    margin-left: var(--antumo-spacing-xl) !important;
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .my-md-3 {
    margin-top: var(--antumo-spacing-xl) !important;
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .p-md-3 {
    padding: var(--antumo-spacing-xl) !important;
  }
  .pt-md-3 {
    padding-top: var(--antumo-spacing-xl) !important;
  }
  .pr-md-3, .pe-md-3 {
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .pb-md-3 {
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .pl-md-3, .ps-md-3 {
    padding-left: var(--antumo-spacing-xl) !important;
  }
  .px-md-3 {
    padding-left: var(--antumo-spacing-xl) !important;
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .py-md-3 {
    padding-top: var(--antumo-spacing-xl) !important;
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .gap-md-3 {
    gap: var(--antumo-spacing-xl) !important;
  }
  .row-gap-md-3 {
    row-gap: var(--antumo-spacing-xl) !important;
  }
  .column-gap-md-3 {
    column-gap: var(--antumo-spacing-xl) !important;
  }
  .m-md-4 {
    margin: var(--antumo-spacing-3xl) !important;
  }
  .mt-md-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
  }
  .mr-md-4, .me-md-4 {
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .mb-md-4 {
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .ml-md-4, .ms-md-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
  }
  .mx-md-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .my-md-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .p-md-4 {
    padding: var(--antumo-spacing-3xl) !important;
  }
  .pt-md-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
  }
  .pr-md-4, .pe-md-4 {
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .pb-md-4 {
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .pl-md-4, .ps-md-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
  }
  .px-md-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .py-md-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .gap-md-4 {
    gap: var(--antumo-spacing-3xl) !important;
  }
  .row-gap-md-4 {
    row-gap: var(--antumo-spacing-3xl) !important;
  }
  .column-gap-md-4 {
    column-gap: var(--antumo-spacing-3xl) !important;
  }
  .m-md-5 {
    margin: var(--antumo-spacing-4xl) !important;
  }
  .mt-md-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
  }
  .mr-md-5, .me-md-5 {
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .mb-md-5 {
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .ml-md-5, .ms-md-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
  }
  .mx-md-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .my-md-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .p-md-5 {
    padding: var(--antumo-spacing-4xl) !important;
  }
  .pt-md-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
  }
  .pr-md-5, .pe-md-5 {
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .pb-md-5 {
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .pl-md-5, .ps-md-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
  }
  .px-md-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .py-md-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .gap-md-5 {
    gap: var(--antumo-spacing-4xl) !important;
  }
  .row-gap-md-5 {
    row-gap: var(--antumo-spacing-4xl) !important;
  }
  .column-gap-md-5 {
    column-gap: var(--antumo-spacing-4xl) !important;
  }
  .m-md-6 {
    margin: var(--antumo-spacing-6xl) !important;
  }
  .mt-md-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
  }
  .mr-md-6, .me-md-6 {
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .mb-md-6 {
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .ml-md-6, .ms-md-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
  }
  .mx-md-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .my-md-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .p-md-6 {
    padding: var(--antumo-spacing-6xl) !important;
  }
  .pt-md-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
  }
  .pr-md-6, .pe-md-6 {
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .pb-md-6 {
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .pl-md-6, .ps-md-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
  }
  .px-md-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .py-md-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .gap-md-6 {
    gap: var(--antumo-spacing-6xl) !important;
  }
  .row-gap-md-6 {
    row-gap: var(--antumo-spacing-6xl) !important;
  }
  .column-gap-md-6 {
    column-gap: var(--antumo-spacing-6xl) !important;
  }
  .m-md-8 {
    margin: var(--antumo-spacing-7xl) !important;
  }
  .mt-md-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
  }
  .mr-md-8, .me-md-8 {
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .mb-md-8 {
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .ml-md-8, .ms-md-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
  }
  .mx-md-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .my-md-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .p-md-8 {
    padding: var(--antumo-spacing-7xl) !important;
  }
  .pt-md-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
  }
  .pr-md-8, .pe-md-8 {
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .pb-md-8 {
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .pl-md-8, .ps-md-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
  }
  .px-md-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .py-md-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .gap-md-8 {
    gap: var(--antumo-spacing-7xl) !important;
  }
  .row-gap-md-8 {
    row-gap: var(--antumo-spacing-7xl) !important;
  }
  .column-gap-md-8 {
    column-gap: var(--antumo-spacing-7xl) !important;
  }
  .m-md-10 {
    margin: var(--antumo-spacing-8xl) !important;
  }
  .mt-md-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
  }
  .mr-md-10, .me-md-10 {
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .mb-md-10 {
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .ml-md-10, .ms-md-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
  }
  .mx-md-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .my-md-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .p-md-10 {
    padding: var(--antumo-spacing-8xl) !important;
  }
  .pt-md-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
  }
  .pr-md-10, .pe-md-10 {
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .pb-md-10 {
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .pl-md-10, .ps-md-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
  }
  .px-md-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .py-md-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .gap-md-10 {
    gap: var(--antumo-spacing-8xl) !important;
  }
  .row-gap-md-10 {
    row-gap: var(--antumo-spacing-8xl) !important;
  }
  .column-gap-md-10 {
    column-gap: var(--antumo-spacing-8xl) !important;
  }
  .m-md-12 {
    margin: var(--antumo-spacing-9xl) !important;
  }
  .mt-md-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
  }
  .mr-md-12, .me-md-12 {
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .mb-md-12 {
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .ml-md-12, .ms-md-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
  }
  .mx-md-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .my-md-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .p-md-12 {
    padding: var(--antumo-spacing-9xl) !important;
  }
  .pt-md-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
  }
  .pr-md-12, .pe-md-12 {
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .pb-md-12 {
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .pl-md-12, .ps-md-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
  }
  .px-md-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .py-md-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .gap-md-12 {
    gap: var(--antumo-spacing-9xl) !important;
  }
  .row-gap-md-12 {
    row-gap: var(--antumo-spacing-9xl) !important;
  }
  .column-gap-md-12 {
    column-gap: var(--antumo-spacing-9xl) !important;
  }
  .m-md-16 {
    margin: var(--antumo-spacing-10xl) !important;
  }
  .mt-md-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
  }
  .mr-md-16, .me-md-16 {
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .mb-md-16 {
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .ml-md-16, .ms-md-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
  }
  .mx-md-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .my-md-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .p-md-16 {
    padding: var(--antumo-spacing-10xl) !important;
  }
  .pt-md-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
  }
  .pr-md-16, .pe-md-16 {
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .pb-md-16 {
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .pl-md-16, .ps-md-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
  }
  .px-md-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .py-md-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .gap-md-16 {
    gap: var(--antumo-spacing-10xl) !important;
  }
  .row-gap-md-16 {
    row-gap: var(--antumo-spacing-10xl) !important;
  }
  .column-gap-md-16 {
    column-gap: var(--antumo-spacing-10xl) !important;
  }
  .mx-md-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-md-auto, .ml-md-auto {
    margin-left: auto !important;
  }
  .me-md-auto, .mr-md-auto {
    margin-right: auto !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media (min-width: 992px) {
  .m-lg-0 {
    margin: var(--antumo-spacing-none) !important;
  }
  .mt-lg-0 {
    margin-top: var(--antumo-spacing-none) !important;
  }
  .mr-lg-0, .me-lg-0 {
    margin-right: var(--antumo-spacing-none) !important;
  }
  .mb-lg-0 {
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .ml-lg-0, .ms-lg-0 {
    margin-left: var(--antumo-spacing-none) !important;
  }
  .mx-lg-0 {
    margin-left: var(--antumo-spacing-none) !important;
    margin-right: var(--antumo-spacing-none) !important;
  }
  .my-lg-0 {
    margin-top: var(--antumo-spacing-none) !important;
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .p-lg-0 {
    padding: var(--antumo-spacing-none) !important;
  }
  .pt-lg-0 {
    padding-top: var(--antumo-spacing-none) !important;
  }
  .pr-lg-0, .pe-lg-0 {
    padding-right: var(--antumo-spacing-none) !important;
  }
  .pb-lg-0 {
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .pl-lg-0, .ps-lg-0 {
    padding-left: var(--antumo-spacing-none) !important;
  }
  .px-lg-0 {
    padding-left: var(--antumo-spacing-none) !important;
    padding-right: var(--antumo-spacing-none) !important;
  }
  .py-lg-0 {
    padding-top: var(--antumo-spacing-none) !important;
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .gap-lg-0 {
    gap: var(--antumo-spacing-none) !important;
  }
  .row-gap-lg-0 {
    row-gap: var(--antumo-spacing-none) !important;
  }
  .column-gap-lg-0 {
    column-gap: var(--antumo-spacing-none) !important;
  }
  .m-lg-1 {
    margin: var(--antumo-spacing-xs) !important;
  }
  .mt-lg-1 {
    margin-top: var(--antumo-spacing-xs) !important;
  }
  .mr-lg-1, .me-lg-1 {
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .mb-lg-1 {
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .ml-lg-1, .ms-lg-1 {
    margin-left: var(--antumo-spacing-xs) !important;
  }
  .mx-lg-1 {
    margin-left: var(--antumo-spacing-xs) !important;
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .my-lg-1 {
    margin-top: var(--antumo-spacing-xs) !important;
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .p-lg-1 {
    padding: var(--antumo-spacing-xs) !important;
  }
  .pt-lg-1 {
    padding-top: var(--antumo-spacing-xs) !important;
  }
  .pr-lg-1, .pe-lg-1 {
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .pb-lg-1 {
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .pl-lg-1, .ps-lg-1 {
    padding-left: var(--antumo-spacing-xs) !important;
  }
  .px-lg-1 {
    padding-left: var(--antumo-spacing-xs) !important;
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .py-lg-1 {
    padding-top: var(--antumo-spacing-xs) !important;
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .gap-lg-1 {
    gap: var(--antumo-spacing-xs) !important;
  }
  .row-gap-lg-1 {
    row-gap: var(--antumo-spacing-xs) !important;
  }
  .column-gap-lg-1 {
    column-gap: var(--antumo-spacing-xs) !important;
  }
  .m-lg-2 {
    margin: var(--antumo-spacing-md) !important;
  }
  .mt-lg-2 {
    margin-top: var(--antumo-spacing-md) !important;
  }
  .mr-lg-2, .me-lg-2 {
    margin-right: var(--antumo-spacing-md) !important;
  }
  .mb-lg-2 {
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .ml-lg-2, .ms-lg-2 {
    margin-left: var(--antumo-spacing-md) !important;
  }
  .mx-lg-2 {
    margin-left: var(--antumo-spacing-md) !important;
    margin-right: var(--antumo-spacing-md) !important;
  }
  .my-lg-2 {
    margin-top: var(--antumo-spacing-md) !important;
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .p-lg-2 {
    padding: var(--antumo-spacing-md) !important;
  }
  .pt-lg-2 {
    padding-top: var(--antumo-spacing-md) !important;
  }
  .pr-lg-2, .pe-lg-2 {
    padding-right: var(--antumo-spacing-md) !important;
  }
  .pb-lg-2 {
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .pl-lg-2, .ps-lg-2 {
    padding-left: var(--antumo-spacing-md) !important;
  }
  .px-lg-2 {
    padding-left: var(--antumo-spacing-md) !important;
    padding-right: var(--antumo-spacing-md) !important;
  }
  .py-lg-2 {
    padding-top: var(--antumo-spacing-md) !important;
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .gap-lg-2 {
    gap: var(--antumo-spacing-md) !important;
  }
  .row-gap-lg-2 {
    row-gap: var(--antumo-spacing-md) !important;
  }
  .column-gap-lg-2 {
    column-gap: var(--antumo-spacing-md) !important;
  }
  .m-lg-3 {
    margin: var(--antumo-spacing-xl) !important;
  }
  .mt-lg-3 {
    margin-top: var(--antumo-spacing-xl) !important;
  }
  .mr-lg-3, .me-lg-3 {
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .mb-lg-3 {
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .ml-lg-3, .ms-lg-3 {
    margin-left: var(--antumo-spacing-xl) !important;
  }
  .mx-lg-3 {
    margin-left: var(--antumo-spacing-xl) !important;
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .my-lg-3 {
    margin-top: var(--antumo-spacing-xl) !important;
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .p-lg-3 {
    padding: var(--antumo-spacing-xl) !important;
  }
  .pt-lg-3 {
    padding-top: var(--antumo-spacing-xl) !important;
  }
  .pr-lg-3, .pe-lg-3 {
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .pb-lg-3 {
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .pl-lg-3, .ps-lg-3 {
    padding-left: var(--antumo-spacing-xl) !important;
  }
  .px-lg-3 {
    padding-left: var(--antumo-spacing-xl) !important;
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .py-lg-3 {
    padding-top: var(--antumo-spacing-xl) !important;
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .gap-lg-3 {
    gap: var(--antumo-spacing-xl) !important;
  }
  .row-gap-lg-3 {
    row-gap: var(--antumo-spacing-xl) !important;
  }
  .column-gap-lg-3 {
    column-gap: var(--antumo-spacing-xl) !important;
  }
  .m-lg-4 {
    margin: var(--antumo-spacing-3xl) !important;
  }
  .mt-lg-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
  }
  .mr-lg-4, .me-lg-4 {
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .mb-lg-4 {
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .ml-lg-4, .ms-lg-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
  }
  .mx-lg-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .my-lg-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .p-lg-4 {
    padding: var(--antumo-spacing-3xl) !important;
  }
  .pt-lg-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
  }
  .pr-lg-4, .pe-lg-4 {
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .pb-lg-4 {
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .pl-lg-4, .ps-lg-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
  }
  .px-lg-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .py-lg-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .gap-lg-4 {
    gap: var(--antumo-spacing-3xl) !important;
  }
  .row-gap-lg-4 {
    row-gap: var(--antumo-spacing-3xl) !important;
  }
  .column-gap-lg-4 {
    column-gap: var(--antumo-spacing-3xl) !important;
  }
  .m-lg-5 {
    margin: var(--antumo-spacing-4xl) !important;
  }
  .mt-lg-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
  }
  .mr-lg-5, .me-lg-5 {
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .mb-lg-5 {
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .ml-lg-5, .ms-lg-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
  }
  .mx-lg-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .my-lg-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .p-lg-5 {
    padding: var(--antumo-spacing-4xl) !important;
  }
  .pt-lg-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
  }
  .pr-lg-5, .pe-lg-5 {
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .pb-lg-5 {
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .pl-lg-5, .ps-lg-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
  }
  .px-lg-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .py-lg-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .gap-lg-5 {
    gap: var(--antumo-spacing-4xl) !important;
  }
  .row-gap-lg-5 {
    row-gap: var(--antumo-spacing-4xl) !important;
  }
  .column-gap-lg-5 {
    column-gap: var(--antumo-spacing-4xl) !important;
  }
  .m-lg-6 {
    margin: var(--antumo-spacing-6xl) !important;
  }
  .mt-lg-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
  }
  .mr-lg-6, .me-lg-6 {
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .mb-lg-6 {
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .ml-lg-6, .ms-lg-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
  }
  .mx-lg-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .my-lg-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .p-lg-6 {
    padding: var(--antumo-spacing-6xl) !important;
  }
  .pt-lg-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
  }
  .pr-lg-6, .pe-lg-6 {
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .pb-lg-6 {
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .pl-lg-6, .ps-lg-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
  }
  .px-lg-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .py-lg-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .gap-lg-6 {
    gap: var(--antumo-spacing-6xl) !important;
  }
  .row-gap-lg-6 {
    row-gap: var(--antumo-spacing-6xl) !important;
  }
  .column-gap-lg-6 {
    column-gap: var(--antumo-spacing-6xl) !important;
  }
  .m-lg-8 {
    margin: var(--antumo-spacing-7xl) !important;
  }
  .mt-lg-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
  }
  .mr-lg-8, .me-lg-8 {
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .mb-lg-8 {
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .ml-lg-8, .ms-lg-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
  }
  .mx-lg-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .my-lg-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .p-lg-8 {
    padding: var(--antumo-spacing-7xl) !important;
  }
  .pt-lg-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
  }
  .pr-lg-8, .pe-lg-8 {
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .pb-lg-8 {
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .pl-lg-8, .ps-lg-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
  }
  .px-lg-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .py-lg-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .gap-lg-8 {
    gap: var(--antumo-spacing-7xl) !important;
  }
  .row-gap-lg-8 {
    row-gap: var(--antumo-spacing-7xl) !important;
  }
  .column-gap-lg-8 {
    column-gap: var(--antumo-spacing-7xl) !important;
  }
  .m-lg-10 {
    margin: var(--antumo-spacing-8xl) !important;
  }
  .mt-lg-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
  }
  .mr-lg-10, .me-lg-10 {
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .mb-lg-10 {
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .ml-lg-10, .ms-lg-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
  }
  .mx-lg-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .my-lg-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .p-lg-10 {
    padding: var(--antumo-spacing-8xl) !important;
  }
  .pt-lg-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
  }
  .pr-lg-10, .pe-lg-10 {
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .pb-lg-10 {
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .pl-lg-10, .ps-lg-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
  }
  .px-lg-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .py-lg-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .gap-lg-10 {
    gap: var(--antumo-spacing-8xl) !important;
  }
  .row-gap-lg-10 {
    row-gap: var(--antumo-spacing-8xl) !important;
  }
  .column-gap-lg-10 {
    column-gap: var(--antumo-spacing-8xl) !important;
  }
  .m-lg-12 {
    margin: var(--antumo-spacing-9xl) !important;
  }
  .mt-lg-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
  }
  .mr-lg-12, .me-lg-12 {
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .mb-lg-12 {
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .ml-lg-12, .ms-lg-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
  }
  .mx-lg-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .my-lg-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .p-lg-12 {
    padding: var(--antumo-spacing-9xl) !important;
  }
  .pt-lg-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
  }
  .pr-lg-12, .pe-lg-12 {
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .pb-lg-12 {
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .pl-lg-12, .ps-lg-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
  }
  .px-lg-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .py-lg-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .gap-lg-12 {
    gap: var(--antumo-spacing-9xl) !important;
  }
  .row-gap-lg-12 {
    row-gap: var(--antumo-spacing-9xl) !important;
  }
  .column-gap-lg-12 {
    column-gap: var(--antumo-spacing-9xl) !important;
  }
  .m-lg-16 {
    margin: var(--antumo-spacing-10xl) !important;
  }
  .mt-lg-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
  }
  .mr-lg-16, .me-lg-16 {
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .mb-lg-16 {
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .ml-lg-16, .ms-lg-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
  }
  .mx-lg-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .my-lg-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .p-lg-16 {
    padding: var(--antumo-spacing-10xl) !important;
  }
  .pt-lg-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
  }
  .pr-lg-16, .pe-lg-16 {
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .pb-lg-16 {
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .pl-lg-16, .ps-lg-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
  }
  .px-lg-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .py-lg-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .gap-lg-16 {
    gap: var(--antumo-spacing-10xl) !important;
  }
  .row-gap-lg-16 {
    row-gap: var(--antumo-spacing-10xl) !important;
  }
  .column-gap-lg-16 {
    column-gap: var(--antumo-spacing-10xl) !important;
  }
  .mx-lg-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-lg-auto, .ml-lg-auto {
    margin-left: auto !important;
  }
  .me-lg-auto, .mr-lg-auto {
    margin-right: auto !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: var(--antumo-spacing-none) !important;
  }
  .mt-xl-0 {
    margin-top: var(--antumo-spacing-none) !important;
  }
  .mr-xl-0, .me-xl-0 {
    margin-right: var(--antumo-spacing-none) !important;
  }
  .mb-xl-0 {
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .ml-xl-0, .ms-xl-0 {
    margin-left: var(--antumo-spacing-none) !important;
  }
  .mx-xl-0 {
    margin-left: var(--antumo-spacing-none) !important;
    margin-right: var(--antumo-spacing-none) !important;
  }
  .my-xl-0 {
    margin-top: var(--antumo-spacing-none) !important;
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .p-xl-0 {
    padding: var(--antumo-spacing-none) !important;
  }
  .pt-xl-0 {
    padding-top: var(--antumo-spacing-none) !important;
  }
  .pr-xl-0, .pe-xl-0 {
    padding-right: var(--antumo-spacing-none) !important;
  }
  .pb-xl-0 {
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .pl-xl-0, .ps-xl-0 {
    padding-left: var(--antumo-spacing-none) !important;
  }
  .px-xl-0 {
    padding-left: var(--antumo-spacing-none) !important;
    padding-right: var(--antumo-spacing-none) !important;
  }
  .py-xl-0 {
    padding-top: var(--antumo-spacing-none) !important;
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .gap-xl-0 {
    gap: var(--antumo-spacing-none) !important;
  }
  .row-gap-xl-0 {
    row-gap: var(--antumo-spacing-none) !important;
  }
  .column-gap-xl-0 {
    column-gap: var(--antumo-spacing-none) !important;
  }
  .m-xl-1 {
    margin: var(--antumo-spacing-xs) !important;
  }
  .mt-xl-1 {
    margin-top: var(--antumo-spacing-xs) !important;
  }
  .mr-xl-1, .me-xl-1 {
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .mb-xl-1 {
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .ml-xl-1, .ms-xl-1 {
    margin-left: var(--antumo-spacing-xs) !important;
  }
  .mx-xl-1 {
    margin-left: var(--antumo-spacing-xs) !important;
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .my-xl-1 {
    margin-top: var(--antumo-spacing-xs) !important;
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .p-xl-1 {
    padding: var(--antumo-spacing-xs) !important;
  }
  .pt-xl-1 {
    padding-top: var(--antumo-spacing-xs) !important;
  }
  .pr-xl-1, .pe-xl-1 {
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .pb-xl-1 {
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .pl-xl-1, .ps-xl-1 {
    padding-left: var(--antumo-spacing-xs) !important;
  }
  .px-xl-1 {
    padding-left: var(--antumo-spacing-xs) !important;
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .py-xl-1 {
    padding-top: var(--antumo-spacing-xs) !important;
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .gap-xl-1 {
    gap: var(--antumo-spacing-xs) !important;
  }
  .row-gap-xl-1 {
    row-gap: var(--antumo-spacing-xs) !important;
  }
  .column-gap-xl-1 {
    column-gap: var(--antumo-spacing-xs) !important;
  }
  .m-xl-2 {
    margin: var(--antumo-spacing-md) !important;
  }
  .mt-xl-2 {
    margin-top: var(--antumo-spacing-md) !important;
  }
  .mr-xl-2, .me-xl-2 {
    margin-right: var(--antumo-spacing-md) !important;
  }
  .mb-xl-2 {
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .ml-xl-2, .ms-xl-2 {
    margin-left: var(--antumo-spacing-md) !important;
  }
  .mx-xl-2 {
    margin-left: var(--antumo-spacing-md) !important;
    margin-right: var(--antumo-spacing-md) !important;
  }
  .my-xl-2 {
    margin-top: var(--antumo-spacing-md) !important;
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .p-xl-2 {
    padding: var(--antumo-spacing-md) !important;
  }
  .pt-xl-2 {
    padding-top: var(--antumo-spacing-md) !important;
  }
  .pr-xl-2, .pe-xl-2 {
    padding-right: var(--antumo-spacing-md) !important;
  }
  .pb-xl-2 {
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .pl-xl-2, .ps-xl-2 {
    padding-left: var(--antumo-spacing-md) !important;
  }
  .px-xl-2 {
    padding-left: var(--antumo-spacing-md) !important;
    padding-right: var(--antumo-spacing-md) !important;
  }
  .py-xl-2 {
    padding-top: var(--antumo-spacing-md) !important;
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .gap-xl-2 {
    gap: var(--antumo-spacing-md) !important;
  }
  .row-gap-xl-2 {
    row-gap: var(--antumo-spacing-md) !important;
  }
  .column-gap-xl-2 {
    column-gap: var(--antumo-spacing-md) !important;
  }
  .m-xl-3 {
    margin: var(--antumo-spacing-xl) !important;
  }
  .mt-xl-3 {
    margin-top: var(--antumo-spacing-xl) !important;
  }
  .mr-xl-3, .me-xl-3 {
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .mb-xl-3 {
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .ml-xl-3, .ms-xl-3 {
    margin-left: var(--antumo-spacing-xl) !important;
  }
  .mx-xl-3 {
    margin-left: var(--antumo-spacing-xl) !important;
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .my-xl-3 {
    margin-top: var(--antumo-spacing-xl) !important;
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .p-xl-3 {
    padding: var(--antumo-spacing-xl) !important;
  }
  .pt-xl-3 {
    padding-top: var(--antumo-spacing-xl) !important;
  }
  .pr-xl-3, .pe-xl-3 {
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .pb-xl-3 {
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .pl-xl-3, .ps-xl-3 {
    padding-left: var(--antumo-spacing-xl) !important;
  }
  .px-xl-3 {
    padding-left: var(--antumo-spacing-xl) !important;
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .py-xl-3 {
    padding-top: var(--antumo-spacing-xl) !important;
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .gap-xl-3 {
    gap: var(--antumo-spacing-xl) !important;
  }
  .row-gap-xl-3 {
    row-gap: var(--antumo-spacing-xl) !important;
  }
  .column-gap-xl-3 {
    column-gap: var(--antumo-spacing-xl) !important;
  }
  .m-xl-4 {
    margin: var(--antumo-spacing-3xl) !important;
  }
  .mt-xl-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
  }
  .mr-xl-4, .me-xl-4 {
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .mb-xl-4 {
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .ml-xl-4, .ms-xl-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
  }
  .mx-xl-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .my-xl-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .p-xl-4 {
    padding: var(--antumo-spacing-3xl) !important;
  }
  .pt-xl-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
  }
  .pr-xl-4, .pe-xl-4 {
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .pb-xl-4 {
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .pl-xl-4, .ps-xl-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
  }
  .px-xl-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .py-xl-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .gap-xl-4 {
    gap: var(--antumo-spacing-3xl) !important;
  }
  .row-gap-xl-4 {
    row-gap: var(--antumo-spacing-3xl) !important;
  }
  .column-gap-xl-4 {
    column-gap: var(--antumo-spacing-3xl) !important;
  }
  .m-xl-5 {
    margin: var(--antumo-spacing-4xl) !important;
  }
  .mt-xl-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
  }
  .mr-xl-5, .me-xl-5 {
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .mb-xl-5 {
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .ml-xl-5, .ms-xl-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
  }
  .mx-xl-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .my-xl-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .p-xl-5 {
    padding: var(--antumo-spacing-4xl) !important;
  }
  .pt-xl-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
  }
  .pr-xl-5, .pe-xl-5 {
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .pb-xl-5 {
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .pl-xl-5, .ps-xl-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
  }
  .px-xl-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .py-xl-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .gap-xl-5 {
    gap: var(--antumo-spacing-4xl) !important;
  }
  .row-gap-xl-5 {
    row-gap: var(--antumo-spacing-4xl) !important;
  }
  .column-gap-xl-5 {
    column-gap: var(--antumo-spacing-4xl) !important;
  }
  .m-xl-6 {
    margin: var(--antumo-spacing-6xl) !important;
  }
  .mt-xl-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
  }
  .mr-xl-6, .me-xl-6 {
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .mb-xl-6 {
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .ml-xl-6, .ms-xl-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
  }
  .mx-xl-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .my-xl-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .p-xl-6 {
    padding: var(--antumo-spacing-6xl) !important;
  }
  .pt-xl-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
  }
  .pr-xl-6, .pe-xl-6 {
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .pb-xl-6 {
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .pl-xl-6, .ps-xl-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
  }
  .px-xl-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .py-xl-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .gap-xl-6 {
    gap: var(--antumo-spacing-6xl) !important;
  }
  .row-gap-xl-6 {
    row-gap: var(--antumo-spacing-6xl) !important;
  }
  .column-gap-xl-6 {
    column-gap: var(--antumo-spacing-6xl) !important;
  }
  .m-xl-8 {
    margin: var(--antumo-spacing-7xl) !important;
  }
  .mt-xl-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
  }
  .mr-xl-8, .me-xl-8 {
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .mb-xl-8 {
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .ml-xl-8, .ms-xl-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
  }
  .mx-xl-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .my-xl-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .p-xl-8 {
    padding: var(--antumo-spacing-7xl) !important;
  }
  .pt-xl-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
  }
  .pr-xl-8, .pe-xl-8 {
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .pb-xl-8 {
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .pl-xl-8, .ps-xl-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
  }
  .px-xl-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .py-xl-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .gap-xl-8 {
    gap: var(--antumo-spacing-7xl) !important;
  }
  .row-gap-xl-8 {
    row-gap: var(--antumo-spacing-7xl) !important;
  }
  .column-gap-xl-8 {
    column-gap: var(--antumo-spacing-7xl) !important;
  }
  .m-xl-10 {
    margin: var(--antumo-spacing-8xl) !important;
  }
  .mt-xl-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
  }
  .mr-xl-10, .me-xl-10 {
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .mb-xl-10 {
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .ml-xl-10, .ms-xl-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
  }
  .mx-xl-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .my-xl-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .p-xl-10 {
    padding: var(--antumo-spacing-8xl) !important;
  }
  .pt-xl-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
  }
  .pr-xl-10, .pe-xl-10 {
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .pb-xl-10 {
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .pl-xl-10, .ps-xl-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
  }
  .px-xl-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .py-xl-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .gap-xl-10 {
    gap: var(--antumo-spacing-8xl) !important;
  }
  .row-gap-xl-10 {
    row-gap: var(--antumo-spacing-8xl) !important;
  }
  .column-gap-xl-10 {
    column-gap: var(--antumo-spacing-8xl) !important;
  }
  .m-xl-12 {
    margin: var(--antumo-spacing-9xl) !important;
  }
  .mt-xl-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
  }
  .mr-xl-12, .me-xl-12 {
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .mb-xl-12 {
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .ml-xl-12, .ms-xl-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
  }
  .mx-xl-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .my-xl-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .p-xl-12 {
    padding: var(--antumo-spacing-9xl) !important;
  }
  .pt-xl-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
  }
  .pr-xl-12, .pe-xl-12 {
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .pb-xl-12 {
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .pl-xl-12, .ps-xl-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
  }
  .px-xl-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .py-xl-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .gap-xl-12 {
    gap: var(--antumo-spacing-9xl) !important;
  }
  .row-gap-xl-12 {
    row-gap: var(--antumo-spacing-9xl) !important;
  }
  .column-gap-xl-12 {
    column-gap: var(--antumo-spacing-9xl) !important;
  }
  .m-xl-16 {
    margin: var(--antumo-spacing-10xl) !important;
  }
  .mt-xl-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
  }
  .mr-xl-16, .me-xl-16 {
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .mb-xl-16 {
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .ml-xl-16, .ms-xl-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
  }
  .mx-xl-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .my-xl-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .p-xl-16 {
    padding: var(--antumo-spacing-10xl) !important;
  }
  .pt-xl-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
  }
  .pr-xl-16, .pe-xl-16 {
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .pb-xl-16 {
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .pl-xl-16, .ps-xl-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
  }
  .px-xl-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .py-xl-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .gap-xl-16 {
    gap: var(--antumo-spacing-10xl) !important;
  }
  .row-gap-xl-16 {
    row-gap: var(--antumo-spacing-10xl) !important;
  }
  .column-gap-xl-16 {
    column-gap: var(--antumo-spacing-10xl) !important;
  }
  .mx-xl-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-xl-auto, .ml-xl-auto {
    margin-left: auto !important;
  }
  .me-xl-auto, .mr-xl-auto {
    margin-right: auto !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media (min-width: 1400px) {
  .m-xxl-0 {
    margin: var(--antumo-spacing-none) !important;
  }
  .mt-xxl-0 {
    margin-top: var(--antumo-spacing-none) !important;
  }
  .mr-xxl-0, .me-xxl-0 {
    margin-right: var(--antumo-spacing-none) !important;
  }
  .mb-xxl-0 {
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .ml-xxl-0, .ms-xxl-0 {
    margin-left: var(--antumo-spacing-none) !important;
  }
  .mx-xxl-0 {
    margin-left: var(--antumo-spacing-none) !important;
    margin-right: var(--antumo-spacing-none) !important;
  }
  .my-xxl-0 {
    margin-top: var(--antumo-spacing-none) !important;
    margin-bottom: var(--antumo-spacing-none) !important;
  }
  .p-xxl-0 {
    padding: var(--antumo-spacing-none) !important;
  }
  .pt-xxl-0 {
    padding-top: var(--antumo-spacing-none) !important;
  }
  .pr-xxl-0, .pe-xxl-0 {
    padding-right: var(--antumo-spacing-none) !important;
  }
  .pb-xxl-0 {
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .pl-xxl-0, .ps-xxl-0 {
    padding-left: var(--antumo-spacing-none) !important;
  }
  .px-xxl-0 {
    padding-left: var(--antumo-spacing-none) !important;
    padding-right: var(--antumo-spacing-none) !important;
  }
  .py-xxl-0 {
    padding-top: var(--antumo-spacing-none) !important;
    padding-bottom: var(--antumo-spacing-none) !important;
  }
  .gap-xxl-0 {
    gap: var(--antumo-spacing-none) !important;
  }
  .row-gap-xxl-0 {
    row-gap: var(--antumo-spacing-none) !important;
  }
  .column-gap-xxl-0 {
    column-gap: var(--antumo-spacing-none) !important;
  }
  .m-xxl-1 {
    margin: var(--antumo-spacing-xs) !important;
  }
  .mt-xxl-1 {
    margin-top: var(--antumo-spacing-xs) !important;
  }
  .mr-xxl-1, .me-xxl-1 {
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .mb-xxl-1 {
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .ml-xxl-1, .ms-xxl-1 {
    margin-left: var(--antumo-spacing-xs) !important;
  }
  .mx-xxl-1 {
    margin-left: var(--antumo-spacing-xs) !important;
    margin-right: var(--antumo-spacing-xs) !important;
  }
  .my-xxl-1 {
    margin-top: var(--antumo-spacing-xs) !important;
    margin-bottom: var(--antumo-spacing-xs) !important;
  }
  .p-xxl-1 {
    padding: var(--antumo-spacing-xs) !important;
  }
  .pt-xxl-1 {
    padding-top: var(--antumo-spacing-xs) !important;
  }
  .pr-xxl-1, .pe-xxl-1 {
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .pb-xxl-1 {
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .pl-xxl-1, .ps-xxl-1 {
    padding-left: var(--antumo-spacing-xs) !important;
  }
  .px-xxl-1 {
    padding-left: var(--antumo-spacing-xs) !important;
    padding-right: var(--antumo-spacing-xs) !important;
  }
  .py-xxl-1 {
    padding-top: var(--antumo-spacing-xs) !important;
    padding-bottom: var(--antumo-spacing-xs) !important;
  }
  .gap-xxl-1 {
    gap: var(--antumo-spacing-xs) !important;
  }
  .row-gap-xxl-1 {
    row-gap: var(--antumo-spacing-xs) !important;
  }
  .column-gap-xxl-1 {
    column-gap: var(--antumo-spacing-xs) !important;
  }
  .m-xxl-2 {
    margin: var(--antumo-spacing-md) !important;
  }
  .mt-xxl-2 {
    margin-top: var(--antumo-spacing-md) !important;
  }
  .mr-xxl-2, .me-xxl-2 {
    margin-right: var(--antumo-spacing-md) !important;
  }
  .mb-xxl-2 {
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .ml-xxl-2, .ms-xxl-2 {
    margin-left: var(--antumo-spacing-md) !important;
  }
  .mx-xxl-2 {
    margin-left: var(--antumo-spacing-md) !important;
    margin-right: var(--antumo-spacing-md) !important;
  }
  .my-xxl-2 {
    margin-top: var(--antumo-spacing-md) !important;
    margin-bottom: var(--antumo-spacing-md) !important;
  }
  .p-xxl-2 {
    padding: var(--antumo-spacing-md) !important;
  }
  .pt-xxl-2 {
    padding-top: var(--antumo-spacing-md) !important;
  }
  .pr-xxl-2, .pe-xxl-2 {
    padding-right: var(--antumo-spacing-md) !important;
  }
  .pb-xxl-2 {
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .pl-xxl-2, .ps-xxl-2 {
    padding-left: var(--antumo-spacing-md) !important;
  }
  .px-xxl-2 {
    padding-left: var(--antumo-spacing-md) !important;
    padding-right: var(--antumo-spacing-md) !important;
  }
  .py-xxl-2 {
    padding-top: var(--antumo-spacing-md) !important;
    padding-bottom: var(--antumo-spacing-md) !important;
  }
  .gap-xxl-2 {
    gap: var(--antumo-spacing-md) !important;
  }
  .row-gap-xxl-2 {
    row-gap: var(--antumo-spacing-md) !important;
  }
  .column-gap-xxl-2 {
    column-gap: var(--antumo-spacing-md) !important;
  }
  .m-xxl-3 {
    margin: var(--antumo-spacing-xl) !important;
  }
  .mt-xxl-3 {
    margin-top: var(--antumo-spacing-xl) !important;
  }
  .mr-xxl-3, .me-xxl-3 {
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .mb-xxl-3 {
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .ml-xxl-3, .ms-xxl-3 {
    margin-left: var(--antumo-spacing-xl) !important;
  }
  .mx-xxl-3 {
    margin-left: var(--antumo-spacing-xl) !important;
    margin-right: var(--antumo-spacing-xl) !important;
  }
  .my-xxl-3 {
    margin-top: var(--antumo-spacing-xl) !important;
    margin-bottom: var(--antumo-spacing-xl) !important;
  }
  .p-xxl-3 {
    padding: var(--antumo-spacing-xl) !important;
  }
  .pt-xxl-3 {
    padding-top: var(--antumo-spacing-xl) !important;
  }
  .pr-xxl-3, .pe-xxl-3 {
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .pb-xxl-3 {
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .pl-xxl-3, .ps-xxl-3 {
    padding-left: var(--antumo-spacing-xl) !important;
  }
  .px-xxl-3 {
    padding-left: var(--antumo-spacing-xl) !important;
    padding-right: var(--antumo-spacing-xl) !important;
  }
  .py-xxl-3 {
    padding-top: var(--antumo-spacing-xl) !important;
    padding-bottom: var(--antumo-spacing-xl) !important;
  }
  .gap-xxl-3 {
    gap: var(--antumo-spacing-xl) !important;
  }
  .row-gap-xxl-3 {
    row-gap: var(--antumo-spacing-xl) !important;
  }
  .column-gap-xxl-3 {
    column-gap: var(--antumo-spacing-xl) !important;
  }
  .m-xxl-4 {
    margin: var(--antumo-spacing-3xl) !important;
  }
  .mt-xxl-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
  }
  .mr-xxl-4, .me-xxl-4 {
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .mb-xxl-4 {
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .ml-xxl-4, .ms-xxl-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
  }
  .mx-xxl-4 {
    margin-left: var(--antumo-spacing-3xl) !important;
    margin-right: var(--antumo-spacing-3xl) !important;
  }
  .my-xxl-4 {
    margin-top: var(--antumo-spacing-3xl) !important;
    margin-bottom: var(--antumo-spacing-3xl) !important;
  }
  .p-xxl-4 {
    padding: var(--antumo-spacing-3xl) !important;
  }
  .pt-xxl-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
  }
  .pr-xxl-4, .pe-xxl-4 {
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .pb-xxl-4 {
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .pl-xxl-4, .ps-xxl-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
  }
  .px-xxl-4 {
    padding-left: var(--antumo-spacing-3xl) !important;
    padding-right: var(--antumo-spacing-3xl) !important;
  }
  .py-xxl-4 {
    padding-top: var(--antumo-spacing-3xl) !important;
    padding-bottom: var(--antumo-spacing-3xl) !important;
  }
  .gap-xxl-4 {
    gap: var(--antumo-spacing-3xl) !important;
  }
  .row-gap-xxl-4 {
    row-gap: var(--antumo-spacing-3xl) !important;
  }
  .column-gap-xxl-4 {
    column-gap: var(--antumo-spacing-3xl) !important;
  }
  .m-xxl-5 {
    margin: var(--antumo-spacing-4xl) !important;
  }
  .mt-xxl-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
  }
  .mr-xxl-5, .me-xxl-5 {
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .mb-xxl-5 {
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .ml-xxl-5, .ms-xxl-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
  }
  .mx-xxl-5 {
    margin-left: var(--antumo-spacing-4xl) !important;
    margin-right: var(--antumo-spacing-4xl) !important;
  }
  .my-xxl-5 {
    margin-top: var(--antumo-spacing-4xl) !important;
    margin-bottom: var(--antumo-spacing-4xl) !important;
  }
  .p-xxl-5 {
    padding: var(--antumo-spacing-4xl) !important;
  }
  .pt-xxl-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
  }
  .pr-xxl-5, .pe-xxl-5 {
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .pb-xxl-5 {
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .pl-xxl-5, .ps-xxl-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
  }
  .px-xxl-5 {
    padding-left: var(--antumo-spacing-4xl) !important;
    padding-right: var(--antumo-spacing-4xl) !important;
  }
  .py-xxl-5 {
    padding-top: var(--antumo-spacing-4xl) !important;
    padding-bottom: var(--antumo-spacing-4xl) !important;
  }
  .gap-xxl-5 {
    gap: var(--antumo-spacing-4xl) !important;
  }
  .row-gap-xxl-5 {
    row-gap: var(--antumo-spacing-4xl) !important;
  }
  .column-gap-xxl-5 {
    column-gap: var(--antumo-spacing-4xl) !important;
  }
  .m-xxl-6 {
    margin: var(--antumo-spacing-6xl) !important;
  }
  .mt-xxl-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
  }
  .mr-xxl-6, .me-xxl-6 {
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .mb-xxl-6 {
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .ml-xxl-6, .ms-xxl-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
  }
  .mx-xxl-6 {
    margin-left: var(--antumo-spacing-6xl) !important;
    margin-right: var(--antumo-spacing-6xl) !important;
  }
  .my-xxl-6 {
    margin-top: var(--antumo-spacing-6xl) !important;
    margin-bottom: var(--antumo-spacing-6xl) !important;
  }
  .p-xxl-6 {
    padding: var(--antumo-spacing-6xl) !important;
  }
  .pt-xxl-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
  }
  .pr-xxl-6, .pe-xxl-6 {
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .pb-xxl-6 {
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .pl-xxl-6, .ps-xxl-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
  }
  .px-xxl-6 {
    padding-left: var(--antumo-spacing-6xl) !important;
    padding-right: var(--antumo-spacing-6xl) !important;
  }
  .py-xxl-6 {
    padding-top: var(--antumo-spacing-6xl) !important;
    padding-bottom: var(--antumo-spacing-6xl) !important;
  }
  .gap-xxl-6 {
    gap: var(--antumo-spacing-6xl) !important;
  }
  .row-gap-xxl-6 {
    row-gap: var(--antumo-spacing-6xl) !important;
  }
  .column-gap-xxl-6 {
    column-gap: var(--antumo-spacing-6xl) !important;
  }
  .m-xxl-8 {
    margin: var(--antumo-spacing-7xl) !important;
  }
  .mt-xxl-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
  }
  .mr-xxl-8, .me-xxl-8 {
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .mb-xxl-8 {
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .ml-xxl-8, .ms-xxl-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
  }
  .mx-xxl-8 {
    margin-left: var(--antumo-spacing-7xl) !important;
    margin-right: var(--antumo-spacing-7xl) !important;
  }
  .my-xxl-8 {
    margin-top: var(--antumo-spacing-7xl) !important;
    margin-bottom: var(--antumo-spacing-7xl) !important;
  }
  .p-xxl-8 {
    padding: var(--antumo-spacing-7xl) !important;
  }
  .pt-xxl-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
  }
  .pr-xxl-8, .pe-xxl-8 {
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .pb-xxl-8 {
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .pl-xxl-8, .ps-xxl-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
  }
  .px-xxl-8 {
    padding-left: var(--antumo-spacing-7xl) !important;
    padding-right: var(--antumo-spacing-7xl) !important;
  }
  .py-xxl-8 {
    padding-top: var(--antumo-spacing-7xl) !important;
    padding-bottom: var(--antumo-spacing-7xl) !important;
  }
  .gap-xxl-8 {
    gap: var(--antumo-spacing-7xl) !important;
  }
  .row-gap-xxl-8 {
    row-gap: var(--antumo-spacing-7xl) !important;
  }
  .column-gap-xxl-8 {
    column-gap: var(--antumo-spacing-7xl) !important;
  }
  .m-xxl-10 {
    margin: var(--antumo-spacing-8xl) !important;
  }
  .mt-xxl-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
  }
  .mr-xxl-10, .me-xxl-10 {
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .mb-xxl-10 {
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .ml-xxl-10, .ms-xxl-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
  }
  .mx-xxl-10 {
    margin-left: var(--antumo-spacing-8xl) !important;
    margin-right: var(--antumo-spacing-8xl) !important;
  }
  .my-xxl-10 {
    margin-top: var(--antumo-spacing-8xl) !important;
    margin-bottom: var(--antumo-spacing-8xl) !important;
  }
  .p-xxl-10 {
    padding: var(--antumo-spacing-8xl) !important;
  }
  .pt-xxl-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
  }
  .pr-xxl-10, .pe-xxl-10 {
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .pb-xxl-10 {
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .pl-xxl-10, .ps-xxl-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
  }
  .px-xxl-10 {
    padding-left: var(--antumo-spacing-8xl) !important;
    padding-right: var(--antumo-spacing-8xl) !important;
  }
  .py-xxl-10 {
    padding-top: var(--antumo-spacing-8xl) !important;
    padding-bottom: var(--antumo-spacing-8xl) !important;
  }
  .gap-xxl-10 {
    gap: var(--antumo-spacing-8xl) !important;
  }
  .row-gap-xxl-10 {
    row-gap: var(--antumo-spacing-8xl) !important;
  }
  .column-gap-xxl-10 {
    column-gap: var(--antumo-spacing-8xl) !important;
  }
  .m-xxl-12 {
    margin: var(--antumo-spacing-9xl) !important;
  }
  .mt-xxl-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
  }
  .mr-xxl-12, .me-xxl-12 {
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .mb-xxl-12 {
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .ml-xxl-12, .ms-xxl-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
  }
  .mx-xxl-12 {
    margin-left: var(--antumo-spacing-9xl) !important;
    margin-right: var(--antumo-spacing-9xl) !important;
  }
  .my-xxl-12 {
    margin-top: var(--antumo-spacing-9xl) !important;
    margin-bottom: var(--antumo-spacing-9xl) !important;
  }
  .p-xxl-12 {
    padding: var(--antumo-spacing-9xl) !important;
  }
  .pt-xxl-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
  }
  .pr-xxl-12, .pe-xxl-12 {
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .pb-xxl-12 {
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .pl-xxl-12, .ps-xxl-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
  }
  .px-xxl-12 {
    padding-left: var(--antumo-spacing-9xl) !important;
    padding-right: var(--antumo-spacing-9xl) !important;
  }
  .py-xxl-12 {
    padding-top: var(--antumo-spacing-9xl) !important;
    padding-bottom: var(--antumo-spacing-9xl) !important;
  }
  .gap-xxl-12 {
    gap: var(--antumo-spacing-9xl) !important;
  }
  .row-gap-xxl-12 {
    row-gap: var(--antumo-spacing-9xl) !important;
  }
  .column-gap-xxl-12 {
    column-gap: var(--antumo-spacing-9xl) !important;
  }
  .m-xxl-16 {
    margin: var(--antumo-spacing-10xl) !important;
  }
  .mt-xxl-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
  }
  .mr-xxl-16, .me-xxl-16 {
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .mb-xxl-16 {
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .ml-xxl-16, .ms-xxl-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
  }
  .mx-xxl-16 {
    margin-left: var(--antumo-spacing-10xl) !important;
    margin-right: var(--antumo-spacing-10xl) !important;
  }
  .my-xxl-16 {
    margin-top: var(--antumo-spacing-10xl) !important;
    margin-bottom: var(--antumo-spacing-10xl) !important;
  }
  .p-xxl-16 {
    padding: var(--antumo-spacing-10xl) !important;
  }
  .pt-xxl-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
  }
  .pr-xxl-16, .pe-xxl-16 {
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .pb-xxl-16 {
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .pl-xxl-16, .ps-xxl-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
  }
  .px-xxl-16 {
    padding-left: var(--antumo-spacing-10xl) !important;
    padding-right: var(--antumo-spacing-10xl) !important;
  }
  .py-xxl-16 {
    padding-top: var(--antumo-spacing-10xl) !important;
    padding-bottom: var(--antumo-spacing-10xl) !important;
  }
  .gap-xxl-16 {
    gap: var(--antumo-spacing-10xl) !important;
  }
  .row-gap-xxl-16 {
    row-gap: var(--antumo-spacing-10xl) !important;
  }
  .column-gap-xxl-16 {
    column-gap: var(--antumo-spacing-10xl) !important;
  }
  .mx-xxl-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ms-xxl-auto, .ml-xxl-auto {
    margin-left: auto !important;
  }
  .me-xxl-auto, .mr-xxl-auto {
    margin-right: auto !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
/**
 * Antumo Design System — Spacing Utilities
 * Based on 4px/8px grid. Scale: 0-16 (0 = 0px, 1 = 4px, 2 = 8px, ... 16 = 64px)
 * Uses CSS custom properties from design tokens.
 * Includes BS5 logical property aliases (ms-*, me-*, ps-*, pe-*).
 * Responsive variants for all breakpoints (sm, md, lg, xl, xxl).
 */
/**
 * Antumo Design System — Display & Layout Utilities
 * BS5-compatible aliases, !important on all declarations, responsive variants.
 */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column,
.flex-col {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse,
.flex-col-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start,
.justify-start {
  justify-content: flex-start !important;
}

.justify-content-end,
.justify-end {
  justify-content: flex-end !important;
}

.justify-content-center,
.justify-center {
  justify-content: center !important;
}

.justify-content-between,
.justify-between {
  justify-content: space-between !important;
}

.justify-content-around,
.justify-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start,
.items-start {
  align-items: flex-start !important;
}

.align-items-end,
.items-end {
  align-items: flex-end !important;
}

.align-items-center,
.items-center {
  align-items: center !important;
}

.align-items-stretch,
.items-stretch {
  align-items: stretch !important;
}

.align-items-baseline,
.items-baseline {
  align-items: baseline !important;
}

.align-self-start,
.self-start {
  align-self: flex-start !important;
}

.align-self-end,
.self-end {
  align-self: flex-end !important;
}

.align-self-center,
.self-center {
  align-self: center !important;
}

.align-self-stretch,
.self-stretch {
  align-self: stretch !important;
}

.align-self-auto,
.self-auto {
  align-self: auto !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-1 {
  flex: 1 1 0% !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-none {
  flex: none !important;
}

.flex-grow-0,
.grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1,
.grow {
  flex-grow: 1 !important;
}

.flex-shrink-0,
.shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1,
.shrink {
  flex-shrink: 1 !important;
}

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

.h-full {
  height: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-auto {
  height: auto !important;
}

.min-w-0 {
  min-width: 0 !important;
}

.min-h-0 {
  min-height: 0 !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.position-relative,
.relative {
  position: relative !important;
}

.position-absolute,
.absolute {
  position: absolute !important;
}

.position-fixed,
.fixed {
  position: fixed !important;
}

.position-sticky,
.sticky {
  position: sticky !important;
}

.position-static,
.static {
  position: static !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
}
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
}
@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
}
/**
 * Antumo Design System — Spacing Utilities
 * Based on 4px/8px grid. Scale: 0-16 (0 = 0px, 1 = 4px, 2 = 8px, ... 16 = 64px)
 * Uses CSS custom properties from design tokens.
 * Includes BS5 logical property aliases (ms-*, me-*, ps-*, pe-*).
 * Responsive variants for all breakpoints (sm, md, lg, xl, xxl).
 */
/**
 * Antumo Design System — Text & Typography Utilities
 * Includes BS5-compatible aliases for text alignment, font-weight, font-size,
 * headings, display, line-height, text-decoration, text-transform, and more.
 */
.text-start,
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-end,
.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

@media (min-width: 576px) {
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
}
@media (min-width: 768px) {
  .text-md-start {
    text-align: left !important;
  }
  .text-md-center {
    text-align: center !important;
  }
  .text-md-end {
    text-align: right !important;
  }
}
@media (min-width: 992px) {
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
}
@media (min-width: 1200px) {
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
}
@media (min-width: 1400px) {
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
}
.fw-lighter {
  font-weight: var(--antumo-font-weight-light) !important;
}

.fw-light,
.font-light {
  font-weight: var(--antumo-font-weight-light) !important;
}

.fw-normal,
.font-regular {
  font-weight: var(--antumo-font-weight-regular) !important;
}

.fw-medium,
.font-medium {
  font-weight: var(--antumo-font-weight-medium) !important;
}

.fw-semibold {
  font-weight: var(--antumo-font-weight-medium) !important;
}

.fw-bold,
.font-bold {
  font-weight: var(--antumo-font-weight-bold) !important;
}

.fw-bolder {
  font-weight: var(--antumo-font-weight-bold) !important;
}

.font-weight-bold {
  font-weight: var(--antumo-font-weight-bold) !important;
}

.font-weight-bolder {
  font-weight: var(--antumo-font-weight-bold) !important;
}

.font-weight-normal {
  font-weight: var(--antumo-font-weight-regular) !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.font-heading {
  font-family: var(--antumo-font-heading) !important;
}

.font-body {
  font-family: var(--antumo-font-body) !important;
}

.font-monospace {
  font-family: monospace !important;
}

.fs-1 {
  font-size: var(--antumo-font-size-4xl) !important;
}

.fs-2 {
  font-size: var(--antumo-font-size-3xl) !important;
}

.fs-3 {
  font-size: var(--antumo-font-size-2xl) !important;
}

.fs-4 {
  font-size: var(--antumo-font-size-xl) !important;
}

.fs-5 {
  font-size: var(--antumo-font-size-lg) !important;
}

.fs-6 {
  font-size: var(--antumo-font-size-sm) !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: var(--antumo-line-height-xs) !important;
}

.lh-base {
  line-height: var(--antumo-line-height-md) !important;
}

.lh-lg {
  line-height: var(--antumo-line-height-xl) !important;
}

.h1 {
  font-size: var(--antumo-font-size-4xl) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  line-height: var(--antumo-line-height-2xl) !important;
}

.h2 {
  font-size: var(--antumo-font-size-3xl) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  line-height: var(--antumo-line-height-xl) !important;
}

.h3 {
  font-size: var(--antumo-font-size-2xl) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  line-height: var(--antumo-line-height-xl) !important;
}

.h4 {
  font-size: var(--antumo-font-size-xl) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
  line-height: var(--antumo-line-height-lg) !important;
}

.h5 {
  font-size: var(--antumo-font-size-lg) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
  line-height: var(--antumo-line-height-lg) !important;
}

.h6 {
  font-size: var(--antumo-font-size-md) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
  line-height: var(--antumo-line-height-md) !important;
}

.display-1 {
  font-size: var(--antumo-font-size-4xl) !important;
  font-weight: var(--antumo-font-weight-light) !important;
  line-height: var(--antumo-line-height-2xl) !important;
}

.display-2 {
  font-size: var(--antumo-font-size-3xl) !important;
  font-weight: var(--antumo-font-weight-light) !important;
  line-height: var(--antumo-line-height-xl) !important;
}

.display-3 {
  font-size: var(--antumo-font-size-2xl) !important;
  font-weight: var(--antumo-font-weight-light) !important;
  line-height: var(--antumo-line-height-xl) !important;
}

.display-4 {
  font-size: var(--antumo-font-size-xl) !important;
  font-weight: var(--antumo-font-weight-light) !important;
  line-height: var(--antumo-line-height-lg) !important;
}

.display-5 {
  font-size: var(--antumo-font-size-lg) !important;
  font-weight: var(--antumo-font-weight-light) !important;
  line-height: var(--antumo-line-height-lg) !important;
}

.display-6 {
  font-size: var(--antumo-font-size-md) !important;
  font-weight: var(--antumo-font-weight-light) !important;
  line-height: var(--antumo-line-height-md) !important;
}

.lead {
  font-size: var(--antumo-font-size-lg) !important;
  font-weight: var(--antumo-font-weight-light) !important;
}

.small {
  font-size: var(--antumo-font-size-xs) !important;
}

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

.text-break {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.whitespace-normal {
  white-space: normal !important;
}

.whitespace-nowrap {
  white-space: nowrap !important;
}

.whitespace-pre {
  white-space: pre !important;
}

.whitespace-pre-line {
  white-space: pre-line !important;
}

.whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

.heading-2xl {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-4xl) !important;
  line-height: var(--antumo-line-height-2xl) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.heading-xl {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-3xl) !important;
  line-height: var(--antumo-line-height-xl) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.heading-lg {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-2xl) !important;
  line-height: var(--antumo-line-height-lg) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.heading-md {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-xl) !important;
  line-height: var(--antumo-line-height-md) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.heading-sm {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-lg) !important;
  line-height: var(--antumo-line-height-md) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.heading-xs {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-sm) !important;
  line-height: var(--antumo-line-height-sm) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.heading-2xs {
  font-family: var(--antumo-font-heading) !important;
  font-size: var(--antumo-font-size-xs) !important;
  line-height: var(--antumo-line-height-xs) !important;
  font-weight: var(--antumo-font-weight-bold) !important;
  letter-spacing: -0.01em !important;
}

.body-xl {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-lg) !important;
  line-height: var(--antumo-line-height-lg) !important;
  font-weight: var(--antumo-font-weight-regular) !important;
}

.body-lg {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-md) !important;
  line-height: var(--antumo-line-height-md) !important;
  font-weight: var(--antumo-font-weight-regular) !important;
}

.body-md {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-sm) !important;
  line-height: var(--antumo-line-height-sm) !important;
  font-weight: var(--antumo-font-weight-regular) !important;
}

.body-sm {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-xs) !important;
  line-height: var(--antumo-line-height-xs) !important;
  font-weight: var(--antumo-font-weight-regular) !important;
}

.label-xl {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-lg) !important;
  line-height: var(--antumo-line-height-lg) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
}

.label-lg {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-md) !important;
  line-height: var(--antumo-line-height-md) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
}

.label-md {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-sm) !important;
  line-height: var(--antumo-line-height-sm) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
}

.label-sm {
  font-family: var(--antumo-font-body) !important;
  font-size: var(--antumo-font-size-xs) !important;
  line-height: var(--antumo-line-height-xs) !important;
  font-weight: var(--antumo-font-weight-medium) !important;
}

.text-decoration-underline,
.underline {
  text-decoration: underline !important;
}

.text-decoration-line-through,
.line-through {
  text-decoration: line-through !important;
}

.text-decoration-none,
.no-underline {
  text-decoration: none !important;
}

.text-uppercase,
.uppercase {
  text-transform: uppercase !important;
}

.text-lowercase,
.lowercase {
  text-transform: lowercase !important;
}

.text-capitalize,
.capitalize {
  text-transform: capitalize !important;
}

.normal-case {
  text-transform: none !important;
}

.list-unstyled {
  padding-left: 0 !important;
  list-style: none !important;
}

.list-inline {
  padding-left: 0 !important;
  list-style: none !important;
}

.list-inline-item {
  display: inline-block !important;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem !important;
}

/**
 * Antumo Design System — Color, Border, Shadow & Radius Utilities
 * Semantic color classes + Bootstrap 5 compatible aliases.
 * All declarations use !important for utility-class specificity.
 */
.text-primary {
  color: var(--antumo-text-primary) !important;
}

.text-secondary {
  color: var(--antumo-text-secondary) !important;
}

.text-tertiary {
  color: var(--antumo-text-tertiary) !important;
}

.text-quaternary {
  color: var(--antumo-text-quaternary) !important;
}

.text-disabled {
  color: var(--antumo-text-disabled) !important;
}

.text-white {
  color: var(--antumo-text-white) !important;
}

.text-brand {
  color: var(--antumo-text-brand-solid) !important;
}

.text-error {
  color: var(--antumo-text-error) !important;
}

.text-warning {
  color: var(--antumo-text-warning) !important;
}

.text-success {
  color: var(--antumo-text-success) !important;
}

.text-muted {
  color: var(--antumo-text-tertiary) !important;
}

.text-body {
  color: var(--antumo-text-primary) !important;
}

.text-body-secondary {
  color: var(--antumo-text-secondary) !important;
}

.text-body-tertiary {
  color: var(--antumo-text-tertiary) !important;
}

.text-danger {
  color: var(--antumo-text-error) !important;
}

.text-info {
  color: var(--antumo-fg-info-primary) !important;
}

.text-dark {
  color: var(--antumo-text-primary) !important;
}

.text-light {
  color: var(--antumo-text-quaternary) !important;
}

.text-black {
  color: var(--antumo-color-black) !important;
}

.bg-primary {
  background-color: var(--antumo-bg-primary) !important;
}

.bg-secondary {
  background-color: var(--antumo-bg-secondary) !important;
}

.bg-tertiary {
  background-color: var(--antumo-bg-tertiary) !important;
}

.bg-brand {
  background-color: var(--antumo-bg-brand-solid) !important;
}

.bg-disabled {
  background-color: var(--antumo-bg-disabled) !important;
}

.bg-error {
  background-color: var(--antumo-bg-error-primary) !important;
}

.bg-warning {
  background-color: var(--antumo-bg-warning-primary) !important;
}

.bg-success {
  background-color: var(--antumo-bg-success-primary) !important;
}

.bg-overlay {
  background-color: var(--antumo-bg-overlay) !important;
}

.bg-active {
  background-color: var(--antumo-bg-active) !important;
}

.bg-body {
  background-color: var(--antumo-bg-primary) !important;
}

.bg-body-secondary {
  background-color: var(--antumo-bg-secondary) !important;
}

.bg-body-tertiary {
  background-color: var(--antumo-bg-tertiary) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-dark {
  background-color: var(--antumo-gray-900) !important;
}

.bg-light {
  background-color: var(--antumo-gray-100) !important;
}

.bg-white {
  background-color: var(--antumo-color-white) !important;
}

.bg-black {
  background-color: var(--antumo-color-black) !important;
}

.bg-danger {
  background-color: var(--antumo-bg-error-primary) !important;
}

.bg-info {
  background-color: var(--antumo-blue-50) !important;
}

.border-primary {
  border-color: var(--antumo-border-primary) !important;
}

.border-secondary {
  border-color: var(--antumo-border-secondary) !important;
}

.border-tertiary {
  border-color: var(--antumo-border-tertiary) !important;
}

.border-brand {
  border-color: var(--antumo-border-brand) !important;
}

.border-error {
  border-color: var(--antumo-border-error) !important;
}

.border-focus {
  border-color: var(--antumo-border-focus) !important;
}

.border {
  border: 1px solid var(--antumo-border-primary) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid var(--antumo-border-primary) !important;
}

.border-end {
  border-right: 1px solid var(--antumo-border-primary) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--antumo-border-primary) !important;
}

.border-start {
  border-left: 1px solid var(--antumo-border-primary) !important;
}

.fg-primary {
  color: var(--antumo-fg-primary) !important;
}

.fg-secondary {
  color: var(--antumo-fg-secondary) !important;
}

.fg-tertiary {
  color: var(--antumo-fg-tertiary) !important;
}

.fg-brand {
  color: var(--antumo-fg-brand-primary) !important;
}

.fg-disabled {
  color: var(--antumo-fg-disabled) !important;
}

.fg-error {
  color: var(--antumo-fg-error-primary) !important;
}

.fg-warning {
  color: var(--antumo-fg-warning-primary) !important;
}

.fg-success {
  color: var(--antumo-fg-success-primary) !important;
}

.shadow-xs {
  box-shadow: var(--antumo-shadow-xs) !important;
}

.shadow-sm {
  box-shadow: var(--antumo-shadow-sm) !important;
}

.shadow-md {
  box-shadow: var(--antumo-shadow-md) !important;
}

.shadow-lg {
  box-shadow: var(--antumo-shadow-lg) !important;
}

.shadow-xl {
  box-shadow: var(--antumo-shadow-xl) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.shadow {
  box-shadow: var(--antumo-shadow-md) !important;
}

.rounded-none {
  border-radius: 0 !important;
}

.rounded-sm {
  border-radius: var(--antumo-radius-sm) !important;
}

.rounded {
  border-radius: var(--antumo-radius-md) !important;
}

.rounded-md {
  border-radius: var(--antumo-radius-md) !important;
}

.rounded-lg {
  border-radius: var(--antumo-radius-xl) !important;
}

.rounded-xl {
  border-radius: var(--antumo-radius-2xl) !important;
}

.rounded-full {
  border-radius: var(--antumo-radius-full) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: var(--antumo-radius-xs) !important;
}

.rounded-2 {
  border-radius: var(--antumo-radius-sm) !important;
}

.rounded-3 {
  border-radius: var(--antumo-radius-md) !important;
}

.rounded-4 {
  border-radius: var(--antumo-radius-lg) !important;
}

.rounded-5 {
  border-radius: var(--antumo-radius-xl) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: var(--antumo-radius-full) !important;
}

/**
 * Antumo Design System — Spacing Utilities
 * Based on 4px/8px grid. Scale: 0-16 (0 = 0px, 1 = 4px, 2 = 8px, ... 16 = 64px)
 * Uses CSS custom properties from design tokens.
 * Includes BS5 logical property aliases (ms-*, me-*, ps-*, pe-*).
 * Responsive variants for all breakpoints (sm, md, lg, xl, xxl).
 */
/** Antumo Design System — Grid System */
.container {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px !important;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px !important;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px !important;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px !important;
  }
}

.container-fluid {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.container-sm {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 576px) {
  .container-sm {
    max-width: 540px !important;
  }
}

.container-md {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 768px) {
  .container-md {
    max-width: 720px !important;
  }
}

.container-lg {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 992px) {
  .container-lg {
    max-width: 960px !important;
  }
}

.container-xl {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 1200px) {
  .container-xl {
    max-width: 1140px !important;
  }
}

.container-xxl {
  width: 100% !important;
  padding-left: var(--antumo-spacing-3xl) !important;
  padding-right: var(--antumo-spacing-3xl) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 1400px) {
  .container-xxl {
    max-width: 1320px !important;
  }
}

.row {
  --antumo-gutter-x: var(--antumo-spacing-4xl);
  --antumo-gutter-y: 0;
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: calc(var(--antumo-gutter-x) / -2) !important;
  margin-right: calc(var(--antumo-gutter-x) / -2) !important;
  margin-top: calc(var(--antumo-gutter-y) * -1) !important;
}
.row > * {
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: calc(var(--antumo-gutter-x) / 2) !important;
  padding-right: calc(var(--antumo-gutter-x) / 2) !important;
  margin-top: var(--antumo-gutter-y) !important;
}

.row[hidden] {
  display: none !important;
}

.g-0 {
  --antumo-gutter-x: 0 !important;
  --antumo-gutter-y: 0 !important;
}

.gx-0 {
  --antumo-gutter-x: 0 !important;
}

.gy-0 {
  --antumo-gutter-y: 0 !important;
}

.g-1 {
  --antumo-gutter-x: var(--antumo-spacing-xs) !important;
  --antumo-gutter-y: var(--antumo-spacing-xs) !important;
}

.gx-1 {
  --antumo-gutter-x: var(--antumo-spacing-xs) !important;
}

.gy-1 {
  --antumo-gutter-y: var(--antumo-spacing-xs) !important;
}

.g-2 {
  --antumo-gutter-x: var(--antumo-spacing-md) !important;
  --antumo-gutter-y: var(--antumo-spacing-md) !important;
}

.gx-2 {
  --antumo-gutter-x: var(--antumo-spacing-md) !important;
}

.gy-2 {
  --antumo-gutter-y: var(--antumo-spacing-md) !important;
}

.g-3 {
  --antumo-gutter-x: var(--antumo-spacing-xl) !important;
  --antumo-gutter-y: var(--antumo-spacing-xl) !important;
}

.gx-3 {
  --antumo-gutter-x: var(--antumo-spacing-xl) !important;
}

.gy-3 {
  --antumo-gutter-y: var(--antumo-spacing-xl) !important;
}

.g-4 {
  --antumo-gutter-x: var(--antumo-spacing-3xl) !important;
  --antumo-gutter-y: var(--antumo-spacing-3xl) !important;
}

.gx-4 {
  --antumo-gutter-x: var(--antumo-spacing-3xl) !important;
}

.gy-4 {
  --antumo-gutter-y: var(--antumo-spacing-3xl) !important;
}

.g-5 {
  --antumo-gutter-x: var(--antumo-spacing-4xl) !important;
  --antumo-gutter-y: var(--antumo-spacing-4xl) !important;
}

.gx-5 {
  --antumo-gutter-x: var(--antumo-spacing-4xl) !important;
}

.gy-5 {
  --antumo-gutter-y: var(--antumo-spacing-4xl) !important;
}

.col {
  flex: 1 0 0% !important;
}

.col-auto {
  flex: 0 0 auto !important;
  width: auto !important;
}

.col-1 {
  flex: 0 0 auto !important;
  width: 8.3333333333% !important;
}

.col-2 {
  flex: 0 0 auto !important;
  width: 16.6666666667% !important;
}

.col-3 {
  flex: 0 0 auto !important;
  width: 25% !important;
}

.col-4 {
  flex: 0 0 auto !important;
  width: 33.3333333333% !important;
}

.col-5 {
  flex: 0 0 auto !important;
  width: 41.6666666667% !important;
}

.col-6 {
  flex: 0 0 auto !important;
  width: 50% !important;
}

.col-7 {
  flex: 0 0 auto !important;
  width: 58.3333333333% !important;
}

.col-8 {
  flex: 0 0 auto !important;
  width: 66.6666666667% !important;
}

.col-9 {
  flex: 0 0 auto !important;
  width: 75% !important;
}

.col-10 {
  flex: 0 0 auto !important;
  width: 83.3333333333% !important;
}

.col-11 {
  flex: 0 0 auto !important;
  width: 91.6666666667% !important;
}

.col-12 {
  flex: 0 0 auto !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0% !important;
  }
  .col-sm-auto {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .col-sm-1 {
    flex: 0 0 auto !important;
    width: 8.3333333333% !important;
  }
  .col-sm-2 {
    flex: 0 0 auto !important;
    width: 16.6666666667% !important;
  }
  .col-sm-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
  }
  .col-sm-4 {
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
  .col-sm-5 {
    flex: 0 0 auto !important;
    width: 41.6666666667% !important;
  }
  .col-sm-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
  .col-sm-7 {
    flex: 0 0 auto !important;
    width: 58.3333333333% !important;
  }
  .col-sm-8 {
    flex: 0 0 auto !important;
    width: 66.6666666667% !important;
  }
  .col-sm-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
  }
  .col-sm-10 {
    flex: 0 0 auto !important;
    width: 83.3333333333% !important;
  }
  .col-sm-11 {
    flex: 0 0 auto !important;
    width: 91.6666666667% !important;
  }
  .col-sm-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0% !important;
  }
  .col-md-auto {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .col-md-1 {
    flex: 0 0 auto !important;
    width: 8.3333333333% !important;
  }
  .col-md-2 {
    flex: 0 0 auto !important;
    width: 16.6666666667% !important;
  }
  .col-md-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
  }
  .col-md-4 {
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
  .col-md-5 {
    flex: 0 0 auto !important;
    width: 41.6666666667% !important;
  }
  .col-md-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
  .col-md-7 {
    flex: 0 0 auto !important;
    width: 58.3333333333% !important;
  }
  .col-md-8 {
    flex: 0 0 auto !important;
    width: 66.6666666667% !important;
  }
  .col-md-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
  }
  .col-md-10 {
    flex: 0 0 auto !important;
    width: 83.3333333333% !important;
  }
  .col-md-11 {
    flex: 0 0 auto !important;
    width: 91.6666666667% !important;
  }
  .col-md-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0% !important;
  }
  .col-lg-auto {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .col-lg-1 {
    flex: 0 0 auto !important;
    width: 8.3333333333% !important;
  }
  .col-lg-2 {
    flex: 0 0 auto !important;
    width: 16.6666666667% !important;
  }
  .col-lg-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
  }
  .col-lg-4 {
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
  .col-lg-5 {
    flex: 0 0 auto !important;
    width: 41.6666666667% !important;
  }
  .col-lg-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
  .col-lg-7 {
    flex: 0 0 auto !important;
    width: 58.3333333333% !important;
  }
  .col-lg-8 {
    flex: 0 0 auto !important;
    width: 66.6666666667% !important;
  }
  .col-lg-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
  }
  .col-lg-10 {
    flex: 0 0 auto !important;
    width: 83.3333333333% !important;
  }
  .col-lg-11 {
    flex: 0 0 auto !important;
    width: 91.6666666667% !important;
  }
  .col-lg-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0% !important;
  }
  .col-xl-auto {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .col-xl-1 {
    flex: 0 0 auto !important;
    width: 8.3333333333% !important;
  }
  .col-xl-2 {
    flex: 0 0 auto !important;
    width: 16.6666666667% !important;
  }
  .col-xl-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
  }
  .col-xl-4 {
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
  .col-xl-5 {
    flex: 0 0 auto !important;
    width: 41.6666666667% !important;
  }
  .col-xl-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
  .col-xl-7 {
    flex: 0 0 auto !important;
    width: 58.3333333333% !important;
  }
  .col-xl-8 {
    flex: 0 0 auto !important;
    width: 66.6666666667% !important;
  }
  .col-xl-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
  }
  .col-xl-10 {
    flex: 0 0 auto !important;
    width: 83.3333333333% !important;
  }
  .col-xl-11 {
    flex: 0 0 auto !important;
    width: 91.6666666667% !important;
  }
  .col-xl-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0% !important;
  }
  .col-xxl-auto {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .col-xxl-1 {
    flex: 0 0 auto !important;
    width: 8.3333333333% !important;
  }
  .col-xxl-2 {
    flex: 0 0 auto !important;
    width: 16.6666666667% !important;
  }
  .col-xxl-3 {
    flex: 0 0 auto !important;
    width: 25% !important;
  }
  .col-xxl-4 {
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
  .col-xxl-5 {
    flex: 0 0 auto !important;
    width: 41.6666666667% !important;
  }
  .col-xxl-6 {
    flex: 0 0 auto !important;
    width: 50% !important;
  }
  .col-xxl-7 {
    flex: 0 0 auto !important;
    width: 58.3333333333% !important;
  }
  .col-xxl-8 {
    flex: 0 0 auto !important;
    width: 66.6666666667% !important;
  }
  .col-xxl-9 {
    flex: 0 0 auto !important;
    width: 75% !important;
  }
  .col-xxl-10 {
    flex: 0 0 auto !important;
    width: 83.3333333333% !important;
  }
  .col-xxl-11 {
    flex: 0 0 auto !important;
    width: 91.6666666667% !important;
  }
  .col-xxl-12 {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}
.offset-0 {
  margin-left: 0 !important;
}

.offset-1 {
  margin-left: 8.3333333333% !important;
}

.offset-2 {
  margin-left: 16.6666666667% !important;
}

.offset-3 {
  margin-left: 25% !important;
}

.offset-4 {
  margin-left: 33.3333333333% !important;
}

.offset-5 {
  margin-left: 41.6666666667% !important;
}

.offset-6 {
  margin-left: 50% !important;
}

.offset-7 {
  margin-left: 58.3333333333% !important;
}

.offset-8 {
  margin-left: 66.6666666667% !important;
}

.offset-9 {
  margin-left: 75% !important;
}

.offset-10 {
  margin-left: 83.3333333333% !important;
}

.offset-11 {
  margin-left: 91.6666666667% !important;
}

@media (min-width: 576px) {
  .offset-sm-0 {
    margin-left: 0 !important;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333% !important;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667% !important;
  }
  .offset-sm-3 {
    margin-left: 25% !important;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333% !important;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667% !important;
  }
  .offset-sm-6 {
    margin-left: 50% !important;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333% !important;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667% !important;
  }
  .offset-sm-9 {
    margin-left: 75% !important;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333% !important;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667% !important;
  }
}
@media (min-width: 768px) {
  .offset-md-0 {
    margin-left: 0 !important;
  }
  .offset-md-1 {
    margin-left: 8.3333333333% !important;
  }
  .offset-md-2 {
    margin-left: 16.6666666667% !important;
  }
  .offset-md-3 {
    margin-left: 25% !important;
  }
  .offset-md-4 {
    margin-left: 33.3333333333% !important;
  }
  .offset-md-5 {
    margin-left: 41.6666666667% !important;
  }
  .offset-md-6 {
    margin-left: 50% !important;
  }
  .offset-md-7 {
    margin-left: 58.3333333333% !important;
  }
  .offset-md-8 {
    margin-left: 66.6666666667% !important;
  }
  .offset-md-9 {
    margin-left: 75% !important;
  }
  .offset-md-10 {
    margin-left: 83.3333333333% !important;
  }
  .offset-md-11 {
    margin-left: 91.6666666667% !important;
  }
}
@media (min-width: 992px) {
  .offset-lg-0 {
    margin-left: 0 !important;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333% !important;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667% !important;
  }
  .offset-lg-3 {
    margin-left: 25% !important;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333% !important;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667% !important;
  }
  .offset-lg-6 {
    margin-left: 50% !important;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333% !important;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667% !important;
  }
  .offset-lg-9 {
    margin-left: 75% !important;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333% !important;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667% !important;
  }
}
@media (min-width: 1200px) {
  .offset-xl-0 {
    margin-left: 0 !important;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333% !important;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667% !important;
  }
  .offset-xl-3 {
    margin-left: 25% !important;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333% !important;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667% !important;
  }
  .offset-xl-6 {
    margin-left: 50% !important;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333% !important;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667% !important;
  }
  .offset-xl-9 {
    margin-left: 75% !important;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333% !important;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667% !important;
  }
}
@media (min-width: 1400px) {
  .offset-xxl-0 {
    margin-left: 0 !important;
  }
  .offset-xxl-1 {
    margin-left: 8.3333333333% !important;
  }
  .offset-xxl-2 {
    margin-left: 16.6666666667% !important;
  }
  .offset-xxl-3 {
    margin-left: 25% !important;
  }
  .offset-xxl-4 {
    margin-left: 33.3333333333% !important;
  }
  .offset-xxl-5 {
    margin-left: 41.6666666667% !important;
  }
  .offset-xxl-6 {
    margin-left: 50% !important;
  }
  .offset-xxl-7 {
    margin-left: 58.3333333333% !important;
  }
  .offset-xxl-8 {
    margin-left: 66.6666666667% !important;
  }
  .offset-xxl-9 {
    margin-left: 75% !important;
  }
  .offset-xxl-10 {
    margin-left: 83.3333333333% !important;
  }
  .offset-xxl-11 {
    margin-left: 91.6666666667% !important;
  }
}
.order-first {
  order: -1 !important;
}

.order-last {
  order: 6 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

@media (min-width: 576px) {
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
}
@media (min-width: 768px) {
  .order-md-first {
    order: -1 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
}
@media (min-width: 992px) {
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
}
@media (min-width: 1200px) {
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
}
@media (min-width: 1400px) {
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
}
/**
 * Antumo Design System — Border Utilities
 * Border width, sides, colors, and directional rounding.
 * Complements _colors.scss which has .border, .border-0, .border-top/end/bottom/start.
 */
.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start-0 {
  border-left: 0 !important;
}

.border-danger {
  border-color: var(--antumo-border-error) !important;
}

.border-warning {
  border-color: var(--antumo-fg-warning-primary) !important;
}

.border-success {
  border-color: var(--antumo-fg-success-primary) !important;
}

.border-info {
  border-color: var(--antumo-fg-info-primary) !important;
}

.border-dark {
  border-color: var(--antumo-gray-900) !important;
}

.border-light {
  border-color: var(--antumo-gray-200) !important;
}

.border-white {
  border-color: var(--antumo-color-white) !important;
}

.rounded-top {
  border-top-left-radius: var(--antumo-radius-md) !important;
  border-top-right-radius: var(--antumo-radius-md) !important;
}

.rounded-end {
  border-top-right-radius: var(--antumo-radius-md) !important;
  border-bottom-right-radius: var(--antumo-radius-md) !important;
}

.rounded-bottom {
  border-bottom-left-radius: var(--antumo-radius-md) !important;
  border-bottom-right-radius: var(--antumo-radius-md) !important;
}

.rounded-start {
  border-top-left-radius: var(--antumo-radius-md) !important;
  border-bottom-left-radius: var(--antumo-radius-md) !important;
}

/**
 * Antumo Design System — Spacing Utilities
 * Based on 4px/8px grid. Scale: 0-16 (0 = 0px, 1 = 4px, 2 = 8px, ... 16 = 64px)
 * Uses CSS custom properties from design tokens.
 * Includes BS5 logical property aliases (ms-*, me-*, ps-*, pe-*).
 * Responsive variants for all breakpoints (sm, md, lg, xl, xxl).
 */
/**
 * Antumo Design System — Sizing Utilities
 * Width, height, min/max, and viewport sizing.
 */
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

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

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100, .h-full {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-w-0 {
  min-width: 0 !important;
}

.min-h-0 {
  min-height: 0 !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

@media (min-width: 576px) {
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-auto {
    width: auto !important;
  }
  .h-sm-100 {
    height: 100% !important;
  }
  .h-sm-auto {
    height: auto !important;
  }
}
@media (min-width: 768px) {
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-auto {
    width: auto !important;
  }
  .h-md-100 {
    height: 100% !important;
  }
  .h-md-auto {
    height: auto !important;
  }
}
@media (min-width: 992px) {
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-auto {
    width: auto !important;
  }
  .h-lg-100 {
    height: 100% !important;
  }
  .h-lg-auto {
    height: auto !important;
  }
}
@media (min-width: 1200px) {
  .w-xl-100 {
    width: 100% !important;
  }
  .w-xl-auto {
    width: auto !important;
  }
  .h-xl-100 {
    height: 100% !important;
  }
  .h-xl-auto {
    height: auto !important;
  }
}
@media (min-width: 1400px) {
  .w-xxl-100 {
    width: 100% !important;
  }
  .w-xxl-auto {
    width: auto !important;
  }
  .h-xxl-100 {
    height: 100% !important;
  }
  .h-xxl-auto {
    height: auto !important;
  }
}
/**
 * Antumo Design System — Position Utilities
 * Position offsets, z-index, translate centering, float, and clearfix.
 */
.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.z-n1 {
  z-index: -1 !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.z-3 {
  z-index: 3 !important;
}

.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/**
 * Antumo Design System — Visibility & Interaction Utilities
 * Visibility, opacity, pointer-events, user-select, vertical-align,
 * object-fit, print utilities, and misc BS5 helpers.
 */
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.user-select-all {
  user-select: all !important;
}

.user-select-auto {
  user-select: auto !important;
}

.user-select-none {
  user-select: none !important;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

.object-fit-cover {
  object-fit: cover !important;
}

.object-fit-fill {
  object-fit: fill !important;
}

.object-fit-none {
  object-fit: none !important;
}

.object-fit-scale-down {
  object-fit: scale-down !important;
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-table {
    display: table !important;
  }
}
.text-reset {
  color: inherit !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}