/* css/design_system/variables.css */
:root {
--size-0: 0;
--size-2: 2px;
--size-4: 4px;
--size-5: 5px;
--size-6: 6px;
--size-7-5: 7.5px;
--size-8: 8px;
--size-10: 10px;
--size-11: 11px;
--size-12: 12px;
--size-16: 16px;
--size-20: 20px;
--size-24: 24px;
--size-28: 28px;
--size-32: 32px;
--size-36: 36px;
--size-40: 40px;
--size-44: 44px;
--size-48: 48px;
--size-52: 52px;
--size-56: 56px;
--size-60: 60px;
--size-64: 64px;
--size-72: 72px;
--size-80: 80px;
--size-88: 88px;
--size-96: 96px;
--size-full: 9999px;
--gc-card-width: 534px;
--padding-left-xl: 40px;
--padding-right-xl: 64px;
--padding-left-2xl: 80px;
--padding-right-2xl: 128px;
--checkbox-check-svg: url('data:image/svg+xml,');
--disabled-checkbox-check-svg: url('data:image/svg+xml,');
--dashed-border-svg: url('data:image/svg+xml,');
--error-dashed-border-svg: url('data:image/svg+xml,');
--date-picker-calendar-today-circle: url("data:image/svg+xml;utf8,");
--date-picker-calendar-today-circle-focused: url("data:image/svg+xml;utf8,");
--color-neutral-gray-white: #ffffff;
--color-neutral-gray-50: #fafafa;
--color-neutral-gray-75: #f5f5f5;
--color-neutral-gray-100: #ededed;
--color-neutral-gray-200: #e8e8e8;
--color-neutral-gray-300: #dbdbdb;
--color-neutral-gray-400: #bdbdbd;
--color-neutral-gray-500: #7d7d7d;
--color-neutral-gray-600: #666666;
--color-neutral-gray-700: #4d4d4d;
--color-neutral-gray-800: #383838;
--color-neutral-gray-900: #292929;
--color-neutral-gray-black: #000000;
--color-blue-gray-25: #fcfeff;
--color-blue-gray-50: #f5f9fa;
--color-blue-gray-75: #f2f8fa;
--color-blue-gray-100: #edf3f5;
--color-blue-gray-200: #e5ecef;
--color-blue-gray-300: #ced7db;
--color-blue-gray-400: #aab7bd;
--color-blue-gray-500: #6d777d;
--color-blue-gray-600: #576166;
--color-blue-gray-700: #41484d;
--color-blue-gray-800: #2e3438;
--color-blue-gray-900: #212629;
--color-blue-gray-950: #0e1214;
--color-purple-gray-25: #fefcff;
--color-purple-gray-50: #f9f7fa;
--color-purple-gray-75: #f5f2f7;
--color-purple-gray-100: #f1edf5;
--color-purple-gray-200: #e8e3ed;
--color-purple-gray-300: #d4cedb;
--color-purple-gray-400: #b3aabd;
--color-purple-gray-500: #756d7d;
--color-purple-gray-600: #5e5766;
--color-purple-gray-700: #47414d;
--color-purple-gray-800: #332e38;
--color-purple-gray-900: #252129;
--color-purple-gray-950: #110e14;
--color-yellow-gray-50: #f7f5f2;
--color-yellow-gray-100: #e8e5e1;
--color-green-gray-25: #fcfffd;
--color-green-gray-50: #fafcfb;
--color-green-gray-100: #f2f7f4;
--color-green-gray-200: #f0f5f2;
--color-green-gray-300: #e8edea;
--color-green-gray-400: #d0d6d3;
--color-green-gray-500: #6b7570;
--color-green-gray-600: #545e5a;
--color-green-gray-700: #38403c;
--color-green-gray-800: #2a332f;
--color-green-gray-900: #1d2420;
--color-green-gray-950: #070a09;
--color-green-25: #fcfffe;
--color-green-50: #fafffe;
--color-green-75: #f5fffc;
--color-green-100: #adf7e6;
--color-green-200: #7df0d5;
--color-green-300: #63dbbf;
--color-green-400: #1a967d;
--color-green-500: #00856a;
--color-green-600: #017360;
--color-green-700: #006151;
--color-green-800: #014d42;
--color-green-900: #142624;
--color-blue-25: #fcfeff;
--color-blue-50: #f7fdff;
--color-blue-75: #f2fcff;
--color-blue-100: #ade7f7;
--color-blue-200: #7bcfed;
--color-blue-300: #6ebedb;
--color-blue-400: #357890;
--color-blue-500: #1e6985;
--color-blue-600: #015473;
--color-blue-700: #07415e;
--color-blue-800: #06314a;
--color-blue-900: #162025;
--color-purple-25: #fdfcff;
--color-purple-50: #fcfaff;
--color-purple-75: #f8f2ff;
--color-purple-100: #d3b2f7;
--color-purple-200: #bf8ff2;
--color-purple-300: #ad7ede;
--color-purple-400: #8460ab;
--color-purple-500: #6e4d92;
--color-purple-600: #584072;
--color-purple-700: #442f5b;
--color-purple-800: #322145;
--color-purple-900: #1a151f;
--color-red-25: #fffcfd;
--color-red-50: #fffafb;
--color-red-75: #fff7f9;
--color-red-100: #fcb1c2;
--color-red-200: #f288a1;
--color-red-300: #db5c76;
--color-red-400: #b02c46;
--color-red-500: #97152f;
--color-red-600: #7d0116;
--color-red-700: #6b0113;
--color-red-800: #5c040f;
--color-red-900: #241214;
--color-yellow-25: #fffdfa;
--color-yellow-50: #fffaf2;
--color-yellow-75: #fff6eb;
--color-yellow-100: #fae8d2;
--color-yellow-200: #f6dab9;
--color-yellow-300: #ffac4c;
--color-yellow-400: #d6731c;
--color-yellow-500: #c25b02;
--color-yellow-600: #8f4606;
--color-yellow-700: #7a3900;
--color-yellow-800: #612b01;
--color-yellow-900: #241a12;
--color-turquoise-50: #ecfeff;
--color-turquoise-100: #cffafe;
--color-turquoise-200: #a5f3fc;
--color-turquoise-300: #67e8f9;
--color-turquoise-400: #22d3ee;
--color-turquoise-500: #06b6d4;
--color-turquoise-600: #0891b2;
--color-turquoise-700: #0e7490;
--color-turquoise-800: #155e75;
--color-turquoise-900: #164e63;
--color-violet-50: #f5f3ff;
--color-violet-100: #ede9fe;
--color-violet-200: #ddd6fe;
--color-violet-300: #c4b5fd;
--color-violet-400: #a78bfa;
--color-violet-500: #8b5cf6;
--color-violet-600: #7c3aed;
--color-violet-700: #6d28d9;
--color-violet-800: #5b21b6;
--color-violet-900: #4c1d95;
--text-font-family-soehne: "Soehne";
--text-line-height-none: 0;
--text-line-height-16: 16px;
--text-line-height-18: 18px;
--text-line-height-20: 20px;
--text-weight-number-100: 100;
--text-weight-number-200: 200;
--text-weight-number-300: 300;
--text-weight-number-400: 400;
--text-weight-number-500: 500;
--text-weight-number-600: 600;
--text-weight-number-700: 700;
--text-weight-number-800: 800;
--text-weight-number-900: 900;
--text-weight-number-950: 950;
--shadow-2xl:
0px 1px 2px 0px rgba(22, 32, 37, 0.07),
0px 2px 4px 0px rgba(22, 32, 37, 0.07),
0px 4px 8px 0px rgba(22, 32, 37, 0.07),
0px 8px 16px 0px rgba(22, 32, 37, 0.07),
0px 16px 32px 0px rgba(22, 32, 37, 0.07),
0px 32px 64px 0px rgba(22, 32, 37, 0.07);
--shadow-xl:
0px 1px 2px 0px rgba(22, 32, 37, 0.07),
0px 2px 4px 0px rgba(22, 32, 37, 0.07),
0px 4px 8px 0px rgba(22, 32, 37, 0.07),
0px 8px 16px 0px rgba(22, 32, 37, 0.07),
0px 16px 32px 0px rgba(22, 32, 37, 0.07);
--shadow-lg:
0px 1px 2px 0px rgba(22, 32, 37, 0.08),
0px 2px 4px 0px rgba(22, 32, 37, 0.08),
0px 4px 8px 0px rgba(22, 32, 37, 0.08),
0px 8px 16px 0px rgba(22, 32, 37, 0.08);
--shadow-m:
0px 1px 2px 0px rgba(22, 32, 37, 0.08),
0px 2px 4px 0px rgba(22, 32, 37, 0.08),
0px 4px 8px 0px rgba(22, 32, 37, 0.08);
--shadow-s: 0px 1px 2px 0px rgba(22, 32, 37, 0.09), 0px 2px 4px 0px rgba(22, 32, 37, 0.09);
--shadow-xs: 0px 1px 2px 0px rgba(22, 32, 37, 0.09);
--text-font-size-xs: calc(12 / 16 * 1rem);
--text-font-size-sm: calc(14 / 16 * 1rem);
--text-font-size-base: calc(16 / 16 * 1rem);
--text-font-size-lg: calc(18 / 16 * 1rem);
--text-font-size-xl: calc(20 / 16 * 1rem);
--text-font-size-2xl: calc(22 / 16 * 1rem);
--text-font-size-3xl: calc(24 / 16 * 1rem);
--text-font-size-4xl: calc(26 / 16 * 1rem);
--text-font-size-5xl: calc(32 / 16 * 1rem);
--radius-none: 0;
--radius-size-4: 4px;
--radius-default: 8px;
--radius-focus-ring: 8px;
--radius-size-12: 12px;
--radius-full: 999px;
--spacing-none: 0;
--spacing-3xs: 2px;
--spacing-2xs: 4px;
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-base: 16px;
--spacing-lg: 20px;
--spacing-xl: 24px;
--spacing-2xl: 28px;
--spacing-3xl: 32px;
--spacing-4xl: 36px;
--spacing-5xl: 40px;
--spacing-6xl: 44px;
--spacing-7xl: 48px;
--spacing-8xl: 52px;
--spacing-9xl: 56px;
--spacing-10xl: 60px;
--spacing-11xl: 64px;
--spacing-12xl: 72px;
--spacing-13xl: 80px;
--spacing-14xl: 88px;
--spacing-15xl: 96px;
--spacing-16xl: 104px;
--spacing-17xl: 112px;
--font-family-heading: var(--text-font-family-soehne);
--font-family-body: var(--text-font-family-soehne);
--font-size-headline-xxl: var(--text-font-size-5xl);
--font-size-headline-xl: var(--text-font-size-3xl);
--font-size-headline-lg: var(--text-font-size-lg);
--font-size-headline-base: var(--text-font-size-base);
--font-size-headline-sm: var(--text-font-size-sm);
--font-size-body-xs: var(--text-font-size-xs);
--font-size-body-sm: var(--text-font-size-sm);
--font-size-body-base: var(--text-font-size-base);
--font-size-body-lg: var(--text-font-size-lg);
--font-size-body-xl: var(--text-font-size-3xl);
--font-size-caption: var(--text-font-size-xs);
--colors-accent-1-25: var(--color-yellow-25);
--colors-accent-1-50: var(--color-yellow-50);
--colors-accent-1-75: var(--color-yellow-75);
--colors-accent-1-100: var(--color-yellow-100);
--colors-accent-1-200: var(--color-yellow-200);
--colors-accent-1-300: var(--color-yellow-300);
--colors-accent-1-400: var(--color-yellow-400);
--colors-accent-1-500: var(--color-yellow-500);
--colors-accent-1-600: var(--color-yellow-600);
--colors-accent-1-700: var(--color-yellow-700);
--colors-accent-1-800: var(--color-yellow-800);
--colors-accent-1-900: var(--color-yellow-900);
--colors-accent-2-50: var(--color-violet-50);
--colors-accent-2-100: var(--color-violet-100);
--colors-accent-2-200: var(--color-violet-200);
--colors-accent-2-300: var(--color-violet-300);
--colors-accent-2-400: var(--color-violet-400);
--colors-accent-2-500: var(--color-violet-500);
--colors-accent-2-600: var(--color-violet-600);
--colors-accent-2-700: var(--color-violet-700);
--colors-accent-2-800: var(--color-violet-800);
--colors-accent-2-900: var(--color-violet-900);
--colors-success-25: var(--color-green-25);
--colors-success-50: var(--color-green-50);
--colors-success-75: var(--color-green-75);
--colors-success-100: var(--color-green-100);
--colors-success-200: var(--color-green-200);
--colors-success-300: var(--color-green-300);
--colors-success-400: var(--color-green-400);
--colors-success-500: var(--color-green-500);
--colors-success-600: var(--color-green-600);
--colors-success-700: var(--color-green-700);
--colors-success-800: var(--color-green-800);
--colors-success-900: var(--color-green-900);
--colors-info-25: var(--color-blue-gray-25);
--colors-info-50: var(--color-blue-50);
--colors-info-75: var(--color-blue-gray-75);
--colors-info-100: var(--color-blue-100);
--colors-info-200: var(--color-blue-200);
--colors-info-300: var(--color-blue-300);
--colors-info-400: var(--color-blue-400);
--colors-info-500: var(--color-blue-500);
--colors-info-600: var(--color-blue-600);
--colors-info-700: var(--color-blue-700);
--colors-info-800: var(--color-blue-800);
--colors-info-900: var(--color-blue-900);
--colors-warning-25: var(--color-yellow-25);
--colors-warning-50: var(--color-yellow-50);
--colors-warning-75: var(--color-yellow-75);
--colors-warning-100: var(--color-yellow-100);
--colors-warning-200: var(--color-yellow-200);
--colors-warning-300: var(--color-yellow-300);
--colors-warning-400: var(--color-yellow-400);
--colors-warning-500: var(--color-yellow-500);
--colors-warning-600: var(--color-yellow-600);
--colors-warning-700: var(--color-yellow-700);
--colors-warning-800: var(--color-yellow-800);
--colors-warning-900: var(--color-yellow-900);
--colors-error-25: var(--color-red-25);
--colors-error-50: var(--color-red-50);
--colors-error-75: var(--color-red-75);
--colors-error-100: var(--color-red-100);
--colors-error-200: var(--color-red-200);
--colors-error-300: var(--color-red-300);
--colors-error-400: var(--color-red-400);
--colors-error-500: var(--color-red-500);
--colors-error-600: var(--color-red-600);
--colors-error-700: var(--color-red-700);
--colors-error-800: var(--color-red-800);
--colors-error-900: var(--color-red-900);
}
:root .ops {
--colors-primary-25: var(--color-blue-25);
--colors-primary-50: var(--color-blue-50);
--colors-primary-75: var(--color-blue-75);
--colors-primary-100: var(--color-blue-100);
--colors-primary-200: var(--color-blue-200);
--colors-primary-300: var(--color-blue-300);
--colors-primary-400: var(--color-blue-400);
--colors-primary-500: var(--color-blue-500);
--colors-primary-600: var(--color-blue-600);
--colors-primary-700: var(--color-blue-700);
--colors-primary-800: var(--color-blue-800);
--colors-primary-900: var(--color-blue-900);
--colors-border-primary: var(--color-blue-gray-400);
--colors-border-secondary: var(--color-blue-gray-300);
--colors-border-tertiary: var(--color-blue-gray-200);
--colors-border-primary-dark: var(--color-blue-gray-600);
--colors-border-selected: var(--color-blue-600);
--colors-border-pickers: var(--color-blue-gray-500);
--colors-border-body: var(--color-yellow-gray-100);
--colors-border-disabled: var(--color-neutral-gray-300);
--colors-surface-primary-light: var(--color-neutral-gray-white);
--colors-surface-secondary: var(--color-blue-gray-50);
--colors-surface-secondary-bg: var(--color-yellow-gray-50);
--colors-surface-disabled-button: var(--color-neutral-gray-200);
--colors-surface-disabled-input: var(--color-neutral-gray-75);
--colors-surface-disabled-selected: var(--color-neutral-gray-500);
--colors-surface-error: var(--color-red-75);
--colors-surface-hover-light: var(--color-blue-gray-75);
--colors-surface-selected: var(--color-blue-gray-100);
--colors-surface-scrollbar: var(--color-blue-gray-400);
--colors-surface-toggle: var(--color-blue-gray-500);
--colors-surface-toggle-disabled: var(--color-neutral-gray-300);
--colors-surface-accent-yellow: var(--color-yellow-25);
--colors-surface-primary-dark: var(--color-blue-gray-700);
--colors-surface-hover-dark: var(--color-blue-gray-900);
--colors-surface-selected-dark-bg: var(--color-blue-400);
--colors-surface-navbar: var(--color-blue-gray-900);
--colors-surface-navbar-hover-item: var(--color-blue-gray-100);
--colors-surface-navbar-selected-item: var(--color-blue-gray-200);
--colors-surface-pressed-button: var(--color-blue-gray-100);
--colors-surface-selected-item: var(--color-blue-gray-200);
--colors-surface-selected-pickers: var(--color-blue-500);
--colors-surface-buttons-default-dark-bg: var(--color-blue-100);
--colors-surface-buttons-hover-dark-bg: var(--color-blue-50);
--colors-surface-buttons-pressed-dark-bg: var(--color-blue-25);
--colors-focus-ring-default: var(--color-blue-600);
--colors-focus-ring-error: var(--color-red-500);
--colors-overlay-default: var(--color-blue-gray-900);
--font-text-primary-dark: var(--color-blue-gray-950);
--font-text-primary-light: var(--color-blue-gray-25);
--font-text-secondary: var(--color-blue-gray-700);
--font-text-secondary-light: var(--color-blue-gray-400);
--font-text-tertiary: var(--color-blue-gray-600);
--font-text-header: var(--color-blue-gray-900);
--font-text-placeholder: var(--color-blue-gray-500);
--font-text-disabled-primary-button: var(--color-neutral-gray-500);
--font-text-disabled-secondary-button: var(--color-neutral-gray-400);
--font-text-error: var(--color-red-500);
--font-text-hover: var(--color-blue-700);
--font-text-selected: var(--color-blue-800);
--font-text-selected-dark-bg: var(--color-blue-400);
--font-text-link: var(--color-blue-500);
--font-text-success: var(--color-green-800);
--font-text-icons: var(--color-blue-gray-500);
--font-text-buttons-default-dark-bg: var(--color-blue-100);
--font-text-buttons-hover-dark-bg: var(--color-blue-50);
--font-text-buttons-pressed-dark-bg: var(--color-blue-25);
}
:root .platform {
--colors-primary-25: var(--color-green-25);
--colors-primary-50: var(--color-green-50);
--colors-primary-75: var(--color-green-75);
--colors-primary-100: var(--color-green-100);
--colors-primary-200: var(--color-green-200);
--colors-primary-300: var(--color-green-300);
--colors-primary-400: var(--color-green-400);
--colors-primary-500: var(--color-green-500);
--colors-primary-600: var(--color-green-600);
--colors-primary-700: var(--color-green-700);
--colors-primary-800: var(--color-green-800);
--colors-primary-900: var(--color-green-900);
--colors-border-primary: var(--color-green-gray-500);
--colors-border-secondary: var(--color-green-gray-400);
--colors-border-tertiary: var(--color-green-gray-200);
--colors-border-primary-dark: var(--color-green-gray-600);
--colors-border-selected: var(--color-green-800);
--colors-border-pickers: var(--color-green-gray-500);
--colors-border-body: var(--color-yellow-gray-100);
--colors-border-disabled: var(--color-neutral-gray-300);
--colors-surface-primary-light: var(--color-neutral-gray-white);
--colors-surface-secondary: var(--color-green-gray-50);
--colors-surface-secondary-bg: var(--color-yellow-gray-50);
--colors-surface-disabled-button: var(--color-neutral-gray-400);
--colors-surface-disabled-input: var(--color-neutral-gray-100);
--colors-surface-disabled-selected: var(--color-neutral-gray-500);
--colors-surface-error: var(--color-red-50);
--colors-surface-hover-light: var(--color-green-50);
--colors-surface-selected: var(--color-green-gray-100);
--colors-surface-scrollbar: var(--color-green-gray-400);
--colors-surface-toggle: var(--color-green-gray-400);
--colors-surface-toggle-disabled: var(--color-neutral-gray-300);
--colors-surface-accent-yellow: var(--color-yellow-25);
--colors-surface-primary-dark: var(--color-green-gray-800);
--colors-surface-hover-dark: var(--color-green-gray-900);
--colors-surface-selected-dark-bg: var(--color-green-400);
--colors-surface-navbar: var(--color-green-gray-900);
--colors-surface-navbar-hover-item: var(--color-green-gray-100);
--colors-surface-navbar-selected-item: var(--color-green-gray-300);
--colors-surface-pressed-button: var(--color-green-gray-100);
--colors-surface-selected-item: var(--color-blue-gray-200);
--colors-surface-selected-pickers: var(--color-green-500);
--colors-surface-buttons-default-dark-bg: var(--color-green-100);
--colors-surface-buttons-hover-dark-bg: var(--color-green-50);
--colors-surface-buttons-pressed-dark-bg: var(--color-green-25);
--colors-focus-ring-default: var(--color-green-600);
--colors-focus-ring-error: var(--color-red-600);
--colors-overlay-default: var(--color-green-gray-900);
--font-text-primary-dark: var(--color-green-gray-950);
--font-text-primary-light: var(--color-green-gray-25);
--font-text-secondary: var(--color-green-gray-500);
--font-text-secondary-light: var(--color-green-gray-400);
--font-text-tertiary: var(--color-green-gray-500);
--font-text-header: var(--color-green-gray-900);
--font-text-placeholder: var(--color-blue-gray-500);
--font-text-disabled-primary-button: var(--color-neutral-gray-500);
--font-text-disabled-secondary-button: var(--color-neutral-gray-400);
--font-text-error: var(--color-red-500);
--font-text-hover: var(--color-green-700);
--font-text-selected: var(--color-green-800);
--font-text-selected-dark-bg: var(--color-green-400);
--font-text-link: var(--color-green-700);
--font-text-success: var(--color-green-700);
--font-text-icons: var(--color-green-gray-500);
--font-text-buttons-default-dark-bg: var(--color-green-100);
--font-text-buttons-hover-dark-bg: var(--color-green-50);
--font-text-buttons-pressed-dark-bg: var(--color-green-25);
}
:root .register {
--colors-primary-25: var(--color-purple-25);
--colors-primary-50: var(--color-purple-50);
--colors-primary-75: var(--color-purple-75);
--colors-primary-100: var(--color-purple-100);
--colors-primary-200: var(--color-purple-200);
--colors-primary-300: var(--color-purple-300);
--colors-primary-400: var(--color-purple-400);
--colors-primary-500: var(--color-purple-500);
--colors-primary-600: var(--color-purple-600);
--colors-primary-700: var(--color-purple-700);
--colors-primary-800: var(--color-purple-800);
--colors-primary-900: var(--color-purple-900);
--colors-border-primary: var(--color-purple-gray-400);
--colors-border-secondary: var(--color-purple-gray-300);
--colors-border-tertiary: var(--color-purple-gray-200);
--colors-border-primary-dark: var(--color-purple-gray-600);
--colors-border-selected: var(--color-purple-600);
--colors-border-pickers: var(--color-purple-gray-500);
--colors-border-body: var(--color-yellow-gray-100);
--colors-border-disabled: var(--color-neutral-gray-300);
--colors-surface-primary-light: var(--color-neutral-gray-white);
--colors-surface-secondary: var(--color-purple-gray-50);
--colors-surface-secondary-bg: var(--color-yellow-gray-50);
--colors-surface-disabled-button: var(--color-neutral-gray-200);
--colors-surface-disabled-input: var(--color-neutral-gray-75);
--colors-surface-disabled-selected: var(--color-neutral-gray-500);
--colors-surface-error: var(--color-red-75);
--colors-surface-hover-light: var(--color-purple-gray-75);
--colors-surface-selected: var(--color-purple-gray-100);
--colors-surface-scrollbar: var(--color-purple-gray-400);
--colors-surface-toggle: var(--color-purple-gray-500);
--colors-surface-toggle-disabled: var(--color-neutral-gray-300);
--colors-surface-accent-yellow: var(--color-yellow-25);
--colors-surface-primary-dark: var(--color-purple-gray-700);
--colors-surface-hover-dark: var(--color-purple-gray-900);
--colors-surface-selected-dark-bg: var(--color-purple-400);
--colors-surface-navbar: var(--color-purple-gray-900);
--colors-surface-navbar-hover-item: var(--color-purple-gray-100);
--colors-surface-navbar-selected-item: var(--color-purple-gray-200);
--colors-surface-pressed-button: var(--color-purple-gray-100);
--colors-surface-selected-item: var(--color-purple-gray-200);
--colors-surface-selected-pickers: var(--color-purple-500);
--colors-surface-buttons-default-dark-bg: var(--color-purple-100);
--colors-surface-buttons-hover-dark-bg: var(--color-purple-50);
--colors-surface-buttons-pressed-dark-bg: var(--color-purple-25);
--colors-focus-ring-default: var(--color-purple-600);
--colors-focus-ring-error: var(--color-red-500);
--colors-overlay-default: var(--color-purple-gray-900);
--font-text-primary-dark: var(--color-purple-gray-950);
--font-text-primary-light: var(--color-purple-gray-25);
--font-text-secondary: var(--color-purple-gray-700);
--font-text-secondary-light: var(--color-purple-gray-400);
--font-text-tertiary: var(--color-purple-gray-600);
--font-text-header: var(--color-purple-gray-900);
--font-text-placeholder: var(--color-purple-gray-500);
--font-text-disabled-primary-button: var(--color-neutral-gray-500);
--font-text-disabled-secondary-button: var(--color-neutral-gray-400);
--font-text-error: var(--color-red-500);
--font-text-hover: var(--color-purple-700);
--font-text-selected: var(--color-purple-800);
--font-text-selected-dark-bg: var(--color-purple-400);
--font-text-link: var(--color-purple-500);
--font-text-success: var(--color-green-800);
--font-text-icons: var(--color-purple-gray-500);
--font-text-buttons-default-dark-bg: var(--color-purple-100);
--font-text-buttons-hover-dark-bg: var(--color-purple-50);
--font-text-buttons-pressed-dark-bg: var(--color-purple-25);
}
:root {
--gc-show-content-max-width: 764px;
--gc-app-frame-notice-max-width: 861px;
--z-index-gc-upload-zone-background: 0;
--z-index-gc-upload-zone-content: 1;
--z-index-gc-icon-badge: 10;
--z-index-gc-table-sticky-header: 15;
--z-index-gc-app-frame-overlay: 90;
--z-index-gc-tabs: 99;
--z-index-sidenav: 100;
--z-index-impersonation: 101;
--z-index-gc-date-picker-calendar: 900;
--z-index-gc-action-menu: 999;
--z-index-gc-flash-group: 9999;
}
/* css/design_system/global.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
button,
input[type=submit],
input[type=reset] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
[disabled] {
cursor: not-allowed;
}
#action-menu-target-container[hidden] {
display: none !important;
}
button[aria-disabled=true],
button[aria-readonly=true] {
background-color: var(--colors-surface-disabled-input);
color: var(--font-text-tertiary);
}
body.ops {
background: var(--colors-surface-primary-light);
}
& .gc-error {
color: var(--font-text-error);
}
.ops {
font-family: var(--font-family-body);
background: var(--colors-surface-primary-light);
}
html,
body {
height: 100%;
}
fieldset {
display: unset;
-webkit-margin-start: unset;
margin-inline-start: unset;
-webkit-margin-end: unset;
margin-inline-end: unset;
border: unset;
-webkit-padding-before: unset;
padding-block-start: unset;
-webkit-padding-end: unset;
padding-inline-end: unset;
-webkit-padding-after: unset;
padding-block-end: unset;
-webkit-padding-start: unset;
padding-inline-start: unset;
min-inline-size: unset;
width: 100%;
}
legend {
-webkit-padding-start: unset;
padding-inline-start: unset;
}
/* css/design_system/layout.css */
.gc-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.gc-cluster {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.gc-cluster > * {
flex-shrink: 0;
}
.gc-cluster:has([text-ellipsis]) {
min-width: 0;
flex-wrap: nowrap;
}
.gc-stretch-children > * {
align-self: stretch;
}
.gc-gap-none {
gap: 0;
}
.gc-gap-3xs {
gap: var(--spacing-3xs);
}
.gc-gap-2xs {
gap: var(--spacing-2xs);
}
.gc-gap-xs {
gap: var(--spacing-xs);
}
.gc-gap-sm {
gap: var(--spacing-sm);
}
.gc-gap-base {
gap: var(--spacing-base);
}
.gc-gap-lg {
gap: var(--spacing-lg);
}
.gc-gap-xl {
gap: var(--spacing-xl);
}
.gc-gap-2xl {
gap: var(--spacing-2xl);
}
.gc-gap-3xl {
gap: var(--spacing-3xl);
}
.gc-gap-4xl {
gap: var(--spacing-4xl);
}
.gc-gap-5xl {
gap: var(--spacing-5xl);
}
.gc-gap-6xl {
gap: var(--spacing-6xl);
}
.gc-gap-7xl {
gap: var(--spacing-7xl);
}
.gc-gap-8xl {
gap: var(--spacing-8xl);
}
.gc-gap-9xl {
gap: var(--spacing-9xl);
}
.gc-gap-10xl {
gap: var(--spacing-10xl);
}
.gc-gap-11xl {
gap: var(--spacing-11xl);
}
.gc-gap-12xl {
gap: var(--spacing-12xl);
}
.gc-gap-13xl {
gap: var(--spacing-13xl);
}
.gc-gap-14xl {
gap: var(--spacing-14xl);
}
.gc-gap-15xl {
gap: var(--spacing-15xl);
}
.gc-justify-start {
justify-content: flex-start;
}
.gc-justify-end {
justify-content: flex-end;
}
.gc-justify-center {
justify-content: center;
}
.gc-justify-left {
justify-content: left;
}
.gc-justify-right {
justify-content: right;
}
.gc-justify-normal {
justify-content: normal;
}
.gc-justify-between {
justify-content: space-between;
}
.gc-justify-around {
justify-content: space-around;
}
.gc-justify-evenly {
justify-content: space-evenly;
}
.gc-justify-stretch {
justify-content: stretch;
}
.gc-align-normal {
align-items: normal;
}
.gc-align-center {
align-items: center;
}
.gc-align-start {
align-items: flex-start;
}
.gc-align-end {
align-items: flex-end;
}
.gc-align-baseline {
align-items: baseline;
}
.gc-align-stretch {
align-items: stretch;
}
.gc-align-between {
align-items: space-between;
}
.gc-align-anchor-center {
align-items: anchor-center;
}
.gc-padding-none {
padding: 0;
}
.gc-padding-3xs {
padding: var(--spacing-3xs);
}
.gc-padding-2xs {
padding: var(--spacing-2xs);
}
.gc-padding-xs {
padding: var(--spacing-xs);
}
.gc-padding-sm {
padding: var(--spacing-sm);
}
.gc-padding-base {
padding: var(--spacing-base);
}
.gc-padding-lg {
padding: var(--spacing-lg);
}
.gc-padding-xl {
padding: var(--spacing-xl);
}
.gc-padding-2xl {
padding: var(--spacing-2xl);
}
.gc-padding-3xl {
padding: var(--spacing-3xl);
}
.gc-padding-4xl {
padding: var(--spacing-4xl);
}
.gc-padding-5xl {
padding: var(--spacing-5xl);
}
.gc-padding-6xl {
padding: var(--spacing-6xl);
}
.gc-padding-7xl {
padding: var(--spacing-7xl);
}
.gc-padding-8xl {
padding: var(--spacing-8xl);
}
.gc-padding-9xl {
padding: var(--spacing-9xl);
}
.gc-padding-10xl {
padding: var(--spacing-10xl);
}
.gc-padding-11xl {
padding: var(--spacing-11xl);
}
.gc-padding-12xl {
padding: var(--spacing-12xl);
}
.gc-padding-13xl {
padding: var(--spacing-13xl);
}
.gc-padding-14xl {
padding: var(--spacing-14xl);
}
.gc-padding-15xl {
padding: var(--spacing-15xl);
}
.gc-border-width-sm {
border: 1px solid;
}
.gc-border-width-md {
border: 2px solid;
}
.gc-border-width-lg {
border: 4px solid;
}
.gc-split-first > :first-child {
-webkit-margin-after: auto;
margin-block-end: auto;
}
.gc-split-last > :last-child {
-webkit-margin-before: auto;
margin-block-start: auto;
}
.gc-limited-width {
max-width: var(--gc-card-width);
}
.gc-show-content-max-width {
max-width: var(--gc-show-content-max-width);
width: 100%;
}
/* css/design_system/fonts.css */
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(/fonts/soehne-extralight-8b4e8005d026771b69a854c24060077c.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(/fonts/soehne-extralight-italic-ebe9b92116c752d56ecec607b06489ff.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/soehne-light-c510c846212c935c68a1d7f768b2d5c7.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(/fonts/soehne-light-italic-eecac2e2bdcd84f7b3224ace776b156f.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/soehne-regular-7c29eee92f767931090bc7cb6b41d1c8.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/soehne-regular-italic-be1e9a590c22377bb3f6be507b65147c.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/soehne-medium-fdbbedc7520c614881b1307e14bf68fe.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(/fonts/soehne-medium-italic-80edd6619ff763ef27b8911d0093dbc7.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/soehne-semibold-365b0483dc75267ecc9a61f2a1d2c59d.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(/fonts/soehne-semibold-italic-a75aec7dbcdacfa6d40839d55d967b19.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/soehne-bold-00f8cfe63b3d341ede256bdc0beacf7f.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(/fonts/soehne-bold-italic-294186c43f9cec514d8a68d846200783.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/soehne-extrabold-d3607b9d6a5780d8339d931abd506e98.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(/fonts/soehne-extrabold-italic-cc747f5a82af646a94695322fb3261e1.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(/fonts/soehne-black-5472d5372c6e402e069ac3250b67c19a.woff2?vsn=d) format("woff");
}
@font-face {
font-family: "Soehne";
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(/fonts/soehne-black-italic-7d07be2464ef5dd2edfaacefa645d516.woff2?vsn=d) format("woff");
}
/* css/design_system/utility.css */
.gc-hidden {
display: none;
}
.gc-visually-hidden {
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (min-width: 561px) {
.gc-visually-hidden-for-non-mobile {
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px
}
}
.gc-cursor-pointer {
cursor: pointer;
}
.gc-text-center {
text-align: center;
}
.gc-text-right {
text-align: right;
}
.gc-tabular-figures {
font-variant-numeric: lining-nums tabular-nums;
line-height: normal;
}
.gc-full-width {
width: 100%;
}
.gc-width-48 {
width: 48px;
}
.gc-width-136 {
width: 136px;
}
.gc-width-343 {
width: 343px;
}
.gc-min-width-0 {
min-width: 0;
}
.gc-min-width-460 {
min-width: 460px;
}
.gc-min-width-411 {
min-width: 411px;
}
.gc-min-width-300 {
min-width: 300px;
}
.gc-max-width-260 {
max-width: 260px;
}
.gc-max-width-438 {
max-width: 438px;
}
.gc-full-height {
height: 100%;
}
.gc-height-16 {
height: 16px;
}
.gc-height-24 {
height: 24px;
}
.gc-height-44 {
height: 44px;
}
.gc-height-92 {
height: 92px;
}
.gc-pointer-events-none {
pointer-events: none;
}
.gc-sidebar-placeholder {
width: 324px;
height: 100%;
flex-shrink: 0;
}
.gc-color-font-text-primary-dark {
color: var(--font-text-primary-dark);
}
.gc-color-font-text-secondary {
color: var(--font-text-secondary);
}
.gc-color-font-text-tertiary {
color: var(--font-text-tertiary);
}
.gc-color-font-text-icons {
color: var(--font-text-icons);
}
.gc-color-font-text-error {
color: var(--font-text-error);
}
.gc-font-weight-medium {
font-weight: var(--text-weight-number-500);
}
.gc-font-weight-semibold {
font-weight: var(--text-weight-number-600);
}
.gc-text-uppercase {
text-transform: uppercase;
}
.gc-text-capitalize {
text-transform: capitalize;
}
.table-drag-hover {
background-color: var(--colors-surface-selected);
padding: var(--spacing-xl) var(--spacing-7xl);
}
[text-ellipsis] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
flex-shrink: 1;
}
.gc-loader {
width: 48px;
height: 48px;
border: 5px solid var(--colors-surface-primary-light);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: loader-rotation 1s linear infinite;
}
@keyframes loader-rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 559px) {
.gc-full-width-in-mobile {
max-width: 100%;
width: 100%;
}
}
.gc-portal-target:has([data-phx-teleported]) > .gc-portal-target-skeleton {
display: none;
}
/* css/design_system/components/a.css */
.gc-a {
text-decoration: underline;
color: var(--font-text-link);
font-weight: var(--text-weight-number-400);
}
.gc-a:hover {
color: var(--font-text-hover);
}
.gc-a:active {
color: var(--font-text-selected);
}
.gc-a:focus:not(.gc-button) {
border-radius: var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
}
.gc-a.gc-button {
text-decoration: none;
}
.gc-a-lg {
font-size: 1.125rem;
line-height: 18px;
margin-bottom: -0.388em;
margin-top: -0.326em;
padding: 6px var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
}
.gc-a-base {
font-size: 1rem;
line-height: 16px;
margin-bottom: -0.388em;
margin-top: -0.326em;
padding: 5px var(--spacing-3xs) 7px var(--spacing-3xs);
}
.gc-a-sm {
font-size: 0.875rem;
line-height: 14px;
margin-bottom: -0.388em;
margin-top: -0.326em;
padding: var(--spacing-2xs) var(--spacing-3xs) 6px var(--spacing-3xs);
}
.gc-a-xs {
font-size: 0.75rem;
line-height: 9px;
margin-bottom: -0.388em;
margin-top: -0.326em;
padding: 3px var(--spacing-3xs) 5px var(--spacing-3xs);
}
.gc-back-link {
color: var(--font-text-tertiary);
text-decoration: none;
}
.gc-back-link .gc-icon {
color: var(--font-text-secondary);
}
.gc-back-link:hover,
.gc-back-link:active {
color: var(--font-text-selected);
}
.gc-back-link:hover .gc-icon, .gc-back-link:active .gc-icon {
color: var(--font-text-selected);
}
.gc-a-unstyled {
text-decoration: none;
color: inherit;
height: 24px;
}
/* css/design_system/components/action_menu.css */
.gc-action-menu [popovertarget] {
display: flex;
align-items: center;
height: var(--spacing-7xl);
border-radius: var(--radius-default);
color: var(--font-text-secondary);
justify-content: center;
width: var(--spacing-7xl);
}
.gc-action-menu [popovertarget]:hover {
background-color: var(--colors-surface-hover-light);
}
.gc-action-menu [popovertarget][disabled] {
color: var(--font-text-disabled-primary-button);
}
.gc-action-menu [popovertarget][data-show-border-for-trigger] {
outline: 1px solid var(--colors-border-primary);
outline-offset: -1px;
}
.gc-action-menu [popovertarget][data-show-border-for-trigger][disabled] {
outline: 1px solid var(--colors-border-secondary);
outline-offset: -1px;
}
.gc-action-menu [popovertarget][aria-expanded=true] {
outline: 1px solid var(--colors-border-selected);
outline-offset: -1px;
}
.gc-action-menu [popovertarget]:focus {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-action-menu .gc-action-menu-menu {
position: absolute;
top: 0;
left: 0;
width: -moz-max-content;
width: max-content;
border: 0;
background-color: transparent;
padding: 0;
}
.gc-action-menu .gc-action-menu-menu [role=menu] {
z-index: var(--z-index-gc-action-menu);
}
.gc-action-menu .gc-action-menu-menu [role=menu] .gc-action-menu-title,
.gc-action-menu .gc-action-menu-menu [role=menu] .gc-action-menu-info {
color: var(--font-text-secondary);
}
.gc-action-menu .gc-action-menu-menu [role=menu] .gc-action-menu-title {
padding: calc(var(--spacing-xs) + var(--spacing-2xs) + 1px) var(--spacing-sm) var(--spacing-xs);
}
.gc-action-menu .gc-action-menu-menu [role=menu] .gc-action-menu-info {
padding: var(--spacing-sm);
border-bottom: 1px solid var(--colors-border-primary);
}
.gc-action-menu .gc-action-menu-menu [role=menu] .gc-action-menu-info [role=title] {
color: var(--font-text-primary-dark);
font-family: var(--font-family-body);
font-weight: var(--text-weight-number-500);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div {
margin: var(--spacing-2xs) 0;
min-width: 200px;
max-width: 230px;
white-space: nowrap;
max-height: 500px;
overflow-x: hidden;
overflow-y: auto;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-primary);
background: var(--colors-surface-primary-light);
box-shadow: var(--shadow-s);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem] {
height: unset;
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem][disabled] {
color: var(--font-text-disabled-secondary-button);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem]:not([disabled]):hover {
background-color: var(--colors-surface-hover-light);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem] {
display: block;
text-align: left;
width: 100%;
padding: var(--spacing-base) var(--spacing-sm);
transition: background 50ms ease-in-out;
color: var(--font-text-primary-dark);
text-decoration: none;
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem] .gc-icon {
color: var(--font-text-secondary);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem]:not([disabled]):hover {
color: var(--font-text-selected);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem]:not([disabled]):focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
border-radius: var(--radius-default);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem]:not([disabled]):active {
color: var(--font-text-selected);
background-color: var(--colors-surface-selected);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem][disabled] {
color: var(--font-text-disabled-primary-button);
}
.gc-action-menu .gc-action-menu-menu [role=menu] > div [role=menuitem][disabled] .gc-icon {
color: var(--font-text-disabled-primary-button);
}
@keyframes animate-fade-in-wipe {
from {
opacity: 0;
display: none;
}
to {
opacity: 1;
display: block;
}
}
@keyframes animate-fade-out-wipe {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: collapse;
}
}
.gc-fade-in {
animation: animate-fade-in-wipe;
transition: opacity 50ms ease-out;
}
.gc-fade-out {
animation: animate-fade-out-wipe;
transition: opacity 50ms ease-out;
}
/* css/design_system/components/app_frame.css */
.gc-app-frame {
width: 100%;
height: 100vh;
background: var(--colors-surface-secondary-bg);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.gc-app-frame .gc-overlay {
position: absolute;
top: 0;
z-index: var(--z-index-gc-app-frame-overlay);
width: 100%;
height: 100%;
background-color: var(--colors-overlay-default);
opacity: 0;
visibility: collapse;
transition: opacity 150ms ease-out;
}
.gc-app-frame .gc-left-overlay {
left: 0;
}
.gc-app-frame .banner {
background-color: var(--colors-primary-100);
padding-inline: var(--spacing-base);
padding-block: var(--spacing-sm);
color: var(--font-text-primary-dark);
width: 100%;
}
.gc-app-frame .banner .banner-content {
display: flex;
height: 100%;
min-height: inherit;
}
.gc-app-frame .banner a {
color: var(--font-text-primary-dark);
font-weight: var(--text-weight-number-500);
flex-shrink: 0;
}
.gc-app-frame .gc-app-frame-nav-and-content-container {
height: 100%;
position: relative;
flex: 1;
display: flex;
min-height: 0;
}
.gc-app-frame .gc-left-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 387px;
height: 100%;
padding: var(--spacing-3xl) var(--spacing-none);
gap: var(--spacing-10xl);
flex-shrink: 0;
overflow-x: hidden;
overflow-y: auto;
background: var(--colors-surface-secondary-bg);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container {
padding-inline: var(--spacing-base) 5px;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container a {
display: flex;
flex-direction: column;
height: auto;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container button {
display: none;
color: var(--font-text-tertiary);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container button:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container .gc-app-switcher .gc-app-switcher-logo-link:not([aria-current]) svg.gc-app-frame-nav-logo g {
mix-blend-mode: luminosity;
opacity: 0.6;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container .gc-app-switcher .gc-app-switcher-logo-link:hover svg.gc-app-frame-nav-logo g {
mix-blend-mode: normal;
opacity: 0.6;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container .gc-app-switcher .gc-app-switcher-logo-link:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container .gc-app-switcher .gc-app-switcher-logo-link:focus-visible svg.gc-app-frame-nav-logo g {
mix-blend-mode: normal;
opacity: 0.6;
}
.gc-app-frame .gc-left-nav div > hr {
margin-inline: var(--spacing-base);
background-color: var(--colors-border-body);
border-color: var(--colors-border-body);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-groups-container {
width: 100%;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container {
color: var(--font-text-secondary);
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container li {
margin: 0;
padding: 0;
list-style: none;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container a {
display: flex;
height: var(--spacing-7xl);
padding: var(--spacing-base);
align-items: center;
gap: var(--spacing-xs);
font-size: var(--text-font-size-sm);
font-weight: var(--text-weight-number-500);
transition: all 150ms ease-out;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container a:hover {
background: var(--colors-surface-navbar-hover-item);
color: var(--font-text-hover);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container a:focus-visible {
border-radius: var(--radius-focus-ring) var(--radius-none) var(--radius-none) var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container a[aria-current=true] {
border-radius: var(--radius-default) var(--radius-none) var(--radius-none) var(--radius-default);
background: var(--colors-surface-navbar-selected-item);
color: var(--font-text-selected);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container a .gc-icon {
flex-shrink: 0;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container a .gc-app-frame-nav-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container {
display: flex;
justify-content: space-between;
height: var(--spacing-7xl);
padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-none);
align-items: center;
gap: var(--spacing-none);
font-size: var(--text-font-size-sm);
font-weight: var(--text-weight-number-500);
transition: all 150ms ease-out;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container[aria-current=true] {
border-radius: var(--radius-default) var(--radius-none) var(--radius-none) var(--radius-default);
background: var(--colors-surface-navbar-selected-item);
color: var(--font-text-selected);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container:hover {
border-radius: var(--radius-default) var(--radius-none) var(--radius-none) var(--radius-default);
background: var(--colors-surface-navbar-hover-item);
color: var(--font-text-hover);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container:has(a:focus-visible) {
border-radius: var(--radius-focus-ring) var(--radius-none) var(--radius-none) var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container:has(a:focus-visible) > a {
outline: none;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container > a {
width: 100%;
min-width: 0;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-nav-item-left {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu {
border-radius: 8px;
border: 1px solid var(--colors-border-secondary);
width: var(--spacing-3xl);
height: var(--spacing-3xl);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu .gc-button {
padding-inline: var(--spacing-xs);
width: 100%;
height: 100%;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu [popovertarget] .icon-up {
display: none;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu [popovertarget]:has(+ :popover-open) {
background: var(--colors-surface-selected);
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu [popovertarget]:has(+ :popover-open) .icon-down {
display: none;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu [popovertarget]:has(+ :popover-open) .icon-up {
display: block;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-links-container .gc-switcher-container .gc-action-menu [role=menuitem] {
font-size: var(--font-size-body-base);
font-weight: var(--text-weight-number-400);
line-height: var(--spacing-xl);
}
.gc-app-frame .gc-right-nav {
display: flex;
flex-direction: column;
position: relative;
width: auto;
height: 100%;
padding: var(--spacing-none) var(--spacing-none) var(--spacing-base) var(--spacing-none);
flex-shrink: 0;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-inner-container {
width: 620px;
max-width: 620px;
transition: width 250ms ease-out;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-header {
display: none;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-header button {
display: flex;
align-items: center;
justify-content: center;
width: var(--spacing-4xl);
height: var(--spacing-4xl);
color: var(--font-text-tertiary);
background-color: var(--colors-surface-primary-light);
border-radius: 50%;
box-shadow: var(--shadow-2xl);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-header button:hover {
color: var(--font-text-primary-dark);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content {
flex: 1;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--colors-surface-primary-light);
border: 1px solid var(--colors-border-body);
border-radius: var(--radius-size-12);
padding: 3px var(--spacing-none);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card.gc-right-sidebar-card-default {
height: 242px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header {
padding-inline: var(--spacing-base) 3px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header button {
padding-inline: var(--spacing-base);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header #right-sidebar-add-document-action-menu {
width: 100px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header #right-sidebar-add-document-action-menu [popovertarget] {
width: 100%;
color: var(--colors-primary-600);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header #right-sidebar-add-document-action-menu [popovertarget]:hover {
background-color: var(--color-blue-gray-75);
color: var(--colors-primary-700);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header #right-sidebar-add-document-action-menu [popovertarget]:focus-visible {
color: var(--colors-primary-600);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header #right-sidebar-add-document-action-menu [popovertarget]:active {
background: var(--colors-surface-pressed-button);
color: var(--colors-primary-800);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-header #right-sidebar-add-document-action-menu [popovertarget]:not(.phx-submit-loading)[disabled] {
background-color: transparent;
color: var(--font-text-disabled-primary-button);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row {
padding-inline: var(--spacing-base);
position: relative;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row textarea,
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row input[type=text] {
height: 34px;
min-height: 0;
padding: var(--spacing-3xs);
font-size: var(--font-size-body-sm);
line-height: 100%;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(input[type="checkbox"]) {
min-height: 60px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(input[type="checkbox"]) .gc-input label .gc-cluster {
align-items: start;
flex-wrap: nowrap;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(input[type="checkbox"]) .gc-input label .gc-cluster > .gc-stack {
flex-shrink: 1;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(input[type="checkbox"]) .gc-input input[type=checkbox] {
border-radius: var(--radius-size-4);
width: var(--spacing-base);
height: var(--spacing-base);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(input[type="checkbox"]) .gc-input .gc-icon {
color: var(--font-text-error);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(input[type="checkbox"]) .gc-input [data-main-text] {
overflow: hidden;
word-break: break-word;
max-height: 40px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row .gc-action-menu {
position: absolute;
right: var(--spacing-base);
top: 50%;
transform: translateY(-50%);
z-index: var(--z-index-gc-action-menu);
width: var(--spacing-6xl);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row .gc-action-menu [popovertarget] {
width: var(--spacing-6xl);
height: var(--spacing-6xl);
background: var(--colors-surface-primary-light);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row .gc-action-menu [popovertarget][aria-expanded=false]:hover {
border: 1px solid var(--colors-border-primary);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row .gc-action-menu .gc-with-tooltip:not([aria-expanded="true"]):hover > [role=tooltip] .gc-tooltip-up-arrow {
margin-right: 15px;
}
@media (pointer: fine) {
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:not(:hover):not(:focus-visible):not(:has(*:focus-visible)) .gc-action-menu {
opacity: 0;
}
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:hover:has(.gc-action-menu),
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:focus-visible,
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(.gc-action-menu button[popovertarget][aria-expanded="true"]) {
outline: none;
background: var(--colors-surface-hover-light);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:hover:has(.gc-action-menu) .gc-input:has(input[type="checkbox"]), .gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:focus-visible .gc-input:has(input[type="checkbox"]), .gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(.gc-action-menu button[popovertarget][aria-expanded="true"]) .gc-input:has(input[type="checkbox"]) {
background: var(--colors-surface-hover-light);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:hover:has(.gc-action-menu) .gc-action-menu, .gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:focus-visible .gc-action-menu, .gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(.gc-action-menu button[popovertarget][aria-expanded="true"]) .gc-action-menu {
opacity: 1;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:hover:has(.gc-action-menu) .gc-action-menu [popovertarget], .gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:focus-visible .gc-action-menu [popovertarget], .gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card .gc-right-sidebar-card-row:has(.gc-action-menu button[popovertarget][aria-expanded="true"]) .gc-action-menu [popovertarget] {
border: 1px solid var(--colors-border-primary);
background-color: var(--colors-surface-primary-light);
}
.gc-app-frame .gc-app-frame-content-column {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
}
.gc-app-frame .gc-app-frame-header-and-content-container {
position: relative;
transform: translateZ(0);
will-change: transform;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
padding-right: var(--spacing-base);
}
.gc-app-frame .gc-app-frame-notice {
padding-bottom: var(--spacing-lg);
max-width: var(--gc-app-frame-notice-max-width);
}
@media (min-width: 1024px) {
.gc-app-frame .gc-app-frame-content-column .gc-app-frame-header {
padding-block: var(--spacing-lg) var(--spacing-none);
}
}
.gc-app-frame .gc-content-and-right-sidebar-container {
display: flex;
flex-direction: row;
gap: var(--spacing-base);
flex: 1;
}
.gc-app-frame .gc-app-frame-header {
display: flex;
flex-direction: column;
padding: var(--spacing-3xl) var(--spacing-none) calc(var(--spacing-3xl) + var(--spacing-4xl)) var(--spacing-none);
color: var(--font-text-tertiary);
}
.gc-app-frame .gc-app-frame-header button {
color: var(--font-text-tertiary);
}
.gc-app-frame .gc-app-frame-header button.gc-app-frame-right-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: var(--spacing-4xl);
height: var(--spacing-4xl);
border-radius: 50%;
box-shadow: var(--shadow-2xl);
}
.gc-app-frame .gc-app-frame-header button:hover {
color: var(--font-text-primary-dark);
}
.gc-app-frame main {
flex: 1;
width: 100%;
min-width: 0;
transition: padding 250ms ease-out;
padding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-11xl) var(--spacing-3xl);
border-radius: var(--radius-size-12) var(--radius-size-12) var(--radius-none) var(--radius-none);
border-top: 1px solid var(--colors-border-body);
border-right: 1px solid var(--colors-border-body);
border-left: 1px solid var(--colors-border-body);
background: var(--colors-surface-primary-light);
}
.gc-app-frame main:focus-visible {
outline: none;
}
.gc-app-frame main .gc-main-content-header-title {
height: var(--spacing-7xl);
}
@media (max-width: 2559px) {
.gc-app-frame .gc-left-nav {
width: 237px;
}
}
@media (max-width: 1920px) {
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-inner-container {
width: clamp(340px, 340px + ((100vw - 1440px) * (620 - 340) / (1920 - 1440)), 620px);
}
}
@media (max-width: 1439px) {
.gc-app-frame main {
padding: var(--spacing-2xl) var(--spacing-base) var(--spacing-11xl) var(--spacing-base);
}
.gc-app-frame .gc-app-frame-header:has(.gc-app-frame-right-menu-toggle) {
padding-bottom: var(--spacing-3xl);
}
.gc-app-frame .gc-app-frame-right-menu-toggle[aria-expanded=true] {
visibility: hidden;
}
.gc-app-frame .gc-right-nav {
position: absolute;
top: 0;
right: 0;
z-index: var(--z-index-sidenav);
transform: translateX(100%);
transition: transform 150ms ease-out;
padding-top: 30px;
padding-right: 25px;
}
.gc-app-frame .gc-right-nav.open {
transform: translateX(0);
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-inner-container {
width: 340px;
max-width: 340px;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-header {
display: flex;
}
.gc-app-frame .gc-right-nav .gc-app-frame-right-nav-content .gc-right-sidebar-card {
box-shadow: var(--shadow-2xl);
}
}
@media (max-width: 1023px) {
.gc-app-frame .gc-app-frame-header-and-content-container {
padding-right: var(--spacing-none);
}
.gc-app-frame .gc-app-frame-notice {
padding-inline: var(--spacing-base);
padding-bottom: var(--spacing-base);
}
.gc-app-frame .gc-left-overlay.gc-visible {
opacity: 0.7;
visibility: visible;
transition: opacity 150ms ease-out;
}
.gc-app-frame main {
padding: var(--spacing-4xl) var(--spacing-none) var(--spacing-11xl) var(--spacing-3xl);
}
.gc-app-frame .gc-left-nav {
position: absolute;
z-index: var(--z-index-sidenav);
left: 0;
top: 0;
transition: width 150ms ease-out;
}
.gc-app-frame .gc-left-nav:not(.open) {
width: 0;
overflow: hidden;
border: none;
}
.gc-app-frame .gc-left-nav .gc-app-frame-nav-logo-container button {
display: block;
}
.gc-app-frame .gc-right-nav {
padding-top: 18px;
padding-right: 32px;
}
.gc-app-frame .gc-app-frame-header {
gap: var(--spacing-xl);
padding: var(--spacing-lg) var(--spacing-3xl) var(--spacing-base) var(--spacing-3xl);
}
}
@media (max-width: 559px) {
.gc-app-frame .gc-right-nav {
padding-top: 18px;
padding-right: 16px;
}
.gc-app-frame .gc-app-frame-header {
padding-inline: var(--spacing-base);
}
.gc-app-frame main {
padding: var(--spacing-4xl) var(--spacing-base) var(--spacing-11xl) var(--spacing-base);
}
}
/* css/design_system/components/avatar.css */
.gc-avatar-group .gc-avatar {
margin-left: -7px;
}
.gc-avatar-group .gc-avatar:first-child {
margin-left: 0;
}
.gc-avatar {
background: var(--colors-surface-secondary);
border: 1px solid var(--colors-border-selected);
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.gc-avatar > .gc-avatar-image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
}
.gc-avatar > .gc-avatar-image-wrapper > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.gc-avatar p {
color: var(--font-text-selected);
}
.gc-avatar.gc-user-team {
border: 1px solid var(--colors-border-body);
background: var(--colors-accent-1-50);
color: var(--colors-warning-700);
}
.gc-avatar.gc-user-team p {
color: var(--colors-warning-700);
}
.gc-avatar.gc-xs {
height: var(--spacing-2xl);
width: var(--spacing-2xl);
}
.gc-avatar.gc-xs p {
font-size: var(--spacing-sm);
}
.gc-avatar.gc-xs .gc-avatar-action {
display: none;
}
.gc-avatar.gc-sm {
height: var(--spacing-5xl);
width: var(--spacing-5xl);
}
.gc-avatar.gc-sm p {
font-size: var(--spacing-base);
}
.gc-avatar.gc-sm .gc-avatar-action {
display: none;
}
.gc-avatar.gc-lg {
width: var(--spacing-13xl);
height: var(--spacing-13xl);
}
.gc-avatar.gc-lg p {
font-size: var(--spacing-xl);
font-weight: 400;
}
.gc-avatar.gc-lg .gc-avatar-action {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0px;
right: -5px;
background-color: var(--colors-primary-800);
border-radius: 50%;
width: 30px;
height: 30px;
outline: none;
}
.gc-avatar.gc-lg .gc-avatar-action .gc-icon {
color: var(--font-text-primary-light);
}
/* css/design_system/components/badge.css */
.gc-badge {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: var(--radius-full);
font-weight: var(--text-weight-number-500);
color: var(--colors-surface-primary-light);
}
.gc-badge.gc-sm {
min-width: var(--spacing-xl);
height: var(--spacing-xl);
}
.gc-badge.gc-md {
min-width: var(--spacing-3xl);
height: var(--spacing-3xl);
}
.gc-badge.gc-neutral {
background-color: var(--colors-primary-800);
}
.gc-badge.gc-neutral:hover {
background-color: var(--colors-primary-900);
}
.gc-badge.gc-important {
background-color: var(--colors-primary-600);
}
.gc-badge.gc-important:hover {
background-color: var(--colors-primary-700);
}
.gc-badge.gc-danger {
background-color: var(--colors-error-500);
}
.gc-badge.gc-danger:hover {
background-color: var(--colors-error-600);
}
/* css/design_system/components/blank_form_frame.css */
.gc-blank-form-frame {
background: var(--colors-surface-secondary-bg);
display: flex;
flex-direction: column;
height: 100%;
padding-block: var(--spacing-5xl);
padding-inline: var(--spacing-11xl);
width: 100%;
}
.gc-blank-form-frame > .gc-center {
height: 100%;
justify-content: center;
}
.gc-blank-form-frame main {
background-color: var(--colors-surface-primary-light);
border: 1px solid var(--colors-border-body);
border-radius: var(--radius-default);
box-shadow: var(--shadow-m);
padding: var(--spacing-11xl);
width: 544px;
}
.gc-blank-form-frame .gc-blank-form-frame-spacer {
height: 13px;
}
@media (max-width: 1439px) {
.gc-blank-form-frame {
padding-inline: 32px
}
}
@media (max-width: 743px) {
.gc-blank-form-frame {
padding-inline: 32px
}
.gc-blank-form-frame main {
padding: var(--spacing-11xl);
width: 496px;
}
}
@media (max-width: 560px) {
.gc-blank-form-frame {
background-color: var(--colors-surface-primary-light);
padding-inline: var(--spacing-base);
padding-bottom: 0px
}
.gc-blank-form-frame main {
border: none;
box-shadow: none;
height: 100%;
padding: 0;
width: 100%;
}
.gc-blank-form-frame header {
display: none;
}
.gc-blank-form-frame > .gc-center {
height: 100%;
width: 100%;
}
.gc-blank-form-frame .gc-blank-form-frame-spacer {
display: none;
}
}
/* css/design_system/components/box.css */
.gc-box {
border-color: var(--brand-500);
}
.gc-box.gc-box-primary {
padding: var(--spacing-xl) var(--spacing-base);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-primary);
}
.gc-box.gc-box-secondary {
padding: var(--spacing-xl) var(--spacing-base);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
}
.gc-box.gc-box-tertiary {
padding: var(--spacing-3xl) var(--spacing-xl);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-tertiary);
background-color: var(--colors-surface-secondary);
}
/* css/design_system/components/breadcrumbs.css */
.gc-breadcrumbs ol {
list-style: none;
padding: 0;
margin: 0;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb-dropdown {
display: flex;
align-items: center;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb-dropdown .gc-action-menu button {
border: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
box-shadow: var(--shadow-xs);
}
.gc-breadcrumbs .gc-breadcrumbs-crumb-dropdown .gc-action-menu button:not([disabled]):hover {
background-color: var(--colors-surface-hover-light);
color: var(--font-text-selected);
}
.gc-breadcrumbs .gc-breadcrumbs-crumb-dropdown .gc-action-menu [role=menu] {
white-space: wrap;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb-dropdown .gc-action-menu [role=menu] [role=menuitem] .gc-cluster > * {
flex-shrink: unset;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb {
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
height: var(--spacing-lg);
}
.gc-breadcrumbs .gc-breadcrumbs-crumb p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb p:hover {
max-width: none;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb .gc-breadcrumbs-crumb-focus-ring {
display: none;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb:not(:last-child) a {
color: var(--font-text-tertiary);
}
.gc-breadcrumbs .gc-breadcrumbs-crumb:not(:last-child) a:hover {
color: var(--font-text-link);
}
.gc-breadcrumbs .gc-breadcrumbs-crumb:not(:last-child) a:focus-visible {
color: var(--font-text-link);
outline: none;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb:not(:last-child) a:active {
color: var(--font-text-selected);
}
.gc-breadcrumbs .gc-breadcrumbs-crumb:not(:last-child):has(a:focus-visible) {
border-radius: var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 4px;
}
.gc-breadcrumbs .gc-breadcrumbs-crumb:last-child a {
color: var(--font-text-secondary);
text-decoration: none;
pointer-events: none;
}
.gc-breadcrumbs .gc-breadcrumbs-divider {
display: flex;
align-items: center;
}
.gc-breadcrumbs .gc-breadcrumbs-divider svg {
color: var(--font-text-secondary-light);
}
/* css/design_system/components/button.css */
.gc-button {
display: flex;
height: var(--spacing-7xl);
padding-inline: var(--spacing-xl);
}
.gc-button.gc-button-small {
height: var(--spacing-6xl);
}
.gc-button:has(.gc-icon) {
padding-inline: var(--spacing-lg);
}
.gc-button {
justify-content: center;
align-items: center;
gap: var(--spacing-xs);
font-family: var(--font-family-body);
font-weight: var(--text-weight-number-500);
color: var(--font-text-primary-light);
border-radius: var(--radius-default);
border-width: 2px;
border-style: solid;
transition: background 150ms ease-out;
}
.gc-button.gc-primary {
border-color: var(--colors-primary-600);
background-color: var(--colors-primary-600);
color: var(--font-text-primary-light);
}
.gc-button.gc-primary:hover {
border-color: var(--colors-primary-700);
background-color: var(--colors-primary-700);
}
.gc-button.gc-primary:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-button.gc-primary:active {
border-color: var(--colors-primary-800);
background-color: var(--colors-primary-800);
}
.gc-button.gc-primary:not(.phx-submit-loading)[disabled] {
border-color: transparent;
background-color: var(--colors-surface-disabled-button);
color: var(--font-text-disabled-primary-button);
}
.gc-button.gc-secondary {
border-color: var(--colors-primary-700);
color: var(--colors-primary-700);
}
.gc-button.gc-secondary:hover {
border-color: solid var(--colors-primary-600);
background: var(--colors-surface-hover-light);
color: var(--colors-primary-600);
}
.gc-button.gc-secondary:focus-visible {
border-color: solid var(--colors-primary-600);
color: var(--colors-primary-600);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-button.gc-secondary:active {
border-color: var(--colors-primary-700);
background: var(--colors-surface-pressed-button);
color: var(--colors-primary-700);
}
.gc-button.gc-secondary:not(.phx-submit-loading)[disabled] {
border-color: var(--colors-border-disabled);
background-color: transparent;
color: var(--font-text-disabled-primary-button);
}
.gc-button.gc-ghost {
border: none;
color: var(--colors-primary-600);
}
.gc-button.gc-ghost:hover {
background-color: var(--colors-surface-hover-light);
color: var(--colors-primary-700);
}
.gc-button.gc-ghost:focus-visible {
color: var(--colors-primary-600);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-button.gc-ghost:active {
background: var(--colors-surface-pressed-button);
color: var(--colors-primary-800);
}
.gc-button.gc-ghost:not(.phx-submit-loading)[disabled] {
background-color: transparent;
color: var(--font-text-disabled-primary-button);
}
.gc-button.gc-compact {
padding-inline: 0;
}
.gc-button.gc-compact:hover,
.gc-button.gc-compact:active {
background-color: var(--color-neutral-gray-white);
}
.gc-button.gc-accordion {
padding: 0;
gap: var(--spacing-2xs);
border: none;
background: transparent;
color: var(--font-text-tertiary);
font-weight: var(--text-weight-number-600);
}
.gc-button.gc-accordion .gc-icon {
transition: transform 0.3s ease;
}
.gc-button.gc-accordion[aria-expanded=true] {
color: var(--font-text-primary-dark);
}
.gc-button.gc-accordion[aria-expanded=true] .gc-icon {
transform: rotate(180deg);
}
.gc-button.gc-accordion:not([aria-expanded="true"]):hover {
color: var(--font-text-secondary);
}
.gc-button.gc-accordion:focus-visible {
border-radius: var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-button.gc-accordion:active {
color: var(--font-text-primary-dark);
}
.gc-button.gc-accordion[disabled] {
color: var(--font-text-disabled-primary-button);
}
.gc-button.gc-danger {
border-color: var(--colors-error-500);
background-color: var(--colors-error-500);
color: var(--font-text-primary-light);
}
.gc-button.gc-danger:hover {
border-color: var(--colors-error-600);
background-color: var(--colors-error-600);
}
.gc-button.gc-danger:focus-visible {
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: 2px;
}
.gc-button.gc-danger:active {
border-color: var(--colors-error-700);
background-color: var(--colors-error-700);
}
.gc-button.gc-danger:not(.phx-submit-loading)[disabled] {
border: transparent;
background-color: var(--colors-surface-disabled-button);
color: var(--font-text-disabled-primary-button);
}
.gc-button.gc-danger-ghost {
border: none;
color: var(--colors-error-500);
}
.gc-button.gc-danger-ghost:hover {
background-color: var(--colors-error-50);
}
.gc-button.gc-danger-ghost:focus-visible {
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: 2px;
border-radius: var(--radius-focus-ring);
}
.gc-button.gc-danger-ghost:active {
background-color: var(--colors-error-75);
color: var(--colors-error-600);
}
.gc-button.gc-danger-ghost:not(.phx-submit-loading)[disabled] {
color: var(--font-text-disabled-primary-button);
}
/* css/design_system/components/button_group.css */
.gc-button-group {
width: 100%;
}
.gc-button-group button,
.gc-button-group a {
display: flex;
height: var(--spacing-6xl);
padding: var(--spacing-none) var(--spacing-base);
justify-content: center;
align-items: center;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-tertiary);
color: var(--font-text-secondary);
font-weight: var(--text-weight-number-500);
cursor: pointer;
}
.gc-button-group button:hover, .gc-button-group a:hover {
border: 1px solid var(--colors-border-tertiary);
background: var(--color-blue-gray-75);
}
.gc-button-group button:focus-visible, .gc-button-group a:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-button-group button[data-active=true], .gc-button-group a[data-active=true] {
border: 1px solid var(--colors-border-primary);
background: var(--color-blue-gray-75);
color: var(--font-text-primary-dark);
}
.gc-button-group button[disabled], .gc-button-group a[disabled] {
border: 1px solid var(--colors-border-tertiary);
color: var(--font-text-disabled-primary-button);
background: transparent;
}
/* css/design_system/components/center.css */
.gc-center {
box-sizing: content-box;
margin-inline: auto;
max-inline-size: 60ch;
display: flex;
flex-direction: column;
align-items: center;
}
/* css/design_system/components/chip.css */
.gc-chip {
display: flex;
align-items: center;
border-radius: var(--radius-full);
font-weight: var(--text-weight-number-500);
flex-shrink: 0;
}
.gc-chip .gc-icon {
display: grid;
place-items: center;
}
.gc-chip.gc-lg {
font-size: var(--text-font-size-lg);
height: var(--spacing-7xl);
padding-inline: var(--spacing-lg);
gap: var(--spacing-xs);
}
.gc-chip.gc-md {
font-size: var(--text-font-size-base);
height: var(--spacing-3xl);
padding-inline: var(--spacing-sm);
gap: var(--spacing-2xs);
}
.gc-chip.gc-sm {
font-size: var(--text-font-size-sm);
height: var(--spacing-xl);
padding-inline: var(--spacing-xs);
gap: var(--spacing-2xs);
}
.gc-chip .gc-chip-close span::before {
display: grid;
place-items: center;
}
.gc-chip {
transition: var(-button-like-transition);
}
.gc-chip.gc-outline.gc-neutral {
background-color: var(--colors-surface-primary-light);
border: 1px solid var(--colors-border-primary);
color: var(--font-text-secondary);
}
.gc-chip.gc-outline.gc-neutral .gc-icon {
color: var(--font-text-tertiary);
}
.gc-chip.gc-outline.gc-neutral .gc-chip-close {
color: var(--font-text-secondary);
}
.gc-chip.gc-outline.gc-neutral:has(.gc-a):hover {
background-color: var(--colors-surface-secondary);
border-color: var(--colors-border-primary-dark);
}
.gc-chip.gc-outline.gc-neutral:has(.gc-a):hover .gc-icon {
color: var(--font-text-secondary);
}
.gc-chip.gc-outline.gc-neutral:has(.gc-a):hover .gc-a,
.gc-chip.gc-outline.gc-neutral:has(.gc-a):hover .gc-chip-close {
color: var(--font-text-primary-dark);
}
.gc-chip.gc-outline.gc-important {
background-color: var(--colors-primary-50);
border: 1px solid var(--colors-primary-400);
color: var(--colors-primary-600);
}
.gc-chip.gc-outline.gc-important .gc-icon {
color: var(--colors-primary-600);
}
.gc-chip.gc-outline.gc-important:has(.gc-a):hover {
background-color: var(--colors-primary-75);
border-color: var(--colors-primary-500);
}
.gc-chip.gc-outline.gc-important:has(.gc-a):hover .gc-a,
.gc-chip.gc-outline.gc-important:has(.gc-a):hover .gc-icon {
color: var(--colors-primary-700);
}
.gc-chip.gc-outline.gc-success {
background-color: var(--colors-success-50);
border: 1px solid var(--colors-success-400);
color: var(--colors-success-600);
}
.gc-chip.gc-outline.gc-success .gc-icon {
color: var(--colors-success-600);
}
.gc-chip.gc-outline.gc-success:has(.gc-a):hover {
background-color: var(--colors-success-75);
border-color: var(--colors-success-500);
}
.gc-chip.gc-outline.gc-success:has(.gc-a):hover .gc-a,
.gc-chip.gc-outline.gc-success:has(.gc-a):hover .gc-icon {
color: var(--colors-success-700);
}
.gc-chip.gc-outline.gc-danger {
background-color: var(--colors-error-25);
border: 1px solid var(--colors-error-400);
color: var(--colors-error-500);
}
.gc-chip.gc-outline.gc-danger .gc-icon {
color: var(--colors-error-500);
}
.gc-chip.gc-outline.gc-danger:has(.gc-a):hover {
background-color: var(--colors-error-75);
border-color: var(--colors-error-500);
}
.gc-chip.gc-outline.gc-danger:has(.gc-a):hover .gc-a,
.gc-chip.gc-outline.gc-danger:has(.gc-a):hover .gc-icon {
color: var(--colors-error-600);
}
.gc-chip.gc-solid .gc-icon {
color: var(--font-text-primary-light);
}
.gc-chip.gc-solid .gc-a:hover {
color: var(--font-text-primary-light);
}
.gc-chip.gc-solid.gc-neutral {
background-color: var(--colors-surface-primary-dark);
color: var(--font-text-primary-light);
}
.gc-chip.gc-solid.gc-neutral:hover {
background-color: var(--colors-surface-hover-dark);
}
.gc-chip.gc-solid.gc-important {
background-color: var(--colors-primary-600);
color: var(--font-text-primary-light);
}
.gc-chip.gc-solid.gc-important:hover {
background-color: var(--colors-primary-700);
}
.gc-chip.gc-solid.gc-danger {
background-color: var(--colors-error-500);
color: var(--font-text-primary-light);
}
.gc-chip.gc-solid.gc-danger:hover {
background-color: var(--colors-error-600);
}
.gc-chip a {
color: inherit;
text-decoration: none;
font-weight: var(--text-weight-number-500);
padding: 0;
}
.gc-chip .gc-chip-close {
background: none;
border: none;
cursor: pointer;
display: grid;
place-items: center;
color: inherit;
font-weight: var(--text-weight-number-500);
padding: 0;
}
a:has(.gc-chip) {
text-decoration: none;
cursor: pointer;
}
& .gc-with-tooltip {
position: relative;
justify-content: center;
}
& .gc-with-tooltip > [role=tooltip] {
display: none;
}
& .gc-with-tooltip:hover > [role=tooltip],
& .gc-with-tooltip:focus > [role=tooltip] {
display: flex;
position: absolute;
bottom: 105%;
width: 240px;
flex-direction: column;
align-items: center;
}
& .gc-with-tooltip:hover > [role=tooltip] .gc-tooltip-row, & .gc-with-tooltip:focus > [role=tooltip] .gc-tooltip-row {
align-items: flex-start;
align-self: stretch;
background: var(--colors-surface-primary-dark);
border-radius: var(--radius-default, 4px);
display: flex;
padding: var(--spacing-xs);
}
& .gc-with-tooltip:hover > [role=tooltip] .gc-tooltip-row p, & .gc-with-tooltip:focus > [role=tooltip] .gc-tooltip-row p {
align-self: stretch;
color: var(--font-text-primary-light);
font-weight: var(--text-weight-number-400);
text-align: center;
width: 224px;
}
& .gc-with-tooltip:hover > [role=tooltip] .gc-arrow-down, & .gc-with-tooltip:focus > [role=tooltip] .gc-arrow-down {
border-left: 6.5px solid transparent;
border-right: 6.5px solid transparent;
border-top: var(--size-6) solid var(--colors-surface-primary-dark);
height: 0;
width: 0;
}
/* css/design_system/components/condensed_card.css */
.gc-condensed-card {
padding: var(--spacing-sm);
border-radius: var(--radius-default);
background: var(--colors-surface-secondary);
color: var(--font-text-primary-dark);
}
.gc-condensed-card .gc-icon {
color: var(--font-text-secondary);
}
.gc-condensed-card .gc-condensed-card-close .gc-icon {
color: var(--font-text-tertiary);
}
.gc-condensed-card .gc-condensed-card-content {
overflow: hidden;
white-space: nowrap;
height: var(--spacing-xl);
}
.gc-condensed-card .gc-condensed-card-content .gc-row {
overflow: hidden;
white-space: nowrap;
height: 100%;
}
.gc-condensed-card .gc-condensed-card-content .gc-icon {
flex-shrink: 0;
}
.gc-condensed-card .gc-condensed-card-content p:first-child {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-condensed-card .gc-condensed-card-content p:last-child {
flex-shrink: 0;
}
/* css/design_system/components/document_preview.css */
.gc-document-preview {
background: var(--colors-surface-primary-dark);
margin: var(--spacing-xl);
padding: 0;
width: auto;
height: auto;
border: none;
}
.gc-document-preview:focus-visible {
outline: none;
}
.gc-document-preview::backdrop {
background-color: var(--colors-surface-primary-dark);
opacity: 0;
transition: opacity 150ms ease-out;
}
.gc-document-preview[open]::backdrop {
opacity: 1;
transition: opacity 150ms ease-out;
}
.gc-document-preview .gc-document-preview-inner-wrapper {
width: 100%;
height: 100%;
gap: 47px;
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-file-name {
color: var(--font-text-primary-light);
font-weight: var(--text-weight-number-500);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-file-info {
color: var(--font-text-secondary-light);
}
.gc-document-preview .gc-document-preview-inner-wrapper button {
color: var(--font-text-primary-light);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-action-info {
color: var(--font-text-primary-light);
width: -moz-fit-content;
width: fit-content;
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-download-button,
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-nav-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--spacing-2xs);
color: var(--font-text-buttons-default-dark-bg);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-download-button:hover, .gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-nav-button:hover {
color: var(--font-text-buttons-hover-dark-bg);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-download-button:active, .gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-nav-button:active {
color: var(--font-text-buttons-pressed-dark-bg);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-download-button[disabled], .gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-nav-button[disabled] {
color: var(--font-text-disabled-secondary-button);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-download-button:focus-visible, .gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-nav-button:focus-visible {
outline: none;
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-download-button {
width: -moz-fit-content;
width: fit-content;
height: var(--spacing-6xl);
padding: 0;
border: none;
background: transparent;
cursor: pointer;
font: inherit;
font-weight: var(--text-weight-number-500);
text-decoration: none;
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-nav-button {
height: var(--spacing-7xl);
padding: 6px 0px;
}
.gc-document-preview .gc-document-preview-content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
position: relative;
}
.gc-document-preview .gc-document-preview-content .gc-document-preview-no-preview {
width: 100%;
max-width: 510px;
color: var(--font-text-primary-light);
font-weight: var(--text-weight-number-500);
}
.gc-document-preview .gc-document-preview-content .gc-document-preview-no-preview .gc-document-preview-download-button {
display: flex;
flex-direction: row;
height: var(--spacing-7xl);
padding: var(--spacing-none) var(--spacing-lg) var(--spacing-none) var(--spacing-base);
justify-content: center;
align-items: center;
gap: var(--spacing-xs);
border-radius: var(--radius-default);
border: 2px solid var(--font-text-buttons-default-dark-bg);
color: var(--font-text-buttons-default-dark-bg);
}
.gc-document-preview .gc-document-preview-content .gc-document-preview-no-preview .gc-document-preview-download-button:hover {
border: 2px solid var(--font-text-buttons-hover-dark-bg);
color: var(--font-text-buttons-hover-dark-bg);
}
.gc-document-preview .gc-document-preview-content .gc-document-preview-no-preview .gc-document-preview-download-button:active {
border: 2px solid var(--font-text-buttons-pressed-dark-bg);
color: var(--font-text-buttons-pressed-dark-bg);
}
.gc-document-preview .gc-document-preview-content .gc-document-preview-no-preview .gc-document-preview-download-button[disabled] {
border: 2px solid var(--font-text-disabled-secondary-button);
color: var(--font-text-disabled-secondary-button);
}
.gc-document-preview .gc-document-preview-content embed {
width: 100%;
height: 100%;
}
.gc-document-preview .gc-document-preview-content img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.gc-document-preview .gc-document-preview-content .gc-loader-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
@media (max-width: 1439px) {
.gc-document-preview .gc-document-preview-inner-wrapper {
gap: var(--spacing-10xl);
}
}
@media (max-width: 1023px) {
.gc-document-preview .gc-document-preview-inner-wrapper {
gap: 67px;
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-header {
align-items: start;
}
}
@media (max-width: 743px) {
.gc-document-preview .gc-document-preview-inner-wrapper {
gap: var(--spacing-none);
}
}
@media (max-width: 559px) {
.gc-document-preview .gc-document-preview-inner-wrapper {
gap: 15px;
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-header-and-nav-container {
gap: var(--spacing-2xl);
}
.gc-document-preview .gc-document-preview-inner-wrapper .gc-document-preview-no-preview .gc-document-preview-download-button {
width: 100%;
}
}
/* css/design_system/components/drag_drop.css */
.gc-draggable {
cursor: move;
cursor: grab;
}
.gc-draggable:active {
cursor: grabbing;
}
.gc-dropzone {
min-height: 2rem;
position: relative;
}
.gc-document-dropzone {
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-tertiary);
}
.gc-document-dropzone .gc-document-dropzone-header {
border-top-left-radius: var(--radius-default);
border-top-right-radius: var(--radius-default);
background-color: var(--colors-surface-primary-light);
border-bottom: 1px solid var(--colors-border-tertiary);
height: var(--size-40);
padding: var(--spacing-base) var(--spacing-sm);
}
.gc-document-dropzone .gc-document-dropzone-header p {
color: var(--font-text-tertiary);
}
.gc-document-dropzone .gc-condensed-card {
width: 100%;
border-radius: 0;
}
.gc-sortable-ghost {
opacity: 0.4;
background-color: var(--gc-color-bg-surface);
}
.gc-sortable-chosen {
opacity: 0.8;
}
.gc-sortable-drag {
opacity: 1;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.gc-dropzone-placeholder {
width: 100%;
background-color: var(--colors-surface-selected);
border-radius: var(--gc-radius-base);
padding: var(--gc-space-lg);
text-align: center;
}
.gc-drag-empty {
padding: var(--gc-space-xl);
text-align: center;
color: var(--gc-color-font-text-tertiary);
background-color: var(--colors-surface-secondary);
border: 1px solid var(--gc-color-border-light);
border-radius: var(--gc-radius-base);
}
.gc-drag-hover {
background-color: var(--gc-color-bg-info-light);
padding: var(--gc-space-xl);
text-align: center;
border-radius: var(--gc-radius-base);
}
/* css/design_system/components/info_section.css */
.gc-info-section {
width: 100%;
}
.gc-info-section h1 {
color: var(--font-text-secondary);
}
.gc-info-section h3 {
color: var(--font-text-secondary);
font-weight: var(--text-weight-number-500);
}
.gc-info-section .gc-info-section-title-container-with-min-height {
min-height: var(--spacing-6xl);
}
.gc-info-section dl {
display: grid;
grid-template-columns: 144px 1fr;
gap: var(--spacing-xl) var(--spacing-12xl);
}
.gc-info-section dt {
grid-column: 1;
color: var(--font-text-tertiary);
align-self: start;
}
.gc-info-section dd {
grid-column: 2;
color: var(--font-text-primary-dark);
}
.gc-info-section dd:has(a) {
display: flex;
align-items: center;
}
.gc-info-section dd:has(a) a {
text-decoration: none;
color: var(--font-text-link);
}
.gc-info-section .gc-info-section-description-text-ellipsis {
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.gc-info-section .gc-info-section-empty-state {
width: 100%;
color: var(--font-text-primary-dark);
}
@media (max-width: 561px) {
.gc-info-section dl {
display: block;
}
.gc-info-section dl dt {
padding-top: var(--spacing-2xl);
}
.gc-info-section dl dt:first-of-type {
padding-top: 0;
}
.gc-info-section dl dd {
padding-top: var(--spacing-base);
}
}
/* css/design_system/components/line_item_card.css */
.gc-line-item-card {
position: relative;
padding: var(--spacing-xs) var(--spacing-base) var(--spacing-5xl) var(--spacing-base);
}
.gc-line-item-card .gc-input {
background: transparent;
}
.gc-line-item-card.gc-line-item-card-surface-grey {
background: var(--colors-surface-secondary);
}
.gc-line-item-card.gc-line-item-card-surface-white {
background: var(--colors-surface-primary-light);
}
.gc-line-item-card .gc-line-item-card-title {
flex-shrink: 1;
margin-top: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--font-text-secondary);
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper {
width: auto;
margin-left: auto;
}
.gc-line-item-card .gc-input {
width: auto;
}
.gc-line-item-card .gc-input .gc-input-wrapper input {
width: 88px;
}
.gc-line-item-card .gc-line-item-card-close-button {
margin-top: 14px;
}
.gc-line-item-card .gc-line-item-card-close-button .gc-icon {
color: var(--font-text-tertiary);
}
@media (max-width: 559px) {
.gc-line-item-card {
gap: var(--spacing-xs)
}
.gc-line-item-card.gc-row {
flex-wrap: wrap;
}
.gc-line-item-card .gc-line-item-card-title {
margin-top: 0;
}
.gc-line-item-card .gc-line-item-card-close-button {
order: -1;
flex-basis: 100%;
display: flex;
justify-content: flex-end;
margin-top: 0;
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper {
flex-wrap: wrap;
margin-left: 0;
width: 100%;
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper .gc-input {
flex: 1;
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper .gc-input-money {
flex: 1.5;
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper .gc-input .gc-input-wrapper input {
width: 100%;
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper > :last-child {
flex-basis: 100%;
max-width: none;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper > :last-child > :last-child {
align-self: auto;
margin-block: 0;
}
}
@media (min-width: 560px) {
.gc-line-item-card {
padding: var(--spacing-base) var(--spacing-base) var(--spacing-sm)
}
.gc-line-item-card .gc-line-item-card-content-wrapper {
margin-right: var(--spacing-5xl);
}
.gc-line-item-card .gc-line-item-card-close-button {
position: absolute;
right: var(--spacing-base);
}
.gc-line-item-card .gc-line-item-card-inputs-wrapper > :last-child {
margin-left: calc(var(--spacing-xl) - var(--spacing-base));
}
.gc-line-item-card .gc-meta {
margin-left: auto;
width: 281px;
}
}
/* css/design_system/components/table_card.css */
.gc-table-card {
background: var(--surface-primary-light);
border: 1px solid var(--colors-border-secondary);
border-radius: var(--radius-default);
box-shadow: var(--shadow-xs);
padding: var(--spacing-xs) var(--spacing-xl);
min-width: 343px;
width: 100%;
}
.gc-table-card:has(h2 a) {
cursor: pointer;
}
.gc-table-card h2 a {
text-decoration: none;
color: inherit;
}
.gc-table-card p.gc-type-sm {
color: var(--font-text-tertiary);
}
.gc-table-card p.gc-type-base {
color: var(--font-text-primary-dark);
}
.gc-table-card .gc-type-h3 {
font-family: var(--font-family-body);
color: var(--font-text-secondary);
font-size: 1rem;
font-weight: var(--text-weight-number-500);
line-height: 1.375rem;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.gc-table-card .gc-table-card-action-container {
align-items: center;
display: flex;
height: var(--spacing-6xl);
justify-content: center;
left: var(--spacing-lg);
position: relative;
width: var(--spacing-6xl);
}
.gc-table-card .gc-table-card-action-container .gc-icon {
color: var(--font-text-tertiary);
height: var(--spacing-xl);
width: var(--spacing-xl);
}
.gc-table-card .gc-table-card-title-container {
align-self: stretch;
align-items: center;
height: var(--spacing-6xl);
gap: var(--spacing-none);
}
.gc-table-card .gc-action-menu {
margin-right: -20px;
}
.gc-table-card .gc-action-menu [popovertarget] .gc-icon {
color: var(--font-text-tertiary);
}
.gc-table-card .gc-stack > .gc-stack {
margin-bottom: var(--spacing-base);
margin-right: var(--spacing-6xl);
}
.gc-table-card button.gc-button {
height: var(--spacing-6xl);
margin-bottom: 0;
padding: var(--spacing-none) var(--spacing-base);
width: 100%;
}
.gc-table-card hr {
background: var(--colors-border-tertiary);
border: 0;
height: 1px;
width: 100%;
}
/* css/design_system/components/calendar.css */
.gc-calendar {
--calendar-grid-item-height: 114px;
width: 100%;
display: flex;
font-family: var(--font-family-body);
color: var(--font-text-secondary);
}
.gc-calendar .gc-calendar-hour-groups-container .gc-calendar-hour-group {
width: 62px;
height: var(--calendar-grid-item-height);
font-size: var(--text-font-size-sm);
line-height: 100%;
text-align: right;
}
.gc-calendar .gc-calendar-hour-groups-container .gc-calendar-hour-group:last-child {
height: auto;
}
.gc-calendar .gc-calendar-grid {
position: relative;
flex: 1;
padding-top: 5px;
}
.gc-calendar .gc-calendar-empty-grid-container {
position: absolute;
width: 100%;
}
.gc-calendar .gc-calendar-empty-grid-container .gc-calendar-empty-grid-item {
border-top: 1px solid var(--colors-border-secondary);
height: var(--calendar-grid-item-height);
}
.gc-calendar .gc-calendar-empty-grid-container .gc-calendar-empty-grid-item:last-child {
border-bottom: 1px solid var(--colors-border-primary);
}
.gc-calendar .gc-calendar-empty-grid-container .gc-calendar-empty-grid-item-without-border {
height: var(--calendar-grid-item-height);
}
.gc-calendar .gc-calendar-activities-container {
position: absolute;
width: 100%;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container {
position: absolute;
width: 100%;
padding: 1px 0;
container: activity-container / size;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity {
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background: var(--colors-info-25);
box-shadow: var(--shadow-xs);
padding: var(--spacing-base) var(--spacing-lg);
height: 100%;
width: 100%;
text-decoration: none;
color: inherit;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity[phx-click] {
cursor: pointer;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
border-radius: var(--radius-focus-ring);
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity .gc-calendar-activity-description {
font-family: var(--font-family-heading);
font-style: normal;
font-weight: var(--text-weight-number-600);
}
.gc-calendar .gc-calendar-activity-time-info {
color: var(--font-text-tertiary);
text-align: left;
}
@container activity-container (max-height: 55px) {
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity {
align-items: center;
border-radius: var(--radius-size-4);
padding-block: 0;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity .gc-stack {
overflow: hidden;
height: 20px;
justify-content: center;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity .gc-stack .gc-calendar-activity-description {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity .gc-stack .gc-calendar-activity-supplier-name,
.gc-calendar .gc-calendar-activities-container .gc-calendar-activity-container .gc-calendar-activity .gc-stack .gc-calendar-activity-time-info {
flex-shrink: 0;
}
.gc-calendar .hide-below-30-minutes {
display: none;
}
}
@container activity-container (min-height: 56px) {
.gc-calendar .hide-above-30-minutes {
display: none;
}
@container activity-container (max-width: 559px) {
.gc-calendar .hide-activity-content-below-sm-and-above-30-minutes {
display: none;
}
}
}
@container activity-container (max-height: 111px) {
.gc-calendar .hide-below-1-hour {
display: none;
}
}
@container activity-container (max-width: 559px) {
.gc-calendar .hide-activity-content-below-sm {
display: none;
}
}
@container activity-container (min-width: 560px) {
.gc-calendar .hide-activity-content-above-sm {
display: none;
}
}
/* css/design_system/components/date_picker.css */
.gc-input-date-picker {
position: relative;
}
.gc-input-date-picker .gc-input-wrapper {
position: relative;
}
.gc-input-date-picker .gc-input .gc-icon-wrapper {
padding-inline: 0;
right: var(--spacing-sm);
}
.gc-input-date-picker .gc-input .gc-input-date-picker-button {
background: transparent;
border: none;
height: 100%;
}
.gc-input-date-picker:has(.gc-date-picker-calendar:not([hidden])) input[type=text] {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-input-date-picker .gc-date-picker-calendar {
position: absolute;
z-index: var(--z-index-gc-date-picker-calendar);
width: -moz-min-content;
width: min-content;
padding: var(--spacing-base);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
box-shadow: var(--shadow-s);
margin-top: var(--spacing-2xs);
right: 0;
}
.gc-input-date-picker .gc-date-picker-calendar[hidden] {
display: none;
}
.gc-input-date-picker .gc-date-picker-calendar calendar-date::part(container) {
position: relative;
gap: var(--spacing-lg);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-date::part(button previous),
.gc-input-date-picker .gc-date-picker-calendar calendar-date::part(button next) {
border: none;
background: transparent;
border-radius: var(--radius-default);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-date::part(button previous):focus-visible,
.gc-input-date-picker .gc-date-picker-calendar calendar-date::part(button next):focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-input-date-picker .gc-date-picker-calendar calendar-date::part(header) {
position: absolute;
width: 100%;
}
.gc-input-date-picker .gc-date-picker-calendar calendar-date [slot=previous],
.gc-input-date-picker .gc-date-picker-calendar calendar-date [slot=next] {
color: var(--font-text-link);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month {
gap: var(--spacing-xs);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(heading) {
color: var(--font-text-primary-dark);
font-family: var(--font-family-heading);
font-size: var(--text-font-size-base);
font-weight: 500;
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(th day) {
color: var(--font-text-tertiary);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: var(--font-family-body);
font-size: var(--text-font-size-sm);
font-style: normal;
font-weight: 400;
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(button day) {
position: relative;
color: var(--font-text-primary-dark);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: var(--font-family-body);
font-size: var(--text-font-size-sm);
font-style: normal;
font-weight: 400;
padding: var(--spacing-xs);
width: var(--spacing-6xl);
height: var(--spacing-6xl);
border-radius: var(--radius-default);
border: 1px solid transparent;
background-color: transparent;
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(button day):hover {
border: 1px solid var(--colors-border-selected);
background-color: var(--colors-surface-hover-light);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(button day):focus-visible {
border: 2px solid var(--colors-border-selected);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(today) {
background-image: var(--date-picker-calendar-today-circle);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(today):focus-visible {
background-image: var(--date-picker-calendar-today-circle-focused);
}
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(button day selected),
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(button day selected):hover,
.gc-input-date-picker .gc-date-picker-calendar calendar-month::part(button day selected):focus-visible {
background-color: var(--colors-primary-700);
background-image: none;
color: var(--font-text-primary-light);
outline: none;
}
.gc-input-date-picker.gc-date-picker-left .gc-date-picker-calendar {
right: auto;
left: 0;
}
.gc-input-date-picker.gc-date-picker-right .gc-date-picker-calendar {
left: auto;
right: 0;
}
/* css/design_system/components/date_range_picker.css */
.gc-date-range-picker {
position: relative;
}
.gc-date-range-picker:has(.gc-date-range-picker-calendar:not([hidden])):not(:has(input[data-date-range-start-picker-input="true"]:focus, input[data-date-range-end-picker-input="true"]:focus))[data-cally-range-start-selected=false] input[data-date-range-start-picker-input=true] {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-date-range-picker:has(.gc-date-range-picker-calendar:not([hidden])):not(:has(input[data-date-range-start-picker-input="true"]:focus, input[data-date-range-end-picker-input="true"]:focus))[data-cally-range-start-selected=true] input[data-date-range-end-picker-input=true] {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-date-range-picker .gc-input .gc-icon-wrapper {
padding-inline: 0;
right: var(--spacing-sm);
}
.gc-date-range-picker .gc-input .gc-input-date-picker-button {
background: transparent;
border: none;
height: 100%;
}
.gc-date-range-picker .gc-date-range-picker-calendar {
position: absolute;
z-index: var(--z-index-gc-date-picker-calendar);
padding: var(--spacing-base);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
box-shadow: var(--shadow-s);
margin-top: var(--spacing-2xs);
right: 0;
}
.gc-date-range-picker .gc-date-range-picker-calendar[hidden] {
display: none;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range::part(container) {
position: relative;
gap: var(--spacing-lg);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range::part(button previous),
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range::part(button next) {
border: none;
background: transparent;
border-radius: var(--radius-default);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range::part(button previous):focus-visible,
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range::part(button next):focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range::part(header) {
position: absolute;
width: 100%;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range [slot=previous],
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range [slot=next] {
color: var(--font-text-link);
}
@media (max-width: 735px) {
.gc-date-range-picker .gc-date-range-picker-calendar calendar-range .gc-stacking-cluster {
flex-direction: column;
align-items: normal;
justify-content: normal
}
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month {
gap: var(--spacing-xs);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(heading) {
color: var(--font-text-primary-dark);
font-family: var(--font-family-heading);
font-size: var(--text-font-size-base);
font-weight: 500;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(th day) {
color: var(--font-text-tertiary);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: var(--font-family-body);
font-size: var(--text-font-size-sm);
font-style: normal;
font-weight: 400;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day) {
position: relative;
color: var(--font-text-primary-dark);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: var(--font-family-body);
font-size: var(--text-font-size-sm);
font-style: normal;
font-weight: 400;
padding: var(--spacing-xs);
width: var(--spacing-6xl);
height: var(--spacing-6xl);
border-radius: var(--radius-default);
border: 1px solid transparent;
background-color: transparent;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day):hover {
border: 1px solid var(--colors-border-selected);
background-color: var(--colors-surface-hover-light);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day):focus-visible {
border: 2px solid var(--colors-border-selected);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(today) {
background-image: var(--date-picker-calendar-today-circle);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(today):focus-visible {
background-image: var(--date-picker-calendar-today-circle-focused);
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected),
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected):hover,
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected):focus-visible {
background-color: var(--colors-primary-700);
background-image: none;
color: var(--font-text-primary-light);
outline: none;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected range-start) {
border-start-end-radius: 0;
border-end-end-radius: 0;
border: none;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected range-inner) {
border-radius: 0;
background-color: var(--colors-primary-500);
border: none;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected range-end) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border: none;
}
.gc-date-range-picker .gc-date-range-picker-calendar calendar-month::part(button day selected range-start range-end) {
border-radius: var(--radius-default);
border: none;
}
/* css/design_system/components/filter_date_range_picker.css */
.gc-filter-date-range-picker {
width: 100%;
position: relative;
display: inline-block;
}
.gc-filter-date-range-picker > .gc-input .gc-input-wrapper {
z-index: 0;
}
.gc-filter-date-range-picker > .gc-input .gc-input-wrapper input[data-autofill-guard] {
background-color: transparent !important;
}
.gc-filter-date-range-picker > .gc-input .gc-input-wrapper input {
background: transparent;
padding: 0px var(--spacing-sm);
min-height: 48px;
}
.gc-filter-date-range-picker > .gc-input .gc-input-wrapper .gc-icon-wrapper {
z-index: -1;
}
.gc-filter-date-range-picker > .gc-input .gc-icon {
transition: transform 0.3s ease;
}
.gc-filter-date-range-picker > .gc-input:has([aria-expanded="true"]) input {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-filter-date-range-picker > .gc-input:has([aria-expanded="true"]) .gc-icon {
transform: rotate(180deg);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu {
position: absolute;
z-index: var(--z-index-gc-date-picker-calendar);
border-radius: var(--radius-default);
background: var(--colors-surface-primary-light);
margin-top: 6px;
right: 0;
display: flex;
flex-direction: row;
box-shadow: var(--shadow-lg);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu[hidden] {
display: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar {
padding-top: var(--spacing-sm);
border-radius: var(--radius-default) var(--radius-none) var(--radius-none) var(--radius-default);
border-top: 1px solid var(--colors-border-secondary);
border-bottom: 1px solid var(--colors-border-secondary);
border-left: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar button {
padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base) var(--spacing-2xl);
color: var(--font-text-primary-dark);
min-height: var(--spacing-9xl);
text-align: left;
width: 200px;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar button:hover {
background: var(--colors-surface-hover-light);
color: var(--font-text-selected);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar button.selected {
background: var(--colors-surface-selected);
color: var(--font-text-selected);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar button:focus-visible {
border-radius: var(--radius-default);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main {
padding: var(--spacing-3xl) var(--spacing-base) var(--spacing-lg) var(--spacing-base);
border-radius: var(--radius-none) var(--radius-default) var(--radius-default) var(--radius-none);
border: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container {
position: relative;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container {
position: absolute;
top: 0;
width: calc(100% - 2 * var(--spacing-xl));
margin-left: var(--spacing-xl);
margin-right: var(--spacing-xl);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container > span {
color: var(--font-text-primary-dark);
font-weight: 500;
height: var(--spacing-6xl);
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container .gc-input-dropdown {
width: -moz-min-content;
width: min-content;
margin-left: auto;
margin-right: auto;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container .gc-input-dropdown [role=combobox] {
padding-inline: var(--spacing-lg) var(--spacing-base);
gap: var(--spacing-xs);
height: var(--spacing-6xl);
border: none;
outline: none;
font-weight: 500;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container .gc-input-dropdown [role=combobox]:hover,
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container .gc-input-dropdown [role=combobox]:focus-visible,
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container .gc-input-dropdown [role=combobox][aria-expanded=true] {
background: var(--colors-surface-selected);
outline: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main .gc-filter-date-range-picker-calendar-container .gc-filter-date-range-picker-year-dropdown-container .gc-input-dropdown [role=combobox] .gc-icon {
color: var(--font-text-link);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range::part(container) {
gap: var(--spacing-lg);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range::part(button previous),
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range::part(button next) {
border: none;
background: transparent;
border-radius: var(--radius-default);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range::part(button previous):focus-visible,
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range::part(button next):focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range::part(header) {
width: 100%;
height: var(--spacing-6xl);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range [slot=previous],
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range [slot=next] {
color: var(--font-text-link);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range .gc-stacking-cluster {
flex-wrap: nowrap;
}
@media (max-width: 935px) {
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-range .gc-stacking-cluster {
flex-direction: column;
align-items: normal;
justify-content: normal
}
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month {
gap: var(--spacing-xs);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(heading) {
color: var(--font-text-primary-dark);
font-family: var(--font-family-heading);
font-size: var(--text-font-size-base);
font-weight: 500;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(th day) {
color: var(--font-text-tertiary);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: var(--font-family-body);
font-size: var(--text-font-size-sm);
font-style: normal;
font-weight: 400;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day) {
position: relative;
color: var(--font-text-primary-dark);
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: var(--font-family-body);
font-size: var(--text-font-size-sm);
font-style: normal;
font-weight: 400;
padding: var(--spacing-xs);
width: var(--spacing-6xl);
height: var(--spacing-6xl);
border-radius: var(--radius-default);
border: 1px solid transparent;
background-color: transparent;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day):hover {
border: 1px solid var(--colors-border-selected);
background-color: var(--colors-surface-hover-light);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day):focus-visible {
border: 2px solid var(--colors-border-selected);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(today) {
background-image: var(--date-picker-calendar-today-circle);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(today):focus-visible {
background-image: var(--date-picker-calendar-today-circle-focused);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected),
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected):hover,
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected):focus-visible {
background-color: var(--colors-primary-700);
background-image: none;
color: var(--font-text-primary-light);
outline: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected range-start) {
border-start-end-radius: 0;
border-end-end-radius: 0;
border: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected range-inner) {
border-radius: 0;
background-color: var(--colors-primary-500);
border: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected range-end) {
border-start-start-radius: 0;
border-end-start-radius: 0;
border: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-main calendar-month::part(button day selected range-start range-end) {
border-radius: var(--radius-default);
border: none;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-range-inputs-container {
display: none;
}
@media (pointer: fine) {
.gc-filter-date-range-picker .gc-filter-date-range-picker-range-inputs-container {
display: flex;
}
}
@media (max-width: 935px) {
.gc-filter-date-range-picker .gc-filter-date-range-picker-range-inputs-container {
flex-direction: column;
gap: var(--spacing-lg);
}
}
@media (max-width: 635px) {
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu {
flex-direction: column;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar {
padding: var(--spacing-sm) 0;
border-radius: var(--radius-default) var(--radius-default) var(--radius-none) var(--radius-none);
border-top: 1px solid var(--colors-border-secondary);
border-right: 1px solid var(--colors-border-secondary);
border-left: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-sidebar button {
width: auto;
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-menu .gc-filter-date-range-picker-main {
padding: var(--spacing-base);
border-radius: var(--radius-none) var(--radius-none) var(--radius-default) var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-primary-light);
}
.gc-filter-date-range-picker .gc-filter-date-range-picker-range-inputs-container {
display: none;
}
}
.gc-stacking-cluster > .gc-filter-date-range-picker.gc-filter-date-range-picker {
flex-shrink: 1;
min-width: 0;
}
/* css/design_system/components/details_card.css */
.gc-details-card {
align-items: flex-start;
background: var(--surface-primary-light);
border: 1px solid var(--colors-border-primary);
border-radius: var(--radius-default);
box-shadow: var(--shadow-s);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: var(--spacing-base) var(--spacing-xl);
}
.gc-details-card h2 {
color: var(--font-text-primary-dark);
}
.gc-details-card p.gc-type-sm {
color: var(--font-text-tertiary);
}
.gc-details-card p.gc-type-base {
color: var(--font-text-primary-dark);
}
.gc-details-card .gc-details-card-title-container {
align-items: center;
height: var(--spacing-6xl);
vertical-align: middle;
}
.gc-details-card .gc-details-card-title-container h3 {
color: var(--font-text-primary-dark);
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.gc-details-card .gc-details-card-action {
text-align: center;
color: var(--colors-primary-600);
flex-shrink: 0;
height: var(--spacing-xl);
text-decoration: none;
}
.gc-details-card .gc-stack > .gc-stack {
margin-bottom: var(--spacing-base);
margin-right: var(--spacing-6xl);
}
@media (max-width: 559px) {
.gc-details-card {
padding: var(--spacing-xs) var(--spacing-lg);
box-shadow: var(--shadow-xs)
}
}
/* css/design_system/components/error_summary.css */
.gc-error-summary {
max-width: 100%;
padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg) var(--spacing-xl);
border-left: 4px solid var(--colors-error-500);
background: var(--colors-error-50);
}
.gc-error-summary .gc-error-summary-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
width: 100%;
}
.gc-error-summary .gc-error-summary-list .gc-a-sm {
color: var(--font-text-error);
}
.gc-error-summary .gc-error-wrapper {
height: var(--spacing-xl);
}
.gc-error-summary .gc-error-wrapper a {
display: block;
height: 24px;
}
.gc-error-summary .gc-type-h3 {
color: var(--font-text-primary-dark);
}
@media (min-width: 560px) {
.gc-error-summary {
padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-2xl) var(--spacing-3xl);
width: 100%
}
}
/* css/design_system/components/picker_card.css */
.gc-picker-card-fieldset {
display: flex;
flex-direction: column;
border: none;
width: auto;
}
.gc-picker-card-fieldset:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 4px;
border-radius: var(--radius-focus-ring);
}
.gc-picker-card {
border: 1px solid var(--colors-border-primary);
border-radius: var(--radius-focus-ring);
color: var(--font-text-primary-dark);
font-size: var(--text-font-size-sm);
position: relative;
}
.gc-picker-card:hover,
.gc-picker-card:has(.gc-picker-card-picker input:focus) {
box-shadow: var(--shadow-m);
}
.gc-picker-card > .gc-picker-card-wrapper {
display: block;
padding: var(--spacing-3xl) var(--spacing-4xl);
}
.gc-picker-card .gc-picker-card-footer {
max-height: 0;
opacity: 0;
visibility: hidden;
transition: 0.4s all ease;
}
.gc-picker-card:has(.gc-picker-card-picker input:checked) {
box-shadow: var(--shadow-m);
border-color: var(--colors-border-selected);
}
.gc-picker-card:has(.gc-picker-card-picker input:checked) .gc-picker-card-footer {
display: flex;
padding-top: var(--spacing-xl);
max-height: 500px;
opacity: 1;
visibility: visible;
}
.gc-picker-card .gc-picker-card-picker {
position: absolute;
right: 12px;
top: 12px;
}
@media (max-width: 559px) {
.gc-picker-card > .gc-picker-card-wrapper {
padding: var(--spacing-2xl) var(--spacing-3xl);
}
.gc-picker-card .gc-picker-card-picker {
right: 8px;
top: 8px;
}
}
/* css/design_system/components/flash_group.css */
.gc-flash-group {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: var(--z-index-gc-flash-group);
align-items: center;
gap: var(--spacing-base);
margin-inline: auto;
padding-top: var(--spacing-base);
padding-inline: var(--spacing-xl);
}
.gc-flash {
align-content: center;
box-shadow: var(--shadow-lg);
color: var(--font-text-primary-700);
height: var(--spacing-9xl);
width: 100%;
padding: var(--spacing-base);
border-radius: var(--radius-default);
border-style: solid;
border-width: 1px;
min-width: var(--spacing-9xl);
}
.gc-flash .flash-content {
margin-right: auto;
color: var(--font-text-secondary);
}
.gc-flash .flash-row {
flex-wrap: wrap;
}
.gc-flash .flash-link {
flex-shrink: 0;
}
.gc-flash .gc-icon {
display: none;
}
.gc-flash .gc-button {
padding: 0px;
}
.gc-flash .gc-button .gc-icon {
display: inline-block;
color: var(--font-text-tertiary);
}
.gc-flash button {
height: var(--size-20);
}
.gc-flash button span {
height: var(--size-20);
margin: 0;
}
.hidden {
display: none;
}
.announcement,
.error,
.success,
.warning {
height: auto;
}
.success {
background: var(--colors-success-25);
border-color: var(--colors-success-500);
}
.success .gc-icon {
color: var(--colors-success-500);
}
.error {
background: var(--colors-error-25);
border-color: var(--colors-error-400);
}
.error .gc-icon {
color: var(--colors-error-400);
}
.gc-flash-with-link.error .flash-content {
color: var(--font-text-error);
}
.gc-flash-with-link .flash-row {
gap: var(--spacing-xs);
}
.warning {
background: var(--colors-warning-25);
border-color: var(--colors-warning-500);
}
.warning .gc-icon {
color: var(--colors-warning-500);
}
.announcement {
background: var(--colors-info-25);
border-color: var(--colors-info-500);
}
.announcement .gc-icon {
color: var(--colors-primary-500);
}
@media (min-width: 560px) {
.gc-flash .gc-icon {
display: initial;
}
}
/* css/design_system/components/hr.css */
.gc-hr {
border-style: solid;
background-color: var(--colors-border-tertiary);
border-top: none;
width: 100%;
border-color: var(--colors-border-tertiary);
}
/* css/design_system/components/icon.css */
.gc-icon {
display: flex;
align-items: center;
justify-content: center;
}
.gc-icon.gc-3xs {
width: 14px;
height: 14px;
}
.gc-icon.gc-2xs {
width: var(--size-16);
height: var(--size-16);
}
.gc-icon.gc-xs {
width: var(--size-20);
height: var(--size-20);
}
.gc-icon.gc-sm {
width: var(--size-24);
height: var(--size-24);
}
.gc-icon.gc-base {
width: var(--size-32);
height: var(--size-32);
}
.gc-icon.gc-lg {
width: var(--size-40);
height: var(--size-40);
}
.gc-icon.gc-xl {
width: var(--size-48);
height: var(--size-48);
}
.gc-icon svg {
width: 100%;
height: 100%;
}
.gc-icon[hidden] {
display: none;
}
/* css/design_system/components/icon_button.css */
.gc-icon-button {
display: block;
width: var(--spacing-9xl);
height: var(--spacing-9xl);
}
.gc-icon-button.gc-icon-button-small {
width: var(--spacing-5xl);
height: var(--spacing-5xl);
}
.gc-icon-button .inner {
display: inline-flex;
flex-shrink: 0;
border-radius: var(--radius-full);
position: relative;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
justify-content: center;
align-items: center;
transition: background 150ms ease-out;
}
.gc-icon-button .inner .gc-badge {
position: absolute;
z-index: var(--z-index-gc-icon-badge);
top: -3px;
right: -0.6rem;
}
.gc-icon-button[disabled] .inner .gc-badge {
background-color: var(--colors-surface-primary-dark);
}
.gc-icon-button.gc-primary .inner {
border-color: var(--colors-primary-600);
background-color: var(--colors-primary-600);
color: var(--font-text-primary-light);
}
.gc-icon-button.gc-primary:hover .inner {
border-color: var(--colors-primary-700);
background-color: var(--colors-primary-700);
}
.gc-icon-button.gc-primary:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
border-radius: var(--radius-focus-ring);
}
.gc-icon-button.gc-primary:active .inner {
border-color: var(--colors-primary-800);
background-color: var(--colors-primary-800);
}
.gc-icon-button.gc-primary[disabled] .inner {
border-color: transparent;
color: var(--font-text-disabled-primary-button);
background-color: var(--colors-surface-disabled-button);
}
.gc-icon-button.gc-secondary .inner {
border-color: var(--colors-primary-600);
color: var(--colors-primary-600);
}
.gc-icon-button.gc-secondary:hover .inner {
background-color: var(--colors-primary-75);
}
.gc-icon-button.gc-secondary:focus-visible {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
border-radius: var(--radius-focus-ring);
}
.gc-icon-button.gc-secondary:active .inner {
border-color: var(--colors-primary-700);
background-color: var(--colors-surface-pressed-button);
color: var(--colors-primary-700);
}
.gc-icon-button.gc-secondary[disabled] .inner {
border-color: var(--colors-surface-disabled-button);
color: var(--font-text-disabled-primary-button);
background-color: var(--colors-surface-disabled-button);
}
/* css/design_system/components/info_box.css */
.gc-info-box-group {
width: 100%;
}
.gc-info-box {
border: 1px solid var(--colors-border-tertiary);
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-base);
}
.gc-info-box [role=definition] {
font-weight: var(--text-weight-number-500);
color: var(--font-text-secondary);
}
.gc-info-box [role=term] {
display: block;
font-style: normal;
color: var(--font-text-tertiary);
order: 2;
}
.gc-info-box.gc-primary {
background: var(--colors-surface-primary-light);
border-radius: var(--spacing-base);
}
.gc-info-box.gc-secondary {
background-color: var(--colors-surface-secondary);
border-radius: var(--radius-default);
}
@media (min-width: 560px) {
.gc-info-box.gc-info-box-sm {
max-width: 364px
}
}
/* css/design_system/components/input.css */
.gc-input {
position: relative;
width: 100%;
background: var(--colors-surface-primary-light);
}
.gc-input .gc-input-wrapper {
position: relative;
width: 100%;
}
.gc-input .gc-icon {
color: var(--font-text-icons);
}
.gc-input .gc-meta {
color: var(--font-text-secondary);
}
.gc-input .gc-meta .gc-error .gc-icon {
color: var(--font-text-error);
}
.gc-input .gc-icon-wrapper {
position: absolute;
right: 0;
display: grid;
place-items: center;
height: 100%;
padding-inline: var(--spacing-xl) var(--spacing-sm);
}
.gc-input.gc-input-money .gc-icon-wrapper, .gc-input.gc-input-percentage .gc-icon-wrapper {
padding-inline: calc(var(--spacing-sm) + 0.75px);
}
.gc-input .gc-required {
color: var(--colors-error-500);
}
.gc-input .gc-input-optional {
color: var(--font-text-tertiary);
}
.gc-input label {
color: var(--font-text-secondary);
font-size: var(--text-font-size-sm);
}
.gc-input select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.gc-input select:has(option[value=""]:checked) {
color: var(--font-text-secondary);
}
.gc-input textarea:not([rows]) {
min-height: 85px;
}
.gc-input input:not([type="radio"], [type="checkbox"]), .gc-input textarea, .gc-input select {
display: flex;
width: 100%;
background: var(--colors-surface-primary-light);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background-color: var(--colors-surface-primary-light);
color: var(--font-text-primary-dark);
padding: var(--spacing-sm);
font-family: var(--font-family-body);
font-size: var(--text-font-size-base);
}
.gc-input input:not([type="radio"], [type="checkbox"]):focus-visible:not([type="radio"], [type="checkbox"]), .gc-input textarea:focus-visible:not([type="radio"], [type="checkbox"]), .gc-input select:focus-visible:not([type="radio"], [type="checkbox"]) {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-input input:not([type="radio"], [type="checkbox"]).gc-error, .gc-input textarea.gc-error, .gc-input select.gc-error {
border: 1px solid var(--colors-focus-ring-error);
background-color: var(--colors-surface-error);
color: var(--font-text-error);
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: -2px;
}
.gc-input input:not([type="radio"], [type="checkbox"]).gc-error:focus, .gc-input textarea.gc-error:focus, .gc-input select.gc-error:focus {
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: -2px;
background: transparent;
}
.gc-input input:not([type="radio"], [type="checkbox"])::-moz-placeholder, .gc-input textarea::-moz-placeholder, .gc-input select::-moz-placeholder {
color: var(--font-text-tertiary);
}
.gc-input input:not([type="radio"], [type="checkbox"])::placeholder, .gc-input textarea::placeholder, .gc-input select::placeholder {
color: var(--font-text-tertiary);
}
.gc-input:has(.gc-icon):not(.gc-input-money):not(.gc-input-percentage):not(.gc-input-number) input:not([type="radio"], [type="checkbox"], [role="combobox"]), .gc-input:has(.gc-icon):not(.gc-input-money):not(.gc-input-percentage):not(.gc-input-number) select {
padding-right: 60px;
}
.gc-input:has(.gc-icon):not(.gc-input-money):not(.gc-input-percentage):not(.gc-input-number) input:not([type="radio"], [type="checkbox"], [role="combobox"]):focus, .gc-input:has(.gc-icon):not(.gc-input-money):not(.gc-input-percentage):not(.gc-input-number) select:focus {
padding-right: 60px;
}
.gc-input .gc-help {
color: var(--font-text-tertiary);
}
.gc-input .gc-meta:has(.gc-help:empty) {
display: none;
}
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input:not([type="radio"], [type="checkbox"]), .gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) select, .gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) textarea {
color: var(--font-text-tertiary);
background-color: var(--colors-surface-disabled-input) !important;
}
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input[type=radio],
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input[type=checkbox] {
border-color: var(--colors-surface-disabled-selected);
}
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input[type=radio] {
background-color: var(--colors-surface-toggle-disabled) !important;
}
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input[type=checkbox] {
background-color: var(--colors-surface-disabled-selected) !important;
}
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input:not(:checked)[type=radio],
.gc-input:has(input[disabled], textarea[disabled], select[disabled], input[readonly], textarea[readonly], select[readonly]) input:not(:checked)[type=checkbox] {
border-color: var(--colors-border-primary);
background-color: var(--colors-surface-primary-light) !important;
}
.gc-input:has(input[readonly], textarea[readonly]) input:hover, .gc-input:has(input[readonly], textarea[readonly]) textarea:hover {
cursor: not-allowed;
}
.gc-input:has(input[data-autofill-guard], textarea[data-autofill-guard]) input[data-autofill-guard],
.gc-input:has(input[data-autofill-guard], textarea[data-autofill-guard]) textarea[data-autofill-guard] {
color: var(--font-text-primary) !important;
background-color: var(--colors-surface-primary-light) !important;
cursor: text !important;
}
.gc-input.gc-visually-hidden-label label {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.gc-input.gc-input-money .gc-icon-wrapper, .gc-input.gc-input-percentage .gc-icon-wrapper {
position: relative;
left: auto;
right: auto;
height: auto;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: var(--colors-surface-primary-light);
}
.gc-input.gc-input-money input, .gc-input.gc-input-percentage input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 88px;
padding-right: var(--spacing-sm);
}
.gc-input.gc-input-money input:focus, .gc-input.gc-input-percentage input:focus {
padding-right: var(--spacing-sm);
}
.gc-input.gc-input-password button:focus {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: 2px;
border-radius: calc(var(--radius-default));
}
.gc-input.gc-input-search input {
padding-right: var(--spacing-10xl);
}
.gc-input.gc-input-search input:focus::-moz-placeholder {
color: transparent;
}
.gc-input.gc-input-search input:focus::placeholder {
color: transparent;
}
.gc-input.gc-input-number.gc-input-size-base .gc-input-wrapper input {
max-width: 136px;
}
.gc-input.gc-input-number.gc-input-size-sm .gc-input-wrapper input {
max-width: 80px;
}
.gc-input.gc-input-dropdown .gc-input-wrapper {
position: relative;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox] {
width: 100%;
min-height: 48px;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
display: flex;
align-items: center;
padding: 0px var(--spacing-sm);
gap: var(--spacing-xl);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox][aria-disabled=false][aria-readonly=false] {
background-color: var(--colors-surface-primary-light);
color: var(--font-text-primary-dark);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox][aria-disabled=false][aria-readonly=false].gc-error {
border: 1px solid var(--colors-focus-ring-error);
background-color: var(--colors-surface-error);
color: var(--font-text-error);
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: -2px;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox] .gc-input-dropdown-trigger-inner {
display: block;
width: 100%;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox] .gc-input-dropdown-trigger-placeholder {
color: var(--font-text-secondary);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox] .gc-input-dropdown-open-icon .gc-icon, .gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox] .gc-input-dropdown-closed-icon .gc-icon {
color: var(--font-text-icons);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox][aria-expanded=false] .gc-input-dropdown-open-icon {
display: none;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox][aria-expanded=true],
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox]:focus {
border: 1px solid var(--colors-focus-ring-default);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=combobox][aria-expanded=true] .gc-input-dropdown-closed-icon {
display: none;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] {
display: block;
position: absolute;
top: 100%;
right: 0;
margin: var(--size-6) 0;
padding: 0;
width: 100%;
max-height: 280px;
list-style: none;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-primary);
background-color: var(--colors-surface-primary-light);
box-shadow: var(--shadow-m);
z-index: 999;
overflow: auto;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox][hidden] {
display: none;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option] {
display: flex;
width: 100%;
min-height: 56px;
padding: calc(var(--spacing-base) - 2px) calc(var(--spacing-sm) - 2px);
border: 2px solid transparent;
align-items: center;
background-color: var(--colors-surface-primary-light);
color: var(--font-text-primary-dark);
text-align: left;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option] .gc-input-dropdown-option-inner {
display: flex;
width: 100%;
min-height: 22px;
justify-content: start;
align-items: center;
gap: var(--spacing-base);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option] .gc-input-dropdown-option-inner span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option] .gc-input-dropdown-option-inner .gc-icon {
color: var(--font-text-secondary);
flex-shrink: 0;
align-self: center;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option] .gc-input-dropdown-option-selected-icon {
flex-shrink: 0;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option][aria-selected=true] {
background-color: var(--colors-surface-selected);
color: var(--font-text-selected);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option][aria-selected=true] .gc-icon {
color: var(--font-text-selected);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option]:not([aria-selected="true"]) .gc-input-dropdown-option-selected-icon {
display: none;
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option][aria-disabled=true] {
color: var(--font-text-disabled-primary-button);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option][aria-disabled=true] .gc-icon {
color: var(--font-text-disabled-primary-button);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option]:not([aria-disabled="true"]):not(.active):hover {
background-color: var(--colors-surface-hover-light);
color: var(--font-text-selected);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option]:not([aria-disabled="true"]):not(.active):hover .gc-icon {
color: var(--font-text-selected);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option].active {
outline: none;
border-radius: var(--radius-default);
background-color: var(--colors-surface-primary-light);
color: var(--font-text-selected);
border: 2px solid var(--colors-focus-ring-default);
}
.gc-input.gc-input-dropdown .gc-input-wrapper [role=listbox] [role=option].active .gc-icon {
color: var(--font-text-selected);
}
.gc-input.gc-input-combobox {
position: relative;
}
.gc-input.gc-input-combobox [role=combobox] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 60px;
}
.gc-input.gc-input-combobox [role=listbox] {
position: absolute;
top: 100%;
right: 0;
margin: var(--size-6) 0;
padding: 0;
width: 100%;
max-height: 280px;
list-style: none;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-primary);
background-color: var(--colors-surface-primary-light);
box-shadow: var(--shadow-m);
z-index: 999;
overflow: auto;
}
.gc-input.gc-input-combobox [role=listbox][hidden] {
display: none;
}
.gc-input.gc-input-combobox [role=listbox] [role=option] {
display: flex;
min-height: 56px;
padding: calc(var(--spacing-base) - 2px) calc(var(--spacing-sm) - 2px);
border: 2px solid transparent;
align-items: center;
background-color: var(--colors-surface-primary-light);
color: var(--font-text-primary-dark);
}
.gc-input.gc-input-combobox [role=listbox] [role=option] .gc-input-combobox-option-inner {
display: flex;
width: 100%;
min-height: 22px;
justify-content: start;
align-items: center;
}
.gc-input.gc-input-combobox [role=listbox] [role=option] .gc-input-combobox-option-inner > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gc-input.gc-input-combobox [role=listbox] button[role=option].active {
outline: none;
border-radius: var(--radius-default);
background-color: var(--colors-surface-primary-light);
color: var(--font-text-selected);
border: 2px solid var(--colors-focus-ring-default);
}
.gc-input.gc-input-combobox [role=listbox]:not(:has(button.active[role="option"])) button[role=option]:hover {
background-color: var(--colors-surface-hover-light);
color: var(--font-text-selected);
}
.gc-input.gc-input-combobox .gc-input-combobox-search-icons-container {
position: absolute;
right: 0;
height: 100%;
}
.gc-input.gc-input-combobox .gc-input-combobox-search-icons-container .gc-input-combobox-search-clear-button-container {
padding-block: var(--spacing-sm);
}
.gc-input.gc-input-combobox .gc-input-combobox-search-icons-container .gc-input-combobox-search-clear-button-container > span {
display: block;
padding-inline: var(--spacing-sm);
border-right: 1px solid var(--colors-border-primary);
}
.gc-input.gc-input-combobox .gc-input-combobox-search-icons-container .gc-input-combobox-search-caret-container {
padding: var(--spacing-sm);
}
.gc-input.gc-input-combobox .gc-input-combobox-search-icons-container .gc-input-combobox-search-caret-container .gc-icon {
transition: transform 0.3s ease;
}
.gc-input.gc-input-combobox:has([role="combobox"][aria-expanded="true"]) .gc-input-combobox-search-caret-container .gc-icon {
transform: rotate(180deg);
}
.gc-input.gc-input-combobox:has([role="combobox"][disabled], [role="combobox"][readonly]) .gc-input-combobox-search-icons-container,
.gc-input.gc-input-combobox:has([role="combobox"][disabled], [role="combobox"][readonly]) .gc-input-combobox-search-caret-container {
cursor: not-allowed;
}
.gc-input.gc-input-combobox:not(:has(.gc-input-combobox-search-clear-button-container.gc-hidden)) input[role=combobox] {
padding-right: 96px;
}
.gc-checkbox-input label, .gc-radio-input label, .gc-toggle-input label {
color: var(--font-text-primary-dark);
font-size: var(--text-font-size-base);
padding-right: var(--spacing-xs);
line-height: 1.375rem;
}
.gc-checkbox-input label:hover, .gc-radio-input label:hover, .gc-toggle-input label:hover {
cursor: pointer;
}
.gc-checkbox-input label.gc-label-empty, .gc-radio-input label.gc-label-empty, .gc-toggle-input label.gc-label-empty {
padding-right: 0;
}
.gc-checkbox-input:has(input[type="checkbox"][disabled]) label, .gc-checkbox-input:has(input[type="radio"][disabled]) label, .gc-radio-input:has(input[type="checkbox"][disabled]) label, .gc-radio-input:has(input[type="radio"][disabled]) label, .gc-toggle-input:has(input[type="checkbox"][disabled]) label, .gc-toggle-input:has(input[type="radio"][disabled]) label {
color: var(--font-text-disabled-primary-button);
}
.gc-checkbox-input:has(input[type="checkbox"][disabled]) label:hover, .gc-checkbox-input:has(input[type="radio"][disabled]) label:hover, .gc-radio-input:has(input[type="checkbox"][disabled]) label:hover, .gc-radio-input:has(input[type="radio"][disabled]) label:hover, .gc-toggle-input:has(input[type="checkbox"][disabled]) label:hover, .gc-toggle-input:has(input[type="radio"][disabled]) label:hover {
cursor: not-allowed;
}
.gc-checkbox-input .gc-cluster, .gc-radio-input .gc-cluster {
flex-wrap: nowrap;
}
.gc-checkbox-input .gc-cluster label, .gc-radio-input .gc-cluster label {
flex-shrink: 1;
min-width: 0;
}
.gc-checkbox-input .gc-cluster label > *, .gc-radio-input .gc-cluster label > * {
flex-shrink: 1;
min-width: 0;
}
.gc-radio-input label {
width: -moz-fit-content;
width: fit-content;
}
input[type=radio],
input[type=checkbox]:not([data-toggle]) {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border: 1px solid var(--colors-border-pickers);
padding: 0;
}
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
outline: 1.5px solid var(--font-text-primary-dark);
outline-offset: 2px;
}
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:checked {
background-color: var(--colors-surface-primary-light);
border: 6px solid var(--colors-surface-selected-pickers);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=checkbox]:not([data-toggle]) {
border-radius: var(--radius-size-4);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=checkbox]:not([data-toggle]):checked:not(:disabled) {
border: 1px solid var(--colors-surface-selected-pickers);
background: var(--colors-surface-selected-pickers);
}
input[type=checkbox]:not([data-toggle]):checked::after {
content: var(--checkbox-check-svg);
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
input[type=checkbox]:not([data-toggle]):checked:disabled::after {
content: var(--disabled-checkbox-check-svg);
}
.gc-tag button {
width: 14px;
display: block;
position: relative;
transition: top 150ms ease-out;
}
.gc-tag button:hover {
top: 1px;
transition: top 150ms ease-out;
}
input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
input[type=time]::-webkit-calendar-picker-indicator {
filter: invert(46%) sepia(12%) saturate(226%) hue-rotate(97deg) brightness(94%) contrast(88%);
position: absolute;
right: 12px;
}
.gc-results-menu div {
width: 100%;
}
.gc-live-search {
position: relative;
}
.gc-live-search .gc-live-search-measure-span {
position: absolute;
visibility: hidden;
pointer-events: none;
font-family: var(--font-family-body);
font-size: var(--text-font-size-base);
letter-spacing: inherit;
}
.gc-live-search .gc-input-search .gc-input-wrapper {
display: flex;
width: 100%;
background: var(--colors-surface-primary-light);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background-color: var(--colors-surface-primary-light);
color: var(--font-text-primary-dark);
}
.gc-live-search .gc-input-search .gc-input-wrapper input[type=search] {
border: none;
padding-inline: var(--spacing-sm);
}
.gc-live-search .gc-input-search .gc-input-wrapper .gc-live-search-chip-container {
flex: 1;
padding-right: var(--spacing-sm);
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(input[type="search"]:focus-visible) {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(input[type="search"]:focus-visible) input[type=search] {
outline: none;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(.gc-error) {
border: 1px solid var(--colors-focus-ring-error);
background-color: var(--colors-surface-error);
color: var(--font-text-error);
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: -2px;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(.gc-error):has(input[type="search"]:focus) {
outline: 2px solid var(--colors-focus-ring-error);
outline-offset: -2px;
background: transparent;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(.gc-error) input[type=search] {
outline: none;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has([role="combobox"][aria-expanded="true"]) {
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(input[type="search"][disabled]) {
color: var(--font-text-tertiary);
background-color: var(--colors-surface-disabled-input);
cursor: not-allowed;
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(input[type="search"][readonly]) {
color: var(--font-text-tertiary);
background-color: var(--colors-surface-disabled-input);
}
.gc-live-search .gc-input-search .gc-input-wrapper:has(input[type="search"][data-autofill-guard]) {
color: var(--font-text-primary) !important;
background-color: var(--colors-surface-primary-light) !important;
}
.gc-live-search .gc-input-search .gc-input-wrapper .gc-icon-wrapper {
position: static;
height: auto;
align-items: center;
padding-inline: var(--spacing-sm);
}
.gc-live-search [role=listbox] {
position: absolute;
margin-top: var(--size-6);
width: 100%;
overflow-x: auto;
z-index: 999;
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-primary);
background: var(--colors-surface-primary-light);
box-shadow: var(--shadow-s);
}
.gc-live-search [role=listbox][hidden] {
display: none;
}
.gc-live-search [role=listbox] > div {
white-space: nowrap;
max-height: 500px;
min-width: 100%;
}
.gc-live-search [role=listbox] > div [role=option] {
display: flex;
text-align: left;
width: 100%;
padding: calc(var(--spacing-base) - 2px) calc(var(--spacing-sm) - 2px);
border: 2px solid transparent;
transition: background 150ms ease-in-out;
gap: var(--spacing-xs);
}
.gc-live-search [role=listbox] > div [role=option].gc-no-results {
gap: var(--spacing-base);
}
.gc-live-search [role=listbox] > div [role=option] .gc-chip {
width: -moz-min-content;
width: min-content;
}
.gc-live-search [role=listbox] > div [role=option].active {
outline: none;
border-radius: var(--radius-default);
background-color: var(--colors-surface-primary-light);
color: var(--font-text-selected);
border: 2px solid var(--colors-focus-ring-default);
}
.gc-live-search [role=listbox] > div:not(:has([role="option"].active)) button[role=option]:hover {
background-color: var(--colors-surface-hover-light);
color: var(--font-text-selected);
outline: none;
}
.gc-error-box .gc-box {
border-color: var(--colors-focus-ring-error);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
/* css/design_system/components/modal.css */
.gc-modal {
background: var(--colors-surface-primary-light);
border: none;
border-radius: var(--radius-default);
box-shadow: var(--shadow-xl);
margin: auto;
overflow: visible;
padding: 0;
width: 592px;
}
.gc-modal::backdrop {
background-color: var(--colors-overlay-default);
opacity: 0;
transition: opacity 150ms ease-out;
}
.gc-modal[open]::backdrop {
opacity: 0.7;
transition: opacity 150ms ease-out;
}
.gc-modal .gc-modal-title {
color: var(--font-text-header);
position: relative;
}
.gc-modal .gc-modal-title h2 {
flex: 1;
padding-top: 6px;
color: var(--font-text-primary-dark);
}
.gc-modal .gc-modal-title .gc-icon {
color: var(--font-text-tertiary);
}
.gc-modal .gc-modal-content,
.gc-modal .gc-modal-description {
color: var(--font-text-primary-dark);
}
.gc-modal .gc-modal-content b,
.gc-modal .gc-modal-content strong,
.gc-modal .gc-modal-description b,
.gc-modal .gc-modal-description strong {
font-weight: var(--text-weight-number-500);
}
.gc-modal .gc-modal-description {
font-size: 1rem;
line-height: 1.5rem;
margin-block: -0.406em -0.376em;
}
.gc-modal > .gc-box {
padding: var(--spacing-3xl);
}
.gc-modal .gc-modal-wrapper {
gap: var(--spacing-7xl);
}
.gc-modal .gc-modal-body {
gap: var(--spacing-xl);
}
.gc-modal:has(form) .gc-modal-body {
gap: var(--spacing-5xl);
}
.gc-modal:has(.gc-upload-zone) .gc-modal-body {
gap: var(--spacing-3xl);
}
.gc-modal:has(.gc-upload-zone):has([data-uploaded="false"]) .gc-modal-actions {
display: none;
}
@media (max-width: 560px) {
.gc-modal {
width: auto;
margin-inline: var(--spacing-xl)
}
.gc-modal > .gc-box {
padding-inline: var(--spacing-xl);
}
.gc-modal .gc-modal-wrapper {
gap: var(--spacing-3xl);
}
.gc-modal .gc-modal-body {
gap: var(--spacing-base);
}
.gc-modal .gc-simple-form {
padding-bottom: 0;
}
.gc-modal:has(form) .gc-modal-wrapper {
gap: var(--spacing-7xl);
}
.gc-modal:has(form) .gc-modal-body {
gap: var(--spacing-3xl);
}
.gc-modal:has(.gc-upload-zone) > .gc-box {
padding-inline: var(--spacing-3xl);
}
}
/* css/design_system/components/pagination.css */
.gc-pagination {
--pagination-item-size: var(--spacing-7xl);
font-size: var(--text-font-size-sm);
line-height: var(--text-line-height-20);
}
.gc-pagination .pagination-page-number {
display: grid;
place-items: center;
width: var(--pagination-item-size);
height: var(--pagination-item-size);
}
.gc-pagination .pagination-ellipsis {
--pagination-ellipsis-size: 8px;
display: block;
width: auto;
padding-inline: calc((var(--pagination-item-size) - var(--pagination-ellipsis-size)) / 2);
line-height: var(--pagination-item-size);
}
.gc-pagination .pagination-ellipsis::before {
content: "\2026";
}
.gc-pagination .pagination-ellipsis.is-mobile {
display: none;
}
.gc-pagination a {
text-decoration: none;
color: var(--font-text-tertiary);
}
.gc-pagination a.is-current {
color: var(--font-text-selected);
font-weight: var(--text-weight-number-500);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-selected);
}
.gc-pagination .pagination-previous {
margin-right: var(--spacing-2xs);
}
.gc-pagination .pagination-next {
margin-left: var(--spacing-2xs);
}
.gc-pagination .pagination-previous,
.gc-pagination .pagination-next {
display: grid;
place-items: center;
padding-inline: 6px;
height: var(--pagination-item-size);
color: var(--font-text-disabled-primary-button);
}
.gc-pagination a.pagination-previous,
.gc-pagination a.pagination-next {
color: var(--font-text-link);
}
@media (max-width: 559px) {
.gc-pagination .pagination-page-number:not(.is-current, .is-last), .gc-pagination .pagination-ellipsis:not(.is-mobile) {
display: none;
}
.gc-pagination .pagination-ellipsis.is-mobile {
display: grid;
}
.gc-pagination .pagination-ellipsis.is-mobile:has(+ .is-last:not(.is-current)) {
padding-right: 0;
}
.gc-pagination .is-current + .pagination-ellipsis.is-mobile {
display: none;
}
.gc-pagination:has(.is-last.is-current) .is-first {
display: grid;
}
.gc-pagination:has(.is-last.is-current) .pagination-ellipsis.is-mobile {
padding-left: 0;
}
}
/* css/design_system/components/progress.css */
.gc-progress {
background: var(--colors-surface-primary-light);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-primary);
height: var(--spacing-xs);
width: 100%;
}
.gc-progress::-webkit-progress-bar {
border-radius: var(--radius-default);
background: var(--colors-surface-primary-light);
}
.gc-progress::-webkit-progress-value {
border-radius: var(--radius-default) 0px 0px var(--radius-default);
background: var(--colors-primary-800);
}
.gc-progress::-moz-progress-bar {
border-radius: var(--radius-default);
background: var(--colors-surface-primary-light);
}
/* css/design_system/components/responsive.css */
@media (max-width: 559px) {
.gc-responsive.gc-hide-below-sm {
display: none;
}
}
@media (max-width: 743px) {
.gc-responsive.gc-hide-below-md {
display: none;
}
}
@media (max-width: 1023px) {
.gc-responsive.gc-hide-below-lg {
display: none;
}
}
@media (max-width: 1439px) {
.gc-responsive.gc-hide-below-xl {
display: none;
}
}
@media (min-width: 560px) {
.gc-responsive.gc-hide-from-sm {
display: none;
}
}
@media (min-width: 744px) {
.gc-responsive.gc-hide-from-md {
display: none;
}
}
@media (min-width: 1024px) {
.gc-responsive.gc-hide-from-lg {
display: none;
}
}
@media (min-width: 1440px) {
.gc-responsive.gc-hide-from-xl {
display: none;
}
}
/* css/design_system/components/row.css */
.gc-row {
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.gc-row.gc-row-max-content {
width: -moz-max-content;
width: max-content;
}
/* css/design_system/components/simple_form.css */
.gc-simple-form {
height: 100%;
}
.gc-simple-form .gc-simple-form-back-button-wrapper {
color: var(--font-text-link);
font-size: var(--text-font-size-sm);
}
.gc-simple-form .gc-simple-form-back-button-wrapper a {
color: var(--font-text-link);
font-size: var(--text-font-size-sm);
text-decoration: none;
}
.gc-simple-form .gc-simple-form-description {
color: var(--font-text-primary-dark);
}
@media (max-width: 560px) {
.gc-simple-form > .gc-stack {
height: 100%;
}
.gc-simple-form > .gc-stack > .gc-stack {
height: 100%;
}
.gc-simple-form > .gc-stack > .gc-stack > .gc-stack.gc-simple-form-body {
height: 100%;
}
}
.gc-fieldset legend {
font-size: 1rem;
line-height: 1.375rem;
margin-block: -0.3435em -0.3135em;
font-weight: var(--text-weight-number-600);
color: var(--font-text-secondary);
}
/* css/design_system/components/stacking_cluster.css */
.gc-stacking-cluster {
width: 100%;
display: flex;
}
@media (max-width: 559px) {
.gc-stacking-cluster {
flex-direction: column;
align-items: normal;
justify-content: normal
}
}
@media (min-width: 560px) {
.gc-stacking-cluster {
flex-wrap: wrap
}
.gc-stacking-cluster > *:not(.gc-input) {
flex-shrink: 0;
}
.gc-stacking-cluster:has(.gc-input) {
flex-wrap: nowrap;
}
}
/* css/design_system/components/table.css */
.gc-table-wrapper {
width: 100%;
}
.gc-table-wrapper table {
display: none;
table-layout: fixed;
word-wrap: break-word;
}
.gc-table-wrapper table:has(tbody tr:nth-child(1)) {
display: table;
}
.gc-table-wrapper table:has(td.gc-table-number),
.gc-table-wrapper table:has(td.gc-table-short) {
table-layout: auto;
}
.gc-table-wrapper:has(table tbody tr:nth-child(1)) .gc-table-empty {
display: none;
}
.gc-table-wrapper #drag-inquiry-documents td {
padding: 0;
text-wrap-mode: wrap;
text-align: center;
background-color: var(--colors-surface-selected);
}
.gc-table-wrapper.gc-table-sticky .gc-table-sticky-sentinel {
height: 1px;
width: 100%;
opacity: 0;
pointer-events: none;
}
.gc-table-wrapper.gc-table-sticky .gc-table thead {
position: sticky;
top: 0;
z-index: var(--z-index-gc-table-sticky-header);
}
.gc-table-wrapper.gc-table-sticky .gc-table thead.gc-stuck {
filter: drop-shadow(0 1px 2px rgba(22, 32, 37, 0.09));
}
.gc-table-wrapper.gc-table-sticky .gc-table thead th {
background-color: var(--colors-surface-primary-light);
}
.gc-table-wrapper.gc-table-sticky .gc-table thead th:first-child {
border-radius: var(--radius-default) 0 0 0;
}
.gc-table-wrapper.gc-table-sticky .gc-table thead th:last-child {
border-radius: 0 var(--radius-default, 8px) 0 0;
}
.gc-table {
width: 100%;
border-spacing: 0;
background: var(--colors-surface-primary-light);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-tertiary);
}
.gc-table th {
text-transform: uppercase;
color: var(--font-text-tertiary);
font-size: var(--text-font-size-xs);
text-align: left;
height: calc(var(--spacing-5xl) + 1px);
letter-spacing: 0.015rem;
font-weight: var(--text-weight-number-500);
line-height: 18px;
padding: 0 var(--spacing-sm);
text-wrap: nowrap;
}
.gc-table th > span > a {
align-items: center;
color: var(--font-text-tertiary);
display: flex;
gap: var(--spacing-2xs);
min-height: var(--spacing-xl);
text-decoration: none;
text-wrap: nowrap;
}
.gc-table th .gc-table-sort-icon.gc-table-sort-asc svg path:first-child {
color: var(--font-text-disabled-secondary-button);
}
.gc-table th .gc-table-sort-icon.gc-table-sort-desc svg path:last-child {
color: var(--font-text-disabled-secondary-button);
}
.gc-table td {
font-size: var(--text-font-size-sm);
color: var(--font-text-primary-dark);
height: calc(var(--spacing-7xl) + 1px);
white-space: nowrap;
padding: 0 var(--spacing-sm);
line-height: var(--spacing-lg);
text-overflow: ellipsis;
overflow: hidden;
text-wrap: nowrap;
}
.gc-table td a {
height: var(--spacing-xl);
}
.gc-table td.gc-table-action,
.gc-table td.gc-table-number,
.gc-table td.gc-table-short {
width: 0.1%;
}
.gc-table td.gc-table-number {
text-align: right;
font-variant-numeric: lining-nums tabular-nums;
line-height: normal;
}
.gc-table td.gc-table-action {
padding-inline: 0 var(--spacing-2xs);
overflow: visible;
}
.gc-table td,
.gc-table th {
border-bottom: 1px solid var(--colors-border-tertiary);
}
.gc-table tbody tr:hover {
background-color: var(--colors-surface-hover-light);
}
.gc-table tbody tr:hover a {
color: var(--font-text-link);
}
.gc-table tbody tr:hover:has(td .gc-table-primary-column) {
cursor: pointer;
}
.gc-table tbody tr:hover .gc-table-action button:hover {
background-color: var(--colors-surface-primary-light);
outline: 2px solid var(--colors-primary-600);
outline-offset: -2px;
}
.gc-table tbody tr:hover .gc-table-action button:is([popovertarget]):hover {
outline: 1px solid var(--colors-border-tertiary);
outline-offset: 0;
}
.gc-table th:has(a:focus-visible) {
border-radius: var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-table tbody tr:has(.gc-table-primary-column a:focus-visible) {
border-radius: var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-table th a:focus-visible,
.gc-table .gc-table-primary-column a:focus-visible {
outline: none;
}
.gc-table .gc-table-action button:focus-visible {
border-radius: var(--radius-focus-ring);
outline: 2px solid var(--colors-focus-ring-default);
outline-offset: -2px;
}
.gc-table-empty {
padding: calc(var(--spacing-base) - 1px) var(--spacing-7xl);
border-radius: var(--radius-default);
border: 1px solid var(--colors-border-secondary);
background: var(--colors-surface-secondary);
}
.gc-table-empty .gc-empty-message {
font-size: var(--text-font-size-base);
color: var(--font-text-tertiary);
text-align: center;
line-height: var(--size-24);
}
.gc-table-empty a {
line-height: var(--size-24);
flex-shrink: 0;
}
@media (max-width: 559px) {
.gc-table-empty {
padding: var(--spacing-xl);
height: auto;
}
.gc-table-empty .gc-empty-message {
line-height: 16.5px;
}
.gc-table-empty a {
line-height: 11px;
}
}
/* css/design_system/components/tabs.css */
.gc-tabs {
--tab-height: var(--size-32);
font-family: var(--font-family-body);
border-bottom: 1px solid var(--colors-border-secondary);
width: 100%;
position: sticky;
top: 0;
z-index: var(--z-index-gc-tabs);
background-color: var(--color-neutral-gray-white);
}
.gc-tabs .gc-tab-row {
box-sizing: content-box;
height: var(--tab-height);
overflow-x: auto;
padding: 10px;
margin: -10px;
scrollbar-width: none;
}
.gc-tabs .gc-tab-row::-webkit-scrollbar {
display: none;
}
.gc-tabs .gc-tab-link-wrapper {
position: relative;
flex-shrink: 0;
}
.gc-tabs .gc-underline {
position: absolute;
box-sizing: content-box;
z-index: 0;
top: 0;
left: 0;
height: var(--tab-height);
width: 100%;
}
.gc-tabs a {
display: inline-block;
z-index: 1;
height: var(--tab-height);
width: 100%;
color: var(--font-text-tertiary);
cursor: pointer;
font-weight: var(--text-weight-number-500);
overflow-x: hidden;
position: relative;
text-decoration: none;
top: 1px;
white-space: nowrap;
}
.gc-tabs a:hover {
color: var(--font-text-primary-dark);
}
.gc-tabs a.gc-active {
color: var(--font-text-selected);
}
.gc-tabs a.gc-active + .gc-underline {
border-bottom: 2px solid var(--colors-border-selected);
height: calc(var(--tab-height) - 1px);
}
.gc-tabs a:focus-visible {
border-radius: var(--radius-focus-ring);
outline-offset: 4px;
outline: 2px solid var(--colors-focus-ring-default);
}
.gc-tabs.gc-tabs-size-sm a {
font-size: var(--text-font-size-sm);
}
.gc-tabs.gc-tabs-size-base a {
font-size: var(--text-font-size-base);
}
.gc-tabs .gc-tab-row > div > a:not(.gc-active):hover + .gc-underline {
border-bottom: 1px solid var(--colors-border-primary-dark);
}
/* css/design_system/components/toggle.css */
.gc-toggle-input .gc-toggle-switch {
position: relative;
width: 36px;
height: 22px;
background: var(--colors-surface-toggle);
border-radius: var(--radius-full);
flex-shrink: 0;
}
.gc-toggle-input .gc-toggle-switch:hover {
cursor: pointer;
}
.gc-toggle-input .gc-toggle-switch::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 2px;
top: 50%;
transition: all 200ms ease-out;
background: var(--colors-surface-primary-light);
cursor: pointer;
border-radius: 50%;
transform: translateY(-50%);
box-shadow: var(--shadow-xs);
}
.gc-toggle-input input[type=checkbox]:checked + .gc-toggle-switch {
background: var(--colors-surface-selected-pickers);
}
.gc-toggle-input input[type=checkbox]:checked + .gc-toggle-switch::before {
left: 18px;
}
.gc-toggle-input input[type=checkbox]:disabled + .gc-toggle-switch {
background: var(--colors-surface-disabled-button);
}
.gc-toggle-input input[type=checkbox]:disabled + .gc-toggle-switch:hover {
cursor: not-allowed;
}
.gc-toggle-input input[type=checkbox]:disabled + .gc-toggle-switch::before {
background: var(--colors-surface-disabled-input);
cursor: not-allowed;
}
.gc-toggle-input input[type=checkbox]:disabled:checked + .gc-toggle-switch {
background: var(--colors-surface-disabled-selected);
}
.gc-toggle-input input[type=checkbox]:disabled:checked + .gc-toggle-switch::before {
background: var(--colors-surface-toggle-disabled);
}
.gc-toggle-input input[type=checkbox]:not([disabled]):focus-visible + .gc-toggle-switch {
border-radius: var(--radius-full);
outline: 2px solid var(--font-text-primary-dark);
outline-offset: 2px;
}
/* css/design_system/components/tooltip.css */
.gc-tooltip {
--arrow-border-block: var(--size-6) solid var(--colors-surface-primary-dark);
display: none;
position: absolute;
justify-content: center;
width: -moz-fit-content;
width: fit-content;
word-break: break-word;
pointer-events: none;
}
.gc-tooltip [role=tooltip] {
position: relative;
display: block;
width: -moz-max-content;
width: max-content;
max-width: 240px;
}
.gc-tooltip [role=tooltip] .gc-tooltip-arrow {
position: absolute;
border-block: 0;
border-inline: 6.5px solid transparent;
height: 0;
width: 0;
}
.gc-tooltip [role=tooltip][data-side=top] .gc-tooltip-arrow {
bottom: -6px;
border-top: var(--arrow-border-block);
}
.gc-tooltip [role=tooltip][data-side=bottom] .gc-tooltip-arrow {
top: -6px;
border-bottom: var(--arrow-border-block);
}
.gc-tooltip [role=tooltip] .gc-tooltip-content {
color: var(--font-text-primary-light);
background: var(--colors-surface-primary-dark);
border-radius: var(--radius-default);
padding: var(--spacing-xs);
}
/* css/design_system/components/typography.css */
.gc-type-h1,
.gc-type-h2,
.gc-type-h3,
.gc-type-h4,
.gc-type-h5,
.gc-type-h1-desktop,
.gc-type-h2-desktop,
.gc-type-h3-desktop,
.gc-type-h4-desktop,
.gc-type-h5-desktop {
font-family: var(--font-family-heading);
font-weight: var(--text-weight-number-600);
}
.gc-type-h1.gc-font-weight-medium, .gc-type-h2.gc-font-weight-medium, .gc-type-h3.gc-font-weight-medium, .gc-type-h4.gc-font-weight-medium, .gc-type-h5.gc-font-weight-medium, .gc-type-h1-desktop.gc-font-weight-medium, .gc-type-h2-desktop.gc-font-weight-medium, .gc-type-h3-desktop.gc-font-weight-medium, .gc-type-h4-desktop.gc-font-weight-medium, .gc-type-h5-desktop.gc-font-weight-medium {
font-weight: var(--text-weight-number-500);
}
.gc-type-caption,
.gc-type-xl,
.gc-type-lg,
.gc-type-base,
.gc-type-sm,
.gc-type-xs {
font-family: var(--font-family-body);
}
.gc-type-h1,
.gc-type-h1-desktop {
color: var(--font-text-primary-dark);
font-size: 2rem;
line-height: 2.5rem;
margin-block: -0.281em -0.251em;
}
.gc-type-h2,
.gc-type-h2-desktop {
font-size: 1.5rem;
line-height: 2rem;
margin-block: -0.3227em -0.2927em;
}
.gc-type-h3,
.gc-type-h3-desktop {
font-size: 1.125rem;
line-height: 1.5rem;
margin-block: -0.3227em -0.2927em;
}
.gc-type-h4,
.gc-type-h4-desktop {
font-size: 1rem;
line-height: 1.375rem;
margin-block: -0.3435em -0.3135em;
}
.gc-type-h5,
.gc-type-h5-desktop {
font-size: 0.875rem;
line-height: 1.25rem;
margin-block: -0.3703em -0.3403em;
}
.gc-type-caption {
font-size: 0.75rem;
line-height: 1.125rem;
margin-block: -0.406em -0.376em;
text-transform: uppercase;
font-weight: var(--text-weight-number-600);
letter-spacing: 0.015rem;
}
.gc-type-caption.gc-font-weight-medium {
font-weight: var(--text-weight-number-500);
}
.gc-type-xl {
font-size: 1.5rem;
line-height: 2.25rem;
margin-block: -0.406em -0.376em;
}
.gc-type-lg {
font-size: 1.125rem;
line-height: 1.75rem;
margin-block: -0.4338em -0.4038em;
}
.gc-type-base {
font-size: 1rem;
line-height: 1.5rem;
margin-block: -0.406em -0.376em;
}
.gc-type-sm {
font-size: 0.875rem;
line-height: 1.25rem;
margin-block: -0.3703em -0.3403em;
}
.gc-type-xs {
font-size: 0.75rem;
line-height: 1.1875rem;
margin-block: -0.4477em -0.4177em;
}
@media (max-width: 559px) {
.gc-type-h1 {
font-size: 1.625rem;
line-height: 2rem;
margin-block: -0.2714em -0.2414em;
}
.gc-type-h2 {
font-size: 1.375rem;
line-height: 1.75rem;
margin-block: -0.2924em -0.2624em;
}
.gc-type-h3 {
font-size: 1rem;
line-height: 1.375rem;
margin-block: -0.3435em -0.3135em;
}
.gc-type-h4 {
font-size: 0.875rem;
line-height: 1.25rem;
margin-block: -0.3703em -0.3403em;
}
.gc-type-h5 {
font-size: 0.75rem;
line-height: 1.125rem;
margin-block: -0.406em -0.376em;
}
.gc-type-caption {
font-size: 0.75rem;
line-height: 1.1875rem;
margin-block: -0.4477em -0.4177em;
letter-spacing: normal;
}
.gc-type-xl {
font-size: 1.25rem;
line-height: 1.875rem;
margin-block: -0.406em -0.376em;
}
.gc-type-lg {
font-size: 1.125rem;
line-height: 1.625rem;
margin-block: -0.3782em -0.3482em;
}
.gc-type-base {
font-size: 1rem;
line-height: 1.375rem;
margin-block: -0.3435em -0.3135em;
}
.gc-type-xs {
font-size: 0.75rem;
line-height: 1.125rem;
margin-block: -0.3227em -0.2927em;
}
}
/* css/design_system/components/upload_zone.css */
.gc-upload-zone {
align-items: center;
align-self: stretch;
background: var(--colors-surface-secondary);
border-radius: var(--radius-default);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
}
.gc-upload-zone.gc-upload-zone-size-base {
min-height: 280px;
}
.gc-upload-zone.gc-upload-zone-size-sm {
min-height: 128px;
}
.gc-upload-zone::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: var(--dashed-border-svg);
z-index: var(--z-index-gc-upload-zone-background);
}
.gc-upload-zone > .gc-stack {
padding: var(--spacing-none) var(--spacing-10xl);
width: 100%;
align-items: center;
z-index: var(--z-index-gc-upload-zone-content);
}
.gc-upload-zone > .gc-stack:has(img) {
padding: 0;
}
.gc-upload-zone label {
color: var(--font-text-link);
cursor: pointer;
font-family: var(--font-family-body);
font-weight: var(--text-weight-number-600);
}
.gc-upload-zone .gc-help {
color: var(--font-text-tertiary);
}
.gc-upload-zone .gc-upload-zone-image-wrapper {
width: 100%;
padding-bottom: 100%;
position: relative;
overflow: hidden;
}
.gc-upload-zone .gc-upload-zone-document-preview-wrapper {
color: var(--font-text-primary-dark);
justify-content: center;
}
.gc-upload-zone .gc-upload-zone-document-preview-wrapper .gc-icon {
color: var(--font-text-tertiary);
align-self: center;
}
.gc-upload-zone img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
}
.gc-upload-zone:has(.gc-error) {
background: var(--colors-surface-error);
}
.gc-upload-zone:has(.gc-error)::before {
background-image: var(--error-dashed-border-svg);
}
.gc-upload-zone:has(.gc-error) .gc-help {
display: none;
}
.gc-upload-zone:has(img) {
background: none;
}
.gc-upload-zone:has(img)::before {
background-image: none;
}
@media (max-width: 560px) {
.gc-upload-zone > .gc-stack {
padding-inline: var(--spacing-base);
}
}
/* css/design_system.css */
html,
body {
height: 100%;
}
/*
This font software is the property of Commercial Type.
You may not modify the font software, use it on another website, or install it on a computer.
License information is available at http://commercialtype.com/eula
For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com
Copyright (C) 2023 Schwartzco Inc.
License: 2307-YTXIXD
*/
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-SuperItalic-Web-45a725c393b1692115cee9f669e5f18b.woff2?vsn=d") format("woff2");
font-weight: 900;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Super-Web-d14232972de6b575346bede1e648068b.woff2?vsn=d") format("woff2");
font-weight: 900;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-BlackItalic-Web-860f3b27cfb3e7295bfc73cd23f6d128.woff2?vsn=d") format("woff2");
font-weight: 800;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Black-Web-ee19f04445e990c05e98a65d442a2be2.woff2?vsn=d") format("woff2");
font-weight: 800;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-BoldItalic-Web-13bfe74bf63902ebfccf9e9b2a3b1d29.woff2?vsn=d") format("woff2");
font-weight: 700;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Bold-Web-911f4d49b45afdac13efe55639f1806f.woff2?vsn=d") format("woff2");
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-SemiboldItalic-Web-86c79855b8a1b06df0e3710a72bd73a1.woff2?vsn=d") format("woff2");
font-weight: 600;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Semibold-Web-6d2e1a8ebeaac1437a401b17fc05aed7.woff2?vsn=d") format("woff2");
font-weight: 600;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-MediumItalic-Web-eba607ee79647a4c834bf302604de801.woff2?vsn=d") format("woff2");
font-weight: 500;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Medium-Web-032602038b4c7358c598238e02d883af.woff2?vsn=d") format("woff2");
font-weight: 500;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-RegularItalic-Web-a718c633b82df831828a87636159ff75.woff2?vsn=d") format("woff2");
font-weight: 400;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Regular-Web-5c7d851b3cb62d3e74a2d777e910f8bf.woff2?vsn=d") format("woff2");
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-LightItalic-Web-abc2852a8d8edfc111e7043b42a0f4f6.woff2?vsn=d") format("woff2");
font-weight: 300;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Light-Web-d034695e473a77bbb50e6c91e47b5f8d.woff2?vsn=d") format("woff2");
font-weight: 300;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-ExtralightItalic-Web-db157e933735556e62960ae8ec53f561.woff2?vsn=d") format("woff2");
font-weight: 200;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Extralight-Web-f16cedb1cd63612dcb16352378cc3471.woff2?vsn=d") format("woff2");
font-weight: 200;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-ThinItalic-Web-f12d7cdc5fd721d6cd3233869da6b049.woff2?vsn=d") format("woff2");
font-weight: 100;
font-style: italic;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Thin-Web-ed4202629d309765bbf67c9a32fe5534.woff2?vsn=d") format("woff2");
font-weight: 100;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Italic-VF-Web-70aa7efc280577f2a331d0ed50c026ee.woff2?vsn=d") format("woff2-variations");
}
@font-face {
font-family: "Graphik Web";
font-display: block;
src: url("/fonts/Graphik-Upright-VF-Web-b927e3a8984ae2651912f6283c445376.woff2?vsn=d") format("woff2-variations");
}
.type-h1 {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 700;
font-size: 1.75rem;
line-height: 2rem;
margin-block: -0.2494em -0.1784em;
}
@media (min-width: 40rem) {
.type-h1 {
font-size: 2rem;
line-height: 2.25rem;
margin-block: -0.2405em -0.1695em
}
}
.type-h2,
.v2-content .ql-editor h1 {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 600;
font-size: 1.375rem;
line-height: 1.6875rem;
margin-block: -0.2916em -0.2206em;
}
@media (min-width: 40rem) {
.type-h2,
.v2-content .ql-editor h1 {
font-size: 1.5rem;
line-height: 2rem;
margin-block: -0.3447em -0.2737em
}
}
.type-h3,
.v2-content .ql-editor h2 {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 600;
font-size: 1.25rem;
line-height: 1.5rem;
margin-block: -0.278em -0.207em;
}
@media (min-width: 40rem) {
.type-h3,
.v2-content .ql-editor h2 {
font-size: 1.375rem;
line-height: 1.6875rem;
margin-block: -0.2916em -0.2206em
}
}
.type-body,
.v2-content .ql-editor p,
.v2-content .ql-editor ul,
.v2-content .ql-editor ol {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-size: 1rem;
line-height: 1.375rem;
}
.type-body:not(.not-trimmed), .v2-content .ql-editor p:not(.not-trimmed), .v2-content .ql-editor ul:not(.not-trimmed), .v2-content .ql-editor ol:not(.not-trimmed) {
margin-block: -0.3655em -0.2945em;
}
@media (min-width: 40rem) {
.type-body,
.v2-content .ql-editor p,
.v2-content .ql-editor ul,
.v2-content .ql-editor ol {
font-size: 1.125rem;
line-height: 1.5625rem
}
.type-body:not(.not-trimmed), .v2-content .ql-editor p:not(.not-trimmed), .v2-content .ql-editor ul:not(.not-trimmed), .v2-content .ql-editor ol:not(.not-trimmed) {
margin-block: -0.3724em -0.3014em;
}
}
.type-body strong, .v2-content .ql-editor p strong, .v2-content .ql-editor ul strong, .v2-content .ql-editor ol strong {
font-weight: 600;
}
.type-body ul, .v2-content .ql-editor p ul, .v2-content .ql-editor ul ul, .v2-content .ql-editor ol ul {
margin: 0;
position: relative;
right: 4px;
}
.type-body-micro {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-size: 0.875rem;
line-height: 1.125rem;
}
.type-body-micro:not(.not-trimmed) {
margin-block: -0.3209em -0.2499em;
}
@media (min-width: 40rem) {
.type-body-micro {
font-size: 1rem;
line-height: 1.1875rem
}
.type-body-micro:not(.not-trimmed) {
margin-block: -0.2718em -0.2008em;
}
}
.type-body-micro strong {
font-weight: 600;
}
.type-body-micro ul {
margin: 0;
position: relative;
right: 4px;
}
.type-body-nano {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-size: 0.875rem;
line-height: 120%;
}
.type-body-nano:not(.not-trimmed) {
margin-block: -0.278em -0.207em;
}
@media (min-width: 40rem) {
.type-body-nano {
font-size: 0.875rem
}
}
.type-preamble {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-variant: all-small-caps;
font-weight: 600;
/* border: solid 1px black; */
/* cap height = 10px */
font-size: 1.25rem;
line-height: 1.5rem;
margin-block: -0.528em -0.207em;
}
@media (min-width: 40rem) {
.type-preamble {
/* cap height = 10.725px */
font-size: 1.375rem;
line-height: 1.625rem;
margin-block: -0.4689em -0.1979em
}
}
.type-button {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 500;
font-size: 1.125rem;
line-height: 1.375rem;
margin-block: -0.2891em -0.2181em;
}
@media (min-width: 40rem) {
.type-button {
font-size: 1.25rem;
line-height: 1.5rem;
margin-block: -0.278em -0.207em
}
}
.type-button-cta {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 500;
font-size: 1.375rem;
line-height: 1.625rem;
margin-block: -0.2689em -0.1979em;
}
@media (min-width: 80rem) {
.type-button-cta {
font-size: 1.5rem;
line-height: 1.75rem;
margin-block: -0.2613em -0.1903em
}
}
.type-button-micro {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 500;
font-size: 1rem;
line-height: 1.25rem;
}
.type-button-micro:not(.not-trimmed) {
margin-block: -0.303em -0.232em;
}
@media (min-width: 80rem) {
.type-button-micro {
font-size: 1.125rem;
line-height: 1.375rem
}
.type-button-micro:not(.not-trimmed) {
margin-block: -0.2891em -0.2181em;
}
}
/* Rename to field label? */
.type-label {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 600;
font-size: 1rem;
line-height: 1.1875rem;
margin-block: -0.2718em -0.2008em;
}
@media (min-width: 40rem) {
.type-label {
font-size: 1.125rem;
line-height: 1.375rem;
margin-block: -0.2891em -0.2181em
}
}
.type-input-text,
.type-input-select {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 400;
font-size: 1.125rem;
line-height: 1.625rem;
}
.type-input-text:not(.not-trimmed), .type-input-select:not(.not-trimmed) {
margin-block: -0.4002em -0.3292em;
}
@media (min-width: 40rem) {
.type-input-text,
.type-input-select {
font-size: 1.25rem;
line-height: 1.75rem
}
.type-input-text:not(.not-trimmed), .type-input-select:not(.not-trimmed) {
margin-block: -0.378em -0.307em;
}
}
/* Rename to field error? */
.type-input-error {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-feature-settings: "liga", "kern";
font-weight: 500;
font-size: 1rem;
line-height: 1.125rem;
margin-block: -0.2405em -0.1695em;
}
@media (min-width: 40rem) {
.type-input-error {
font-size: 1.125rem;
line-height: 1.375rem;
margin-block: -0.2891em -0.2181em
}
}
/* card status = body micro with weight 600 */
.type-action-link {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-variant: all-small-caps;
font-feature-settings: "liga", "kern";
font-weight: 500;
/* border: solid 1px black; */
/* cap height = 10px */
font-size: 1.25rem;
line-height: 1.5rem;
margin-block: -0.528em -0.207em;
}
@media (min-width: 40rem) {
.type-action-link {
/* cap height = 10.725px */
font-size: 1.375rem;
line-height: 1.625rem;
margin-block: -0.4689em -0.1979em
}
}
.type-pill {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-variant: all-small-caps;
font-feature-settings: "liga", "kern";
font-weight: 500;
font-size: 1rem;
line-height: 1rem;
}
.type-pill:not(.not-trimmed) {
margin-block: -0.378em -0.127em;
}
@media (min-width: 40rem) {
.type-pill {
font-size: 1.25rem;
line-height: 1.25rem
}
.type-pill:not(.not-trimmed) {
margin-block: -0.408em -0.127em;
}
}
.type-progress {
font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-variant: all-small-caps;
font-feature-settings: "liga", "kern";
font-weight: 500;
font-size: 1rem;
line-height: 1rem;
}
.type-progress:not(.not-trimmed) {
margin-block: -0.478em -0.407em;
}
@media (min-width: 40rem) {
.type-progress {
font-size: 1rem;
line-height: 1rem
}
.type-progress:not(.not-trimmed) {
margin-block: -0.4053em -0.3343em;
}
}
.all-caps {
font-variant: small-caps;
}
.all-small-caps {
font-variant: all-small-caps;
}
:root {
--color-header-light: hsl(var(--color-hue) 6% 92%);
--color-white: white;
--color-black: #1c1c1c;
--color-focus-blue: #85adf2;
--color-gray-1: #f5f5f5;
--color-gray-2: #e8e8e8;
--color-gray-3: #d4d4d4;
--color-gray-4: #a3a3a3;
--color-gray-5: #858585;
--color-gray-6: #757575;
--color-gray-7: #595959;
--color-gray-8: #414141;
--color-red-light: #ffeceb;
--color-red-medium: #c9180c;
--color-red-dark: #7b0d06;
--color-green-light: #e6faf7;
--color-green-medium: #06a28b;
--color-green-dark: #097061;
--color-primary: hsl(var(--color-hue), var(--color-saturation), var(--color-lightness));
--color-primary-light: hsl(var(--color-hue), var(--color-saturation), calc(var(--color-lightness) + 5%));
--color-primary-dark: hsl(var(--color-hue), var(--color-saturation), calc(var(--color-lightness) - 5%));
--color-primary-offwhite: hsl(var(--color-hue), 100%, 98%);
--color-primary-muted: hsl(var(--color-hue), 24%, 36%);
/* Older stuff follows. */
--color-dark-5: rgba(0 0 0 / 5%);
--color-dark-10: rgba(0 0 0 / 10%);
--color-dark-20: rgba(0 0 0 / 20%);
--color-dark-30: rgba(0 0 0 / 30%);
--color-dark-40: rgba(0 0 0 / 40%);
--color-dark-50: rgba(0 0 0 / 50%);
--color-dark-60: rgba(0 0 0 / 60%);
--color-dark-70: rgba(0 0 0 / 70%);
--color-dark-80: rgba(0 0 0 / 80%);
--color-dark-90: rgba(0 0 0 / 90%);
--color-dark-95: rgba(0 0 0 / 95%);
--color-gray-50: #fafafa;
--color-gray-100: #f5f5f5;
--color-gray-200: #e5e5e5;
--color-gray-300: #d4d4d4;
--color-gray-400: #a3a3a3;
--color-gray-500: #737373;
--color-gray-600: #525252;
--color-gray-700: #404040;
--color-gray-800: #262626;
--color-gray-900: #171717;
--color-primary-100: hsl(var(--color-hue), 36%, 96%);
--color-primary-200: hsl(var(--color-hue), 30%, 94%);
--color-primary-300: hsl(var(--color-hue), 24%, 90%);
--color-primary-400: hsl(var(--color-hue), var(--color-saturation), calc(var(--color-lightness) + 5%));
--color-primary-500: hsl(var(--color-hue), var(--color-saturation), var(--color-lightness));
--color-primary-600: hsl(var(--color-hue), var(--color-saturation), calc(var(--color-lightness) - 5%));
--color-primary-700: hsl(var(--color-hue), 16%, 36%);
--color-primary-800: hsl(var(--color-hue), 18%, 30%);
--color-primary-900: hsl(var(--color-hue), 20%, 24%);
--color-red-50: #fef2f2;
--color-red-100: #fee2e2;
--color-red-200: #fecaca;
--color-red-300: #feb2b2;
--color-red-400: #fc8181;
--color-red-500: #f56565;
--color-red-600: #e53e3e;
--color-red-700: #c53030;
--color-red-800: #9b2c2c;
--color-red-900: #742a2a;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-300: #86efac;
--color-green-500: #22c55e;
--color-green-700: #15803d;
--color-orange-50: #fff7ed;
--color-orange-100: #ffedd5;
--color-orange-300: #fdba74;
--color-orange-500: #f97316;
--color-orange-700: #c2410c;
--color-yellow-100: #fffff0;
--color-yellow-200: #fefcbf;
--color-yellow-300: #faf089;
--color-yellow-400: #f6e05e;
--color-yellow-500: #ecc94b;
--color-yellow-600: #d69e2e;
--color-yellow-700: #b7791f;
--color-yellow-800: #975a16;
--color-yellow-900: #744210;
--shadow--sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow--md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow--lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow--xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow--2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--shadow--inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--shadow--none: 0 0 #000;
--min-block--screen: 100vh;
}
.divider {
border-top: solid 1px var(--color-gray-200);
border-left: solid 1px var(--color-gray-200);
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.v2-content .ql-editor h1,
.v2-content .ql-editor h2,
.v2-content .ql-editor p,
.v2-content .ql-editor ul,
.v2-content .ql-editor ol {
margin-block: 0px !important;
}
.v2-content .ql-editor h2 {
margin-bottom: 8px !important;
}
.v2-content .ql-editor h2:not(:first-child) {
margin-top: 8px !important;
}
.v2-content .ql-editor p:not(:first-child):has(strong:only-child) {
margin-top: 16px !important;
}
.v2-content .ql-editor p:has(strong:only-child) {
margin-bottom: 4px !important;
}
.v2-content .ql-editor .ql-video {
width: 100%;
aspect-ratio: 16/9;
}
@media (min-width: 40rem) {
.v2-content .ql-editor .ql-video {
min-height: 300px
}
}
.v2-content .ql-editor ul li {
-webkit-padding-start: 12px !important;
padding-inline-start: 12px !important;
}
@media (min-width: 40rem) {
main {
margin-inline: 16px;
margin-block: 64px
/* relative sm:block-start-16 xl:block-start-0 */
}
}
@media (min-width: 80rem) {
main {
margin-inline: 0;
margin-block: 0
}
}
.border-header {
border-bottom: solid 1px var(--color-gray-300);
}
.gc-header a,
.gc-header a:hover {
text-decoration: none;
}
.gc-header .secondary svg {
width: 18px;
height: 18px;
stroke-width: 1.6px;
}
.gc-header .secondary a.active svg {
stroke-width: 2px;
}
.gc-header .skip-nav-links:focus-within {
border: solid 1px var(--color-dark-10);
border-top: none;
}
.gc-header .skip-nav-links a,
.gc-header .skip-nav-links a:hover {
border-bottom: none !important;
}
.gc-header .primary a,
.gc-header .secondary a {
color: var(--color-gray-7);
}
.gc-header .primary a:hover,
.gc-header .secondary a:hover {
color: var(--color-black);
}
.gc-header .primary a.active,
.gc-header .secondary a.active {
font-weight: 700;
}
.secondary-menu {
border: solid 1px var(--color-gray-300);
}
.gc-app-switcher-logo-link svg.gc-app-frame-nav-logo g {
mix-blend-mode: luminosity;
opacity: 0.6;
}
.gc-app-switcher-logo-link:hover svg.gc-app-frame-nav-logo g {
mix-blend-mode: unset;
opacity: unset;
}
#sidebar {
border-bottom: solid 1px var(--color-gray-300);
}
@media (min-width: 80rem) {
#sidebar {
border-bottom: none
}
}
#sidebar h3 {
/* border-bottom: solid 1px var(--color-gray-200); */
}
#sidebar h3.v2-heading {
/* border-bottom: solid 1px var(--color-gray-3); */
}
.trip-name-header {
border-bottom: none;
}
@media (min-width: 80rem) {
.sidebar-and-main > .main-container {
min-inline-size: 0;
}
}
.box-impersonation-status-bar {
border-bottom: solid 1px var(--color-gray-300);
}
.design-system .example-box {
/* background-color: #eee; */
border: solid 2px;
}
.design-system .tall {
min-height: 50vh;
}
.design-system .example-box.invert {
background-color: black;
color: white;
}
.design-system code {
background-color: var(--color-gray-100);
border: solid 1px var(--color-gray-200);
border-radius: 4px;
padding-inline: 8px;
}
.design-system .resizable {
resize: horizontal;
overflow: hidden;
}
.group-fieldset {
margin-top: 0;
}
/* Nothing here yet */
:root {
--pad-inline--input: 16px;
--pad-inline--password: 16px 44px;
--pad-block--input: 9px 10px;
--radius--input: 8px;
--radius--split-input-first: 8px 0px 0px 8px;
--radius--split-input-last: 0px 8px 8px 0px;
--radius--checkbox: 5px;
}
@media (min-width: 40rem) {
:root {
--pad-inline--input: 18px;
--pad-inline--password: 18px 48px;
--pad-block--input: 10px 12px;
--radius--input: 10px
}
}
input[type="radio"].radio-button,
input[type="checkbox"].checkbox {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--color-black);
background-color: var(--color-white);
}
input[type="radio"].radio-button:focus-visible,
input[type="checkbox"].checkbox:focus-visible {
outline: 1.5px solid var(--color-black);
outline-offset: 0px;
}
@media (min-width: 40rem) {
input[type="radio"].radio-button:focus-visible,
input[type="checkbox"].checkbox:focus-visible {
outline-width: 2px
}
}
input[type="radio"].radio-button:checked {
box-shadow: 0 0 0 3px var(--color-white) inset;
}
input[type="radio"].radio-button:checked:not(:disabled) {
background-color: var(--color-black);
}
input[type="radio"].radio-button:disabled:checked {
background-color: var(--color-gray-5);
}
input[type="radio"].radio-button:disabled:not(:checked) {
background-color: white;
}
input[type="checkbox"].checkbox:checked {
background: url("../static/svg/generic/checkbox-checkmark.svg") no-repeat center;
}
input[type="checkbox"].checkbox:checked:not(:disabled) {
border: 1px solid var(--color-black);
background: url("../static/svg/generic/checkbox-checkmark.svg") no-repeat center var(--color-white);
background-size: 16px;
}
input[type="checkbox"].checkbox:checked::after {
content: none;
}
input[type="checkbox"].checkbox:disabled {
background-color: white;
opacity: 0.48;
}
select.input-select {
background-image: url("../static/icons/custom/select-caret.svg");
background-size: 20px;
}
@media (min-width: 40rem) {
select.input-select {
background-size: 22px
}
}
/* The design system styles native inputs with unscoped element selectors. Inputs
outside a design system field keep their legacy rendering (legacy_base/forms.css).
The list-form :not() below keeps these rules at the same specificity as
legacy_base/forms.css, so per-component sizing (e.g. filters-component.css) still wins. */
input[type="checkbox"]:not(.checkbox, [data-toggle], .gc-checkbox-input *),
input[type="radio"]:not(.radio-button, .gc-radio-input *) {
position: static;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
}
input[type="checkbox"]:not(.checkbox):not([data-toggle]):not(.gc-checkbox-input *):checked {
border: none;
background-color: transparent;
background-image: url("../static/svg/generic/check-square.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
input[type="checkbox"]:not(.checkbox):not([data-toggle]):not(.gc-checkbox-input *):checked::after {
content: none;
}
input[type="radio"]:not(.radio-button, .gc-radio-input *):checked {
border: none;
background-color: transparent;
background-image: url("../static/svg/generic/circle-radio-checked.svg");
}
.icon:not(.hidden) {
display: inline-flex;
align-items: center;
}
.icon svg {
height: 100%;
aspect-ratio: 1/1;
}
:root {
--pad-inline--button: 16px;
--radius--button: 8px;
--radius--button-cta: 10px;
--radius--button-micro: 6px;
}
@media (min-width: 40rem) {
:root {
--pad-inline--button: 18px;
--radius--button: 10px;
--radius--button-cta: 12px;
--radius--button-micro: 8px
}
}
.type-button-micro {
--pad-block--button: 16px;
}
@media (min-width: 80rem) {
.type-button-micro {
--pad-block--button: 15px 17px
}
}
.v2-button {
outline-offset: 3px;
}
.v2-button:hover {
cursor: pointer;
}
.v2-button:disabled:hover {
background-color: var(--color-primary);
}
.v2-button.secondary:disabled:hover,
.v2-button.ghost:disabled:hover {
background-color: var(--color-white);
color: var(--color-black);
}
:root {
--radius--pill: 8px;
}
@media (min-width: 40rem) {
:root {
--radius--pill: 10px
}
}
@media (min-width: 80rem) {
:root {
--radius--pill: 12px
}
}
.card-label:has(input:checked) {
background-color: var(--color-primary-offwhite);
}
ul.card-list {
margin-left: 16px;
padding-right: 28px;
}
ul.card-list li {
padding-left: 6px;
}
@media (min-width: 40rem) {
ul.card-list li {
padding-left: 10px
}
}
.error-summary-card {
border-left-width: 8px;
border-color: var(--color-red-medium);
}
.card-label:has(input[type=radio]) {
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.10);
}
.lesser-cards {
display: flex;
flex-direction: column;
}
@media (min-width: 55rem) {
.lesser-cards {
flex-direction: row;
align-items: stretch
}
}
.inverted-cluster {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (min-width: 55rem) {
.inverted-cluster {
flex-direction: column;
align-items: start
}
}
.traveler-row {
border-bottom: solid 1px var(--color-gray-3);
}
@media (min-width: 40rem) {
.traveler-row {
padding-inline: 8px;
position: relative;
inset-inline-start: -8px;
inline-size: calc(100% + 16px)
}
a.traveler-row:hover {
background-color: var(--color-primary-offwhite)
}
}
.traveler-key-value {
display: flex;
align-items: start;
flex-direction: column;
}
@media (min-width: 55rem) {
.traveler-key-value {
flex-direction: row;
align-items: center
}
}
.progress-row {
position: relative;
inset-inline-start: -20px;
width: calc(100% + 32px);
overflow-x: auto;
padding-top: 8px;
padding-bottom: 24px;
margin-bottom: -32px;
}
@media (min-width: 40rem) {
.progress-row {
padding-top: 8px;
padding-bottom: 32px;
margin-bottom: -24px;
width: calc(100% + 44px)
}
}
.progress-line:not(:last-of-type) {
border: solid 0.5px var(--color-gray-7);
flex-grow: 1;
position: relative;
inset-block-end: 7px;
margin-inline: -27px;
min-width: 60px;
}
.pie {
border-radius: 50%;
background-color: white;
background-image: linear-gradient(to right, transparent 50%, var(--color-gray-7) 0);
border: solid 1px var(--color-gray-7);
}
.pie.active {
background-image: linear-gradient(to right, transparent 50%, var(--color-primary-muted) 0);
border: solid 1px var(--color-primary-muted);
}
.pie-2 {
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
transform-origin: left;
}
.pie-2:not(.active):not(.over-50) {
background-color: inherit;
}
.pie-2:not(.active).over-50 {
background-color: var(--color-gray-7);
}
.pie-2.active:not(.over-50) {
background-color: inherit;
}
.pie-2.active.over-50 {
background-color: var(--color-primary-muted);
}
.switch-background {
transition: all 0.3s ease-out;
}
.switch-button {
transition: all 0.15s ease-out;
cursor: pointer;
}
.switch-button:hover {
background-color: white;
}
.switch-button:disabled {
opacity: 1;
}
/* Fix this stupid default on the Tailwind reset */
ol {
list-style-type: decimal;
}
/* Fix this stupid default on the Tailwind reset */
ol {
list-style-type: decimal;
}
/* Fix this stupid default on the Tailwind reset */
ol {
list-style-type: decimal;
}
/* Legacy border classes for Tailwind compat.
They have to go here so they override the Spritz stuff.
I will probably do border--top etc. in Spritz in a week or so. */
.border-t {
border: solid var(--color-gray-200);
border-width: 1px 0px 0px 0px;
}
.border-b {
border: solid var(--color-gray-200);
border-width: 0px 0px 1px 0px;
}
.border-not-b {
border: solid var(--color-gray-200);
border-width: 1px 1px 0px 1px;
}
.border-y {
border: solid var(--color-gray-200);
border-width: 1px 0px;
}