/* src/styles.css */ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties; @layer components { @charset "UTF-8"; @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/ds-fonts/Inter/Inter-VariableFont_opsz,wght.ttf) format("truetype"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/ds-fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf) format("truetype"); } :root { --ds-palette-neutral-50: #001230; --ds-palette-neutral-100: #0d1e3a; --ds-palette-neutral-200: #1a2a45; --ds-palette-neutral-300: #404d64; --ds-palette-neutral-400: #667183; --ds-palette-neutral-500: #8c94a1; --ds-palette-neutral-600: #b3b8c1; --ds-palette-neutral-700: #ccd0d5; --ds-palette-neutral-800: #e6e8eb; --ds-palette-neutral-900: #f2f3f4; --ds-palette-neutral-950: #ffffff; --ds-palette-neutral-border-strong: #99a1ab; --ds-palette-neutral-subtle-hover: #f3f5f8; --ds-palette-dark-blue-50: #000a19; --ds-palette-dark-blue-100: #00122e; --ds-palette-dark-blue-200: #002561; --ds-palette-dark-blue-300: #00378f; --ds-palette-dark-blue-400: #004ac2; --ds-palette-dark-blue-500: #0057e5; --ds-palette-dark-blue-600: #1a71ff; --ds-palette-dark-blue-700: #5c9aff; --ds-palette-dark-blue-800: #adcdff; --ds-palette-dark-blue-900: #e0ecff; --ds-palette-dark-blue-950: #f0f6ff; --ds-palette-light-blue-50: #001019; --ds-palette-light-blue-100: #001f33; --ds-palette-light-blue-200: #003f66; --ds-palette-light-blue-300: #005b94; --ds-palette-light-blue-400: #007bc7; --ds-palette-light-blue-500: #0099f9; --ds-palette-light-blue-600: #2eafff; --ds-palette-light-blue-700: #61c2ff; --ds-palette-light-blue-800: #99d8ff; --ds-palette-light-blue-900: #ccebff; --ds-palette-light-blue-950: #ebf7ff; --ds-palette-green-50: #000f02; --ds-palette-green-100: #001903; --ds-palette-green-200: #003807; --ds-palette-green-300: #006b0d; --ds-palette-green-400: #009411; --ds-palette-green-500: #00ad14; --ds-palette-green-600: #00d619; --ds-palette-green-700: #1fff39; --ds-palette-green-800: #99ffa5; --ds-palette-green-900: #e0ffe4; --ds-palette-green-950: #f0fff1; --ds-palette-yellow-50: #191100; --ds-palette-yellow-100: #382400; --ds-palette-yellow-200: #704900; --ds-palette-yellow-300: #a36a00; --ds-palette-yellow-400: #db8f00; --ds-palette-yellow-500: #ffad14; --ds-palette-yellow-600: #ffbd42; --ds-palette-yellow-700: #ffcd70; --ds-palette-yellow-800: #ffe2a3; --ds-palette-yellow-900: #fff0d1; --ds-palette-yellow-950: #fff9eb; --ds-palette-red-50: #180102; --ds-palette-red-100: #2c0204; --ds-palette-red-200: #580408; --ds-palette-red-300: #84060c; --ds-palette-red-400: #b00810; --ds-palette-red-500: #dc0a15; --ds-palette-red-600: #f52833; --ds-palette-red-700: #f85e66; --ds-palette-red-800: #fcb6b9; --ds-palette-red-900: #fed8da; --ds-palette-red-950: #fff5f6; --ds-palette-mint-50: #1d010c; --ds-palette-mint-100: #0b2728; --ds-palette-mint-200: #164f50; --ds-palette-mint-300: #227677; --ds-palette-mint-400: #2d9d9f; --ds-palette-mint-500: #38c4c7; --ds-palette-mint-600: #60d0d2; --ds-palette-mint-700: #88dcdd; --ds-palette-mint-800: #afe8e9; --ds-palette-mint-900: #d7f3f4; --ds-palette-mint-950: #effafa; --ds-palette-orange-50: #190d00; --ds-palette-orange-100: #331a00; --ds-palette-orange-200: #613000; --ds-palette-orange-300: #944a00; --ds-palette-orange-400: #c76300; --ds-palette-orange-500: #f67b00; --ds-palette-orange-600: #ff962e; --ds-palette-orange-700: #ffb061; --ds-palette-orange-800: #ffc994; --ds-palette-orange-900: #ffe6cc; --ds-palette-orange-950: #fff7f0; --ds-palette-purple-50: #090415; --ds-palette-purple-100: #12092a; --ds-palette-purple-200: #251254; --ds-palette-purple-300: #391c82; --ds-palette-purple-400: #4b25ac; --ds-palette-purple-500: #5f31d3; --ds-palette-purple-600: #805bdc; --ds-palette-purple-700: #a085e5; --ds-palette-purple-800: #beabed; --ds-palette-purple-900: #ded5f6; --ds-palette-purple-950: #f5f2fd; --ds-palette-pink-50: #1d010c; --ds-palette-pink-100: #40021b; --ds-palette-pink-200: #800536; --ds-palette-pink-300: #c00751; --ds-palette-pink-400: #f6126d; --ds-palette-pink-500: #f83a86; --ds-palette-pink-600: #f9629e; --ds-palette-pink-700: #fb89b6; --ds-palette-pink-800: #fcb0cf; --ds-palette-pink-900: #fee1ed; --ds-palette-pink-950: #fef0f6; --ds-palette-overlay-black-5: #0000000d; --ds-palette-overlay-black-20: #00000033; --ds-palette-overlay-black-50: #00000080; --ds-palette-overlay-white-10: #ffffff1a; --ds-palette-overlay-white-50: #ffffff80; --ds-palette-shadow-base: #000000; --ds-palette-dark-blue-850: #dbe9ff; --ds-palette-dark-blue-875: #b8d3ff; --ds-palette-dark-blue-825: #99c0ff; --ds-palette-info-400: #0062d2; --ds-palette-info-500: #137ef8; --ds-palette-info-600: #0090f6; --ds-palette-info-800: #b3d5f5; --ds-palette-info-900: #cce3f8; --ds-palette-info-950: #e5f1fc; --ds-palette-info-text: #0062e1; --ds-palette-info-text-hover: #0065c1; --ds-spacing-01: 0.25rem; --ds-spacing-02: 0.5rem; --ds-spacing-03: 0.75rem; --ds-spacing-04: 1rem; --ds-spacing-05: 1.25rem; --ds-spacing-06: 1.5rem; --ds-spacing-07: 2rem; --ds-spacing-08: 2.5rem; --ds-spacing-09: 2.75rem; --ds-spacing-10: 3rem; --ds-spacing-11: 4rem; --ds-spacing-12: 5rem; --ds-spacing-13: 6rem; --ds-spacing-xs: var(--ds-spacing-01); --ds-spacing-sm: var(--ds-spacing-02); --ds-spacing-md: var(--ds-spacing-02); --ds-spacing-lg: var(--ds-spacing-03); --ds-opacity-disabled: 0.45; --ds-transition-fast: 0.2s ease; --ds-scrollbar-size: 6px; --ds-scrollbar-track-bg: transparent; --ds-scrollbar-thumb-bg: var(--ds-palette-neutral-700); --ds-scrollbar-thumb-bg-hover: var(--ds-palette-neutral-500); --ds-scrollbar-radius: 100px; } :root, html[data-ds-theme=light] { --ds-color-bg-primary: var(--ds-palette-dark-blue-500); --ds-color-bg-primary-hover: var(--ds-palette-dark-blue-600); --ds-color-bg-primary-pressed: var(--ds-palette-dark-blue-400); --ds-color-bg-primary-subtle: var(--ds-palette-dark-blue-950); --ds-color-bg-primary-subtle-hover: var(--ds-palette-dark-blue-900); --ds-color-bg-primary-subtle-hover-light: var(--ds-palette-dark-blue-850); --ds-color-bg-primary-subtle-pressed: var(--ds-palette-dark-blue-800); --ds-color-text-primary: var(--ds-palette-dark-blue-400); --ds-color-text-primary-hover: var(--ds-palette-dark-blue-500); --ds-color-bg-secondary: var(--ds-palette-yellow-500); --ds-color-bg-secondary-hover: var(--ds-palette-yellow-600); --ds-color-bg-secondary-pressed: var(--ds-palette-yellow-400); --ds-color-bg-secondary-subtle: var(--ds-palette-yellow-950); --ds-color-bg-secondary-subtle-hover: var(--ds-palette-yellow-800); --ds-color-bg-secondary-subtle-pressed: var(--ds-palette-yellow-700); --ds-color-text-secondary: var(--ds-palette-yellow-400); --ds-color-text-secondary-hover: var(--ds-palette-yellow-500); --ds-color-bg-dark: var(--ds-palette-neutral-100); --ds-color-bg-light: var(--ds-palette-neutral-950); --ds-color-bg-overlay-black: var(--ds-palette-overlay-black-5); --ds-color-bg-overlay-white: var(--ds-palette-overlay-white-10); --ds-color-bg-overlay-white-50: var(--ds-palette-overlay-white-50); --ds-color-shadow: var(--ds-palette-shadow-base); --ds-color-bg-subtle: var(--ds-palette-neutral-900); --ds-color-bg-neutral-subtle-hover: var(--ds-palette-neutral-subtle-hover); --ds-color-border-default: var(--ds-palette-neutral-700); --ds-color-border-disable: var(--ds-palette-neutral-800); --ds-color-border-light: var(--ds-palette-neutral-950); --ds-color-border-subtle: var(--ds-palette-neutral-800); --ds-color-border-strong: var(--ds-palette-neutral-border-strong); --ds-color-icon-default: var(--ds-palette-neutral-300); --ds-color-icon-disable: var(--ds-palette-neutral-600); --ds-color-icon-light: var(--ds-palette-neutral-950); --ds-color-icon-lighter: var(--ds-palette-neutral-500); --ds-color-surface-default: var(--ds-palette-neutral-950); --ds-color-surface-disable: var(--ds-palette-neutral-800); --ds-color-surface-subtle: var(--ds-palette-neutral-900); --ds-color-text-body: var(--ds-palette-neutral-200); --ds-color-text-caption: var(--ds-palette-neutral-400); --ds-color-text-disable: var(--ds-palette-neutral-500); --ds-color-text-hint: var(--ds-palette-neutral-600); --ds-color-text-subtitle: var(--ds-palette-neutral-300); --ds-color-text-light: var(--ds-palette-neutral-950); --ds-color-text-title: var(--ds-palette-neutral-50); --ds-color-bg-error: var(--ds-palette-red-600); --ds-color-bg-error-hover: var(--ds-palette-red-700); --ds-color-bg-error-pressed: var(--ds-palette-red-500); --ds-color-bg-error-subtle: var(--ds-palette-red-950); --ds-color-bg-error-subtle-hover: var(--ds-palette-red-900); --ds-color-bg-error-subtle-pressed: var(--ds-palette-red-800); --ds-color-text-error: var(--ds-palette-red-500); --ds-color-text-error-hover: var(--ds-palette-red-300); --ds-color-bg-warning: var(--ds-palette-yellow-500); --ds-color-bg-warning-hover: var(--ds-palette-yellow-600); --ds-color-bg-warning-pressed: var(--ds-palette-yellow-400); --ds-color-bg-warning-subtle: var(--ds-palette-yellow-950); --ds-color-bg-warning-subtle-hover: var(--ds-palette-yellow-900); --ds-color-bg-warning-subtle-pressed: var(--ds-palette-yellow-800); --ds-color-text-warning: var(--ds-palette-yellow-400); --ds-color-text-warning-hover: var(--ds-palette-yellow-500); --ds-color-bg-success: var(--ds-palette-green-500); --ds-color-bg-success-hover: var(--ds-palette-green-600); --ds-color-bg-success-pressed: var(--ds-palette-green-400); --ds-color-bg-success-subtle: var(--ds-palette-green-950); --ds-color-bg-success-subtle-hover: var(--ds-palette-green-900); --ds-color-bg-success-subtle-pressed: var(--ds-palette-green-800); --ds-color-text-success: var(--ds-palette-green-400); --ds-color-text-success-hover: var(--ds-palette-green-500); --ds-color-bg-info: var(--ds-palette-info-500); --ds-color-bg-info-hover: var(--ds-palette-info-600); --ds-color-bg-info-pressed: var(--ds-palette-info-400); --ds-color-bg-info-subtle: var(--ds-palette-info-950); --ds-color-bg-info-subtle-hover: var(--ds-palette-info-900); --ds-color-bg-info-subtle-pressed: var(--ds-palette-info-800); --ds-color-text-info: var(--ds-palette-info-text); --ds-color-text-info-hover: var(--ds-palette-info-text-hover); --ds-color-primary: var(--ds-color-bg-primary); --ds-color-primary-hover: var(--ds-color-bg-primary-hover); --ds-color-primary-active: var(--ds-color-bg-primary-pressed); --ds-color-text: var(--ds-color-text-body); --ds-color-text-on-primary: var(--ds-color-text-light); --ds-color-text-disabled: var(--ds-color-text-disable); --ds-color-border: var(--ds-color-border-light); --ds-color-border-hover: var(--ds-color-bg-primary-subtle); --ds-color-border-disabled: var(--ds-color-border-disable); --ds-color-bg-default: var(--ds-color-surface-default); --ds-color-bg-hover: var(--ds-color-bg-primary-subtle); --ds-color-bg-active: var(--ds-color-bg-primary-subtle-hover); --ds-color-bg-disabled: var(--ds-color-surface-disable); --ds-badge-default: var(--ds-palette-neutral-600); --ds-badge-primary: var(--ds-color-bg-primary); --ds-badge-error: var(--ds-color-bg-error); --ds-badge-success: var(--ds-color-bg-success); --ds-badge-warning: var(--ds-color-bg-warning); --ds-badge-bg-default: var(--ds-color-surface-subtle); --ds-badge-primary-bg: var(--ds-color-bg-primary-subtle); --ds-badge-error-bg: var(--ds-color-bg-error-subtle); --ds-badge-processing-bg: var(--ds-color-bg-info-subtle); --ds-badge-success-bg: var(--ds-color-bg-success-subtle); --ds-badge-warning-bg: var(--ds-color-bg-warning-subtle); --ds-badge-icon-default: var(--ds-color-icon-default); --ds-badge-text-default: var(--ds-color-text-body); --ds-badge-text-disable: var(--ds-color-text-disable); --ds-badge-text-light: var(--ds-color-text-light); --ds-badge-border-color: var(--ds-badge-bg-default); --ds-badge-height-md: 16px; --ds-badge-height-lg: 20px; --ds-badge-padding-inline-md: 4px; --ds-badge-padding-inline-lg: 8px; --ds-badge-font-size-md: 10px; --ds-badge-font-size-lg: 12px; --ds-badge-status-font-size: 12px; --ds-badge-font-weight: 600; --ds-badge-radius-pill: var(--ds-radius-full); --ds-badge-radius-rounded: var(--ds-radius-xs); --ds-badge-dot-size-md: 8px; --ds-badge-dot-size-lg: 12px; --ds-badge-status-dot-size: 8px; --ds-badge-status-gap: var(--ds-spacing-02); --ds-badge-status-text-color: var(--ds-color-text-body); --ds-badge-sup-inset-block-start: -6px; --ds-badge-sup-inset-inline-end: -6px; --ds-badge-sup-dot-inset-block-start: 4px; --ds-badge-sup-dot-inset-inline-end: 4px; --ds-badge-sup-ring: 0 0 0 1px var(--ds-color-surface-default); --ds-bubble-bg-start: var(--ds-color-bg-overlay-black); --ds-bubble-bg-end: var(--ds-color-bg-primary-subtle); --ds-bubble-text: var(--ds-color-text-body); --ds-bubble-text-info: var(--ds-color-text-caption); --ds-bubble-radius-xl: 20px; --ds-bubble-radius-s: 8px; --ds-bubble-padding: 12px; --ds-bubble-padding-ghost-y: 4px; --ds-bubble-max-width: 362px; --ds-bubble-avatar-gap: 8px; --ds-bubble-stack-gap: 4px; --ds-bubble-group-gap: 20px; --ds-bubble-avatar-indent: 48px; --ds-bubble-font-size: 14px; --ds-bubble-line-height: 20px; --ds-bubble-meta-font-size: 12px; --ds-bubble-meta-line-height: 16px; --ds-bubble-dot-size: 6px; --ds-bubble-dot-gap: 4px; --ds-card-bg: var(--ds-color-surface-default); --ds-card-inner-bg: var(--ds-color-bg-subtle); --ds-card-inner-head-bg: var(--ds-color-bg-subtle); --ds-card-border-color: var(--ds-color-border-subtle); --ds-card-border-width: 1px; --ds-card-radius: var(--ds-radius-sm, 8px); --ds-card-radius-lg: 12px; --ds-card-shadow-sm: 0 4px 10px var(--ds-color-shadow); --ds-card-shadow-md: 0 4px 20px var(--ds-color-shadow); --ds-card-text-title: var(--ds-color-text-title); --ds-card-text-caption: var(--ds-color-text-body); --ds-card-head-min-height: 40px; --ds-card-head-padding-block: 8px; --ds-card-head-padding-block-sm: 4px; --ds-card-head-title-font-size: 18px; --ds-card-head-title-line-height: 28px; --ds-card-head-title-font-size-sm: 16px; --ds-card-head-title-line-height-sm: 24px; --ds-card-padding: var(--ds-spacing-03, 12px); --ds-card-body-padding: var(--ds-spacing-04, 16px); --ds-card-actions-padding-block: var(--ds-spacing-02, 8px); --ds-card-actions-padding-inline: var(--ds-spacing-05, 24px); --ds-card-media-width-sm: 240px; --ds-card-media-width-md: 300px; --ds-card-cover-height-simple: 240px; --ds-card-cover-height-advanced: 300px; --ds-card-cover-height-compact: 160px; --ds-card-cover-height-wide: 200px; --ds-popover-bg: var(--ds-popup-bg-light); --ds-popover-text-title: var(--ds-popup-text-title); --ds-popover-text-body: var(--ds-popup-text-caption); --ds-popover-width: 265px; --ds-popover-max-width: 100vw; --ds-popover-radius: var(--ds-radius-sm, 8px); --ds-popover-shadow: 0 4px 10px var(--ds-color-shadow); --ds-popover-padding-inline: var(--ds-spacing-04, 16px); --ds-popover-padding-block: var(--ds-spacing-03, 12px); --ds-popover-body-gap: var(--ds-spacing-03, 12px); --ds-popover-font-size: 14px; --ds-popover-line-height: 20px; --ds-popover-title-font-size: 14px; --ds-popover-title-line-height: 20px; --ds-popover-title-font-weight: 600; --ds-popover-arrow-size: 8px; --ds-popover-gap: 8px; --ds-popup-bg-light: var(--ds-color-surface-default); --ds-popup-text-caption: var(--ds-color-text-caption); --ds-popup-text-title: var(--ds-color-text-title); --ds-table-primary: var(--ds-color-bg-primary); --ds-table-error: var(--ds-color-text-error); --ds-table-head-blue: var(--ds-color-bg-primary-subtle-hover-light); --ds-table-head-primary: var(--ds-color-bg-primary); --ds-table-head-primary-text: var(--ds-color-text-light); --ds-table-head-blue-text: var(--ds-color-text-body); --ds-table-head-grey-text: var(--ds-color-text-body); --ds-table-head-custom-text: var(--ds-color-text-body); --ds-table-bg-blue: var(--ds-color-bg-primary-subtle); --ds-table-bg-grey: var(--ds-color-surface-subtle); --ds-table-bg-head: var(--ds-color-surface-subtle); --ds-table-border-default: var(--ds-color-border-default); --ds-table-icon-default: var(--ds-color-icon-default); --ds-table-text-default: var(--ds-color-text-body); --ds-table-text-light: var(--ds-color-text-light); --ds-table-text-unactive: var(--ds-color-text-caption); --ds-tag-height-sm: 24px; --ds-tag-height-md: 28px; --ds-tag-padding-inline: var(--ds-spacing-02); --ds-tag-padding-inline-sm: var(--ds-spacing-01); --ds-tag-gap: var(--ds-spacing-01); --ds-tag-font-size: 12px; --ds-tag-line-height: 16px; --ds-tag-radius-rounded: var(--ds-radius-xs); --ds-tag-radius-pill: var(--ds-radius-pill); --ds-tag-border-width: 1px; --ds-tag-close-size-sm: 12px; --ds-tag-close-size-md: 14px; --ds-tag-default-bg: var(--ds-color-surface-subtle); --ds-tag-default-border: var(--ds-color-icon-lighter); --ds-tag-default-text: var(--ds-color-icon-lighter); --ds-tag-default-solid-bg: var(--ds-color-icon-lighter); --ds-tag-dark-blue-bg: var(--ds-color-bg-primary-subtle-hover-light); --ds-tag-dark-blue-border: var(--ds-color-bg-primary-pressed); --ds-tag-dark-blue-text: var(--ds-color-bg-primary-pressed); --ds-tag-dark-blue-solid-bg: var(--ds-color-bg-primary); --ds-tag-light-blue-bg: var(--ds-palette-light-blue-950); --ds-tag-light-blue-border: var(--ds-palette-light-blue-500); --ds-tag-light-blue-text: var(--ds-palette-light-blue-500); --ds-tag-light-blue-solid-bg: var(--ds-palette-light-blue-500); --ds-tag-purple-bg: var(--ds-palette-purple-950); --ds-tag-purple-border: var(--ds-palette-purple-500); --ds-tag-purple-text: var(--ds-palette-purple-500); --ds-tag-purple-solid-bg: var(--ds-palette-purple-500); --ds-tag-red-bg: var(--ds-color-bg-error-subtle); --ds-tag-red-border: var(--ds-color-bg-error); --ds-tag-red-text: var(--ds-color-bg-error); --ds-tag-red-solid-bg: var(--ds-color-bg-error); --ds-tag-pink-bg: var(--ds-palette-pink-950); --ds-tag-pink-border: var(--ds-palette-pink-500); --ds-tag-pink-text: var(--ds-palette-pink-500); --ds-tag-pink-solid-bg: var(--ds-palette-pink-500); --ds-tag-green-bg: var(--ds-color-bg-success-subtle); --ds-tag-green-border: var(--ds-color-bg-success-pressed); --ds-tag-green-text: var(--ds-color-bg-success-pressed); --ds-tag-green-solid-bg: var(--ds-color-bg-success); --ds-tag-yellow-bg: var(--ds-color-bg-warning-subtle); --ds-tag-yellow-border: var(--ds-color-bg-warning-pressed); --ds-tag-yellow-text: var(--ds-color-bg-warning-pressed); --ds-tag-yellow-solid-bg: var(--ds-color-bg-warning); --ds-tag-mint-bg: var(--ds-palette-mint-950); --ds-tag-mint-border: var(--ds-palette-mint-400); --ds-tag-mint-text: var(--ds-palette-mint-400); --ds-tag-mint-solid-bg: var(--ds-palette-mint-400); --ds-tag-orange-bg: var(--ds-palette-orange-950); --ds-tag-orange-border: var(--ds-palette-orange-500); --ds-tag-orange-text: var(--ds-palette-orange-500); --ds-tag-orange-solid-bg: var(--ds-palette-orange-500); --ds-tag-error-bg: var(--ds-badge-error-bg); --ds-tag-error-border: var(--ds-badge-error); --ds-tag-error-text: var(--ds-badge-error); --ds-tag-error-solid-bg: var(--ds-badge-error); --ds-tag-success-bg: var(--ds-badge-success-bg); --ds-tag-success-border: var(--ds-badge-success); --ds-tag-success-text: var(--ds-badge-success); --ds-tag-success-solid-bg: var(--ds-badge-success); --ds-tag-warning-bg: var(--ds-badge-warning-bg); --ds-tag-warning-border: var(--ds-badge-warning); --ds-tag-warning-text: var(--ds-badge-warning); --ds-tag-warning-solid-bg: var(--ds-badge-warning); --ds-tag-info-bg: var(--ds-badge-processing-bg); --ds-tag-info-border: var(--ds-color-bg-info); --ds-tag-info-text: var(--ds-color-bg-info); --ds-tag-info-solid-bg: var(--ds-color-bg-info); --ds-tag-add-border: var(--ds-color-border-default); --ds-tag-add-text: var(--ds-color-text-caption); --ds-tag-add-hover-border: var(--ds-color-bg-primary); --ds-tag-add-hover-text: var(--ds-color-bg-primary); --ds-color-bg-tooltip: var(--ds-color-bg-dark); --ds-color-text-tooltip: var(--ds-color-text-light); --ds-color-bg-tooltip-reverse: var(--ds-color-surface-default); --ds-color-text-tooltip-reverse: var(--ds-color-bg-dark); --ds-color-tooltip-shadow: 0 4px 20px var(--ds-color-shadow); --ds-tooltip-max-width: 240px; --ds-tooltip-z-index: 1080; --ds-tooltip-inner-min-height: 32px; --ds-tooltip-inner-padding-block: 6px; --ds-tooltip-inner-padding-inline: 8px; --ds-tooltip-font-size: 12px; --ds-tooltip-line-height: 20px; --ds-tooltip-radius: var(--ds-radius-sm, 8px); --ds-tooltip-arrow-size: 8px; --ds-tooltip-arrow-outset: -4px; --ds-tooltip-font-weight: 600; --ds-tooltip-arrow-inset-from-corner: var(--ds-spacing-02); --ds-calendar-primary: var(--ds-color-bg-primary); --ds-calendar-bg-default: var(--ds-color-surface-default); --ds-calendar-bg-hover: var(--ds-color-bg-primary-subtle); --ds-calendar-bg-range: var(--ds-color-bg-primary-subtle-hover); --ds-calendar-border-default: var(--ds-color-border-default); --ds-calendar-icon-default: var(--ds-color-icon-default); --ds-calendar-text-default: var(--ds-color-text-body); --ds-calendar-text-disable: var(--ds-color-text-disable); --ds-calendar-text-light: var(--ds-color-text-light); --ds-calendar-preset-active-bg: var(--ds-color-bg-primary-subtle); --ds-calendar-preset-active-text: var(--ds-color-bg-primary); --ds-calendar-day-size-mobile: 30px; --ds-calendar-day-size-tablet: 36px; --ds-calendar-grid-gap-y: 8px; --ds-calendar-grid-gap-x-mobile: 12px; --ds-calendar-grid-gap-x-tablet: 16px; --ds-calendar-day-size: var(--ds-calendar-day-size-tablet); --ds-calendar-grid-gap-x: var(--ds-calendar-grid-gap-x-tablet); --ds-calendar-day-font-size: 16px; --ds-calendar-day-line-height: 24px; --ds-calendar-title-font-size: 18px; --ds-calendar-title-line-height: 28px; --ds-calendar-nav-size: 28px; --ds-calendar-chip-width: 76px; --ds-calendar-chip-height: 30px; --ds-calendar-radius: var(--ds-radius-md, 12px); --ds-calendar-day-radius: 999px; --ds-calendar-panel-padding-x: 24px; --ds-calendar-panel-padding-y: 12px; --ds-calendar-panel-gap: 12px; --ds-calendar-month-grid-width: calc( 7 * var(--ds-calendar-day-size) + 6 * var(--ds-calendar-grid-gap-x) ); --ds-date-picker-panel-min-width: 402px; --ds-date-picker-panel-min-width-mobile: 330px; --ds-date-picker-panel-chips-min-width: 324px; --ds-date-picker-chips-nav-size: 20px; --ds-date-picker-chips-title-font-size: 16px; --ds-date-picker-chips-title-line-height: 24px; --ds-time-picker-panel-min-width: 234px; --ds-time-picker-panel-datetime-min-width: 326px; --ds-time-picker-panel-datetime-seconds-min-width: 380px; --ds-time-picker-panel-datetime-padding-y: 16px; --ds-time-picker-panel-datetime-padding-x: 12px; --ds-time-picker-column-padding-x: 36px; --ds-time-picker-column-width: 38px; --ds-time-picker-drum-row-gap: 4px; --ds-time-picker-drum-item-height: 25px; --ds-time-picker-drum-item-selected-height: 30px; --ds-time-picker-highlight-height: 30px; --ds-time-picker-month-column-min-width: 72px; --ds-time-picker-selected-text: var(--ds-color-icon-default); --ds-time-picker-opacity-near: 0.8; --ds-time-picker-opacity-mid: 0.6; --ds-time-picker-opacity-far: 0.4; --ds-range-picker-panel-min-width: 720px; --ds-checkbox-primary: var(--ds-color-bg-primary); --ds-checkbox-primary-hover: var(--ds-color-bg-primary-hover); --ds-checkbox-bg-default: var(--ds-color-surface-default); --ds-checkbox-bg-disable: var(--ds-color-surface-disable); --ds-checkbox-bg-hover-token: var(--ds-color-bg-primary-subtle-hover-light); --ds-checkbox-border: var(--ds-color-border-default); --ds-checkbox-border-disable: var(--ds-color-border-disable); --ds-checkbox-text-disable: var(--ds-color-text-disable); --ds-checkbox-text-light: var(--ds-color-text-light); --ds-checkbox-size-sm: var(--ds-radio-size-sm); --ds-checkbox-size-md: var(--ds-radio-size-md); --ds-checkbox-size-lg: var(--ds-radio-size-lg); --ds-checkbox-radius: var(--ds-radius-xs); --ds-checkbox-border-default: var(--ds-checkbox-border); --ds-checkbox-bg: var(--ds-checkbox-bg-default); --ds-checkbox-border-hover: var(--ds-checkbox-primary-hover); --ds-checkbox-bg-hover: var(--ds-checkbox-bg-hover-token); --ds-checkbox-bg-checked: var(--ds-checkbox-primary); --ds-checkbox-bg-checked-hover: var(--ds-checkbox-primary-hover); --ds-checkbox-icon-checked: var(--ds-control-icon-on-primary); --ds-checkbox-bg-disabled: var(--ds-control-bg-disabled); --ds-checkbox-border-disabled: var(--ds-control-border-disabled); --ds-checkbox-bg-checked-disabled: var(--ds-control-bg-checked-disabled); --ds-checkbox-icon-checked-disabled: var(--ds-color-icon-disable); --ds-checkbox-checkmark-width-sm: 8px; --ds-checkbox-checkmark-height-sm: 6px; --ds-checkbox-checkmark-width-md: 10px; --ds-checkbox-checkmark-height-md: 8px; --ds-checkbox-checkmark-width-lg: 12px; --ds-checkbox-checkmark-height-lg: 10px; --ds-checkbox-indeterminate-width-ratio: 0.5; --ds-checkbox-label-font-size-sm: var(--ds-radio-label-font-size-sm); --ds-checkbox-label-font-size-md: var(--ds-radio-label-font-size-md); --ds-checkbox-label-font-size-lg: var(--ds-radio-label-font-size-lg); --ds-checkbox-label-font-weight: var(--ds-radio-label-font-weight); --ds-checkbox-order-font-size-sm: 10px; --ds-checkbox-order-font-size-md: 12px; --ds-checkbox-order-font-size-lg: 14px; --ds-control-border-width: 1.6px; --ds-control-bg: var(--ds-color-surface-default); --ds-control-border: var(--ds-color-border-default); --ds-control-bg-primary: var(--ds-color-bg-primary); --ds-control-bg-primary-hover: var(--ds-color-bg-primary-hover); --ds-control-bg-hover-unchecked: var(--ds-color-bg-primary-subtle-hover-light); --ds-control-bg-disabled: var(--ds-color-bg-subtle); --ds-control-border-disabled: var(--ds-color-border-disable); --ds-control-icon-on-primary: var(--ds-color-icon-light); --ds-control-bg-checked-disabled: var(--ds-color-bg-subtle); --ds-control-label-gap: var(--ds-spacing-02); --ds-control-transition: var(--ds-transition-fast); --ds-input-number-bg-light: var(--ds-color-surface-default); --ds-input-number-bg-default: var(--ds-color-surface-subtle); --ds-input-number-border-default: var(--ds-color-border-default); --ds-input-number-border-hover: var(--ds-color-bg-primary); --ds-input-number-text-input: var(--ds-color-text-body); --ds-input-number-text-disable: var(--ds-color-text-disable); --ds-input-number-focused: var(--ds-color-bg-primary); --ds-input-number-shadow-focus: 0 0 0 2px var(--ds-color-bg-primary); --ds-input-number-divider: var(--ds-color-border-default); --ds-input-number-btn-hover-bg: var(--ds-input-number-bg-default); --ds-input-number-btn-hover-bg-filled: var(--ds-color-surface-disable); --ds-input-number-transition: var(--ds-control-transition); --ds-input-number-segment-gap: 1px; --ds-input-number-height-sm: var(--ds-spacing-06); --ds-input-number-height-md: var(--ds-spacing-07); --ds-input-number-height-lg: var(--ds-spacing-08); --ds-input-number-radius-sm: var(--ds-radius-xs); --ds-input-number-radius-md: 6px; --ds-input-number-radius-lg: var(--ds-radius-sm); --ds-input-number-icon-size-sm: 12px; --ds-input-number-icon-size-md: 14px; --ds-input-number-icon-size-lg: 16px; --ds-input-number-font-size-sm: 12px; --ds-input-number-line-height-sm: 16px; --ds-input-number-font-size-md: 14px; --ds-input-number-line-height-md: 20px; --ds-input-number-font-size-lg: 14px; --ds-input-number-line-height-lg: 20px; --ds-input-number-btn-padding-x-sm: var(--ds-spacing-02); --ds-input-number-btn-padding-x-md: var(--ds-spacing-03); --ds-input-number-btn-padding-inline-end-md: 11px; --ds-input-number-btn-padding-x-lg: var(--ds-spacing-03); --ds-input-number-input-padding-x: var(--ds-spacing-03); --ds-input-number-input-padding-y-sm: var(--ds-spacing-01); --ds-input-number-input-padding-y-md: var(--ds-spacing-01); --ds-input-number-input-padding-y-lg: 7px; --ds-input-height-sm: 2rem; --ds-input-height-md: 2.5rem; --ds-input-height-lg: 3rem; --ds-input-border-width: calc(1rem / 16); --ds-input-radius-sm: var(--ds-radius-sm); --ds-input-radius-md: var(--ds-radius-sm); --ds-input-radius-lg: var(--ds-radius-sm); --ds-input-radius: var(--ds-input-radius-md); --ds-textarea-radius: var(--ds-radius-sm); --ds-input-border-default: var(--ds-color-border-default); --ds-input-border-hover: var(--ds-color-bg-primary); --ds-input-border-focus: var(--ds-color-bg-primary); --ds-input-border-error: var(--ds-color-text-error); --ds-input-border-success: var(--ds-color-text-success); --ds-input-border-disabled: var(--ds-color-border-disable); --ds-input-border: var(--ds-input-border-default); --ds-input-bg: var(--ds-input-bg-default); --ds-input-bg-default: var(--ds-color-surface-default); --ds-input-bg-disabled: var(--ds-textarea-bg-disable); --ds-input-bg-readonly: var(--ds-color-surface-default); --ds-input-shadow-none: none; --ds-input-shadow-focus: 0 0 0 3px var(--ds-color-bg-primary-subtle); --ds-input-font-size-sm: 0.875rem; --ds-input-font-size-md: 0.875rem; --ds-input-font-size-lg: 0.875rem; --ds-input-line-height-sm: 1.25rem; --ds-input-line-height-md: 1.25rem; --ds-input-line-height-lg: 1.25rem; --ds-input-font-weight: 400; --ds-input-padding-y-sm: var(--ds-spacing-01); --ds-input-padding-x-sm: var(--ds-spacing-03); --ds-input-padding-y-md: var(--ds-spacing-02); --ds-input-padding-x-md: var(--ds-spacing-03); --ds-input-padding-y-lg: var(--ds-spacing-03); --ds-input-padding-x-lg: var(--ds-spacing-03); --ds-input-affix-gap: var(--ds-spacing-01); --ds-input-label-font-size: 0.75rem; --ds-input-label-font-weight: 500; --ds-input-label-line-height: 1rem; --ds-input-label-color: var(--ds-color-text-title); --ds-input-label-color-disabled: var(--ds-color-text-disable); --ds-input-label-required: var(--ds-color-text-error); --ds-input-label-description-font-weight: 400; --ds-input-label-description-color: var(--ds-color-text-caption); --ds-input-label-description: var(--ds-input-label-description-color); --ds-input-subscript-font-size: 0.75rem; --ds-input-subscript-font-weight: 400; --ds-input-subscript-line-height: 1rem; --ds-input-hint-color: var(--ds-color-text-caption); --ds-input-message-success: var(--ds-color-text-success); --ds-input-message-error: var(--ds-color-text-error); --ds-input-message-font-size: 0.875rem; --ds-input-message-line-height: 1.25rem; --ds-input-text: var(--ds-color-text-body); --ds-input-placeholder: var(--ds-color-text-hint); --ds-input-text-disabled: var(--ds-color-text-disable); --ds-input-icon-default: var(--ds-color-icon-lighter); --ds-input-icon-active: var(--ds-color-icon-default); --ds-input-icon-disabled: var(--ds-color-icon-disable); --ds-input-status-icon-success: var(--ds-color-text-success); --ds-input-status-icon-error: var(--ds-color-text-error); --ds-input-addon-gap: var(--ds-spacing-02); --ds-input-divider-width: 1px; --ds-input-divider-color: var(--ds-input-border-default); --ds-input-addon-text: var(--ds-color-text-subtitle); --ds-textarea-min-height-md: 5.5rem; --ds-textarea-min-height-lg: 7rem; --ds-textarea-padding-block: var(--ds-spacing-03); --ds-textarea-padding-inline: var(--ds-spacing-03); --ds-textarea-padding-bottom-reserve: 1.25rem; --ds-textarea-font-size-md: 0.875rem; --ds-textarea-font-size-lg: 1rem; --ds-textarea-line-height: 1.25rem; --ds-textarea-counter-font-size: 0.75rem; --ds-textarea-counter-color: var(--ds-color-text-hint); --ds-textarea-counter-color-disabled: var(--ds-color-text-disable); --ds-input-transition: var(--ds-control-transition); --ds-input-loading-bg: var(--ds-color-surface-disable); --ds-input-loading-border: var(--ds-input-border-disabled); --ds-input-loading-plate-radius: var(--ds-radius-pill); --ds-input-loading-label-width: 5rem; --ds-input-loading-label-height: 0.875rem; --ds-input-loading-short-width: 2.5rem; --ds-input-loading-long-width: 8rem; --ds-input-loading-plate-height: 0.75rem; --ds-compound-segment-gap: var(--ds-spacing-01); --ds-compound-addon-padding-inline-sm: var(--ds-spacing-02); --ds-compound-addon-padding-inline-md: var(--ds-spacing-02); --ds-compound-addon-padding-inline-lg: var(--ds-spacing-02); --ds-compound-addon-before-padding-block: 0; --ds-compound-addon-before-padding-inline-start: 0; --ds-compound-addon-before-padding-inline-end: 0; --ds-compound-addon-after-padding-block: 0; --ds-compound-addon-after-padding-inline-start: 0; --ds-compound-addon-after-padding-inline-end: 0; --ds-compound-icon-size-sm: 1rem; --ds-compound-icon-size-md: 1.25rem; --ds-compound-icon-size-lg: 1.25rem; --ds-radio-primary: var(--ds-color-bg-primary); --ds-radio-primary-hover: var(--ds-color-bg-primary-hover); --ds-radio-bg-default: var(--ds-color-surface-default); --ds-radio-bg-disable: var(--ds-color-surface-disable); --ds-radio-bg-hover-token: var(--ds-color-bg-primary-subtle-hover-light); --ds-radio-border-default-token: var(--ds-color-border-default); --ds-radio-border-disable-token: var(--ds-color-border-disable); --ds-radio-size-sm: 16px; --ds-radio-size-md: 20px; --ds-radio-size-lg: 24px; --ds-radio-border-default: var(--ds-radio-border-default-token); --ds-radio-bg: var(--ds-radio-bg-default); --ds-radio-bg-disabled: var(--ds-radio-bg-disable); --ds-radio-border-hover: var(--ds-radio-primary-hover); --ds-radio-bg-hover: var(--ds-radio-bg-hover-token); --ds-radio-border-checked: var(--ds-radio-primary); --ds-radio-dot-checked: var(--ds-radio-primary); --ds-radio-border-checked-hover: var(--ds-radio-primary-hover); --ds-radio-dot-checked-hover: var(--ds-radio-primary-hover); --ds-radio-ring-checked: var(--ds-control-bg); --ds-radio-border-disabled: var(--ds-radio-border-disable-token); --ds-radio-dot-disabled: var(--ds-control-bg-disabled); --ds-radio-border-checked-disabled: var(--ds-control-border-disabled); --ds-radio-dot-checked-disabled: var(--ds-control-border-disabled); --ds-radio-dot-size-sm: 8px; --ds-radio-dot-size-md: 12px; --ds-radio-dot-size-lg: 16px; --ds-radio-label-font-size-sm: 12px; --ds-radio-label-font-size-md: 14px; --ds-radio-label-font-size-lg: 16px; --ds-radio-label-font-weight: 500; --ds-radio-group-gap: var(--ds-spacing-04); --ds-radio-button-group-gap: 0; --ds-radio-button-padding-inline: var(--ds-spacing-03); --ds-radio-button-height-sm: 24px; --ds-radio-button-height-md: 32px; --ds-radio-button-height-lg: 40px; --ds-search-bg-default: var(--ds-color-surface-default); --ds-search-bg-disable: var(--ds-color-surface-disable); --ds-search-border-default: var(--ds-color-border-default); --ds-search-border-disable: var(--ds-color-border-disable); --ds-search-icon-default: var(--ds-color-icon-default); --ds-search-text-disable: var(--ds-color-text-disable); --ds-search-text-hint: var(--ds-color-text-hint); --ds-search-text-input: var(--ds-color-text-body); --ds-search-typing: var(--ds-color-bg-primary); --ds-select-panel-shadow: 0 4px 10px var(--ds-color-shadow); --ds-select-panel-min-width: 17.5rem; --ds-select-panel-max-height: 16rem; --ds-select-panel-padding: var(--ds-spacing-02); --ds-select-panel-border-width: var(--ds-input-border-width); --ds-select-panel-border-color: var(--ds-input-border-default); --ds-select-panel-radius: var(--ds-radius-sm); --ds-select-panel-overlay-offset: var(--ds-spacing-02); --ds-select-toolbar-gap-bottom: var(--ds-spacing-01); --ds-select-search-padding-block: var(--ds-spacing-02); --ds-select-search-padding-inline-start: var(--ds-spacing-03); --ds-select-search-padding-inline-end: var(--ds-spacing-04); --ds-select-search-gap: var(--ds-spacing-01); --ds-select-search-radius: var(--ds-radius-sm); --ds-select-option-list-gap: var(--ds-spacing-01); --ds-select-option-gap: var(--ds-spacing-02); --ds-select-option-padding-block: var(--ds-spacing-02); --ds-select-option-padding-inline: var(--ds-spacing-02); --ds-select-option-checkbox-size: 1.5rem; --ds-select-option-tick-size: 1.5rem; --ds-select-option-label-font-size: var(--ds-input-font-size-md); --ds-select-option-label-line-height: var(--ds-input-line-height-md); --ds-select-option-radius: var(--ds-radius-xs); --ds-select-option-bg-hover: var(--ds-color-bg-primary-subtle); --ds-select-option-checkbox-border: var(--ds-input-border-default); --ds-select-option-checkbox-border-active: var(--ds-color-bg-primary); --ds-select-option-checkbox-bg-selected: var(--ds-color-bg-primary); --ds-select-option-tick-color: var(--ds-color-bg-primary); --ds-select-chip-height: var(--ds-tag-height-sm); --ds-select-chip-bg: var(--ds-color-bg-overlay-black); --ds-select-chip-radius: var(--ds-radius-xs); --ds-select-chip-gap: var(--ds-tag-gap); --ds-select-chip-font-size: var(--ds-tag-font-size); --ds-select-chip-line-height: var(--ds-tag-line-height); --ds-select-chip-font-weight: 500; --ds-select-chip-text: var(--ds-badge-text-default); --ds-select-chip-padding-inline-start: var(--ds-spacing-02); --ds-select-chip-padding-inline-end: var(--ds-spacing-01); --ds-select-chip-label-padding-inline: 2px; --ds-select-chip-remove-size: 1rem; --ds-slider-rail-bg: var(--ds-color-surface-subtle); --ds-slider-track-bg: var(--ds-color-bg-primary); --ds-slider-handle-bg: var(--ds-color-surface-default); --ds-slider-handle-bg-disabled: var(--ds-color-border-disable); --ds-slider-handle-shadow: 0 1px 4px var(--ds-color-shadow); --ds-slider-handle-overlay-hover: var(--ds-color-bg-primary); --ds-slider-handle-overlay-focus: var(--ds-color-bg-primary); --ds-slider-rail-height: 4px; --ds-slider-handle-size: 20px; --ds-slider-handle-overlay-hover-size: 36px; --ds-slider-handle-overlay-focus-size: 40px; --ds-slider-radius: var(--ds-radius-full, 100px); --ds-slider-transition: var(--ds-control-transition); --ds-slider-dot-size: 8px; --ds-slider-dot-border: var(--ds-color-border-default); --ds-slider-dot-bg-active: var(--ds-color-bg-primary); --ds-slider-mark-color: var(--ds-color-text-caption); --ds-slider-mark-color-active: var(--ds-color-text-body); --ds-switch-primary: var(--ds-color-bg-primary); --ds-switch-primary-hover: var(--ds-color-bg-primary-hover); --ds-switch-bg-default: var(--ds-color-surface-default); --ds-switch-bg-disable: var(--ds-color-surface-disable); --ds-switch-bg-hover-token: var(--ds-color-surface-subtle); --ds-switch-text-light: var(--ds-color-text-light); --ds-switch-track-bg: var(--ds-control-border); --ds-switch-track-bg-checked: var(--ds-switch-primary); --ds-switch-track-bg-hover-unchecked: var(--ds-switch-bg-hover-token); --ds-switch-track-bg-hover-checked: var(--ds-switch-primary-hover); --ds-switch-track-bg-disabled: var(--ds-switch-bg-disable); --ds-switch-thumb-bg: var(--ds-control-bg); --ds-switch-width-sm: 26px; --ds-switch-width-md: 32px; --ds-switch-width-lg: 36px; --ds-switch-height-sm: 16px; --ds-switch-height-md: 20px; --ds-switch-height-lg: 24px; --ds-switch-padding: 2px; --ds-switch-thumb-offset-sm: calc(var(--ds-switch-height-sm) - var(--ds-switch-padding) * 2); --ds-switch-thumb-offset-md: calc(var(--ds-switch-height-md) - var(--ds-switch-padding) * 2); --ds-switch-thumb-offset-lg: calc(var(--ds-switch-height-lg) - var(--ds-switch-padding) * 2); --ds-switch-inner-font-size: 12px; --ds-switch-label-gap: var(--ds-control-label-gap); --ds-switch-label-font-size-sm: var(--ds-checkbox-label-font-size-sm); --ds-switch-label-font-size-md: var(--ds-checkbox-label-font-size-md); --ds-switch-label-font-size-lg: var(--ds-checkbox-label-font-size-lg); --ds-switch-label-font-weight: var(--ds-checkbox-label-font-weight); --ds-textarea-error: var(--ds-color-text-error); --ds-textarea-bg-default: var(--ds-color-surface-default); --ds-textarea-bg-disable: var(--ds-color-surface-disable); --ds-textarea-border-default: var(--ds-color-border-default); --ds-textarea-border-disable: var(--ds-color-border-disable); --ds-textarea-text-disable: var(--ds-color-text-disable); --ds-textarea-text-hint: var(--ds-color-text-hint); --ds-textarea-text-input: var(--ds-color-text-body); --ds-textarea-text-label: var(--ds-color-text-title); --ds-textarea-typing: var(--ds-color-bg-primary); --ds-upload-bg: var(--ds-color-surface-default); --ds-upload-bg-primary: var(--ds-color-bg-primary-subtle); --ds-upload-border: var(--ds-color-border-default); --ds-upload-border-primary: var(--ds-color-bg-primary-subtle-hover-light); --ds-upload-bg-hover: var(--ds-color-bg-overlay-black); --ds-upload-radius-drag: var(--ds-radius-md); --ds-upload-radius-card: var(--ds-radius-sm); --ds-upload-progress-height: 6px; --ds-upload-card-width: 420px; --ds-upload-text-default: var(--ds-color-text-body); --ds-upload-text-subtitle: var(--ds-color-text-subtitle); --ds-upload-text-title: var(--ds-color-text-title); --ds-upload-primary: var(--ds-color-bg-primary); --ds-upload-progress-bg: var(--ds-color-bg-overlay-black); --ds-alert-radius: 8px; --ds-alert-padding-compact: 12px; --ds-alert-padding-titled: 16px; --ds-alert-gap: 8px; --ds-alert-gap-inner: 4px; --ds-alert-icon-size: 24px; --ds-alert-close-size: 20px; --ds-alert-title-size: 16px; --ds-alert-title-line-height: 24px; --ds-alert-description-size: 14px; --ds-alert-description-line-height: 20px; --ds-alert-text-title: var(--ds-color-text-title); --ds-alert-text-default: var(--ds-color-text-body); --ds-alert-action-gap: 8px; --ds-alert-success-bg: var(--ds-color-bg-success-subtle); --ds-alert-success-border: var(--ds-color-bg-success); --ds-alert-error-bg: var(--ds-color-bg-error-subtle); --ds-alert-error-border: var(--ds-color-bg-error); --ds-alert-warning-bg: var(--ds-color-bg-warning-subtle); --ds-alert-warning-border: var(--ds-color-bg-warning); --ds-alert-info-bg: var(--ds-color-bg-info-subtle); --ds-alert-info-border: var(--ds-color-bg-info); --ds-modal-width-confirm: 335px; --ds-modal-width-default: 335px; --ds-modal-width-normal: 520px; --ds-modal-radius: 16px; --ds-modal-shadow: 0 0 6px var(--ds-color-bg-primary); --ds-modal-padding-block: 24px; --ds-modal-padding-inline: 32px; --ds-modal-padding-inline-text: 20px; --ds-modal-gap: 20px; --ds-modal-text-gap: 4px; --ds-modal-title-size: 18px; --ds-modal-title-line-height: 28px; --ds-modal-caption-size: 14px; --ds-modal-caption-line-height: 20px; --ds-modal-icon-size: 80px; --ds-modal-icon-inner-size: 40px; --ds-modal-footer-gap: 15px; --ds-modal-single-btn-width: 128px; --ds-modal-z-index: 1100; --ds-modal-mask-bg: var(--ds-palette-overlay-black-50); --ds-modal-bg: var(--ds-popup-bg-light, var(--ds-color-surface-default)); --ds-modal-title-color: var(--ds-popup-text-title, var(--ds-color-text-title)); --ds-modal-caption-color: var(--ds-popup-text-caption, var(--ds-color-text-caption)); --ds-notification-width: 384px; --ds-notification-radius: 12px; --ds-notification-padding: 24px; --ds-notification-gap: 12px; --ds-notification-content-gap: 8px; --ds-notification-icon-size: 24px; --ds-notification-close-size: 20px; --ds-notification-title-size: 16px; --ds-notification-title-line-height: 24px; --ds-notification-description-size: 14px; --ds-notification-description-line-height: 20px; --ds-notification-bg: var(--ds-color-surface-default); --ds-notification-text-title: var(--ds-color-text-title); --ds-notification-text-default: var(--ds-color-icon-default); --ds-notification-shadow: 0 4px 10px var(--ds-color-shadow); --ds-notification-z-index: 1010; --ds-notification-stack-gap: 16px; --ds-notification-offset: 24px; --ds-notification-cta-gap: 8px; --ds-notification-btn-primary-bg: var(--ds-color-bg-primary); --ds-notification-btn-primary-text: var(--ds-color-text-light); --ds-notification-btn-link-text: var(--ds-color-bg-primary); --ds-rate-star-color: #ffc014; --ds-rate-star-bg: #e5e7eb; --ds-rate-star-size-sm: 15px; --ds-rate-star-size: 20px; --ds-rate-star-size-lg: 25px; --ds-rate-gap: 8px; --ds-rate-hover-scale: 1.1; --ds-skeleton-surface: var(--ds-color-surface-subtle); --ds-skeleton-radius-bar: 2px; --ds-skeleton-radius-block: 4px; --ds-skeleton-radius-round: 100px; --ds-skeleton-title-height: 16px; --ds-skeleton-title-width: 248px; --ds-skeleton-paragraph-height: 16px; --ds-skeleton-paragraph-gap: 16px; --ds-skeleton-content-gap: 24px; --ds-skeleton-avatar-gap: 16px; --ds-skeleton-basic-width: 560px; --ds-skeleton-avatar-sm: 24px; --ds-skeleton-avatar-md: 32px; --ds-skeleton-avatar-lg: 40px; --ds-skeleton-input-width: 280px; --ds-skeleton-input-height-sm: 24px; --ds-skeleton-input-height-md: 32px; --ds-skeleton-input-height-lg: 40px; --ds-skeleton-button-width-sm: 56px; --ds-skeleton-button-height-sm: 24px; --ds-skeleton-button-width-md: 80px; --ds-skeleton-button-height-md: 32px; --ds-skeleton-button-width-lg: 100px; --ds-skeleton-button-height-lg: 40px; --ds-skeleton-image-size: 96px; --ds-skeleton-image-gap: 16px; --ds-skeleton-image-icon-color: var(--ds-color-icon-disable); --ds-skeleton-active-duration: 1.4s; --ds-spin-track: var(--ds-color-bg-overlay-black); --ds-spin-primary: var(--ds-color-bg-primary); --ds-spin-bg: var(--ds-color-bg-overlay-black); --ds-spin-text: var(--ds-color-text-title); --ds-spin-text-sub: var(--ds-color-icon-default); --ds-spin-size-sm: 14px; --ds-spin-size-md: 20px; --ds-spin-size-lg: 24px; --ds-spin-radius-xs: 6px; --ds-spin-radius-s: 8px; --ds-spin-padding: 12px; --ds-spin-gap-text: 4px; --ds-spin-gap-shade: 8px; --ds-spin-duration: 0.8s; --ds-spin-nested-opacity: 0.5; --ds-toast-radius: 8px; --ds-toast-padding: 8px 12px; --ds-toast-gap: 8px; --ds-toast-icon-size: 16px; --ds-toast-font-size: 14px; --ds-toast-line-height: 20px; --ds-toast-bg: var(--ds-color-surface-default); --ds-toast-text: var(--ds-color-text-body); --ds-toast-shadow: 0 4px 10px var(--ds-color-shadow); --ds-toast-z-index: 1010; --ds-toast-stack-gap: 8px; --ds-toast-offset: 24px; --ds-btn-compact-divider-width: 1px; --ds-btn-compact-divider-filled: var(--ds-color-bg-primary-subtle-pressed); --ds-btn-compact-divider-filled-danger: var(--ds-color-text-on-primary); --ds-btn-compact-divider-text: var(--ds-color-border-subtle); --ds-btn-compact-overlap-outlined: 1.5px; --ds-btn-compact-overlap-outlined-xl: 2px; --ds-btn-compact-radius-sm: 6px; --ds-btn-compact-radius-md: 8px; --ds-btn-compact-radius-xl: 12px; --ds-button-bg-default: var(--ds-color-bg-dark); --ds-button-bg-default-hover: var(--ds-palette-neutral-300); --ds-button-bg-default-pressed: var(--ds-palette-neutral-50); --ds-button-bg-primary: var(--ds-color-bg-primary); --ds-button-bg-primary-hover: var(--ds-color-bg-primary-hover); --ds-button-bg-primary-pressed: var(--ds-color-bg-primary-pressed); --ds-button-bg-danger: var(--ds-color-bg-error); --ds-button-bg-danger-hover: var(--ds-color-bg-error-hover); --ds-button-bg-danger-pressed: var(--ds-color-bg-error-pressed); --ds-button-bg-soft-default: var(--ds-color-surface-subtle); --ds-button-bg-soft-default-hover: var(--ds-palette-neutral-800); --ds-button-bg-soft-default-pressed: var(--ds-palette-neutral-700); --ds-button-bg-soft-primary: var(--ds-color-bg-primary-subtle-hover-light); --ds-button-bg-soft-primary-hover: var(--ds-palette-dark-blue-875); --ds-button-bg-soft-primary-pressed: var(--ds-palette-dark-blue-825); --ds-button-bg-soft-danger: var(--ds-color-bg-error-subtle); --ds-button-bg-soft-danger-hover: var(--ds-palette-red-900); --ds-button-bg-soft-danger-pressed: var(--ds-palette-red-800); --ds-button-bg-surface: var(--ds-color-surface-default); --ds-button-bg-surface-hover: var(--ds-color-bg-primary-subtle); --ds-button-bg-surface-active: var(--ds-color-bg-primary-subtle-hover); --ds-button-bg-disabled: var(--ds-color-surface-disable); --ds-button-border-default: var(--ds-color-border-light); --ds-button-border-disabled: var(--ds-color-border-disable); --ds-button-border-primary: var(--ds-color-bg-primary); --ds-button-border-primary-hover: var(--ds-color-bg-primary-hover); --ds-button-border-primary-pressed: var(--ds-color-bg-primary-pressed); --ds-button-border-danger: var(--ds-color-text-error); --ds-button-border-danger-hover: var(--ds-color-bg-error-hover); --ds-button-border-danger-pressed: var(--ds-color-bg-error-pressed); --ds-button-border-neutral: var(--ds-color-border-default); --ds-button-text-on-solid: var(--ds-color-text-light); --ds-button-text-soft: var(--ds-color-icon-default); --ds-button-text-primary: var(--ds-color-bg-primary); --ds-button-text-primary-hover: var(--ds-color-bg-primary-hover); --ds-button-text-primary-pressed: var(--ds-color-bg-primary-pressed); --ds-button-text-danger: var(--ds-color-text-error); --ds-button-text-danger-hover: var(--ds-color-bg-error-hover); --ds-button-text-danger-pressed: var(--ds-color-bg-error-pressed); --ds-button-text-disabled: var(--ds-color-text-disable); --ds-button-focus-ring-default: var(--ds-button-bg-default); --ds-button-focus-ring-primary: var(--ds-button-bg-primary); --ds-button-focus-ring-danger: var(--ds-button-bg-danger); --ds-button-focus-ring-outlined: var(--ds-button-bg-primary); --ds-z-float: 100; --ds-float-button-inset: var(--ds-spacing-lg); --ds-float-button-inset-inline-end: var(--ds-float-button-inset); --ds-float-button-inset-block-end: var(--ds-float-button-inset); --ds-shadow-float: 0 6px 16px var(--ds-color-text); --ds-shadow-float-primary: 0 6px 16px var(--ds-color-primary); --ds-layout-header-height: 64px; --ds-layout-trigger-height: 48px; --ds-layout-zero-trigger-width: 36px; --ds-layout-zero-trigger-height: 42px; --ds-avatar-bg-default: var(--ds-palette-neutral-800); --ds-avatar-border-default: var(--ds-color-border-light); --ds-avatar-text-default: var(--ds-palette-neutral-500); --ds-avatar-icon-default: var(--ds-palette-neutral-500); --ds-avatar-text-light: var(--ds-color-text-light); --ds-breadcrumb-active: var(--ds-color-text-body); --ds-breadcrumb-primary: var(--ds-color-bg-primary); --ds-breadcrumb-unactive: var(--ds-color-text-caption); --ds-dropdown-menu-primary-active: var(--ds-color-bg-primary); --ds-dropdown-menu-secondary-active: var(--ds-color-surface-subtle); --ds-dropdown-menu-bg-default: var(--ds-color-surface-default); --ds-dropdown-menu-icon-default: var(--ds-color-icon-default); --ds-dropdown-menu-text-default: var(--ds-color-text-body); --ds-dropdown-menu-text-disable: var(--ds-color-text-disable); --ds-dropdown-menu-text-light: var(--ds-color-text-light); --ds-pagination-primary: var(--ds-color-bg-primary); --ds-pagination-bg-unactive: var(--ds-color-surface-default); --ds-pagination-border-unactive: var(--ds-color-border-default); --ds-pagination-text-light: var(--ds-color-text-light); --ds-pagination-text-unactive: var(--ds-color-text-caption); --ds-sidebar-width: 280px; --ds-sidebar-collapsed-width: 80px; --ds-sidebar-padding: var(--ds-spacing-04, 16px); --ds-sidebar-gap: var(--ds-spacing-06, 24px); --ds-sidebar-section-gap: var(--ds-spacing-04, 16px); --ds-sidebar-item-gap: var(--ds-spacing-02, 8px); --ds-sidebar-item-height: 40px; --ds-sidebar-item-radius: var(--ds-radius-sm, 8px); --ds-sidebar-sub-padding-inline: 44px; --ds-sidebar-bg: var(--ds-color-surface-default); --ds-sidebar-border: var(--ds-color-border-subtle); --ds-sidebar-bg-hover: var(--ds-color-surface-subtle); --ds-sidebar-primary: var(--ds-color-bg-primary); --ds-sidebar-bg-active: var(--ds-color-bg-primary); --ds-sidebar-text-default: var(--ds-color-text-body); --ds-sidebar-text-light: var(--ds-color-text-light); --ds-sidebar-title: var(--ds-color-text-title); --ds-sidebar-badge-bg: var(--ds-color-bg-error); --ds-sidebar-badge-text: var(--ds-color-text-light); --ds-sidebar-subscription-bg: var(--ds-sidebar-primary); --ds-sidebar-subscription-text: var(--ds-sidebar-text-light); --ds-sidebar-account-bg-hover: var(--ds-color-surface-subtle); --ds-sidebar-account-description: var(--ds-color-text-caption); --ds-tab-primary: var(--ds-color-bg-primary); --ds-tab-bg-hover: var(--ds-color-surface-subtle); --ds-tab-border: var(--ds-color-border-subtle); --ds-tab-text-light: var(--ds-color-text-light); --ds-tab-text-unactive: var(--ds-color-text-caption); --ds-tabs-height-sm: 36px; --ds-tabs-height-md: 40px; --ds-tabs-height-lg: 48px; --ds-tabs-item-min-width: 72px; --ds-tabs-item-gap: 8px; --ds-tabs-item-radius: 8px; --ds-tabs-font-size-sm: 14px; --ds-tabs-line-height-sm: 20px; --ds-tabs-padding-block-sm: 4px; --ds-tabs-padding-inline-sm: 16px; --ds-tabs-font-size-md: 14px; --ds-tabs-line-height-md: 20px; --ds-tabs-padding-block-md: 8px; --ds-tabs-padding-inline-md: 20px; --ds-tabs-font-size-lg: 16px; --ds-tabs-line-height-lg: 24px; --ds-tabs-padding-block-lg: 12px; --ds-tabs-padding-inline-lg: 20px; --ds-tabs-font-weight: 400; --ds-tabs-font-weight-active: 600; --ds-tabs-text-color: var(--ds-tab-text-unactive); --ds-tabs-hover-text-color: var(--ds-color-text-body); --ds-tabs-active-text-color: var(--ds-tab-primary); --ds-tabs-disabled-text-color: var(--ds-color-text-disabled); --ds-tabs-separator-width: 1px; --ds-tabs-separator-height: 20px; --ds-tabs-separator-color: var(--ds-color-border-subtle); --ds-tabs-separator-gap: 8px; --ds-tabs-baseline-height: 1px; --ds-tabs-baseline-color: var(--ds-color-border-subtle); --ds-tabs-indicator-height: 2px; --ds-tabs-indicator-radius: 0; --ds-tabs-indicator-color: var(--ds-tab-primary); --ds-tabs-pill-radius: var(--ds-tabs-item-radius); --ds-tabs-pill-active-bg: var(--ds-tab-primary); --ds-tabs-pill-active-color: var(--ds-color-text-light); --ds-tabs-pill-hover-bg: var(--ds-tab-bg-hover); --ds-tabs-focus-ring-width: 2px; --ds-tabs-focus-ring-color: var(--ds-tab-primary); --ds-tabs-focus-ring-offset: 2px; --ds-tabs-panel-padding-top: var(--ds-spacing-04); --ds-tabs-transition-duration: 250ms; --ds-tabs-transition-easing: var(--ds-motion-ease-standard, cubic-bezier(0.2, 0, 0, 1)); --ds-font-family-base: Inter; --ds-radius-pill: 9999px; --ds-radius-none: 0; --ds-radius-xs: 4px; --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 24px; --ds-radius-full: 9999px; --ds-radius-pill: var(--ds-radius-full); } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-card-shadow-sm: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 6%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-card-shadow-md: 0 4px 20px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-popover-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-color-tooltip-shadow: 0 4px 20px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-input-number-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ds-color-bg-primary) 25%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-select-panel-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-slider-handle-shadow: 0 1px 4px color-mix(in srgb, var(--ds-color-shadow) 20%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-slider-handle-overlay-hover: color-mix(in srgb, var(--ds-color-bg-primary) 20%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-slider-handle-overlay-focus: color-mix(in srgb, var(--ds-color-bg-primary) 40%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-modal-shadow: 0 0 6px color-mix(in srgb, var(--ds-color-bg-primary) 10%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-notification-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-toast-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-btn-compact-divider-filled-danger: color-mix(in srgb, var(--ds-color-text-on-primary) 35%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-button-focus-ring-default: color-mix(in srgb, var(--ds-button-bg-default) 28%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-button-focus-ring-primary: color-mix(in srgb, var(--ds-button-bg-primary) 28%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-button-focus-ring-danger: color-mix(in srgb, var(--ds-button-bg-danger) 28%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-button-focus-ring-outlined: color-mix(in srgb, var(--ds-button-bg-primary) 20%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-shadow-float: 0 6px 16px color-mix(in srgb, var(--ds-color-text) 14%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-shadow-float-primary: 0 6px 16px color-mix(in srgb, var(--ds-color-primary) 32%, transparent); } } @supports (color: color-mix(in lab, red, red)) { :root, html[data-ds-theme=light] { --ds-sidebar-bg-active: color-mix(in srgb, var(--ds-color-bg-primary) 10%, transparent); } } html[data-ds-theme=dark] { --ds-color-bg-primary: var(--ds-palette-dark-blue-500); --ds-color-bg-primary-hover: var(--ds-palette-dark-blue-600); --ds-color-bg-primary-pressed: var(--ds-palette-dark-blue-400); --ds-color-bg-primary-subtle: var(--ds-palette-dark-blue-950); --ds-color-bg-primary-subtle-hover: var(--ds-palette-dark-blue-900); --ds-color-bg-primary-subtle-hover-light: var(--ds-palette-dark-blue-850); --ds-color-bg-primary-subtle-pressed: var(--ds-palette-dark-blue-800); --ds-color-text-primary: var(--ds-palette-dark-blue-400); --ds-color-text-primary-hover: var(--ds-palette-dark-blue-500); --ds-color-bg-secondary: var(--ds-palette-yellow-500); --ds-color-bg-secondary-hover: var(--ds-palette-yellow-600); --ds-color-bg-secondary-pressed: var(--ds-palette-yellow-400); --ds-color-bg-secondary-subtle: var(--ds-palette-yellow-950); --ds-color-bg-secondary-subtle-hover: var(--ds-palette-yellow-800); --ds-color-bg-secondary-subtle-pressed: var(--ds-palette-yellow-700); --ds-color-text-secondary: var(--ds-palette-yellow-400); --ds-color-text-secondary-hover: var(--ds-palette-yellow-500); --ds-color-bg-dark: var(--ds-palette-neutral-100); --ds-color-bg-light: var(--ds-palette-neutral-950); --ds-color-bg-overlay-black: var(--ds-palette-overlay-black-5); --ds-color-bg-overlay-white: var(--ds-palette-overlay-white-10); --ds-color-bg-overlay-white-50: var(--ds-palette-overlay-white-50); --ds-color-shadow: var(--ds-palette-shadow-base); --ds-color-bg-subtle: var(--ds-palette-neutral-900); --ds-color-bg-neutral-subtle-hover: var(--ds-palette-neutral-subtle-hover); --ds-color-border-default: var(--ds-palette-neutral-700); --ds-color-border-disable: var(--ds-palette-neutral-800); --ds-color-border-light: var(--ds-palette-neutral-950); --ds-color-border-subtle: var(--ds-palette-neutral-800); --ds-color-border-strong: var(--ds-palette-neutral-border-strong); --ds-color-icon-default: var(--ds-palette-neutral-300); --ds-color-icon-disable: var(--ds-palette-neutral-600); --ds-color-icon-light: var(--ds-palette-neutral-950); --ds-color-icon-lighter: var(--ds-palette-neutral-500); --ds-color-surface-default: var(--ds-palette-neutral-950); --ds-color-surface-disable: var(--ds-palette-neutral-800); --ds-color-surface-subtle: var(--ds-palette-neutral-900); --ds-color-text-body: var(--ds-palette-neutral-200); --ds-color-text-caption: var(--ds-palette-neutral-400); --ds-color-text-disable: var(--ds-palette-neutral-500); --ds-color-text-hint: var(--ds-palette-neutral-600); --ds-color-text-subtitle: var(--ds-palette-neutral-300); --ds-color-text-light: var(--ds-palette-neutral-950); --ds-color-text-title: var(--ds-palette-neutral-50); --ds-color-bg-error: var(--ds-palette-red-600); --ds-color-bg-error-hover: var(--ds-palette-red-700); --ds-color-bg-error-pressed: var(--ds-palette-red-500); --ds-color-bg-error-subtle: var(--ds-palette-red-950); --ds-color-bg-error-subtle-hover: var(--ds-palette-red-900); --ds-color-bg-error-subtle-pressed: var(--ds-palette-red-800); --ds-color-text-error: var(--ds-palette-red-500); --ds-color-text-error-hover: var(--ds-palette-red-300); --ds-color-bg-warning: var(--ds-palette-yellow-500); --ds-color-bg-warning-hover: var(--ds-palette-yellow-600); --ds-color-bg-warning-pressed: var(--ds-palette-yellow-400); --ds-color-bg-warning-subtle: var(--ds-palette-yellow-950); --ds-color-bg-warning-subtle-hover: var(--ds-palette-yellow-900); --ds-color-bg-warning-subtle-pressed: var(--ds-palette-yellow-800); --ds-color-text-warning: var(--ds-palette-yellow-400); --ds-color-text-warning-hover: var(--ds-palette-yellow-500); --ds-color-bg-success: var(--ds-palette-green-500); --ds-color-bg-success-hover: var(--ds-palette-green-600); --ds-color-bg-success-pressed: var(--ds-palette-green-400); --ds-color-bg-success-subtle: var(--ds-palette-green-950); --ds-color-bg-success-subtle-hover: var(--ds-palette-green-900); --ds-color-bg-success-subtle-pressed: var(--ds-palette-green-800); --ds-color-text-success: var(--ds-palette-green-400); --ds-color-text-success-hover: var(--ds-palette-green-500); --ds-color-bg-info: var(--ds-palette-info-500); --ds-color-bg-info-hover: var(--ds-palette-info-600); --ds-color-bg-info-pressed: var(--ds-palette-info-400); --ds-color-bg-info-subtle: var(--ds-palette-info-950); --ds-color-bg-info-subtle-hover: var(--ds-palette-info-900); --ds-color-bg-info-subtle-pressed: var(--ds-palette-info-800); --ds-color-text-info: var(--ds-palette-info-text); --ds-color-text-info-hover: var(--ds-palette-info-text-hover); --ds-color-primary: var(--ds-color-bg-primary); --ds-color-primary-hover: var(--ds-color-bg-primary-hover); --ds-color-primary-active: var(--ds-color-bg-primary-pressed); --ds-color-text: var(--ds-color-text-body); --ds-color-text-on-primary: var(--ds-color-text-light); --ds-color-text-disabled: var(--ds-color-text-disable); --ds-color-border: var(--ds-color-border-light); --ds-color-border-hover: var(--ds-color-bg-primary-subtle); --ds-color-border-disabled: var(--ds-color-border-disable); --ds-color-bg-default: var(--ds-color-surface-default); --ds-color-bg-hover: var(--ds-color-bg-primary-subtle); --ds-color-bg-active: var(--ds-color-bg-primary-subtle-hover); --ds-color-bg-disabled: var(--ds-color-surface-disable); --ds-badge-default: var(--ds-palette-neutral-600); --ds-badge-primary: var(--ds-color-bg-primary); --ds-badge-error: var(--ds-color-bg-error); --ds-badge-success: var(--ds-color-bg-success); --ds-badge-warning: var(--ds-color-bg-warning); --ds-badge-bg-default: var(--ds-color-surface-subtle); --ds-badge-primary-bg: var(--ds-color-bg-primary-subtle); --ds-badge-error-bg: var(--ds-color-bg-error-subtle); --ds-badge-processing-bg: var(--ds-color-bg-info-subtle); --ds-badge-success-bg: var(--ds-color-bg-success-subtle); --ds-badge-warning-bg: var(--ds-color-bg-warning-subtle); --ds-badge-icon-default: var(--ds-color-icon-default); --ds-badge-text-default: var(--ds-color-text-body); --ds-badge-text-disable: var(--ds-color-text-disable); --ds-badge-text-light: var(--ds-color-text-light); --ds-badge-border-color: var(--ds-badge-bg-default); --ds-badge-height-md: 16px; --ds-badge-height-lg: 20px; --ds-badge-padding-inline-md: 4px; --ds-badge-padding-inline-lg: 8px; --ds-badge-font-size-md: 10px; --ds-badge-font-size-lg: 12px; --ds-badge-status-font-size: 12px; --ds-badge-font-weight: 600; --ds-badge-radius-pill: var(--ds-radius-full); --ds-badge-radius-rounded: var(--ds-radius-xs); --ds-badge-dot-size-md: 8px; --ds-badge-dot-size-lg: 12px; --ds-badge-status-dot-size: 8px; --ds-badge-status-gap: var(--ds-spacing-02); --ds-badge-status-text-color: var(--ds-color-text-body); --ds-badge-sup-inset-block-start: -6px; --ds-badge-sup-inset-inline-end: -6px; --ds-badge-sup-dot-inset-block-start: 4px; --ds-badge-sup-dot-inset-inline-end: 4px; --ds-badge-sup-ring: 0 0 0 1px var(--ds-color-surface-default); --ds-bubble-bg-start: var(--ds-color-bg-overlay-black); --ds-bubble-bg-end: var(--ds-color-bg-primary-subtle); --ds-bubble-text: var(--ds-color-text-body); --ds-bubble-text-info: var(--ds-color-text-caption); --ds-bubble-radius-xl: 20px; --ds-bubble-radius-s: 8px; --ds-bubble-padding: 12px; --ds-bubble-padding-ghost-y: 4px; --ds-bubble-max-width: 362px; --ds-bubble-avatar-gap: 8px; --ds-bubble-stack-gap: 4px; --ds-bubble-group-gap: 20px; --ds-bubble-avatar-indent: 48px; --ds-bubble-font-size: 14px; --ds-bubble-line-height: 20px; --ds-bubble-meta-font-size: 12px; --ds-bubble-meta-line-height: 16px; --ds-bubble-dot-size: 6px; --ds-bubble-dot-gap: 4px; --ds-card-bg: var(--ds-color-surface-default); --ds-card-inner-bg: var(--ds-color-bg-subtle); --ds-card-inner-head-bg: var(--ds-color-bg-subtle); --ds-card-border-color: var(--ds-color-border-subtle); --ds-card-border-width: 1px; --ds-card-radius: var(--ds-radius-sm, 8px); --ds-card-radius-lg: 12px; --ds-card-shadow-sm: 0 4px 10px var(--ds-color-shadow); --ds-card-shadow-md: 0 4px 20px var(--ds-color-shadow); --ds-card-text-title: var(--ds-color-text-title); --ds-card-text-caption: var(--ds-color-text-body); --ds-card-head-min-height: 40px; --ds-card-head-padding-block: 8px; --ds-card-head-padding-block-sm: 4px; --ds-card-head-title-font-size: 18px; --ds-card-head-title-line-height: 28px; --ds-card-head-title-font-size-sm: 16px; --ds-card-head-title-line-height-sm: 24px; --ds-card-padding: var(--ds-spacing-03, 12px); --ds-card-body-padding: var(--ds-spacing-04, 16px); --ds-card-actions-padding-block: var(--ds-spacing-02, 8px); --ds-card-actions-padding-inline: var(--ds-spacing-05, 24px); --ds-card-media-width-sm: 240px; --ds-card-media-width-md: 300px; --ds-card-cover-height-simple: 240px; --ds-card-cover-height-advanced: 300px; --ds-card-cover-height-compact: 160px; --ds-card-cover-height-wide: 200px; --ds-popover-bg: var(--ds-popup-bg-light); --ds-popover-text-title: var(--ds-popup-text-title); --ds-popover-text-body: var(--ds-popup-text-caption); --ds-popover-width: 265px; --ds-popover-max-width: 100vw; --ds-popover-radius: var(--ds-radius-sm, 8px); --ds-popover-shadow: 0 4px 10px var(--ds-color-shadow); --ds-popover-padding-inline: var(--ds-spacing-04, 16px); --ds-popover-padding-block: var(--ds-spacing-03, 12px); --ds-popover-body-gap: var(--ds-spacing-03, 12px); --ds-popover-font-size: 14px; --ds-popover-line-height: 20px; --ds-popover-title-font-size: 14px; --ds-popover-title-line-height: 20px; --ds-popover-title-font-weight: 600; --ds-popover-arrow-size: 8px; --ds-popover-gap: 8px; --ds-popup-bg-light: var(--ds-color-surface-default); --ds-popup-text-caption: var(--ds-color-text-caption); --ds-popup-text-title: var(--ds-color-text-title); --ds-table-primary: var(--ds-color-bg-primary); --ds-table-error: var(--ds-color-text-error); --ds-table-head-blue: var(--ds-color-bg-primary-subtle-hover-light); --ds-table-head-primary: var(--ds-color-bg-primary); --ds-table-head-primary-text: var(--ds-color-text-light); --ds-table-head-blue-text: var(--ds-color-text-body); --ds-table-head-grey-text: var(--ds-color-text-body); --ds-table-head-custom-text: var(--ds-color-text-body); --ds-table-bg-blue: var(--ds-color-bg-primary-subtle); --ds-table-bg-grey: var(--ds-color-surface-subtle); --ds-table-bg-head: var(--ds-color-surface-subtle); --ds-table-border-default: var(--ds-color-border-default); --ds-table-icon-default: var(--ds-color-icon-default); --ds-table-text-default: var(--ds-color-text-body); --ds-table-text-light: var(--ds-color-text-light); --ds-table-text-unactive: var(--ds-color-text-caption); --ds-tag-height-sm: 24px; --ds-tag-height-md: 28px; --ds-tag-padding-inline: var(--ds-spacing-02); --ds-tag-padding-inline-sm: var(--ds-spacing-01); --ds-tag-gap: var(--ds-spacing-01); --ds-tag-font-size: 12px; --ds-tag-line-height: 16px; --ds-tag-radius-rounded: var(--ds-radius-xs); --ds-tag-radius-pill: var(--ds-radius-pill); --ds-tag-border-width: 1px; --ds-tag-close-size-sm: 12px; --ds-tag-close-size-md: 14px; --ds-tag-default-bg: var(--ds-color-surface-subtle); --ds-tag-default-border: var(--ds-color-icon-lighter); --ds-tag-default-text: var(--ds-color-icon-lighter); --ds-tag-default-solid-bg: var(--ds-color-icon-lighter); --ds-tag-dark-blue-bg: var(--ds-color-bg-primary-subtle-hover-light); --ds-tag-dark-blue-border: var(--ds-color-bg-primary-pressed); --ds-tag-dark-blue-text: var(--ds-color-bg-primary-pressed); --ds-tag-dark-blue-solid-bg: var(--ds-color-bg-primary); --ds-tag-light-blue-bg: var(--ds-palette-light-blue-950); --ds-tag-light-blue-border: var(--ds-palette-light-blue-500); --ds-tag-light-blue-text: var(--ds-palette-light-blue-500); --ds-tag-light-blue-solid-bg: var(--ds-palette-light-blue-500); --ds-tag-purple-bg: var(--ds-palette-purple-950); --ds-tag-purple-border: var(--ds-palette-purple-500); --ds-tag-purple-text: var(--ds-palette-purple-500); --ds-tag-purple-solid-bg: var(--ds-palette-purple-500); --ds-tag-red-bg: var(--ds-color-bg-error-subtle); --ds-tag-red-border: var(--ds-color-bg-error); --ds-tag-red-text: var(--ds-color-bg-error); --ds-tag-red-solid-bg: var(--ds-color-bg-error); --ds-tag-pink-bg: var(--ds-palette-pink-950); --ds-tag-pink-border: var(--ds-palette-pink-500); --ds-tag-pink-text: var(--ds-palette-pink-500); --ds-tag-pink-solid-bg: var(--ds-palette-pink-500); --ds-tag-green-bg: var(--ds-color-bg-success-subtle); --ds-tag-green-border: var(--ds-color-bg-success-pressed); --ds-tag-green-text: var(--ds-color-bg-success-pressed); --ds-tag-green-solid-bg: var(--ds-color-bg-success); --ds-tag-yellow-bg: var(--ds-color-bg-warning-subtle); --ds-tag-yellow-border: var(--ds-color-bg-warning-pressed); --ds-tag-yellow-text: var(--ds-color-bg-warning-pressed); --ds-tag-yellow-solid-bg: var(--ds-color-bg-warning); --ds-tag-mint-bg: var(--ds-palette-mint-950); --ds-tag-mint-border: var(--ds-palette-mint-400); --ds-tag-mint-text: var(--ds-palette-mint-400); --ds-tag-mint-solid-bg: var(--ds-palette-mint-400); --ds-tag-orange-bg: var(--ds-palette-orange-950); --ds-tag-orange-border: var(--ds-palette-orange-500); --ds-tag-orange-text: var(--ds-palette-orange-500); --ds-tag-orange-solid-bg: var(--ds-palette-orange-500); --ds-tag-error-bg: var(--ds-badge-error-bg); --ds-tag-error-border: var(--ds-badge-error); --ds-tag-error-text: var(--ds-badge-error); --ds-tag-error-solid-bg: var(--ds-badge-error); --ds-tag-success-bg: var(--ds-badge-success-bg); --ds-tag-success-border: var(--ds-badge-success); --ds-tag-success-text: var(--ds-badge-success); --ds-tag-success-solid-bg: var(--ds-badge-success); --ds-tag-warning-bg: var(--ds-badge-warning-bg); --ds-tag-warning-border: var(--ds-badge-warning); --ds-tag-warning-text: var(--ds-badge-warning); --ds-tag-warning-solid-bg: var(--ds-badge-warning); --ds-tag-info-bg: var(--ds-badge-processing-bg); --ds-tag-info-border: var(--ds-color-bg-info); --ds-tag-info-text: var(--ds-color-bg-info); --ds-tag-info-solid-bg: var(--ds-color-bg-info); --ds-tag-add-border: var(--ds-color-border-default); --ds-tag-add-text: var(--ds-color-text-caption); --ds-tag-add-hover-border: var(--ds-color-bg-primary); --ds-tag-add-hover-text: var(--ds-color-bg-primary); --ds-color-bg-tooltip: var(--ds-color-bg-dark); --ds-color-text-tooltip: var(--ds-color-text-light); --ds-color-bg-tooltip-reverse: var(--ds-color-surface-default); --ds-color-text-tooltip-reverse: var(--ds-color-bg-dark); --ds-color-tooltip-shadow: 0 4px 20px var(--ds-color-shadow); --ds-tooltip-max-width: 240px; --ds-tooltip-z-index: 1080; --ds-tooltip-inner-min-height: 32px; --ds-tooltip-inner-padding-block: 6px; --ds-tooltip-inner-padding-inline: 8px; --ds-tooltip-font-size: 12px; --ds-tooltip-line-height: 20px; --ds-tooltip-radius: var(--ds-radius-sm, 8px); --ds-tooltip-arrow-size: 8px; --ds-tooltip-arrow-outset: -4px; --ds-tooltip-font-weight: 600; --ds-tooltip-arrow-inset-from-corner: var(--ds-spacing-02); --ds-calendar-primary: var(--ds-color-bg-primary); --ds-calendar-bg-default: var(--ds-color-surface-default); --ds-calendar-bg-hover: var(--ds-color-bg-primary-subtle); --ds-calendar-bg-range: var(--ds-color-bg-primary-subtle-hover); --ds-calendar-border-default: var(--ds-color-border-default); --ds-calendar-icon-default: var(--ds-color-icon-default); --ds-calendar-text-default: var(--ds-color-text-body); --ds-calendar-text-disable: var(--ds-color-text-disable); --ds-calendar-text-light: var(--ds-color-text-light); --ds-calendar-preset-active-bg: var(--ds-color-bg-primary-subtle); --ds-calendar-preset-active-text: var(--ds-color-bg-primary); --ds-calendar-day-size-mobile: 30px; --ds-calendar-day-size-tablet: 36px; --ds-calendar-grid-gap-y: 8px; --ds-calendar-grid-gap-x-mobile: 12px; --ds-calendar-grid-gap-x-tablet: 16px; --ds-calendar-day-size: var(--ds-calendar-day-size-tablet); --ds-calendar-grid-gap-x: var(--ds-calendar-grid-gap-x-tablet); --ds-calendar-day-font-size: 16px; --ds-calendar-day-line-height: 24px; --ds-calendar-title-font-size: 18px; --ds-calendar-title-line-height: 28px; --ds-calendar-nav-size: 28px; --ds-calendar-chip-width: 76px; --ds-calendar-chip-height: 30px; --ds-calendar-radius: var(--ds-radius-md, 12px); --ds-calendar-day-radius: 999px; --ds-calendar-panel-padding-x: 24px; --ds-calendar-panel-padding-y: 12px; --ds-calendar-panel-gap: 12px; --ds-calendar-month-grid-width: calc( 7 * var(--ds-calendar-day-size) + 6 * var(--ds-calendar-grid-gap-x) ); --ds-date-picker-panel-min-width: 402px; --ds-date-picker-panel-min-width-mobile: 330px; --ds-date-picker-panel-chips-min-width: 324px; --ds-date-picker-chips-nav-size: 20px; --ds-date-picker-chips-title-font-size: 16px; --ds-date-picker-chips-title-line-height: 24px; --ds-time-picker-panel-min-width: 234px; --ds-time-picker-panel-datetime-min-width: 326px; --ds-time-picker-panel-datetime-seconds-min-width: 380px; --ds-time-picker-panel-datetime-padding-y: 16px; --ds-time-picker-panel-datetime-padding-x: 12px; --ds-time-picker-column-padding-x: 36px; --ds-time-picker-column-width: 38px; --ds-time-picker-drum-row-gap: 4px; --ds-time-picker-drum-item-height: 25px; --ds-time-picker-drum-item-selected-height: 30px; --ds-time-picker-highlight-height: 30px; --ds-time-picker-month-column-min-width: 72px; --ds-time-picker-selected-text: var(--ds-color-icon-default); --ds-time-picker-opacity-near: 0.8; --ds-time-picker-opacity-mid: 0.6; --ds-time-picker-opacity-far: 0.4; --ds-range-picker-panel-min-width: 720px; --ds-checkbox-primary: var(--ds-color-bg-primary); --ds-checkbox-primary-hover: var(--ds-color-bg-primary-hover); --ds-checkbox-bg-default: var(--ds-color-surface-default); --ds-checkbox-bg-disable: var(--ds-color-surface-disable); --ds-checkbox-bg-hover-token: var(--ds-color-bg-primary-subtle-hover-light); --ds-checkbox-border: var(--ds-color-border-default); --ds-checkbox-border-disable: var(--ds-color-border-disable); --ds-checkbox-text-disable: var(--ds-color-text-disable); --ds-checkbox-text-light: var(--ds-color-text-light); --ds-checkbox-size-sm: var(--ds-radio-size-sm); --ds-checkbox-size-md: var(--ds-radio-size-md); --ds-checkbox-size-lg: var(--ds-radio-size-lg); --ds-checkbox-radius: var(--ds-radius-xs); --ds-checkbox-border-default: var(--ds-checkbox-border); --ds-checkbox-bg: var(--ds-checkbox-bg-default); --ds-checkbox-border-hover: var(--ds-checkbox-primary-hover); --ds-checkbox-bg-hover: var(--ds-checkbox-bg-hover-token); --ds-checkbox-bg-checked: var(--ds-checkbox-primary); --ds-checkbox-bg-checked-hover: var(--ds-checkbox-primary-hover); --ds-checkbox-icon-checked: var(--ds-control-icon-on-primary); --ds-checkbox-bg-disabled: var(--ds-control-bg-disabled); --ds-checkbox-border-disabled: var(--ds-control-border-disabled); --ds-checkbox-bg-checked-disabled: var(--ds-control-bg-checked-disabled); --ds-checkbox-icon-checked-disabled: var(--ds-color-icon-disable); --ds-checkbox-checkmark-width-sm: 8px; --ds-checkbox-checkmark-height-sm: 6px; --ds-checkbox-checkmark-width-md: 10px; --ds-checkbox-checkmark-height-md: 8px; --ds-checkbox-checkmark-width-lg: 12px; --ds-checkbox-checkmark-height-lg: 10px; --ds-checkbox-indeterminate-width-ratio: 0.5; --ds-checkbox-label-font-size-sm: var(--ds-radio-label-font-size-sm); --ds-checkbox-label-font-size-md: var(--ds-radio-label-font-size-md); --ds-checkbox-label-font-size-lg: var(--ds-radio-label-font-size-lg); --ds-checkbox-label-font-weight: var(--ds-radio-label-font-weight); --ds-checkbox-order-font-size-sm: 10px; --ds-checkbox-order-font-size-md: 12px; --ds-checkbox-order-font-size-lg: 14px; --ds-control-border-width: 1.6px; --ds-control-bg: var(--ds-color-surface-default); --ds-control-border: var(--ds-color-border-default); --ds-control-bg-primary: var(--ds-color-bg-primary); --ds-control-bg-primary-hover: var(--ds-color-bg-primary-hover); --ds-control-bg-hover-unchecked: var(--ds-color-bg-primary-subtle-hover-light); --ds-control-bg-disabled: var(--ds-color-bg-subtle); --ds-control-border-disabled: var(--ds-color-border-disable); --ds-control-icon-on-primary: var(--ds-color-icon-light); --ds-control-bg-checked-disabled: var(--ds-color-bg-subtle); --ds-control-label-gap: var(--ds-spacing-02); --ds-control-transition: var(--ds-transition-fast); --ds-input-number-bg-light: var(--ds-color-surface-default); --ds-input-number-bg-default: var(--ds-color-surface-subtle); --ds-input-number-border-default: var(--ds-color-border-default); --ds-input-number-border-hover: var(--ds-color-bg-primary); --ds-input-number-text-input: var(--ds-color-text-body); --ds-input-number-text-disable: var(--ds-color-text-disable); --ds-input-number-focused: var(--ds-color-bg-primary); --ds-input-number-shadow-focus: 0 0 0 2px var(--ds-color-bg-primary); --ds-input-number-divider: var(--ds-color-border-default); --ds-input-number-btn-hover-bg: var(--ds-input-number-bg-default); --ds-input-number-btn-hover-bg-filled: var(--ds-color-surface-disable); --ds-input-number-transition: var(--ds-control-transition); --ds-input-number-segment-gap: 1px; --ds-input-number-height-sm: var(--ds-spacing-06); --ds-input-number-height-md: var(--ds-spacing-07); --ds-input-number-height-lg: var(--ds-spacing-08); --ds-input-number-radius-sm: var(--ds-radius-xs); --ds-input-number-radius-md: 6px; --ds-input-number-radius-lg: var(--ds-radius-sm); --ds-input-number-icon-size-sm: 12px; --ds-input-number-icon-size-md: 14px; --ds-input-number-icon-size-lg: 16px; --ds-input-number-font-size-sm: 12px; --ds-input-number-line-height-sm: 16px; --ds-input-number-font-size-md: 14px; --ds-input-number-line-height-md: 20px; --ds-input-number-font-size-lg: 14px; --ds-input-number-line-height-lg: 20px; --ds-input-number-btn-padding-x-sm: var(--ds-spacing-02); --ds-input-number-btn-padding-x-md: var(--ds-spacing-03); --ds-input-number-btn-padding-inline-end-md: 11px; --ds-input-number-btn-padding-x-lg: var(--ds-spacing-03); --ds-input-number-input-padding-x: var(--ds-spacing-03); --ds-input-number-input-padding-y-sm: var(--ds-spacing-01); --ds-input-number-input-padding-y-md: var(--ds-spacing-01); --ds-input-number-input-padding-y-lg: 7px; --ds-input-height-sm: 2rem; --ds-input-height-md: 2.5rem; --ds-input-height-lg: 3rem; --ds-input-border-width: calc(1rem / 16); --ds-input-radius-sm: var(--ds-radius-sm); --ds-input-radius-md: var(--ds-radius-sm); --ds-input-radius-lg: var(--ds-radius-sm); --ds-input-radius: var(--ds-input-radius-md); --ds-textarea-radius: var(--ds-radius-sm); --ds-input-border-default: var(--ds-color-border-default); --ds-input-border-hover: var(--ds-color-bg-primary); --ds-input-border-focus: var(--ds-color-bg-primary); --ds-input-border-error: var(--ds-color-text-error); --ds-input-border-success: var(--ds-color-text-success); --ds-input-border-disabled: var(--ds-color-border-disable); --ds-input-border: var(--ds-input-border-default); --ds-input-bg: var(--ds-input-bg-default); --ds-input-bg-default: var(--ds-color-surface-default); --ds-input-bg-disabled: var(--ds-textarea-bg-disable); --ds-input-bg-readonly: var(--ds-color-surface-default); --ds-input-shadow-none: none; --ds-input-shadow-focus: 0 0 0 3px var(--ds-color-bg-primary-subtle); --ds-input-font-size-sm: 0.875rem; --ds-input-font-size-md: 0.875rem; --ds-input-font-size-lg: 0.875rem; --ds-input-line-height-sm: 1.25rem; --ds-input-line-height-md: 1.25rem; --ds-input-line-height-lg: 1.25rem; --ds-input-font-weight: 400; --ds-input-padding-y-sm: var(--ds-spacing-01); --ds-input-padding-x-sm: var(--ds-spacing-03); --ds-input-padding-y-md: var(--ds-spacing-02); --ds-input-padding-x-md: var(--ds-spacing-03); --ds-input-padding-y-lg: var(--ds-spacing-03); --ds-input-padding-x-lg: var(--ds-spacing-03); --ds-input-affix-gap: var(--ds-spacing-01); --ds-input-label-font-size: 0.75rem; --ds-input-label-font-weight: 500; --ds-input-label-line-height: 1rem; --ds-input-label-color: var(--ds-color-text-title); --ds-input-label-color-disabled: var(--ds-color-text-disable); --ds-input-label-required: var(--ds-color-text-error); --ds-input-label-description-font-weight: 400; --ds-input-label-description-color: var(--ds-color-text-caption); --ds-input-label-description: var(--ds-input-label-description-color); --ds-input-subscript-font-size: 0.75rem; --ds-input-subscript-font-weight: 400; --ds-input-subscript-line-height: 1rem; --ds-input-hint-color: var(--ds-color-text-caption); --ds-input-message-success: var(--ds-color-text-success); --ds-input-message-error: var(--ds-color-text-error); --ds-input-message-font-size: 0.875rem; --ds-input-message-line-height: 1.25rem; --ds-input-text: var(--ds-color-text-body); --ds-input-placeholder: var(--ds-color-text-hint); --ds-input-text-disabled: var(--ds-color-text-disable); --ds-input-icon-default: var(--ds-color-icon-lighter); --ds-input-icon-active: var(--ds-color-icon-default); --ds-input-icon-disabled: var(--ds-color-icon-disable); --ds-input-status-icon-success: var(--ds-color-text-success); --ds-input-status-icon-error: var(--ds-color-text-error); --ds-input-addon-gap: var(--ds-spacing-02); --ds-input-divider-width: 1px; --ds-input-divider-color: var(--ds-input-border-default); --ds-input-addon-text: var(--ds-color-text-subtitle); --ds-textarea-min-height-md: 5.5rem; --ds-textarea-min-height-lg: 7rem; --ds-textarea-padding-block: var(--ds-spacing-03); --ds-textarea-padding-inline: var(--ds-spacing-03); --ds-textarea-padding-bottom-reserve: 1.25rem; --ds-textarea-font-size-md: 0.875rem; --ds-textarea-font-size-lg: 1rem; --ds-textarea-line-height: 1.25rem; --ds-textarea-counter-font-size: 0.75rem; --ds-textarea-counter-color: var(--ds-color-text-hint); --ds-textarea-counter-color-disabled: var(--ds-color-text-disable); --ds-input-transition: var(--ds-control-transition); --ds-input-loading-bg: var(--ds-color-surface-disable); --ds-input-loading-border: var(--ds-input-border-disabled); --ds-input-loading-plate-radius: var(--ds-radius-pill); --ds-input-loading-label-width: 5rem; --ds-input-loading-label-height: 0.875rem; --ds-input-loading-short-width: 2.5rem; --ds-input-loading-long-width: 8rem; --ds-input-loading-plate-height: 0.75rem; --ds-compound-segment-gap: var(--ds-spacing-01); --ds-compound-addon-padding-inline-sm: var(--ds-spacing-02); --ds-compound-addon-padding-inline-md: var(--ds-spacing-02); --ds-compound-addon-padding-inline-lg: var(--ds-spacing-02); --ds-compound-addon-before-padding-block: 0; --ds-compound-addon-before-padding-inline-start: 0; --ds-compound-addon-before-padding-inline-end: 0; --ds-compound-addon-after-padding-block: 0; --ds-compound-addon-after-padding-inline-start: 0; --ds-compound-addon-after-padding-inline-end: 0; --ds-compound-icon-size-sm: 1rem; --ds-compound-icon-size-md: 1.25rem; --ds-compound-icon-size-lg: 1.25rem; --ds-radio-primary: var(--ds-color-bg-primary); --ds-radio-primary-hover: var(--ds-color-bg-primary-hover); --ds-radio-bg-default: var(--ds-color-surface-default); --ds-radio-bg-disable: var(--ds-color-surface-disable); --ds-radio-bg-hover-token: var(--ds-color-bg-primary-subtle-hover-light); --ds-radio-border-default-token: var(--ds-color-border-default); --ds-radio-border-disable-token: var(--ds-color-border-disable); --ds-radio-size-sm: 16px; --ds-radio-size-md: 20px; --ds-radio-size-lg: 24px; --ds-radio-border-default: var(--ds-radio-border-default-token); --ds-radio-bg: var(--ds-radio-bg-default); --ds-radio-bg-disabled: var(--ds-radio-bg-disable); --ds-radio-border-hover: var(--ds-radio-primary-hover); --ds-radio-bg-hover: var(--ds-radio-bg-hover-token); --ds-radio-border-checked: var(--ds-radio-primary); --ds-radio-dot-checked: var(--ds-radio-primary); --ds-radio-border-checked-hover: var(--ds-radio-primary-hover); --ds-radio-dot-checked-hover: var(--ds-radio-primary-hover); --ds-radio-ring-checked: var(--ds-control-bg); --ds-radio-border-disabled: var(--ds-radio-border-disable-token); --ds-radio-dot-disabled: var(--ds-control-bg-disabled); --ds-radio-border-checked-disabled: var(--ds-control-border-disabled); --ds-radio-dot-checked-disabled: var(--ds-control-border-disabled); --ds-radio-dot-size-sm: 8px; --ds-radio-dot-size-md: 12px; --ds-radio-dot-size-lg: 16px; --ds-radio-label-font-size-sm: 12px; --ds-radio-label-font-size-md: 14px; --ds-radio-label-font-size-lg: 16px; --ds-radio-label-font-weight: 500; --ds-radio-group-gap: var(--ds-spacing-04); --ds-radio-button-group-gap: 0; --ds-radio-button-padding-inline: var(--ds-spacing-03); --ds-radio-button-height-sm: 24px; --ds-radio-button-height-md: 32px; --ds-radio-button-height-lg: 40px; --ds-search-bg-default: var(--ds-color-surface-default); --ds-search-bg-disable: var(--ds-color-surface-disable); --ds-search-border-default: var(--ds-color-border-default); --ds-search-border-disable: var(--ds-color-border-disable); --ds-search-icon-default: var(--ds-color-icon-default); --ds-search-text-disable: var(--ds-color-text-disable); --ds-search-text-hint: var(--ds-color-text-hint); --ds-search-text-input: var(--ds-color-text-body); --ds-search-typing: var(--ds-color-bg-primary); --ds-select-panel-shadow: 0 4px 10px var(--ds-color-shadow); --ds-select-panel-min-width: 17.5rem; --ds-select-panel-max-height: 16rem; --ds-select-panel-padding: var(--ds-spacing-02); --ds-select-panel-border-width: var(--ds-input-border-width); --ds-select-panel-border-color: var(--ds-input-border-default); --ds-select-panel-radius: var(--ds-radius-sm); --ds-select-panel-overlay-offset: var(--ds-spacing-02); --ds-select-toolbar-gap-bottom: var(--ds-spacing-01); --ds-select-search-padding-block: var(--ds-spacing-02); --ds-select-search-padding-inline-start: var(--ds-spacing-03); --ds-select-search-padding-inline-end: var(--ds-spacing-04); --ds-select-search-gap: var(--ds-spacing-01); --ds-select-search-radius: var(--ds-radius-sm); --ds-select-option-list-gap: var(--ds-spacing-01); --ds-select-option-gap: var(--ds-spacing-02); --ds-select-option-padding-block: var(--ds-spacing-02); --ds-select-option-padding-inline: var(--ds-spacing-02); --ds-select-option-checkbox-size: 1.5rem; --ds-select-option-tick-size: 1.5rem; --ds-select-option-label-font-size: var(--ds-input-font-size-md); --ds-select-option-label-line-height: var(--ds-input-line-height-md); --ds-select-option-radius: var(--ds-radius-xs); --ds-select-option-bg-hover: var(--ds-color-bg-primary-subtle); --ds-select-option-checkbox-border: var(--ds-input-border-default); --ds-select-option-checkbox-border-active: var(--ds-color-bg-primary); --ds-select-option-checkbox-bg-selected: var(--ds-color-bg-primary); --ds-select-option-tick-color: var(--ds-color-bg-primary); --ds-select-chip-height: var(--ds-tag-height-sm); --ds-select-chip-bg: var(--ds-color-bg-overlay-black); --ds-select-chip-radius: var(--ds-radius-xs); --ds-select-chip-gap: var(--ds-tag-gap); --ds-select-chip-font-size: var(--ds-tag-font-size); --ds-select-chip-line-height: var(--ds-tag-line-height); --ds-select-chip-font-weight: 500; --ds-select-chip-text: var(--ds-badge-text-default); --ds-select-chip-padding-inline-start: var(--ds-spacing-02); --ds-select-chip-padding-inline-end: var(--ds-spacing-01); --ds-select-chip-label-padding-inline: 2px; --ds-select-chip-remove-size: 1rem; --ds-slider-rail-bg: var(--ds-color-surface-subtle); --ds-slider-track-bg: var(--ds-color-bg-primary); --ds-slider-handle-bg: var(--ds-color-surface-default); --ds-slider-handle-bg-disabled: var(--ds-color-border-disable); --ds-slider-handle-shadow: 0 1px 4px var(--ds-color-shadow); --ds-slider-handle-overlay-hover: var(--ds-color-bg-primary); --ds-slider-handle-overlay-focus: var(--ds-color-bg-primary); --ds-slider-rail-height: 4px; --ds-slider-handle-size: 20px; --ds-slider-handle-overlay-hover-size: 36px; --ds-slider-handle-overlay-focus-size: 40px; --ds-slider-radius: var(--ds-radius-full, 100px); --ds-slider-transition: var(--ds-control-transition); --ds-slider-dot-size: 8px; --ds-slider-dot-border: var(--ds-color-border-default); --ds-slider-dot-bg-active: var(--ds-color-bg-primary); --ds-slider-mark-color: var(--ds-color-text-caption); --ds-slider-mark-color-active: var(--ds-color-text-body); --ds-switch-primary: var(--ds-color-bg-primary); --ds-switch-primary-hover: var(--ds-color-bg-primary-hover); --ds-switch-bg-default: var(--ds-color-surface-default); --ds-switch-bg-disable: var(--ds-color-surface-disable); --ds-switch-bg-hover-token: var(--ds-color-surface-subtle); --ds-switch-text-light: var(--ds-color-text-light); --ds-switch-track-bg: var(--ds-control-border); --ds-switch-track-bg-checked: var(--ds-switch-primary); --ds-switch-track-bg-hover-unchecked: var(--ds-switch-bg-hover-token); --ds-switch-track-bg-hover-checked: var(--ds-switch-primary-hover); --ds-switch-track-bg-disabled: var(--ds-switch-bg-disable); --ds-switch-thumb-bg: var(--ds-control-bg); --ds-switch-width-sm: 26px; --ds-switch-width-md: 32px; --ds-switch-width-lg: 36px; --ds-switch-height-sm: 16px; --ds-switch-height-md: 20px; --ds-switch-height-lg: 24px; --ds-switch-padding: 2px; --ds-switch-thumb-offset-sm: calc(var(--ds-switch-height-sm) - var(--ds-switch-padding) * 2); --ds-switch-thumb-offset-md: calc(var(--ds-switch-height-md) - var(--ds-switch-padding) * 2); --ds-switch-thumb-offset-lg: calc(var(--ds-switch-height-lg) - var(--ds-switch-padding) * 2); --ds-switch-inner-font-size: 12px; --ds-switch-label-gap: var(--ds-control-label-gap); --ds-switch-label-font-size-sm: var(--ds-checkbox-label-font-size-sm); --ds-switch-label-font-size-md: var(--ds-checkbox-label-font-size-md); --ds-switch-label-font-size-lg: var(--ds-checkbox-label-font-size-lg); --ds-switch-label-font-weight: var(--ds-checkbox-label-font-weight); --ds-textarea-error: var(--ds-color-text-error); --ds-textarea-bg-default: var(--ds-color-surface-default); --ds-textarea-bg-disable: var(--ds-color-surface-disable); --ds-textarea-border-default: var(--ds-color-border-default); --ds-textarea-border-disable: var(--ds-color-border-disable); --ds-textarea-text-disable: var(--ds-color-text-disable); --ds-textarea-text-hint: var(--ds-color-text-hint); --ds-textarea-text-input: var(--ds-color-text-body); --ds-textarea-text-label: var(--ds-color-text-title); --ds-textarea-typing: var(--ds-color-bg-primary); --ds-upload-bg: var(--ds-color-surface-default); --ds-upload-bg-primary: var(--ds-color-bg-primary-subtle); --ds-upload-border: var(--ds-color-border-default); --ds-upload-border-primary: var(--ds-color-bg-primary-subtle-hover-light); --ds-upload-bg-hover: var(--ds-color-bg-overlay-black); --ds-upload-radius-drag: var(--ds-radius-md); --ds-upload-radius-card: var(--ds-radius-sm); --ds-upload-progress-height: 6px; --ds-upload-card-width: 420px; --ds-upload-text-default: var(--ds-color-text-body); --ds-upload-text-subtitle: var(--ds-color-text-subtitle); --ds-upload-text-title: var(--ds-color-text-title); --ds-upload-primary: var(--ds-color-bg-primary); --ds-upload-progress-bg: var(--ds-color-bg-overlay-black); --ds-alert-radius: 8px; --ds-alert-padding-compact: 12px; --ds-alert-padding-titled: 16px; --ds-alert-gap: 8px; --ds-alert-gap-inner: 4px; --ds-alert-icon-size: 24px; --ds-alert-close-size: 20px; --ds-alert-title-size: 16px; --ds-alert-title-line-height: 24px; --ds-alert-description-size: 14px; --ds-alert-description-line-height: 20px; --ds-alert-text-title: var(--ds-color-text-title); --ds-alert-text-default: var(--ds-color-text-body); --ds-alert-action-gap: 8px; --ds-alert-success-bg: var(--ds-color-bg-success-subtle); --ds-alert-success-border: var(--ds-color-bg-success); --ds-alert-error-bg: var(--ds-color-bg-error-subtle); --ds-alert-error-border: var(--ds-color-bg-error); --ds-alert-warning-bg: var(--ds-color-bg-warning-subtle); --ds-alert-warning-border: var(--ds-color-bg-warning); --ds-alert-info-bg: var(--ds-color-bg-info-subtle); --ds-alert-info-border: var(--ds-color-bg-info); --ds-modal-width-confirm: 335px; --ds-modal-width-default: 335px; --ds-modal-width-normal: 520px; --ds-modal-radius: 16px; --ds-modal-shadow: 0 0 6px var(--ds-color-bg-primary); --ds-modal-padding-block: 24px; --ds-modal-padding-inline: 32px; --ds-modal-padding-inline-text: 20px; --ds-modal-gap: 20px; --ds-modal-text-gap: 4px; --ds-modal-title-size: 18px; --ds-modal-title-line-height: 28px; --ds-modal-caption-size: 14px; --ds-modal-caption-line-height: 20px; --ds-modal-icon-size: 80px; --ds-modal-icon-inner-size: 40px; --ds-modal-footer-gap: 15px; --ds-modal-single-btn-width: 128px; --ds-modal-z-index: 1100; --ds-modal-mask-bg: var(--ds-palette-overlay-black-50); --ds-modal-bg: var(--ds-popup-bg-light, var(--ds-color-surface-default)); --ds-modal-title-color: var(--ds-popup-text-title, var(--ds-color-text-title)); --ds-modal-caption-color: var(--ds-popup-text-caption, var(--ds-color-text-caption)); --ds-notification-width: 384px; --ds-notification-radius: 12px; --ds-notification-padding: 24px; --ds-notification-gap: 12px; --ds-notification-content-gap: 8px; --ds-notification-icon-size: 24px; --ds-notification-close-size: 20px; --ds-notification-title-size: 16px; --ds-notification-title-line-height: 24px; --ds-notification-description-size: 14px; --ds-notification-description-line-height: 20px; --ds-notification-bg: var(--ds-color-surface-default); --ds-notification-text-title: var(--ds-color-text-title); --ds-notification-text-default: var(--ds-color-icon-default); --ds-notification-shadow: 0 4px 10px var(--ds-color-shadow); --ds-notification-z-index: 1010; --ds-notification-stack-gap: 16px; --ds-notification-offset: 24px; --ds-notification-cta-gap: 8px; --ds-notification-btn-primary-bg: var(--ds-color-bg-primary); --ds-notification-btn-primary-text: var(--ds-color-text-light); --ds-notification-btn-link-text: var(--ds-color-bg-primary); --ds-rate-star-color: #ffc014; --ds-rate-star-bg: #e5e7eb; --ds-rate-star-size-sm: 15px; --ds-rate-star-size: 20px; --ds-rate-star-size-lg: 25px; --ds-rate-gap: 8px; --ds-rate-hover-scale: 1.1; --ds-skeleton-surface: var(--ds-color-surface-subtle); --ds-skeleton-radius-bar: 2px; --ds-skeleton-radius-block: 4px; --ds-skeleton-radius-round: 100px; --ds-skeleton-title-height: 16px; --ds-skeleton-title-width: 248px; --ds-skeleton-paragraph-height: 16px; --ds-skeleton-paragraph-gap: 16px; --ds-skeleton-content-gap: 24px; --ds-skeleton-avatar-gap: 16px; --ds-skeleton-basic-width: 560px; --ds-skeleton-avatar-sm: 24px; --ds-skeleton-avatar-md: 32px; --ds-skeleton-avatar-lg: 40px; --ds-skeleton-input-width: 280px; --ds-skeleton-input-height-sm: 24px; --ds-skeleton-input-height-md: 32px; --ds-skeleton-input-height-lg: 40px; --ds-skeleton-button-width-sm: 56px; --ds-skeleton-button-height-sm: 24px; --ds-skeleton-button-width-md: 80px; --ds-skeleton-button-height-md: 32px; --ds-skeleton-button-width-lg: 100px; --ds-skeleton-button-height-lg: 40px; --ds-skeleton-image-size: 96px; --ds-skeleton-image-gap: 16px; --ds-skeleton-image-icon-color: var(--ds-color-icon-disable); --ds-skeleton-active-duration: 1.4s; --ds-spin-track: var(--ds-color-bg-overlay-black); --ds-spin-primary: var(--ds-color-bg-primary); --ds-spin-bg: var(--ds-color-bg-overlay-black); --ds-spin-text: var(--ds-color-text-title); --ds-spin-text-sub: var(--ds-color-icon-default); --ds-spin-size-sm: 14px; --ds-spin-size-md: 20px; --ds-spin-size-lg: 24px; --ds-spin-radius-xs: 6px; --ds-spin-radius-s: 8px; --ds-spin-padding: 12px; --ds-spin-gap-text: 4px; --ds-spin-gap-shade: 8px; --ds-spin-duration: 0.8s; --ds-spin-nested-opacity: 0.5; --ds-toast-radius: 8px; --ds-toast-padding: 8px 12px; --ds-toast-gap: 8px; --ds-toast-icon-size: 16px; --ds-toast-font-size: 14px; --ds-toast-line-height: 20px; --ds-toast-bg: var(--ds-color-surface-default); --ds-toast-text: var(--ds-color-text-body); --ds-toast-shadow: 0 4px 10px var(--ds-color-shadow); --ds-toast-z-index: 1010; --ds-toast-stack-gap: 8px; --ds-toast-offset: 24px; --ds-btn-compact-divider-width: 1px; --ds-btn-compact-divider-filled: var(--ds-color-bg-primary-subtle-pressed); --ds-btn-compact-divider-filled-danger: var(--ds-color-text-on-primary); --ds-btn-compact-divider-text: var(--ds-color-border-subtle); --ds-btn-compact-overlap-outlined: 1.5px; --ds-btn-compact-overlap-outlined-xl: 2px; --ds-btn-compact-radius-sm: 6px; --ds-btn-compact-radius-md: 8px; --ds-btn-compact-radius-xl: 12px; --ds-button-bg-default: var(--ds-color-bg-dark); --ds-button-bg-default-hover: var(--ds-palette-neutral-300); --ds-button-bg-default-pressed: var(--ds-palette-neutral-50); --ds-button-bg-primary: var(--ds-color-bg-primary); --ds-button-bg-primary-hover: var(--ds-color-bg-primary-hover); --ds-button-bg-primary-pressed: var(--ds-color-bg-primary-pressed); --ds-button-bg-danger: var(--ds-color-bg-error); --ds-button-bg-danger-hover: var(--ds-color-bg-error-hover); --ds-button-bg-danger-pressed: var(--ds-color-bg-error-pressed); --ds-button-bg-soft-default: var(--ds-color-surface-subtle); --ds-button-bg-soft-default-hover: var(--ds-palette-neutral-800); --ds-button-bg-soft-default-pressed: var(--ds-palette-neutral-700); --ds-button-bg-soft-primary: var(--ds-color-bg-primary-subtle-hover-light); --ds-button-bg-soft-primary-hover: var(--ds-palette-dark-blue-875); --ds-button-bg-soft-primary-pressed: var(--ds-palette-dark-blue-825); --ds-button-bg-soft-danger: var(--ds-color-bg-error-subtle); --ds-button-bg-soft-danger-hover: var(--ds-palette-red-900); --ds-button-bg-soft-danger-pressed: var(--ds-palette-red-800); --ds-button-bg-surface: var(--ds-color-surface-default); --ds-button-bg-surface-hover: var(--ds-color-bg-primary-subtle); --ds-button-bg-surface-active: var(--ds-color-bg-primary-subtle-hover); --ds-button-bg-disabled: var(--ds-color-surface-disable); --ds-button-border-default: var(--ds-color-border-light); --ds-button-border-disabled: var(--ds-color-border-disable); --ds-button-border-primary: var(--ds-color-bg-primary); --ds-button-border-primary-hover: var(--ds-color-bg-primary-hover); --ds-button-border-primary-pressed: var(--ds-color-bg-primary-pressed); --ds-button-border-danger: var(--ds-color-text-error); --ds-button-border-danger-hover: var(--ds-color-bg-error-hover); --ds-button-border-danger-pressed: var(--ds-color-bg-error-pressed); --ds-button-border-neutral: var(--ds-color-border-default); --ds-button-text-on-solid: var(--ds-color-text-light); --ds-button-text-soft: var(--ds-color-icon-default); --ds-button-text-primary: var(--ds-color-bg-primary); --ds-button-text-primary-hover: var(--ds-color-bg-primary-hover); --ds-button-text-primary-pressed: var(--ds-color-bg-primary-pressed); --ds-button-text-danger: var(--ds-color-text-error); --ds-button-text-danger-hover: var(--ds-color-bg-error-hover); --ds-button-text-danger-pressed: var(--ds-color-bg-error-pressed); --ds-button-text-disabled: var(--ds-color-text-disable); --ds-button-focus-ring-default: var(--ds-button-bg-default); --ds-button-focus-ring-primary: var(--ds-button-bg-primary); --ds-button-focus-ring-danger: var(--ds-button-bg-danger); --ds-button-focus-ring-outlined: var(--ds-button-bg-primary); --ds-z-float: 100; --ds-float-button-inset: var(--ds-spacing-lg); --ds-float-button-inset-inline-end: var(--ds-float-button-inset); --ds-float-button-inset-block-end: var(--ds-float-button-inset); --ds-shadow-float: 0 6px 16px var(--ds-color-text); --ds-shadow-float-primary: 0 6px 16px var(--ds-color-primary); --ds-layout-header-height: 64px; --ds-layout-trigger-height: 48px; --ds-layout-zero-trigger-width: 36px; --ds-layout-zero-trigger-height: 42px; --ds-avatar-bg-default: var(--ds-palette-neutral-800); --ds-avatar-border-default: var(--ds-color-border-light); --ds-avatar-text-default: var(--ds-palette-neutral-500); --ds-avatar-icon-default: var(--ds-palette-neutral-500); --ds-avatar-text-light: var(--ds-color-text-light); --ds-breadcrumb-active: var(--ds-color-text-body); --ds-breadcrumb-primary: var(--ds-color-bg-primary); --ds-breadcrumb-unactive: var(--ds-color-text-caption); --ds-dropdown-menu-primary-active: var(--ds-color-bg-primary); --ds-dropdown-menu-secondary-active: var(--ds-color-surface-subtle); --ds-dropdown-menu-bg-default: var(--ds-color-surface-default); --ds-dropdown-menu-icon-default: var(--ds-color-icon-default); --ds-dropdown-menu-text-default: var(--ds-color-text-body); --ds-dropdown-menu-text-disable: var(--ds-color-text-disable); --ds-dropdown-menu-text-light: var(--ds-color-text-light); --ds-pagination-primary: var(--ds-color-bg-primary); --ds-pagination-bg-unactive: var(--ds-color-surface-default); --ds-pagination-border-unactive: var(--ds-color-border-default); --ds-pagination-text-light: var(--ds-color-text-light); --ds-pagination-text-unactive: var(--ds-color-text-caption); --ds-sidebar-width: 280px; --ds-sidebar-collapsed-width: 80px; --ds-sidebar-padding: var(--ds-spacing-04, 16px); --ds-sidebar-gap: var(--ds-spacing-06, 24px); --ds-sidebar-section-gap: var(--ds-spacing-04, 16px); --ds-sidebar-item-gap: var(--ds-spacing-02, 8px); --ds-sidebar-item-height: 40px; --ds-sidebar-item-radius: var(--ds-radius-sm, 8px); --ds-sidebar-sub-padding-inline: 44px; --ds-sidebar-bg: var(--ds-color-surface-default); --ds-sidebar-border: var(--ds-color-border-subtle); --ds-sidebar-bg-hover: var(--ds-color-surface-subtle); --ds-sidebar-primary: var(--ds-color-bg-primary); --ds-sidebar-bg-active: var(--ds-color-bg-primary); --ds-sidebar-text-default: var(--ds-color-text-body); --ds-sidebar-text-light: var(--ds-color-text-light); --ds-sidebar-title: var(--ds-color-text-title); --ds-sidebar-badge-bg: var(--ds-color-bg-error); --ds-sidebar-badge-text: var(--ds-color-text-light); --ds-sidebar-subscription-bg: var(--ds-sidebar-primary); --ds-sidebar-subscription-text: var(--ds-sidebar-text-light); --ds-sidebar-account-bg-hover: var(--ds-color-surface-subtle); --ds-sidebar-account-description: var(--ds-color-text-caption); --ds-tab-primary: var(--ds-color-bg-primary); --ds-tab-bg-hover: var(--ds-color-surface-subtle); --ds-tab-border: var(--ds-color-border-subtle); --ds-tab-text-light: var(--ds-color-text-light); --ds-tab-text-unactive: var(--ds-color-text-caption); --ds-tabs-height-sm: 36px; --ds-tabs-height-md: 40px; --ds-tabs-height-lg: 48px; --ds-tabs-item-min-width: 72px; --ds-tabs-item-gap: 8px; --ds-tabs-item-radius: 8px; --ds-tabs-font-size-sm: 14px; --ds-tabs-line-height-sm: 20px; --ds-tabs-padding-block-sm: 4px; --ds-tabs-padding-inline-sm: 16px; --ds-tabs-font-size-md: 14px; --ds-tabs-line-height-md: 20px; --ds-tabs-padding-block-md: 8px; --ds-tabs-padding-inline-md: 20px; --ds-tabs-font-size-lg: 16px; --ds-tabs-line-height-lg: 24px; --ds-tabs-padding-block-lg: 12px; --ds-tabs-padding-inline-lg: 20px; --ds-tabs-font-weight: 400; --ds-tabs-font-weight-active: 600; --ds-tabs-text-color: var(--ds-tab-text-unactive); --ds-tabs-hover-text-color: var(--ds-color-text-body); --ds-tabs-active-text-color: var(--ds-tab-primary); --ds-tabs-disabled-text-color: var(--ds-color-text-disabled); --ds-tabs-separator-width: 1px; --ds-tabs-separator-height: 20px; --ds-tabs-separator-color: var(--ds-color-border-subtle); --ds-tabs-separator-gap: 8px; --ds-tabs-baseline-height: 1px; --ds-tabs-baseline-color: var(--ds-color-border-subtle); --ds-tabs-indicator-height: 2px; --ds-tabs-indicator-radius: 0; --ds-tabs-indicator-color: var(--ds-tab-primary); --ds-tabs-pill-radius: var(--ds-tabs-item-radius); --ds-tabs-pill-active-bg: var(--ds-tab-primary); --ds-tabs-pill-active-color: var(--ds-color-text-light); --ds-tabs-pill-hover-bg: var(--ds-tab-bg-hover); --ds-tabs-focus-ring-width: 2px; --ds-tabs-focus-ring-color: var(--ds-tab-primary); --ds-tabs-focus-ring-offset: 2px; --ds-tabs-panel-padding-top: var(--ds-spacing-04); --ds-tabs-transition-duration: 250ms; --ds-tabs-transition-easing: var(--ds-motion-ease-standard, cubic-bezier(0.2, 0, 0, 1)); } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-card-shadow-sm: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 6%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-card-shadow-md: 0 4px 20px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-popover-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-color-tooltip-shadow: 0 4px 20px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-input-number-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ds-color-bg-primary) 25%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-select-panel-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-slider-handle-shadow: 0 1px 4px color-mix(in srgb, var(--ds-color-shadow) 20%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-slider-handle-overlay-hover: color-mix(in srgb, var(--ds-color-bg-primary) 20%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-slider-handle-overlay-focus: color-mix(in srgb, var(--ds-color-bg-primary) 40%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-modal-shadow: 0 0 6px color-mix(in srgb, var(--ds-color-bg-primary) 10%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-notification-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-toast-shadow: 0 4px 10px color-mix(in srgb, var(--ds-color-shadow) 15%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-btn-compact-divider-filled-danger: color-mix(in srgb, var(--ds-color-text-on-primary) 35%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-button-focus-ring-default: color-mix(in srgb, var(--ds-button-bg-default) 28%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-button-focus-ring-primary: color-mix(in srgb, var(--ds-button-bg-primary) 28%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-button-focus-ring-danger: color-mix(in srgb, var(--ds-button-bg-danger) 28%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-button-focus-ring-outlined: color-mix(in srgb, var(--ds-button-bg-primary) 20%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-shadow-float: 0 6px 16px color-mix(in srgb, var(--ds-color-text) 14%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-shadow-float-primary: 0 6px 16px color-mix(in srgb, var(--ds-color-primary) 32%, transparent); } } @supports (color: color-mix(in lab, red, red)) { html[data-ds-theme=dark] { --ds-sidebar-bg-active: color-mix(in srgb, var(--ds-color-bg-primary) 10%, transparent); } } .ds-text-primary { color: var(--ds-color-text-primary); } .ds-text-primary-hover { color: var(--ds-color-text-primary-hover); } .ds-text-secondary { color: var(--ds-color-text-secondary); } .ds-text-secondary-hover { color: var(--ds-color-text-secondary-hover); } .ds-text-body { color: var(--ds-color-text-body); } .ds-text-caption { color: var(--ds-color-text-caption); } .ds-text-disable { color: var(--ds-color-text-disable); } .ds-text-hint { color: var(--ds-color-text-hint); } .ds-text-subtitle { color: var(--ds-color-text-subtitle); } .ds-text-light { color: var(--ds-color-text-light); } .ds-text-title { color: var(--ds-color-text-title); } .ds-text-error { color: var(--ds-color-text-error); } .ds-text-error-hover { color: var(--ds-color-text-error-hover); } .ds-text-warning { color: var(--ds-color-text-warning); } .ds-text-warning-hover { color: var(--ds-color-text-warning-hover); } .ds-text-success { color: var(--ds-color-text-success); } .ds-text-success-hover { color: var(--ds-color-text-success-hover); } .ds-text-info { color: var(--ds-color-text-info); } .ds-text-info-hover { color: var(--ds-color-text-info-hover); } .ds-bg-primary { background-color: var(--ds-color-bg-primary); } .ds-bg-primary-hover { background-color: var(--ds-color-bg-primary-hover); } .ds-bg-primary-pressed { background-color: var(--ds-color-bg-primary-pressed); } .ds-bg-primary-subtle { background-color: var(--ds-color-bg-primary-subtle); } .ds-bg-primary-subtle-hover { background-color: var(--ds-color-bg-primary-subtle-hover); } .ds-bg-primary-subtle-pressed { background-color: var(--ds-color-bg-primary-subtle-pressed); } .ds-bg-secondary { background-color: var(--ds-color-bg-secondary); } .ds-bg-secondary-hover { background-color: var(--ds-color-bg-secondary-hover); } .ds-bg-secondary-pressed { background-color: var(--ds-color-bg-secondary-pressed); } .ds-bg-secondary-subtle { background-color: var(--ds-color-bg-secondary-subtle); } .ds-bg-secondary-subtle-hover { background-color: var(--ds-color-bg-secondary-subtle-hover); } .ds-bg-secondary-subtle-pressed { background-color: var(--ds-color-bg-secondary-subtle-pressed); } .ds-bg-dark { background-color: var(--ds-color-bg-dark); } .ds-bg-light { background-color: var(--ds-color-bg-light); } .ds-bg-overlay-black { background-color: var(--ds-color-bg-overlay-black); } .ds-bg-overlay-white { background-color: var(--ds-color-bg-overlay-white); } .ds-bg-overlay-white-50 { background-color: var(--ds-color-bg-overlay-white-50); } .ds-bg-subtle { background-color: var(--ds-color-bg-subtle); } .ds-bg-error { background-color: var(--ds-color-bg-error); } .ds-bg-error-hover { background-color: var(--ds-color-bg-error-hover); } .ds-bg-error-pressed { background-color: var(--ds-color-bg-error-pressed); } .ds-bg-error-subtle { background-color: var(--ds-color-bg-error-subtle); } .ds-bg-error-subtle-hover { background-color: var(--ds-color-bg-error-subtle-hover); } .ds-bg-error-subtle-pressed { background-color: var(--ds-color-bg-error-subtle-pressed); } .ds-bg-warning { background-color: var(--ds-color-bg-warning); } .ds-bg-warning-hover { background-color: var(--ds-color-bg-warning-hover); } .ds-bg-warning-pressed { background-color: var(--ds-color-bg-warning-pressed); } .ds-bg-warning-subtle { background-color: var(--ds-color-bg-warning-subtle); } .ds-bg-warning-subtle-hover { background-color: var(--ds-color-bg-warning-subtle-hover); } .ds-bg-warning-subtle-pressed { background-color: var(--ds-color-bg-warning-subtle-pressed); } .ds-bg-success { background-color: var(--ds-color-bg-success); } .ds-bg-success-hover { background-color: var(--ds-color-bg-success-hover); } .ds-bg-success-pressed { background-color: var(--ds-color-bg-success-pressed); } .ds-bg-success-subtle { background-color: var(--ds-color-bg-success-subtle); } .ds-bg-success-subtle-hover { background-color: var(--ds-color-bg-success-subtle-hover); } .ds-bg-success-subtle-pressed { background-color: var(--ds-color-bg-success-subtle-pressed); } .ds-bg-info { background-color: var(--ds-color-bg-info); } .ds-bg-info-hover { background-color: var(--ds-color-bg-info-hover); } .ds-bg-info-pressed { background-color: var(--ds-color-bg-info-pressed); } .ds-bg-info-subtle { background-color: var(--ds-color-bg-info-subtle); } .ds-bg-info-subtle-hover { background-color: var(--ds-color-bg-info-subtle-hover); } .ds-bg-info-subtle-pressed { background-color: var(--ds-color-bg-info-subtle-pressed); } .ds-border-default { border-color: var(--ds-color-border-default); } .ds-border-disable { border-color: var(--ds-color-border-disable); } .ds-border-light { border-color: var(--ds-color-border-light); } .ds-border-subtle { border-color: var(--ds-color-border-subtle); } .ds-icon-default { color: var(--ds-color-icon-default); } .ds-icon-disable { color: var(--ds-color-icon-disable); } .ds-icon-light { color: var(--ds-color-icon-light); } .ds-icon-lighter { color: var(--ds-color-icon-lighter); } .ds-surface-default { background-color: var(--ds-color-surface-default); } .ds-surface-disable { background-color: var(--ds-color-surface-disable); } .ds-surface-subtle { background-color: var(--ds-color-surface-subtle); } .ds-p-1 { padding: var(--ds-spacing-01); } .ds-px-1 { padding-inline: var(--ds-spacing-01); } .ds-py-1 { padding-block: var(--ds-spacing-01); } .ds-pt-1 { padding-top: var(--ds-spacing-01); } .ds-pr-1 { padding-right: var(--ds-spacing-01); } .ds-pb-1 { padding-bottom: var(--ds-spacing-01); } .ds-pl-1 { padding-left: var(--ds-spacing-01); } .ds-m-1 { margin: var(--ds-spacing-01); } .ds-mx-1 { margin-inline: var(--ds-spacing-01); } .ds-my-1 { margin-block: var(--ds-spacing-01); } .ds-mt-1 { margin-top: var(--ds-spacing-01); } .ds-mr-1 { margin-right: var(--ds-spacing-01); } .ds-mb-1 { margin-bottom: var(--ds-spacing-01); } .ds-ml-1 { margin-left: var(--ds-spacing-01); } .ds-gap-1 { gap: var(--ds-spacing-01); } .ds-gap-x-1 { column-gap: var(--ds-spacing-01); } .ds-gap-y-1 { row-gap: var(--ds-spacing-01); } .ds-p-2 { padding: var(--ds-spacing-02); } .ds-px-2 { padding-inline: var(--ds-spacing-02); } .ds-py-2 { padding-block: var(--ds-spacing-02); } .ds-pt-2 { padding-top: var(--ds-spacing-02); } .ds-pr-2 { padding-right: var(--ds-spacing-02); } .ds-pb-2 { padding-bottom: var(--ds-spacing-02); } .ds-pl-2 { padding-left: var(--ds-spacing-02); } .ds-m-2 { margin: var(--ds-spacing-02); } .ds-mx-2 { margin-inline: var(--ds-spacing-02); } .ds-my-2 { margin-block: var(--ds-spacing-02); } .ds-mt-2 { margin-top: var(--ds-spacing-02); } .ds-mr-2 { margin-right: var(--ds-spacing-02); } .ds-mb-2 { margin-bottom: var(--ds-spacing-02); } .ds-ml-2 { margin-left: var(--ds-spacing-02); } .ds-gap-2 { gap: var(--ds-spacing-02); } .ds-gap-x-2 { column-gap: var(--ds-spacing-02); } .ds-gap-y-2 { row-gap: var(--ds-spacing-02); } .ds-p-3 { padding: var(--ds-spacing-03); } .ds-px-3 { padding-inline: var(--ds-spacing-03); } .ds-py-3 { padding-block: var(--ds-spacing-03); } .ds-pt-3 { padding-top: var(--ds-spacing-03); } .ds-pr-3 { padding-right: var(--ds-spacing-03); } .ds-pb-3 { padding-bottom: var(--ds-spacing-03); } .ds-pl-3 { padding-left: var(--ds-spacing-03); } .ds-m-3 { margin: var(--ds-spacing-03); } .ds-mx-3 { margin-inline: var(--ds-spacing-03); } .ds-my-3 { margin-block: var(--ds-spacing-03); } .ds-mt-3 { margin-top: var(--ds-spacing-03); } .ds-mr-3 { margin-right: var(--ds-spacing-03); } .ds-mb-3 { margin-bottom: var(--ds-spacing-03); } .ds-ml-3 { margin-left: var(--ds-spacing-03); } .ds-gap-3 { gap: var(--ds-spacing-03); } .ds-gap-x-3 { column-gap: var(--ds-spacing-03); } .ds-gap-y-3 { row-gap: var(--ds-spacing-03); } .ds-p-4 { padding: var(--ds-spacing-04); } .ds-px-4 { padding-inline: var(--ds-spacing-04); } .ds-py-4 { padding-block: var(--ds-spacing-04); } .ds-pt-4 { padding-top: var(--ds-spacing-04); } .ds-pr-4 { padding-right: var(--ds-spacing-04); } .ds-pb-4 { padding-bottom: var(--ds-spacing-04); } .ds-pl-4 { padding-left: var(--ds-spacing-04); } .ds-m-4 { margin: var(--ds-spacing-04); } .ds-mx-4 { margin-inline: var(--ds-spacing-04); } .ds-my-4 { margin-block: var(--ds-spacing-04); } .ds-mt-4 { margin-top: var(--ds-spacing-04); } .ds-mr-4 { margin-right: var(--ds-spacing-04); } .ds-mb-4 { margin-bottom: var(--ds-spacing-04); } .ds-ml-4 { margin-left: var(--ds-spacing-04); } .ds-gap-4 { gap: var(--ds-spacing-04); } .ds-gap-x-4 { column-gap: var(--ds-spacing-04); } .ds-gap-y-4 { row-gap: var(--ds-spacing-04); } .ds-p-5 { padding: var(--ds-spacing-05); } .ds-px-5 { padding-inline: var(--ds-spacing-05); } .ds-py-5 { padding-block: var(--ds-spacing-05); } .ds-pt-5 { padding-top: var(--ds-spacing-05); } .ds-pr-5 { padding-right: var(--ds-spacing-05); } .ds-pb-5 { padding-bottom: var(--ds-spacing-05); } .ds-pl-5 { padding-left: var(--ds-spacing-05); } .ds-m-5 { margin: var(--ds-spacing-05); } .ds-mx-5 { margin-inline: var(--ds-spacing-05); } .ds-my-5 { margin-block: var(--ds-spacing-05); } .ds-mt-5 { margin-top: var(--ds-spacing-05); } .ds-mr-5 { margin-right: var(--ds-spacing-05); } .ds-mb-5 { margin-bottom: var(--ds-spacing-05); } .ds-ml-5 { margin-left: var(--ds-spacing-05); } .ds-gap-5 { gap: var(--ds-spacing-05); } .ds-gap-x-5 { column-gap: var(--ds-spacing-05); } .ds-gap-y-5 { row-gap: var(--ds-spacing-05); } .ds-p-6 { padding: var(--ds-spacing-06); } .ds-px-6 { padding-inline: var(--ds-spacing-06); } .ds-py-6 { padding-block: var(--ds-spacing-06); } .ds-pt-6 { padding-top: var(--ds-spacing-06); } .ds-pr-6 { padding-right: var(--ds-spacing-06); } .ds-pb-6 { padding-bottom: var(--ds-spacing-06); } .ds-pl-6 { padding-left: var(--ds-spacing-06); } .ds-m-6 { margin: var(--ds-spacing-06); } .ds-mx-6 { margin-inline: var(--ds-spacing-06); } .ds-my-6 { margin-block: var(--ds-spacing-06); } .ds-mt-6 { margin-top: var(--ds-spacing-06); } .ds-mr-6 { margin-right: var(--ds-spacing-06); } .ds-mb-6 { margin-bottom: var(--ds-spacing-06); } .ds-ml-6 { margin-left: var(--ds-spacing-06); } .ds-gap-6 { gap: var(--ds-spacing-06); } .ds-gap-x-6 { column-gap: var(--ds-spacing-06); } .ds-gap-y-6 { row-gap: var(--ds-spacing-06); } .ds-p-7 { padding: var(--ds-spacing-07); } .ds-px-7 { padding-inline: var(--ds-spacing-07); } .ds-py-7 { padding-block: var(--ds-spacing-07); } .ds-pt-7 { padding-top: var(--ds-spacing-07); } .ds-pr-7 { padding-right: var(--ds-spacing-07); } .ds-pb-7 { padding-bottom: var(--ds-spacing-07); } .ds-pl-7 { padding-left: var(--ds-spacing-07); } .ds-m-7 { margin: var(--ds-spacing-07); } .ds-mx-7 { margin-inline: var(--ds-spacing-07); } .ds-my-7 { margin-block: var(--ds-spacing-07); } .ds-mt-7 { margin-top: var(--ds-spacing-07); } .ds-mr-7 { margin-right: var(--ds-spacing-07); } .ds-mb-7 { margin-bottom: var(--ds-spacing-07); } .ds-ml-7 { margin-left: var(--ds-spacing-07); } .ds-gap-7 { gap: var(--ds-spacing-07); } .ds-gap-x-7 { column-gap: var(--ds-spacing-07); } .ds-gap-y-7 { row-gap: var(--ds-spacing-07); } .ds-p-8 { padding: var(--ds-spacing-08); } .ds-px-8 { padding-inline: var(--ds-spacing-08); } .ds-py-8 { padding-block: var(--ds-spacing-08); } .ds-pt-8 { padding-top: var(--ds-spacing-08); } .ds-pr-8 { padding-right: var(--ds-spacing-08); } .ds-pb-8 { padding-bottom: var(--ds-spacing-08); } .ds-pl-8 { padding-left: var(--ds-spacing-08); } .ds-m-8 { margin: var(--ds-spacing-08); } .ds-mx-8 { margin-inline: var(--ds-spacing-08); } .ds-my-8 { margin-block: var(--ds-spacing-08); } .ds-mt-8 { margin-top: var(--ds-spacing-08); } .ds-mr-8 { margin-right: var(--ds-spacing-08); } .ds-mb-8 { margin-bottom: var(--ds-spacing-08); } .ds-ml-8 { margin-left: var(--ds-spacing-08); } .ds-gap-8 { gap: var(--ds-spacing-08); } .ds-gap-x-8 { column-gap: var(--ds-spacing-08); } .ds-gap-y-8 { row-gap: var(--ds-spacing-08); } .ds-p-9 { padding: var(--ds-spacing-09); } .ds-px-9 { padding-inline: var(--ds-spacing-09); } .ds-py-9 { padding-block: var(--ds-spacing-09); } .ds-pt-9 { padding-top: var(--ds-spacing-09); } .ds-pr-9 { padding-right: var(--ds-spacing-09); } .ds-pb-9 { padding-bottom: var(--ds-spacing-09); } .ds-pl-9 { padding-left: var(--ds-spacing-09); } .ds-m-9 { margin: var(--ds-spacing-09); } .ds-mx-9 { margin-inline: var(--ds-spacing-09); } .ds-my-9 { margin-block: var(--ds-spacing-09); } .ds-mt-9 { margin-top: var(--ds-spacing-09); } .ds-mr-9 { margin-right: var(--ds-spacing-09); } .ds-mb-9 { margin-bottom: var(--ds-spacing-09); } .ds-ml-9 { margin-left: var(--ds-spacing-09); } .ds-gap-9 { gap: var(--ds-spacing-09); } .ds-gap-x-9 { column-gap: var(--ds-spacing-09); } .ds-gap-y-9 { row-gap: var(--ds-spacing-09); } .ds-p-10 { padding: var(--ds-spacing-10); } .ds-px-10 { padding-inline: var(--ds-spacing-10); } .ds-py-10 { padding-block: var(--ds-spacing-10); } .ds-pt-10 { padding-top: var(--ds-spacing-10); } .ds-pr-10 { padding-right: var(--ds-spacing-10); } .ds-pb-10 { padding-bottom: var(--ds-spacing-10); } .ds-pl-10 { padding-left: var(--ds-spacing-10); } .ds-m-10 { margin: var(--ds-spacing-10); } .ds-mx-10 { margin-inline: var(--ds-spacing-10); } .ds-my-10 { margin-block: var(--ds-spacing-10); } .ds-mt-10 { margin-top: var(--ds-spacing-10); } .ds-mr-10 { margin-right: var(--ds-spacing-10); } .ds-mb-10 { margin-bottom: var(--ds-spacing-10); } .ds-ml-10 { margin-left: var(--ds-spacing-10); } .ds-gap-10 { gap: var(--ds-spacing-10); } .ds-gap-x-10 { column-gap: var(--ds-spacing-10); } .ds-gap-y-10 { row-gap: var(--ds-spacing-10); } .ds-p-11 { padding: var(--ds-spacing-11); } .ds-px-11 { padding-inline: var(--ds-spacing-11); } .ds-py-11 { padding-block: var(--ds-spacing-11); } .ds-pt-11 { padding-top: var(--ds-spacing-11); } .ds-pr-11 { padding-right: var(--ds-spacing-11); } .ds-pb-11 { padding-bottom: var(--ds-spacing-11); } .ds-pl-11 { padding-left: var(--ds-spacing-11); } .ds-m-11 { margin: var(--ds-spacing-11); } .ds-mx-11 { margin-inline: var(--ds-spacing-11); } .ds-my-11 { margin-block: var(--ds-spacing-11); } .ds-mt-11 { margin-top: var(--ds-spacing-11); } .ds-mr-11 { margin-right: var(--ds-spacing-11); } .ds-mb-11 { margin-bottom: var(--ds-spacing-11); } .ds-ml-11 { margin-left: var(--ds-spacing-11); } .ds-gap-11 { gap: var(--ds-spacing-11); } .ds-gap-x-11 { column-gap: var(--ds-spacing-11); } .ds-gap-y-11 { row-gap: var(--ds-spacing-11); } .ds-p-12 { padding: var(--ds-spacing-12); } .ds-px-12 { padding-inline: var(--ds-spacing-12); } .ds-py-12 { padding-block: var(--ds-spacing-12); } .ds-pt-12 { padding-top: var(--ds-spacing-12); } .ds-pr-12 { padding-right: var(--ds-spacing-12); } .ds-pb-12 { padding-bottom: var(--ds-spacing-12); } .ds-pl-12 { padding-left: var(--ds-spacing-12); } .ds-m-12 { margin: var(--ds-spacing-12); } .ds-mx-12 { margin-inline: var(--ds-spacing-12); } .ds-my-12 { margin-block: var(--ds-spacing-12); } .ds-mt-12 { margin-top: var(--ds-spacing-12); } .ds-mr-12 { margin-right: var(--ds-spacing-12); } .ds-mb-12 { margin-bottom: var(--ds-spacing-12); } .ds-ml-12 { margin-left: var(--ds-spacing-12); } .ds-gap-12 { gap: var(--ds-spacing-12); } .ds-gap-x-12 { column-gap: var(--ds-spacing-12); } .ds-gap-y-12 { row-gap: var(--ds-spacing-12); } .ds-p-13 { padding: var(--ds-spacing-13); } .ds-px-13 { padding-inline: var(--ds-spacing-13); } .ds-py-13 { padding-block: var(--ds-spacing-13); } .ds-pt-13 { padding-top: var(--ds-spacing-13); } .ds-pr-13 { padding-right: var(--ds-spacing-13); } .ds-pb-13 { padding-bottom: var(--ds-spacing-13); } .ds-pl-13 { padding-left: var(--ds-spacing-13); } .ds-m-13 { margin: var(--ds-spacing-13); } .ds-mx-13 { margin-inline: var(--ds-spacing-13); } .ds-my-13 { margin-block: var(--ds-spacing-13); } .ds-mt-13 { margin-top: var(--ds-spacing-13); } .ds-mr-13 { margin-right: var(--ds-spacing-13); } .ds-mb-13 { margin-bottom: var(--ds-spacing-13); } .ds-ml-13 { margin-left: var(--ds-spacing-13); } .ds-gap-13 { gap: var(--ds-spacing-13); } .ds-gap-x-13 { column-gap: var(--ds-spacing-13); } .ds-gap-y-13 { row-gap: var(--ds-spacing-13); } .ds-rounded-none { border-radius: var(--ds-radius-none); } .ds-rounded-xs { border-radius: var(--ds-radius-xs); } .ds-rounded-sm { border-radius: var(--ds-radius-sm); } .ds-rounded-md { border-radius: var(--ds-radius-md); } .ds-rounded-lg { border-radius: var(--ds-radius-lg); } .ds-rounded-xl { border-radius: var(--ds-radius-xl); } .ds-rounded-full { border-radius: var(--ds-radius-full); } * { scrollbar-width: thin; scrollbar-color: var(--ds-scrollbar-thumb-bg) var(--ds-scrollbar-track-bg); } *::-webkit-scrollbar { width: var(--ds-scrollbar-size); height: var(--ds-scrollbar-size); } *::-webkit-scrollbar-track { background: var(--ds-scrollbar-track-bg); } *::-webkit-scrollbar-thumb { background: var(--ds-scrollbar-thumb-bg); border-radius: var(--ds-scrollbar-radius); } *::-webkit-scrollbar-thumb:hover { background: var(--ds-scrollbar-thumb-bg-hover); } .ds-scrollbar { scrollbar-width: thin; scrollbar-color: var(--ds-scrollbar-thumb-bg) var(--ds-scrollbar-track-bg); } .ds-scrollbar::-webkit-scrollbar { width: var(--ds-scrollbar-size); height: var(--ds-scrollbar-size); } .ds-scrollbar::-webkit-scrollbar-track { background: var(--ds-scrollbar-track-bg); } .ds-scrollbar::-webkit-scrollbar-thumb { background: var(--ds-scrollbar-thumb-bg); border-radius: var(--ds-scrollbar-radius); } .ds-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--ds-scrollbar-thumb-bg-hover); } html, body { font-family: var(--ds-font-family-base); padding: 0; margin: 0; box-sizing: border-box; } input { border: none; } p { margin: 0; padding: 0; } ul, ol { list-style: none; } *, *::before, *::after { box-sizing: inherit; } .ds-flex { display: flex; } .ds-flex-vertical { flex-direction: column; } .ds-flex-justify-flex-start { justify-content: flex-start; } .ds-flex-justify-center { justify-content: center; } .ds-flex-justify-flex-end { justify-content: flex-end; } .ds-flex-justify-space-between { justify-content: space-between; } .ds-flex-justify-space-around { justify-content: space-around; } .ds-flex-justify-space-evenly { justify-content: space-evenly; } .ds-flex-justify-start { justify-content: start; } .ds-flex-justify-end { justify-content: end; } .ds-flex-justify-right { justify-content: right; } .ds-flex-justify-left { justify-content: left; } .ds-flex-justify-stretch { justify-content: stretch; } .ds-flex-justify-normal { justify-content: normal; } .ds-flex-align-flex-start { align-items: flex-start; } .ds-flex-align-center { align-items: center; } .ds-flex-align-flex-end { align-items: flex-end; } .ds-flex-align-start { align-items: start; } .ds-flex-align-end { align-items: end; } .ds-flex-align-stretch { align-items: stretch; } .ds-flex-align-normal { align-items: normal; } .ds-flex-wrap-wrap { flex-wrap: wrap; } .ds-flex-wrap-nowrap { flex-wrap: nowrap; } .ds-flex-wrap-wrap-reverse { flex-wrap: wrap-reverse; } .ds-row { display: flex; flex-flow: row wrap; min-width: 0; } .ds-row::before, .ds-row::after { display: flex; } .ds-row-no-wrap { flex-wrap: nowrap; } .ds-row-start { justify-content: flex-start; } .ds-row-center { justify-content: center; } .ds-row-end { justify-content: flex-end; } .ds-row-space-between { justify-content: space-between; } .ds-row-space-around { justify-content: space-around; } .ds-row-space-evenly { justify-content: space-evenly; } .ds-row-top { align-items: flex-start; } .ds-row-middle { align-items: center; } .ds-row-bottom { align-items: flex-end; } .ds-col { position: relative; max-width: 100%; min-height: 1px; } .ds-col-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-offset-0 { margin-left: 0; } .ds-col-order-0 { order: 0; } .ds-col-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-push-1 { left: 4.1666666667%; } .ds-col-pull-1 { right: 4.1666666667%; } .ds-col-offset-1 { margin-left: 4.1666666667%; } .ds-col-order-1 { order: 1; } .ds-col-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-push-2 { left: 8.3333333333%; } .ds-col-pull-2 { right: 8.3333333333%; } .ds-col-offset-2 { margin-left: 8.3333333333%; } .ds-col-order-2 { order: 2; } .ds-col-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-push-3 { left: 12.5%; } .ds-col-pull-3 { right: 12.5%; } .ds-col-offset-3 { margin-left: 12.5%; } .ds-col-order-3 { order: 3; } .ds-col-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-push-4 { left: 16.6666666667%; } .ds-col-pull-4 { right: 16.6666666667%; } .ds-col-offset-4 { margin-left: 16.6666666667%; } .ds-col-order-4 { order: 4; } .ds-col-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-push-5 { left: 20.8333333333%; } .ds-col-pull-5 { right: 20.8333333333%; } .ds-col-offset-5 { margin-left: 20.8333333333%; } .ds-col-order-5 { order: 5; } .ds-col-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-push-6 { left: 25%; } .ds-col-pull-6 { right: 25%; } .ds-col-offset-6 { margin-left: 25%; } .ds-col-order-6 { order: 6; } .ds-col-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-push-7 { left: 29.1666666667%; } .ds-col-pull-7 { right: 29.1666666667%; } .ds-col-offset-7 { margin-left: 29.1666666667%; } .ds-col-order-7 { order: 7; } .ds-col-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-push-8 { left: 33.3333333333%; } .ds-col-pull-8 { right: 33.3333333333%; } .ds-col-offset-8 { margin-left: 33.3333333333%; } .ds-col-order-8 { order: 8; } .ds-col-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-push-9 { left: 37.5%; } .ds-col-pull-9 { right: 37.5%; } .ds-col-offset-9 { margin-left: 37.5%; } .ds-col-order-9 { order: 9; } .ds-col-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-push-10 { left: 41.6666666667%; } .ds-col-pull-10 { right: 41.6666666667%; } .ds-col-offset-10 { margin-left: 41.6666666667%; } .ds-col-order-10 { order: 10; } .ds-col-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-push-11 { left: 45.8333333333%; } .ds-col-pull-11 { right: 45.8333333333%; } .ds-col-offset-11 { margin-left: 45.8333333333%; } .ds-col-order-11 { order: 11; } .ds-col-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-push-12 { left: 50%; } .ds-col-pull-12 { right: 50%; } .ds-col-offset-12 { margin-left: 50%; } .ds-col-order-12 { order: 12; } .ds-col-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-push-13 { left: 54.1666666667%; } .ds-col-pull-13 { right: 54.1666666667%; } .ds-col-offset-13 { margin-left: 54.1666666667%; } .ds-col-order-13 { order: 13; } .ds-col-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-push-14 { left: 58.3333333333%; } .ds-col-pull-14 { right: 58.3333333333%; } .ds-col-offset-14 { margin-left: 58.3333333333%; } .ds-col-order-14 { order: 14; } .ds-col-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-push-15 { left: 62.5%; } .ds-col-pull-15 { right: 62.5%; } .ds-col-offset-15 { margin-left: 62.5%; } .ds-col-order-15 { order: 15; } .ds-col-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-push-16 { left: 66.6666666667%; } .ds-col-pull-16 { right: 66.6666666667%; } .ds-col-offset-16 { margin-left: 66.6666666667%; } .ds-col-order-16 { order: 16; } .ds-col-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-push-17 { left: 70.8333333333%; } .ds-col-pull-17 { right: 70.8333333333%; } .ds-col-offset-17 { margin-left: 70.8333333333%; } .ds-col-order-17 { order: 17; } .ds-col-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-push-18 { left: 75%; } .ds-col-pull-18 { right: 75%; } .ds-col-offset-18 { margin-left: 75%; } .ds-col-order-18 { order: 18; } .ds-col-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-push-19 { left: 79.1666666667%; } .ds-col-pull-19 { right: 79.1666666667%; } .ds-col-offset-19 { margin-left: 79.1666666667%; } .ds-col-order-19 { order: 19; } .ds-col-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-push-20 { left: 83.3333333333%; } .ds-col-pull-20 { right: 83.3333333333%; } .ds-col-offset-20 { margin-left: 83.3333333333%; } .ds-col-order-20 { order: 20; } .ds-col-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-push-21 { left: 87.5%; } .ds-col-pull-21 { right: 87.5%; } .ds-col-offset-21 { margin-left: 87.5%; } .ds-col-order-21 { order: 21; } .ds-col-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-push-22 { left: 91.6666666667%; } .ds-col-pull-22 { right: 91.6666666667%; } .ds-col-offset-22 { margin-left: 91.6666666667%; } .ds-col-order-22 { order: 22; } .ds-col-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-push-23 { left: 95.8333333333%; } .ds-col-pull-23 { right: 95.8333333333%; } .ds-col-offset-23 { margin-left: 95.8333333333%; } .ds-col-order-23 { order: 23; } .ds-col-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-push-24 { left: 100%; } .ds-col-pull-24 { right: 100%; } .ds-col-offset-24 { margin-left: 100%; } .ds-col-order-24 { order: 24; } .ds-col-xs-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-xs-push-0 { left: auto; } .ds-col-xs-pull-0 { right: auto; } .ds-col-xs-offset-0 { margin-left: 0; } .ds-col-xs-order-0 { order: 0; } .ds-col-xs-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-xs-push-1 { left: 4.1666666667%; } .ds-col-xs-pull-1 { right: 4.1666666667%; } .ds-col-xs-offset-1 { margin-left: 4.1666666667%; } .ds-col-xs-order-1 { order: 1; } .ds-col-xs-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-xs-push-2 { left: 8.3333333333%; } .ds-col-xs-pull-2 { right: 8.3333333333%; } .ds-col-xs-offset-2 { margin-left: 8.3333333333%; } .ds-col-xs-order-2 { order: 2; } .ds-col-xs-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-xs-push-3 { left: 12.5%; } .ds-col-xs-pull-3 { right: 12.5%; } .ds-col-xs-offset-3 { margin-left: 12.5%; } .ds-col-xs-order-3 { order: 3; } .ds-col-xs-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-xs-push-4 { left: 16.6666666667%; } .ds-col-xs-pull-4 { right: 16.6666666667%; } .ds-col-xs-offset-4 { margin-left: 16.6666666667%; } .ds-col-xs-order-4 { order: 4; } .ds-col-xs-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-xs-push-5 { left: 20.8333333333%; } .ds-col-xs-pull-5 { right: 20.8333333333%; } .ds-col-xs-offset-5 { margin-left: 20.8333333333%; } .ds-col-xs-order-5 { order: 5; } .ds-col-xs-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-xs-push-6 { left: 25%; } .ds-col-xs-pull-6 { right: 25%; } .ds-col-xs-offset-6 { margin-left: 25%; } .ds-col-xs-order-6 { order: 6; } .ds-col-xs-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-xs-push-7 { left: 29.1666666667%; } .ds-col-xs-pull-7 { right: 29.1666666667%; } .ds-col-xs-offset-7 { margin-left: 29.1666666667%; } .ds-col-xs-order-7 { order: 7; } .ds-col-xs-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-xs-push-8 { left: 33.3333333333%; } .ds-col-xs-pull-8 { right: 33.3333333333%; } .ds-col-xs-offset-8 { margin-left: 33.3333333333%; } .ds-col-xs-order-8 { order: 8; } .ds-col-xs-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-xs-push-9 { left: 37.5%; } .ds-col-xs-pull-9 { right: 37.5%; } .ds-col-xs-offset-9 { margin-left: 37.5%; } .ds-col-xs-order-9 { order: 9; } .ds-col-xs-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-xs-push-10 { left: 41.6666666667%; } .ds-col-xs-pull-10 { right: 41.6666666667%; } .ds-col-xs-offset-10 { margin-left: 41.6666666667%; } .ds-col-xs-order-10 { order: 10; } .ds-col-xs-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-xs-push-11 { left: 45.8333333333%; } .ds-col-xs-pull-11 { right: 45.8333333333%; } .ds-col-xs-offset-11 { margin-left: 45.8333333333%; } .ds-col-xs-order-11 { order: 11; } .ds-col-xs-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-xs-push-12 { left: 50%; } .ds-col-xs-pull-12 { right: 50%; } .ds-col-xs-offset-12 { margin-left: 50%; } .ds-col-xs-order-12 { order: 12; } .ds-col-xs-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-xs-push-13 { left: 54.1666666667%; } .ds-col-xs-pull-13 { right: 54.1666666667%; } .ds-col-xs-offset-13 { margin-left: 54.1666666667%; } .ds-col-xs-order-13 { order: 13; } .ds-col-xs-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-xs-push-14 { left: 58.3333333333%; } .ds-col-xs-pull-14 { right: 58.3333333333%; } .ds-col-xs-offset-14 { margin-left: 58.3333333333%; } .ds-col-xs-order-14 { order: 14; } .ds-col-xs-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-xs-push-15 { left: 62.5%; } .ds-col-xs-pull-15 { right: 62.5%; } .ds-col-xs-offset-15 { margin-left: 62.5%; } .ds-col-xs-order-15 { order: 15; } .ds-col-xs-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-xs-push-16 { left: 66.6666666667%; } .ds-col-xs-pull-16 { right: 66.6666666667%; } .ds-col-xs-offset-16 { margin-left: 66.6666666667%; } .ds-col-xs-order-16 { order: 16; } .ds-col-xs-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-xs-push-17 { left: 70.8333333333%; } .ds-col-xs-pull-17 { right: 70.8333333333%; } .ds-col-xs-offset-17 { margin-left: 70.8333333333%; } .ds-col-xs-order-17 { order: 17; } .ds-col-xs-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-xs-push-18 { left: 75%; } .ds-col-xs-pull-18 { right: 75%; } .ds-col-xs-offset-18 { margin-left: 75%; } .ds-col-xs-order-18 { order: 18; } .ds-col-xs-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-xs-push-19 { left: 79.1666666667%; } .ds-col-xs-pull-19 { right: 79.1666666667%; } .ds-col-xs-offset-19 { margin-left: 79.1666666667%; } .ds-col-xs-order-19 { order: 19; } .ds-col-xs-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-xs-push-20 { left: 83.3333333333%; } .ds-col-xs-pull-20 { right: 83.3333333333%; } .ds-col-xs-offset-20 { margin-left: 83.3333333333%; } .ds-col-xs-order-20 { order: 20; } .ds-col-xs-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-xs-push-21 { left: 87.5%; } .ds-col-xs-pull-21 { right: 87.5%; } .ds-col-xs-offset-21 { margin-left: 87.5%; } .ds-col-xs-order-21 { order: 21; } .ds-col-xs-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-xs-push-22 { left: 91.6666666667%; } .ds-col-xs-pull-22 { right: 91.6666666667%; } .ds-col-xs-offset-22 { margin-left: 91.6666666667%; } .ds-col-xs-order-22 { order: 22; } .ds-col-xs-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-xs-push-23 { left: 95.8333333333%; } .ds-col-xs-pull-23 { right: 95.8333333333%; } .ds-col-xs-offset-23 { margin-left: 95.8333333333%; } .ds-col-xs-order-23 { order: 23; } .ds-col-xs-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-xs-push-24 { left: 100%; } .ds-col-xs-pull-24 { right: 100%; } .ds-col-xs-offset-24 { margin-left: 100%; } .ds-col-xs-order-24 { order: 24; } @media (min-width: 576px) { .ds-col-sm-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-sm-push-0 { left: auto; } .ds-col-sm-pull-0 { right: auto; } .ds-col-sm-offset-0 { margin-left: 0; } .ds-col-sm-order-0 { order: 0; } .ds-col-sm-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-sm-push-1 { left: 4.1666666667%; } .ds-col-sm-pull-1 { right: 4.1666666667%; } .ds-col-sm-offset-1 { margin-left: 4.1666666667%; } .ds-col-sm-order-1 { order: 1; } .ds-col-sm-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-sm-push-2 { left: 8.3333333333%; } .ds-col-sm-pull-2 { right: 8.3333333333%; } .ds-col-sm-offset-2 { margin-left: 8.3333333333%; } .ds-col-sm-order-2 { order: 2; } .ds-col-sm-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-sm-push-3 { left: 12.5%; } .ds-col-sm-pull-3 { right: 12.5%; } .ds-col-sm-offset-3 { margin-left: 12.5%; } .ds-col-sm-order-3 { order: 3; } .ds-col-sm-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-sm-push-4 { left: 16.6666666667%; } .ds-col-sm-pull-4 { right: 16.6666666667%; } .ds-col-sm-offset-4 { margin-left: 16.6666666667%; } .ds-col-sm-order-4 { order: 4; } .ds-col-sm-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-sm-push-5 { left: 20.8333333333%; } .ds-col-sm-pull-5 { right: 20.8333333333%; } .ds-col-sm-offset-5 { margin-left: 20.8333333333%; } .ds-col-sm-order-5 { order: 5; } .ds-col-sm-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-sm-push-6 { left: 25%; } .ds-col-sm-pull-6 { right: 25%; } .ds-col-sm-offset-6 { margin-left: 25%; } .ds-col-sm-order-6 { order: 6; } .ds-col-sm-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-sm-push-7 { left: 29.1666666667%; } .ds-col-sm-pull-7 { right: 29.1666666667%; } .ds-col-sm-offset-7 { margin-left: 29.1666666667%; } .ds-col-sm-order-7 { order: 7; } .ds-col-sm-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-sm-push-8 { left: 33.3333333333%; } .ds-col-sm-pull-8 { right: 33.3333333333%; } .ds-col-sm-offset-8 { margin-left: 33.3333333333%; } .ds-col-sm-order-8 { order: 8; } .ds-col-sm-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-sm-push-9 { left: 37.5%; } .ds-col-sm-pull-9 { right: 37.5%; } .ds-col-sm-offset-9 { margin-left: 37.5%; } .ds-col-sm-order-9 { order: 9; } .ds-col-sm-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-sm-push-10 { left: 41.6666666667%; } .ds-col-sm-pull-10 { right: 41.6666666667%; } .ds-col-sm-offset-10 { margin-left: 41.6666666667%; } .ds-col-sm-order-10 { order: 10; } .ds-col-sm-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-sm-push-11 { left: 45.8333333333%; } .ds-col-sm-pull-11 { right: 45.8333333333%; } .ds-col-sm-offset-11 { margin-left: 45.8333333333%; } .ds-col-sm-order-11 { order: 11; } .ds-col-sm-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-sm-push-12 { left: 50%; } .ds-col-sm-pull-12 { right: 50%; } .ds-col-sm-offset-12 { margin-left: 50%; } .ds-col-sm-order-12 { order: 12; } .ds-col-sm-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-sm-push-13 { left: 54.1666666667%; } .ds-col-sm-pull-13 { right: 54.1666666667%; } .ds-col-sm-offset-13 { margin-left: 54.1666666667%; } .ds-col-sm-order-13 { order: 13; } .ds-col-sm-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-sm-push-14 { left: 58.3333333333%; } .ds-col-sm-pull-14 { right: 58.3333333333%; } .ds-col-sm-offset-14 { margin-left: 58.3333333333%; } .ds-col-sm-order-14 { order: 14; } .ds-col-sm-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-sm-push-15 { left: 62.5%; } .ds-col-sm-pull-15 { right: 62.5%; } .ds-col-sm-offset-15 { margin-left: 62.5%; } .ds-col-sm-order-15 { order: 15; } .ds-col-sm-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-sm-push-16 { left: 66.6666666667%; } .ds-col-sm-pull-16 { right: 66.6666666667%; } .ds-col-sm-offset-16 { margin-left: 66.6666666667%; } .ds-col-sm-order-16 { order: 16; } .ds-col-sm-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-sm-push-17 { left: 70.8333333333%; } .ds-col-sm-pull-17 { right: 70.8333333333%; } .ds-col-sm-offset-17 { margin-left: 70.8333333333%; } .ds-col-sm-order-17 { order: 17; } .ds-col-sm-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-sm-push-18 { left: 75%; } .ds-col-sm-pull-18 { right: 75%; } .ds-col-sm-offset-18 { margin-left: 75%; } .ds-col-sm-order-18 { order: 18; } .ds-col-sm-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-sm-push-19 { left: 79.1666666667%; } .ds-col-sm-pull-19 { right: 79.1666666667%; } .ds-col-sm-offset-19 { margin-left: 79.1666666667%; } .ds-col-sm-order-19 { order: 19; } .ds-col-sm-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-sm-push-20 { left: 83.3333333333%; } .ds-col-sm-pull-20 { right: 83.3333333333%; } .ds-col-sm-offset-20 { margin-left: 83.3333333333%; } .ds-col-sm-order-20 { order: 20; } .ds-col-sm-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-sm-push-21 { left: 87.5%; } .ds-col-sm-pull-21 { right: 87.5%; } .ds-col-sm-offset-21 { margin-left: 87.5%; } .ds-col-sm-order-21 { order: 21; } .ds-col-sm-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-sm-push-22 { left: 91.6666666667%; } .ds-col-sm-pull-22 { right: 91.6666666667%; } .ds-col-sm-offset-22 { margin-left: 91.6666666667%; } .ds-col-sm-order-22 { order: 22; } .ds-col-sm-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-sm-push-23 { left: 95.8333333333%; } .ds-col-sm-pull-23 { right: 95.8333333333%; } .ds-col-sm-offset-23 { margin-left: 95.8333333333%; } .ds-col-sm-order-23 { order: 23; } .ds-col-sm-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-sm-push-24 { left: 100%; } .ds-col-sm-pull-24 { right: 100%; } .ds-col-sm-offset-24 { margin-left: 100%; } .ds-col-sm-order-24 { order: 24; } } @media (min-width: 768px) { .ds-col-md-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-md-push-0 { left: auto; } .ds-col-md-pull-0 { right: auto; } .ds-col-md-offset-0 { margin-left: 0; } .ds-col-md-order-0 { order: 0; } .ds-col-md-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-md-push-1 { left: 4.1666666667%; } .ds-col-md-pull-1 { right: 4.1666666667%; } .ds-col-md-offset-1 { margin-left: 4.1666666667%; } .ds-col-md-order-1 { order: 1; } .ds-col-md-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-md-push-2 { left: 8.3333333333%; } .ds-col-md-pull-2 { right: 8.3333333333%; } .ds-col-md-offset-2 { margin-left: 8.3333333333%; } .ds-col-md-order-2 { order: 2; } .ds-col-md-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-md-push-3 { left: 12.5%; } .ds-col-md-pull-3 { right: 12.5%; } .ds-col-md-offset-3 { margin-left: 12.5%; } .ds-col-md-order-3 { order: 3; } .ds-col-md-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-md-push-4 { left: 16.6666666667%; } .ds-col-md-pull-4 { right: 16.6666666667%; } .ds-col-md-offset-4 { margin-left: 16.6666666667%; } .ds-col-md-order-4 { order: 4; } .ds-col-md-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-md-push-5 { left: 20.8333333333%; } .ds-col-md-pull-5 { right: 20.8333333333%; } .ds-col-md-offset-5 { margin-left: 20.8333333333%; } .ds-col-md-order-5 { order: 5; } .ds-col-md-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-md-push-6 { left: 25%; } .ds-col-md-pull-6 { right: 25%; } .ds-col-md-offset-6 { margin-left: 25%; } .ds-col-md-order-6 { order: 6; } .ds-col-md-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-md-push-7 { left: 29.1666666667%; } .ds-col-md-pull-7 { right: 29.1666666667%; } .ds-col-md-offset-7 { margin-left: 29.1666666667%; } .ds-col-md-order-7 { order: 7; } .ds-col-md-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-md-push-8 { left: 33.3333333333%; } .ds-col-md-pull-8 { right: 33.3333333333%; } .ds-col-md-offset-8 { margin-left: 33.3333333333%; } .ds-col-md-order-8 { order: 8; } .ds-col-md-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-md-push-9 { left: 37.5%; } .ds-col-md-pull-9 { right: 37.5%; } .ds-col-md-offset-9 { margin-left: 37.5%; } .ds-col-md-order-9 { order: 9; } .ds-col-md-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-md-push-10 { left: 41.6666666667%; } .ds-col-md-pull-10 { right: 41.6666666667%; } .ds-col-md-offset-10 { margin-left: 41.6666666667%; } .ds-col-md-order-10 { order: 10; } .ds-col-md-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-md-push-11 { left: 45.8333333333%; } .ds-col-md-pull-11 { right: 45.8333333333%; } .ds-col-md-offset-11 { margin-left: 45.8333333333%; } .ds-col-md-order-11 { order: 11; } .ds-col-md-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-md-push-12 { left: 50%; } .ds-col-md-pull-12 { right: 50%; } .ds-col-md-offset-12 { margin-left: 50%; } .ds-col-md-order-12 { order: 12; } .ds-col-md-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-md-push-13 { left: 54.1666666667%; } .ds-col-md-pull-13 { right: 54.1666666667%; } .ds-col-md-offset-13 { margin-left: 54.1666666667%; } .ds-col-md-order-13 { order: 13; } .ds-col-md-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-md-push-14 { left: 58.3333333333%; } .ds-col-md-pull-14 { right: 58.3333333333%; } .ds-col-md-offset-14 { margin-left: 58.3333333333%; } .ds-col-md-order-14 { order: 14; } .ds-col-md-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-md-push-15 { left: 62.5%; } .ds-col-md-pull-15 { right: 62.5%; } .ds-col-md-offset-15 { margin-left: 62.5%; } .ds-col-md-order-15 { order: 15; } .ds-col-md-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-md-push-16 { left: 66.6666666667%; } .ds-col-md-pull-16 { right: 66.6666666667%; } .ds-col-md-offset-16 { margin-left: 66.6666666667%; } .ds-col-md-order-16 { order: 16; } .ds-col-md-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-md-push-17 { left: 70.8333333333%; } .ds-col-md-pull-17 { right: 70.8333333333%; } .ds-col-md-offset-17 { margin-left: 70.8333333333%; } .ds-col-md-order-17 { order: 17; } .ds-col-md-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-md-push-18 { left: 75%; } .ds-col-md-pull-18 { right: 75%; } .ds-col-md-offset-18 { margin-left: 75%; } .ds-col-md-order-18 { order: 18; } .ds-col-md-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-md-push-19 { left: 79.1666666667%; } .ds-col-md-pull-19 { right: 79.1666666667%; } .ds-col-md-offset-19 { margin-left: 79.1666666667%; } .ds-col-md-order-19 { order: 19; } .ds-col-md-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-md-push-20 { left: 83.3333333333%; } .ds-col-md-pull-20 { right: 83.3333333333%; } .ds-col-md-offset-20 { margin-left: 83.3333333333%; } .ds-col-md-order-20 { order: 20; } .ds-col-md-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-md-push-21 { left: 87.5%; } .ds-col-md-pull-21 { right: 87.5%; } .ds-col-md-offset-21 { margin-left: 87.5%; } .ds-col-md-order-21 { order: 21; } .ds-col-md-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-md-push-22 { left: 91.6666666667%; } .ds-col-md-pull-22 { right: 91.6666666667%; } .ds-col-md-offset-22 { margin-left: 91.6666666667%; } .ds-col-md-order-22 { order: 22; } .ds-col-md-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-md-push-23 { left: 95.8333333333%; } .ds-col-md-pull-23 { right: 95.8333333333%; } .ds-col-md-offset-23 { margin-left: 95.8333333333%; } .ds-col-md-order-23 { order: 23; } .ds-col-md-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-md-push-24 { left: 100%; } .ds-col-md-pull-24 { right: 100%; } .ds-col-md-offset-24 { margin-left: 100%; } .ds-col-md-order-24 { order: 24; } } @media (min-width: 992px) { .ds-col-lg-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-lg-push-0 { left: auto; } .ds-col-lg-pull-0 { right: auto; } .ds-col-lg-offset-0 { margin-left: 0; } .ds-col-lg-order-0 { order: 0; } .ds-col-lg-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-lg-push-1 { left: 4.1666666667%; } .ds-col-lg-pull-1 { right: 4.1666666667%; } .ds-col-lg-offset-1 { margin-left: 4.1666666667%; } .ds-col-lg-order-1 { order: 1; } .ds-col-lg-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-lg-push-2 { left: 8.3333333333%; } .ds-col-lg-pull-2 { right: 8.3333333333%; } .ds-col-lg-offset-2 { margin-left: 8.3333333333%; } .ds-col-lg-order-2 { order: 2; } .ds-col-lg-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-lg-push-3 { left: 12.5%; } .ds-col-lg-pull-3 { right: 12.5%; } .ds-col-lg-offset-3 { margin-left: 12.5%; } .ds-col-lg-order-3 { order: 3; } .ds-col-lg-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-lg-push-4 { left: 16.6666666667%; } .ds-col-lg-pull-4 { right: 16.6666666667%; } .ds-col-lg-offset-4 { margin-left: 16.6666666667%; } .ds-col-lg-order-4 { order: 4; } .ds-col-lg-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-lg-push-5 { left: 20.8333333333%; } .ds-col-lg-pull-5 { right: 20.8333333333%; } .ds-col-lg-offset-5 { margin-left: 20.8333333333%; } .ds-col-lg-order-5 { order: 5; } .ds-col-lg-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-lg-push-6 { left: 25%; } .ds-col-lg-pull-6 { right: 25%; } .ds-col-lg-offset-6 { margin-left: 25%; } .ds-col-lg-order-6 { order: 6; } .ds-col-lg-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-lg-push-7 { left: 29.1666666667%; } .ds-col-lg-pull-7 { right: 29.1666666667%; } .ds-col-lg-offset-7 { margin-left: 29.1666666667%; } .ds-col-lg-order-7 { order: 7; } .ds-col-lg-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-lg-push-8 { left: 33.3333333333%; } .ds-col-lg-pull-8 { right: 33.3333333333%; } .ds-col-lg-offset-8 { margin-left: 33.3333333333%; } .ds-col-lg-order-8 { order: 8; } .ds-col-lg-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-lg-push-9 { left: 37.5%; } .ds-col-lg-pull-9 { right: 37.5%; } .ds-col-lg-offset-9 { margin-left: 37.5%; } .ds-col-lg-order-9 { order: 9; } .ds-col-lg-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-lg-push-10 { left: 41.6666666667%; } .ds-col-lg-pull-10 { right: 41.6666666667%; } .ds-col-lg-offset-10 { margin-left: 41.6666666667%; } .ds-col-lg-order-10 { order: 10; } .ds-col-lg-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-lg-push-11 { left: 45.8333333333%; } .ds-col-lg-pull-11 { right: 45.8333333333%; } .ds-col-lg-offset-11 { margin-left: 45.8333333333%; } .ds-col-lg-order-11 { order: 11; } .ds-col-lg-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-lg-push-12 { left: 50%; } .ds-col-lg-pull-12 { right: 50%; } .ds-col-lg-offset-12 { margin-left: 50%; } .ds-col-lg-order-12 { order: 12; } .ds-col-lg-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-lg-push-13 { left: 54.1666666667%; } .ds-col-lg-pull-13 { right: 54.1666666667%; } .ds-col-lg-offset-13 { margin-left: 54.1666666667%; } .ds-col-lg-order-13 { order: 13; } .ds-col-lg-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-lg-push-14 { left: 58.3333333333%; } .ds-col-lg-pull-14 { right: 58.3333333333%; } .ds-col-lg-offset-14 { margin-left: 58.3333333333%; } .ds-col-lg-order-14 { order: 14; } .ds-col-lg-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-lg-push-15 { left: 62.5%; } .ds-col-lg-pull-15 { right: 62.5%; } .ds-col-lg-offset-15 { margin-left: 62.5%; } .ds-col-lg-order-15 { order: 15; } .ds-col-lg-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-lg-push-16 { left: 66.6666666667%; } .ds-col-lg-pull-16 { right: 66.6666666667%; } .ds-col-lg-offset-16 { margin-left: 66.6666666667%; } .ds-col-lg-order-16 { order: 16; } .ds-col-lg-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-lg-push-17 { left: 70.8333333333%; } .ds-col-lg-pull-17 { right: 70.8333333333%; } .ds-col-lg-offset-17 { margin-left: 70.8333333333%; } .ds-col-lg-order-17 { order: 17; } .ds-col-lg-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-lg-push-18 { left: 75%; } .ds-col-lg-pull-18 { right: 75%; } .ds-col-lg-offset-18 { margin-left: 75%; } .ds-col-lg-order-18 { order: 18; } .ds-col-lg-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-lg-push-19 { left: 79.1666666667%; } .ds-col-lg-pull-19 { right: 79.1666666667%; } .ds-col-lg-offset-19 { margin-left: 79.1666666667%; } .ds-col-lg-order-19 { order: 19; } .ds-col-lg-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-lg-push-20 { left: 83.3333333333%; } .ds-col-lg-pull-20 { right: 83.3333333333%; } .ds-col-lg-offset-20 { margin-left: 83.3333333333%; } .ds-col-lg-order-20 { order: 20; } .ds-col-lg-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-lg-push-21 { left: 87.5%; } .ds-col-lg-pull-21 { right: 87.5%; } .ds-col-lg-offset-21 { margin-left: 87.5%; } .ds-col-lg-order-21 { order: 21; } .ds-col-lg-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-lg-push-22 { left: 91.6666666667%; } .ds-col-lg-pull-22 { right: 91.6666666667%; } .ds-col-lg-offset-22 { margin-left: 91.6666666667%; } .ds-col-lg-order-22 { order: 22; } .ds-col-lg-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-lg-push-23 { left: 95.8333333333%; } .ds-col-lg-pull-23 { right: 95.8333333333%; } .ds-col-lg-offset-23 { margin-left: 95.8333333333%; } .ds-col-lg-order-23 { order: 23; } .ds-col-lg-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-lg-push-24 { left: 100%; } .ds-col-lg-pull-24 { right: 100%; } .ds-col-lg-offset-24 { margin-left: 100%; } .ds-col-lg-order-24 { order: 24; } } @media (min-width: 1200px) { .ds-col-xl-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-xl-push-0 { left: auto; } .ds-col-xl-pull-0 { right: auto; } .ds-col-xl-offset-0 { margin-left: 0; } .ds-col-xl-order-0 { order: 0; } .ds-col-xl-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-xl-push-1 { left: 4.1666666667%; } .ds-col-xl-pull-1 { right: 4.1666666667%; } .ds-col-xl-offset-1 { margin-left: 4.1666666667%; } .ds-col-xl-order-1 { order: 1; } .ds-col-xl-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-xl-push-2 { left: 8.3333333333%; } .ds-col-xl-pull-2 { right: 8.3333333333%; } .ds-col-xl-offset-2 { margin-left: 8.3333333333%; } .ds-col-xl-order-2 { order: 2; } .ds-col-xl-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-xl-push-3 { left: 12.5%; } .ds-col-xl-pull-3 { right: 12.5%; } .ds-col-xl-offset-3 { margin-left: 12.5%; } .ds-col-xl-order-3 { order: 3; } .ds-col-xl-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-xl-push-4 { left: 16.6666666667%; } .ds-col-xl-pull-4 { right: 16.6666666667%; } .ds-col-xl-offset-4 { margin-left: 16.6666666667%; } .ds-col-xl-order-4 { order: 4; } .ds-col-xl-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-xl-push-5 { left: 20.8333333333%; } .ds-col-xl-pull-5 { right: 20.8333333333%; } .ds-col-xl-offset-5 { margin-left: 20.8333333333%; } .ds-col-xl-order-5 { order: 5; } .ds-col-xl-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-xl-push-6 { left: 25%; } .ds-col-xl-pull-6 { right: 25%; } .ds-col-xl-offset-6 { margin-left: 25%; } .ds-col-xl-order-6 { order: 6; } .ds-col-xl-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-xl-push-7 { left: 29.1666666667%; } .ds-col-xl-pull-7 { right: 29.1666666667%; } .ds-col-xl-offset-7 { margin-left: 29.1666666667%; } .ds-col-xl-order-7 { order: 7; } .ds-col-xl-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-xl-push-8 { left: 33.3333333333%; } .ds-col-xl-pull-8 { right: 33.3333333333%; } .ds-col-xl-offset-8 { margin-left: 33.3333333333%; } .ds-col-xl-order-8 { order: 8; } .ds-col-xl-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-xl-push-9 { left: 37.5%; } .ds-col-xl-pull-9 { right: 37.5%; } .ds-col-xl-offset-9 { margin-left: 37.5%; } .ds-col-xl-order-9 { order: 9; } .ds-col-xl-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-xl-push-10 { left: 41.6666666667%; } .ds-col-xl-pull-10 { right: 41.6666666667%; } .ds-col-xl-offset-10 { margin-left: 41.6666666667%; } .ds-col-xl-order-10 { order: 10; } .ds-col-xl-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-xl-push-11 { left: 45.8333333333%; } .ds-col-xl-pull-11 { right: 45.8333333333%; } .ds-col-xl-offset-11 { margin-left: 45.8333333333%; } .ds-col-xl-order-11 { order: 11; } .ds-col-xl-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-xl-push-12 { left: 50%; } .ds-col-xl-pull-12 { right: 50%; } .ds-col-xl-offset-12 { margin-left: 50%; } .ds-col-xl-order-12 { order: 12; } .ds-col-xl-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-xl-push-13 { left: 54.1666666667%; } .ds-col-xl-pull-13 { right: 54.1666666667%; } .ds-col-xl-offset-13 { margin-left: 54.1666666667%; } .ds-col-xl-order-13 { order: 13; } .ds-col-xl-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-xl-push-14 { left: 58.3333333333%; } .ds-col-xl-pull-14 { right: 58.3333333333%; } .ds-col-xl-offset-14 { margin-left: 58.3333333333%; } .ds-col-xl-order-14 { order: 14; } .ds-col-xl-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-xl-push-15 { left: 62.5%; } .ds-col-xl-pull-15 { right: 62.5%; } .ds-col-xl-offset-15 { margin-left: 62.5%; } .ds-col-xl-order-15 { order: 15; } .ds-col-xl-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-xl-push-16 { left: 66.6666666667%; } .ds-col-xl-pull-16 { right: 66.6666666667%; } .ds-col-xl-offset-16 { margin-left: 66.6666666667%; } .ds-col-xl-order-16 { order: 16; } .ds-col-xl-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-xl-push-17 { left: 70.8333333333%; } .ds-col-xl-pull-17 { right: 70.8333333333%; } .ds-col-xl-offset-17 { margin-left: 70.8333333333%; } .ds-col-xl-order-17 { order: 17; } .ds-col-xl-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-xl-push-18 { left: 75%; } .ds-col-xl-pull-18 { right: 75%; } .ds-col-xl-offset-18 { margin-left: 75%; } .ds-col-xl-order-18 { order: 18; } .ds-col-xl-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-xl-push-19 { left: 79.1666666667%; } .ds-col-xl-pull-19 { right: 79.1666666667%; } .ds-col-xl-offset-19 { margin-left: 79.1666666667%; } .ds-col-xl-order-19 { order: 19; } .ds-col-xl-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-xl-push-20 { left: 83.3333333333%; } .ds-col-xl-pull-20 { right: 83.3333333333%; } .ds-col-xl-offset-20 { margin-left: 83.3333333333%; } .ds-col-xl-order-20 { order: 20; } .ds-col-xl-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-xl-push-21 { left: 87.5%; } .ds-col-xl-pull-21 { right: 87.5%; } .ds-col-xl-offset-21 { margin-left: 87.5%; } .ds-col-xl-order-21 { order: 21; } .ds-col-xl-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-xl-push-22 { left: 91.6666666667%; } .ds-col-xl-pull-22 { right: 91.6666666667%; } .ds-col-xl-offset-22 { margin-left: 91.6666666667%; } .ds-col-xl-order-22 { order: 22; } .ds-col-xl-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-xl-push-23 { left: 95.8333333333%; } .ds-col-xl-pull-23 { right: 95.8333333333%; } .ds-col-xl-offset-23 { margin-left: 95.8333333333%; } .ds-col-xl-order-23 { order: 23; } .ds-col-xl-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-xl-push-24 { left: 100%; } .ds-col-xl-pull-24 { right: 100%; } .ds-col-xl-offset-24 { margin-left: 100%; } .ds-col-xl-order-24 { order: 24; } } @media (min-width: 1600px) { .ds-col-xxl-0 { display: none; } .ds-col-push-0 { left: auto; } .ds-col-pull-0 { right: auto; } .ds-col-xxl-push-0 { left: auto; } .ds-col-xxl-pull-0 { right: auto; } .ds-col-xxl-offset-0 { margin-left: 0; } .ds-col-xxl-order-0 { order: 0; } .ds-col-xxl-1 { display: block; flex: 0 0 4.1666666667%; max-width: 4.1666666667%; } .ds-col-xxl-push-1 { left: 4.1666666667%; } .ds-col-xxl-pull-1 { right: 4.1666666667%; } .ds-col-xxl-offset-1 { margin-left: 4.1666666667%; } .ds-col-xxl-order-1 { order: 1; } .ds-col-xxl-2 { display: block; flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-col-xxl-push-2 { left: 8.3333333333%; } .ds-col-xxl-pull-2 { right: 8.3333333333%; } .ds-col-xxl-offset-2 { margin-left: 8.3333333333%; } .ds-col-xxl-order-2 { order: 2; } .ds-col-xxl-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; } .ds-col-xxl-push-3 { left: 12.5%; } .ds-col-xxl-pull-3 { right: 12.5%; } .ds-col-xxl-offset-3 { margin-left: 12.5%; } .ds-col-xxl-order-3 { order: 3; } .ds-col-xxl-4 { display: block; flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-col-xxl-push-4 { left: 16.6666666667%; } .ds-col-xxl-pull-4 { right: 16.6666666667%; } .ds-col-xxl-offset-4 { margin-left: 16.6666666667%; } .ds-col-xxl-order-4 { order: 4; } .ds-col-xxl-5 { display: block; flex: 0 0 20.8333333333%; max-width: 20.8333333333%; } .ds-col-xxl-push-5 { left: 20.8333333333%; } .ds-col-xxl-pull-5 { right: 20.8333333333%; } .ds-col-xxl-offset-5 { margin-left: 20.8333333333%; } .ds-col-xxl-order-5 { order: 5; } .ds-col-xxl-6 { display: block; flex: 0 0 25%; max-width: 25%; } .ds-col-xxl-push-6 { left: 25%; } .ds-col-xxl-pull-6 { right: 25%; } .ds-col-xxl-offset-6 { margin-left: 25%; } .ds-col-xxl-order-6 { order: 6; } .ds-col-xxl-7 { display: block; flex: 0 0 29.1666666667%; max-width: 29.1666666667%; } .ds-col-xxl-push-7 { left: 29.1666666667%; } .ds-col-xxl-pull-7 { right: 29.1666666667%; } .ds-col-xxl-offset-7 { margin-left: 29.1666666667%; } .ds-col-xxl-order-7 { order: 7; } .ds-col-xxl-8 { display: block; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-col-xxl-push-8 { left: 33.3333333333%; } .ds-col-xxl-pull-8 { right: 33.3333333333%; } .ds-col-xxl-offset-8 { margin-left: 33.3333333333%; } .ds-col-xxl-order-8 { order: 8; } .ds-col-xxl-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; } .ds-col-xxl-push-9 { left: 37.5%; } .ds-col-xxl-pull-9 { right: 37.5%; } .ds-col-xxl-offset-9 { margin-left: 37.5%; } .ds-col-xxl-order-9 { order: 9; } .ds-col-xxl-10 { display: block; flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-col-xxl-push-10 { left: 41.6666666667%; } .ds-col-xxl-pull-10 { right: 41.6666666667%; } .ds-col-xxl-offset-10 { margin-left: 41.6666666667%; } .ds-col-xxl-order-10 { order: 10; } .ds-col-xxl-11 { display: block; flex: 0 0 45.8333333333%; max-width: 45.8333333333%; } .ds-col-xxl-push-11 { left: 45.8333333333%; } .ds-col-xxl-pull-11 { right: 45.8333333333%; } .ds-col-xxl-offset-11 { margin-left: 45.8333333333%; } .ds-col-xxl-order-11 { order: 11; } .ds-col-xxl-12 { display: block; flex: 0 0 50%; max-width: 50%; } .ds-col-xxl-push-12 { left: 50%; } .ds-col-xxl-pull-12 { right: 50%; } .ds-col-xxl-offset-12 { margin-left: 50%; } .ds-col-xxl-order-12 { order: 12; } .ds-col-xxl-13 { display: block; flex: 0 0 54.1666666667%; max-width: 54.1666666667%; } .ds-col-xxl-push-13 { left: 54.1666666667%; } .ds-col-xxl-pull-13 { right: 54.1666666667%; } .ds-col-xxl-offset-13 { margin-left: 54.1666666667%; } .ds-col-xxl-order-13 { order: 13; } .ds-col-xxl-14 { display: block; flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-col-xxl-push-14 { left: 58.3333333333%; } .ds-col-xxl-pull-14 { right: 58.3333333333%; } .ds-col-xxl-offset-14 { margin-left: 58.3333333333%; } .ds-col-xxl-order-14 { order: 14; } .ds-col-xxl-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; } .ds-col-xxl-push-15 { left: 62.5%; } .ds-col-xxl-pull-15 { right: 62.5%; } .ds-col-xxl-offset-15 { margin-left: 62.5%; } .ds-col-xxl-order-15 { order: 15; } .ds-col-xxl-16 { display: block; flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-col-xxl-push-16 { left: 66.6666666667%; } .ds-col-xxl-pull-16 { right: 66.6666666667%; } .ds-col-xxl-offset-16 { margin-left: 66.6666666667%; } .ds-col-xxl-order-16 { order: 16; } .ds-col-xxl-17 { display: block; flex: 0 0 70.8333333333%; max-width: 70.8333333333%; } .ds-col-xxl-push-17 { left: 70.8333333333%; } .ds-col-xxl-pull-17 { right: 70.8333333333%; } .ds-col-xxl-offset-17 { margin-left: 70.8333333333%; } .ds-col-xxl-order-17 { order: 17; } .ds-col-xxl-18 { display: block; flex: 0 0 75%; max-width: 75%; } .ds-col-xxl-push-18 { left: 75%; } .ds-col-xxl-pull-18 { right: 75%; } .ds-col-xxl-offset-18 { margin-left: 75%; } .ds-col-xxl-order-18 { order: 18; } .ds-col-xxl-19 { display: block; flex: 0 0 79.1666666667%; max-width: 79.1666666667%; } .ds-col-xxl-push-19 { left: 79.1666666667%; } .ds-col-xxl-pull-19 { right: 79.1666666667%; } .ds-col-xxl-offset-19 { margin-left: 79.1666666667%; } .ds-col-xxl-order-19 { order: 19; } .ds-col-xxl-20 { display: block; flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-col-xxl-push-20 { left: 83.3333333333%; } .ds-col-xxl-pull-20 { right: 83.3333333333%; } .ds-col-xxl-offset-20 { margin-left: 83.3333333333%; } .ds-col-xxl-order-20 { order: 20; } .ds-col-xxl-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; } .ds-col-xxl-push-21 { left: 87.5%; } .ds-col-xxl-pull-21 { right: 87.5%; } .ds-col-xxl-offset-21 { margin-left: 87.5%; } .ds-col-xxl-order-21 { order: 21; } .ds-col-xxl-22 { display: block; flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-col-xxl-push-22 { left: 91.6666666667%; } .ds-col-xxl-pull-22 { right: 91.6666666667%; } .ds-col-xxl-offset-22 { margin-left: 91.6666666667%; } .ds-col-xxl-order-22 { order: 22; } .ds-col-xxl-23 { display: block; flex: 0 0 95.8333333333%; max-width: 95.8333333333%; } .ds-col-xxl-push-23 { left: 95.8333333333%; } .ds-col-xxl-pull-23 { right: 95.8333333333%; } .ds-col-xxl-offset-23 { margin-left: 95.8333333333%; } .ds-col-xxl-order-23 { order: 23; } .ds-col-xxl-24 { display: block; flex: 0 0 100%; max-width: 100%; } .ds-col-xxl-push-24 { left: 100%; } .ds-col-xxl-pull-24 { right: 100%; } .ds-col-xxl-offset-24 { margin-left: 100%; } .ds-col-xxl-order-24 { order: 24; } } .ds-row-rtl { direction: rtl; } } @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-gray-200: oklch(92.8% 0.006 264.531); --color-white: #fff; --spacing: 0.25rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-wide: 0.025em; --leading-tight: 1.25; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type=button], [type=reset], [type=submit]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden=until-found])) { display: none !important; } } @layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .relative { position: relative; } .my-3 { margin-block: calc(var(--spacing) * 3); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-auto { margin-top: auto; } .mb-1 { margin-bottom: var(--spacing); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .inline { display: inline; } .inline-flex { display: inline-flex; } .table { display: table; } .aspect-square { aspect-ratio: 1 / 1; } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .h-20 { height: calc(var(--spacing) * 20); } .h-\[37px\] { height: 37px; } .h-full { height: 100%; } .min-h-0 { min-height: 0px; } .min-h-2 { min-height: calc(var(--spacing) * 2); } .min-h-\[94px\] { min-height: 94px; } .w-0\.5 { width: calc(var(--spacing) * 0.5); } .w-8 { width: calc(var(--spacing) * 8); } .w-\[98px\] { width: 98px; } .w-\[100px\] { width: 100px; } .w-\[159px\] { width: 159px; } .w-\[160px\] { width: 160px; } .w-\[220px\] { width: 220px; } .w-\[598px\] { width: 598px; } .w-full { width: 100%; } .max-w-\[486px\] { max-width: 486px; } .max-w-\[calc\(100\%-32px\)\] { max-width: calc(100% - 32px); } .min-w-0 { min-width: 0px; } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .border-collapse { border-collapse: collapse; } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .cursor-pointer { cursor: pointer; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-start { justify-content: flex-start; } .gap-0\.25 { gap: calc(var(--spacing) * 0.25); } .gap-1 { gap: var(--spacing); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-6 { gap: calc(var(--spacing) * 6); } .self-stretch { align-self: stretch; } .overflow-hidden { overflow: hidden; } .rounded { border-radius: 0.25rem; } .rounded-\[32px\] { border-radius: 32px; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0px; } .border-\[10px\] { border-style: var(--tw-border-style); border-width: 10px; } .border-t-1 { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-solid { --tw-border-style: solid; border-style: solid; } .border-\[\#0057E5\] { border-color: #0057E5; } .border-\[\#E8E8E8\] { border-color: #E8E8E8; } .border-\[rgba\(255\,255\,255\,0\.4\)\] { border-color: rgba(255, 255, 255, 0.4); } .border-gray-200 { border-color: var(--color-gray-200); } .bg-\[\#0057E5\] { background-color: #0057E5; } .bg-\[\#DBE9FF\] { background-color: #DBE9FF; } .bg-\[\#F2F3F4\] { background-color: #F2F3F4; } .bg-transparent { background-color: transparent; } .bg-white { background-color: var(--color-white); } .bg-\[linear-gradient\(180deg\,rgba\(26\,113\,255\,0\.15\)_0\%\,rgba\(255\,255\,255\,0\.15\)_100\%\)\] { background-image: linear-gradient( 180deg, rgba(26, 113, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%); } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .bg-no-repeat { background-repeat: no-repeat; } .object-contain { object-fit: contain; } .p-0 { padding: 0px; } .p-3 { padding: calc(var(--spacing) * 3); } .p-\[44px\] { padding: 44px; } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-\[56px\] { padding-inline: 56px; } .py-1 { padding-block: var(--spacing); } .py-12 { padding-block: calc(var(--spacing) * 12); } .pr-1 { padding-right: var(--spacing); } .pr-2 { padding-right: calc(var(--spacing) * 2); } .text-center { text-align: center; } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-6 { --tw-leading: calc(var(--spacing) * 6); line-height: calc(var(--spacing) * 6); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .text-nowrap { text-wrap: nowrap; } .text-\[\#1A2A45\] { color: #1A2A45; } .text-\[\#0057E5\] { color: #0057E5; } .text-\[\#667183\] { color: #667183; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .outline-none { --tw-outline-style: none; outline-style: none; } @media (hover: hover) { .hover\:bg-\[\#DBE9FF\]:hover { background-color: #DBE9FF; } } .focus-visible\:outline:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; } .focus-visible\:outline-2:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; } .focus-visible\:outline-offset-1:focus-visible { outline-offset: 1px; } .focus-visible\:outline-\[rgba\(10\,132\,255\,0\.45\)\]:focus-visible { outline-color: rgba(10, 132, 255, 0.45); } } html, body { height: 100%; margin: 0; } body { font-family: Inter, "Segoe UI", sans-serif; color: #1d2939; background: #fff; } button, input, textarea { font-family: inherit; } app-header { display: block; flex: none; } .fr-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 20px 0 16px; color: #fff; background: url(/assets/images/bg-header.png) center / cover no-repeat; } .fr-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .fr-header__logo { display: block; height: 48px; width: auto; } .fr-header__title { margin: 0; font-size: 20px; font-weight: 600; text-transform: uppercase; } .fr-user { display: flex; align-items: center; gap: 10px; flex: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .fr-user__avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%; background: #dbe9ff; color: #0057e5; font-size: 13px; font-weight: 600; } .fr-user__meta { display: flex; flex-direction: column; line-height: 1.25; } .fr-user__name { font-size: 14px; font-weight: 600; } .fr-user__role { font-size: 12px; opacity: 0.85; } .fr-workspace { --fr-sketch-max: 280px; --fr-sketch-pad: 12px; display: grid; grid-template-columns: minmax(152px, max-content) minmax(270px, 0.65fr) minmax(308px, 1fr); width: 100%; flex: 1; min-height: 0; min-width: 0; overflow: auto; background: #fff; } .fr-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-right: 2px solid #A3C6FF; } .fr-column:last-child { border-right: 0; } .fr-column__bar { display: flex; align-items: center; gap: 8px; flex: none; height: 60px; padding: 10px 16px 10px 20px; background: #c7dcff; } .fr-composer textarea::placeholder { color: #98a2b3; } .fr-btn:focus-visible { outline: 2px solid rgba(10, 132, 255, 0.45); outline-offset: 1px; } .fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap; } .fr-btn--primary { background: #0a84ff; color: #fff; } .fr-btn--primary:hover { background: #0874e6; } .fr-btn--outline { background: #fff; color: #344054; border-color: #d0d5dd; } .fr-btn--outline:hover { background: #f8fafc; } .fr-btn--quiet { height: 28px; padding: 0 10px; background: #f8fafc; color: #667183; border-color: #e4e7ec; font-size: 13px; font-weight: 500; } .fr-btn--quiet svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fr-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; } .fr-btn--md { height: 36px; min-width: 120px; padding: 0 18px; font-size: 14px; } .fr-filter { display: flex; flex: 1; min-height: 0; } .fr-filter-body { display: flex; flex: 1; min-width: 0; min-height: 0; max-width: 860px; overflow: hidden; opacity: 1; transition: max-width 300ms ease, opacity 300ms ease; } .is-collapsed .fr-filter-body { max-width: 0; opacity: 0; pointer-events: none; } .is-collapsed .fr-age, .is-collapsed .fr-limit { min-width: 0; flex-basis: 0; max-width: 0; } .is-collapsed .fr-column__bar { padding-right: 0; } .fr-nav { display: flex; flex-direction: column; flex: none; min-height: 0; border-right: 1px solid #eef2f6; width: 152px; } .fr-nav__main { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; padding: 16px 12px 0; flex: 1; } .fr-age { width: auto; flex: 1 1 220px; min-width: 220px; max-width: 280px; min-height: 0; overflow: auto; padding: 16px 12px; } .fr-limit { width: auto; flex: 1.15 1 250px; min-width: 250px; max-width: 420px; min-height: 0; overflow: auto; border-left: 1px solid #e6e8eb; padding: 16px; } .fr-limit app-empty-result-card > div { padding: 16px; } .fr-section-title { color: #0057E5; } .fr-empty { margin: 8px 0 12px; color: #1A2A45; font-size: 14px; text-align: center; font-style: italic; } .fr-empty--fill { display: grid; flex: 1; place-items: center; margin: 0; } .fr-sketch, .fr-results { display: flex; flex: 1; flex-direction: column; min-height: 0; } .fr-sketch__scroll, .fr-results__scroll { flex: 1; min-height: 0; overflow: auto; } .fr-sketch__scroll { padding: 16px var(--fr-sketch-pad); } .fr-sketch__body { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: var(--fr-sketch-max); margin-inline: auto; } .fr-sketch__portrait { display: flex; flex-direction: column; gap: 12px; } .fr-sketch__canvas { display: grid; width: 100%; container-type: inline-size; } .fr-sketch__drawing, .fr-sketch__layer--face, .fr-sketch__stack { grid-area: 1 / 1; } .fr-sketch__drawing { display: block; width: 100%; height: auto; align-self: start; border-radius: 12px; } .fr-sketch__layer { display: block; height: auto; object-fit: contain; pointer-events: none; } .fr-sketch__layer--face { z-index: 1; align-self: start; width: 100%; height: auto; aspect-ratio: 1 / 1; } .fr-sketch__stack { z-index: 2; display: flex; flex-direction: column; align-self: start; width: 100%; margin-top: 20%; pointer-events: none; } .fr-sketch__layer--eyebrow, .fr-sketch__layer--eyes, .fr-sketch__layer--lips { width: 100%; } .fr-sketch__nose { display: flex; justify-content: center; width: 100%; } .fr-sketch__layer--nose { width: auto; height: 22cqw; zoom: 3.3; } .fr-sketch__meta { display: flex; flex-direction: column; gap: 4px; } .fr-sketch__features { display: flex; flex-direction: column; gap: 8px; } .fr-sketch-line { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin: 0; } .fr-sketch-line__label, .fr-sketch-box__label { color: #8c8c8c; font-size: 14px; font-weight: 500; } .fr-sketch-line__label { line-height: 17px; } .fr-sketch-line__value { min-width: 0; color: #b3b8c1; font-size: 14px; font-style: italic; font-weight: 400; line-height: 20px; overflow-wrap: anywhere; } .fr-sketch-line__value.is-set { color: #404d64; font-size: 14px; font-style: normal; font-weight: 500; } .fr-sketch-box { display: flex; flex-direction: column; gap: 4px; } .fr-sketch-box__label { line-height: 20px; } .fr-sketch-box__value { display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: 12px; background: #f2f3f4; color: #b3b8c1; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; text-align: center; } .fr-sketch-box__value.is-filled { height: auto; } .fr-sketch-shot { display: block; object-fit: contain; } .fr-sketch-shot--face { width: 112px; height: 112px; } .fr-sketch-shot--wide { width: 112px; height: auto; } .fr-sketch-shot--tall { width: auto; height: 72px; } .fr-sketch__actions { display: flex; flex: none; gap: 16px; box-sizing: border-box; width: 100%; max-width: calc(var(--fr-sketch-max) + var(--fr-sketch-pad) * 2); margin-inline: auto; padding: 12px var(--fr-sketch-pad) 24px; background: #fff; } .fr-sketch__actions ds-button { flex: 1; min-width: 0; } .fr-results__scroll { padding: 16px 16px 8px; } .fr-results__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 12px; color: #1d2939; font-size: 14px; font-weight: 600; } .fr-results__hint { color: #667183; font-size: 14px; font-weight: 400; } .fr-avatar-grid-wrap { position: relative; } .fr-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; justify-items: center; } .fr-avatar-fade { position: absolute; top: 28%; right: 0; bottom: 0; left: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%); } .fr-avatar { display: grid; place-items: center; width: 100%; max-width: 250px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #E6E8EB; } .fr-avatar svg { width: 40px; height: 40px; fill: #c5cdd6; } .fr-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .fr-composer { display: flex; flex-direction: column; flex: none; margin: 8px 16px 24px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; } .fr-composer textarea { display: block; width: 100%; min-height: 84px; padding: 12px; border: 0; border-radius: 12px; resize: none; overflow-y: auto; outline: none; box-shadow: none; color: #1d2939; font-size: 13px; } .fr-composer textarea:focus, .fr-composer textarea:focus-visible { outline: none; border: 0; box-shadow: none; } .fr-composer__actions { display: flex; align-self: flex-end; padding: 0 8px 8px; } .custom-search { flex: 1; width: auto; min-width: 0; max-width: 560px; overflow: hidden; opacity: 1; transition: width 300ms ease, min-width 300ms ease, max-width 300ms ease, opacity 300ms ease, margin 300ms ease; border-radius: 8px; } .custom-search .ds-input-group__divider { height: 20px; margin-top: 8px; } .is-collapsed .custom-search { flex: none; width: 0; min-width: 0; max-width: 0; margin: 0; opacity: 0; pointer-events: none; } @media (min-width: 1440px) { .fr-workspace { --fr-sketch-max: 340px; --fr-sketch-pad: 16px; } .fr-age { flex-basis: 250px; min-width: 250px; } .fr-limit { flex-basis: 340px; min-width: 320px; max-width: 395px; } .fr-limit app-empty-result-card > div { padding: 28px; } .fr-avatar-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } @media (min-width: 1920px) { .fr-workspace { --fr-sketch-max: 380px; } .fr-limit { min-width: 360px; max-width: 420px; } .fr-limit app-empty-result-card > div { padding: 44px; } .custom-search { max-width: 560px; } .fr-avatar-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } } .ds-modal__body { border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; } .fr-match { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #f3f5f8; color: #1a2a45; font-size: 13px; line-height: 1.5; } .fr-match strong { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .fr-match ul { margin: 2px 0 0; list-style: disc; padding-left: 18px; } .fr-result-grid { min-height: 120px; } .fr-part-frame { display: flex; align-items: center; justify-content: center; width: 100%; object-fit: contain; background: #e4e7ec; border-radius: 8px; } .fr-part-frame--face, .fr-part-frame--age_gender { aspect-ratio: 112 / 112; } .fr-part-frame--eyes, .fr-part-frame--eyebrow { aspect-ratio: 112 / 20; } .fr-part-frame--nose { aspect-ratio: 80 / 112; } .fr-part-frame--lips { aspect-ratio: 112 / 76; } img.fr-part-frame { display: block; } .fr-result-card { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 3px solid transparent; border-radius: 12px; background: #c5cdd6; cursor: pointer; } .fr-result-card.is-selected { border-color: #0057e5; } .fr-result-card__media { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; border-radius: 10px; } .fr-result-card__fallback { display: flex; align-items: center; justify-content: center; } .fr-result-card__check { position: absolute; right: 8px; bottom: 8px; background-color: #fff; border-radius: 50%; border: none; padding: 0; } .fr-pinned { margin-bottom: 16px; } .fr-pinned__title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #0057E5; font-size: 16px; font-weight: 500; } .fr-avatar-grid--photos { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 16px; justify-content: stretch; justify-items: stretch; } .fr-avatar-grid--list { gap: 12px; } .fr-result-photo { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #e6e8eb; cursor: pointer; } .fr-avatar-grid--list .fr-result-photo { box-sizing: border-box; border: 2px solid transparent; } .fr-avatar-grid--list .fr-result-photo:hover { border-color: #0057e5; } .fr-result-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .fr-result-menu { width: 220px; } .fr-result-menu [ds-menu-item] { display: flex; align-items: center; gap: 8px; color: #1a2a45; font-size: 14px; line-height: 20px; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-border-style: solid; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-outline-style: solid; } } } /* angular:styles/global:styles */ /*# sourceMappingURL=styles.css.map */