@charset "UTF-8";
/**
 * Auto-generated by Knox. DO NOT EDIT DIRECTLY.
 */
:root, [data-theme=light] {
  --knox-base-line-height-300: normal;
  --knox-base-line-height-200: 1.15;
  --knox-base-line-height-100: 1.1;
  --knox-base-letter-spacing-1100: 2px;
  --knox-base-letter-spacing-1000: 1px;
  --knox-base-letter-spacing-600: -1.07px;
  --knox-base-letter-spacing-500: -0.59px;
  --knox-base-letter-spacing-400: -0.33px;
  --knox-base-letter-spacing-300: -0.18px;
  --knox-base-letter-spacing-200: -0.09px;
  --knox-base-letter-spacing-100: 0.01px;
  --knox-base-font-weight-600: 600;
  --knox-base-font-weight-500: 500;
  --knox-base-font-weight-400: 400;
  --knox-base-font-family-monospace: iA Writer Mono V;
  --knox-base-font-family-sans-serif: Inter V;
  --knox-base-size-10000: 99999px;
  --knox-base-size-2200: 1280px;
  --knox-base-size-2100: 1024px;
  --knox-base-size-2030: 840px;
  --knox-base-size-2000: 768px;
  --knox-base-size-1935: 600px;
  --knox-base-size-1925: 576px;
  --knox-base-size-1900: 512px;
  --knox-base-size-1800: 256px;
  --knox-base-size-1700: 128px;
  --knox-base-size-1600: 64px;
  --knox-base-size-1500: 60px;
  --knox-base-size-1400: 56px;
  --knox-base-size-1300: 52px;
  --knox-base-size-1200: 48px;
  --knox-base-size-1100: 44px;
  --knox-base-size-1000: 40px;
  --knox-base-size-900: 36px;
  --knox-base-size-800: 32px;
  --knox-base-size-700: 28px;
  --knox-base-size-600: 24px;
  --knox-base-size-500: 20px;
  --knox-base-size-400: 16px;
  --knox-base-size-350: 14px;
  --knox-base-size-300: 12px;
  --knox-base-size-200: 8px;
  --knox-base-size-100: 4px;
  --knox-base-size-25: 1px;
  --knox-base-size-0: 0px;
  --knox-base-color-red-600: #2f150e;
  --knox-base-color-red-500: #470c00;
  --knox-base-color-red-470: #751900;
  --knox-base-color-red-420: #992400;
  --knox-base-color-red-400: #a32600;
  --knox-base-color-red-370: #bd2f00;
  --knox-base-color-red-300: #d73e0f;
  --knox-base-color-red-295: #c65539;
  --knox-base-color-red-200: #f2a18c;
  --knox-base-color-red-110: #febeae;
  --knox-base-color-red-80: #f5ccc1;
  --knox-base-color-red-30: #ffded6;
  --knox-base-color-red-15: #ffebe5;
  --knox-base-color-red-0: #ffeeeb;
  --knox-base-color-amber-600: #241600;
  --knox-base-color-amber-500: #2e1e00;
  --knox-base-color-amber-470: #4d3300;
  --knox-base-color-amber-420: #664600;
  --knox-base-color-amber-400: #704f00;
  --knox-base-color-amber-370: #9e6f00;
  --knox-base-color-amber-300: #ab7b1c;
  --knox-base-color-amber-295: #bd8400;
  --knox-base-color-amber-200: #deab54;
  --knox-base-color-amber-110: #e9bd77;
  --knox-base-color-amber-80: #f4cf95;
  --knox-base-color-amber-30: #ffe4b8;
  --knox-base-color-amber-15: #ffebcc;
  --knox-base-color-amber-0: #fff9f0;
  --knox-base-color-green-600: #10240f;
  --knox-base-color-green-500: #012e00;
  --knox-base-color-green-470: #044700;
  --knox-base-color-green-420: #065c00;
  --knox-base-color-green-400: #076600;
  --knox-base-color-green-370: #097000;
  --knox-base-color-green-300: #0e8a00;
  --knox-base-color-green-295: #398b32;
  --knox-base-color-green-200: #8ec388;
  --knox-base-color-green-110: #b5deb0;
  --knox-base-color-green-80: #bae3b5;
  --knox-base-color-green-30: #d5f1d0;
  --knox-base-color-green-15: #dbf8d8;
  --knox-base-color-green-0: #e7f5e5;
  --knox-base-color-purple-600: #1e1b36;
  --knox-base-color-purple-500: #2a0066;
  --knox-base-color-purple-470: #480f9f;
  --knox-base-color-purple-420: #5a31b9;
  --knox-base-color-purple-400: #643bc4;
  --knox-base-color-purple-370: #6c47d1;
  --knox-base-color-purple-300: #7c5ae2;
  --knox-base-color-purple-295: #7e6cd0;
  --knox-base-color-purple-200: #b5abf2;
  --knox-base-color-purple-110: #cec7ff;
  --knox-base-color-purple-80: #d6d1ff;
  --knox-base-color-purple-30: #e8e5ff;
  --knox-base-color-purple-15: #edebff;
  --knox-base-color-purple-0: #f1f0ff;
  --knox-base-color-blue-1100: rgba(117, 175, 255, 0.65);
  --knox-base-color-blue-1000: rgba(5, 112, 235, 0.43);
  --knox-base-color-blue-600: #182039;
  --knox-base-color-blue-500: #002352;
  --knox-base-color-blue-470: #003b80;
  --knox-base-color-blue-420: #004ca3;
  --knox-base-color-blue-400: #0053b3;
  --knox-base-color-blue-370: #0060c7;
  --knox-base-color-blue-300: #0570eb;
  --knox-base-color-blue-295: #3c7bd3;
  --knox-base-color-blue-200: #8eb9f5;
  --knox-base-color-blue-110: #b3d2ff;
  --knox-base-color-blue-80: #bdd8ff;
  --knox-base-color-blue-30: #d6e7ff;
  --knox-base-color-blue-15: #e0edff;
  --knox-base-color-blue-0: #ebf3ff;
  --knox-base-color-white-700: #ffffff;
  --knox-base-color-white-600: rgba(255, 255, 255, 0.89);
  --knox-base-color-white-550: rgba(255, 255, 255, 0.86);
  --knox-base-color-white-500: rgba(255, 255, 255, 0.79);
  --knox-base-color-white-300: rgba(255, 255, 255, 0.56);
  --knox-base-color-white-200: rgba(255, 255, 255, 0.43);
  --knox-base-color-white-100: rgba(255, 255, 255, 0.28);
  --knox-base-color-white-50: rgba(255, 255, 255, 0.19);
  --knox-base-color-white-25: rgba(255, 255, 255, 0.09);
  --knox-base-color-white-0: rgba(255, 255, 255, 0);
  --knox-base-color-black-700: #000000;
  --knox-base-color-black-600: rgba(0, 0, 0, 0.82);
  --knox-base-color-black-550: rgba(0, 0, 0, 0.72);
  --knox-base-color-black-500: rgba(0, 0, 0, 0.62);
  --knox-base-color-black-350: rgba(0, 0, 0, 0.43);
  --knox-base-color-black-300: rgba(0, 0, 0, 0.36);
  --knox-base-color-black-200: rgba(0, 0, 0, 0.24);
  --knox-base-color-black-100: rgba(0, 0, 0, 0.13);
  --knox-base-color-black-50: rgba(0, 0, 0, 0.07);
  --knox-base-color-black-0: rgba(0, 0, 0, 0);
  --knox-base-color-greyscale-1100: rgba(20, 20, 20, 0.7);
  --knox-base-color-greyscale-1000: rgba(237, 237, 237, 0.7);
  --knox-base-color-greyscale-900: #141414;
  --knox-base-color-greyscale-800: #1a1a1a;
  --knox-base-color-greyscale-700: #212121;
  --knox-base-color-greyscale-200: #ededed;
  --knox-base-color-greyscale-100: #fafafa;
  --knox-line-height-heading-xl: var(--knox-base-line-height-100); /* For tighter line spacing with text at 48pt or larger. */
  --knox-line-height-heading-large: var(--knox-base-line-height-200); /* For tighter line spacing with text at 28pt or larger. */
  --knox-line-height-default: var(--knox-base-line-height-300); /* Default line height for body text and headings. */
  --knox-letter-spacing-password-small: var(--knox-base-letter-spacing-1000);
  --knox-letter-spacing-password-medium: var(--knox-base-letter-spacing-1100);
  --knox-letter-spacing-password-large: var(--knox-base-letter-spacing-1100);
  --knox-letter-spacing-body-small: var(--knox-base-letter-spacing-100);
  --knox-letter-spacing-body-medium: var(--knox-base-letter-spacing-200);
  --knox-letter-spacing-body-large: var(--knox-base-letter-spacing-300);
  --knox-letter-spacing-heading-2xs: var(--knox-base-letter-spacing-100);
  --knox-letter-spacing-heading-xs: var(--knox-base-letter-spacing-200);
  --knox-letter-spacing-heading-small: var(--knox-base-letter-spacing-300);
  --knox-letter-spacing-heading-medium: var(--knox-base-letter-spacing-400);
  --knox-letter-spacing-heading-large: var(--knox-base-letter-spacing-500);
  --knox-letter-spacing-heading-xl: var(--knox-base-letter-spacing-600);
  --knox-font-size-body-small: var(--knox-base-size-300);
  --knox-font-size-body-medium: var(--knox-base-size-350);
  --knox-font-size-body-large: var(--knox-base-size-400);
  --knox-font-size-heading-2xs: var(--knox-base-size-300);
  --knox-font-size-heading-xs: var(--knox-base-size-350);
  --knox-font-size-heading-small: var(--knox-base-size-400);
  --knox-font-size-heading-medium: var(--knox-base-size-500);
  --knox-font-size-heading-large: var(--knox-base-size-700);
  --knox-font-size-heading-xl: var(--knox-base-size-1200);
  --knox-font-weight-body-strong: var(--knox-base-font-weight-600); /* Font weight for drawing attention to body text. */
  --knox-font-weight-body-default: var(--knox-base-font-weight-400); /* Default font weight for body text. */
  --knox-font-weight-heading-subtle: var(--knox-base-font-weight-500); /* Font weight for headings that require less attention. */
  --knox-font-weight-heading-default: var(--knox-base-font-weight-600); /* Default font weight for headings. */
  --knox-font-family-password: var(--knox-base-font-family-monospace); /* For distinguishing between letters, digits, and symbols in password fields. */
  --knox-font-family-code: var(--knox-base-font-family-monospace); /* For displaying code or computer values. */
  --knox-font-family-default: var(--knox-base-font-family-sans-serif); /* Default font family used across 1Password applications. */
  --knox-spacing-4xl: var(--knox-base-size-1700);
  --knox-spacing-3xl: var(--knox-base-size-1600);
  --knox-spacing-2xl: var(--knox-base-size-1200);
  --knox-spacing-xl: var(--knox-base-size-800);
  --knox-spacing-large: var(--knox-base-size-600); /* For loose padding or margins. */
  --knox-spacing-medium: var(--knox-base-size-400); /* For some padding and margins. */
  --knox-spacing-small: var(--knox-base-size-300); /* For minimal padding when elements share a functional relationship. */
  --knox-spacing-xs: var(--knox-base-size-200); /* For tight spacing when elements share a close functional relationship. */
  --knox-spacing-2xs: var(--knox-base-size-100); /* For extra tight spacing when elements share a direct functional relationship. */
  --knox-spacing-hairline: var(--knox-base-size-25); /* For a tiny amount of spacing so attached elements don’t blend together. */
  --knox-spacing-none: var(--knox-base-size-0); /* For removing spacing entirely. */
  --knox-corner-radius-circular: var(--knox-base-size-10000); /* For rounding avatars and radio buttons into a full circle. */
  --knox-corner-radius-large: var(--knox-base-size-300); /* For large containers and popovers such as modals and toasts. */
  --knox-corner-radius-medium: var(--knox-base-size-200); /* For clickable elements and containers such as buttons, text fields, tooltips, and callout banners. */
  --knox-corner-radius-small: var(--knox-base-size-100); /* For small components such as checkboxes and menus. */
  --knox-corner-radius-none: var(--knox-base-size-0); /* For removing an existing corner.radius style from an element. */
  --knox-color-border-accent-on-strong-focus: var(--knox-base-color-white-700); /* For the focus ring on interactive elements placed on top of background.accent.strong colors, dark gradients, or illustrated backgrounds. */
  --knox-color-border-accent-focus: var(--knox-base-color-blue-295); /* For the focus ring on interactive elements. */
  --knox-color-border-accent-critical: var(--knox-base-color-red-200); /* Draws attention to an element for a critical message or error. */
  --knox-color-border-accent-warning: var(--knox-base-color-amber-200); /* Draws attention to an element for a warning message. */
  --knox-color-border-accent-success: var(--knox-base-color-green-200); /* Draws attention to an element for a success state. Indicates an important process or error has been addressed. */
  --knox-color-border-accent-attention: var(--knox-base-color-purple-200); /* Draws attention to an element by not using default accent color. */
  --knox-color-border-accent-default: var(--knox-base-color-blue-200); /* Draws attention to an element. */
  --knox-color-border-neutral-on-strong-default: var(--knox-base-color-white-200); /* For borders and dividers on top of background.accent.strong colors, dark gradients or illustrated backgrounds. */
  --knox-color-border-neutral-weak: var(--knox-base-color-black-50); /* A border for disabled controls and purely decorative elements. */
  --knox-color-border-neutral-strong: var(--knox-base-color-black-350); /* A border for interactive elements such as text fields. */
  --knox-color-border-neutral-default: var(--knox-base-color-black-100); /* Default color for borders and dividers. */
  --knox-color-icon-accent-on-strong-inverse-warning-pressed: var(--knox-base-color-amber-420);
  --knox-color-icon-accent-on-strong-inverse-warning-hover: var(--knox-base-color-amber-370);
  --knox-color-icon-accent-on-strong-inverse-warning: var(--knox-base-color-amber-300); /* Draws attention to icons in a warning message. */
  --knox-color-icon-accent-on-strong-inverse-critical-pressed: var(--knox-base-color-red-420);
  --knox-color-icon-accent-on-strong-inverse-critical-hover: var(--knox-base-color-red-370);
  --knox-color-icon-accent-on-strong-inverse-critical: var(--knox-base-color-red-300); /* For critical-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-on-strong-inverse-success-pressed: var(--knox-base-color-green-420);
  --knox-color-icon-accent-on-strong-inverse-success-hover: var(--knox-base-color-green-370);
  --knox-color-icon-accent-on-strong-inverse-success: var(--knox-base-color-green-300); /* For success-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-on-strong-inverse-attention-pressed: var(--knox-base-color-purple-420);
  --knox-color-icon-accent-on-strong-inverse-attention-hover: var(--knox-base-color-purple-370);
  --knox-color-icon-accent-on-strong-inverse-attention: var(--knox-base-color-purple-300); /* For attention-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-on-strong-inverse-default-pressed: var(--knox-base-color-blue-420);
  --knox-color-icon-accent-on-strong-inverse-default-hover: var(--knox-base-color-blue-370);
  --knox-color-icon-accent-on-strong-inverse-default: var(--knox-base-color-blue-300); /* For default-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-critical-pressed: var(--knox-base-color-red-420);
  --knox-color-icon-accent-critical-hover: var(--knox-base-color-red-370);
  --knox-color-icon-accent-critical: var(--knox-base-color-red-300); /* Draws attention to icons in a critical message or error. */
  --knox-color-icon-accent-warning-pressed: var(--knox-base-color-amber-420);
  --knox-color-icon-accent-warning-hover: var(--knox-base-color-amber-370);
  --knox-color-icon-accent-warning: var(--knox-base-color-amber-300); /* Draws attention to icons in a warning message. */
  --knox-color-icon-accent-success-pressed: var(--knox-base-color-green-420);
  --knox-color-icon-accent-success-hover: var(--knox-base-color-green-370);
  --knox-color-icon-accent-success: var(--knox-base-color-green-300); /* Draws attention to icons in a success state. Indicates an important process or error has been addressed. */
  --knox-color-icon-accent-attention-pressed: var(--knox-base-color-purple-420);
  --knox-color-icon-accent-attention-hover: var(--knox-base-color-purple-370);
  --knox-color-icon-accent-attention: var(--knox-base-color-purple-300); /* Draws attention to icons by not using default accent color. */
  --knox-color-icon-accent-default-pressed: var(--knox-base-color-blue-420);
  --knox-color-icon-accent-default-hover: var(--knox-base-color-blue-370);
  --knox-color-icon-accent-default: var(--knox-base-color-blue-300); /* Draws attention to an icon. */
  --knox-color-icon-neutral-on-strong-inverse-default-pressed: var(--knox-base-color-black-600);
  --knox-color-icon-neutral-on-strong-inverse-default-hover: var(--knox-base-color-black-550);
  --knox-color-icon-neutral-on-strong-inverse-default: var(--knox-base-color-black-500); /* For icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-neutral-on-strong-default: var(--knox-base-color-white-550); /* For icons on top of the background.neutral.on-strong.transparent color, dark gradients or illustrated backgrounds. */
  --knox-color-icon-neutral-strong: var(--knox-base-color-white-550); /* DEPRECATED. Will be removed in v5.0.0. Use icon.neutral.on-strong.default instead. */
  --knox-color-icon-neutral-disabled: var(--knox-base-color-black-200); /* Only used for icons within disabled elements. */
  --knox-color-icon-neutral-default-pressed: var(--knox-base-color-black-600);
  --knox-color-icon-neutral-default-hover: var(--knox-base-color-black-550);
  --knox-color-icon-neutral-default: var(--knox-base-color-black-500); /* Default icon color. For monochrome icon set. */
  --knox-color-text-accent-on-strong-inverse-warning-pressed: var(--knox-base-color-amber-500);
  --knox-color-text-accent-on-strong-inverse-warning-hover: var(--knox-base-color-amber-470);
  --knox-color-text-accent-on-strong-inverse-warning: var(--knox-base-color-amber-400); /* For warning-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-critical-pressed: var(--knox-base-color-red-500);
  --knox-color-text-accent-on-strong-inverse-critical-hover: var(--knox-base-color-red-470);
  --knox-color-text-accent-on-strong-inverse-critical: var(--knox-base-color-red-400); /* For critical-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-success-pressed: var(--knox-base-color-green-500);
  --knox-color-text-accent-on-strong-inverse-success-hover: var(--knox-base-color-green-470);
  --knox-color-text-accent-on-strong-inverse-success: var(--knox-base-color-green-400); /* For success-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-attention-pressed: var(--knox-base-color-purple-500);
  --knox-color-text-accent-on-strong-inverse-attention-hover: var(--knox-base-color-purple-470);
  --knox-color-text-accent-on-strong-inverse-attention: var(--knox-base-color-purple-400); /* For attention-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-default-pressed: var(--knox-base-color-blue-500);
  --knox-color-text-accent-on-strong-inverse-default-hover: var(--knox-base-color-blue-470);
  --knox-color-text-accent-on-strong-inverse-default: var(--knox-base-color-blue-400); /* For default-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-critical-pressed: var(--knox-base-color-red-500);
  --knox-color-text-accent-critical-hover: var(--knox-base-color-red-470);
  --knox-color-text-accent-critical: var(--knox-base-color-red-400); /* Draws attention to text in a critical message or error. */
  --knox-color-text-accent-warning-pressed: var(--knox-base-color-amber-500);
  --knox-color-text-accent-warning-hover: var(--knox-base-color-amber-470);
  --knox-color-text-accent-warning: var(--knox-base-color-amber-400); /* Draws attention to text in a warning message. */
  --knox-color-text-accent-success-pressed: var(--knox-base-color-green-500);
  --knox-color-text-accent-success-hover: var(--knox-base-color-green-470);
  --knox-color-text-accent-success: var(--knox-base-color-green-400); /* Draws attention to text in a success state. Indicates an important process or error has been addressed. */
  --knox-color-text-accent-attention-pressed: var(--knox-base-color-purple-500);
  --knox-color-text-accent-attention-hover: var(--knox-base-color-purple-470);
  --knox-color-text-accent-attention: var(--knox-base-color-purple-400); /* Draws attention to text by not using default accent color. */
  --knox-color-text-accent-link-pressed: var(--knox-base-color-blue-500);
  --knox-color-text-accent-link-hover: var(--knox-base-color-blue-470);
  --knox-color-text-accent-link: var(--knox-base-color-blue-400); /* For links that open in a web browser. */
  --knox-color-text-accent-default-pressed: var(--knox-base-color-blue-500);
  --knox-color-text-accent-default-hover: var(--knox-base-color-blue-470);
  --knox-color-text-accent-default: var(--knox-base-color-blue-400); /* Draws attention to text. */
  --knox-color-text-neutral-on-strong-inverse-default-pressed: var(--knox-base-color-black-700);
  --knox-color-text-neutral-on-strong-inverse-default-hover: var(--knox-base-color-black-700);
  --knox-color-text-neutral-on-strong-inverse-default: var(--knox-base-color-black-600); /* For text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-neutral-on-strong-default: var(--knox-base-color-white-700); /* For text on top of strong-colored backgrounds, dark gradients or illustrated backgrounds. */
  --knox-color-text-neutral-strong: var(--knox-base-color-white-700); /* DEPRECATED. Will be removed in v5.0.0. Use text.neutral.on-strong.default instead. */
  --knox-color-text-neutral-disabled: var(--knox-base-color-black-300); /* Only used for text within disabled elements. */
  --knox-color-text-neutral-weak-pressed: var(--knox-base-color-black-600);
  --knox-color-text-neutral-weak-hover: var(--knox-base-color-black-550);
  --knox-color-text-neutral-weak: var(--knox-base-color-black-500); /* For supplemental text or headers. Only used with main backgrounds. Minimum of 15pt. */
  --knox-color-text-neutral-default-pressed: var(--knox-base-color-black-700);
  --knox-color-text-neutral-default-hover: var(--knox-base-color-black-700);
  --knox-color-text-neutral-default: var(--knox-base-color-black-600); /* Default color for all text. */
  --knox-color-background-accent-strong-critical-pressed: var(--knox-base-color-red-420);
  --knox-color-background-accent-strong-critical-hover: var(--knox-base-color-red-370);
  --knox-color-background-accent-strong-critical: var(--knox-base-color-red-300); /* Draws the highest level of attention to a message or error that needs immediate action. */
  --knox-color-background-accent-strong-warning-pressed: var(--knox-base-color-amber-420);
  --knox-color-background-accent-strong-warning-hover: var(--knox-base-color-amber-370);
  --knox-color-background-accent-strong-warning: var(--knox-base-color-amber-300); /* Draws a medium level of attention to a message and/or indicates a potential problem to address. */
  --knox-color-background-accent-strong-success-pressed: var(--knox-base-color-green-420);
  --knox-color-background-accent-strong-success-hover: var(--knox-base-color-green-370);
  --knox-color-background-accent-strong-success: var(--knox-base-color-green-300); /* Draws strong attention to a success state element. Indicates a critical process or error has been addressed. */
  --knox-color-background-accent-strong-attention-pressed: var(--knox-base-color-purple-420);
  --knox-color-background-accent-strong-attention-hover: var(--knox-base-color-purple-370);
  --knox-color-background-accent-strong-attention: var(--knox-base-color-purple-300); /* Draws extra strong attention to an element by not using default accent color. */
  --knox-color-background-accent-strong-default-pressed: var(--knox-base-color-blue-420);
  --knox-color-background-accent-strong-default-hover: var(--knox-base-color-blue-370);
  --knox-color-background-accent-strong-default: var(--knox-base-color-blue-300); /* Draws strong attention to an element. Will change to match custom operating system accent colors */
  --knox-color-background-accent-critical: var(--knox-base-color-red-0); /* Draws a high level of attention to a message or error that needs immediate action. */
  --knox-color-background-accent-warning: var(--knox-base-color-amber-0); /* Draws a medium level of attention to a message and/or indicates a potential problem to address. */
  --knox-color-background-accent-success: var(--knox-base-color-green-0); /* Draws attention to a success state element. Indicates an important process or error has been addressed. */
  --knox-color-background-accent-attention: var(--knox-base-color-purple-0); /* Draws extra attention to an element by not using default accent color. */
  --knox-color-background-accent-default: var(--knox-base-color-blue-0); /* Draws attention to an element. */
  --knox-color-background-neutral-on-strong-transparent-pressed: var(--knox-base-color-black-200);
  --knox-color-background-neutral-on-strong-transparent-hover: var(--knox-base-color-black-100);
  --knox-color-background-neutral-on-strong-transparent: var(--knox-base-color-black-0); /* For elements that need the same color as the view behind them when placed on top of background.accent.strong colors. */
  --knox-color-background-neutral-on-strong-strong-pressed: var(--knox-base-color-white-500);
  --knox-color-background-neutral-on-strong-strong-hover: var(--knox-base-color-white-600);
  --knox-color-background-neutral-on-strong-strong: var(--knox-base-color-white-700); /* Draws strong attention to an element placed on top of background.accent.strong colors. */
  --knox-color-background-neutral-strong: var(--knox-base-color-white-700); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.on-strong.strong instead. */
  --knox-color-background-neutral-overlay: var(--knox-base-color-greyscale-1000); /* A background for modals or other elements that need to de-emphasize the content under them. */
  --knox-color-background-neutral-transparent-pressed: var(--knox-base-color-black-100);
  --knox-color-background-neutral-transparent-hover: var(--knox-base-color-black-50);
  --knox-color-background-neutral-transparent: var(--knox-base-color-black-0); /* For elements that need the same color as the view behind them. Most common color for interactive elements. */
  --knox-color-background-neutral-interactive-pressed: var(--knox-base-color-black-100); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.transparent-pressed instead. */
  --knox-color-background-neutral-interactive-hover: var(--knox-base-color-black-50); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.transparent-hover instead. */
  --knox-color-background-neutral-interactive: var(--knox-base-color-black-0); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.transparent instead. */
  --knox-color-background-neutral-activated: var(--knox-base-color-black-100); /* For showing the currently active or selected destination in a navigation list. Only used with default text. */
  --knox-color-background-neutral-low: var(--knox-base-color-greyscale-200); /* For areas that need to show lower in z-index or require less attention. */
  --knox-color-background-neutral-high: var(--knox-base-color-white-700); /* For areas that need to show higher in z-index or require extra contrast. */
  --knox-color-background-neutral-disabled: var(--knox-base-color-black-200); /* A background for interactive elements such as checkboxes to indicate they're disabled. */
  --knox-color-background-neutral-default: var(--knox-base-color-greyscale-100); /* Default background color for all views. */
  --knox-breakpoint-xl: var(--knox-base-size-2200); /* For extra large desktop devices that are at least 1280px. */
  --knox-breakpoint-large: var(--knox-base-size-2100); /* For landscape tablets and large desktops that are at least 1024px. */
  --knox-breakpoint-medium: var(--knox-base-size-2000); /* For portrait medium tablets that are at least 768px. */
  --knox-breakpoint-small: var(--knox-base-size-1925); /* For devices that are at least 576px. */
  --knox-breakpoint-xs: var(--knox-base-size-0); /* For devices that are less than 576px. */
  --knox-base-shadow-outset-750: 0 8px 40px 0 var(--knox-base-color-black-500);
  --knox-base-shadow-outset-700: 0 8px 40px 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-650: 0 4px 20px 0 var(--knox-base-color-black-300);
  --knox-base-shadow-outset-600: 0 4px 20px 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-550: 0 4px 16px 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-500: 0 4px 16px 0 var(--knox-base-color-black-50);
  --knox-base-shadow-outset-450: 0 2px 8px 0 var(--knox-base-color-black-300);
  --knox-base-shadow-outset-400: 0 2px 8px 0 var(--knox-base-color-black-50);
  --knox-base-shadow-outset-350: 0 0 0 1px var(--knox-base-color-black-300);
  --knox-base-shadow-outset-325: 0 0 0 1px var(--knox-base-color-black-100);
  --knox-base-shadow-outset-300: 0 0 0 1px var(--knox-base-color-black-50);
  --knox-base-shadow-outset-250: 0 -1px 0 0 var(--knox-base-color-black-300);
  --knox-base-shadow-outset-200: 0 -1px 0 0 var(--knox-base-color-black-50);
  --knox-base-shadow-outset-150: 0 1px 0 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-100: 0 1px 0 0 var(--knox-base-color-black-50);
  --knox-base-shadow-inset-300: inset 0 0 0 1px var(--knox-base-color-white-25);
  --knox-base-shadow-inset-200: inset 0 1px 0 0 var(--knox-base-color-white-25);
  --knox-base-shadow-inset-100: inset 0 -1px 0 0 var(--knox-base-color-white-25);
  --knox-elevation-high: var(--knox-base-shadow-outset-700), var(--knox-base-shadow-outset-500), var(--knox-base-shadow-outset-325); /* For modals, alerts or other large elements that temporarily block or draw a user’s focus elsewhere. */
  --knox-elevation-medium: var(--knox-base-shadow-outset-600), var(--knox-base-shadow-outset-325); /* For menus, notifications, or other elements that need to be positioned over content in the z-index. */
  --knox-elevation-low: var(--knox-base-shadow-outset-400), var(--knox-base-shadow-outset-300); /* For cards or other inline elements that need elevation. */
  --knox-elevation-bottom-ledge: var(--knox-base-shadow-outset-200); /* For button and footer bars. Shows elements that are anchored to the bottom. Only used when content isn’t visible. */
  --knox-elevation-top-ledge: var(--knox-base-shadow-outset-400), var(--knox-base-shadow-outset-100); /* For title and header bars. Shows elements that are anchored to the top. Only used when content scrolls underneath. */
}

/**
 * Auto-generated by Knox. DO NOT EDIT DIRECTLY.
 */
[data-theme=dark] {
  --knox-base-line-height-300: normal;
  --knox-base-line-height-200: 1.15;
  --knox-base-line-height-100: 1.1;
  --knox-base-letter-spacing-1100: 2px;
  --knox-base-letter-spacing-1000: 1px;
  --knox-base-letter-spacing-600: -1.07px;
  --knox-base-letter-spacing-500: -0.59px;
  --knox-base-letter-spacing-400: -0.33px;
  --knox-base-letter-spacing-300: -0.18px;
  --knox-base-letter-spacing-200: -0.09px;
  --knox-base-letter-spacing-100: 0.01px;
  --knox-base-font-weight-600: 600;
  --knox-base-font-weight-500: 500;
  --knox-base-font-weight-400: 400;
  --knox-base-font-family-monospace: iA Writer Mono V;
  --knox-base-font-family-sans-serif: Inter V;
  --knox-base-size-10000: 99999px;
  --knox-base-size-2200: 1280px;
  --knox-base-size-2100: 1024px;
  --knox-base-size-2030: 840px;
  --knox-base-size-2000: 768px;
  --knox-base-size-1935: 600px;
  --knox-base-size-1925: 576px;
  --knox-base-size-1900: 512px;
  --knox-base-size-1800: 256px;
  --knox-base-size-1700: 128px;
  --knox-base-size-1600: 64px;
  --knox-base-size-1500: 60px;
  --knox-base-size-1400: 56px;
  --knox-base-size-1300: 52px;
  --knox-base-size-1200: 48px;
  --knox-base-size-1100: 44px;
  --knox-base-size-1000: 40px;
  --knox-base-size-900: 36px;
  --knox-base-size-800: 32px;
  --knox-base-size-700: 28px;
  --knox-base-size-600: 24px;
  --knox-base-size-500: 20px;
  --knox-base-size-400: 16px;
  --knox-base-size-350: 14px;
  --knox-base-size-300: 12px;
  --knox-base-size-200: 8px;
  --knox-base-size-100: 4px;
  --knox-base-size-25: 1px;
  --knox-base-size-0: 0px;
  --knox-base-color-red-600: #2f150e;
  --knox-base-color-red-500: #470c00;
  --knox-base-color-red-470: #751900;
  --knox-base-color-red-420: #992400;
  --knox-base-color-red-400: #a32600;
  --knox-base-color-red-370: #bd2f00;
  --knox-base-color-red-300: #d73e0f;
  --knox-base-color-red-295: #c65539;
  --knox-base-color-red-200: #f2a18c;
  --knox-base-color-red-110: #febeae;
  --knox-base-color-red-80: #f5ccc1;
  --knox-base-color-red-30: #ffded6;
  --knox-base-color-red-15: #ffebe5;
  --knox-base-color-red-0: #ffeeeb;
  --knox-base-color-amber-600: #241600;
  --knox-base-color-amber-500: #2e1e00;
  --knox-base-color-amber-470: #4d3300;
  --knox-base-color-amber-420: #664600;
  --knox-base-color-amber-400: #704f00;
  --knox-base-color-amber-370: #9e6f00;
  --knox-base-color-amber-300: #ab7b1c;
  --knox-base-color-amber-295: #bd8400;
  --knox-base-color-amber-200: #deab54;
  --knox-base-color-amber-110: #e9bd77;
  --knox-base-color-amber-80: #f4cf95;
  --knox-base-color-amber-30: #ffe4b8;
  --knox-base-color-amber-15: #ffebcc;
  --knox-base-color-amber-0: #fff9f0;
  --knox-base-color-green-600: #10240f;
  --knox-base-color-green-500: #012e00;
  --knox-base-color-green-470: #044700;
  --knox-base-color-green-420: #065c00;
  --knox-base-color-green-400: #076600;
  --knox-base-color-green-370: #097000;
  --knox-base-color-green-300: #0e8a00;
  --knox-base-color-green-295: #398b32;
  --knox-base-color-green-200: #8ec388;
  --knox-base-color-green-110: #b5deb0;
  --knox-base-color-green-80: #bae3b5;
  --knox-base-color-green-30: #d5f1d0;
  --knox-base-color-green-15: #dbf8d8;
  --knox-base-color-green-0: #e7f5e5;
  --knox-base-color-purple-600: #1e1b36;
  --knox-base-color-purple-500: #2a0066;
  --knox-base-color-purple-470: #480f9f;
  --knox-base-color-purple-420: #5a31b9;
  --knox-base-color-purple-400: #643bc4;
  --knox-base-color-purple-370: #6c47d1;
  --knox-base-color-purple-300: #7c5ae2;
  --knox-base-color-purple-295: #7e6cd0;
  --knox-base-color-purple-200: #b5abf2;
  --knox-base-color-purple-110: #cec7ff;
  --knox-base-color-purple-80: #d6d1ff;
  --knox-base-color-purple-30: #e8e5ff;
  --knox-base-color-purple-15: #edebff;
  --knox-base-color-purple-0: #f1f0ff;
  --knox-base-color-blue-1100: rgba(117, 175, 255, 0.65);
  --knox-base-color-blue-1000: rgba(5, 112, 235, 0.43);
  --knox-base-color-blue-600: #182039;
  --knox-base-color-blue-500: #002352;
  --knox-base-color-blue-470: #003b80;
  --knox-base-color-blue-420: #004ca3;
  --knox-base-color-blue-400: #0053b3;
  --knox-base-color-blue-370: #0060c7;
  --knox-base-color-blue-300: #0570eb;
  --knox-base-color-blue-295: #3c7bd3;
  --knox-base-color-blue-200: #8eb9f5;
  --knox-base-color-blue-110: #b3d2ff;
  --knox-base-color-blue-80: #bdd8ff;
  --knox-base-color-blue-30: #d6e7ff;
  --knox-base-color-blue-15: #e0edff;
  --knox-base-color-blue-0: #ebf3ff;
  --knox-base-color-white-700: #ffffff;
  --knox-base-color-white-600: rgba(255, 255, 255, 0.89);
  --knox-base-color-white-550: rgba(255, 255, 255, 0.86);
  --knox-base-color-white-500: rgba(255, 255, 255, 0.79);
  --knox-base-color-white-300: rgba(255, 255, 255, 0.56);
  --knox-base-color-white-200: rgba(255, 255, 255, 0.43);
  --knox-base-color-white-100: rgba(255, 255, 255, 0.28);
  --knox-base-color-white-50: rgba(255, 255, 255, 0.19);
  --knox-base-color-white-25: rgba(255, 255, 255, 0.09);
  --knox-base-color-white-0: rgba(255, 255, 255, 0);
  --knox-base-color-black-700: #000000;
  --knox-base-color-black-600: rgba(0, 0, 0, 0.82);
  --knox-base-color-black-550: rgba(0, 0, 0, 0.72);
  --knox-base-color-black-500: rgba(0, 0, 0, 0.62);
  --knox-base-color-black-350: rgba(0, 0, 0, 0.43);
  --knox-base-color-black-300: rgba(0, 0, 0, 0.36);
  --knox-base-color-black-200: rgba(0, 0, 0, 0.24);
  --knox-base-color-black-100: rgba(0, 0, 0, 0.13);
  --knox-base-color-black-50: rgba(0, 0, 0, 0.07);
  --knox-base-color-black-0: rgba(0, 0, 0, 0);
  --knox-base-color-greyscale-1100: rgba(20, 20, 20, 0.7);
  --knox-base-color-greyscale-1000: rgba(237, 237, 237, 0.7);
  --knox-base-color-greyscale-900: #141414;
  --knox-base-color-greyscale-800: #1a1a1a;
  --knox-base-color-greyscale-700: #212121;
  --knox-base-color-greyscale-200: #ededed;
  --knox-base-color-greyscale-100: #fafafa;
  --knox-line-height-heading-xl: var(--knox-base-line-height-100); /* For tighter line spacing with text at 48pt or larger. */
  --knox-line-height-heading-large: var(--knox-base-line-height-200); /* For tighter line spacing with text at 28pt or larger. */
  --knox-line-height-default: var(--knox-base-line-height-300); /* Default line height for body text and headings. */
  --knox-letter-spacing-password-small: var(--knox-base-letter-spacing-1000);
  --knox-letter-spacing-password-medium: var(--knox-base-letter-spacing-1100);
  --knox-letter-spacing-password-large: var(--knox-base-letter-spacing-1100);
  --knox-letter-spacing-body-small: var(--knox-base-letter-spacing-100);
  --knox-letter-spacing-body-medium: var(--knox-base-letter-spacing-200);
  --knox-letter-spacing-body-large: var(--knox-base-letter-spacing-300);
  --knox-letter-spacing-heading-2xs: var(--knox-base-letter-spacing-100);
  --knox-letter-spacing-heading-xs: var(--knox-base-letter-spacing-200);
  --knox-letter-spacing-heading-small: var(--knox-base-letter-spacing-300);
  --knox-letter-spacing-heading-medium: var(--knox-base-letter-spacing-400);
  --knox-letter-spacing-heading-large: var(--knox-base-letter-spacing-500);
  --knox-letter-spacing-heading-xl: var(--knox-base-letter-spacing-600);
  --knox-font-size-body-small: var(--knox-base-size-300);
  --knox-font-size-body-medium: var(--knox-base-size-350);
  --knox-font-size-body-large: var(--knox-base-size-400);
  --knox-font-size-heading-2xs: var(--knox-base-size-300);
  --knox-font-size-heading-xs: var(--knox-base-size-350);
  --knox-font-size-heading-small: var(--knox-base-size-400);
  --knox-font-size-heading-medium: var(--knox-base-size-500);
  --knox-font-size-heading-large: var(--knox-base-size-700);
  --knox-font-size-heading-xl: var(--knox-base-size-1200);
  --knox-font-weight-body-strong: var(--knox-base-font-weight-600); /* Font weight for drawing attention to body text. */
  --knox-font-weight-body-default: var(--knox-base-font-weight-400); /* Default font weight for body text. */
  --knox-font-weight-heading-subtle: var(--knox-base-font-weight-500); /* Font weight for headings that require less attention. */
  --knox-font-weight-heading-default: var(--knox-base-font-weight-600); /* Default font weight for headings. */
  --knox-font-family-password: var(--knox-base-font-family-monospace); /* For distinguishing between letters, digits, and symbols in password fields. */
  --knox-font-family-code: var(--knox-base-font-family-monospace); /* For displaying code or computer values. */
  --knox-font-family-default: var(--knox-base-font-family-sans-serif); /* Default font family used across 1Password applications. */
  --knox-spacing-4xl: var(--knox-base-size-1700);
  --knox-spacing-3xl: var(--knox-base-size-1600);
  --knox-spacing-2xl: var(--knox-base-size-1200);
  --knox-spacing-xl: var(--knox-base-size-800);
  --knox-spacing-large: var(--knox-base-size-600); /* For loose padding or margins. */
  --knox-spacing-medium: var(--knox-base-size-400); /* For some padding and margins. */
  --knox-spacing-small: var(--knox-base-size-300); /* For minimal padding when elements share a functional relationship. */
  --knox-spacing-xs: var(--knox-base-size-200); /* For tight spacing when elements share a close functional relationship. */
  --knox-spacing-2xs: var(--knox-base-size-100); /* For extra tight spacing when elements share a direct functional relationship. */
  --knox-spacing-hairline: var(--knox-base-size-25); /* For a tiny amount of spacing so attached elements don’t blend together. */
  --knox-spacing-none: var(--knox-base-size-0); /* For removing spacing entirely. */
  --knox-corner-radius-circular: var(--knox-base-size-10000); /* For rounding avatars and radio buttons into a full circle. */
  --knox-corner-radius-large: var(--knox-base-size-300); /* For large containers and popovers such as modals and toasts. */
  --knox-corner-radius-medium: var(--knox-base-size-200); /* For clickable elements and containers such as buttons, text fields, tooltips, and callout banners. */
  --knox-corner-radius-small: var(--knox-base-size-100); /* For small components such as checkboxes and menus. */
  --knox-corner-radius-none: var(--knox-base-size-0); /* For removing an existing corner.radius style from an element. */
  --knox-color-border-accent-on-strong-focus: var(--knox-base-color-white-700); /* For the focus ring on interactive elements placed on top of background.accent.strong colors, dark gradients, or illustrated backgrounds. */
  --knox-color-border-accent-focus: var(--knox-base-color-blue-200); /* For the focus ring on interactive elements. */
  --knox-color-border-accent-critical: var(--knox-base-color-red-295); /* Draws attention to an element for a critical message or error. */
  --knox-color-border-accent-warning: var(--knox-base-color-amber-295); /* Draws attention to an element for a warning message. */
  --knox-color-border-accent-success: var(--knox-base-color-green-295); /* Draws attention to an element for a success state. Indicates an important process or error has been addressed. */
  --knox-color-border-accent-attention: var(--knox-base-color-purple-295); /* Draws attention to an element by not using default accent color. */
  --knox-color-border-accent-default: var(--knox-base-color-blue-295); /* Draws attention to an element. Will change to match custom operating system accent colors. */
  --knox-color-border-neutral-on-strong-default: var(--knox-base-color-white-200); /* For borders and dividers on top of background.accent.strong colors, dark gradients or illustrated backgrounds. */
  --knox-color-border-neutral-weak: var(--knox-base-color-white-25); /* A border for disabled controls and purely decorative elements. */
  --knox-color-border-neutral-strong: var(--knox-base-color-white-300); /* A border for interactive elements such as text fields. */
  --knox-color-border-neutral-default: var(--knox-base-color-white-100); /* Default color for borders and dividers. */
  --knox-color-icon-accent-on-strong-inverse-warning-pressed: var(--knox-base-color-amber-420);
  --knox-color-icon-accent-on-strong-inverse-warning-hover: var(--knox-base-color-amber-370);
  --knox-color-icon-accent-on-strong-inverse-warning: var(--knox-base-color-amber-300); /* Draws attention to icons in a warning message. */
  --knox-color-icon-accent-on-strong-inverse-critical-pressed: var(--knox-base-color-red-420);
  --knox-color-icon-accent-on-strong-inverse-critical-hover: var(--knox-base-color-red-370);
  --knox-color-icon-accent-on-strong-inverse-critical: var(--knox-base-color-red-300); /* For critical-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-on-strong-inverse-success-pressed: var(--knox-base-color-green-420);
  --knox-color-icon-accent-on-strong-inverse-success-hover: var(--knox-base-color-green-370);
  --knox-color-icon-accent-on-strong-inverse-success: var(--knox-base-color-green-300); /* For success-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-on-strong-inverse-attention-pressed: var(--knox-base-color-purple-420);
  --knox-color-icon-accent-on-strong-inverse-attention-hover: var(--knox-base-color-purple-370);
  --knox-color-icon-accent-on-strong-inverse-attention: var(--knox-base-color-purple-300); /* For attention-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-on-strong-inverse-default-pressed: var(--knox-base-color-blue-420);
  --knox-color-icon-accent-on-strong-inverse-default-hover: var(--knox-base-color-blue-370);
  --knox-color-icon-accent-on-strong-inverse-default: var(--knox-base-color-blue-300); /* For default-accented icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-accent-critical-pressed: var(--knox-base-color-red-80);
  --knox-color-icon-accent-critical-hover: var(--knox-base-color-red-110);
  --knox-color-icon-accent-critical: var(--knox-base-color-red-200); /* Draws attention to icons in a critical message or error. */
  --knox-color-icon-accent-warning-pressed: var(--knox-base-color-amber-80);
  --knox-color-icon-accent-warning-hover: var(--knox-base-color-amber-110);
  --knox-color-icon-accent-warning: var(--knox-base-color-amber-200); /* Draws attention to icons in a warning message. */
  --knox-color-icon-accent-success-pressed: var(--knox-base-color-green-80);
  --knox-color-icon-accent-success-hover: var(--knox-base-color-green-110);
  --knox-color-icon-accent-success: var(--knox-base-color-green-200); /* Draws attention to icons in a success state. Indicates an important process or error has been addressed. */
  --knox-color-icon-accent-attention-pressed: var(--knox-base-color-purple-80);
  --knox-color-icon-accent-attention-hover: var(--knox-base-color-purple-110);
  --knox-color-icon-accent-attention: var(--knox-base-color-purple-200); /* Draws attention to icons by not using default accent color. */
  --knox-color-icon-accent-default-pressed: var(--knox-base-color-blue-80);
  --knox-color-icon-accent-default-hover: var(--knox-base-color-blue-110);
  --knox-color-icon-accent-default: var(--knox-base-color-blue-200); /* Draws attention to an icon. Will change to match custom operating system accent colors. */
  --knox-color-icon-neutral-on-strong-inverse-default-pressed: var(--knox-base-color-black-600);
  --knox-color-icon-neutral-on-strong-inverse-default-hover: var(--knox-base-color-black-550);
  --knox-color-icon-neutral-on-strong-inverse-default: var(--knox-base-color-black-500); /* For icons on top of the background.neutral.on-strong.strong color */
  --knox-color-icon-neutral-on-strong-default: var(--knox-base-color-white-550); /* For icons on top of the background.neutral.on-strong.transparent color, dark gradients or illustrated backgrounds. */
  --knox-color-icon-neutral-strong: var(--knox-base-color-white-550); /* DEPRECATED. Will be removed in v5.0.0. Use icon.neutral.on-strong.default instead. */
  --knox-color-icon-neutral-disabled: var(--knox-base-color-white-200); /* Only used for icons within disabled elements. */
  --knox-color-icon-neutral-default-pressed: var(--knox-base-color-white-600);
  --knox-color-icon-neutral-default-hover: var(--knox-base-color-white-550);
  --knox-color-icon-neutral-default: var(--knox-base-color-white-500); /* Default icon color. For monochrome icon set. */
  --knox-color-text-accent-on-strong-inverse-warning-pressed: var(--knox-base-color-amber-500);
  --knox-color-text-accent-on-strong-inverse-warning-hover: var(--knox-base-color-amber-470);
  --knox-color-text-accent-on-strong-inverse-warning: var(--knox-base-color-amber-400); /* For warning-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-critical-pressed: var(--knox-base-color-red-500);
  --knox-color-text-accent-on-strong-inverse-critical-hover: var(--knox-base-color-red-470);
  --knox-color-text-accent-on-strong-inverse-critical: var(--knox-base-color-red-400); /* For critical-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-success-pressed: var(--knox-base-color-green-500);
  --knox-color-text-accent-on-strong-inverse-success-hover: var(--knox-base-color-green-470);
  --knox-color-text-accent-on-strong-inverse-success: var(--knox-base-color-green-400); /* For success-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-attention-pressed: var(--knox-base-color-purple-500);
  --knox-color-text-accent-on-strong-inverse-attention-hover: var(--knox-base-color-purple-470);
  --knox-color-text-accent-on-strong-inverse-attention: var(--knox-base-color-purple-400); /* For attention-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-on-strong-inverse-default-pressed: var(--knox-base-color-blue-500);
  --knox-color-text-accent-on-strong-inverse-default-hover: var(--knox-base-color-blue-470);
  --knox-color-text-accent-on-strong-inverse-default: var(--knox-base-color-blue-400); /* For default-accented text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-accent-critical-pressed: var(--knox-base-color-red-15);
  --knox-color-text-accent-critical-hover: var(--knox-base-color-red-30);
  --knox-color-text-accent-critical: var(--knox-base-color-red-110); /* Draws attention to text in a critical message or error. */
  --knox-color-text-accent-warning-pressed: var(--knox-base-color-amber-15);
  --knox-color-text-accent-warning-hover: var(--knox-base-color-amber-30);
  --knox-color-text-accent-warning: var(--knox-base-color-amber-110); /* Draws attention to text in a warning message. */
  --knox-color-text-accent-success-pressed: var(--knox-base-color-green-15);
  --knox-color-text-accent-success-hover: var(--knox-base-color-green-30);
  --knox-color-text-accent-success: var(--knox-base-color-green-110); /* Draws attention to text in a success state. Indicates an important process or error has been addressed. */
  --knox-color-text-accent-attention-pressed: var(--knox-base-color-purple-15);
  --knox-color-text-accent-attention-hover: var(--knox-base-color-purple-30);
  --knox-color-text-accent-attention: var(--knox-base-color-purple-110); /* Draws attention to text by not using default accent color. */
  --knox-color-text-accent-link-pressed: var(--knox-base-color-blue-15);
  --knox-color-text-accent-link-hover: var(--knox-base-color-blue-30);
  --knox-color-text-accent-link: var(--knox-base-color-blue-110); /* For links that open in a web browser. */
  --knox-color-text-accent-default-pressed: var(--knox-base-color-blue-15);
  --knox-color-text-accent-default-hover: var(--knox-base-color-blue-30);
  --knox-color-text-accent-default: var(--knox-base-color-blue-110); /* Draws attention to text. Will change to match custom operating system accent colors. */
  --knox-color-text-neutral-on-strong-inverse-default-pressed: var(--knox-base-color-black-700);
  --knox-color-text-neutral-on-strong-inverse-default-hover: var(--knox-base-color-black-700);
  --knox-color-text-neutral-on-strong-inverse-default: var(--knox-base-color-black-600); /* For text on top of the background.neutral.on-strong.strong color */
  --knox-color-text-neutral-on-strong-default: var(--knox-base-color-white-700); /* For text on top of strong-colored backgrounds, dark gradients or illustrated backgrounds. */
  --knox-color-text-neutral-strong: var(--knox-base-color-white-700); /* DEPRECATED. Will be removed in v5.0.0. Use text.neutral.on-strong.default instead. */
  --knox-color-text-neutral-disabled: var(--knox-base-color-white-300); /* Only used for text within disabled elements. */
  --knox-color-text-neutral-weak-pressed: var(--knox-base-color-white-600);
  --knox-color-text-neutral-weak-hover: var(--knox-base-color-white-550);
  --knox-color-text-neutral-weak: var(--knox-base-color-white-500); /* For supplemental text or headers. Only used with main backgrounds. Minimum of 15pt. */
  --knox-color-text-neutral-default-pressed: var(--knox-base-color-white-700);
  --knox-color-text-neutral-default-hover: var(--knox-base-color-white-700);
  --knox-color-text-neutral-default: var(--knox-base-color-white-600); /* Default color for all text. */
  --knox-color-background-accent-strong-critical-pressed: var(--knox-base-color-red-420);
  --knox-color-background-accent-strong-critical-hover: var(--knox-base-color-red-370);
  --knox-color-background-accent-strong-critical: var(--knox-base-color-red-300); /* Draws the highest level of attention to a message or error that needs immediate action. */
  --knox-color-background-accent-strong-warning-pressed: var(--knox-base-color-amber-420);
  --knox-color-background-accent-strong-warning-hover: var(--knox-base-color-amber-370);
  --knox-color-background-accent-strong-warning: var(--knox-base-color-amber-300); /* Draws a medium level of attention to a message and/or indicates a potential problem to address. */
  --knox-color-background-accent-strong-success-pressed: var(--knox-base-color-green-420);
  --knox-color-background-accent-strong-success-hover: var(--knox-base-color-green-370);
  --knox-color-background-accent-strong-success: var(--knox-base-color-green-300); /* Draws strong attention to a success state element. Indicates a critical process or error has been addressed. */
  --knox-color-background-accent-strong-attention-pressed: var(--knox-base-color-purple-420);
  --knox-color-background-accent-strong-attention-hover: var(--knox-base-color-purple-370);
  --knox-color-background-accent-strong-attention: var(--knox-base-color-purple-300); /* Draws extra strong attention to an element by not using default accent color. */
  --knox-color-background-accent-strong-default-pressed: var(--knox-base-color-blue-420);
  --knox-color-background-accent-strong-default-hover: var(--knox-base-color-blue-370);
  --knox-color-background-accent-strong-default: var(--knox-base-color-blue-300); /* Draws strong attention to an element. Will change to match custom operating system accent colors */
  --knox-color-background-accent-critical: var(--knox-base-color-red-600); /* Draws a high level of attention to a message or error that needs immediate action. */
  --knox-color-background-accent-warning: var(--knox-base-color-amber-600); /* Draws a medium level of attention to a message and/or indicates a potential problem to address. */
  --knox-color-background-accent-success: var(--knox-base-color-green-600); /* Draws attention to a success state element. Indicates an important process or error has been addressed. */
  --knox-color-background-accent-attention: var(--knox-base-color-purple-600); /* Draws extra attention to an element by not using default accent color. */
  --knox-color-background-accent-default: var(--knox-base-color-blue-600); /* Draws attention to an element. Will change to match custom operating system accent colors. */
  --knox-color-background-neutral-on-strong-transparent-pressed: var(--knox-base-color-black-200);
  --knox-color-background-neutral-on-strong-transparent-hover: var(--knox-base-color-black-100);
  --knox-color-background-neutral-on-strong-transparent: var(--knox-base-color-black-0); /* For elements that need the same color as the view behind them when placed on top of background.accent.strong colors. */
  --knox-color-background-neutral-on-strong-strong-pressed: var(--knox-base-color-white-500);
  --knox-color-background-neutral-on-strong-strong-hover: var(--knox-base-color-white-600);
  --knox-color-background-neutral-on-strong-strong: var(--knox-base-color-white-700); /* Draws strong attention to an element placed on top of background.accent.strong colors. */
  --knox-color-background-neutral-strong: var(--knox-base-color-white-700); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.on-strong.strong instead. */
  --knox-color-background-neutral-overlay: var(--knox-base-color-greyscale-1100); /* A background for modals or other elements that need to de-emphasize the content under them. */
  --knox-color-background-neutral-transparent-pressed: var(--knox-base-color-white-100);
  --knox-color-background-neutral-transparent-hover: var(--knox-base-color-white-50);
  --knox-color-background-neutral-transparent: var(--knox-base-color-white-0); /* For elements that need the same color as the view behind them. Most common color for interactive elements. */
  --knox-color-background-neutral-interactive-pressed: var(--knox-base-color-white-100); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.transparent-pressed instead. */
  --knox-color-background-neutral-interactive-hover: var(--knox-base-color-white-50); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.transparent-hover instead. */
  --knox-color-background-neutral-interactive: var(--knox-base-color-white-0); /* DEPRECATED. Will be removed in v5.0.0. Use background.neutral.transparent instead. */
  --knox-color-background-neutral-activated: var(--knox-base-color-white-100); /* For showing the currently active or selected destination in a navigation list. Only used with default text. */
  --knox-color-background-neutral-low: var(--knox-base-color-greyscale-900); /* For areas that need to show lower in z-index or require less attention. */
  --knox-color-background-neutral-high: var(--knox-base-color-greyscale-700); /* For areas that need to show higher in z-index or require extra contrast. */
  --knox-color-background-neutral-disabled: var(--knox-base-color-white-200); /* A background for interactive elements such as checkboxes to indicate they're disabled. */
  --knox-color-background-neutral-default: var(--knox-base-color-greyscale-800); /* Default background color for all views. */
  --knox-breakpoint-xl: var(--knox-base-size-2200); /* For extra large desktop devices that are at least 1280px. */
  --knox-breakpoint-large: var(--knox-base-size-2100); /* For landscape tablets and large desktops that are at least 1024px. */
  --knox-breakpoint-medium: var(--knox-base-size-2000); /* For portrait medium tablets that are at least 768px. */
  --knox-breakpoint-small: var(--knox-base-size-1925); /* For devices that are at least 576px. */
  --knox-breakpoint-xs: var(--knox-base-size-0); /* For devices that are less than 576px. */
  --knox-base-shadow-outset-750: 0 8px 40px 0 var(--knox-base-color-black-500);
  --knox-base-shadow-outset-700: 0 8px 40px 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-650: 0 4px 20px 0 var(--knox-base-color-black-300);
  --knox-base-shadow-outset-600: 0 4px 20px 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-550: 0 4px 16px 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-500: 0 4px 16px 0 var(--knox-base-color-black-50);
  --knox-base-shadow-outset-450: 0 2px 8px 0 var(--knox-base-color-black-300);
  --knox-base-shadow-outset-400: 0 2px 8px 0 var(--knox-base-color-black-50);
  --knox-base-shadow-outset-350: 0 0 0 1px var(--knox-base-color-black-300);
  --knox-base-shadow-outset-325: 0 0 0 1px var(--knox-base-color-black-100);
  --knox-base-shadow-outset-300: 0 0 0 1px var(--knox-base-color-black-50);
  --knox-base-shadow-outset-250: 0 -1px 0 0 var(--knox-base-color-black-300);
  --knox-base-shadow-outset-200: 0 -1px 0 0 var(--knox-base-color-black-50);
  --knox-base-shadow-outset-150: 0 1px 0 0 var(--knox-base-color-black-100);
  --knox-base-shadow-outset-100: 0 1px 0 0 var(--knox-base-color-black-50);
  --knox-base-shadow-inset-300: inset 0 0 0 1px var(--knox-base-color-white-25);
  --knox-base-shadow-inset-200: inset 0 1px 0 0 var(--knox-base-color-white-25);
  --knox-base-shadow-inset-100: inset 0 -1px 0 0 var(--knox-base-color-white-25);
  --knox-elevation-high: var(--knox-base-shadow-inset-300), var(--knox-base-shadow-outset-750), var(--knox-base-shadow-outset-550), var(--knox-base-shadow-outset-350); /* For modals, alerts or other large elements that temporarily block or draw a user’s focus elsewhere. */
  --knox-elevation-medium: var(--knox-base-shadow-inset-300), var(--knox-base-shadow-outset-650), var(--knox-base-shadow-outset-350); /* For menus, notifications, or other elements that need to be positioned over content in the z-index. */
  --knox-elevation-low: var(--knox-base-shadow-inset-300), var(--knox-base-shadow-outset-450), var(--knox-base-shadow-outset-325); /* For cards or other inline elements that need elevation. */
  --knox-elevation-bottom-ledge: var(--knox-base-shadow-inset-200), var(--knox-base-shadow-outset-250); /* For button and footer bars. Shows elements that are anchored to the bottom. Only used when content isn’t visible. */
  --knox-elevation-top-ledge: var(--knox-base-shadow-inset-100), var(--knox-base-shadow-outset-450), var(--knox-base-shadow-outset-150); /* For title and header bars. Shows elements that are anchored to the top. Only used when content scrolls underneath. */
}

body,
input,
textarea {
  font-family: var(--knox-font-family-default), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: var(--knox-line-height-default);
}

p {
  margin-top: 0;
}

a {
  color: var(--knox-color-text-accent-default);
  text-decoration: none;
}

h1,
h2,
h3,
.card-title,
h4,
h5,
h6 {
  font-weight: var(--knox-font-weight-heading-default);
  margin-top: 0;
}

h2 {
  font-size: var(--knox-font-size-heading-large);
}

h3, .card-title {
  font-size: var(--knox-font-size-heading-medium);
}

h4 {
  font-size: var(--knox-font-size-heading-small);
}

h5 {
  font-size: var(--knox-font-size-heading-xs);
}

h6 {
  font-size: var(--knox-font-size-heading-2xs);
}

small {
  font-size: var(--knox-font-size-body-small);
}

*:focus {
  outline: 3px solid var(--knox-color-border-accent-focus);
  outline-offset: var(--focus-offset, 1px);
}

.box, .card, .error-pane {
  padding: var(--knox-spacing-medium);
  background-color: var(--box-background, var(--knox-color-background-neutral-high));
  border: 1px solid var(--box-border, var(--knox-color-border-neutral-default));
  color: var(--box-color, var(--knox-color-text-neutral-default));
  border-radius: var(--knox-corner-radius-medium);
}

.default.box, .default.card, .default.error-pane {
  --box-background: var(--knox-color-background-accent-default);
  --box-border: var(--knox-color-border-accent-default);
}

.attention.box, .attention.card, .attention.error-pane {
  --box-background: var(--knox-color-background-accent-attention);
  --box-border: var(--knox-color-border-accent-attention);
}

.success.box, .success.card, .success.error-pane {
  --box-background: var(--knox-color-background-accent-success);
  --box-border: var(--knox-color-border-accent-success);
}

.critical.box, .critical.card, .error-pane {
  --box-background: var(--knox-color-background-accent-critical);
  --box-border: var(--knox-color-border-accent-critical);
}

.error-card {
  display: flex;
  flex: 1;
  place-items: center;
  place-content: center;
}
.error-card .card {
  max-width: 500px;
}

.error-stack {
  overflow: hidden;
  white-space: pre-wrap;
  color: var(--knox-color-text-accent-critical);
}

.error-pane {
  font-size: var(--knox-font-size-body-medium);
}
.error-pane ul {
  padding: 0 0 0 var(--knox-spacing-medium);
  margin: 0;
}

.control, .btn, input:not([type=checkbox]):not(.knox-reset),
textarea {
  padding: var(--knox-spacing-xs);
  border-radius: var(--knox-corner-radius-medium);
  appearance: none;
  background-color: var(--control-background, var(--knox-color-background-neutral-transparent));
  color: var(--control-text, var(--knox-color-text-neutral-default));
  border-color: var(--control-border, var(--knox-color-border-neutral-strong));
  border-style: solid;
  border-width: 1px;
  font-size: var(--knox-font-size-body-medium);
  font-weight: var(--knox-font-weight-body-default);
}
.control.large, .large.btn, input.large:not([type=checkbox]):not(.knox-reset),
textarea.large {
  padding: var(--knox-spacing-small);
  font-size: var(--knox-font-size-body-large);
}
.control.block, .block.btn, input.block:not([type=checkbox]):not(.knox-reset),
textarea.block {
  flex: 1;
  width: 100%;
}

input:not([type=checkbox]):not(.knox-reset).critical,
textarea.critical {
  --control-border: var(--knox-color-border-accent-critical);
  --control-background: var(--knox-color-background-accent-critical);
}

input[type=checkbox]:not(.knox-reset) {
  appearance: none;
  background-color: var(--knox-color-background-neutral-transparent);
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--knox-color-border-neutral-strong);
  border-radius: var(--knox-corner-radius-small);
  display: inline-grid;
  place-content: center;
}
input[type=checkbox]:not(.knox-reset) :disabled {
  background-color: var(--knox-color-background-neutral-transparent);
  cursor: not-allowed;
}
input[type=checkbox]:not(.knox-reset) :hover {
  background-color: var(--knox-color-background-neutral-transparent-hover);
}
input[type=checkbox]:not(.knox-reset)::before {
  content: "";
  width: 8px;
  height: 8px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  background-color: white;
}

input[type=checkbox]:checked {
  border: none;
  background-color: var(--knox-color-background-accent-strong-default);
}
input[type=checkbox]:checked :hover {
  background-color: var(--knox-color-background-accent-strong-default-hover);
}
input[type=checkbox]:checked::before {
  transform: scale(1);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--knox-spacing-xs);
}
.field.checkbox {
  margin-bottom: 18px;
  margin-top: 10px;
}
.field.checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.field input:not([type=checkbox]),
.field textarea {
  flex: 1;
}

.field-input-row {
  display: flex;
  gap: var(--knox-spacing-xs);
}
.field-input-row input:not([type=checkbox]) {
  flex: 1;
}
.field-input-row .btn[type=submit] {
  padding-left: var(--knox-spacing-large);
  padding-right: var(--knox-spacing-large);
}

.search {
  display: flex;
  flex-direction: column;
  gap: var(--knox-spacing-medium);
  margin-top: var(--knox-spacing-large);
  margin-bottom: var(--knox-spacing-xl);
}
.search .field-input-row,
.search .search-message {
  margin-top: var(--knox-spacing-medium);
}

input.hidden {
  display: none;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: -1000px;
}

.btn {
  --control-border: var(--knox-color-border-neutral-default);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn:hover {
  --control-background: var(--knox-color-background-neutral-transparent-hover);
}
.btn:active {
  --control-background: var(--knox-color-background-neutral-transparent-pressed);
}
.btn.weak {
  --control-border: transparent;
}

.default.btn.strong {
  --control-text: var(--knox-color-text-neutral-on-strong-default);
  --control-background: var(--knox-color-background-accent-strong-default);
  --control-border: var(--control-background);
}
.default.btn.strong:hover {
  --control-background: var(--knox-color-background-accent-strong-default-hover);
}
.default.btn.strong:active {
  --control-background: var(--knox-color-background-accent-strong-default-pressed);
}

.default.btn.accent {
  --control-text: var(--knox-color-text-accent-default);
  --control-border: var(--knox-color-border-accent-default);
}

.default.btn.weak {
  --control-text: var(--knox-color-text-accent-default);
}

.info.btn.strong {
  --control-text: var(--knox-color-text-neutral-on-strong-default);
  --control-background: var(--knox-color-background-accent-strong-info);
  --control-border: var(--control-background);
}
.info.btn.strong:hover {
  --control-background: var(--knox-color-background-accent-strong-info-hover);
}
.info.btn.strong:active {
  --control-background: var(--knox-color-background-accent-strong-info-pressed);
}

.info.btn.accent {
  --control-text: var(--knox-color-text-accent-info);
  --control-border: var(--knox-color-border-accent-info);
}

.info.btn.weak {
  --control-text: var(--knox-color-text-accent-info);
}

.attention.btn.strong {
  --control-text: var(--knox-color-text-neutral-on-strong-default);
  --control-background: var(--knox-color-background-accent-strong-attention);
  --control-border: var(--control-background);
}
.attention.btn.strong:hover {
  --control-background: var(--knox-color-background-accent-strong-attention-hover);
}
.attention.btn.strong:active {
  --control-background: var(--knox-color-background-accent-strong-attention-pressed);
}

.attention.btn.accent {
  --control-text: var(--knox-color-text-accent-attention);
  --control-border: var(--knox-color-border-accent-attention);
}

.attention.btn.weak {
  --control-text: var(--knox-color-text-accent-attention);
}

.success.btn.strong {
  --control-text: var(--knox-color-text-neutral-on-strong-default);
  --control-background: var(--knox-color-background-accent-strong-success);
  --control-border: var(--control-background);
}
.success.btn.strong:hover {
  --control-background: var(--knox-color-background-accent-strong-success-hover);
}
.success.btn.strong:active {
  --control-background: var(--knox-color-background-accent-strong-success-pressed);
}

.success.btn.accent {
  --control-text: var(--knox-color-text-accent-success);
  --control-border: var(--knox-color-border-accent-success);
}

.success.btn.weak {
  --control-text: var(--knox-color-text-accent-success);
}

.critical.btn.strong {
  --control-text: var(--knox-color-text-neutral-on-strong-default);
  --control-background: var(--knox-color-background-accent-strong-critical);
  --control-border: var(--control-background);
}
.critical.btn.strong:hover {
  --control-background: var(--knox-color-background-accent-strong-critical-hover);
}
.critical.btn.strong:active {
  --control-background: var(--knox-color-background-accent-strong-critical-pressed);
}

.critical.btn.accent {
  --control-text: var(--knox-color-text-accent-critical);
  --control-border: var(--knox-color-border-accent-critical);
}

.critical.btn.weak {
  --control-text: var(--knox-color-text-accent-critical);
}

.card {
  border: 0;
  box-shadow: var(--knox-elevation-low);
  display: flex;
  flex-direction: column;
  gap: var(--knox-spacing-medium);
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  width: 100%;
}
.card-title small {
  font-size: var(--knox-font-size-body-small);
  font-weight: var(--knox-font-weight-body-default);
}

.card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--knox-spacing-small);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--knox-spacing-small);
}
.card-footer .btn.block {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-avatar {
  aspect-ratio: 1/1;
  width: var(--avatar-size, 100px);
  position: relative;
  margin-top: var(--avatar-margin-top, -30px);
  overflow: hidden;
  border-radius: var(--knox-corner-radius-circular);
  place-self: center;
}
.card-avatar img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

.card-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, var(--card-size, 250px));
  grid-auto-rows: min-content;
  gap: var(--grid-gap, var(--knox-spacing-2xl) var(--knox-spacing-large));
}
.card-grid > .card {
  aspect-ratio: var(--card-aspect-ratio, none);
  justify-content: space-between;
  gap: var(--knox-spacing-large);
}
.card-grid.centered {
  display: flex;
  flex: 1;
  place-items: center;
  place-content: center;
}
.card-grid.centered .card {
  max-width: 400px;
}

table {
  --table-border: var(--knox-color-border-neutral-default);
  width: 100%;
  max-width: 100%;
  flex: 1;
  border-radius: var(--knox-corner-radius-medium);
  border: 1px solid var(--table-border);
  border-spacing: 0;
}
table tbody tr:nth-of-type(odd) {
  background-color: var(--knox-color-background-neutral-low);
}
table tbody tr td {
  border-top-width: 1px;
}
table td,
table th {
  padding: var(--knox-spacing-small);
  border-width: 0;
  border-style: solid;
  border-color: var(--table-border);
}
table td:not(:last-child),
table th:not(:last-child) {
  border-right-width: 1px;
}

.navbar {
  display: flex;
  align-items: center;
  background-color: var(--knox-color-background-neutral-high);
  padding: var(--knox-spacing-xs) var(--knox-spacing-small);
  color: var(--knox-color-text-neutral-default);
  gap: var(--knox-spacing-large);
  justify-content: space-between;
  box-shadow: var(--knox-base-shadow-inset-100);
}
.navbar .brand {
  display: flex;
  align-items: center;
  gap: var(--knox-spacing-xs);
  font-size: var(--knox-font-size-heading-small);
  font-weight: var(--knox-font-weight-heading-default);
  letter-spacing: var(--knox-letter-spacing-heading-small);
  color: var(--knox-color-text-neutral-default);
}
.navbar .brand-link {
  display: flex;
  align-items: center;
  gap: var(--knox-spacing-xs);
  color: var(--knox-color-text-neutral-default);
}
.navbar .brand-link img {
  height: 32px;
  width: 32px;
}
.navbar .brand-separator {
  font-weight: var(--knox-font-weight-body-default);
  color: var(--knox-color-text-neutral-disabled);
}
.navbar .account-links {
  display: inline-flex;
  gap: var(--knox-spacing-xs);
}
.navbar.scroll {
  box-shadow: var(--knox-elevation-top-ledge);
  border-bottom: none;
  z-index: 1;
}

dialog {
  padding: var(--knox-spacing-xl);
  border-width: 0;
  background: transparent;
  max-width: 500px;
  width: auto;
}
dialog .card {
  box-shadow: var(--knox-elevation-high);
}
dialog .card-footer {
  justify-content: end;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}

body {
  color: var(--knox-color-text-neutral-default);
  background-color: var(--knox-color-background-neutral-default);
  display: flex;
  flex-direction: column;
}

main,
#react-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden scroll;
}
main.padding,
#react-root.padding {
  padding: var(--knox-spacing-large);
}

*::backdrop {
  background: rgba(237, 237, 237, 0.7);
}
@media screen and (prefers-color-scheme: dark) {
  *::backdrop {
    background: rgba(20, 20, 20, 0.7);
  }
}

.hidden {
  display: none;
}