Skip to content

Instantly share code, notes, and snippets.

@dylarcher

dylarcher/__tokens.md

Last active March 6, 2026 22:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dylarcher/7f33fd47071127555167fe5ff9a23bb7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dylarcher/7f33fd47071127555167fe5ff9a23bb7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
__tokens.md
tokens.css (flat, simple implementation)

A modern simplistic/flat implementation of the primitive/semantic Figma token exports.

  @layer reset, primitive, semantic;

  @layer reset {

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

  @layer primitive {
    :root {
      --color-black-50: #000000;
      --color-black-alpha-050-16: #00000029;
      --color-black-alpha-050-25: #00000040;
      --color-black-alpha-050-40: #00000066;
      --color-black-alpha-050-50: #00000080;
      --color-black-alpha-050-60: #00000099;
      --color-black-alpha-050-75: #000000BF;
      --color-black-alpha-050-8: #00000014;
      --color-black-050: #000000;
      --color-branding-blue-50: #0075C9;
      --color-branding-blue-050: #0075C9;
      --color-branding-light-blue-50: #A7CCEC;
      --color-branding-light-blue-050: #A7CCEC;
      --color-dark-grey-50: #F1F1F1;
      --color-dark-grey-100: #E2E1E3;
      --color-dark-grey-200: #C3C3C7;
      --color-dark-grey-300: #97989E;
      --color-dark-grey-400: #60646D;
      --color-dark-grey-500: #313E48;
      --color-dark-grey-600: #1E2A33;
      --color-dark-grey-700: #0C1720;
      --color-dark-grey-800: #000000;
      --color-dark-grey-050: #F1F1F1;
      --color-green-50: #F3F7F4;
      --color-green-100: #E1EBE6;
      --color-green-200: #BFD7CC;
      --color-green-300: #94C1AE;
      --color-green-400: #72B299;
      --color-green-500: #4AA486;
      --color-green-600: #3D8C71;
      --color-green-700: #317861;
      --color-green-800: #1E5D4A;
      --color-green-alpha-600-85: #3D8C71D9;
      --color-green-050: #F3F7F4;
      --color-light-grey-50: #F6F8F9;
      --color-light-grey-100: #E9EEF1;
      --color-light-grey-200: #CFD9E1;
      --color-light-grey-300: #AEBFCC;
      --color-light-grey-400: #94ABBB;
      --color-light-grey-500: #7B98AB;
      --color-light-grey-600: #67899F;
      --color-light-grey-700: #3E5D6F;
      --color-light-grey-800: #2F4653;
      --color-light-grey-alpha-800-90: #2F4653E5;
      --color-light-grey-lighten-10: #416174;
      --color-light-grey-lighten-010: #416174;
      --color-light-grey-050: #F6F8F9;
      --color-orange-50: #FFF7F4;
      --color-orange-100: #FEEAE1;
      --color-orange-200: #FCCFBB;
      --color-orange-300: #F9AF8D;
      --color-orange-400: #F79669;
      --color-orange-500: #F47E48;
      --color-orange-600: #CF6B3A;
      --color-orange-700: #AB582F;
      --color-orange-800: #85421F;
      --color-orange-alpha-600-85: #CF6B3AD9;
      --color-orange-050: #FFF7F4;
      --color-purple-50: #F6F6FB;
      --color-purple-100: #E6E6F2;
      --color-purple-200: #C7C9E2;
      --color-purple-300: #9FA4D0;
      --color-purple-400: #7F88C2;
      --color-purple-500: #5E6DB3;
      --color-purple-600: #4F5B97;
      --color-purple-700: #434D82;
      --color-purple-800: #313865;
      --color-purple-050: #F6F6FB;
      --color-red-50: #FEF4F2;
      --color-red-100: #FDDFDB;
      --color-red-200: #F9B7AF;
      --color-red-300: #EB8279;
      --color-red-400: #DE5552;
      --color-red-500: #CE202F;
      --color-red-600: #B8222A;
      --color-red-700: #A81623;
      --color-red-800: #75010A;
      --color-red-alpha-600-10: #D227301A;
      --color-red-alpha-600-85: #B8222AD9;
      --color-red-darken-6: #9E1D24;
      --color-red-darken-006: #9E1D24;
      --color-red-lighten-4: #DD2736;
      --color-red-lighten-6: #DF303F;
      --color-red-lighten-004: #DD2736;
      --color-red-lighten-006: #DF303F;
      --color-red-050: #FEF4F2;
      --color-special-blue: #2E3F9B;
      --color-special-green: #03826A;
      --color-special-light-grey: #DFE7F2;
      --color-special-orange: #BF5C00;
      --color-special-purple: #7157C7;
      --color-special-red: #C61349;
      --color-special-turquoise: #177682;
      --color-turquoise-50: #F1F6FB;
      --color-turquoise-100: #D8E8F6;
      --color-turquoise-200: #A5CAEB;
      --color-turquoise-300: #5FA8DC;
      --color-turquoise-400: #008DCE;
      --color-turquoise-500: #0071B3;
      --color-turquoise-600: #00629C;
      --color-turquoise-700: #005387;
      --color-turquoise-800: #003E6A;
      --color-turquoise-alpha-400-65: #008DCEA6;
      --color-turquoise-alpha-500-10: #0084D21A;
      --color-turquoise-alpha-600-85: #00629CD9;
      --color-turquoise-darken-6: #005E94;
      --color-turquoise-darken-006: #005E94;
      --color-turquoise-lighten-4: #007EC7;
      --color-turquoise-lighten-6: #0084D2;
      --color-turquoise-lighten-004: #007EC7;
      --color-turquoise-lighten-006: #0084D2;
      --color-turquoise-050: #F1F6FB;
      --color-white-50: #FFFFFF;
      --color-white-alpha-050-0: #FFFFFF00;
      --color-white-050: #FFFFFF;
      --color-yellow-50: #FCFAF2;
      --color-yellow-100: #F7F2E0;
      --color-yellow-200: #F2E9C7;
      --color-yellow-300: #EADB9E;
      --color-yellow-400: #E1CF77;
      --color-yellow-500: #DBC553;
      --color-yellow-600: #C0A242;
      --color-yellow-700: #A37F3B;
      --color-yellow-800: #805F29;
      --color-yellow-050: #FCFAF2;
      --font-family-base: "Source Sans 3", system-ui, sans-serif;
      --font-family-code: "Fira Code", ui-monospace, monospace;
      --font-size-50: 10px;
      --font-size-100: 12px;
      --font-size-125: 13px;
      --font-size-200: 14px;
      --font-size-300: 15px;
      --font-size-400: 16px;
      --font-size-500: 18px;
      --font-size-600: 20px;
      --font-size-700: 24px;
      --font-size-800: 26px;
      --font-size-900: 28px;
      --font-size-050: 10px;
      --font-track-50: 12px;
      --font-track-100: 14px;
      --font-track-200: 16px;
      --font-track-300: 18px;
      --font-track-400: 20px;
      --font-track-500: 24px;
      --font-track-600: 32px;
      --font-track-700: 36px;
      --font-track-800: 40px;
      --font-track-050: 12px;
      --font-gaps-50: 1px;
      --font-gaps-100: 2px;
      --font-gaps-050: 1px;
      --font-weight-regular: normal;
      --font-weight-italic: normal;
      /** Represents italic font-style (weight 400). Pair with font-style: italic. */
      --font-weight-semibold: semibold;
      --font-weight-bold: bold;
      --radius-1: 3px;
      --radius-2: 4px;
      --radius-3: 8px;
      --radius-4: 100px;
      --radius-001: 3px;
      --radius-002: 4px;
      --radius-003: 8px;
      --radius-004: 100px;
      --space-0: 0px;
      --space-1: 1px;
      --space-2: 2px;
      --space-3: 4px;
      --space-4: 6px;
      --space-5: 8px;
      --space-6: 9px;
      --space-7: 11px;
      --space-8: 12px;
      --space-9: 16px;
      --space-10: 20px;
      --space-11: 24px;
      --space-12: 30px;
      --space-13: 32px;
      --space-14: 40px;
      --space-000: 0px;
      --space-001: 1px;
      --space-002: 2px;
      --space-003: 4px;
      --space-004: 6px;
      --space-005: 8px;
      --space-006: 9px;
      --space-007: 11px;
      --space-008: 12px;
      --space-009: 16px;
      --space-010: 20px;
      --space-011: 24px;
      --space-012: 30px;
      --space-013: 32px;
      --space-014: 40px;
    }
  }

  @layer semantic {
    :root {
      --color-bg-action-primary-critical-hover: var(--color-red-lighten-4);
      --color-bg-action-primary-critical-idle: var(--color-red-600);
      --color-bg-action-primary-critical-pressed: var(--color-red-darken-6);
      --color-bg-action-primary-hover: var(--color-turquoise-lighten-4);
      --color-bg-action-primary-idle: var(--color-turquoise-500);
      --color-bg-action-primary-pressed: var(--color-turquoise-darken-6);
      --color-bg-action-secondary-critical-hover: var(--color-red-alpha-600-10);
      --color-bg-action-secondary-critical-idle: var(--color-white-alpha-050-0);
      --color-bg-action-secondary-critical-pressed: var(--color-white-alpha-050-0);
      --color-bg-action-secondary-hover: var(--color-turquoise-alpha-500-10);
      --color-bg-action-secondary-idle: var(--color-white-alpha-050-0);
      --color-bg-action-secondary-pressed: var(--color-white-alpha-050-0);
      --color-bg-control-default-disabled: var(--color-light-grey-200);
      --color-bg-control-default-dragging: var(--color-white-050);
      --color-bg-control-default-focus: var(--color-white-050);
      --color-bg-control-default-hover: var(--color-white-050);
      --color-bg-control-default-idle: var(--color-white-050);
      --color-bg-control-default-invalid: var(--color-white-050);
      --color-bg-control-default-readonly: var(--color-light-grey-100);
      --color-bg-control-inverse-disabled: var(--color-light-grey-200);
      --color-bg-control-inverse-focus: var(--color-dark-grey-600);
      --color-bg-control-inverse-hover: var(--color-dark-grey-600);
      --color-bg-control-inverse-idle: var(--color-dark-grey-500);
      --color-bg-control-inverse-invalid: var(--color-dark-grey-500);
      --color-bg-control-inverse-readonly: var(--color-light-grey-100);
      --color-bg-control-selected-hover: var(--color-turquoise-400);
      --color-bg-control-selected-idle: var(--color-turquoise-500);
      --color-bg-control-selected-readonly: var(--color-light-grey-100);
      --color-bg-control-subtle-destructive-hover: var(--color-red-050);
      --color-bg-control-subtle-destructive-idle: var(--color-white-050);
      --color-bg-control-subtle-hover: var(--color-turquoise-050);
      --color-bg-control-subtle-idle: var(--color-white-050);
      --color-bg-feedback-error-base: var(--color-red-600);
      --color-bg-feedback-error-inverse: var(--color-red-050);
      --color-bg-feedback-error-muted: var(--color-red-alpha-600-85);
      --color-bg-feedback-informational-base: var(--color-turquoise-600);
      --color-bg-feedback-informational-inverse: var(--color-turquoise-050);
      --color-bg-feedback-informational-muted: var(--color-turquoise-alpha-600-85);
      --color-bg-feedback-success-base: var(--color-green-700);
      --color-bg-feedback-success-inverse: var(--color-green-050);
      --color-bg-feedback-success-muted: var(--color-green-alpha-600-85);
      --color-bg-feedback-warning-base: var(--color-yellow-400);
      --color-bg-feedback-warning-inverse: var(--color-yellow-050);
      --color-bg-feedback-warning-muted: var(--color-orange-alpha-600-85);
      --color-bg-navigation-item-primary-active: var(--color-turquoise-050);
      --color-bg-navigation-item-primary-hover: var(--color-dark-grey-050);
      --color-bg-navigation-item-primary-idle: var(--color-white-050);
      --color-bg-navigation-item-secondary-active: var(--color-white-050);
      --color-bg-navigation-item-secondary-hover: var(--color-turquoise-050);
      --color-bg-navigation-item-secondary-idle: var(--color-white-050);
      --color-bg-surface-accent-primary: var(--color-purple-600);
      --color-bg-surface-accent-secondary: var(--color-light-grey-700);
      --color-bg-surface-accent-tertiary: var(--color-light-grey-300);
      --color-bg-surface-base: var(--color-white-050);
      --color-bg-surface-inverse: var(--color-dark-grey-500);
      --color-bg-surface-muted: var(--color-light-grey-100);
      --color-bg-surface-subtle: var(--color-light-grey-050);
      --color-border-action-secondary-critical-hover: var(--color-red-lighten-6);
      --color-border-action-secondary-critical-idle: var(--color-red-600);
      --color-border-action-secondary-critical-pressed: var(--color-red-darken-6);
      --color-border-action-secondary-hover: var(--color-turquoise-lighten-6);
      --color-border-action-secondary-idle: var(--color-turquoise-500);
      --color-border-action-secondary-pressed: var(--color-turquoise-darken-6);
      --color-border-control-default-critical-idle: var(--color-red-600);
      --color-border-control-default-dragging: var(--color-turquoise-300);
      --color-border-control-default-focus: var(--color-turquoise-400);
      --color-border-control-default-hover: var(--color-light-grey-700);
      --color-border-control-default-idle: var(--color-light-grey-300);
      --color-border-control-default-readonly: var(--color-light-grey-200);
      --color-border-control-subtle-hover: var(--color-turquoise-500);
      --color-border-control-subtle-idle: var(--color-light-grey-300);
      --color-border-feedback-error-base: var(--color-red-600);
      --color-border-feedback-error-muted: var(--color-red-200);
      --color-border-feedback-informational-muted: var(--color-turquoise-200);
      --color-border-feedback-success-muted: var(--color-green-200);
      --color-border-feedback-warning-muted: var(--color-yellow-300);
      --color-border-navigation-primary-active: var(--color-turquoise-darken-6);
      --color-border-surface-base: var(--color-light-grey-200);
      --color-border-surface-inverse: var(--color-light-grey-300);
      --color-border-surface-subtle: var(--color-light-grey-050);
      --color-icon-action-base-disabled: var(--color-light-grey-500);
      --color-icon-action-base-hover: var(--color-turquoise-lighten-4);
      --color-icon-action-base-idle: var(--color-dark-grey-500);
      --color-icon-action-dismiss-hover: var(--color-dark-grey-400);
      --color-icon-action-dismiss-idle: var(--color-dark-grey-500);
      --color-icon-action-dismiss-inverse-hover: var(--color-white-050);
      --color-icon-action-dismiss-inverse-idle: var(--color-white-050);
      --color-icon-action-dismiss-inverse-pressed: var(--color-white-050);
      --color-icon-action-dismiss-pressed: var(--color-dark-grey-600);
      --color-icon-action-hyperlink: var(--color-turquoise-500);
      --color-icon-action-primary-critical-hover: var(--color-white-050);
      --color-icon-action-primary-critical-idle: var(--color-white-050);
      --color-icon-action-primary-critical-pressed: var(--color-white-050);
      --color-icon-action-primary-hover: var(--color-white-050);
      --color-icon-action-primary-idle: var(--color-white-050);
      --color-icon-action-primary-pressed: var(--color-white-050);
      --color-icon-action-secondary-critical-hover: var(--color-red-lighten-6);
      --color-icon-action-secondary-critical-idle: var(--color-red-600);
      --color-icon-action-secondary-critical-pressed: var(--color-red-darken-6);
      --color-icon-action-secondary-hover: var(--color-turquoise-lighten-6);
      --color-icon-action-secondary-idle: var(--color-turquoise-500);
      --color-icon-action-secondary-pressed: var(--color-turquoise-darken-6);
      --color-icon-control-default: var(--color-light-grey-500);
      --color-icon-control-selected-hover: var(--color-white-050);
      --color-icon-control-selected-idle: var(--color-white-050);
      --color-icon-control-selected-readonly: var(--color-light-grey-700);
      --color-icon-control-strong: var(--color-dark-grey-500);
      --color-icon-feedback-error-base: var(--color-red-600);
      --color-icon-feedback-error-inverse: var(--color-white-050);
      --color-icon-feedback-informational-base: var(--color-turquoise-500);
      --color-icon-feedback-informational-inverse: var(--color-white-050);
      --color-icon-feedback-success-base: var(--color-green-600);
      --color-icon-feedback-success-inverse: var(--color-white-050);
      --color-icon-feedback-warning-base: var(--color-yellow-700);
      --color-icon-feedback-warning-inverse: var(--color-white-050);
      --color-icon-surface-base: var(--color-dark-grey-500);
      --color-icon-surface-strong: var(--color-dark-grey-600);
      --color-icon-surface-subtle: var(--color-light-grey-400);
      --color-text-action-base-disabled: var(--color-light-grey-500);
      --color-text-action-base-hover: var(--color-turquoise-lighten-4);
      --color-text-action-base-idle: var(--color-dark-grey-500);
      --color-text-action-hyperlink: var(--color-turquoise-500);
      --color-text-action-primary-critical-hover: var(--color-white-050);
      --color-text-action-primary-critical-idle: var(--color-white-050);
      --color-text-action-primary-critical-pressed: var(--color-white-050);
      --color-text-action-primary-hover: var(--color-white-050);
      --color-text-action-primary-idle: var(--color-white-050);
      --color-text-action-primary-pressed: var(--color-white-050);
      --color-text-action-secondary-critical-hover: var(--color-red-lighten-6);
      --color-text-action-secondary-critical-idle: var(--color-red-600);
      --color-text-action-secondary-critical-pressed: var(--color-red-darken-6);
      --color-text-action-secondary-hover: var(--color-turquoise-lighten-6);
      --color-text-action-secondary-idle: var(--color-turquoise-500);
      --color-text-action-secondary-pressed: var(--color-turquoise-darken-6);
      --color-text-control-default: var(--color-dark-grey-500);
      --color-text-control-affix: var(--color-light-grey-500);
      --color-text-control-destructive-hover: var(--color-red-lighten-4);
      --color-text-control-destructive-idle: var(--color-red-600);
      --color-text-control-instructions: var(--color-light-grey-700);
      --color-text-control-label-disabled: var(--color-light-grey-600);
      --color-text-control-label-idle: var(--color-dark-grey-500);
      --color-text-control-placeholder: var(--color-light-grey-400);
      --color-text-control-subtle-hover: var(--color-turquoise-600);
      --color-text-control-subtle-idle: var(--color-dark-grey-500);
      --color-text-feedback-error-base: var(--color-red-600);
      --color-text-feedback-error-inverse: var(--color-white-050);
      --color-text-feedback-informational-base: var(--color-turquoise-500);
      --color-text-feedback-informational-inverse: var(--color-white-050);
      --color-text-feedback-success-base: var(--color-green-600);
      --color-text-feedback-success-inverse: var(--color-white-050);
      --color-text-feedback-warning-base: var(--color-yellow-700);
      --color-text-feedback-warning-inverse: var(--color-white-050);
      --color-text-feedback-warning-strong: var(--color-dark-grey-500);
      --color-text-navigation-item-primary-active: var(--color-turquoise-500);
      --color-text-navigation-item-primary-hover: var(--color-turquoise-600);
      --color-text-navigation-item-primary-idle: var(--color-dark-grey-400);
      --color-text-navigation-item-secondary-idle: var(--color-dark-grey-500);
      --color-text-navigation-link: var(--color-dark-grey-400);
      --color-text-surface-base: var(--color-dark-grey-500);
      --color-text-surface-inverse: var(--color-white-050);
      --color-text-surface-subtle: var(--color-light-grey-700);
      --color-utility-placeholder-bg: var(--color-purple-100);
      --color-utility-placeholder-border: var(--color-purple-500);
      --color-utility-placeholder-text: var(--color-purple-500);
      --color-utility-sections-modules: var(--color-dark-grey-200);
      --color-utility-sections-flow: var(--color-dark-grey-400);
      --color-utility-sections-prototype: var(--color-turquoise-200);
      --font-weight-400-italic: var(--font-weight-italic);
      /** Represents italic font-style (weight 400). Pair with font-style: italic. */
      --radius-module-1: var(--radius-1);
      --radius-module-2: var(--radius-2);
      --radius-module-3: var(--radius-3);
      --radius-module-4: var(--radius-4);
      --radius-module-001: var(--radius-1);
      --radius-module-002: var(--radius-2);
      --radius-module-003: var(--radius-3);
      --radius-module-004: var(--radius-4);
      --space-module-1: var(--space-1);
      --space-module-2: var(--space-2);
      --space-module-3: var(--space-3);
      --space-module-4: var(--space-4);
      --space-module-5: var(--space-5);
      --space-module-6: var(--space-6);
      --space-module-7: var(--space-7);
      --space-module-8: var(--space-8);
      --space-module-9: var(--space-9);
      --space-module-10: var(--space-10);
      --space-module-11: var(--space-11);
      --space-module-12: var(--space-12);
      --space-module-13: var(--space-13);
      --space-module-14: var(--space-14);
      --space-module-001: var(--space-1);
      --space-module-002: var(--space-2);
      --space-module-003: var(--space-3);
      --space-module-004: var(--space-4);
      --space-module-005: var(--space-5);
      --space-module-006: var(--space-6);
      --space-module-007: var(--space-7);
      --space-module-008: var(--space-8);
      --space-module-009: var(--space-9);
      --space-module-010: var(--space-10);
      --space-module-011: var(--space-11);
      --space-module-012: var(--space-12);
      --space-module-013: var(--space-13);
      --space-module-014: var(--space-14);
      --space-layout-1: var(--space-3);
      --space-layout-2: var(--space-5);
      --space-layout-3: var(--space-9);
      --space-layout-4: var(--space-11);
      --space-layout-5: var(--space-13);
      --space-layout-6: var(--space-14);
      --space-layout-grid-gutter: var(--space-9);
      --space-layout-page-gap: var(--space-11);
      --space-layout-page-padding: var(--space-14);
      --space-layout-panel-gap: var(--space-13);
      --space-layout-panel-padding: var(--space-11);
      --space-layout-section-gap: var(--space-9);
      --space-layout-section-padding: var(--space-0);
      --space-layout-subsection-gap: var(--space-9);
      --space-layout-subsection-padding: var(--space-0);
      --space-layout-001: var(--space-3);
      --space-layout-002: var(--space-5);
      --space-layout-003: var(--space-9);
      --space-layout-004: var(--space-11);
      --space-layout-005: var(--space-13);
      --space-layout-006: var(--space-14);
    }
  }
tokens.css (nested, complex implementation)

A modern complex/nested implementation of the primitive/semantic Figma token exports.

  @layer global;

  @layer global {
    @layer reset, primitive, semantic;

    @layer reset {

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

    @layer primitive {
      @layer colors, typography, layout, motion, effects;

      @layer colors {
        @layer neutral, brand, special, palette, alphas, lighten, darken;

        @layer brand {
          :root {
            --color-branding-blue-50: #0075c9;
            --color-branding-light-blue-50: #a7ccec;
          }
        }

        @layer palette {
          @layer green, yellow, orange, purple, red, turquoise;

          @layer green {
            :root {
              --color-green-50: #f3f7f4;
              --color-green-100: #e1ebe6;
              --color-green-200: #bfd7cc;
              --color-green-300: #94c1ae;
              --color-green-400: #72b299;
              --color-green-500: #4aa486;
              --color-green-600: #3d8c71;
              --color-green-700: #317861;
              --color-green-800: #1e5d4a;
            }
          }

          @layer yellow {
            :root {
              --color-yellow-50: #fcfaf2;
              --color-yellow-100: #f7f2e0;
              --color-yellow-200: #f2e9c7;
              --color-yellow-300: #eadb9e;
              --color-yellow-400: #e1cf77;
              --color-yellow-500: #dbc553;
              --color-yellow-600: #c0a242;
              --color-yellow-700: #a37f3b;
              --color-yellow-800: #805f29;
            }
          }

          @layer orange {
            :root {
              --color-orange-50: #fff7f4;
              --color-orange-100: #feeae1;
              --color-orange-200: #fccfbb;
              --color-orange-300: #f9af8d;
              --color-orange-400: #f79669;
              --color-orange-500: #f47e48;
              --color-orange-600: #cf6b3a;
              --color-orange-700: #ab582f;
              --color-orange-800: #85421f;
            }
          }

          @layer purple {
            :root {
              --color-purple-50: #f6f6fb;
              --color-purple-100: #e6e6f2;
              --color-purple-200: #c7c9e2;
              --color-purple-300: #9fa4d0;
              --color-purple-400: #7f88c2;
              --color-purple-500: #5e6db3;
              --color-purple-600: #4f5b97;
              --color-purple-700: #434d82;
              --color-purple-800: #313865;
            }
          }

          @layer red {
            :root {
              --color-red-50: #fef4f2;
              --color-red-100: #fddfdb;
              --color-red-200: #f9b7af;
              --color-red-300: #eb8279;
              --color-red-400: #de5552;
              --color-red-500: #ce202f;
              --color-red-600: #b8222a;
              --color-red-700: #a81623;
              --color-red-800: #75010a;
            }
          }

          @layer turquoise {
            :root {
              --color-turquoise-50: #f1f6fb;
              --color-turquoise-100: #d8e8f6;
              --color-turquoise-200: #a5caeb;
              --color-turquoise-300: #5fa8dc;
              --color-turquoise-400: #008dce;
              --color-turquoise-500: #0071b3;
              --color-turquoise-600: #00629c;
              --color-turquoise-700: #005387;
              --color-turquoise-800: #003e6a;
            }
          }
        }

        @layer neutral {
          @layer black, dark-grey, light-grey, white;

          @layer black {
            :root {
              --color-black-50: #000000;
            }
          }

          @layer dark-grey {
            :root {
              --color-dark-grey-50: #f1f1f1;
              --color-dark-grey-100: #e2e1e3;
              --color-dark-grey-200: #c3c3c7;
              --color-dark-grey-300: #97989e;
              --color-dark-grey-400: #60646d;
              --color-dark-grey-500: #313e48;
              --color-dark-grey-600: #1e2a33;
              --color-dark-grey-700: #0c1720;
              --color-dark-grey-800: #000000;
            }
          }

          @layer light-grey {
            :root {
              --color-light-grey-50: #f6f8f9;
              --color-light-grey-100: #e9eef1;
              --color-light-grey-200: #cfd9e1;
              --color-light-grey-300: #aebfcc;
              --color-light-grey-400: #94abbb;
              --color-light-grey-500: #7b98ab;
              --color-light-grey-600: #67899f;
              --color-light-grey-700: #3e5d6f;
              --color-light-grey-800: #2f4653;
            }
          }

          @layer white {
            :root {
              --color-white-50: #ffffff;
            }
          }
        }

        @layer special {
          :root {
            --color-special-blue: #2e3f9b;
            --color-special-green: #03826a;
            --color-special-light-grey: #dfe7f2;
            --color-special-orange: #bf5c00;
            --color-special-purple: #7157c7;
            --color-special-red: #c61349;
            --color-special-turquoise: #177682;
          }
        }

        @layer alphas {
          @layer red, turquoise, green, orange, light-grey, black, white;

          @layer white {
            :root {
              --color-white-alpha-50-: #ffffff00;
            }
          }

          @layer black {
            :root {
              --color-black-alpha-50-16: #00000029;
              --color-black-alpha-50-25: #00000040;
              --color-black-alpha-50-40: #00000066;
              --color-black-alpha-50-50: #00000080;
              --color-black-alpha-50-60: #00000099;
              --color-black-alpha-50-75: #000000bf;
              --color-black-alpha-50-8: #00000014;
            }
          }

          @layer light-grey {
            :root {
              --color-light-grey-alpha-800-90: #2f4653e5;
            }
          }

          @layer red {
            :root {
              --color-red-alpha-600-10: #d227301a;
              --color-red-alpha-600-85: #b8222ad9;
            }
          }

          @layer turquoise {
            :root {
              --color-turquoise-alpha-500-10: #0084d21a;
              --color-turquoise-alpha-400-65: #008dcea6;
              --color-turquoise-alpha-600-85: #00629cd9;
            }
          }

          @layer green {
            :root {
              --color-green-alpha-600-85: #3d8c71d9;
            }
          }

          @layer orange {
            :root {
              --color-orange-alpha-600-85: #cf6b3ad9;
            }
          }
        }

        @layer lighten {
          @layer red, turquoise, light-grey;

          @layer light-grey {
            :root {
              --color-light-grey-lighten-10: #416174;
              --color-light-grey-lighten-10: #416174;
            }
          }

          @layer red {
            :root {
              --color-red-lighten-4: #dd2736;
              --color-red-lighten-6: #df303f;
            }

            @layer turquoise {
              :root {
                --color-turquoise-lighten-4: #007ec7;
                --color-turquoise-lighten-6: #0084d2;
              }
            }
          }
        }

        @layer darken {
          @layer red, turquoise;

          @layer red {
            :root {
              --color-red-darken-6: #9e1d24;
            }

            @layer turquoise {
              :root {
                --color-turquoise-darken-6: #005e94;
              }
            }
          }
        }
      }

      @layer typography {
        @layer typeface, size, track, gaps, weight;

        @layer typeface {
          :root {
            --font-family-base: "source sans 3", system-ui, sans-serif;
            --font-family-code: "fira code", ui-monospace, monospace;
          }
        }

        @layer size {
          :root {
            --font-size-50: 10px;
            --font-size-100: 12px;
            --font-size-125: 13px;
            --font-size-200: 14px;
            --font-size-300: 15px;
            --font-size-400: 16px;
            --font-size-500: 18px;
            --font-size-600: 20px;
            --font-size-700: 24px;
            --font-size-800: 26px;
            --font-size-900: 28px;
          }
        }

        @layer track {
          :root {
            --font-track-50: 12px;
            --font-track-100: 14px;
            --font-track-200: 16px;
            --font-track-300: 18px;
            --font-track-400: 20px;
            --font-track-500: 24px;
            --font-track-600: 32px;
            --font-track-700: 36px;
            --font-track-800: 40px;
          }
        }

        @layer gaps {
          :root {
            --font-gaps-50: 1px;
            --font-gaps-100: 2px;
          }
        }

        @layer weight {
          :root {
            --font-weight-regular: normal;
            --font-weight-italic: 400;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
          }
        }
      }

      @layer layout {
        @layer radius, spacing, depth;

        @layer radius {
          :root {
            --radius-1: 3px;
            --radius-2: 4px;
            --radius-3: 8px;
            --radius-4: 100px;
          }
        }

        @layer spacing {
          :root {
            --space-: 0px;
            --space-1: 1px;
            --space-2: 2px;
            --space-3: 4px;
            --space-4: 6px;
            --space-5: 8px;
            --space-6: 9px;
            --space-7: 11px;
            --space-8: 12px;
            --space-9: 16px;
            --space-10: 20px;
            --space-11: 24px;
            --space-12: 30px;
            --space-13: 32px;
            --space-14: 40px;
          }
        }

        @layer depth {
          :root {
            --z-base: 0;
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-overlay: 300;
            --z-modal: 400;
            --z-toast: 500;
          }
        }
      }

      @layer motion {
        @layer duration, easing;

        @layer duration {
          :root {
            --duration-instant: 0ms;
            --duration-fast: 100ms;
            --duration-normal: 200ms;
            --duration-slow: 400ms;
            --duration-slower: 600ms;
          }
        }

        @layer easing {
          :root {
            --ease-default: cubic-bezier(0.2, 0, 0.38, 0.9);
            --ease-in: cubic-bezier(0.4, 0, 1, 1);
            --ease-out: cubic-bezier(0, 0, 0.38, 0.9);
            --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
          }
        }
      }

      @layer effects {
        @layer shadow, opacity;

        @layer shadow {
          :root {
            --shadow-none: none;
            --shadow-xs: 0 1px 2px var(--color-black-alpha-50-8);
            --shadow-sm: 0 2px 4px var(--color-black-alpha-50-16);
            --shadow-md: 0 4px 8px var(--color-black-alpha-50-16);
            --shadow-lg: 0 8px 16px var(--color-black-alpha-50-16);
            --shadow-xl: 0 12px 24px var(--color-black-alpha-50-25);
          }
        }

        @layer opacity {
          :root {
            --opacity-disabled: 0.4;
            --opacity-muted: 0.6;
            --opacity-subtle: 0.8;
            --opacity-full: 1;
          }
        }
      }
    }

    @layer semantic {
      @layer backgrounds, borders, icons, text, formatting, structure, interactions, utils;

      @layer backgrounds {
        @layer action, control, feedback, nav, surface;

        @layer action {
          @layer primary, secondary;

          @layer primary {
            :root {
              --color-bg-action-primary-critical-hover: var(--color-red-lighten-4);
              --color-bg-action-primary-critical-idle: var(--color-red-600);
              --color-bg-action-primary-critical-pressed: var(--color-red-darken-6);
              --color-bg-action-primary-hover: var(--color-turquoise-lighten-4);
              --color-bg-action-primary-idle: var(--color-turquoise-500);
              --color-bg-action-primary-pressed: var(--color-turquoise-darken-6);
            }
          }

          @layer secondary {
            :root {
              --color-bg-action-secondary-critical-hover: var(--color-red-alpha-600-10);
              --color-bg-action-secondary-critical-idle: var(--color-white-alpha-50-0);
              --color-bg-action-secondary-critical-pressed: var(--color-white-alpha-50-0);
              --color-bg-action-secondary-hover: var(--color-turquoise-alpha-500-10);
              --color-bg-action-secondary-idle: var(--color-white-alpha-50-0);
              --color-bg-action-secondary-pressed: var(--color-white-alpha-50-0);
            }
          }
        }

        @layer control {
          @layer default, inverse, selected, subtle;

          @layer default {
            :root {
              --color-bg-control-default-disabled: var(--color-light-grey-200);
              --color-bg-control-default-dragging: var(--color-white-50);
              --color-bg-control-default-focus: var(--color-white-50);
              --color-bg-control-default-hover: var(--color-white-50);
              --color-bg-control-default-idle: var(--color-white-50);
              --color-bg-control-default-invalid: var(--color-white-50);
              --color-bg-control-default-readonly: var(--color-light-grey-100);
            }
          }

          @layer inverse {
            :root {
              --color-bg-control-inverse-disabled: var(--color-light-grey-200);
              --color-bg-control-inverse-focus: var(--color-dark-grey-600);
              --color-bg-control-inverse-hover: var(--color-dark-grey-600);
              --color-bg-control-inverse-idle: var(--color-dark-grey-500);
              --color-bg-control-inverse-invalid: var(--color-dark-grey-500);
              --color-bg-control-inverse-readonly: var(--color-light-grey-100);
            }
          }

          @layer selected {
            :root {
              --color-bg-control-selected-hover: var(--color-turquoise-400);
              --color-bg-control-selected-idle: var(--color-turquoise-500);
              --color-bg-control-selected-readonly: var(--color-light-grey-100);
            }
          }

          @layer subtle {
            :root {
              --color-bg-control-subtle-destructive-hover: var(--color-red-50);
              --color-bg-control-subtle-destructive-idle: var(--color-white-50);
              --color-bg-control-subtle-hover: var(--color-turquoise-50);
              --color-bg-control-subtle-idle: var(--color-white-50);
            }
          }
        }

        @layer feedback {
          @layer error, informational, success, warning;

          @layer error {
            :root {
              --color-bg-feedback-error-base: var(--color-red-600);
              --color-bg-feedback-error-inverse: var(--color-red-50);
              --color-bg-feedback-error-muted: var(--color-red-alpha-600-85);
            }
          }

          @layer informational {
            :root {
              --color-bg-feedback-informational-base: var(--color-turquoise-600);
              --color-bg-feedback-informational-inverse: var(--color-turquoise-50);
              --color-bg-feedback-informational-muted: var(--color-turquoise-alpha-600-85);
            }
          }

          @layer success {
            :root {
              --color-bg-feedback-success-base: var(--color-green-700);
              --color-bg-feedback-success-inverse: var(--color-green-50);
              --color-bg-feedback-success-muted: var(--color-green-alpha-600-85);
            }
          }

          @layer warning {
            :root {
              --color-bg-feedback-warning-base: var(--color-yellow-400);
              --color-bg-feedback-warning-inverse: var(--color-yellow-50);
              --color-bg-feedback-warning-muted: var(--color-orange-alpha-600-85);
            }
          }
        }

        @layer nav {
          @layer primary, secondary;

          @layer primary {
            :root {
              --color-bg-navigation-item-primary-active: var(--color-turquoise-50);
              --color-bg-navigation-item-primary-hover: var(--color-dark-grey-50);
              --color-bg-navigation-item-primary-idle: var(--color-white-50);
            }
          }

          @layer secondary {
            :root {
              --color-bg-navigation-item-secondary-active: var(--color-white-50);
              --color-bg-navigation-item-secondary-hover: var(--color-turquoise-50);
              --color-bg-navigation-item-secondary-idle: var(--color-white-50);
            }
          }
        }

        @layer surface {
          :root {
            --color-bg-surface-accent-primary: var(--color-purple-600);
            --color-bg-surface-accent-secondary: var(--color-light-grey-700);
            --color-bg-surface-accent-tertiary: var(--color-light-grey-300);
            --color-bg-surface-base: var(--color-white-50);
            --color-bg-surface-inverse: var(--color-dark-grey-500);
            --color-bg-surface-muted: var(--color-light-grey-100);
            --color-bg-surface-subtle: var(--color-light-grey-50);
          }
        }
      }

      @layer borders {
        @layer action, control, feedback, nav, surface;

        @layer action {
          :root {
            --color-border-action-secondary-critical-hover: var(--color-red-lighten-6);
            --color-border-action-secondary-critical-idle: var(--color-red-600);
            --color-border-action-secondary-critical-pressed: var(--color-red-darken-6);
            --color-border-action-secondary-hover: var(--color-turquoise-lighten-6);
            --color-border-action-secondary-idle: var(--color-turquoise-500);
            --color-border-action-secondary-pressed: var(--color-turquoise-darken-6);
          }
        }

        @layer control {
          @layer default, subtle;

          @layer default {
            :root {
              --color-border-control-default-critical-idle: var(--color-red-600);
              --color-border-control-default-dragging: var(--color-turquoise-300);
              --color-border-control-default-focus: var(--color-turquoise-400);
              --color-border-control-default-hover: var(--color-light-grey-700);
              --color-border-control-default-idle: var(--color-light-grey-300);
              --color-border-control-default-readonly: var(--color-light-grey-200);
            }
          }

          @layer subtle {
            :root {
              --color-border-control-subtle-hover: var(--color-turquoise-500);
              --color-border-control-subtle-idle: var(--color-light-grey-300);
            }
          }
        }

        @layer feedback {
          @layer error, informational, success, warning;

          @layer error {
            :root {
              --color-border-feedback-error-base: var(--color-red-600);
              --color-border-feedback-error-muted: var(--color-red-200);
            }
          }

          @layer informational {
            :root {
              --color-border-feedback-informational-muted: var(--color-turquoise-200);
            }
          }

          @layer success {
            :root {
              --color-border-feedback-success-muted: var(--color-green-200);
            }
          }

          @layer warning {
            :root {
              --color-border-feedback-warning-muted: var(--color-yellow-300);
            }
          }
        }

        @layer nav {
          :root {
            --color-border-navigation-primary-active: var(--color-turquoise-darken-6);
          }
        }

        @layer surface {
          :root {
            --color-border-surface-base: var(--color-light-grey-200);
            --color-border-surface-inverse: var(--color-light-grey-300);
            --color-border-surface-subtle: var(--color-light-grey-50);
          }
        }
      }

      @layer icons {
        @layer action, control, feedback, surface;

        @layer action {
          @layer base, dismiss, primary, secondary;

          @layer base {
            :root {
              --color-icon-action-base-disabled: var(--color-light-grey-500);
              --color-icon-action-base-hover: var(--color-turquoise-lighten-4);
              --color-icon-action-base-idle: var(--color-dark-grey-500);
              --color-icon-action-hyperlink: var(--color-turquoise-500);
            }
          }

          @layer dismiss {
            :root {
              --color-icon-action-dismiss-hover: var(--color-dark-grey-400);
              --color-icon-action-dismiss-idle: var(--color-dark-grey-500);
              --color-icon-action-dismiss-inverse-hover: var(--color-white-50);
              --color-icon-action-dismiss-inverse-idle: var(--color-white-50);
              --color-icon-action-dismiss-inverse-pressed: var(--color-white-50);
              --color-icon-action-dismiss-pressed: var(--color-dark-grey-600);
            }
          }

          @layer primary {
            :root {
              --color-icon-action-primary-critical-hover: var(--color-white-50);
              --color-icon-action-primary-critical-idle: var(--color-white-50);
              --color-icon-action-primary-critical-pressed: var(--color-white-50);
              --color-icon-action-primary-hover: var(--color-white-50);
              --color-icon-action-primary-idle: var(--color-white-50);
              --color-icon-action-primary-pressed: var(--color-white-50);
            }
          }

          @layer secondary {
            :root {
              --color-icon-action-secondary-critical-hover: var(--color-red-lighten-6);
              --color-icon-action-secondary-critical-idle: var(--color-red-600);
              --color-icon-action-secondary-critical-pressed: var(--color-red-darken-6);
              --color-icon-action-secondary-hover: var(--color-turquoise-lighten-6);
              --color-icon-action-secondary-idle: var(--color-turquoise-500);
              --color-icon-action-secondary-pressed: var(--color-turquoise-darken-6);
            }
          }
        }

        @layer control {
          @layer default, selected;

          @layer default {
            :root {
              --color-icon-control-default: var(--color-light-grey-500);
              --color-icon-control-strong: var(--color-dark-grey-500);
            }
          }

          @layer selected {
            :root {
              --color-icon-control-selected-hover: var(--color-white-50);
              --color-icon-control-selected-idle: var(--color-white-50);
              --color-icon-control-selected-readonly: var(--color-light-grey-700);
            }
          }
        }

        @layer feedback {
          @layer error, informational, success, warning;

          @layer error {
            :root {
              --color-icon-feedback-error-base: var(--color-red-600);
              --color-icon-feedback-error-inverse: var(--color-white-50);
            }
          }

          @layer informational {
            :root {
              --color-icon-feedback-informational-base: var(--color-turquoise-500);
              --color-icon-feedback-informational-inverse: var(--color-white-50);
            }
          }

          @layer success {
            :root {
              --color-icon-feedback-success-base: var(--color-green-600);
              --color-icon-feedback-success-inverse: var(--color-white-50);
            }
          }

          @layer warning {
            :root {
              --color-icon-feedback-warning-base: var(--color-yellow-700);
              --color-icon-feedback-warning-inverse: var(--color-white-50);
            }
          }
        }

        @layer surface {
          :root {
            --color-icon-surface-base: var(--color-dark-grey-500);
            --color-icon-surface-strong: var(--color-dark-grey-600);
            --color-icon-surface-subtle: var(--color-light-grey-400);
          }
        }
      }

      @layer text {
        @layer action, control, feedback, nav, surface;

        @layer action {
          @layer base, primary, secondary;

          @layer base {
            :root {
              --color-text-action-base-disabled: var(--color-light-grey-500);
              --color-text-action-base-hover: var(--color-turquoise-lighten-4);
              --color-text-action-base-idle: var(--color-dark-grey-500);
              --color-text-action-hyperlink: var(--color-turquoise-500);
            }
          }

          @layer primary {
            :root {
              --color-text-action-primary-critical-hover: var(--color-white-50);
              --color-text-action-primary-critical-idle: var(--color-white-50);
              --color-text-action-primary-critical-pressed: var(--color-white-50);
              --color-text-action-primary-hover: var(--color-white-50);
              --color-text-action-primary-idle: var(--color-white-50);
              --color-text-action-primary-pressed: var(--color-white-50);
            }
          }

          @layer secondary {
            :root {
              --color-text-action-secondary-critical-hover: var(--color-red-lighten-6);
              --color-text-action-secondary-critical-idle: var(--color-red-600);
              --color-text-action-secondary-critical-pressed: var(--color-red-darken-6);
              --color-text-action-secondary-hover: var(--color-turquoise-lighten-6);
              --color-text-action-secondary-idle: var(--color-turquoise-500);
              --color-text-action-secondary-pressed: var(--color-turquoise-darken-6);
            }
          }
        }

        @layer control {
          @layer default, destructive, label, subtle;

          @layer default {
            :root {
              --color-text-control-default: var(--color-dark-grey-500);
              --color-text-control-affix: var(--color-light-grey-500);
              --color-text-control-instructions: var(--color-light-grey-700);
              --color-text-control-placeholder: var(--color-light-grey-400);
            }
          }

          @layer destructive {
            :root {
              --color-text-control-destructive-hover: var(--color-red-lighten-4);
              --color-text-control-destructive-idle: var(--color-red-600);
            }
          }

          @layer label {
            :root {
              --color-text-control-label-disabled: var(--color-light-grey-600);
              --color-text-control-label-idle: var(--color-dark-grey-500);
            }
          }

          @layer subtle {
            :root {
              --color-text-control-subtle-hover: var(--color-turquoise-600);
              --color-text-control-subtle-idle: var(--color-dark-grey-500);
            }
          }
        }

        @layer feedback {
          @layer error, informational, success, warning;

          @layer error {
            :root {
              --color-text-feedback-error-base: var(--color-red-600);
              --color-text-feedback-error-inverse: var(--color-white-50);
            }
          }

          @layer informational {
            :root {
              --color-text-feedback-informational-base: var(--color-turquoise-500);
              --color-text-feedback-informational-inverse: var(--color-white-50);
            }
          }

          @layer success {
            :root {
              --color-text-feedback-success-base: var(--color-green-600);
              --color-text-feedback-success-inverse: var(--color-white-50);
            }
          }

          @layer warning {
            :root {
              --color-text-feedback-warning-base: var(--color-yellow-700);
              --color-text-feedback-warning-inverse: var(--color-white-50);
              --color-text-feedback-warning-strong: var(--color-dark-grey-500);
            }
          }
        }

        @layer nav {
          :root {
            --color-text-navigation-item-primary-active: var(--color-turquoise-500);
            --color-text-navigation-item-primary-hover: var(--color-turquoise-600);
            --color-text-navigation-item-primary-idle: var(--color-dark-grey-400);
            --color-text-navigation-item-secondary-idle: var(--color-dark-grey-500);
            --color-text-navigation-link: var(--color-dark-grey-400);
          }
        }

        @layer surface {
          :root {
            --color-text-surface-base: var(--color-dark-grey-500);
            --color-text-surface-inverse: var(--color-white-50);
            --color-text-surface-subtle: var(--color-light-grey-700);
          }
        }
      }

      @layer formatting {
        @layer weight;

        @layer weight {
          :root {
            /*? although italic is not a weight, it is associated (use w/italic font-style) */
            --font-weight-400-italic: var(--font-weight-italic);
          }
        }
      }

      @layer structure {
        @layer radius, spacing, elevation;

        @layer radius {
          :root {
            --radius-module-1: var(--radius-1);
            --radius-module-2: var(--radius-2);
            --radius-module-3: var(--radius-3);
            --radius-module-4: var(--radius-4);
          }
        }

        @layer spacing {
          @layer module, layout;

          @layer module {
            :root {
              --space-module-1: var(--space-1);
              --space-module-2: var(--space-2);
              --space-module-3: var(--space-3);
              --space-module-4: var(--space-4);
              --space-module-5: var(--space-5);
              --space-module-6: var(--space-6);
              --space-module-7: var(--space-7);
              --space-module-8: var(--space-8);
              --space-module-9: var(--space-9);
              --space-module-10: var(--space-10);
              --space-module-11: var(--space-11);
              --space-module-12: var(--space-12);
              --space-module-13: var(--space-13);
              --space-module-14: var(--space-14);
            }
          }

          @layer layout {
            :root {
              --space-layout-1: var(--space-3);
              --space-layout-2: var(--space-5);
              --space-layout-3: var(--space-9);
              --space-layout-4: var(--space-11);
              --space-layout-5: var(--space-13);
              --space-layout-6: var(--space-14);
              --space-layout-grid-gutter: var(--space-9);
              --space-layout-page-gap: var(--space-11);
              --space-layout-page-padding: var(--space-14);
              --space-layout-panel-gap: var(--space-13);
              --space-layout-panel-padding: var(--space-11);
              --space-layout-section-gap: var(--space-9);
              --space-layout-section-padding: var(--space-0);
              --space-layout-subsection-gap: var(--space-9);
              --space-layout-subsection-padding: var(--space-0);
            }
          }
        }

        @layer elevation {
          :root {
            --shadow-surface-base: var(--shadow-none);
            --shadow-surface-raised: var(--shadow-sm);
            --shadow-surface-overlay: var(--shadow-lg);
            --shadow-surface-modal: var(--shadow-xl);
          }
        }
      }

      @layer interactions {
        @layer focus, transition, disabled;

        @layer focus {
          :root {
            --focus-ring-width: 2px;
            --focus-ring-offset: 2px;
            --focus-ring-color: var(--color-turquoise-400);
            --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
          }
        }

        @layer transition {
          :root {
            --transition-colors: color, background-color, border-color, outline-color;
            --transition-transform: transform;
            --transition-opacity: opacity;
            --transition-shadow: box-shadow;
          }
        }

        @layer disabled {
          :root {
            --disabled-opacity: var(--opacity-disabled);
            --disabled-cursor: not-allowed;
          }
        }
      }

      @layer utils {
        @layer placeholder, sections;

        @layer placeholder {
          :root {
            --color-utility-placeholder-bg: var(--color-purple-100);
            --color-utility-placeholder-border: var(--color-purple-500);
            --color-utility-placeholder-text: var(--color-purple-500);
          }
        }

        @layer sections {
          :root {
            --color-utility-sections-modules: var(--color-dark-grey-200);
            --color-utility-sections-flow: var(--color-dark-grey-400);
            --color-utility-sections-prototype: var(--color-turquoise-200);
          }
        }
      }
    }
  }
global.css (static, native/vanilla CSS stylesheet)

Standard native CSS stylesheet with primitive/semantic Figma token exports.

  :root {
    --color-black-50: #000000;
    --color-black-alpha-050-16: #00000029;
    --color-black-alpha-050-25: #00000040;
    --color-black-alpha-050-40: #00000066;
    --color-black-alpha-050-50: #00000080;
    --color-black-alpha-050-60: #00000099;
    --color-black-alpha-050-75: #000000BF;
    --color-black-alpha-050-8: #00000014;
    --color-black-050: #000000;
    --color-branding-blue-50: #0075C9;
    --color-branding-blue-050: #0075C9;
    --color-branding-light-blue-50: #A7CCEC;
    --color-branding-light-blue-050: #A7CCEC;
    --color-dark-grey-50: #F1F1F1;
    --color-dark-grey-100: #E2E1E3;
    --color-dark-grey-200: #C3C3C7;
    --color-dark-grey-300: #97989E;
    --color-dark-grey-400: #60646D;
    --color-dark-grey-500: #313E48;
    --color-dark-grey-600: #1E2A33;
    --color-dark-grey-700: #0C1720;
    --color-dark-grey-800: #000000;
    --color-dark-grey-050: #F1F1F1;
    --color-green-50: #F3F7F4;
    --color-green-100: #E1EBE6;
    --color-green-200: #BFD7CC;
    --color-green-300: #94C1AE;
    --color-green-400: #72B299;
    --color-green-500: #4AA486;
    --color-green-600: #3D8C71;
    --color-green-700: #317861;
    --color-green-800: #1E5D4A;
    --color-green-alpha-600-85: #3D8C71D9;
    --color-green-050: #F3F7F4;
    --color-light-grey-50: #F6F8F9;
    --color-light-grey-100: #E9EEF1;
    --color-light-grey-200: #CFD9E1;
    --color-light-grey-300: #AEBFCC;
    --color-light-grey-400: #94ABBB;
    --color-light-grey-500: #7B98AB;
    --color-light-grey-600: #67899F;
    --color-light-grey-700: #3E5D6F;
    --color-light-grey-800: #2F4653;
    --color-light-grey-alpha-800-90: #2F4653E5;
    --color-light-grey-lighten-10: #416174;
    --color-light-grey-lighten-010: #416174;
    --color-light-grey-050: #F6F8F9;
    --color-orange-50: #FFF7F4;
    --color-orange-100: #FEEAE1;
    --color-orange-200: #FCCFBB;
    --color-orange-300: #F9AF8D;
    --color-orange-400: #F79669;
    --color-orange-500: #F47E48;
    --color-orange-600: #CF6B3A;
    --color-orange-700: #AB582F;
    --color-orange-800: #85421F;
    --color-orange-alpha-600-85: #CF6B3AD9;
    --color-orange-050: #FFF7F4;
    --color-purple-50: #F6F6FB;
    --color-purple-100: #E6E6F2;
    --color-purple-200: #C7C9E2;
    --color-purple-300: #9FA4D0;
    --color-purple-400: #7F88C2;
    --color-purple-500: #5E6DB3;
    --color-purple-600: #4F5B97;
    --color-purple-700: #434D82;
    --color-purple-800: #313865;
    --color-purple-050: #F6F6FB;
    --color-red-50: #FEF4F2;
    --color-red-100: #FDDFDB;
    --color-red-200: #F9B7AF;
    --color-red-300: #EB8279;
    --color-red-400: #DE5552;
    --color-red-500: #CE202F;
    --color-red-600: #B8222A;
    --color-red-700: #A81623;
    --color-red-800: #75010A;
    --color-red-alpha-600-10: #D227301A;
    --color-red-alpha-600-85: #B8222AD9;
    --color-red-darken-6: #9E1D24;
    --color-red-darken-006: #9E1D24;
    --color-red-lighten-4: #DD2736;
    --color-red-lighten-6: #DF303F;
    --color-red-lighten-004: #DD2736;
    --color-red-lighten-006: #DF303F;
    --color-red-050: #FEF4F2;
    --color-special-blue: #2E3F9B;
    --color-special-green: #03826A;
    --color-special-light-grey: #DFE7F2;
    --color-special-orange: #BF5C00;
    --color-special-purple: #7157C7;
    --color-special-red: #C61349;
    --color-special-turquoise: #177682;
    --color-turquoise-50: #F1F6FB;
    --color-turquoise-100: #D8E8F6;
    --color-turquoise-200: #A5CAEB;
    --color-turquoise-300: #5FA8DC;
    --color-turquoise-400: #008DCE;
    --color-turquoise-500: #0071B3;
    --color-turquoise-600: #00629C;
    --color-turquoise-700: #005387;
    --color-turquoise-800: #003E6A;
    --color-turquoise-alpha-400-65: #008DCEA6;
    --color-turquoise-alpha-500-10: #0084D21A;
    --color-turquoise-alpha-600-85: #00629CD9;
    --color-turquoise-darken-6: #005E94;
    --color-turquoise-darken-006: #005E94;
    --color-turquoise-lighten-4: #007EC7;
    --color-turquoise-lighten-6: #0084D2;
    --color-turquoise-lighten-004: #007EC7;
    --color-turquoise-lighten-006: #0084D2;
    --color-turquoise-050: #F1F6FB;
    --color-white-50: #FFFFFF;
    --color-white-alpha-050-0: #FFFFFF00;
    --color-white-050: #FFFFFF;
    --color-yellow-50: #FCFAF2;
    --color-yellow-100: #F7F2E0;
    --color-yellow-200: #F2E9C7;
    --color-yellow-300: #EADB9E;
    --color-yellow-400: #E1CF77;
    --color-yellow-500: #DBC553;
    --color-yellow-600: #C0A242;
    --color-yellow-700: #A37F3B;
    --color-yellow-800: #805F29;
    --color-yellow-050: #FCFAF2;
    --font-family-base: "Source Sans 3", system-ui, sans-serif;
    --font-family-code: "Fira Code", ui-monospace, monospace;
    --font-size-50: 10px;
    --font-size-100: 12px;
    --font-size-125: 13px;
    --font-size-200: 14px;
    --font-size-300: 15px;
    --font-size-400: 16px;
    --font-size-500: 18px;
    --font-size-600: 20px;
    --font-size-700: 24px;
    --font-size-800: 26px;
    --font-size-900: 28px;
    --font-size-050: 10px;
    --font-track-50: 12px;
    --font-track-100: 14px;
    --font-track-200: 16px;
    --font-track-300: 18px;
    --font-track-400: 20px;
    --font-track-500: 24px;
    --font-track-600: 32px;
    --font-track-700: 36px;
    --font-track-800: 40px;
    --font-track-050: 12px;
    --font-gaps-50: 1px;
    --font-gaps-100: 2px;
    --font-gaps-050: 1px;
    --font-weight-regular: normal;
    --font-weight-italic: normal; /** Represents italic font-style (weight 400). Pair with font-style: italic. */
    --font-weight-semibold: semibold;
    --font-weight-bold: bold;
    --radius-1: 3px;
    --radius-2: 4px;
    --radius-3: 8px;
    --radius-4: 100px;
    --radius-001: 3px;
    --radius-002: 4px;
    --radius-003: 8px;
    --radius-004: 100px;
    --space-0: 0px;
    --space-1: 1px;
    --space-2: 2px;
    --space-3: 4px;
    --space-4: 6px;
    --space-5: 8px;
    --space-6: 9px;
    --space-7: 11px;
    --space-8: 12px;
    --space-9: 16px;
    --space-10: 20px;
    --space-11: 24px;
    --space-12: 30px;
    --space-13: 32px;
    --space-14: 40px;
    --space-000: 0px;
    --space-001: 1px;
    --space-002: 2px;
    --space-003: 4px;
    --space-004: 6px;
    --space-005: 8px;
    --space-006: 9px;
    --space-007: 11px;
    --space-008: 12px;
    --space-009: 16px;
    --space-010: 20px;
    --space-011: 24px;
    --space-012: 30px;
    --space-013: 32px;
    --space-014: 40px;
    --color-bg-action-primary-critical-hover: var(--color-red-lighten-4);
    --color-bg-action-primary-critical-idle: var(--color-red-600);
    --color-bg-action-primary-critical-pressed: var(--color-red-darken-6);
    --color-bg-action-primary-hover: var(--color-turquoise-lighten-4);
    --color-bg-action-primary-idle: var(--color-turquoise-500);
    --color-bg-action-primary-pressed: var(--color-turquoise-darken-6);
    --color-bg-action-secondary-critical-hover: var(--color-red-alpha-600-10);
    --color-bg-action-secondary-critical-idle: var(--color-white-alpha-050-0);
    --color-bg-action-secondary-critical-pressed: var(--color-white-alpha-050-0);
    --color-bg-action-secondary-hover: var(--color-turquoise-alpha-500-10);
    --color-bg-action-secondary-idle: var(--color-white-alpha-050-0);
    --color-bg-action-secondary-pressed: var(--color-white-alpha-050-0);
    --color-bg-control-default-disabled: var(--color-light-grey-200);
    --color-bg-control-default-dragging: var(--color-white-050);
    --color-bg-control-default-focus: var(--color-white-050);
    --color-bg-control-default-hover: var(--color-white-050);
    --color-bg-control-default-idle: var(--color-white-050);
    --color-bg-control-default-invalid: var(--color-white-050);
    --color-bg-control-default-readonly: var(--color-light-grey-100);
    --color-bg-control-inverse-disabled: var(--color-light-grey-200);
    --color-bg-control-inverse-focus: var(--color-dark-grey-600);
    --color-bg-control-inverse-hover: var(--color-dark-grey-600);
    --color-bg-control-inverse-idle: var(--color-dark-grey-500);
    --color-bg-control-inverse-invalid: var(--color-dark-grey-500);
    --color-bg-control-inverse-readonly: var(--color-light-grey-100);
    --color-bg-control-selected-hover: var(--color-turquoise-400);
    --color-bg-control-selected-idle: var(--color-turquoise-500);
    --color-bg-control-selected-readonly: var(--color-light-grey-100);
    --color-bg-control-subtle-destructive-hover: var(--color-red-050);
    --color-bg-control-subtle-destructive-idle: var(--color-white-050);
    --color-bg-control-subtle-hover: var(--color-turquoise-050);
    --color-bg-control-subtle-idle: var(--color-white-050);
    --color-bg-feedback-error-base: var(--color-red-600);
    --color-bg-feedback-error-inverse: var(--color-red-050);
    --color-bg-feedback-error-muted: var(--color-red-alpha-600-85);
    --color-bg-feedback-informational-base: var(--color-turquoise-600);
    --color-bg-feedback-informational-inverse: var(--color-turquoise-050);
    --color-bg-feedback-informational-muted: var(--color-turquoise-alpha-600-85);
    --color-bg-feedback-success-base: var(--color-green-700);
    --color-bg-feedback-success-inverse: var(--color-green-050);
    --color-bg-feedback-success-muted: var(--color-green-alpha-600-85);
    --color-bg-feedback-warning-base: var(--color-yellow-400);
    --color-bg-feedback-warning-inverse: var(--color-yellow-050);
    --color-bg-feedback-warning-muted: var(--color-orange-alpha-600-85);
    --color-bg-navigation-item-primary-active: var(--color-turquoise-050);
    --color-bg-navigation-item-primary-hover: var(--color-dark-grey-050);
    --color-bg-navigation-item-primary-idle: var(--color-white-050);
    --color-bg-navigation-item-secondary-active: var(--color-white-050);
    --color-bg-navigation-item-secondary-hover: var(--color-turquoise-050);
    --color-bg-navigation-item-secondary-idle: var(--color-white-050);
    --color-bg-surface-accent-primary: var(--color-purple-600);
    --color-bg-surface-accent-secondary: var(--color-light-grey-700);
    --color-bg-surface-accent-tertiary: var(--color-light-grey-300);
    --color-bg-surface-base: var(--color-white-050);
    --color-bg-surface-inverse: var(--color-dark-grey-500);
    --color-bg-surface-muted: var(--color-light-grey-100);
    --color-bg-surface-subtle: var(--color-light-grey-050);
    --color-border-action-secondary-critical-hover: var(--color-red-lighten-6);
    --color-border-action-secondary-critical-idle: var(--color-red-600);
    --color-border-action-secondary-critical-pressed: var(--color-red-darken-6);
    --color-border-action-secondary-hover: var(--color-turquoise-lighten-6);
    --color-border-action-secondary-idle: var(--color-turquoise-500);
    --color-border-action-secondary-pressed: var(--color-turquoise-darken-6);
    --color-border-control-default-critical-idle: var(--color-red-600);
    --color-border-control-default-dragging: var(--color-turquoise-300);
    --color-border-control-default-focus: var(--color-turquoise-400);
    --color-border-control-default-hover: var(--color-light-grey-700);
    --color-border-control-default-idle: var(--color-light-grey-300);
    --color-border-control-default-readonly: var(--color-light-grey-200);
    --color-border-control-subtle-hover: var(--color-turquoise-500);
    --color-border-control-subtle-idle: var(--color-light-grey-300);
    --color-border-feedback-error-base: var(--color-red-600);
    --color-border-feedback-error-muted: var(--color-red-200);
    --color-border-feedback-informational-muted: var(--color-turquoise-200);
    --color-border-feedback-success-muted: var(--color-green-200);
    --color-border-feedback-warning-muted: var(--color-yellow-300);
    --color-border-navigation-primary-active: var(--color-turquoise-darken-6);
    --color-border-surface-base: var(--color-light-grey-200);
    --color-border-surface-inverse: var(--color-light-grey-300);
    --color-border-surface-subtle: var(--color-light-grey-050);
    --color-icon-action-base-disabled: var(--color-light-grey-500);
    --color-icon-action-base-hover: var(--color-turquoise-lighten-4);
    --color-icon-action-base-idle: var(--color-dark-grey-500);
    --color-icon-action-dismiss-hover: var(--color-dark-grey-400);
    --color-icon-action-dismiss-idle: var(--color-dark-grey-500);
    --color-icon-action-dismiss-inverse-hover: var(--color-white-050);
    --color-icon-action-dismiss-inverse-idle: var(--color-white-050);
    --color-icon-action-dismiss-inverse-pressed: var(--color-white-050);
    --color-icon-action-dismiss-pressed: var(--color-dark-grey-600);
    --color-icon-action-hyperlink: var(--color-turquoise-500);
    --color-icon-action-primary-critical-hover: var(--color-white-050);
    --color-icon-action-primary-critical-idle: var(--color-white-050);
    --color-icon-action-primary-critical-pressed: var(--color-white-050);
    --color-icon-action-primary-hover: var(--color-white-050);
    --color-icon-action-primary-idle: var(--color-white-050);
    --color-icon-action-primary-pressed: var(--color-white-050);
    --color-icon-action-secondary-critical-hover: var(--color-red-lighten-6);
    --color-icon-action-secondary-critical-idle: var(--color-red-600);
    --color-icon-action-secondary-critical-pressed: var(--color-red-darken-6);
    --color-icon-action-secondary-hover: var(--color-turquoise-lighten-6);
    --color-icon-action-secondary-idle: var(--color-turquoise-500);
    --color-icon-action-secondary-pressed: var(--color-turquoise-darken-6);
    --color-icon-control-default: var(--color-light-grey-500);
    --color-icon-control-selected-hover: var(--color-white-050);
    --color-icon-control-selected-idle: var(--color-white-050);
    --color-icon-control-selected-readonly: var(--color-light-grey-700);
    --color-icon-control-strong: var(--color-dark-grey-500);
    --color-icon-feedback-error-base: var(--color-red-600);
    --color-icon-feedback-error-inverse: var(--color-white-050);
    --color-icon-feedback-informational-base: var(--color-turquoise-500);
    --color-icon-feedback-informational-inverse: var(--color-white-050);
    --color-icon-feedback-success-base: var(--color-green-600);
    --color-icon-feedback-success-inverse: var(--color-white-050);
    --color-icon-feedback-warning-base: var(--color-yellow-700);
    --color-icon-feedback-warning-inverse: var(--color-white-050);
    --color-icon-surface-base: var(--color-dark-grey-500);
    --color-icon-surface-strong: var(--color-dark-grey-600);
    --color-icon-surface-subtle: var(--color-light-grey-400);
    --color-text-action-base-disabled: var(--color-light-grey-500);
    --color-text-action-base-hover: var(--color-turquoise-lighten-4);
    --color-text-action-base-idle: var(--color-dark-grey-500);
    --color-text-action-hyperlink: var(--color-turquoise-500);
    --color-text-action-primary-critical-hover: var(--color-white-050);
    --color-text-action-primary-critical-idle: var(--color-white-050);
    --color-text-action-primary-critical-pressed: var(--color-white-050);
    --color-text-action-primary-hover: var(--color-white-050);
    --color-text-action-primary-idle: var(--color-white-050);
    --color-text-action-primary-pressed: var(--color-white-050);
    --color-text-action-secondary-critical-hover: var(--color-red-lighten-6);
    --color-text-action-secondary-critical-idle: var(--color-red-600);
    --color-text-action-secondary-critical-pressed: var(--color-red-darken-6);
    --color-text-action-secondary-hover: var(--color-turquoise-lighten-6);
    --color-text-action-secondary-idle: var(--color-turquoise-500);
    --color-text-action-secondary-pressed: var(--color-turquoise-darken-6);
    --color-text-control-default: var(--color-dark-grey-500);
    --color-text-control-affix: var(--color-light-grey-500);
    --color-text-control-destructive-hover: var(--color-red-lighten-4);
    --color-text-control-destructive-idle: var(--color-red-600);
    --color-text-control-instructions: var(--color-light-grey-700);
    --color-text-control-label-disabled: var(--color-light-grey-600);
    --color-text-control-label-idle: var(--color-dark-grey-500);
    --color-text-control-placeholder: var(--color-light-grey-400);
    --color-text-control-subtle-hover: var(--color-turquoise-600);
    --color-text-control-subtle-idle: var(--color-dark-grey-500);
    --color-text-feedback-error-base: var(--color-red-600);
    --color-text-feedback-error-inverse: var(--color-white-050);
    --color-text-feedback-informational-base: var(--color-turquoise-500);
    --color-text-feedback-informational-inverse: var(--color-white-050);
    --color-text-feedback-success-base: var(--color-green-600);
    --color-text-feedback-success-inverse: var(--color-white-050);
    --color-text-feedback-warning-base: var(--color-yellow-700);
    --color-text-feedback-warning-inverse: var(--color-white-050);
    --color-text-feedback-warning-strong: var(--color-dark-grey-500);
    --color-text-navigation-item-primary-active: var(--color-turquoise-500);
    --color-text-navigation-item-primary-hover: var(--color-turquoise-600);
    --color-text-navigation-item-primary-idle: var(--color-dark-grey-400);
    --color-text-navigation-item-secondary-idle: var(--color-dark-grey-500);
    --color-text-navigation-link: var(--color-dark-grey-400);
    --color-text-surface-base: var(--color-dark-grey-500);
    --color-text-surface-inverse: var(--color-white-050);
    --color-text-surface-subtle: var(--color-light-grey-700);
    --color-utility-placeholder-bg: var(--color-purple-100);
    --color-utility-placeholder-border: var(--color-purple-500);
    --color-utility-placeholder-text: var(--color-purple-500);
    --color-utility-sections-modules: var(--color-dark-grey-200);
    --color-utility-sections-flow: var(--color-dark-grey-400);
    --color-utility-sections-prototype: var(--color-turquoise-200);
    --font-weight-400-italic: var(--font-weight-italic); /** Represents italic font-style (weight 400). Pair with font-style: italic. */
    --radius-module-1: var(--radius-1);
    --radius-module-2: var(--radius-2);
    --radius-module-3: var(--radius-3);
    --radius-module-4: var(--radius-4);
    --radius-module-001: var(--radius-1);
    --radius-module-002: var(--radius-2);
    --radius-module-003: var(--radius-3);
    --radius-module-004: var(--radius-4);
    --space-module-1: var(--space-1);
    --space-module-2: var(--space-2);
    --space-module-3: var(--space-3);
    --space-module-4: var(--space-4);
    --space-module-5: var(--space-5);
    --space-module-6: var(--space-6);
    --space-module-7: var(--space-7);
    --space-module-8: var(--space-8);
    --space-module-9: var(--space-9);
    --space-module-10: var(--space-10);
    --space-module-11: var(--space-11);
    --space-module-12: var(--space-12);
    --space-module-13: var(--space-13);
    --space-module-14: var(--space-14);
    --space-module-001: var(--space-1);
    --space-module-002: var(--space-2);
    --space-module-003: var(--space-3);
    --space-module-004: var(--space-4);
    --space-module-005: var(--space-5);
    --space-module-006: var(--space-6);
    --space-module-007: var(--space-7);
    --space-module-008: var(--space-8);
    --space-module-009: var(--space-9);
    --space-module-010: var(--space-10);
    --space-module-011: var(--space-11);
    --space-module-012: var(--space-12);
    --space-module-013: var(--space-13);
    --space-module-014: var(--space-14);
    --space-layout-1: var(--space-3);
    --space-layout-2: var(--space-5);
    --space-layout-3: var(--space-9);
    --space-layout-4: var(--space-11);
    --space-layout-5: var(--space-13);
    --space-layout-6: var(--space-14);
    --space-layout-grid-gutter: var(--space-9);
    --space-layout-page-gap: var(--space-11);
    --space-layout-page-padding: var(--space-14);
    --space-layout-panel-gap: var(--space-13);
    --space-layout-panel-padding: var(--space-11);
    --space-layout-section-gap: var(--space-9);
    --space-layout-section-padding: var(--space-0);
    --space-layout-subsection-gap: var(--space-9);
    --space-layout-subsection-padding: var(--space-0);
    --space-layout-001: var(--space-3);
    --space-layout-002: var(--space-5);
    --space-layout-003: var(--space-9);
    --space-layout-004: var(--space-11);
    --space-layout-005: var(--space-13);
    --space-layout-006: var(--space-14);
  }
Raw
scoped.css
/**
* capitalrx-components-2.0 — Consolidated Component Styles
* Auto-generated from SCSS compilation + styled-components extraction.
*
* This file contains all vanilla CSS for the capitalrx-components-2.0 library,
* excluding lib/components/ (legacy). Organized by category:
* 1. Brand (Icon, Illustration)
* 2. Layout (Grid, Shelf, Stack)
* 3. Typography (Body, Bold, Heading, etc.)
* 4. General (Alert, Badge, Button, Drawer, etc.)
* 5. Forms (Checkbox, Dropdown, Textbox, etc.)
* 6. FindBestPriceTool
* 7. Styled Components (CSS-in-JS equivalents)
*/
/* ==========================================================================
BRAND
========================================================================== */
/* --- brand/Icon --- */
.icon.black path,
.icon.black circle,
.icon.black g {
fill: #000000;
}
.icon.white path,
.icon.white circle,
.icon.white g {
fill: #FFFFFF;
}
.icon.darkblue path,
.icon.darkblue circle,
.icon.darkblue g {
fill: #1E4488;
}
.icon.turquoise path,
.icon.turquoise circle,
.icon.turquoise g {
fill: #0071B3;
}
.icon.lightgrey path,
.icon.lightgrey circle,
.icon.lightgrey g {
fill: #AEBFCC;
}
.icon.red path,
.icon.red circle,
.icon.red g {
fill: #CE202F;
}
.icon.green path,
.icon.green circle,
.icon.green g {
fill: #4AA486;
}
.icon.orange path,
.icon.orange circle,
.icon.orange g {
fill: #F47E48;
}
.icon.darkgreen path,
.icon.darkgreen circle,
.icon.darkgreen g {
fill: #1E5D4A;
}
.icon.darkgrey path,
.icon.darkgrey circle,
.icon.darkgrey g {
fill: #3E5D6F;
}
.icon.xsmall {
width: 12px;
}
.icon.small {
width: 16px;
}
.icon.medium {
width: 20px;
}
/* --- brand/Illustration --- */
.illustration {
width: 100%;
height: 100%;
}
/* ==========================================================================
LAYOUT
========================================================================== */
/* --- layout/Grid --- */
.Grid {
display: grid;
grid-template-columns: repeat(12, minmax(auto, 1fr));
column-gap: 1rem;
}
.Grid.space-none {
row-gap: 0rem;
}
.Grid.space-mini {
row-gap: 0.25rem;
}
.Grid.space-small {
row-gap: 0.5rem;
}
.Grid.space-medium {
row-gap: 1rem;
}
.Grid.space-medium-large {
row-gap: 1.5rem;
}
.Grid.space-large {
row-gap: 2rem;
}
.Cell {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
}
.Cell > *:not(dialog) {
margin: 0 !important;
}
/* --- layout/Shelf --- */
.Shelf {
display: flex;
flex-direction: row;
justify-content: center;
}
.Shelf.inline {
display: inline-flex;
}
.Shelf > *:not(.Spacer, dialog) {
margin: 0 !important;
}
.Shelf.wrap {
flex-wrap: wrap;
}
.Shelf.wrap.align-left {
justify-content: flex-start;
}
.Shelf.wrap.align-center {
justify-content: center;
}
.Shelf.wrap.align-right {
justify-content: flex-end;
}
.Shelf.wrap.align-stretch {
justify-content: space-between;
}
.Shelf.wrap.align-top {
justify-content: flex-start;
}
.Shelf.wrap.align-bottom {
justify-content: flex-end;
}
.Shelf.wrap.align-span {
justify-content: space-between;
}
.Shelf.responsive.narrow {
flex-direction: column;
}
.Shelf.responsive.narrow.align-left {
align-items: flex-start;
}
.Shelf.responsive.narrow.align-center {
align-items: center;
}
.Shelf.responsive.narrow.align-right {
align-items: flex-end;
}
.Shelf.responsive.narrow.align-stretch, .Shelf.responsive.narrow.align-span {
align-items: stretch;
}
.Shelf.responsive.narrow.align-top {
align-items: flex-start;
}
.Shelf.responsive.narrow.align-bottom {
align-items: flex-end;
}
.Shelf.responsive.narrow.reverse {
flex-direction: column-reverse;
}
.Shelf.space-none {
gap: 0rem;
}
.Shelf.space-none > .Spacer {
margin-right: 0rem;
}
.Shelf.space-mini {
gap: 0.25rem;
}
.Shelf.space-mini > .Spacer {
margin-right: -0.25rem;
}
.Shelf.space-small {
gap: 0.5rem;
}
.Shelf.space-small > .Spacer {
margin-right: -0.5rem;
}
.Shelf.space-medium {
gap: 1rem;
}
.Shelf.space-medium > .Spacer {
margin-right: -1rem;
}
.Shelf.space-medium-large {
gap: 1.5rem;
}
.Shelf.space-medium-large > .Spacer {
margin-right: -1.5rem;
}
.Shelf.space-large {
gap: 2rem;
}
.Shelf.space-large > .Spacer {
margin-right: -2rem;
}
@container (max-width: var(--shelf-responsive-breakpoint, 768px)) {
.Shelf.responsive.space-none > .Spacer {
margin-right: 0;
margin-bottom: 0rem;
}
.Shelf.responsive.space-mini > .Spacer {
margin-right: 0;
margin-bottom: -0.25rem;
}
.Shelf.responsive.space-small > .Spacer {
margin-right: 0;
margin-bottom: -0.5rem;
}
.Shelf.responsive.space-medium > .Spacer {
margin-right: 0;
margin-bottom: -1rem;
}
.Shelf.responsive.space-medium-large > .Spacer {
margin-right: 0;
margin-bottom: -1.5rem;
}
.Shelf.responsive.space-large > .Spacer {
margin-right: 0;
margin-bottom: -2rem;
}
}
.Shelf.align-top {
align-items: flex-start;
}
.Shelf.align-center {
align-items: center;
}
.Shelf.align-bottom {
align-items: flex-end;
}
.Shelf.align-span {
align-items: stretch;
}
.Shelf.reverse {
flex-direction: row-reverse;
}
.Spacer {
flex: 1;
pointer-events: none;
}
/* --- layout/Stack --- */
.Stack {
display: flex;
flex-direction: column;
justify-content: center;
}
.Stack > *:not(.Spacer, dialog) {
margin: 0 !important;
}
.Stack.space-none {
gap: 0rem;
}
.Stack.space-none > .Spacer {
margin-bottom: 0rem;
}
.Stack.space-mini {
gap: 0.25rem;
}
.Stack.space-mini > .Spacer {
margin-bottom: -0.25rem;
}
.Stack.space-small {
gap: 0.5rem;
}
.Stack.space-small > .Spacer {
margin-bottom: -0.5rem;
}
.Stack.space-medium {
gap: 1rem;
}
.Stack.space-medium > .Spacer {
margin-bottom: -1rem;
}
.Stack.space-medium-large {
gap: 1.5rem;
}
.Stack.space-medium-large > .Spacer {
margin-bottom: -1.5rem;
}
.Stack.space-large {
gap: 2rem;
}
.Stack.space-large > .Spacer {
margin-bottom: -2rem;
}
.Stack.align-left {
align-items: flex-start;
}
.Stack.align-center {
align-items: center;
}
.Stack.align-right {
align-items: flex-end;
}
.Stack.align-span {
align-items: stretch;
}
.Stack.reverse {
flex-direction: column-reverse;
}
/* --- layout --- */
* {
box-sizing: border-box;
}
/* ==========================================================================
TYPOGRAPHY
========================================================================== */
/* --- typography/Body --- */
.Body {
font-weight: normal;
font-style: normal;
text-decoration: none;
font-family: "Source Sans 3", sans-serif;
color: #313E48;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
.Body.medium {
font-size: 1rem;
line-height: 1.5rem;
}
.Body.small {
font-size: 0.875rem;
line-height: 1.25rem;
}
.Body.mini {
font-size: 0.75rem;
line-height: 1rem;
}
.Body.align-left {
text-align: left;
}
.Body.align-center {
text-align: center;
}
.Body.align-right {
text-align: right;
}
/* --- typography/Bold --- */
.Bold {
font-weight: bold;
}
/* --- typography/Heading --- */
.Heading {
font-family: "Source Sans 3", sans-serif;
font-size: 1.25rem;
line-height: 1.5rem;
color: #313E48;
margin-top: 1em;
margin-bottom: 1em;
}
.Heading:first-child {
margin-top: 0;
}
.Heading:last-child {
margin-bottom: 0;
}
.Heading.align-left {
text-align: left;
}
.Heading.align-center {
text-align: center;
}
.Heading.align-right {
text-align: right;
}
/* --- typography/Italic --- */
.Italic {
font-style: italic;
}
/* --- typography/PageTitle --- */
.PageTitle {
font-family: "Source Sans 3", sans-serif;
font-size: 1.75rem;
line-height: 2.5rem;
color: #313E48;
margin-top: 1em;
margin-bottom: 1em;
}
.PageTitle:first-child {
margin-top: 0;
}
.PageTitle:last-child {
margin-bottom: 0;
}
.PageTitle.align-left {
text-align: left;
}
.PageTitle.align-center {
text-align: center;
}
.PageTitle.align-right {
text-align: right;
}
/* --- typography/Paragraph --- */
.Paragraph {
margin-top: 1em;
margin-bottom: 1em;
}
.Paragraph:first-child {
margin-top: 0;
}
.Paragraph:last-child {
margin-bottom: 0;
}
.Paragraph.align-left {
text-align: left;
}
.Paragraph.align-center {
text-align: center;
}
.Paragraph.align-right {
text-align: right;
}
/* --- typography/Regular --- */
.Regular {
font-weight: normal;
font-style: normal;
text-decoration: none;
}
/* --- typography/Semibold --- */
.Semibold {
font-weight: 600;
}
/* --- typography/Strikethrough --- */
.Strikethrough {
text-decoration: line-through;
}
/* --- typography/Subheading --- */
.Subheading {
font-family: "Source Sans 3", sans-serif;
font-size: 1.125rem;
line-height: 1.5rem;
color: #313E48;
margin-top: 1em;
margin-bottom: 1em;
}
.Subheading:first-child {
margin-top: 0;
}
.Subheading:last-child {
margin-bottom: 0;
}
.Subheading.align-left {
text-align: left;
}
.Subheading.align-center {
text-align: center;
}
.Subheading.align-right {
text-align: right;
}
/* --- typography/Subtitle --- */
.Subtitle {
font-family: "Source Sans 3", sans-serif;
font-size: 1.5rem;
line-height: 2rem;
color: #313E48;
margin-top: 1em;
margin-bottom: 1em;
}
.Subtitle:first-child {
margin-top: 0;
}
.Subtitle:last-child {
margin-bottom: 0;
}
.Subtitle.align-left {
text-align: left;
}
.Subtitle.align-center {
text-align: center;
}
.Subtitle.align-right {
text-align: right;
}
/* --- typography/Title --- */
.Title {
font-family: "Source Sans 3", sans-serif;
font-size: 1.625rem;
line-height: 2.25rem;
color: #313E48;
margin-top: 1em;
margin-bottom: 1em;
}
.Title:first-child {
margin-top: 0;
}
.Title:last-child {
margin-bottom: 0;
}
.Title.align-left {
text-align: left;
}
.Title.align-center {
text-align: center;
}
.Title.align-right {
text-align: right;
}
/* --- typography/Underlined --- */
.Underlined {
text-decoration: underline;
}
/* ==========================================================================
GENERAL
========================================================================== */
/* --- general/Alert --- */
.Icon {
display: inline-block;
pointer-events: none;
}
.Icon.has-tooltip {
pointer-events: all;
}
.Icon.size-xsmall {
min-height: 0.5rem;
max-height: 0.5rem;
min-width: 0.5rem;
max-width: 0.5rem;
}
.Icon.size-small {
min-height: 0.85rem;
max-height: 0.85rem;
min-width: 0.85rem;
max-width: 0.85rem;
}
.Icon.size-regular {
min-height: 1.25rem;
max-height: 1.25rem;
min-width: 1.25rem;
max-width: 1.25rem;
}
.IconContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.IconContainer > svg {
width: 100%;
height: 100%;
}
.alertContainer {
top: 0;
left: 0;
padding: 0;
width: 100%;
z-index: 900000000;
pointer-events: none;
margin: 0;
border: none;
background: transparent;
}
.alertContainer::backdrop {
opacity: 0;
}
.Alert {
display: flex;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
color: #FFFFFF;
opacity: 0.85;
}
.Alert .messageContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
pointer-events: all;
}
.Alert .messageContainer .alertIcon {
margin-right: 10px;
}
.Alert.banner {
flex-direction: row;
font-size: 20px;
line-height: 32px;
pointer-events: all;
}
.Alert.banner .pseudo {
width: 20px;
padding-left: 30px;
margin-left: auto;
visibility: hidden;
}
.Alert.banner .removeIcon {
margin-left: auto;
margin-right: 30px;
align-self: center;
}
.Alert.banner .removeIcon .icon > .icon-container path,
.Alert.banner .removeIcon .icon > .icon-container circle,
.Alert.banner .removeIcon .icon > .icon-container g {
fill: #FFFFFF !important;
}
.Alert.banner .messageContainer {
margin-left: auto;
margin: 12px 0px;
}
.Alert.toast {
justify-content: center;
top: 24px;
font-size: 14px;
line-height: 24px;
}
.Alert.toast .messageContainer {
padding: 8px 24px;
border-radius: 4px;
}
.Alert.success.banner,
.Alert.success .messageContainer {
background: #3D8C71;
}
.Alert.warning.banner,
.Alert.warning .messageContainer {
background: #CF6B3A;
}
.Alert.error.banner,
.Alert.error .messageContainer {
background: #B8222A;
}
.Alert.informational.banner,
.Alert.informational .messageContainer {
background: #00629C;
}
/* --- general/Badge --- */
.Badge .Shelf {
margin-right: -0.45rem;
}
.Badge .content {
display: block;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.Badge .CloseButton {
padding: calc(0.2rem - 1px) !important;
height: 1.5rem;
min-height: 1.5rem;
}
.Badge.info .CloseButton .icon > .icon-container path,
.Badge.info .CloseButton .icon > .icon-container circle,
.Badge.info .CloseButton .icon > .icon-container g {
fill: #3E5D6F !important;
}
.Badge.info .CloseButton:not(.disabled):hover .icon path,
.Badge.info .CloseButton:not(.disabled):hover .icon circle,
.Badge.info .CloseButton:not(.disabled):hover .icon g, .Badge.info .CloseButton:not(.disabled):active .icon path,
.Badge.info .CloseButton:not(.disabled):active .icon circle,
.Badge.info .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.info .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.info .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.info .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.info .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.info .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.info .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(86.1549132948, 129.2323699422, 154.2450867052) !important;
}
.Badge.info.inverted .CloseButton .icon > .icon-container path,
.Badge.info.inverted .CloseButton .icon > .icon-container circle,
.Badge.info.inverted .CloseButton .icon > .icon-container g {
fill: #2F4653 !important;
}
.Badge.info.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.info.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.info.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.info.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.info.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.info.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.info.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.info.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.info.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.info.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.info.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.info.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(74.4769230769, 110.9230769231, 131.5230769231) !important;
}
.Badge.info-high-contrast .CloseButton .icon > .icon-container path,
.Badge.info-high-contrast .CloseButton .icon > .icon-container circle,
.Badge.info-high-contrast .CloseButton .icon > .icon-container g {
fill: white !important;
}
.Badge.info-high-contrast .CloseButton:not(.disabled):hover .icon path,
.Badge.info-high-contrast .CloseButton:not(.disabled):hover .icon circle,
.Badge.info-high-contrast .CloseButton:not(.disabled):hover .icon g, .Badge.info-high-contrast .CloseButton:not(.disabled):active .icon path,
.Badge.info-high-contrast .CloseButton:not(.disabled):active .icon circle,
.Badge.info-high-contrast .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.info-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.info-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.info-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.info-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.info-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.info-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: white !important;
}
.Badge.info-high-contrast.inverted .CloseButton .icon > .icon-container path,
.Badge.info-high-contrast.inverted .CloseButton .icon > .icon-container circle,
.Badge.info-high-contrast.inverted .CloseButton .icon > .icon-container g {
fill: #3E5D6F !important;
}
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.info-high-contrast.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.info-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.info-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(86.1549132948, 129.2323699422, 154.2450867052) !important;
}
.Badge.system .CloseButton .icon > .icon-container path,
.Badge.system .CloseButton .icon > .icon-container circle,
.Badge.system .CloseButton .icon > .icon-container g {
fill: #00629C !important;
}
.Badge.system .CloseButton:not(.disabled):hover .icon path,
.Badge.system .CloseButton:not(.disabled):hover .icon circle,
.Badge.system .CloseButton:not(.disabled):hover .icon g, .Badge.system .CloseButton:not(.disabled):active .icon path,
.Badge.system .CloseButton:not(.disabled):active .icon circle,
.Badge.system .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.system .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.system .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.system .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.system .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.system .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.system .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(0, 142.4769230769, 226.8) !important;
}
.Badge.system-high-contrast .CloseButton .icon > .icon-container path,
.Badge.system-high-contrast .CloseButton .icon > .icon-container circle,
.Badge.system-high-contrast .CloseButton .icon > .icon-container g {
fill: white !important;
}
.Badge.system-high-contrast .CloseButton:not(.disabled):hover .icon path,
.Badge.system-high-contrast .CloseButton:not(.disabled):hover .icon circle,
.Badge.system-high-contrast .CloseButton:not(.disabled):hover .icon g, .Badge.system-high-contrast .CloseButton:not(.disabled):active .icon path,
.Badge.system-high-contrast .CloseButton:not(.disabled):active .icon circle,
.Badge.system-high-contrast .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.system-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.system-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.system-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.system-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.system-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.system-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: white !important;
}
.Badge.system-high-contrast.inverted .CloseButton .icon > .icon-container path,
.Badge.system-high-contrast.inverted .CloseButton .icon > .icon-container circle,
.Badge.system-high-contrast.inverted .CloseButton .icon > .icon-container g {
fill: #00629C !important;
}
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.system-high-contrast.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.system-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.system-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(0, 142.4769230769, 226.8) !important;
}
.Badge.system-alternative .CloseButton .icon > .icon-container path,
.Badge.system-alternative .CloseButton .icon > .icon-container circle,
.Badge.system-alternative .CloseButton .icon > .icon-container g {
fill: #4F5B97 !important;
}
.Badge.system-alternative .CloseButton:not(.disabled):hover .icon path,
.Badge.system-alternative .CloseButton:not(.disabled):hover .icon circle,
.Badge.system-alternative .CloseButton:not(.disabled):hover .icon g, .Badge.system-alternative .CloseButton:not(.disabled):active .icon path,
.Badge.system-alternative .CloseButton:not(.disabled):active .icon circle,
.Badge.system-alternative .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.system-alternative .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.system-alternative .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.system-alternative .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.system-alternative .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.system-alternative .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.system-alternative .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(107.9391304348, 119.6260869565, 178.0608695652) !important;
}
.Badge.system-alternative-high-contrast .CloseButton .icon > .icon-container path,
.Badge.system-alternative-high-contrast .CloseButton .icon > .icon-container circle,
.Badge.system-alternative-high-contrast .CloseButton .icon > .icon-container g {
fill: white !important;
}
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):hover .icon path,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):hover .icon circle,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):hover .icon g, .Badge.system-alternative-high-contrast .CloseButton:not(.disabled):active .icon path,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):active .icon circle,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.system-alternative-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.system-alternative-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: white !important;
}
.Badge.system-alternative-high-contrast.inverted .CloseButton .icon > .icon-container path,
.Badge.system-alternative-high-contrast.inverted .CloseButton .icon > .icon-container circle,
.Badge.system-alternative-high-contrast.inverted .CloseButton .icon > .icon-container g {
fill: #4F5B97 !important;
}
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.system-alternative-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(107.9391304348, 119.6260869565, 178.0608695652) !important;
}
.Badge.error .CloseButton .icon > .icon-container path,
.Badge.error .CloseButton .icon > .icon-container circle,
.Badge.error .CloseButton .icon > .icon-container g {
fill: #B8222A !important;
}
.Badge.error .CloseButton:not(.disabled):hover .icon path,
.Badge.error .CloseButton:not(.disabled):hover .icon circle,
.Badge.error .CloseButton:not(.disabled):hover .icon g, .Badge.error .CloseButton:not(.disabled):active .icon path,
.Badge.error .CloseButton:not(.disabled):active .icon circle,
.Badge.error .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.error .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.error .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.error .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.error .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.error .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.error .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(218.5669724771, 57.8330275229, 66.4055045872) !important;
}
.Badge.error-high-contrast .CloseButton .icon > .icon-container path,
.Badge.error-high-contrast .CloseButton .icon > .icon-container circle,
.Badge.error-high-contrast .CloseButton .icon > .icon-container g {
fill: white !important;
}
.Badge.error-high-contrast .CloseButton:not(.disabled):hover .icon path,
.Badge.error-high-contrast .CloseButton:not(.disabled):hover .icon circle,
.Badge.error-high-contrast .CloseButton:not(.disabled):hover .icon g, .Badge.error-high-contrast .CloseButton:not(.disabled):active .icon path,
.Badge.error-high-contrast .CloseButton:not(.disabled):active .icon circle,
.Badge.error-high-contrast .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.error-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.error-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.error-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.error-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.error-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.error-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: white !important;
}
.Badge.error-high-contrast.inverted .CloseButton .icon > .icon-container path,
.Badge.error-high-contrast.inverted .CloseButton .icon > .icon-container circle,
.Badge.error-high-contrast.inverted .CloseButton .icon > .icon-container g {
fill: #B8222A !important;
}
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.error-high-contrast.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.error-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.error-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(218.5669724771, 57.8330275229, 66.4055045872) !important;
}
.Badge.warning .CloseButton .icon > .icon-container path,
.Badge.warning .CloseButton .icon > .icon-container circle,
.Badge.warning .CloseButton .icon > .icon-container g {
fill: #976400 !important;
}
.Badge.warning .CloseButton:not(.disabled):hover .icon path,
.Badge.warning .CloseButton:not(.disabled):hover .icon circle,
.Badge.warning .CloseButton:not(.disabled):hover .icon g, .Badge.warning .CloseButton:not(.disabled):active .icon path,
.Badge.warning .CloseButton:not(.disabled):active .icon circle,
.Badge.warning .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.warning .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.warning .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.warning .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.warning .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.warning .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.warning .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(222.8, 147.5496688742, 0) !important;
}
.Badge.warning-high-contrast .CloseButton .icon > .icon-container path,
.Badge.warning-high-contrast .CloseButton .icon > .icon-container circle,
.Badge.warning-high-contrast .CloseButton .icon > .icon-container g {
fill: #2F4653 !important;
}
.Badge.warning-high-contrast .CloseButton:not(.disabled):hover .icon path,
.Badge.warning-high-contrast .CloseButton:not(.disabled):hover .icon circle,
.Badge.warning-high-contrast .CloseButton:not(.disabled):hover .icon g, .Badge.warning-high-contrast .CloseButton:not(.disabled):active .icon path,
.Badge.warning-high-contrast .CloseButton:not(.disabled):active .icon circle,
.Badge.warning-high-contrast .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.warning-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.warning-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.warning-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.warning-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.warning-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.warning-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(74.4769230769, 110.9230769231, 131.5230769231) !important;
}
.Badge.warning-high-contrast.inverted .CloseButton .icon > .icon-container path,
.Badge.warning-high-contrast.inverted .CloseButton .icon > .icon-container circle,
.Badge.warning-high-contrast.inverted .CloseButton .icon > .icon-container g {
fill: #976400 !important;
}
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.warning-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(222.8, 147.5496688742, 0) !important;
}
.Badge.success .CloseButton .icon > .icon-container path,
.Badge.success .CloseButton .icon > .icon-container circle,
.Badge.success .CloseButton .icon > .icon-container g {
fill: #317861 !important;
}
.Badge.success .CloseButton:not(.disabled):hover .icon path,
.Badge.success .CloseButton:not(.disabled):hover .icon circle,
.Badge.success .CloseButton:not(.disabled):hover .icon g, .Badge.success .CloseButton:not(.disabled):active .icon path,
.Badge.success .CloseButton:not(.disabled):active .icon circle,
.Badge.success .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.success .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.success .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.success .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.success .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.success .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.success .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(68.773964497, 168.426035503, 136.1443786982) !important;
}
.Badge.success-high-contrast .CloseButton .icon > .icon-container path,
.Badge.success-high-contrast .CloseButton .icon > .icon-container circle,
.Badge.success-high-contrast .CloseButton .icon > .icon-container g {
fill: white !important;
}
.Badge.success-high-contrast .CloseButton:not(.disabled):hover .icon path,
.Badge.success-high-contrast .CloseButton:not(.disabled):hover .icon circle,
.Badge.success-high-contrast .CloseButton:not(.disabled):hover .icon g, .Badge.success-high-contrast .CloseButton:not(.disabled):active .icon path,
.Badge.success-high-contrast .CloseButton:not(.disabled):active .icon circle,
.Badge.success-high-contrast .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.success-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.success-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.success-high-contrast .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.success-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.success-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.success-high-contrast .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: white !important;
}
.Badge.success-high-contrast.inverted .CloseButton .icon > .icon-container path,
.Badge.success-high-contrast.inverted .CloseButton .icon > .icon-container circle,
.Badge.success-high-contrast.inverted .CloseButton .icon > .icon-container g {
fill: #317861 !important;
}
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):hover .icon path,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):hover .icon circle,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):hover .icon g, .Badge.success-high-contrast.inverted .CloseButton:not(.disabled):active .icon path,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):active .icon circle,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):active .icon g {
transition: fill ease 0.2s;
}
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):hover .icon > .icon-container g, .Badge.success-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge.success-high-contrast.inverted .CloseButton:not(.disabled):active .icon > .icon-container g {
fill: rgb(68.773964497, 168.426035503, 136.1443786982) !important;
}
/* --- general/Button --- */
.ButtonPlaceholder {
display: inline-block;
position: relative;
padding: 0 0.75rem;
text-transform: uppercase;
border-radius: 0.25rem;
letter-spacing: 1px;
}
.ButtonPlaceholder.small {
height: 1.75rem;
min-height: 1.75rem;
}
.ButtonPlaceholder.small.icon-only {
padding: 0.375rem;
}
.ButtonPlaceholder.large {
height: 2.25rem;
min-height: 2.25rem;
}
.ButtonPlaceholder.large.icon-only {
padding: 0.625rem;
}
.ButtonPlaceholder.text {
padding: 0;
}
.ButtonPlaceholder .semi-bold {
visibility: hidden;
pointer-events: none;
}
.ButtonSkeleton {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ButtonSkeleton > .react-loading-skeleton {
display: block;
width: 100%;
height: 100%;
}
.IconPlaceholder {
display: inline-block;
min-height: 1rem;
max-height: 1rem;
min-width: 1rem;
max-width: 1rem;
}
/* --- general/Drawer --- */
.Drawer {
box-sizing: border-box;
padding: 0;
border: none;
border-radius: 0;
overflow: visible;
display: flex;
box-shadow: 0px 0 1rem rgba(0, 0, 0, 0.08);
max-width: 100%;
max-height: 100%;
}
.Drawer > .client-area {
width: 100%;
height: 100%;
padding: 1.5rem 0;
display: flex;
}
.Drawer.position-left, .Drawer.position-right {
margin-top: 0;
margin-bottom: 0;
height: 100%;
}
.Drawer.position-left.narrow, .Drawer.position-right.narrow {
width: 25rem;
}
.Drawer.position-left.wide, .Drawer.position-right.wide {
width: 37.5rem;
}
.Drawer.position-left.ultra-wide, .Drawer.position-right.ultra-wide {
width: 50rem;
}
.Drawer.position-bottom {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.Drawer.position-bottom.narrow {
height: 12.5rem;
}
.Drawer.position-bottom.wide {
height: 25rem;
}
.Drawer.position-bottom.ultra-wide {
height: 37.5rem;
}
.Drawer.position-left {
margin-left: 0;
}
.Drawer.position-right {
margin-right: 0;
}
.Drawer.position-bottom {
margin-bottom: 0;
}
.Drawer::backdrop {
background-color: rgba(0, 0, 0, 0.25);
transition: opacity linear 0.3s;
opacity: 0;
padding: 0;
}
.Drawer.entering::backdrop {
opacity: 1;
}
.Drawer.exiting::backdrop {
opacity: 0;
}
.Drawer .ContentRoot {
flex: 1;
}
.Drawer .ContentRoot > .header, .Drawer .ContentRoot > .content-container > .content, .Drawer .ContentRoot > .content-container > .footer {
padding: 0 1.5rem;
}
.Drawer .ContentRoot > .content-container {
flex: 1;
min-height: 0;
}
.Drawer .ContentRoot > .content-container > .content {
flex: 1;
flex-shrink: 0;
overflow-y: auto;
}
/* --- general/HorizontalLine --- */
.HorizontalLine {
border: 0;
height: 1px;
background: #CFD9E1;
}
/* --- general/HotKeys --- */
*:has(> .hotkey-badge) {
display: flex;
flex-flow: row nowrap;
gap: 1ch;
}
.hotkey-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: "Monaco", "Menlo", "Consolas", monospace;
line-height: 1;
}
.hotkey-badge__separator {
color: #60646D;
font-weight: 600;
padding: 0 0.125rem;
}
.hotkey-badge__key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0.125rem 0.375rem;
background: #FFFFFF;
border: 1px solid #C3C3C7;
border-radius: 0.25rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 #E2E1E3;
font-size: 0.75rem;
font-weight: 600;
color: #0C1720;
text-align: center;
white-space: nowrap;
transition: all 0.2s ease;
}
.hotkey-badge--xs .hotkey-badge__key {
min-width: 1.25rem;
height: 1.25rem;
padding: 0.0625rem 0.25rem;
font-size: 0.625rem;
}
.hotkey-badge--sm .hotkey-badge__key {
min-width: 1.5rem;
height: 1.5rem;
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
}
.hotkey-badge--md .hotkey-badge__key {
min-width: 1.75rem;
height: 1.75rem;
padding: 0.1875rem 0.5rem;
font-size: 0.875rem;
}
.hotkey-badge--lg .hotkey-badge__key {
min-width: 2rem;
height: 2rem;
padding: 0.25rem 0.625rem;
font-size: 1rem;
}
.hotkey-badge--minimal .hotkey-badge__key {
background: #F6F8F9;
border-color: #AEBFCC;
color: #1E2A33;
box-shadow: none;
}
.hotkey-badge--prominent .hotkey-badge__key {
background: linear-gradient(180deg, #FFFFFF 0%, #F6F8F9 100%);
border-color: #97989E;
color: #000000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 -2px 0 0 #C3C3C7;
}
.hotkey-badge--ghost .hotkey-badge__key {
background: rgba(255, 255, 255, 0.12);
border-color: currentColor;
color: currentColor;
box-shadow: none;
}
.hotkey-badge--neon .hotkey-badge__key {
background: #F1F6FB;
border-color: #008DCE;
color: #005387;
box-shadow: 0 0 8px rgba(0, 141, 206, 0.3);
}
.hotkey-badge--glass .hotkey-badge__key {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(151, 152, 158, 0.5);
color: #0C1720;
backdrop-filter: blur(8px);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
.hotkey-badge--mobile-hidden {
display: none;
}
}
.hotkey-badge--disabled {
opacity: 0.4;
cursor: not-allowed;
filter: grayscale(100%);
}
.hotkey-badge--disabled .hotkey-badge__key {
background: #E9EEF1;
border-color: #AEBFCC;
color: #60646D;
box-shadow: none;
}
.hotkey-badge--disabled .hotkey-badge__separator {
color: #97989E;
}
.command-palette {
display: flex;
flex-direction: column;
width: 100%;
max-height: 60vh;
overflow: hidden;
}
.command-palette__input {
width: 100%;
padding: 0.625rem 0.875rem;
margin-bottom: 0.75rem;
border: 1.5px solid #C3C3C7;
border-radius: 0.375rem;
font-size: 0.875rem;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
color: #000000;
background: #FFFFFF;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
line-height: 1.5;
}
.command-palette__input::placeholder {
color: #60646D;
}
.command-palette__input:focus {
border-color: #0071B3;
box-shadow: 0 0 0 2px rgba(0, 113, 179, 0.12);
}
.command-palette__results {
flex: 1;
overflow-y: auto;
margin: 0 -1.5rem;
padding: 0 1.5rem;
min-height: 0;
}
.command-palette__results::-webkit-scrollbar {
width: 8px;
}
.command-palette__results::-webkit-scrollbar-track {
background: #F6F8F9;
border-radius: 4px;
}
.command-palette__results::-webkit-scrollbar-thumb {
background: #97989E;
border-radius: 4px;
}
.command-palette__results::-webkit-scrollbar-thumb:hover {
background: #60646D;
}
.command-palette__category {
margin-bottom: 1.5rem;
}
.command-palette__category:last-child {
margin-bottom: 0;
}
.command-palette__category h3 {
margin: 0 0 0.5rem 0;
padding: 0.5rem 0;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #313E48;
border-bottom: 1px solid #CFD9E1;
line-height: 1.2;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.command-palette__command {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
margin: 0.25rem 0;
border: 1px solid transparent;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
background: #FFFFFF;
}
.command-palette__command:hover {
background: #F1F6FB;
border-color: #A5CAEB;
}
.command-palette__command--selected {
background: #F1F6FB;
border-color: #008DCE;
box-shadow: 0 0 0 2px rgba(0, 113, 179, 0.1);
}
.command-palette__command--disabled {
cursor: not-allowed;
opacity: 0.5;
}
.command-palette__command--disabled:hover {
background: #FFFFFF;
border-color: transparent;
}
.command-palette__command > div:nth-child(2) {
flex: 1;
min-width: 0;
}
.command-palette__command > div:nth-child(2) > div:first-child {
font-weight: 600;
color: #000000;
margin-bottom: 0.125rem;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.command-palette__command > div:nth-child(2) > div:last-child {
font-size: 0.875em;
color: #313E48;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.command-palette__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex-shrink: 0;
color: #00629C;
}
.command-palette__shortcut {
display: flex;
align-items: center;
margin-left: auto;
flex-shrink: 0;
}
.command-palette__empty {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: #313E48;
font-size: 0.9375rem;
text-align: center;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.help-dialog {
width: 100%;
}
.help-dialog__search {
width: 100%;
padding: 0.625rem 0.875rem;
margin-bottom: 1.5rem;
border: 1.5px solid #C3C3C7;
border-radius: 0.375rem;
font-size: 0.875rem;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
color: #000000;
background: #FFFFFF;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
line-height: 1.5;
}
.help-dialog__search::placeholder {
color: #60646D;
}
.help-dialog__search:focus {
border-color: #0071B3;
box-shadow: 0 0 0 2px rgba(0, 113, 179, 0.12);
}
.help-dialog__category {
margin-bottom: 1.5rem;
}
.help-dialog__category > :first-child {
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #A5CAEB;
color: #0C1720;
font-size: 0.875rem;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
font-weight: 600;
}
.help-dialog__shortcut {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 0.75rem;
margin: 0.25rem 0;
border-radius: 0.25rem;
background: #F6F8F9;
border: 1px solid #CFD9E1;
transition: all 0.2s ease;
}
.help-dialog__shortcut:hover {
background: #F1F6FB;
border-color: #5FA8DC;
}
.help-dialog__shortcut > div:first-child {
flex: 1;
color: #0C1720;
font-size: 0.9375rem;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.help-dialog__empty {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: #313E48;
font-size: 0.9375rem;
text-align: center;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.modifier-popover {
position: fixed;
min-width: 18rem;
max-width: 32rem;
background: linear-gradient(270deg, #254591 0%, #0059b3 100%);
border-radius: 8px;
box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.16);
overflow: hidden;
animation: popoverFadeIn 0.2s ease;
z-index: 99999999 !important;
}
@keyframes popoverFadeIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modifier-popover--bottom-left {
bottom: 1rem;
left: 1rem;
}
.modifier-popover--bottom-right {
bottom: 1rem;
right: 1rem;
}
.modifier-popover__header {
display: flex;
align-items: center;
gap: 0.48rem;
margin-bottom: 0.36rem;
padding: 0.64rem 0.8rem 0.48rem;
background: rgba(255, 255, 255, 0.124);
border: 1px solid rgba(255, 255, 255, 0.28);
}
.modifier-popover__header-text {
width: 100%;
font-size: 0.96rem;
font-weight: 600;
letter-spacing: 0.25px;
user-select: none;
text-transform: uppercase;
font-variant: small-caps;
color: #FFFFFF;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.modifier-popover__list {
max-height: 32rem;
height: max-content;
user-select: none;
overflow-y: auto;
padding: 0.48rem 0;
}
.modifier-popover__list::-webkit-scrollbar {
width: 6px;
}
.modifier-popover__list::-webkit-scrollbar-track {
background: #F6F8F9;
}
.modifier-popover__list::-webkit-scrollbar-thumb {
background: #97989E;
border-radius: 3px;
}
.modifier-popover__list::-webkit-scrollbar-thumb:hover {
background: #60646D;
}
.modifier-popover__item {
display: flex;
align-items: center;
gap: 0.36rem;
padding: 0 0.8rem;
margin: unset;
pointer-events: none;
margin-bottom: 0.32rem;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.modifier-popover__item:last-child {
margin-bottom: 0.36rem;
}
.modifier-popover__item-content {
flex: 1;
min-width: 0;
}
.modifier-popover__item-title {
font-size: 0.825rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.modifier-popover__item-category {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #313E48;
margin-top: 0.125rem;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.modifier-popover__footer {
padding: 0.625rem 1rem;
background: #F6F8F9;
border-top: 1px solid #CFD9E1;
font-size: 0.75rem;
font-weight: 600;
color: #1E2A33;
text-align: center;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
/* --- general/Link --- */
.Link {
text-decoration: underline;
transition: color ease 0.2s;
}
.Link.body.link {
color: #313E48;
}
.Link.body.link:hover {
color: #313E48;
}
.Link.turquoise.link {
color: #0071B3;
}
.Link.turquoise.link:hover {
color: #00629C;
}
.Link.medium {
font-size: 1rem;
line-height: 1.5rem;
}
.Link.small {
font-size: 0.875rem;
line-height: 1.25rem;
}
.Link.mini {
font-size: 0.75rem;
line-height: 1rem;
}
/* --- general/Logo --- */
.Logo {
display: inline-block;
pointer-events: none;
}
.Logo.has-tooltip {
pointer-events: all;
}
.LogoContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.LogoContainer > svg {
width: 100%;
height: 100%;
}
/* --- general/MenuButton --- */
.MenuButtonContainer {
display: inline-block;
position: relative;
min-width: 0;
max-width: 100%;
}
.MenuButtonContainer button {
width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.MenuContainer {
position: absolute;
min-width: 100%;
bottom: 0;
left: 0;
}
.Menu {
white-space: normal;
overflow-wrap: anywhere;
max-width: 100%;
max-height: 100%;
overflow-x: auto;
display: flex;
flex-direction: column;
}
.Menu > :first-child {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* --- general/Menu/components --- */
.Item {
display: block;
padding: 0.5rem 0.75rem;
font: inherit;
color: inherit;
white-space: nowrap;
text-decoration: none;
}
.Item:is(button, [type=button]) {
all: unset;
box-sizing: border-box;
cursor: pointer;
text-align: left;
width: 100%;
padding: 0.5rem 0.75rem;
white-space: nowrap;
}
.Item:hover, .Item:focus {
color: #00629C;
background-color: #F1F6FB;
outline: none;
}
.Item.high-impact {
color: #B8222A;
}
.Item.high-impact:hover, .Item.high-impact:focus {
background-color: #FEF4F2;
outline: none;
}
.Item.disabled {
color: #97989E;
background-color: transparent;
}
.Group > .header {
display: block;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
margin: 0;
letter-spacing: 1px;
cursor: default;
white-space: nowrap;
}
.Group {
border-top: solid 1px #CFD9E1;
margin-top: 0.5rem;
padding-top: 0.5rem;
}
.Group:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.ComponentItem {
padding: 0.25rem 0.75rem;
}
.ComponentItem:is(button, [type=button]) {
all: unset;
box-sizing: border-box;
cursor: pointer;
text-align: left;
width: 100%;
padding: 0.25rem 0.75rem;
}
.ComponentItem.disabled:hover {
cursor: default;
}
.ComponentItem:focus {
outline: none;
}
.DisabledItem {
color: #97989E;
background-color: transparent;
cursor: not-allowed;
}
.DisabledItem:hover, .DisabledItem:focus {
color: #97989E;
background-color: transparent;
outline: none;
cursor: not-allowed;
}
.header {
font-weight: 600;
}
/* --- general/Menu --- */
.MenuContainer {
all: unset;
overflow: hidden;
height: 0;
min-width: 12.5rem;
width: fit-content;
position: absolute;
}
.Menu {
background-color: #FFFFFF;
border: solid 1px #AEBFCC;
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
padding: 0.25rem 0;
overflow-x: hidden;
overflow-y: auto;
margin: 0.25rem 0;
max-height: 100%;
box-sizing: border-box;
}
.Menu:focus {
outline: none;
}
.Menu .body {
display: contents;
}
/* --- general/Modal --- */
.Modal {
box-sizing: border-box;
padding: 1.5rem 0;
border: none;
box-shadow: 0px 0.25rem 1rem rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
overflow: visible;
display: flex;
}
.Modal.narrow {
min-width: 27.5rem;
max-width: 27.5rem;
}
.Modal.wide {
min-width: 30rem;
max-width: 30rem;
}
.Modal::backdrop {
background-color: rgba(0, 0, 0, 0.7);
transition: opacity linear 0.3s;
opacity: 0;
}
.Modal.entering::backdrop {
opacity: 1;
}
.Modal.exiting::backdrop {
opacity: 0;
}
.Modal .ContentRoot {
flex: 1;
max-height: 65vh;
}
.Modal .ContentRoot > .header-container > .header, .Modal .ContentRoot > .content-container > .footer-container > .footer, .Modal .ContentRoot > .content-container > .content {
padding: 0 1.5rem;
word-break: break-word;
}
.Modal .ContentRoot > .header-container {
position: relative;
}
.Modal .ContentRoot > .header-container > .shadow {
position: absolute;
bottom: -1.5rem;
width: 100%;
height: 16px;
transform: translate(0, 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
pointer-events: none;
display: none;
}
.Modal .ContentRoot > .header-container > .shadow.visible {
display: block;
}
.Modal .ContentRoot > .content-container {
flex: 1;
min-height: 0;
}
.Modal .ContentRoot > .content-container > .footer-container {
position: relative;
}
.Modal .ContentRoot > .content-container > .footer-container > .shadow {
position: absolute;
top: -1.5rem;
width: 100%;
height: 16px;
flex-shrink: 0;
transform: translate(0, -100%);
background: linear-gradient(to top, rgba(0, 0, 0, 0.08), transparent);
pointer-events: none;
display: none;
}
.Modal .ContentRoot > .content-container > .footer-container > .shadow.visible {
display: block;
}
.Modal .ContentRoot > .content-container > .content {
flex: 1;
flex-shrink: 0;
overflow-y: auto;
}
/* --- general/Overlay --- */
.Overlay {
pointer-events: none;
overflow: hidden;
visibility: hidden;
}
.FloatingOverlay {
margin: 0 !important;
max-height: 100%;
}
.OverlayContainer {
position: fixed;
z-index: 999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.OverlayContainerContent {
position: absolute;
top: 3.5rem;
left: 1rem;
width: calc(100% - 2rem);
height: calc(100% - 4rem);
max-height: 100%;
}
.OverlaySurface {
position: absolute;
pointer-events: all;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
max-height: 100%;
}
/* --- general/Pager --- */
.Pager {
padding: 0.5rem;
}
.PagerContent {
display: flex;
flex-direction: row;
}
.sr-only {
position: absolute;
display: block;
cursor: text;
margin: -1px 0 0 -1px;
padding: 0;
width: 1px;
height: 1px;
font-weight: normal;
font-size: 15px;
line-height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
outline: 0;
}
@media screen and (max-width: 800px) {
.PagerContent {
flex-direction: column;
}
}
/* --- general/SidebarNav --- */
.separator {
margin: 1rem 0 0.5rem 0;
height: 1px;
background-color: #CFD9E1;
}
.Group > .title {
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
font-style: normal;
line-height: 20px;
font-weight: 600;
font-size: 12px;
display: flex;
align-items: center;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #313E48;
margin-bottom: 0.5rem;
width: 208px;
}
.SidebarNav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.Item {
display: flex;
flex-direction: row;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: #60646D;
padding: 8px;
border-radius: 4px;
text-decoration: none;
width: 208px;
}
.Item:hover {
background-color: #F1F1F1;
}
.Item:focus-visible {
outline: 2px solid #0071B3;
outline-offset: 2px;
background-color: #F1F1F1;
}
.Item.active {
background-color: #F1F6FB;
color: #0071B3;
}
/* --- general/Spinner --- */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.Spinner {
display: inline-block;
pointer-events: none;
}
.Spinner > .spinner-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
animation: spin linear 1s infinite;
}
.Spinner > .spinner-container > svg {
width: 100%;
height: 100%;
}
.Spinner.has-tooltip {
pointer-events: all;
}
.Spinner.body > .spinner-container path,
.Spinner.body > .spinner-container circle,
.Spinner.body > .spinner-container g {
fill: #313E48;
}
.Spinner.black > .spinner-container path,
.Spinner.black > .spinner-container circle,
.Spinner.black > .spinner-container g {
fill: #000000;
}
.Spinner.white > .spinner-container path,
.Spinner.white > .spinner-container circle,
.Spinner.white > .spinner-container g {
fill: #FFFFFF;
}
.Spinner.darkblue > .spinner-container path,
.Spinner.darkblue > .spinner-container circle,
.Spinner.darkblue > .spinner-container g {
fill: #1E4488;
}
.Spinner.turquoise > .spinner-container path,
.Spinner.turquoise > .spinner-container circle,
.Spinner.turquoise > .spinner-container g {
fill: #0071B3;
}
.Spinner.lightgrey > .spinner-container path,
.Spinner.lightgrey > .spinner-container circle,
.Spinner.lightgrey > .spinner-container g {
fill: #AEBFCC;
}
.Spinner.red > .spinner-container path,
.Spinner.red > .spinner-container circle,
.Spinner.red > .spinner-container g {
fill: #CE202F;
}
.Spinner.green > .spinner-container path,
.Spinner.green > .spinner-container circle,
.Spinner.green > .spinner-container g {
fill: #4AA486;
}
.Spinner.orange > .spinner-container path,
.Spinner.orange > .spinner-container circle,
.Spinner.orange > .spinner-container g {
fill: #F47E48;
}
.Spinner.darkgreen > .spinner-container path,
.Spinner.darkgreen > .spinner-container circle,
.Spinner.darkgreen > .spinner-container g {
fill: #1E5D4A;
}
.Spinner.darkgrey > .spinner-container path,
.Spinner.darkgrey > .spinner-container circle,
.Spinner.darkgrey > .spinner-container g {
fill: #3E5D6F;
}
.Spinner.size-small {
min-height: 0.75rem;
max-height: 0.75rem;
min-width: 0.75rem;
max-width: 0.75rem;
}
.Spinner.size-regular {
min-height: 1rem;
max-height: 1rem;
min-width: 1rem;
max-width: 1rem;
}
.Spinner.size-large {
min-height: 1.25rem;
max-height: 1.25rem;
min-width: 1.25rem;
max-width: 1.25rem;
}
/* --- general --- */
a {
transition: color ease 0.2s;
text-decoration: underline;
color: #0071B3;
}
a:hover {
color: #00629C;
}
/* --- general/TabbedContainer --- */
.TabbedContainer {
display: flex;
flex-direction: column;
}
.TabPanel {
flex: 1;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
background-color: #FFFFFF;
padding: 1.5rem;
box-shadow: none !important;
overflow: auto;
display: flex;
flex-direction: column;
}
.TabPanel > .tab-panel-content {
flex: 1;
}
.TabPanel > .tab-panel-content.hidden {
overflow: hidden;
height: 0;
}
.TabPanel > .tab-panel-content > .body {
display: contents;
}
/* --- general/Table/columnTypes --- */
.ActionsCell > .cell-outer-content > .cell-inner-content {
pointer-events: none;
}
.ActionsCell:not(th) > .cell-outer-content > .cell-inner-content {
padding: 0 !important;
}
.ActionsContainer {
height: 100%;
pointer-events: all;
padding: 0.25rem 0.5rem;
}
.Actions {
height: 100%;
}
.Actions > .action.body .icon > .icon-container path,
.Actions > .action.body .icon > .icon-container circle,
.Actions > .action.body .icon > .icon-container g {
fill: #313E48 !important;
}
.Actions > .action.black .icon > .icon-container path,
.Actions > .action.black .icon > .icon-container circle,
.Actions > .action.black .icon > .icon-container g {
fill: #000000 !important;
}
.Actions > .action.white .icon > .icon-container path,
.Actions > .action.white .icon > .icon-container circle,
.Actions > .action.white .icon > .icon-container g {
fill: #FFFFFF !important;
}
.Actions > .action.darkblue .icon > .icon-container path,
.Actions > .action.darkblue .icon > .icon-container circle,
.Actions > .action.darkblue .icon > .icon-container g {
fill: #1E4488 !important;
}
.Actions > .action.turquoise .icon > .icon-container path,
.Actions > .action.turquoise .icon > .icon-container circle,
.Actions > .action.turquoise .icon > .icon-container g {
fill: #0071B3 !important;
}
.Actions > .action.lightgrey .icon > .icon-container path,
.Actions > .action.lightgrey .icon > .icon-container circle,
.Actions > .action.lightgrey .icon > .icon-container g {
fill: #AEBFCC !important;
}
.Actions > .action.red .icon > .icon-container path,
.Actions > .action.red .icon > .icon-container circle,
.Actions > .action.red .icon > .icon-container g {
fill: #CE202F !important;
}
.Actions > .action.green .icon > .icon-container path,
.Actions > .action.green .icon > .icon-container circle,
.Actions > .action.green .icon > .icon-container g {
fill: #4AA486 !important;
}
.Actions > .action.orange .icon > .icon-container path,
.Actions > .action.orange .icon > .icon-container circle,
.Actions > .action.orange .icon > .icon-container g {
fill: #F47E48 !important;
}
.Actions > .action.darkgreen .icon > .icon-container path,
.Actions > .action.darkgreen .icon > .icon-container circle,
.Actions > .action.darkgreen .icon > .icon-container g {
fill: #1E5D4A !important;
}
.Actions > .action.darkgrey .icon > .icon-container path,
.Actions > .action.darkgrey .icon > .icon-container circle,
.Actions > .action.darkgrey .icon > .icon-container g {
fill: #3E5D6F !important;
}
.Actions > .action.disabled {
opacity: 1;
}
.Actions > .action.disabled .icon > .icon-container path,
.Actions > .action.disabled .icon > .icon-container circle,
.Actions > .action.disabled .icon > .icon-container g {
fill: #CFD9E1 !important;
}
.Actions > .action.menu > .button {
padding: calc(0.375rem - 1px);
border-radius: 1px;
height: 100%;
}
.Actions > .action.menu > .button > .body {
display: block;
}
.Actions > .action.menu > .button > .body > .shelf > .semibold {
display: none;
}
.Actions > .action.menu > .button.down {
background-color: #ebeff5;
}
.Actions > .action.menu .dropdown-arrow {
display: none;
}
.Numerical {
align-items: normal !important;
}
/* --- general/Table --- */
.Table {
background-color: #FFFFFF;
overflow: hidden;
border-radius: 0.25rem;
border: solid 1px #CFD9E1;
}
.Table > .stack {
height: 100%;
}
.Table > .stack > .table-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
position: relative;
}
.Table > .stack > .table-container .scroll-indicator {
position: absolute;
top: 0;
height: 100%;
width: 0.8rem;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
opacity: 0;
transition: opacity linear 0.1s;
}
.Table > .stack > .table-container .scroll-indicator.left {
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
right: 0;
transform: translate(100%, 0);
}
.Table > .stack > .table-container .scroll-indicator.right {
background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
left: 0;
transform: translate(-100%, 0);
}
.Table.initializing {
min-height: fit-content !important;
}
.Table.initializing > .stack > .table-container > .inner-table {
opacity: 0.5;
pointer-events: none;
}
.Table.empty:not(.initializing) {
min-height: fit-content !important;
}
.Table.empty:not(.initializing) > .stack > .table-container {
min-height: 6rem;
}
.Table.empty:not(.initializing) > .stack > .table-container > .inner-table {
opacity: 0.5;
pointer-events: none;
overflow: hidden;
}
.Table.can-scroll-left .scroll-indicator.left {
opacity: 1;
}
.Table.can-scroll-right .scroll-indicator.right {
opacity: 1;
}
.MessageContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
padding-top: 2.625rem;
}
.NoResultsOnFilter {
padding: 0.9rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.Header,
.Footer {
padding: 0.5rem 0.625rem;
}
.LoadingContainer {
padding: 1.5rem;
width: 100%;
}
.Header {
border-bottom: solid 1px #CFD9E1;
}
.Footer {
border-top: solid 1px #CFD9E1;
}
.InnerTable {
display: grid;
position: relative;
width: 100%;
max-height: 100%;
height: 100%;
overflow: auto;
border-radius: 0.25rem;
border-spacing: 0;
border-collapse: collapse;
}
.InnerTable > thead, .InnerTable > tbody, .InnerTable > thead > tr, .InnerTable > tbody > tr {
display: contents;
}
.TableColumnHeader,
.TableCell {
border: solid 1px #CFD9E1;
border-top: none;
border-right: none;
display: flex;
flex-direction: column;
justify-content: center;
color: inherit;
font: inherit;
line-height: inherit;
white-space: nowrap;
padding: 0;
margin: 0;
position: relative;
}
.TableColumnHeader > .cell-outer-content,
.TableCell > .cell-outer-content {
overflow: hidden;
max-width: 100%;
}
.TableColumnHeader {
position: sticky;
z-index: 2;
top: 0;
text-align: left;
background-color: #FFFFFF;
border-bottom-width: 1px;
transition: background-color ease 0.2s;
cursor: default;
}
.TableColumnHeader > .cell-outer-content > .cell-inner-content {
padding: 0.625rem 0.75rem;
}
.TableColumnHeader > .cell-outer-content > .cell-inner-content > .semibold {
display: flex;
height: fit-content;
}
.TableColumnHeader .sort-indicator.unsorted {
opacity: 0.25;
}
.TableColumnHeader.sortable {
cursor: pointer;
}
.TableColumnHeader.sortable:hover, .TableColumnHeader.sortable:focus {
outline: none;
background-color: #D8E8F6;
}
.TableColumnHeader.lock-left, .TableColumnHeader.lock-right {
z-index: 3;
}
.TableColumnHeader.transition-left {
border-left: none;
}
.TableColumnHeader.transition-left.lock-right {
border-left: solid 1px #CFD9E1;
}
.TableColumnHeader.transition-right {
border-right: none;
}
.TableColumnHeader.transition-right.lock-left {
border-right: solid 1px #CFD9E1;
}
.TableColumnHeader:not(.virtual-column):first-of-type {
border-left: none;
border-top-left-radius: 0.25rem;
}
.TableColumnHeader.tail {
content: "";
padding: 0;
min-width: 0;
border-left: none;
}
.TableColumnHeader.tail > .cell-outer-content {
display: none;
}
.TableCell {
z-index: 0;
}
.TableCell > .cell-outer-content > .cell-inner-content {
padding: 0.5rem 0.75rem;
}
.TableCell.align-left {
align-items: flex-start;
}
.TableCell.align-right {
align-items: flex-end;
}
.TableCell.align-center {
align-items: center;
}
.TableCell.lock-left, .TableCell.lock-right {
position: sticky;
z-index: 1;
}
.TableCell.transition-left {
border-left: none;
}
.TableCell.transition-left.lock-right {
border-left: solid 1px #CFD9E1;
}
.TableCell.transition-right {
border-right: none;
}
.TableCell.transition-right.lock-left {
border-right: solid 1px #CFD9E1;
}
.TableCell:not(.virtual-column):first-of-type {
border-left: none;
}
.TableCell.tail {
content: "";
padding: 0;
min-width: 0;
border-left: none;
}
.TableCell.tail > .cell-outer-content {
display: none;
}
.TableColumnHeader.virtual-column,
.TableCell.virtual-column {
min-width: 0;
padding: 0 !important;
width: 0 !important;
border: none !important;
}
.SelectionCell {
padding: 0;
}
.SelectionCell.table-cell {
pointer-events: none;
}
.SelectionCell .checkbox {
height: 100%;
max-height: initial;
}
.SelectionCell .checkbox > .shared-checkbox > .shelf > .check {
margin-top: 0 !important;
}
.SelectionCell .checkbox > .shared-checkbox > .shelf > .label > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.SpacerCell {
min-height: 0;
}
.CheckboxCellContainer {
pointer-events: all;
width: 100%;
height: 100%;
line-height: 0;
overflow: hidden;
display: flex;
justify-content: center;
}
/* --- general/TabSet --- */
.TabSet {
display: block;
overflow: hidden;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
background-color: #FFFFFF;
position: relative;
}
.TabSet.span-across .Tab {
flex-grow: 1;
}
.Indicator {
position: absolute;
bottom: 0;
height: 0.125rem;
background-color: #00629C;
width: 1px;
transform-origin: left center;
opacity: 1;
pointer-events: none;
}
.Indicator.transitioning {
transition: transform 0.2s ease;
}
.Indicator.hidden {
opacity: 0;
}
.ScrollArea {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #CFD9E1 #F6F8F9;
min-width: 0;
min-height: 0;
}
.ScrollArea::-webkit-scrollbar {
height: 0.25rem;
}
.ScrollArea::-webkit-scrollbar-track {
background: #F6F8F9;
}
.ScrollArea::-webkit-scrollbar-thumb {
background-color: #CFD9E1;
}
.Items {
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
margin: 0;
border-bottom: solid 0.125rem #CFD9E1;
min-width: max-content;
}
.HotSpot {
display: flex;
justify-content: center;
padding: 0.5rem 0.25rem;
margin: 0;
border: none;
background-color: transparent;
font-family: inherit;
color: inherit;
cursor: pointer;
transition: color 0.2s ease;
}
.HotSpot:focus {
outline: none;
}
.Content {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease;
position: relative;
}
.Loader {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.Loader span > span {
background-color: #0071B3;
}
.ClientArea {
display: inline-block;
min-width: 1rem;
opacity: 1;
transition: opacity 0.2s ease;
}
.Tab {
padding: 0;
margin: 0;
flex-shrink: 0;
position: relative;
}
.Tab.spacer {
pointer-events: none;
}
.Tab:not(.selected):not(.disabled) .HotSpot:is(button) {
cursor: pointer;
}
.Tab:not(.selected):not(.disabled) .HotSpot:is(button):hover, .Tab:not(.selected):not(.disabled) .HotSpot:is(button):focus {
color: #00629C;
}
.Tab:not(.selected):not(.disabled) .HotSpot:is(button):hover .Content, .Tab:not(.selected):not(.disabled) .HotSpot:is(button):focus .Content {
background-color: #F1F6FB;
}
.Tab:not(.selected):not(.disabled) .HotSpot:is(button):hover .ClientArea, .Tab:not(.selected):not(.disabled) .HotSpot:is(button):focus .ClientArea {
color: inherit;
}
.Tab:first-child .HotSpot {
padding-left: 1rem;
}
.Tab:last-child .HotSpot {
padding-right: 1rem;
}
.Tab.selected .HotSpot {
color: #00629C;
}
.Tab.selected .ClientArea {
color: inherit;
}
.Tab.show-error .HotSpot {
color: #B8222A !important;
}
.Tab.show-error .Content {
background-color: #FEF4F2 !important;
}
.Tab.show-error .ClientArea {
color: #B8222A !important;
}
.Tab.busy .ClientArea {
opacity: 0;
}
.Tab.disabled {
opacity: 0.5;
}
.LeftOverflowIndicator,
.RightOverflowIndicator {
position: absolute;
top: 0;
width: 0.25rem;
height: 100%;
pointer-events: none;
opacity: 0;
z-index: 1;
transition: opacity 0.2s ease;
}
.LeftOverflowIndicator.visible,
.RightOverflowIndicator.visible {
opacity: 1;
}
.LeftOverflowIndicator {
left: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(196, 196, 196, 0) 100%);
border-top-left-radius: 0.25rem;
}
.RightOverflowIndicator {
right: 0;
background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(196, 196, 196, 0) 100%);
border-top-right-radius: 0.25rem;
}
/* --- general/Tag --- */
.Tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 0.25rem;
padding: 0 0.5rem;
line-height: 1.125rem;
}
.Tag > .body {
line-height: inherit;
text-transform: capitalize;
color: inherit;
}
.Tag.info {
color: #3E5D6F;
background-color: #F6F8F9;
border-color: #CFD9E1;
}
.Tag.info-high-contrast {
background-color: #3E5D6F;
border-color: #3E5D6F;
color: white;
}
.Tag.info-high-contrast.inverted {
color: #3E5D6F;
border-color: #3E5D6F;
}
.Tag.system {
color: #00629C;
background-color: #F1F6FB;
border-color: #A5CAEB;
}
.Tag.system-high-contrast {
background-color: #00629C;
border-color: #00629C;
color: white;
}
.Tag.system-high-contrast.inverted {
color: #00629C;
border-color: #00629C;
}
.Tag.system-alternative {
color: #4F5B97;
background-color: #F6F6FB;
border-color: #C7C9E2;
}
.Tag.system-alternative-high-contrast {
background-color: #4F5B97;
border-color: #4F5B97;
color: white;
}
.Tag.system-alternative-high-contrast.inverted {
color: #4F5B97;
border-color: #4F5B97;
}
.Tag.error {
color: #B8222A;
background-color: #FEF4F2;
border-color: #F9B7AF;
}
.Tag.error-high-contrast {
background-color: #B8222A;
border-color: #B8222A;
color: white;
}
.Tag.error-high-contrast.inverted {
color: #B8222A;
border-color: #B8222A;
}
.Tag.warning {
color: #313E48;
background-color: #FCFAF2;
border-color: #F2E9C7;
}
.Tag.warning-high-contrast {
background-color: #E1CF77;
border-color: #E1CF77;
color: #313E48;
}
.Tag.warning-high-contrast.inverted {
color: #313E48;
border-color: #E1CF77;
}
.Tag.success {
color: #317861;
background-color: #F3F7F4;
border-color: #BFD7CC;
}
.Tag.success-high-contrast {
background-color: #317861;
border-color: #317861;
color: white;
}
.Tag.success-high-contrast.inverted {
color: #317861;
border-color: #317861;
}
.Tag.inverted {
background-color: white;
}
/* --- general/Tooltip --- */
.TooltipContainer {
position: fixed;
z-index: 999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.TooltipContainerContent {
top: 1rem;
left: 1rem;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
position: absolute;
}
.TooltipContainerContent > :not(:last-child) {
display: none;
}
.Tooltip {
position: relative;
width: fit-content;
border-radius: 0.25rem;
padding: 0.5rem;
pointer-events: none;
max-width: 25rem;
visibility: hidden;
}
.Tooltip.visible {
visibility: visible;
}
.Tooltip > .body {
z-index: 1;
}
.Tooltip > .TooltipConnector {
z-index: 0;
}
.Tooltip.alignment-top > .TooltipConnector, .Tooltip.alignment-bottom > .TooltipConnector {
left: 50%;
}
.Tooltip.alignment-left > .TooltipConnector, .Tooltip.alignment-right > .TooltipConnector {
top: 50%;
}
.Tooltip.alignment-top > .TooltipConnector {
top: 100%;
}
.Tooltip.alignment-left > .TooltipConnector {
left: 100%;
}
.Tooltip.alignment-right > .TooltipConnector {
left: 0;
}
.Tooltip.alignment-bottom > .TooltipConnector {
top: 0;
}
.Tooltip.dark {
background-color: #313E48;
}
.Tooltip.dark > .body {
color: #F1F1F1;
}
.Tooltip.dark > .TooltipConnector {
background-color: #313E48;
}
.Tooltip.light {
background-color: #FFFFFF;
}
.Tooltip.light > .body {
color: #313E48;
}
.Tooltip.light > .TooltipConnector {
background-color: #FFFFFF;
}
.TooltipConnector {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%) rotate(45deg);
width: 0.5rem;
height: 0.5rem;
}
/* --- general/Badge --- */
.Badge {
--badge-close-icon-fill: var(--color-icon-info);
--badge-close-icon-fill-hover: var(--color-icon-info-hover);
}
/* Use `.Badge .CloseButton` (specificity 0,2,0) so these declarations
beat the base Button rules (specificity 0,1,0) without needing
!important. This is safe because Badge always renders CloseButton
as a descendant of the .Badge root element. */
.Badge .CloseButton {
padding: var(--dimension-close-button-padding, calc(0.2rem - 1px));
height: var(--dimension-close-button-height, 1.5rem);
min-height: var(--dimension-close-button-height, 1.5rem);
}
.Badge .CloseButton .icon > .icon-container path,
.Badge .CloseButton .icon > .icon-container circle,
.Badge .CloseButton .icon > .icon-container g {
fill: var(--badge-close-icon-fill);
}
.Badge .CloseButton:not(.disabled):hover .icon > .icon-container path,
.Badge .CloseButton:not(.disabled):hover .icon > .icon-container circle,
.Badge .CloseButton:not(.disabled):hover .icon > .icon-container g,
.Badge .CloseButton:not(.disabled):active .icon > .icon-container path,
.Badge .CloseButton:not(.disabled):active .icon > .icon-container circle,
.Badge .CloseButton:not(.disabled):active .icon > .icon-container g {
transition: fill var(--transition-easing-default, ease) var(--transition-duration-normal, 0.2s);
fill: var(--badge-close-icon-fill-hover);
}
.Badge.info {
--badge-close-icon-fill: var(--color-icon-info);
--badge-close-icon-fill-hover: var(--color-icon-info-hover);
}
.Badge.info.inverted {
--badge-close-icon-fill: var(--color-icon-info-inverted);
--badge-close-icon-fill-hover: var(--color-icon-info-hover);
}
.Badge.info-high-contrast {
--badge-close-icon-fill: var(--color-icon-white);
--badge-close-icon-fill-hover: var(--color-icon-white);
}
.Badge.info-high-contrast.inverted {
--badge-close-icon-fill: var(--color-icon-info);
--badge-close-icon-fill-hover: var(--color-icon-info);
}
.Badge.system {
--badge-close-icon-fill: var(--color-icon-system);
--badge-close-icon-fill-hover: var(--color-icon-system-hover);
}
.Badge.system-high-contrast {
--badge-close-icon-fill: var(--color-icon-white);
--badge-close-icon-fill-hover: var(--color-icon-white);
}
.Badge.system-high-contrast.inverted {
--badge-close-icon-fill: var(--color-icon-system);
--badge-close-icon-fill-hover: var(--color-icon-system);
}
.Badge.system-alternative {
--badge-close-icon-fill: var(--color-icon-system-alt);
--badge-close-icon-fill-hover: var(--color-icon-system-alt-hover);
}
.Badge.system-alternative-high-contrast {
--badge-close-icon-fill: var(--color-icon-white);
--badge-close-icon-fill-hover: var(--color-icon-white);
}
.Badge.system-alternative-high-contrast.inverted {
--badge-close-icon-fill: var(--color-icon-system-alt);
--badge-close-icon-fill-hover: var(--color-icon-system-alt);
}
.Badge.error {
--badge-close-icon-fill: var(--color-icon-error);
--badge-close-icon-fill-hover: var(--color-icon-error-hover);
}
.Badge.error-high-contrast {
--badge-close-icon-fill: var(--color-icon-white);
--badge-close-icon-fill-hover: var(--color-icon-white);
}
.Badge.error-high-contrast.inverted {
--badge-close-icon-fill: var(--color-icon-error);
--badge-close-icon-fill-hover: var(--color-icon-error);
}
.Badge.warning {
--badge-close-icon-fill: var(--color-icon-warning);
--badge-close-icon-fill-hover: var(--color-icon-warning-hover);
}
.Badge.warning-high-contrast {
--badge-close-icon-fill: var(--color-text-secondary);
--badge-close-icon-fill-hover: var(--color-text-secondary);
}
.Badge.warning-high-contrast.inverted {
--badge-close-icon-fill: var(--color-icon-warning);
--badge-close-icon-fill-hover: var(--color-icon-warning);
}
.Badge.success {
--badge-close-icon-fill: var(--color-icon-success);
--badge-close-icon-fill-hover: var(--color-icon-success-hover);
}
.Badge.success-high-contrast {
--badge-close-icon-fill: var(--color-icon-white);
--badge-close-icon-fill-hover: var(--color-icon-white);
}
.Badge.success-high-contrast.inverted {
--badge-close-icon-fill: var(--color-icon-success);
--badge-close-icon-fill-hover: var(--color-icon-success);
}
/* --- general/Tag --- */
.Tag {
display: var(--layout-display-inline-block, inline-block);
border-width: var(--border-width-thin, 1px);
border-style: var(--border-style-base, solid);
border-radius: var(--border-radius-sm, 0.25rem);
padding: var(--spacing-compound-tag-padding, 0 0.5rem);
line-height: var(--font-line-height-tag, 1.125rem);
& > .body {
line-height: inherit;
text-transform: var(--font-transform-none, none);
color: inherit;
}
&.info {
color: var(--color-text-info);
background-color: var(--color-background-info);
border-color: var(--color-border-info);
}
&.info-high-contrast {
color: var(--color-text-inverse);
background-color: var(--color-background-info-high-contrast);
border-color: var(--color-border-info-high-contrast);
&.inverted {
color: var(--color-text-info);
border-color: var(--color-border-info-high-contrast);
}
}
&.system {
color: var(--color-text-system);
background-color: var(--color-background-system);
border-color: var(--color-border-system);
}
&.system-high-contrast {
color: var(--color-text-inverse);
background-color: var(--color-background-system-high-contrast);
border-color: var(--color-border-system-high-contrast);
&.inverted {
color: var(--color-text-system);
border-color: var(--color-border-system-high-contrast);
}
}
&.system-alternative {
color: var(--color-text-system-alt);
background-color: var(--color-background-system-alt);
border-color: var(--color-border-system-alt);
}
&.system-alternative-high-contrast {
color: var(--color-text-inverse);
background-color: var(--color-background-system-alt-high-contrast);
border-color: var(--color-border-system-alt-high-contrast);
&.inverted {
color: var(--color-text-system-alt);
border-color: var(--color-border-system-alt-high-contrast);
}
}
&.error {
color: var(--color-text-error);
background-color: var(--color-background-error);
border-color: var(--color-border-error);
}
&.error-high-contrast {
color: var(--color-text-inverse);
background-color: var(--color-background-error-high-contrast);
border-color: var(--color-border-error-high-contrast);
&.inverted {
color: var(--color-text-error);
border-color: var(--color-border-error-high-contrast);
}
}
&.warning {
color: var(--color-text-primary);
background-color: var(--color-background-warning);
border-color: var(--color-border-warning);
}
&.warning-high-contrast {
color: var(--color-text-primary);
background-color: var(--color-background-warning-high-contrast);
border-color: var(--color-border-warning-high-contrast);
&.inverted {
color: var(--color-text-primary);
border-color: var(--color-border-warning-high-contrast);
}
}
&.success {
color: var(--color-text-success);
background-color: var(--color-background-success);
border-color: var(--color-border-success);
}
&.success-high-contrast {
color: var(--color-text-inverse);
background-color: var(--color-background-success-high-contrast);
border-color: var(--color-border-success-high-contrast);
&.inverted {
color: var(--color-text-success);
border-color: var(--color-border-success-high-contrast);
}
}
&.inverted {
background-color: var(--color-background-surface);
}
}
/* ==========================================================================
FORMS
========================================================================== */
/* --- forms/CheckboxGroup --- */
.CheckboxGroup > .group-container > .stack > .group {
padding-left: 1.625rem;
}
/* --- forms/Checkbox --- */
.Checkbox,
.CheckboxPlaceholder,
.SharedCheckboxPlaceholder {
min-width: fit-content;
}
.SharedCheckboxPlaceholder > .label {
visibility: hidden;
}
.SharedCheckboxPlaceholder > .shelf > .check {
padding: calc(0.5rem + 2px) 0;
line-height: 1.125rem;
}
.SharedCheckboxPlaceholder > .shelf > .check .react-loading-skeleton {
border-radius: 0.188rem;
min-width: 1.125rem;
max-width: 1.125rem;
line-height: inherit;
}
.SharedCheckboxPlaceholder > .shelf > .label {
flex: 1;
padding: calc(0.5rem + 2px) 0;
line-height: 1.125rem;
}
.SharedCheckboxPlaceholder > .shelf > .label .react-loading-skeleton {
max-width: 200px;
line-height: inherit;
}
.SharedCheckbox > .shelf > .check {
margin-top: calc(0.5rem + 2px) !important;
}
.SharedCheckbox > .shelf > .label {
display: block;
line-height: 1.125rem !important;
}
.SharedCheckbox > .shelf > .label > label {
cursor: pointer;
padding: calc(0.4375rem + 2px) 0;
padding-left: 1.625rem;
margin-left: -1.125rem;
}
.SharedCheckbox.unpadded > .shelf > .check {
margin-top: 0 !important;
}
.SharedCheckbox.unpadded > .shelf > .label > label {
padding: 0;
padding-left: 1.625rem;
margin-left: -1.125rem;
}
.SharedCheckbox > .shelf > .label {
color: #313E48 !important;
}
.SharedCheckbox.invalid > .shelf > .label {
color: #313E48 !important;
}
.SharedCheckbox.readonly > .shelf > .label {
color: #313E48 !important;
}
.SharedCheckbox.disabled > .shelf > .label {
color: #67899F !important;
}
.SharedCheckbox.readonly > .shelf > .label > label, .SharedCheckbox.disabled > .shelf > .label > label {
cursor: default;
}
.Check {
display: block;
position: relative;
width: 1.125rem;
height: 1.125rem;
min-width: 1.125rem;
min-height: 1.125rem;
margin-right: 0.5rem;
overflow: hidden;
border-radius: 0.188rem;
}
.Check > .input {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(4);
opacity: 0;
z-index: 1;
cursor: pointer;
}
.Check > .check-container {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
transition: border-color ease 0.2s;
overflow: hidden;
border-radius: 0.188rem;
z-index: 0;
}
.Check > .check-container > .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Check:focus, .Check:hover {
outline: none;
}
.Check > .check-container {
background-color: #FFFFFF;
border-color: #AEBFCC;
}
.Check > .check-container > .icon > .icon-container path,
.Check > .check-container > .icon > .icon-container circle,
.Check > .check-container > .icon > .icon-container g {
fill: #313E48 !important;
}
.Check.invalid > .check-container {
background-color: #FFFFFF;
border-color: #B8222A;
}
.Check.invalid > .check-container > .icon > .icon-container path,
.Check.invalid > .check-container > .icon > .icon-container circle,
.Check.invalid > .check-container > .icon > .icon-container g {
fill: #313E48 !important;
}
.Check.readonly > .check-container {
background-color: #E9EEF1;
border-color: #CFD9E1;
}
.Check.readonly > .check-container > .icon > .icon-container path,
.Check.readonly > .check-container > .icon > .icon-container circle,
.Check.readonly > .check-container > .icon > .icon-container g {
fill: #3E5D6F !important;
}
.Check.disabled > .check-container {
background-color: #CFD9E1;
border-color: transparent;
}
.Check.disabled > .check-container > .icon > .icon-container path,
.Check.disabled > .check-container > .icon > .icon-container circle,
.Check.disabled > .check-container > .icon > .icon-container g {
fill: transparent !important;
}
.Check.readonly > .input, .Check.disabled > .input {
cursor: default;
}
.Check:not(.disabled):not(.readonly):focus-within {
box-shadow: 0px 0px 4px rgba(0, 141, 206, 0.65);
}
.Check:not(.disabled):not(.readonly):focus-within > .check-container {
border-color: #008DCE;
background-color: #FFFFFF;
}
.Check:not(.disabled):not(.readonly):focus-within > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly):focus-within > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly):focus-within > .check-container > .icon > .icon-container g {
fill: #313E48 !important;
}
.Check:not(.disabled):not(.readonly):hover > .check-container, .Check:not(.disabled):not(.readonly).hover > .check-container {
border-color: #3E5D6F;
background-color: #FFFFFF;
}
.Check:not(.disabled):not(.readonly):hover > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly):hover > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly):hover > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).hover > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).hover > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).hover > .check-container > .icon > .icon-container g {
fill: #FFFFFF !important;
}
.Check:not(.disabled):not(.readonly).checked, .Check:not(.disabled):not(.readonly).indeterminate {
transition: border-color ease 0.2s, background-color ease 0.2s;
}
.Check:not(.disabled):not(.readonly).checked > .check-container, .Check:not(.disabled):not(.readonly).indeterminate > .check-container {
border-color: #0071B3;
background-color: #0071B3;
}
.Check:not(.disabled):not(.readonly).checked > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).checked > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).checked > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).indeterminate > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).indeterminate > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).indeterminate > .check-container > .icon > .icon-container g {
fill: #FFFFFF !important;
}
.Check:not(.disabled):not(.readonly).checked:focus-within, .Check:not(.disabled):not(.readonly).indeterminate:focus-within {
box-shadow: 0px 0px 4px rgba(0, 141, 206, 0.65);
}
.Check:not(.disabled):not(.readonly).checked:focus-within > .check-container, .Check:not(.disabled):not(.readonly).indeterminate:focus-within > .check-container {
border-color: #008DCE;
background-color: #008DCE;
}
.Check:not(.disabled):not(.readonly).checked:focus-within > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).checked:focus-within > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).checked:focus-within > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).indeterminate:focus-within > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).indeterminate:focus-within > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).indeterminate:focus-within > .check-container > .icon > .icon-container g {
fill: #FFFFFF !important;
}
.Check:not(.disabled):not(.readonly).checked:hover > .check-container, .Check:not(.disabled):not(.readonly).checked.hover > .check-container, .Check:not(.disabled):not(.readonly).indeterminate:hover > .check-container, .Check:not(.disabled):not(.readonly).indeterminate.hover > .check-container {
border-color: #008DCE;
background-color: #008DCE;
}
.Check:not(.disabled):not(.readonly).checked:hover > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).checked:hover > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).checked:hover > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).checked.hover > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).checked.hover > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).checked.hover > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).indeterminate:hover > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).indeterminate:hover > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).indeterminate:hover > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).indeterminate.hover > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).indeterminate.hover > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).indeterminate.hover > .check-container > .icon > .icon-container g {
fill: #FFFFFF !important;
}
.Check:not(.disabled):not(.readonly).checked:active > .check-container, .Check:not(.disabled):not(.readonly).indeterminate:active > .check-container {
border-color: #00629C;
background-color: #00629C;
}
.Check:not(.disabled):not(.readonly).checked:active > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).checked:active > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).checked:active > .check-container > .icon > .icon-container g, .Check:not(.disabled):not(.readonly).indeterminate:active > .check-container > .icon > .icon-container path,
.Check:not(.disabled):not(.readonly).indeterminate:active > .check-container > .icon > .icon-container circle,
.Check:not(.disabled):not(.readonly).indeterminate:active > .check-container > .icon > .icon-container g {
fill: #FFFFFF !important;
}
/* --- forms/Dropdown/components/Control --- */
.Prefix,
.Suffix {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
overflow: hidden;
flex-shrink: 0;
pointer-events: none;
white-space: nowrap;
}
.Control {
transition: border-color 0.2s ease;
padding: 0 0.5rem;
border-width: 1px;
border-style: solid;
max-height: fit-content;
border-radius: 0.25rem;
gap: 0.5rem !important;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
border-color: #AEBFCC;
background-color: #FFFFFF;
color: #313E48;
}
.Control > .Prefix, .Control > .Suffix {
color: #7B98AB;
}
.Control > .arrow > .icon-container path,
.Control > .arrow > .icon-container circle,
.Control > .arrow > .icon-container g {
fill: #94ABBB !important;
}
.Control .clear .icon > .icon-container path,
.Control .clear .icon > .icon-container circle,
.Control .clear .icon > .icon-container g {
fill: #7B98AB !important;
}
.Control.invalid {
border-color: #B8222A;
background-color: #FFFFFF;
color: #313E48;
}
.Control.invalid > .Prefix, .Control.invalid > .Suffix {
color: #7B98AB;
}
.Control.invalid > .arrow > .icon-container path,
.Control.invalid > .arrow > .icon-container circle,
.Control.invalid > .arrow > .icon-container g {
fill: #94ABBB !important;
}
.Control.invalid .clear .icon > .icon-container path,
.Control.invalid .clear .icon > .icon-container circle,
.Control.invalid .clear .icon > .icon-container g {
fill: #7B98AB !important;
}
.Control.focused {
outline: none;
border-color: #008DCE;
background-color: #FFFFFF;
color: #313E48;
}
.Control.focused > .Prefix, .Control.focused > .Suffix {
color: #7B98AB;
}
.Control.focused > .arrow > .icon-container path,
.Control.focused > .arrow > .icon-container circle,
.Control.focused > .arrow > .icon-container g {
fill: #94ABBB !important;
}
.Control.focused .clear .icon > .icon-container path,
.Control.focused .clear .icon > .icon-container circle,
.Control.focused .clear .icon > .icon-container g {
fill: #7B98AB !important;
}
.Control.focused:not(.readonly) {
box-shadow: 0px 0px 4px rgba(0, 141, 206, 0.65);
}
.Control:hover, .Control.hover {
border-color: #3E5D6F;
background-color: #FFFFFF;
color: #313E48;
}
.Control:hover > .Prefix, .Control:hover > .Suffix, .Control.hover > .Prefix, .Control.hover > .Suffix {
color: #7B98AB;
}
.Control:hover > .arrow > .icon-container path,
.Control:hover > .arrow > .icon-container circle,
.Control:hover > .arrow > .icon-container g, .Control.hover > .arrow > .icon-container path,
.Control.hover > .arrow > .icon-container circle,
.Control.hover > .arrow > .icon-container g {
fill: #94ABBB !important;
}
.Control:hover .clear .icon > .icon-container path,
.Control:hover .clear .icon > .icon-container circle,
.Control:hover .clear .icon > .icon-container g, .Control.hover .clear .icon > .icon-container path,
.Control.hover .clear .icon > .icon-container circle,
.Control.hover .clear .icon > .icon-container g {
fill: #7B98AB !important;
}
.Control.readonly {
border-color: #CFD9E1;
background-color: #E9EEF1;
color: #3E5D6F;
}
.Control.readonly > .Prefix, .Control.readonly > .Suffix {
color: #7B98AB;
}
.Control.readonly > .arrow > .icon-container path,
.Control.readonly > .arrow > .icon-container circle,
.Control.readonly > .arrow > .icon-container g {
fill: #94ABBB !important;
}
.Control.readonly .clear .icon > .icon-container path,
.Control.readonly .clear .icon > .icon-container circle,
.Control.readonly .clear .icon > .icon-container g {
fill: #7B98AB !important;
}
.Control.disabled {
border-color: transparent;
background-color: #CFD9E1;
color: transparent;
}
.Control.disabled > .Prefix, .Control.disabled > .Suffix {
color: #CFD9E1;
}
.Control.disabled > .arrow > .icon-container path,
.Control.disabled > .arrow > .icon-container circle,
.Control.disabled > .arrow > .icon-container g {
fill: #94ABBB !important;
}
.Control.disabled .clear .icon > .icon-container path,
.Control.disabled .clear .icon > .icon-container circle,
.Control.disabled .clear .icon > .icon-container g {
fill: #7B98AB !important;
}
.Control.disabled {
pointer-events: none;
}
.Control.readonly, .Control.disabled {
cursor: default;
}
.DisabledPlaceholderContainer {
padding: 0.5rem 0;
}
/* --- forms/Dropdown/components/GroupHeading --- */
.GroupHeading {
display: block;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
margin: 0;
letter-spacing: 1px;
cursor: default;
white-space: nowrap;
}
/* --- forms/Dropdown/components/Group --- */
.Group {
padding: 0;
border-top: solid 1px #CFD9E1;
margin-top: 0.5rem;
padding-top: 0.5rem;
}
/* --- forms/Dropdown/components/MenuList --- */
.MenuList {
padding: 0;
max-height: 15rem;
overflow-y: auto;
overflow-x: hidden;
}
.SearchBox {
padding: 0.75rem;
border-bottom: solid 1px #CFD9E1;
}
.SearchBox.clearable .input {
padding-right: 1.625rem;
}
.MenuListFooter {
height: 2.5rem;
padding: 0.5rem 0.75rem;
border-top: solid 1px #CFD9E1;
}
.MenuListCheckbox {
height: 2.5rem;
padding: 0.5rem 0.75rem;
border-bottom: solid 1px #CFD9E1;
}
.DropdownSearchClearButton {
position: absolute;
top: 1.2rem;
right: 1rem;
cursor: pointer;
}
.DropdownSearchClearButton .icon > .icon-container path,
.DropdownSearchClearButton .icon > .icon-container circle,
.DropdownSearchClearButton .icon > .icon-container g {
fill: #7B98AB !important;
}
/* --- forms/Dropdown/components/Menu --- */
.MenuContainer {
overflow: hidden;
height: 0;
min-width: 100%;
position: absolute;
}
.Menu {
background-color: #FFFFFF;
border: solid 1px #AEBFCC;
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
overflow: hidden;
}
/* --- forms/Dropdown/components/Option --- */
.Option {
padding: 0;
}
.Option:hover .Content, .Option.focused .Content, .Option.selected .Content {
color: #00629C;
background-color: #F1F6FB;
outline: none;
}
.Content {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
font: inherit;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: all 0.15s ease-in-out;
}
/* --- forms/Dropdown/components/Placeholder --- */
.Placeholder {
color: #94ABBB;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- forms/Dropdown/components/SingleValue --- */
.SingleValue {
padding: 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- forms/Dropdown/components/ValueContainer --- */
.ValueContainer {
display: flex;
flex: 1;
min-width: 0;
align-items: center;
padding: 0.4375rem 0;
margin: 0;
line-height: 1.25rem;
}
.ValueContainer input {
position: absolute;
pointer-events: none;
}
/* --- forms/Dropdown --- */
.PlaceholderDropdown .react-loading-skeleton {
line-height: inherit;
padding: calc(0.5rem + 1px);
}
/* --- forms/FileUpload --- */
.FileUpload .upload-target-container {
border-radius: 0.25rem;
background-color: #FFFFFF;
border: dashed 0.125rem #AEBFCC;
overflow: hidden;
padding: 1.5rem 1rem;
transition: border-color ease 0.2s, background-color ease 0.2s;
color: #0071B3;
cursor: default;
}
.FileUpload .upload-target-container input {
display: none;
}
.FileUpload .upload-target-container:hover, .FileUpload .upload-target-container:focus {
outline: none;
}
.FileUpload .files > .file {
background-color: #F6F8F9;
border: solid 1px #CFD9E1;
border-radius: 0.5rem;
padding: 1rem 0.5rem;
padding-right: 0.375rem;
overflow-wrap: anywhere;
}
.FileUpload .files > .file button, .FileUpload .files > .file .icon {
align-self: flex-start;
padding: 0;
}
.FileUpload > :not(.disabled).invalid .upload-target-container {
border-color: #B8222A;
}
.FileUpload > :not(.disabled) .upload-target-container {
cursor: pointer;
}
.FileUpload > :not(.disabled) .upload-target-container:hover, .FileUpload > :not(.disabled) .upload-target-container:focus {
border-color: #008DCE;
}
.FileUpload:not(.disabled) .files > .file.invalid {
border-color: #B8222A;
}
.FileUpload:not(.disabled) .files > .file.invalid .error-message {
color: #B8222A;
}
.FileUpload.disabled .upload-target-container,
.FileUpload.disabled .files {
color: #AEBFCC;
pointer-events: none;
}
.FileUpload.dropping > :not(.disabled) .upload-target-container {
border-color: #008DCE;
background-color: #F1F6FB;
}
.FileUploadPlaceholder > .input-container .react-loading-skeleton {
line-height: inherit;
padding: 2.5rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
/* --- forms/Form --- */
.Form {
padding: 0;
margin: 0;
}
.ModalForm {
flex: 1;
display: flex;
}
/* --- forms/InputAlignmentContainer --- */
.InputAlignmentContainer > .content {
min-height: 2.375rem;
height: fit-content;
}
.InputAlignmentContainer .alignment-spacer {
user-select: none;
pointer-events: none;
}
/* --- forms/MultiSelectDropdown --- */
.MultiSelectDropdown > .badge-container {
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
padding-top: 0.25rem;
}
.MultiSelectDropdown.readonly > .badge-container > .badge {
border-color: transparent;
}
.MultiSelectDropdown.readonly > .clear-container > .clear-button {
color: #7B98AB;
cursor: default;
}
.MultiSelectDropdown.readonly > .clear-container > .clear-button:hover, .MultiSelectDropdown.readonly > .clear-container > .clear-button:focus {
color: #7B98AB;
cursor: default;
}
.PlaceholderMultiSelectDropdown .react-loading-skeleton {
line-height: inherit;
padding: calc(0.5rem + 1px);
}
/* --- forms/NumberTextbox --- */
.Textbox > .input-container {
position: relative;
}
.TextboxPlaceholder > .input-container .react-loading-skeleton {
line-height: inherit;
padding: calc(0.5rem + 1px);
}
/* --- forms/RadioGroup --- */
.RadioGroup {
visibility: visible;
}
/* --- forms/Radio --- */
.Radio,
.RadioPlaceholder,
.SharedRadioPlaceholder {
min-width: fit-content;
}
.SharedRadioPlaceholder > .label {
visibility: hidden;
}
.SharedRadioPlaceholder > .shelf > .dot {
padding: calc(0.5rem + 2px) 0;
line-height: 1.125rem;
}
.SharedRadioPlaceholder > .shelf > .dot .react-loading-skeleton {
border-radius: 50%;
min-width: 1.125rem;
max-width: 1.125rem;
line-height: inherit;
}
.SharedRadioPlaceholder > .shelf > .label {
flex: 1;
padding: calc(0.5rem + 2px) 0;
line-height: 1.125rem;
}
.SharedRadioPlaceholder > .shelf > .label .react-loading-skeleton {
max-width: 200px;
line-height: inherit;
}
.SharedRadio > .shelf > .dot {
margin-top: calc(0.5rem + 2px) !important;
}
.SharedRadio > .shelf > .label {
display: block;
line-height: 1.125rem !important;
}
.SharedRadio > .shelf > .label > label {
cursor: pointer;
padding: calc(0.4375rem + 2px) 0;
padding-left: 1.625rem;
margin-left: -1.125rem;
}
.SharedRadio.unpadded > .shelf > .dot {
margin-top: 0 !important;
}
.SharedRadio.unpadded > .shelf > .label > label {
padding: 0;
padding-left: 1.625rem;
margin-left: -1.125rem;
}
.SharedRadio > .shelf > .label {
color: #313E48 !important;
}
.SharedRadio.invalid > .shelf > .label {
color: #313E48 !important;
}
.SharedRadio.readonly > .shelf > .label {
color: #313E48 !important;
}
.SharedRadio.disabled > .shelf > .label {
color: #67899F !important;
}
.SharedRadio.readonly > .shelf > .label > label, .SharedRadio.disabled > .shelf > .label > label {
cursor: default;
}
.Dot {
display: block;
position: relative;
width: 1.125rem;
height: 1.125rem;
min-width: 1.125rem;
min-height: 1.125rem;
box-sizing: border-box;
border-radius: 50%;
margin-right: 0.5rem;
overflow: hidden;
}
.Dot > .input {
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 1;
cursor: pointer;
}
.Dot > .dot-container {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
transition: border-color ease 0.2s;
overflow: hidden;
border-radius: 50%;
z-index: 0;
}
.Dot > .dot-container > .indicator {
position: absolute;
top: 50%;
left: 50%;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
transform: translate(-50%, -50%);
}
.Dot:focus, .Dot:hover {
outline: none;
}
.Dot > .dot-container {
background-color: #FFFFFF;
border-color: #AEBFCC;
}
.Dot > .dot-container > .indicator {
background-color: #313E48;
}
.Dot.invalid > .dot-container {
background-color: #FFFFFF;
border-color: #B8222A;
}
.Dot.invalid > .dot-container > .indicator {
background-color: #313E48;
}
.Dot.readonly > .dot-container {
background-color: #E9EEF1;
border-color: #CFD9E1;
}
.Dot.readonly > .dot-container > .indicator {
background-color: #3E5D6F;
}
.Dot.disabled > .dot-container {
background-color: #CFD9E1;
border-color: transparent;
}
.Dot.disabled > .dot-container > .indicator {
background-color: transparent;
}
.Dot.readonly > .input, .Dot.disabled > .input {
cursor: default;
}
.Dot:not(.disabled):not(.readonly):focus-within {
box-shadow: 0px 0px 4px rgba(0, 141, 206, 0.65);
}
.Dot:not(.disabled):not(.readonly):focus-within > .dot-container {
border-color: #008DCE;
background-color: #FFFFFF;
}
.Dot:not(.disabled):not(.readonly):focus-within > .dot-container > .indicator {
background-color: #313E48;
}
.Dot:not(.disabled):not(.readonly):hover > .dot-container, .Dot:not(.disabled):not(.readonly).hover > .dot-container {
border-color: #3E5D6F;
background-color: #FFFFFF;
}
.Dot:not(.disabled):not(.readonly):hover > .dot-container > .indicator, .Dot:not(.disabled):not(.readonly).hover > .dot-container > .indicator {
background-color: #FFFFFF;
}
.Dot:not(.disabled):not(.readonly).selected {
transition: border-color ease 0.2s, background-color ease 0.2s;
}
.Dot:not(.disabled):not(.readonly).selected > .dot-container {
border-color: #0071B3;
background-color: #0071B3;
}
.Dot:not(.disabled):not(.readonly).selected > .dot-container > .indicator {
background-color: #FFFFFF;
}
.Dot:not(.disabled):not(.readonly).selected:focus-within {
box-shadow: 0px 0px 4px rgba(0, 141, 206, 0.65);
}
.Dot:not(.disabled):not(.readonly).selected:focus-within > .dot-container {
border-color: #008DCE;
background-color: #008DCE;
}
.Dot:not(.disabled):not(.readonly).selected:focus-within > .dot-container > .indicator {
background-color: #FFFFFF;
}
.Dot:not(.disabled):not(.readonly).selected:hover > .dot-container, .Dot:not(.disabled):not(.readonly).selected.hover > .dot-container {
border-color: #008DCE;
background-color: #008DCE;
}
.Dot:not(.disabled):not(.readonly).selected:hover > .dot-container > .indicator, .Dot:not(.disabled):not(.readonly).selected.hover > .dot-container > .indicator {
background-color: #FFFFFF;
}
.Dot:not(.disabled):not(.readonly).selected:active > .dot-container {
border-color: #00629C;
background-color: #00629C;
}
.Dot:not(.disabled):not(.readonly).selected:active > .dot-container > .indicator {
background-color: #FFFFFF;
}
/* --- forms/SearchTextbox --- */
.ContainerWrapper {
position: relative;
width: 100%;
}
.ContainerContent {
top: -8px;
width: 100%;
}
.DropDownListContainer {
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
min-width: 100%;
max-height: 15rem;
position: absolute;
z-index: 100;
min-height: auto;
max-height: 5rem;
top: 90%;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.DropDownListContainer::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.DropDownListContainer ul {
margin: 0;
padding: 0;
}
.DropDownListContainer ul li:hover {
color: #00629C;
background-color: #F1F6FB;
outline: none;
}
/* --- forms/shared/CharacterCount --- */
.CharacterCount {
display: inline-block;
max-height: max-content;
color: #3E5D6F;
}
/* --- forms/shared/Error --- */
.Error {
display: inline-block;
max-height: max-content;
color: #B8222A;
}
/* --- forms/shared/GroupLayoutWrapper --- */
.GroupLayoutWrapper {
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 0 !important;
}
.GroupLayoutWrapper.unpadded {
row-gap: 0.5rem !important;
}
/* --- forms/shared/InputContainer --- */
.InputContainer .Label {
color: #313E48 !important;
}
.InputContainer .Label .tooltip-icon > .icon-container path,
.InputContainer .Label .tooltip-icon > .icon-container circle,
.InputContainer .Label .tooltip-icon > .icon-container g {
fill: !important;
}
.InputContainer .Instructions {
color: #3E5D6F !important;
}
.InputContainer.invalid .Label {
color: #313E48 !important;
}
.InputContainer.invalid .Label .tooltip-icon > .icon-container path,
.InputContainer.invalid .Label .tooltip-icon > .icon-container circle,
.InputContainer.invalid .Label .tooltip-icon > .icon-container g {
fill: !important;
}
.InputContainer.invalid .Instructions {
color: #3E5D6F !important;
}
.InputContainer.readonly .Label {
color: #313E48 !important;
}
.InputContainer.readonly .Label .tooltip-icon > .icon-container path,
.InputContainer.readonly .Label .tooltip-icon > .icon-container circle,
.InputContainer.readonly .Label .tooltip-icon > .icon-container g {
fill: !important;
}
.InputContainer.readonly .Instructions {
color: #3E5D6F !important;
}
.InputContainer.disabled .Label {
color: #67899F !important;
}
.InputContainer.disabled .Label .tooltip-icon > .icon-container path,
.InputContainer.disabled .Label .tooltip-icon > .icon-container circle,
.InputContainer.disabled .Label .tooltip-icon > .icon-container g {
fill: !important;
}
.InputContainer.disabled .Instructions {
color: #67899F !important;
}
.InputContainer.disabled .Label .semibold {
font-weight: inherit;
}
.InputContainer,
.InputContainerSkeleton {
display: inline-flex;
max-height: fit-content;
}
.PlaceholderLabel .react-loading-skeleton,
.PlaceholderInstructions .react-loading-skeleton {
line-height: inherit;
}
.PlaceholderLabel .react-loading-skeleton {
max-width: 100px;
}
.PlaceholderInstructions .react-loading-skeleton {
max-width: 200px;
}
/* --- forms/shared/Instructions --- */
.Instructions {
display: inline-block;
max-height: max-content;
}
/* --- forms/shared/Label --- */
.Label {
display: inline-block;
max-height: max-content;
}
.Label > label {
display: inline-block;
}
.Label > label:focus {
outline: none;
}
/* --- forms/SubmitButton --- */
.SubmitPlaceholder.primary > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.primary.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.primary:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.primary:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #008DCE;
}
.SubmitPlaceholder.primary:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.primary:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #008DCE;
}
.SubmitPlaceholder.primary:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.primary:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.primary:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.primary:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #00629C;
}
.SubmitPlaceholder.secondary > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.secondary:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.secondary:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.secondary:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.text > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.text.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.text:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #00629C;
}
.SubmitPlaceholder.text:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #00629C;
}
.SubmitPlaceholder.text:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.text:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.text:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.text:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.text:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.text:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #0071B3;
}
.SubmitPlaceholder.destructive > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.destructive.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #B8222A;
}
.SubmitPlaceholder.destructive:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.destructive:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #CE202F;
}
.SubmitPlaceholder.destructive:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.destructive:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #CE202F;
}
.SubmitPlaceholder.destructive:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.destructive:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.destructive:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.destructive:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #A81623;
}
.SubmitPlaceholder.positive > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.positive.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #317861;
}
.SubmitPlaceholder.positive:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive:hover > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.positive:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive:hover.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #3D8C71;
}
.SubmitPlaceholder.positive:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive:focus > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.positive:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive:focus.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #3D8C71;
}
.SubmitPlaceholder.positive:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive:active > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #FFFFFF;
}
.SubmitPlaceholder.positive:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container path,
.SubmitPlaceholder.positive:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container circle,
.SubmitPlaceholder.positive:active.transparent > .body > .shelf > .semibold > .shelf > .spinner > .spinner-container g {
fill: #1E5D4A;
}
/* --- forms/TelephoneTextbox --- */
.countryOptionLabel {
display: flex;
align-items: center;
gap: 0.5em;
}
.countryFlag {
font-size: 1.2em;
}
.TelephoneTextboxBody {
position: relative;
}
.TelephoneTextboxBody .single-value {
max-width: 4rem;
}
.TelephoneTextboxBody .single-value .countryNameAndCode {
display: none;
}
.TelephoneTextboxBody .countrySelector {
position: static;
}
.TelephoneTextboxBody {
border: #AEBFCC solid 1px;
border-radius: 4px;
}
.TelephoneTextboxBody:focus-within {
border-color: #008DCE;
}
.TelephoneTextboxBody:hover {
border-color: #3E5D6F;
}
.TelephoneTextboxBody:hover:is(:focus-within) {
border-color: #3E5D6F;
}
.TelephoneTextboxBody div[role=combobox] > .control {
border: none;
}
.TelephoneTextboxBody input[type=tel] {
border: none;
border-left: #AEBFCC solid 1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.TelephoneTextboxBody input[type=tel]:focus {
border-color: #008DCE;
}
.TelephoneTextboxBody input[type=tel]:hover {
border-color: #3E5D6F;
}
.TelephoneTextboxBody input[type=tel]:hover:is(:focus) {
border-color: #3E5D6F;
}
.TelephoneTextboxBody div[role=combobox] > .control.focused:not(.readonly) {
box-shadow: none;
}
.TelephoneTextboxBody.invalid:not(:hover):not(:focus-within) {
border-color: #CE202F;
}
.TelephoneTextboxBody.invalid:not(:hover):not(:focus-within) input[type=tel] {
border-left: #CE202F solid 1px;
}
/* --- forms/TextArea --- */
.TextArea > .input-container {
position: relative;
flex: 1;
}
.TextArea.auto-size > .input-container {
display: grid;
}
.TextAreaPlaceholder {
max-height: initial;
min-height: fit-content;
}
.TextAreaPlaceholder.fixed-height {
max-height: fit-content;
min-height: initial;
height: auto !important;
}
.TextAreaPlaceholder.fixed-height > .input-container {
flex: none;
}
.TextAreaPlaceholder > .input-container {
flex: 1;
position: relative;
}
.TextAreaPlaceholder > .input-container .react-loading-skeleton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.TextAreaPlaceholder > .input-container .input {
pointer-events: none;
visibility: hidden;
font: inherit;
text-decoration: inherit;
line-height: inherit;
padding: 0.5rem;
width: 100%;
}
/* --- forms/Textbox --- */
.Textbox > .input-container .input.has-suffix {
padding-right: 2.5rem;
}
.Textbox > .input-container .input.has-suffix + .button {
position: absolute;
right: 0.375rem;
top: 50%;
transform: translateY(-50%);
pointer-events: auto;
color: inherit;
}
.Textbox > .input-container > .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
padding: 1px;
min-width: fit-content;
}
.Textbox > .input-container > .overlay > .prefix, .Textbox > .input-container > .overlay > .suffix {
padding: 0 0.5rem;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
pointer-events: auto;
}
.Textbox > .input-container > .overlay > .prefix.hidden, .Textbox > .input-container > .overlay > .suffix.hidden {
visibility: hidden;
}
.Textbox > .input-container > .overlay > .prefix, .Textbox > .input-container > .overlay > .suffix {
color: #7B98AB;
}
.Textbox.invalid > .input-container > .overlay > .prefix, .Textbox.invalid > .input-container > .overlay > .suffix {
color: #7B98AB;
}
.Textbox.readonly > .input-container > .overlay > .prefix, .Textbox.readonly > .input-container > .overlay > .suffix {
color: #7B98AB;
}
.Textbox.disabled > .input-container > .overlay > .prefix, .Textbox.disabled > .input-container > .overlay > .suffix {
color: #CFD9E1;
}
/* ==========================================================================
FINDBESTPRICETOOL
========================================================================== */
/* --- FindBestPriceTool/ActionBar --- */
.ActionBarWrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 41px;
border-bottom: 1px solid #F1F1F1;
background: #FFFFFF;
}
@media (min-width: 20em) and (max-width: 47.99em) {
.ActionBarWrapper {
padding: 8px 16px;
}
}
.ActionBar .BackButton {
margin-right: 20px;
}
.BackTextMobile {
margin: 0;
font-size: 18px;
margin-left: 24px;
color: #313E48;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
/* --- FindBestPriceTool/AppleMap --- */
.MapWrapper {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.5rem;
overflow: hidden;
min-height: 400px;
}
.MapWrapper .MapOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
background-color: rgba(246, 248, 249, 0.5);
}
.MapOverlayButtons {
position: absolute;
top: 3%;
z-index: 1;
display: flex;
justify-content: center;
width: 100%;
display: flex;
justify-items: space-between;
}
.MapOverlaySkeleton {
position: absolute;
z-index: 2;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.RedoSearchOnSpinner .ReDoSearchOnMapSpinner.black .spinner-container svg path {
fill: #fff !important;
}
/* --- FindBestPriceTool/BackButton --- */
.BackButton {
color: #313E48 !important;
}
.BackButtonMobileIcon {
display: none;
}
.BackButton svg path {
fill: #313E48 !important;
}
.BackButton:hover {
border-color: #60646D !important;
}
@media (max-width: 47.99em) {
.BackButton {
left: -10px;
font-size: 0;
border: 0;
}
.BackButtonMobileIcon {
display: flex;
align-items: center;
}
.BackButtonDesktopIcon {
display: none;
}
.BackButton svg path {
fill: #313E48;
}
}
/* --- FindBestPriceTool/FindBestPriceAccordion --- */
.FindBestPriceAccordion {
margin: 8px 0;
background-color: #FFFFFF;
border-radius: 10px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.FindBestPriceAccordionLocationWrapper {
padding: 16px 16px 4px;
}
.FindBestPriceAccordionHeader {
font-size: 20px;
line-height: 32px;
}
.FindBestPriceAccordionHeader span {
text-align: left;
}
.FindBestPriceAccordionHeader span label {
color: #313E48;
text-align: left;
}
.FindBestPriceAccordionButton {
height: auto;
padding: 16px 16px 8px;
}
.FindBestPriceAccordionLabel {
display: block;
margin-bottom: 8px;
color: #313E48;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.FindBestPriceAccordionContent {
padding: 0;
border: 0;
}
/* --- FindBestPriceTool/FindBestPriceSearch --- */
.FindBestPriceToolContainer .FindBestPriceToolInput {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
border-radius: 20px;
transition: none;
padding: 18px 208px 18px 12px;
}
@media (min-width: 20em) and (max-width: 47.99em) {
.FindBestPriceToolContainer .FindBestPriceToolInput {
border-radius: 40px;
padding: 18px 65px 18px 12px;
text-indent: 5px;
}
}
.FindBestPriceToolWrapper .SearchBarButton {
border-radius: 16px;
position: absolute;
right: 7px;
overflow: hidden;
}
@media (min-width: 20em) and (max-width: 47.99em) {
.FindBestPriceToolWrapper .SearchBarButton {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 12px 8px 12px 8px !important;
}
}
.FindBestPriceToolWrapper .SearchAutoComplete {
top: 45px;
}
@media (min-width: 20em) and (max-width: 47.99em) {
.FindBestPriceToolWrapper .searchBarMagnifyingGlass {
display: none;
}
}
.FindBestPriceToolWrapper .ButtonDesktopContent {
display: block;
}
@media (min-width: 20em) and (max-width: 47.99em) {
.FindBestPriceToolWrapper .ButtonDesktopContent {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
.FindBestPriceToolWrapper .ButtonMobileContent {
display: none;
}
@media (min-width: 20em) and (max-width: 47.99em) {
.FindBestPriceToolWrapper .ButtonMobileContent {
display: block;
}
}
/* --- FindBestPriceTool/FindBestPriceSelect --- */
.FindBestPriceSelectOption {
width: 100%;
margin-bottom: 4px;
padding: 8px 24px;
color: #313E48;
font-size: 14px;
line-height: 24px;
text-align: left;
background-color: transparent;
border: 0;
cursor: pointer;
}
.FindBestPriceSelectOption span {
margin-left: 5px;
}
.FindBestPriceSelectOption:hover, .FindBestPriceSelectOption:focus {
background-color: #F1F6FB;
}
.FindBestPriceSelectOption.selected-option {
background-color: #F6F8F9;
}
/* --- FindBestPriceTool/GoogleMap --- */
.PharmacyMapContainer {
height: 100%;
width: 100%;
position: relative;
}
.PharmacyMapContainer .RedoSearchOverlay {
background: #FFFFFF;
color: #0071B3;
width: fit-content;
margin: 0 20px;
}
.PharmacyMapContainer .RedoSearchOverlay:hover, .PharmacyMapContainer .RedoSearchOverlay:focus, .PharmacyMapContainer .RedoSearchOverlay:active {
color: #FFFFFF;
}
@media (min-width: 20em) and (max-width: 74.99em) {
.PharmacyMapContainer .RedoSearchOverlay {
text-align: center;
}
}
.MapOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-color: #f6f8f9;
}
.MapOverlayButtons {
position: absolute;
top: 3%;
z-index: 2;
display: flex;
justify-content: center;
width: 100%;
}
.CustomInfoWindow {
font-family: "Source Sans 3", sans-serif;
font-size: 14px;
line-height: 18px;
margin-left: 6px;
}
@supports (-webkit-touch-callout: none) {
.CustomInfoWindow {
margin: 0 10px 10px 0;
}
}
.CustomInfoWindow .PharmacyName {
font-weight: 600;
}
.CustomInfoWindow .AddressContainer {
margin-bottom: 8px;
}
/* --- FindBestPriceTool/PharmacyResultsCard --- */
.button {
font-size: 16px;
background: none;
border: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 4px;
text-transform: uppercase;
cursor: pointer;
border: 1px solid transparent;
color: #FFFFFF;
font-weight: 600;
letter-spacing: 0.6px;
font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
.button svg {
height: 20px;
}
.button.large {
padding: 16px;
min-height: 56px;
}
.button.medium {
padding: 12px 16px 12px 16px;
min-height: 48px;
}
.button.small {
padding: 8px 12px 8px 12px;
min-height: 40px;
}
.button.xsmall {
font-size: 12px;
padding: 8px 12px 8px 12px;
height: 32px;
min-height: 32px;
}
.button.full-width {
width: 100%;
}
.button.icon-only-large {
padding: 16px;
}
.button.icon-only-medium {
padding: 16px;
}
.button.icon-only-small {
padding: 8px;
}
.button.icon-only-xsmall {
padding: 8px;
}
.button.icon-location-left svg {
margin-right: 8px;
}
.button.icon-location-right svg {
margin-left: 8px;
}
.button:disabled {
pointer-events: none;
}
.button svg path {
fill: #FFFFFF;
}
.primary.white {
border: 4px solid #FFFFFF;
background: transparent;
color: #FFFFFF;
}
.primary.white svg path {
fill: #FFFFFF;
}
.primary.white:hover, .primary.white:focus {
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #008DCE;
}
.primary.white:hover svg path, .primary.white:focus svg path {
fill: #FFFFFF;
}
.primary.white:active {
background: rgba(255, 255, 255, 0.25);
}
.secondary.white {
border: 1px solid #FFFFFF;
background: transparent;
color: #FFFFFF;
}
.secondary.white svg path {
fill: #FFFFFF;
}
.secondary.white:hover, .secondary.white:focus {
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #FFFFFF;
}
.secondary.white:hover svg path, .secondary.white:focus svg path {
fill: #FFFFFF;
}
.secondary.white:active {
background: rgba(255, 255, 255, 0.25);
}
.tertiary.white {
background: transparent;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.tertiary.white svg path {
fill: #FFFFFF;
}
.tertiary.white:hover, .tertiary.white:focus {
color: rgba(255, 255, 255, 0.75);
}
.tertiary.white:hover svg path, .tertiary.white:focus svg path {
fill: rgba(255, 255, 255, 0.75);
}
.tertiary.white:active {
color: #FFFFFF;
}
.tertiary.white:active svg path {
fill: #FFFFFF;
}
.primary .button-icon path {
fill: #FFFFFF;
}
.primary.green {
background: #4AA486;
}
.primary.green:hover, .primary.green:focus {
background: #72B299;
border: 1px solid #4AA486;
}
.primary.green:active {
background: #3D8C71;
}
.primary:disabled {
background: #AEBFCC;
color: #7B98AB;
}
.primary:disabled svg path {
fill: #7B98AB;
}
.secondary.green {
border: 1px solid #4AA486;
background: transparent;
color: #4AA486;
}
.secondary.green .button-icon path {
fill: #4AA486;
}
.secondary.green:hover, .secondary.green:focus {
background: #72B299;
border: 1px solid #72B299;
color: #FFFFFF;
}
.secondary.green:hover svg path, .secondary.green:focus svg path {
fill: #FFFFFF;
}
.secondary.green:active {
background: #3D8C71;
}
.secondary:disabled {
background: transparent;
color: #7B98AB;
border: 1px solid #CFD9E1;
}
.secondary:disabled svg path {
fill: #7B98AB;
}
.tertiary {
border: solid 1px #C3C3C7;
}
.tertiary.green {
color: #4AA486;
}
.tertiary.green .button-icon path {
fill: #4AA486;
}
.tertiary.green:hover, .tertiary.green:focus {
color: #72B299;
border: solid 1px #72B299;
}
.tertiary.green:hover svg path, .tertiary.green:focus svg path {
fill: #72B299;
}
.tertiary.green:active {
color: #3D8C71;
border: solid 1px #3D8C71;
}
.tertiary.green:active svg path {
fill: #3D8C71;
}
.tertiary:disabled {
color: #7B98AB;
border: solid 1px #CFD9E1;
}
.tertiary:disabled svg path {
fill: #7B98AB;
}
.primary.turquoise {
background: #0071B3;
}
.primary.turquoise:hover, .primary.turquoise:focus {
background: #008DCE;
border: 1px solid #0071B3;
}
.primary.turquoise:active {
background: #00629C;
}
.secondary.turquoise {
border: 1px solid #0071B3;
background: transparent;
color: #0071B3;
}
.secondary.turquoise .button-icon path {
fill: #0071B3;
}
.secondary.turquoise:hover, .secondary.turquoise:focus {
background: #008DCE;
border: 1px solid #008DCE;
color: #FFFFFF;
}
.secondary.turquoise:hover svg path, .secondary.turquoise:focus svg path {
fill: #FFFFFF;
}
.secondary.turquoise:active {
background: #00629C;
}
.tertiary.turquoise {
color: #0071B3;
}
.tertiary.turquoise .button-icon path {
fill: #0071B3;
}
.tertiary.turquoise:hover, .tertiary.turquoise:focus {
color: #008DCE;
border: solid 1px #008DCE;
}
.tertiary.turquoise:hover svg path, .tertiary.turquoise:focus svg path {
fill: #008DCE;
}
.tertiary.turquoise:active {
color: #00629C;
border: solid 1px #00629C;
}
.tertiary.turquoise:active svg path {
fill: #00629C;
}
.primary.darkblue {
background: #1E4488;
}
.primary.darkblue:hover, .primary.darkblue:focus {
background: #4868A1;
border: 1px solid #1E4488;
}
.primary.darkblue:active {
background: #14316B;
}
.secondary.darkblue {
border: 1px solid #1E4488;
background: transparent;
color: #1E4488;
}
.secondary.darkblue .button-icon path {
fill: #1E4488;
}
.secondary.darkblue:hover, .secondary.darkblue:focus {
background: #4868A1;
border: 1px solid #4868A1;
color: #FFFFFF;
}
.secondary.darkblue:hover svg path, .secondary.darkblue:focus svg path {
fill: #FFFFFF;
}
.secondary.darkblue:active {
background: #14316B;
}
.tertiary.darkblue {
color: #1E4488;
}
.tertiary.darkblue .button-icon path {
fill: #1E4488;
}
.tertiary.darkblue:hover, .tertiary.darkblue:focus {
color: #4868A1;
border: solid 1px #4868A1;
}
.tertiary.darkblue:hover svg path, .tertiary.darkblue:focus svg path {
fill: #4868A1;
}
.tertiary.darkblue:active {
color: #14316B;
border: solid 1px #14316B;
}
.tertiary.darkblue:active svg path {
fill: #14316B;
}
.primary.red {
background: #CE202F;
}
.primary.red:hover, .primary.red:focus {
background: #DE5552;
border: 1px solid #CE202F;
}
.primary.red:active {
background: #B8222A;
}
.secondary.red {
border: 1px solid #CE202F;
background: transparent;
color: #CE202F;
}
.secondary.red .button-icon path {
fill: #CE202F;
}
.secondary.red:hover, .secondary.red:focus {
background: #DE5552;
border: 1px solid #DE5552;
color: #FFFFFF;
}
.secondary.red:hover svg path, .secondary.red:focus svg path {
fill: #FFFFFF;
}
.secondary.red:active {
background: #B8222A;
}
.tertiary.red {
color: #CE202F;
}
.tertiary.red .button-icon path {
fill: #CE202F;
}
.tertiary.red:hover, .tertiary.red:focus {
color: #DE5552;
border: solid 1px #DE5552;
}
.tertiary.red:hover svg path, .tertiary.red:focus svg path {
fill: #DE5552;
}
.tertiary.red:active {
color: #B8222A;
border: solid 1px #B8222A;
}
.tertiary.red:active svg path {
fill: #B8222A;
}
.ResultCardWrapper {
width: 100%;
padding: 0;
cursor: pointer;
color: #313E48;
text-decoration: none;
background-color: transparent;
border: 0;
}
.ResultCardWrapper:hover {
color: #313E48;
}
@media (max-width: 47.99em) {
.ResultCardWrapper {
padding: 0;
}
}
.ResultCardContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #F6F8F9;
box-shadow: none;
border-radius: 10px;
margin: 8px auto;
}
.ResultCardContainer:hover {
border: 1px solid #5FA8DC;
background-color: #F1F6FB;
}
@media (min-width: 48em) {
.ResultCardContainer:hover .Carat {
opacity: 100;
}
.ResultCardContainer:hover .Price {
right: 24px;
}
.ResultCardContainer:hover .PriceUnavailable {
right: 24px;
}
}
.PriceContainer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: 36px;
position: relative;
}
@media (max-width: 47.99em) {
.PriceContainer {
margin-left: 8px;
}
}
.Carat {
margin-left: 16px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
position: absolute;
right: 0;
}
.Price {
background-color: #0071B3;
color: #FFFFFF;
font-weight: 600;
padding: 8px 12px;
border-radius: 5px;
position: relative;
right: 0;
transition: all 0.3s ease-in-out;
}
.PriceUnavailable {
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
white-space: nowrap;
position: relative;
right: 0;
transition: all 0.3s ease-in-out;
}
/* ==========================================================================
TEMP
========================================================================== */
/* --- temp/SearchTextbox --- */
.DropDownListContainer {
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
min-width: 100%;
max-height: 15rem;
position: absolute;
z-index: 100;
min-height: auto;
max-height: 5rem;
top: 75%;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* ==========================================================================
STYLED COMPONENTS (CSS-in-JS equivalents)
========================================================================== */
/* --- forms/Textbox/StyledNativeInput --- */
/* Also applies to: NumberTextbox, TextArea native inputs */
.StyledNativeInput {
font: inherit;
color: inherit;
text-decoration: inherit;
line-height: inherit;
padding: 0.4375rem 0.5rem;
margin: 0;
width: 100%;
transition: border-color 0.2s ease;
background-color: #FFFFFF;
border: solid 1px #AEBFCC;
border-radius: 0.25rem;
display: block;
}
.StyledNativeInput::placeholder,
.StyledNativeInput:-ms-input-placeholder,
.StyledNativeInput::-ms-input-placeholder {
color: #94ABBB;
}
.StyledNativeInput:focus,
.StyledNativeInput:hover {
outline: none;
}
.StyledNativeInput.invalid {
border-color: #B8222A;
}
.StyledNativeInput:read-only {
background-color: #E9EEF1;
border-color: #CFD9E1;
}
.StyledNativeInput:disabled {
background-color: #CFD9E1;
border-color: #CFD9E1;
color: transparent;
}
.StyledNativeInput:disabled::placeholder,
.StyledNativeInput:disabled:-ms-input-placeholder,
.StyledNativeInput:disabled::-ms-input-placeholder {
color: transparent;
}
.StyledNativeInput:not(:disabled):not(:read-only):focus {
border-color: #008DCE;
}
.StyledNativeInput:not(:disabled):not(:read-only):hover {
border-color: #3E5D6F;
}
/* --- forms/TextArea/StyledNativeInput (extends base with textarea-specific) --- */
textarea.StyledNativeInput {
padding: 0.5rem;
resize: none;
grid-area: 1 / 1 / 2 / 2;
min-height: 100%;
}
textarea.StyledNativeInput.no-scroll {
overflow: hidden;
}
/* --- forms/TextArea/StyledAutoSizer --- */
/* Hidden mirror element for auto-height calculation */
.StyledAutoSizer {
font: inherit;
color: inherit;
text-decoration: inherit;
line-height: inherit;
grid-area: 1 / 1 / 2 / 2;
opacity: 0;
pointer-events: none;
overflow-wrap: break-word;
word-break: break-word;
padding: 0.5rem;
margin: 0;
width: 100%;
white-space: pre-wrap;
transition: border-color 0.2s ease;
background-color: #FFFFFF;
border: solid 1px #AEBFCC;
border-radius: 0.25rem;
}
/* --- typography/TextColor --- */
.TextColor {
color: #313E48;
}
/* --- general/Shadow --- */
.Shadow {
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.08);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment