/*# sourceURL=https://mhfa.nvidia.com:443/bespa/style.css */
/* Type scale */
:root {
--md-sys-typescale-display-large-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-display-large-line-height: 64px;
--md-sys-typescale-display-large-size: 57px;
--md-sys-typescale-display-large-tracking: 0.00;
--md-sys-typescale-display-large-weight: 400;
--md-sys-typescale-display-medium-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-display-medium-line-height: 52px;
--md-sys-typescale-display-medium-size: 45px;
--md-sys-typescale-display-medium-tracking: 0.00;
--md-sys-typescale-display-medium-weight: 400;
--md-sys-typescale-display-small-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-display-small-line-height: 44px;
--md-sys-typescale-display-small-size: 36px;
--md-sys-typescale-display-small-tracking: 0.00;
--md-sys-typescale-display-small-weight: 400;
--md-sys-typescale-headline-large-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-headline-large-line-height: 40px;
--md-sys-typescale-headline-large-size: 32px;
--md-sys-typescale-headline-large-tracking: 0.00;
--md-sys-typescale-headline-large-weight: 400;
--md-sys-typescale-headline-medium-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-headline-medium-line-height: 36px;
--md-sys-typescale-headline-medium-size: 28px;
--md-sys-typescale-headline-medium-tracking: 0.00;
--md-sys-typescale-headline-medium-weight: 400;
--md-sys-typescale-headline-small-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-headline-small-line-height: 32px;
--md-sys-typescale-headline-small-size: 24px;
--md-sys-typescale-headline-small-tracking: 0.00;
--md-sys-typescale-headline-small-weight: 400;
--md-sys-typescale-title-large-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-title-large-line-height: 28px;
--md-sys-typescale-title-large-size: 22px;
--md-sys-typescale-title-large-tracking: 0.00;
--md-sys-typescale-title-large-weight: 400;
--md-sys-typescale-title-medium-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-title-medium-line-height: 24px;
--md-sys-typescale-title-medium-size: 16px;
--md-sys-typescale-title-medium-tracking: 0.15;
--md-sys-typescale-title-medium-weight: 600;
--md-sys-typescale-title-small-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-title-small-line-height: 20px;
--md-sys-typescale-title-small-size: 14px;
--md-sys-typescale-title-small-tracking: 0.11;
--md-sys-typescale-title-small-weight: 600;
--md-sys-typescale-label-large-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-label-large-line-height: 20px;
--md-sys-typescale-label-large-size: 14px;
--md-sys-typescale-label-large-tracking: 0.11;
--md-sys-typescale-label-large-weight: 600;
--md-sys-typescale-label-medium-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-label-medium-line-height: 16px;
--md-sys-typescale-label-medium-size: 12px;
--md-sys-typescale-label-medium-tracking: 0.67;
--md-sys-typescale-label-medium-weight: 600;
--md-sys-typescale-label-small-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-label-small-line-height: 16px;
--md-sys-typescale-label-small-size: 11px;
--md-sys-typescale-label-small-tracking: 0.73;
--md-sys-typescale-label-small-weight: 600;
--md-sys-typescale-body-large-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-body-large-line-height: 24px;
--md-sys-typescale-body-large-size: 16px;
--md-sys-typescale-body-large-tracking: 0.50;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-medium-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-body-medium-line-height: 20px;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-medium-tracking: 0.29;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-small-font: 'Roboto Flex', system-ui, sans-serif;
--md-sys-typescale-body-small-line-height: 16px;
--md-sys-typescale-body-small-size: 12px;
--md-sys-typescale-body-small-tracking: 0.53;
--md-sys-typescale-body-small-weight: 400;
}
/* Elevation and opacities */
:root {
--md-sys-elevation-level1-tint-layer-opacity: .05;
--md-sys-elevation-level2-tint-layer-opacity: .08;
--md-sys-elevation-level3-tint-layer-opacity: .11;
--md-sys-elevation-level4-tint-layer-opacity: .12;
--md-sys-elevation-level5-tint-layer-opacity: .14;
--md-sys-elevation-level0: 0;
--md-sys-elevation-level1: 1px;
--md-sys-elevation-level2: 3px;
--md-sys-elevation-level3: 6px;
--md-sys-elevation-level4: 8px;
--md-sys-elevation-level5: 12px;
--md-sys-elevation-level0-shadow: 0;
--md-sys-elevation-level1-shadow: 0 2px calc(var(--md-sys-elevation-level1) * 2 + 4px) calc(var(--md-sys-elevation-level1)) rgba(var(--md-sys-color-shadow), .35);
--md-sys-elevation-level2-shadow: 0 2px calc(var(--md-sys-elevation-level2) * 2 + 4px) calc(var(--md-sys-elevation-level2)) rgba(var(--md-sys-color-shadow), .35);
--md-sys-elevation-level3-shadow: 0 2px calc(var(--md-sys-elevation-level3) * 2 + 4px) calc(var(--md-sys-elevation-level3)) rgba(var(--md-sys-color-shadow), .35);
--md-sys-elevation-level4-shadow: 0 2px calc(var(--md-sys-elevation-level4) * 2 + 4px) calc(var(--md-sys-elevation-level4)) rgba(var(--md-sys-color-shadow), .35);
--md-sys-elevation-level5-shadow: 0 2px calc(var(--md-sys-elevation-level5) * 2 + 4px) calc(var(--md-sys-elevation-level5)) rgba(var(--md-sys-color-shadow), .35);
--md-sys-state-hover-state-layer-opacity: .08;
--md-sys-state-focus-state-layer-opacity: .12;
--md-sys-state-pressed-state-layer-opacity: .12;
--md-sys-state-dragged-state-layer-opacity: .16;
--md-sys-state-disabled-state-layer-opacity: .38;
--md-sys-state-disabled-container-state-layer-opacity: .12;
}
/* Light theme tokens */
@media (prefers-color-scheme: light) {
:root {
--md-sys-color-primary: var(--md-ref-palette-primary40);
--md-sys-color-primary-container: var(--md-ref-palette-primary90);
--md-sys-color-secondary: var(--md-ref-palette-secondary40);
--md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
--md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
--md-sys-color-surface: var(--md-ref-palette-neutral99);
--md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
--md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
--md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
--md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
--md-sys-color-surface-container: var(--md-ref-palette-neutral94);
--md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
--md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
--md-sys-color-background: var(--md-ref-palette-neutral98);
--md-sys-color-error: var(--md-ref-palette-error40);
--md-sys-color-error-container: var(--md-ref-palette-error90);
--md-sys-color-on-primary: var(--md-ref-palette-primary100);
--md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
--md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
--md-sys-color-on-surface: var(--md-ref-palette-neutral10);
--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
--md-sys-color-on-error: var(--md-ref-palette-error100);
--md-sys-color-on-error-container: var(--md-ref-palette-error10);
--md-sys-color-on-background: var(--md-ref-palette-neutral10);
--md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
--md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
--md-sys-color-surface-tint: var(--md-sys-color-primary);
--md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
--md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
--md-sys-color-scrim: var(--md-ref-palette-neutral0);
--md-sys-color-ok: var(--md-ref-palette-ok40);
--md-sys-color-ok-container: var(--md-ref-palette-ok90);
--md-sys-color-on-ok: var(--md-ref-palette-ok100);
--md-sys-color-on-ok-container: var(--md-ref-palette-ok10);
--md-sys-color-primary-0deg: var(--md-ref-palette-primary-0deg40);
--md-sys-color-primary-0deg-container: var(--md-ref-palette-primary-0deg90);
--md-sys-color-on-primary-0deg: var(--md-ref-palette-primary-0deg100);
--md-sys-color-on-primary-0deg-container: var(--md-ref-palette-primary-0deg10);
--md-sys-color-secondary-0deg: var(--md-ref-palette-secondary-0deg40);
--md-sys-color-secondary-0deg-container: var(--md-ref-palette-secondary-0deg90);
--md-sys-color-on-secondary-0deg: var(--md-ref-palette-secondary-0deg100);
--md-sys-color-on-secondary-0deg-container: var(--md-ref-palette-secondary-0deg10);
--md-sys-color-tertiary-0deg: var(--md-ref-palette-tertiary-0deg40);
--md-sys-color-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg90);
--md-sys-color-on-tertiary-0deg: var(--md-ref-palette-tertiary-0deg100);
--md-sys-color-on-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg10);
--md-sys-color-primary-30deg: var(--md-ref-palette-primary-30deg40);
--md-sys-color-primary-30deg-container: var(--md-ref-palette-primary-30deg90);
--md-sys-color-on-primary-30deg: var(--md-ref-palette-primary-30deg100);
--md-sys-color-on-primary-30deg-container: var(--md-ref-palette-primary-30deg10);
--md-sys-color-secondary-30deg: var(--md-ref-palette-secondary-30deg40);
--md-sys-color-secondary-30deg-container: var(--md-ref-palette-secondary-30deg90);
--md-sys-color-on-secondary-30deg: var(--md-ref-palette-secondary-30deg100);
--md-sys-color-on-secondary-30deg-container: var(--md-ref-palette-secondary-30deg10);
--md-sys-color-tertiary-30deg: var(--md-ref-palette-tertiary-30deg40);
--md-sys-color-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg90);
--md-sys-color-on-tertiary-30deg: var(--md-ref-palette-tertiary-30deg100);
--md-sys-color-on-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg10);
--md-sys-color-primary-60deg: var(--md-ref-palette-primary-60deg40);
--md-sys-color-primary-60deg-container: var(--md-ref-palette-primary-60deg90);
--md-sys-color-on-primary-60deg: var(--md-ref-palette-primary-60deg100);
--md-sys-color-on-primary-60deg-container: var(--md-ref-palette-primary-60deg10);
--md-sys-color-secondary-60deg: var(--md-ref-palette-secondary-60deg40);
--md-sys-color-secondary-60deg-container: var(--md-ref-palette-secondary-60deg90);
--md-sys-color-on-secondary-60deg: var(--md-ref-palette-secondary-60deg100);
--md-sys-color-on-secondary-60deg-container: var(--md-ref-palette-secondary-60deg10);
--md-sys-color-tertiary-60deg: var(--md-ref-palette-tertiary-60deg40);
--md-sys-color-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg90);
--md-sys-color-on-tertiary-60deg: var(--md-ref-palette-tertiary-60deg100);
--md-sys-color-on-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg10);
--md-sys-color-primary-90deg: var(--md-ref-palette-primary-90deg40);
--md-sys-color-primary-90deg-container: var(--md-ref-palette-primary-90deg90);
--md-sys-color-on-primary-90deg: var(--md-ref-palette-primary-90deg100);
--md-sys-color-on-primary-90deg-container: var(--md-ref-palette-primary-90deg10);
--md-sys-color-secondary-90deg: var(--md-ref-palette-secondary-90deg40);
--md-sys-color-secondary-90deg-container: var(--md-ref-palette-secondary-90deg90);
--md-sys-color-on-secondary-90deg: var(--md-ref-palette-secondary-90deg100);
--md-sys-color-on-secondary-90deg-container: var(--md-ref-palette-secondary-90deg10);
--md-sys-color-tertiary-90deg: var(--md-ref-palette-tertiary-90deg40);
--md-sys-color-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg90);
--md-sys-color-on-tertiary-90deg: var(--md-ref-palette-tertiary-90deg100);
--md-sys-color-on-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg10);
--md-sys-color-primary-120deg: var(--md-ref-palette-primary-120deg40);
--md-sys-color-primary-120deg-container: var(--md-ref-palette-primary-120deg90);
--md-sys-color-on-primary-120deg: var(--md-ref-palette-primary-120deg100);
--md-sys-color-on-primary-120deg-container: var(--md-ref-palette-primary-120deg10);
--md-sys-color-secondary-120deg: var(--md-ref-palette-secondary-120deg40);
--md-sys-color-secondary-120deg-container: var(--md-ref-palette-secondary-120deg90);
--md-sys-color-on-secondary-120deg: var(--md-ref-palette-secondary-120deg100);
--md-sys-color-on-secondary-120deg-container: var(--md-ref-palette-secondary-120deg10);
--md-sys-color-tertiary-120deg: var(--md-ref-palette-tertiary-120deg40);
--md-sys-color-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg90);
--md-sys-color-on-tertiary-120deg: var(--md-ref-palette-tertiary-120deg100);
--md-sys-color-on-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg10);
--md-sys-color-primary-150deg: var(--md-ref-palette-primary-150deg40);
--md-sys-color-primary-150deg-container: var(--md-ref-palette-primary-150deg90);
--md-sys-color-on-primary-150deg: var(--md-ref-palette-primary-150deg100);
--md-sys-color-on-primary-150deg-container: var(--md-ref-palette-primary-150deg10);
--md-sys-color-secondary-150deg: var(--md-ref-palette-secondary-150deg40);
--md-sys-color-secondary-150deg-container: var(--md-ref-palette-secondary-150deg90);
--md-sys-color-on-secondary-150deg: var(--md-ref-palette-secondary-150deg100);
--md-sys-color-on-secondary-150deg-container: var(--md-ref-palette-secondary-150deg10);
--md-sys-color-tertiary-150deg: var(--md-ref-palette-tertiary-150deg40);
--md-sys-color-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg90);
--md-sys-color-on-tertiary-150deg: var(--md-ref-palette-tertiary-150deg100);
--md-sys-color-on-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg10);
--md-sys-color-primary-180deg: var(--md-ref-palette-primary-180deg40);
--md-sys-color-primary-180deg-container: var(--md-ref-palette-primary-180deg90);
--md-sys-color-on-primary-180deg: var(--md-ref-palette-primary-180deg100);
--md-sys-color-on-primary-180deg-container: var(--md-ref-palette-primary-180deg10);
--md-sys-color-secondary-180deg: var(--md-ref-palette-secondary-180deg40);
--md-sys-color-secondary-180deg-container: var(--md-ref-palette-secondary-180deg90);
--md-sys-color-on-secondary-180deg: var(--md-ref-palette-secondary-180deg100);
--md-sys-color-on-secondary-180deg-container: var(--md-ref-palette-secondary-180deg10);
--md-sys-color-tertiary-180deg: var(--md-ref-palette-tertiary-180deg40);
--md-sys-color-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg90);
--md-sys-color-on-tertiary-180deg: var(--md-ref-palette-tertiary-180deg100);
--md-sys-color-on-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg10);
--md-sys-color-primary-210deg: var(--md-ref-palette-primary-210deg40);
--md-sys-color-primary-210deg-container: var(--md-ref-palette-primary-210deg90);
--md-sys-color-on-primary-210deg: var(--md-ref-palette-primary-210deg100);
--md-sys-color-on-primary-210deg-container: var(--md-ref-palette-primary-210deg10);
--md-sys-color-secondary-210deg: var(--md-ref-palette-secondary-210deg40);
--md-sys-color-secondary-210deg-container: var(--md-ref-palette-secondary-210deg90);
--md-sys-color-on-secondary-210deg: var(--md-ref-palette-secondary-210deg100);
--md-sys-color-on-secondary-210deg-container: var(--md-ref-palette-secondary-210deg10);
--md-sys-color-tertiary-210deg: var(--md-ref-palette-tertiary-210deg40);
--md-sys-color-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg90);
--md-sys-color-on-tertiary-210deg: var(--md-ref-palette-tertiary-210deg100);
--md-sys-color-on-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg10);
--md-sys-color-primary-240deg: var(--md-ref-palette-primary-240deg40);
--md-sys-color-primary-240deg-container: var(--md-ref-palette-primary-240deg90);
--md-sys-color-on-primary-240deg: var(--md-ref-palette-primary-240deg100);
--md-sys-color-on-primary-240deg-container: var(--md-ref-palette-primary-240deg10);
--md-sys-color-secondary-240deg: var(--md-ref-palette-secondary-240deg40);
--md-sys-color-secondary-240deg-container: var(--md-ref-palette-secondary-240deg90);
--md-sys-color-on-secondary-240deg: var(--md-ref-palette-secondary-240deg100);
--md-sys-color-on-secondary-240deg-container: var(--md-ref-palette-secondary-240deg10);
--md-sys-color-tertiary-240deg: var(--md-ref-palette-tertiary-240deg40);
--md-sys-color-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg90);
--md-sys-color-on-tertiary-240deg: var(--md-ref-palette-tertiary-240deg100);
--md-sys-color-on-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg10);
--md-sys-color-primary-270deg: var(--md-ref-palette-primary-270deg40);
--md-sys-color-primary-270deg-container: var(--md-ref-palette-primary-270deg90);
--md-sys-color-on-primary-270deg: var(--md-ref-palette-primary-270deg100);
--md-sys-color-on-primary-270deg-container: var(--md-ref-palette-primary-270deg10);
--md-sys-color-secondary-270deg: var(--md-ref-palette-secondary-270deg40);
--md-sys-color-secondary-270deg-container: var(--md-ref-palette-secondary-270deg90);
--md-sys-color-on-secondary-270deg: var(--md-ref-palette-secondary-270deg100);
--md-sys-color-on-secondary-270deg-container: var(--md-ref-palette-secondary-270deg10);
--md-sys-color-tertiary-270deg: var(--md-ref-palette-tertiary-270deg40);
--md-sys-color-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg90);
--md-sys-color-on-tertiary-270deg: var(--md-ref-palette-tertiary-270deg100);
--md-sys-color-on-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg10);
--md-sys-color-primary-300deg: var(--md-ref-palette-primary-300deg40);
--md-sys-color-primary-300deg-container: var(--md-ref-palette-primary-300deg90);
--md-sys-color-on-primary-300deg: var(--md-ref-palette-primary-300deg100);
--md-sys-color-on-primary-300deg-container: var(--md-ref-palette-primary-300deg10);
--md-sys-color-secondary-300deg: var(--md-ref-palette-secondary-300deg40);
--md-sys-color-secondary-300deg-container: var(--md-ref-palette-secondary-300deg90);
--md-sys-color-on-secondary-300deg: var(--md-ref-palette-secondary-300deg100);
--md-sys-color-on-secondary-300deg-container: var(--md-ref-palette-secondary-300deg10);
--md-sys-color-tertiary-300deg: var(--md-ref-palette-tertiary-300deg40);
--md-sys-color-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg90);
--md-sys-color-on-tertiary-300deg: var(--md-ref-palette-tertiary-300deg100);
--md-sys-color-on-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg10);
--md-sys-color-primary-330deg: var(--md-ref-palette-primary-330deg40);
--md-sys-color-primary-330deg-container: var(--md-ref-palette-primary-330deg90);
--md-sys-color-on-primary-330deg: var(--md-ref-palette-primary-330deg100);
--md-sys-color-on-primary-330deg-container: var(--md-ref-palette-primary-330deg10);
--md-sys-color-secondary-330deg: var(--md-ref-palette-secondary-330deg40);
--md-sys-color-secondary-330deg-container: var(--md-ref-palette-secondary-330deg90);
--md-sys-color-on-secondary-330deg: var(--md-ref-palette-secondary-330deg100);
--md-sys-color-on-secondary-330deg-container: var(--md-ref-palette-secondary-330deg10);
--md-sys-color-tertiary-330deg: var(--md-ref-palette-tertiary-330deg40);
--md-sys-color-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg90);
--md-sys-color-on-tertiary-330deg: var(--md-ref-palette-tertiary-330deg100);
--md-sys-color-on-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg10);
}
}
HTML.LightTheme {
--md-sys-color-primary: var(--md-ref-palette-primary40);
--md-sys-color-primary-container: var(--md-ref-palette-primary90);
--md-sys-color-secondary: var(--md-ref-palette-secondary40);
--md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
--md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
--md-sys-color-surface: var(--md-ref-palette-neutral99);
--md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
--md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
--md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
--md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
--md-sys-color-surface-container: var(--md-ref-palette-neutral94);
--md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
--md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
--md-sys-color-background: var(--md-ref-palette-neutral98);
--md-sys-color-error: var(--md-ref-palette-error40);
--md-sys-color-error-container: var(--md-ref-palette-error90);
--md-sys-color-on-primary: var(--md-ref-palette-primary100);
--md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
--md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
--md-sys-color-on-surface: var(--md-ref-palette-neutral10);
--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
--md-sys-color-on-error: var(--md-ref-palette-error100);
--md-sys-color-on-error-container: var(--md-ref-palette-error10);
--md-sys-color-on-background: var(--md-ref-palette-neutral10);
--md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
--md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
--md-sys-color-surface-tint: var(--md-sys-color-primary);
--md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
--md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
--md-sys-color-scrim: var(--md-ref-palette-neutral0);
--md-sys-color-ok: var(--md-ref-palette-ok40);
--md-sys-color-ok-container: var(--md-ref-palette-ok90);
--md-sys-color-on-ok: var(--md-ref-palette-ok100);
--md-sys-color-on-ok-container: var(--md-ref-palette-ok10);
--md-sys-color-primary-0deg: var(--md-ref-palette-primary-0deg40);
--md-sys-color-primary-0deg-container: var(--md-ref-palette-primary-0deg90);
--md-sys-color-on-primary-0deg: var(--md-ref-palette-primary-0deg100);
--md-sys-color-on-primary-0deg-container: var(--md-ref-palette-primary-0deg10);
--md-sys-color-secondary-0deg: var(--md-ref-palette-secondary-0deg40);
--md-sys-color-secondary-0deg-container: var(--md-ref-palette-secondary-0deg90);
--md-sys-color-on-secondary-0deg: var(--md-ref-palette-secondary-0deg100);
--md-sys-color-on-secondary-0deg-container: var(--md-ref-palette-secondary-0deg10);
--md-sys-color-tertiary-0deg: var(--md-ref-palette-tertiary-0deg40);
--md-sys-color-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg90);
--md-sys-color-on-tertiary-0deg: var(--md-ref-palette-tertiary-0deg100);
--md-sys-color-on-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg10);
--md-sys-color-primary-30deg: var(--md-ref-palette-primary-30deg40);
--md-sys-color-primary-30deg-container: var(--md-ref-palette-primary-30deg90);
--md-sys-color-on-primary-30deg: var(--md-ref-palette-primary-30deg100);
--md-sys-color-on-primary-30deg-container: var(--md-ref-palette-primary-30deg10);
--md-sys-color-secondary-30deg: var(--md-ref-palette-secondary-30deg40);
--md-sys-color-secondary-30deg-container: var(--md-ref-palette-secondary-30deg90);
--md-sys-color-on-secondary-30deg: var(--md-ref-palette-secondary-30deg100);
--md-sys-color-on-secondary-30deg-container: var(--md-ref-palette-secondary-30deg10);
--md-sys-color-tertiary-30deg: var(--md-ref-palette-tertiary-30deg40);
--md-sys-color-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg90);
--md-sys-color-on-tertiary-30deg: var(--md-ref-palette-tertiary-30deg100);
--md-sys-color-on-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg10);
--md-sys-color-primary-60deg: var(--md-ref-palette-primary-60deg40);
--md-sys-color-primary-60deg-container: var(--md-ref-palette-primary-60deg90);
--md-sys-color-on-primary-60deg: var(--md-ref-palette-primary-60deg100);
--md-sys-color-on-primary-60deg-container: var(--md-ref-palette-primary-60deg10);
--md-sys-color-secondary-60deg: var(--md-ref-palette-secondary-60deg40);
--md-sys-color-secondary-60deg-container: var(--md-ref-palette-secondary-60deg90);
--md-sys-color-on-secondary-60deg: var(--md-ref-palette-secondary-60deg100);
--md-sys-color-on-secondary-60deg-container: var(--md-ref-palette-secondary-60deg10);
--md-sys-color-tertiary-60deg: var(--md-ref-palette-tertiary-60deg40);
--md-sys-color-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg90);
--md-sys-color-on-tertiary-60deg: var(--md-ref-palette-tertiary-60deg100);
--md-sys-color-on-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg10);
--md-sys-color-primary-90deg: var(--md-ref-palette-primary-90deg40);
--md-sys-color-primary-90deg-container: var(--md-ref-palette-primary-90deg90);
--md-sys-color-on-primary-90deg: var(--md-ref-palette-primary-90deg100);
--md-sys-color-on-primary-90deg-container: var(--md-ref-palette-primary-90deg10);
--md-sys-color-secondary-90deg: var(--md-ref-palette-secondary-90deg40);
--md-sys-color-secondary-90deg-container: var(--md-ref-palette-secondary-90deg90);
--md-sys-color-on-secondary-90deg: var(--md-ref-palette-secondary-90deg100);
--md-sys-color-on-secondary-90deg-container: var(--md-ref-palette-secondary-90deg10);
--md-sys-color-tertiary-90deg: var(--md-ref-palette-tertiary-90deg40);
--md-sys-color-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg90);
--md-sys-color-on-tertiary-90deg: var(--md-ref-palette-tertiary-90deg100);
--md-sys-color-on-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg10);
--md-sys-color-primary-120deg: var(--md-ref-palette-primary-120deg40);
--md-sys-color-primary-120deg-container: var(--md-ref-palette-primary-120deg90);
--md-sys-color-on-primary-120deg: var(--md-ref-palette-primary-120deg100);
--md-sys-color-on-primary-120deg-container: var(--md-ref-palette-primary-120deg10);
--md-sys-color-secondary-120deg: var(--md-ref-palette-secondary-120deg40);
--md-sys-color-secondary-120deg-container: var(--md-ref-palette-secondary-120deg90);
--md-sys-color-on-secondary-120deg: var(--md-ref-palette-secondary-120deg100);
--md-sys-color-on-secondary-120deg-container: var(--md-ref-palette-secondary-120deg10);
--md-sys-color-tertiary-120deg: var(--md-ref-palette-tertiary-120deg40);
--md-sys-color-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg90);
--md-sys-color-on-tertiary-120deg: var(--md-ref-palette-tertiary-120deg100);
--md-sys-color-on-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg10);
--md-sys-color-primary-150deg: var(--md-ref-palette-primary-150deg40);
--md-sys-color-primary-150deg-container: var(--md-ref-palette-primary-150deg90);
--md-sys-color-on-primary-150deg: var(--md-ref-palette-primary-150deg100);
--md-sys-color-on-primary-150deg-container: var(--md-ref-palette-primary-150deg10);
--md-sys-color-secondary-150deg: var(--md-ref-palette-secondary-150deg40);
--md-sys-color-secondary-150deg-container: var(--md-ref-palette-secondary-150deg90);
--md-sys-color-on-secondary-150deg: var(--md-ref-palette-secondary-150deg100);
--md-sys-color-on-secondary-150deg-container: var(--md-ref-palette-secondary-150deg10);
--md-sys-color-tertiary-150deg: var(--md-ref-palette-tertiary-150deg40);
--md-sys-color-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg90);
--md-sys-color-on-tertiary-150deg: var(--md-ref-palette-tertiary-150deg100);
--md-sys-color-on-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg10);
--md-sys-color-primary-180deg: var(--md-ref-palette-primary-180deg40);
--md-sys-color-primary-180deg-container: var(--md-ref-palette-primary-180deg90);
--md-sys-color-on-primary-180deg: var(--md-ref-palette-primary-180deg100);
--md-sys-color-on-primary-180deg-container: var(--md-ref-palette-primary-180deg10);
--md-sys-color-secondary-180deg: var(--md-ref-palette-secondary-180deg40);
--md-sys-color-secondary-180deg-container: var(--md-ref-palette-secondary-180deg90);
--md-sys-color-on-secondary-180deg: var(--md-ref-palette-secondary-180deg100);
--md-sys-color-on-secondary-180deg-container: var(--md-ref-palette-secondary-180deg10);
--md-sys-color-tertiary-180deg: var(--md-ref-palette-tertiary-180deg40);
--md-sys-color-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg90);
--md-sys-color-on-tertiary-180deg: var(--md-ref-palette-tertiary-180deg100);
--md-sys-color-on-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg10);
--md-sys-color-primary-210deg: var(--md-ref-palette-primary-210deg40);
--md-sys-color-primary-210deg-container: var(--md-ref-palette-primary-210deg90);
--md-sys-color-on-primary-210deg: var(--md-ref-palette-primary-210deg100);
--md-sys-color-on-primary-210deg-container: var(--md-ref-palette-primary-210deg10);
--md-sys-color-secondary-210deg: var(--md-ref-palette-secondary-210deg40);
--md-sys-color-secondary-210deg-container: var(--md-ref-palette-secondary-210deg90);
--md-sys-color-on-secondary-210deg: var(--md-ref-palette-secondary-210deg100);
--md-sys-color-on-secondary-210deg-container: var(--md-ref-palette-secondary-210deg10);
--md-sys-color-tertiary-210deg: var(--md-ref-palette-tertiary-210deg40);
--md-sys-color-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg90);
--md-sys-color-on-tertiary-210deg: var(--md-ref-palette-tertiary-210deg100);
--md-sys-color-on-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg10);
--md-sys-color-primary-240deg: var(--md-ref-palette-primary-240deg40);
--md-sys-color-primary-240deg-container: var(--md-ref-palette-primary-240deg90);
--md-sys-color-on-primary-240deg: var(--md-ref-palette-primary-240deg100);
--md-sys-color-on-primary-240deg-container: var(--md-ref-palette-primary-240deg10);
--md-sys-color-secondary-240deg: var(--md-ref-palette-secondary-240deg40);
--md-sys-color-secondary-240deg-container: var(--md-ref-palette-secondary-240deg90);
--md-sys-color-on-secondary-240deg: var(--md-ref-palette-secondary-240deg100);
--md-sys-color-on-secondary-240deg-container: var(--md-ref-palette-secondary-240deg10);
--md-sys-color-tertiary-240deg: var(--md-ref-palette-tertiary-240deg40);
--md-sys-color-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg90);
--md-sys-color-on-tertiary-240deg: var(--md-ref-palette-tertiary-240deg100);
--md-sys-color-on-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg10);
--md-sys-color-primary-270deg: var(--md-ref-palette-primary-270deg40);
--md-sys-color-primary-270deg-container: var(--md-ref-palette-primary-270deg90);
--md-sys-color-on-primary-270deg: var(--md-ref-palette-primary-270deg100);
--md-sys-color-on-primary-270deg-container: var(--md-ref-palette-primary-270deg10);
--md-sys-color-secondary-270deg: var(--md-ref-palette-secondary-270deg40);
--md-sys-color-secondary-270deg-container: var(--md-ref-palette-secondary-270deg90);
--md-sys-color-on-secondary-270deg: var(--md-ref-palette-secondary-270deg100);
--md-sys-color-on-secondary-270deg-container: var(--md-ref-palette-secondary-270deg10);
--md-sys-color-tertiary-270deg: var(--md-ref-palette-tertiary-270deg40);
--md-sys-color-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg90);
--md-sys-color-on-tertiary-270deg: var(--md-ref-palette-tertiary-270deg100);
--md-sys-color-on-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg10);
--md-sys-color-primary-300deg: var(--md-ref-palette-primary-300deg40);
--md-sys-color-primary-300deg-container: var(--md-ref-palette-primary-300deg90);
--md-sys-color-on-primary-300deg: var(--md-ref-palette-primary-300deg100);
--md-sys-color-on-primary-300deg-container: var(--md-ref-palette-primary-300deg10);
--md-sys-color-secondary-300deg: var(--md-ref-palette-secondary-300deg40);
--md-sys-color-secondary-300deg-container: var(--md-ref-palette-secondary-300deg90);
--md-sys-color-on-secondary-300deg: var(--md-ref-palette-secondary-300deg100);
--md-sys-color-on-secondary-300deg-container: var(--md-ref-palette-secondary-300deg10);
--md-sys-color-tertiary-300deg: var(--md-ref-palette-tertiary-300deg40);
--md-sys-color-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg90);
--md-sys-color-on-tertiary-300deg: var(--md-ref-palette-tertiary-300deg100);
--md-sys-color-on-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg10);
--md-sys-color-primary-330deg: var(--md-ref-palette-primary-330deg40);
--md-sys-color-primary-330deg-container: var(--md-ref-palette-primary-330deg90);
--md-sys-color-on-primary-330deg: var(--md-ref-palette-primary-330deg100);
--md-sys-color-on-primary-330deg-container: var(--md-ref-palette-primary-330deg10);
--md-sys-color-secondary-330deg: var(--md-ref-palette-secondary-330deg40);
--md-sys-color-secondary-330deg-container: var(--md-ref-palette-secondary-330deg90);
--md-sys-color-on-secondary-330deg: var(--md-ref-palette-secondary-330deg100);
--md-sys-color-on-secondary-330deg-container: var(--md-ref-palette-secondary-330deg10);
--md-sys-color-tertiary-330deg: var(--md-ref-palette-tertiary-330deg40);
--md-sys-color-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg90);
--md-sys-color-on-tertiary-330deg: var(--md-ref-palette-tertiary-330deg100);
--md-sys-color-on-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg10);
}
/* Dark theme tokens */
@media (prefers-color-scheme: dark) {
:root {
--md-sys-color-primary: var(--md-ref-palette-primary80);
--md-sys-color-primary-container: var(--md-ref-palette-primary30);
--md-sys-color-secondary: var(--md-ref-palette-secondary80);
--md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
--md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
--md-sys-color-surface: var(--md-ref-palette-neutral10);
--md-sys-color-surface-dim: var(--md-ref-palette-neutral6);
--md-sys-color-surface-bright: var(--md-ref-palette-neutral24);
--md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
--md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
--md-sys-color-surface-container: var(--md-ref-palette-neutral12);
--md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
--md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
--md-sys-color-background: var(--md-ref-palette-neutral6);
--md-sys-color-error: var(--md-ref-palette-error80);
--md-sys-color-error-container: var(--md-ref-palette-error30);
--md-sys-color-on-primary: var(--md-ref-palette-primary20);
--md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
--md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
--md-sys-color-on-surface: var(--md-ref-palette-neutral90);
--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
--md-sys-color-on-error: var(--md-ref-palette-error20);
--md-sys-color-on-error-container: var(--md-ref-palette-error90);
--md-sys-color-on-background: var(--md-ref-palette-neutral90);
--md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
--md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
--md-sys-color-surface-tint: var(--md-sys-color-primary);
--md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
--md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
--md-sys-color-scrim: var(--md-ref-palette-neutral0);
--md-sys-color-ok: var(--md-ref-palette-ok80);
--md-sys-color-ok-container: var(--md-ref-palette-ok30);
--md-sys-color-on-ok: var(--md-ref-palette-ok20);
--md-sys-color-on-ok-container: var(--md-ref-palette-ok90);
--md-sys-color-primary-0deg: var(--md-ref-palette-primary-0deg80);
--md-sys-color-primary-0deg-container: var(--md-ref-palette-primary-0deg30);
--md-sys-color-on-primary-0deg: var(--md-ref-palette-primary-0deg20);
--md-sys-color-on-primary-0deg-container: var(--md-ref-palette-primary-0deg90);
--md-sys-color-secondary-0deg: var(--md-ref-palette-secondary-0deg80);
--md-sys-color-secondary-0deg-container: var(--md-ref-palette-secondary-0deg30);
--md-sys-color-on-secondary-0deg: var(--md-ref-palette-secondary-0deg20);
--md-sys-color-on-secondary-0deg-container: var(--md-ref-palette-secondary-0deg90);
--md-sys-color-tertiary-0deg: var(--md-ref-palette-tertiary-0deg80);
--md-sys-color-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg30);
--md-sys-color-on-tertiary-0deg: var(--md-ref-palette-tertiary-0deg20);
--md-sys-color-on-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg90);
--md-sys-color-primary-30deg: var(--md-ref-palette-primary-30deg80);
--md-sys-color-primary-30deg-container: var(--md-ref-palette-primary-30deg30);
--md-sys-color-on-primary-30deg: var(--md-ref-palette-primary-30deg20);
--md-sys-color-on-primary-30deg-container: var(--md-ref-palette-primary-30deg90);
--md-sys-color-secondary-30deg: var(--md-ref-palette-secondary-30deg80);
--md-sys-color-secondary-30deg-container: var(--md-ref-palette-secondary-30deg30);
--md-sys-color-on-secondary-30deg: var(--md-ref-palette-secondary-30deg20);
--md-sys-color-on-secondary-30deg-container: var(--md-ref-palette-secondary-30deg90);
--md-sys-color-tertiary-30deg: var(--md-ref-palette-tertiary-30deg80);
--md-sys-color-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg30);
--md-sys-color-on-tertiary-30deg: var(--md-ref-palette-tertiary-30deg20);
--md-sys-color-on-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg90);
--md-sys-color-primary-60deg: var(--md-ref-palette-primary-60deg80);
--md-sys-color-primary-60deg-container: var(--md-ref-palette-primary-60deg30);
--md-sys-color-on-primary-60deg: var(--md-ref-palette-primary-60deg20);
--md-sys-color-on-primary-60deg-container: var(--md-ref-palette-primary-60deg90);
--md-sys-color-secondary-60deg: var(--md-ref-palette-secondary-60deg80);
--md-sys-color-secondary-60deg-container: var(--md-ref-palette-secondary-60deg30);
--md-sys-color-on-secondary-60deg: var(--md-ref-palette-secondary-60deg20);
--md-sys-color-on-secondary-60deg-container: var(--md-ref-palette-secondary-60deg90);
--md-sys-color-tertiary-60deg: var(--md-ref-palette-tertiary-60deg80);
--md-sys-color-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg30);
--md-sys-color-on-tertiary-60deg: var(--md-ref-palette-tertiary-60deg20);
--md-sys-color-on-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg90);
--md-sys-color-primary-90deg: var(--md-ref-palette-primary-90deg80);
--md-sys-color-primary-90deg-container: var(--md-ref-palette-primary-90deg30);
--md-sys-color-on-primary-90deg: var(--md-ref-palette-primary-90deg20);
--md-sys-color-on-primary-90deg-container: var(--md-ref-palette-primary-90deg90);
--md-sys-color-secondary-90deg: var(--md-ref-palette-secondary-90deg80);
--md-sys-color-secondary-90deg-container: var(--md-ref-palette-secondary-90deg30);
--md-sys-color-on-secondary-90deg: var(--md-ref-palette-secondary-90deg20);
--md-sys-color-on-secondary-90deg-container: var(--md-ref-palette-secondary-90deg90);
--md-sys-color-tertiary-90deg: var(--md-ref-palette-tertiary-90deg80);
--md-sys-color-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg30);
--md-sys-color-on-tertiary-90deg: var(--md-ref-palette-tertiary-90deg20);
--md-sys-color-on-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg90);
--md-sys-color-primary-120deg: var(--md-ref-palette-primary-120deg80);
--md-sys-color-primary-120deg-container: var(--md-ref-palette-primary-120deg30);
--md-sys-color-on-primary-120deg: var(--md-ref-palette-primary-120deg20);
--md-sys-color-on-primary-120deg-container: var(--md-ref-palette-primary-120deg90);
--md-sys-color-secondary-120deg: var(--md-ref-palette-secondary-120deg80);
--md-sys-color-secondary-120deg-container: var(--md-ref-palette-secondary-120deg30);
--md-sys-color-on-secondary-120deg: var(--md-ref-palette-secondary-120deg20);
--md-sys-color-on-secondary-120deg-container: var(--md-ref-palette-secondary-120deg90);
--md-sys-color-tertiary-120deg: var(--md-ref-palette-tertiary-120deg80);
--md-sys-color-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg30);
--md-sys-color-on-tertiary-120deg: var(--md-ref-palette-tertiary-120deg20);
--md-sys-color-on-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg90);
--md-sys-color-primary-150deg: var(--md-ref-palette-primary-150deg80);
--md-sys-color-primary-150deg-container: var(--md-ref-palette-primary-150deg30);
--md-sys-color-on-primary-150deg: var(--md-ref-palette-primary-150deg20);
--md-sys-color-on-primary-150deg-container: var(--md-ref-palette-primary-150deg90);
--md-sys-color-secondary-150deg: var(--md-ref-palette-secondary-150deg80);
--md-sys-color-secondary-150deg-container: var(--md-ref-palette-secondary-150deg30);
--md-sys-color-on-secondary-150deg: var(--md-ref-palette-secondary-150deg20);
--md-sys-color-on-secondary-150deg-container: var(--md-ref-palette-secondary-150deg90);
--md-sys-color-tertiary-150deg: var(--md-ref-palette-tertiary-150deg80);
--md-sys-color-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg30);
--md-sys-color-on-tertiary-150deg: var(--md-ref-palette-tertiary-150deg20);
--md-sys-color-on-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg90);
--md-sys-color-primary-180deg: var(--md-ref-palette-primary-180deg80);
--md-sys-color-primary-180deg-container: var(--md-ref-palette-primary-180deg30);
--md-sys-color-on-primary-180deg: var(--md-ref-palette-primary-180deg20);
--md-sys-color-on-primary-180deg-container: var(--md-ref-palette-primary-180deg90);
--md-sys-color-secondary-180deg: var(--md-ref-palette-secondary-180deg80);
--md-sys-color-secondary-180deg-container: var(--md-ref-palette-secondary-180deg30);
--md-sys-color-on-secondary-180deg: var(--md-ref-palette-secondary-180deg20);
--md-sys-color-on-secondary-180deg-container: var(--md-ref-palette-secondary-180deg90);
--md-sys-color-tertiary-180deg: var(--md-ref-palette-tertiary-180deg80);
--md-sys-color-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg30);
--md-sys-color-on-tertiary-180deg: var(--md-ref-palette-tertiary-180deg20);
--md-sys-color-on-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg90);
--md-sys-color-primary-210deg: var(--md-ref-palette-primary-210deg80);
--md-sys-color-primary-210deg-container: var(--md-ref-palette-primary-210deg30);
--md-sys-color-on-primary-210deg: var(--md-ref-palette-primary-210deg20);
--md-sys-color-on-primary-210deg-container: var(--md-ref-palette-primary-210deg90);
--md-sys-color-secondary-210deg: var(--md-ref-palette-secondary-210deg80);
--md-sys-color-secondary-210deg-container: var(--md-ref-palette-secondary-210deg30);
--md-sys-color-on-secondary-210deg: var(--md-ref-palette-secondary-210deg20);
--md-sys-color-on-secondary-210deg-container: var(--md-ref-palette-secondary-210deg90);
--md-sys-color-tertiary-210deg: var(--md-ref-palette-tertiary-210deg80);
--md-sys-color-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg30);
--md-sys-color-on-tertiary-210deg: var(--md-ref-palette-tertiary-210deg20);
--md-sys-color-on-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg90);
--md-sys-color-primary-240deg: var(--md-ref-palette-primary-240deg80);
--md-sys-color-primary-240deg-container: var(--md-ref-palette-primary-240deg30);
--md-sys-color-on-primary-240deg: var(--md-ref-palette-primary-240deg20);
--md-sys-color-on-primary-240deg-container: var(--md-ref-palette-primary-240deg90);
--md-sys-color-secondary-240deg: var(--md-ref-palette-secondary-240deg80);
--md-sys-color-secondary-240deg-container: var(--md-ref-palette-secondary-240deg30);
--md-sys-color-on-secondary-240deg: var(--md-ref-palette-secondary-240deg20);
--md-sys-color-on-secondary-240deg-container: var(--md-ref-palette-secondary-240deg90);
--md-sys-color-tertiary-240deg: var(--md-ref-palette-tertiary-240deg80);
--md-sys-color-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg30);
--md-sys-color-on-tertiary-240deg: var(--md-ref-palette-tertiary-240deg20);
--md-sys-color-on-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg90);
--md-sys-color-primary-270deg: var(--md-ref-palette-primary-270deg80);
--md-sys-color-primary-270deg-container: var(--md-ref-palette-primary-270deg30);
--md-sys-color-on-primary-270deg: var(--md-ref-palette-primary-270deg20);
--md-sys-color-on-primary-270deg-container: var(--md-ref-palette-primary-270deg90);
--md-sys-color-secondary-270deg: var(--md-ref-palette-secondary-270deg80);
--md-sys-color-secondary-270deg-container: var(--md-ref-palette-secondary-270deg30);
--md-sys-color-on-secondary-270deg: var(--md-ref-palette-secondary-270deg20);
--md-sys-color-on-secondary-270deg-container: var(--md-ref-palette-secondary-270deg90);
--md-sys-color-tertiary-270deg: var(--md-ref-palette-tertiary-270deg80);
--md-sys-color-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg30);
--md-sys-color-on-tertiary-270deg: var(--md-ref-palette-tertiary-270deg20);
--md-sys-color-on-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg90);
--md-sys-color-primary-300deg: var(--md-ref-palette-primary-300deg80);
--md-sys-color-primary-300deg-container: var(--md-ref-palette-primary-300deg30);
--md-sys-color-on-primary-300deg: var(--md-ref-palette-primary-300deg20);
--md-sys-color-on-primary-300deg-container: var(--md-ref-palette-primary-300deg90);
--md-sys-color-secondary-300deg: var(--md-ref-palette-secondary-300deg80);
--md-sys-color-secondary-300deg-container: var(--md-ref-palette-secondary-300deg30);
--md-sys-color-on-secondary-300deg: var(--md-ref-palette-secondary-300deg20);
--md-sys-color-on-secondary-300deg-container: var(--md-ref-palette-secondary-300deg90);
--md-sys-color-tertiary-300deg: var(--md-ref-palette-tertiary-300deg80);
--md-sys-color-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg30);
--md-sys-color-on-tertiary-300deg: var(--md-ref-palette-tertiary-300deg20);
--md-sys-color-on-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg90);
--md-sys-color-primary-330deg: var(--md-ref-palette-primary-330deg80);
--md-sys-color-primary-330deg-container: var(--md-ref-palette-primary-330deg30);
--md-sys-color-on-primary-330deg: var(--md-ref-palette-primary-330deg20);
--md-sys-color-on-primary-330deg-container: var(--md-ref-palette-primary-330deg90);
--md-sys-color-secondary-330deg: var(--md-ref-palette-secondary-330deg80);
--md-sys-color-secondary-330deg-container: var(--md-ref-palette-secondary-330deg30);
--md-sys-color-on-secondary-330deg: var(--md-ref-palette-secondary-330deg20);
--md-sys-color-on-secondary-330deg-container: var(--md-ref-palette-secondary-330deg90);
--md-sys-color-tertiary-330deg: var(--md-ref-palette-tertiary-330deg80);
--md-sys-color-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg30);
--md-sys-color-on-tertiary-330deg: var(--md-ref-palette-tertiary-330deg20);
--md-sys-color-on-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg90);
}
}
HTML.DarkTheme {
--md-sys-color-primary: var(--md-ref-palette-primary80);
--md-sys-color-primary-container: var(--md-ref-palette-primary30);
--md-sys-color-secondary: var(--md-ref-palette-secondary80);
--md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
--md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
--md-sys-color-surface: var(--md-ref-palette-neutral10);
--md-sys-color-surface-dim: var(--md-ref-palette-neutral6);
--md-sys-color-surface-bright: var(--md-ref-palette-neutral24);
--md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
--md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
--md-sys-color-surface-container: var(--md-ref-palette-neutral12);
--md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
--md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
--md-sys-color-background: var(--md-ref-palette-neutral6);
--md-sys-color-error: var(--md-ref-palette-error80);
--md-sys-color-error-container: var(--md-ref-palette-error30);
--md-sys-color-on-primary: var(--md-ref-palette-primary20);
--md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
--md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
--md-sys-color-on-surface: var(--md-ref-palette-neutral90);
--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
--md-sys-color-on-error: var(--md-ref-palette-error20);
--md-sys-color-on-error-container: var(--md-ref-palette-error90);
--md-sys-color-on-background: var(--md-ref-palette-neutral90);
--md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
--md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
--md-sys-color-surface-tint: var(--md-sys-color-primary);
--md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
--md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
--md-sys-color-scrim: var(--md-ref-palette-neutral0);
--md-sys-color-ok: var(--md-ref-palette-ok80);
--md-sys-color-ok-container: var(--md-ref-palette-ok30);
--md-sys-color-on-ok: var(--md-ref-palette-ok20);
--md-sys-color-on-ok-container: var(--md-ref-palette-ok90);
--md-sys-color-primary-0deg: var(--md-ref-palette-primary-0deg80);
--md-sys-color-primary-0deg-container: var(--md-ref-palette-primary-0deg30);
--md-sys-color-on-primary-0deg: var(--md-ref-palette-primary-0deg20);
--md-sys-color-on-primary-0deg-container: var(--md-ref-palette-primary-0deg90);
--md-sys-color-secondary-0deg: var(--md-ref-palette-secondary-0deg80);
--md-sys-color-secondary-0deg-container: var(--md-ref-palette-secondary-0deg30);
--md-sys-color-on-secondary-0deg: var(--md-ref-palette-secondary-0deg20);
--md-sys-color-on-secondary-0deg-container: var(--md-ref-palette-secondary-0deg90);
--md-sys-color-tertiary-0deg: var(--md-ref-palette-tertiary-0deg80);
--md-sys-color-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg30);
--md-sys-color-on-tertiary-0deg: var(--md-ref-palette-tertiary-0deg20);
--md-sys-color-on-tertiary-0deg-container: var(--md-ref-palette-tertiary-0deg90);
--md-sys-color-primary-30deg: var(--md-ref-palette-primary-30deg80);
--md-sys-color-primary-30deg-container: var(--md-ref-palette-primary-30deg30);
--md-sys-color-on-primary-30deg: var(--md-ref-palette-primary-30deg20);
--md-sys-color-on-primary-30deg-container: var(--md-ref-palette-primary-30deg90);
--md-sys-color-secondary-30deg: var(--md-ref-palette-secondary-30deg80);
--md-sys-color-secondary-30deg-container: var(--md-ref-palette-secondary-30deg30);
--md-sys-color-on-secondary-30deg: var(--md-ref-palette-secondary-30deg20);
--md-sys-color-on-secondary-30deg-container: var(--md-ref-palette-secondary-30deg90);
--md-sys-color-tertiary-30deg: var(--md-ref-palette-tertiary-30deg80);
--md-sys-color-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg30);
--md-sys-color-on-tertiary-30deg: var(--md-ref-palette-tertiary-30deg20);
--md-sys-color-on-tertiary-30deg-container: var(--md-ref-palette-tertiary-30deg90);
--md-sys-color-primary-60deg: var(--md-ref-palette-primary-60deg80);
--md-sys-color-primary-60deg-container: var(--md-ref-palette-primary-60deg30);
--md-sys-color-on-primary-60deg: var(--md-ref-palette-primary-60deg20);
--md-sys-color-on-primary-60deg-container: var(--md-ref-palette-primary-60deg90);
--md-sys-color-secondary-60deg: var(--md-ref-palette-secondary-60deg80);
--md-sys-color-secondary-60deg-container: var(--md-ref-palette-secondary-60deg30);
--md-sys-color-on-secondary-60deg: var(--md-ref-palette-secondary-60deg20);
--md-sys-color-on-secondary-60deg-container: var(--md-ref-palette-secondary-60deg90);
--md-sys-color-tertiary-60deg: var(--md-ref-palette-tertiary-60deg80);
--md-sys-color-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg30);
--md-sys-color-on-tertiary-60deg: var(--md-ref-palette-tertiary-60deg20);
--md-sys-color-on-tertiary-60deg-container: var(--md-ref-palette-tertiary-60deg90);
--md-sys-color-primary-90deg: var(--md-ref-palette-primary-90deg80);
--md-sys-color-primary-90deg-container: var(--md-ref-palette-primary-90deg30);
--md-sys-color-on-primary-90deg: var(--md-ref-palette-primary-90deg20);
--md-sys-color-on-primary-90deg-container: var(--md-ref-palette-primary-90deg90);
--md-sys-color-secondary-90deg: var(--md-ref-palette-secondary-90deg80);
--md-sys-color-secondary-90deg-container: var(--md-ref-palette-secondary-90deg30);
--md-sys-color-on-secondary-90deg: var(--md-ref-palette-secondary-90deg20);
--md-sys-color-on-secondary-90deg-container: var(--md-ref-palette-secondary-90deg90);
--md-sys-color-tertiary-90deg: var(--md-ref-palette-tertiary-90deg80);
--md-sys-color-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg30);
--md-sys-color-on-tertiary-90deg: var(--md-ref-palette-tertiary-90deg20);
--md-sys-color-on-tertiary-90deg-container: var(--md-ref-palette-tertiary-90deg90);
--md-sys-color-primary-120deg: var(--md-ref-palette-primary-120deg80);
--md-sys-color-primary-120deg-container: var(--md-ref-palette-primary-120deg30);
--md-sys-color-on-primary-120deg: var(--md-ref-palette-primary-120deg20);
--md-sys-color-on-primary-120deg-container: var(--md-ref-palette-primary-120deg90);
--md-sys-color-secondary-120deg: var(--md-ref-palette-secondary-120deg80);
--md-sys-color-secondary-120deg-container: var(--md-ref-palette-secondary-120deg30);
--md-sys-color-on-secondary-120deg: var(--md-ref-palette-secondary-120deg20);
--md-sys-color-on-secondary-120deg-container: var(--md-ref-palette-secondary-120deg90);
--md-sys-color-tertiary-120deg: var(--md-ref-palette-tertiary-120deg80);
--md-sys-color-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg30);
--md-sys-color-on-tertiary-120deg: var(--md-ref-palette-tertiary-120deg20);
--md-sys-color-on-tertiary-120deg-container: var(--md-ref-palette-tertiary-120deg90);
--md-sys-color-primary-150deg: var(--md-ref-palette-primary-150deg80);
--md-sys-color-primary-150deg-container: var(--md-ref-palette-primary-150deg30);
--md-sys-color-on-primary-150deg: var(--md-ref-palette-primary-150deg20);
--md-sys-color-on-primary-150deg-container: var(--md-ref-palette-primary-150deg90);
--md-sys-color-secondary-150deg: var(--md-ref-palette-secondary-150deg80);
--md-sys-color-secondary-150deg-container: var(--md-ref-palette-secondary-150deg30);
--md-sys-color-on-secondary-150deg: var(--md-ref-palette-secondary-150deg20);
--md-sys-color-on-secondary-150deg-container: var(--md-ref-palette-secondary-150deg90);
--md-sys-color-tertiary-150deg: var(--md-ref-palette-tertiary-150deg80);
--md-sys-color-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg30);
--md-sys-color-on-tertiary-150deg: var(--md-ref-palette-tertiary-150deg20);
--md-sys-color-on-tertiary-150deg-container: var(--md-ref-palette-tertiary-150deg90);
--md-sys-color-primary-180deg: var(--md-ref-palette-primary-180deg80);
--md-sys-color-primary-180deg-container: var(--md-ref-palette-primary-180deg30);
--md-sys-color-on-primary-180deg: var(--md-ref-palette-primary-180deg20);
--md-sys-color-on-primary-180deg-container: var(--md-ref-palette-primary-180deg90);
--md-sys-color-secondary-180deg: var(--md-ref-palette-secondary-180deg80);
--md-sys-color-secondary-180deg-container: var(--md-ref-palette-secondary-180deg30);
--md-sys-color-on-secondary-180deg: var(--md-ref-palette-secondary-180deg20);
--md-sys-color-on-secondary-180deg-container: var(--md-ref-palette-secondary-180deg90);
--md-sys-color-tertiary-180deg: var(--md-ref-palette-tertiary-180deg80);
--md-sys-color-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg30);
--md-sys-color-on-tertiary-180deg: var(--md-ref-palette-tertiary-180deg20);
--md-sys-color-on-tertiary-180deg-container: var(--md-ref-palette-tertiary-180deg90);
--md-sys-color-primary-210deg: var(--md-ref-palette-primary-210deg80);
--md-sys-color-primary-210deg-container: var(--md-ref-palette-primary-210deg30);
--md-sys-color-on-primary-210deg: var(--md-ref-palette-primary-210deg20);
--md-sys-color-on-primary-210deg-container: var(--md-ref-palette-primary-210deg90);
--md-sys-color-secondary-210deg: var(--md-ref-palette-secondary-210deg80);
--md-sys-color-secondary-210deg-container: var(--md-ref-palette-secondary-210deg30);
--md-sys-color-on-secondary-210deg: var(--md-ref-palette-secondary-210deg20);
--md-sys-color-on-secondary-210deg-container: var(--md-ref-palette-secondary-210deg90);
--md-sys-color-tertiary-210deg: var(--md-ref-palette-tertiary-210deg80);
--md-sys-color-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg30);
--md-sys-color-on-tertiary-210deg: var(--md-ref-palette-tertiary-210deg20);
--md-sys-color-on-tertiary-210deg-container: var(--md-ref-palette-tertiary-210deg90);
--md-sys-color-primary-240deg: var(--md-ref-palette-primary-240deg80);
--md-sys-color-primary-240deg-container: var(--md-ref-palette-primary-240deg30);
--md-sys-color-on-primary-240deg: var(--md-ref-palette-primary-240deg20);
--md-sys-color-on-primary-240deg-container: var(--md-ref-palette-primary-240deg90);
--md-sys-color-secondary-240deg: var(--md-ref-palette-secondary-240deg80);
--md-sys-color-secondary-240deg-container: var(--md-ref-palette-secondary-240deg30);
--md-sys-color-on-secondary-240deg: var(--md-ref-palette-secondary-240deg20);
--md-sys-color-on-secondary-240deg-container: var(--md-ref-palette-secondary-240deg90);
--md-sys-color-tertiary-240deg: var(--md-ref-palette-tertiary-240deg80);
--md-sys-color-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg30);
--md-sys-color-on-tertiary-240deg: var(--md-ref-palette-tertiary-240deg20);
--md-sys-color-on-tertiary-240deg-container: var(--md-ref-palette-tertiary-240deg90);
--md-sys-color-primary-270deg: var(--md-ref-palette-primary-270deg80);
--md-sys-color-primary-270deg-container: var(--md-ref-palette-primary-270deg30);
--md-sys-color-on-primary-270deg: var(--md-ref-palette-primary-270deg20);
--md-sys-color-on-primary-270deg-container: var(--md-ref-palette-primary-270deg90);
--md-sys-color-secondary-270deg: var(--md-ref-palette-secondary-270deg80);
--md-sys-color-secondary-270deg-container: var(--md-ref-palette-secondary-270deg30);
--md-sys-color-on-secondary-270deg: var(--md-ref-palette-secondary-270deg20);
--md-sys-color-on-secondary-270deg-container: var(--md-ref-palette-secondary-270deg90);
--md-sys-color-tertiary-270deg: var(--md-ref-palette-tertiary-270deg80);
--md-sys-color-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg30);
--md-sys-color-on-tertiary-270deg: var(--md-ref-palette-tertiary-270deg20);
--md-sys-color-on-tertiary-270deg-container: var(--md-ref-palette-tertiary-270deg90);
--md-sys-color-primary-300deg: var(--md-ref-palette-primary-300deg80);
--md-sys-color-primary-300deg-container: var(--md-ref-palette-primary-300deg30);
--md-sys-color-on-primary-300deg: var(--md-ref-palette-primary-300deg20);
--md-sys-color-on-primary-300deg-container: var(--md-ref-palette-primary-300deg90);
--md-sys-color-secondary-300deg: var(--md-ref-palette-secondary-300deg80);
--md-sys-color-secondary-300deg-container: var(--md-ref-palette-secondary-300deg30);
--md-sys-color-on-secondary-300deg: var(--md-ref-palette-secondary-300deg20);
--md-sys-color-on-secondary-300deg-container: var(--md-ref-palette-secondary-300deg90);
--md-sys-color-tertiary-300deg: var(--md-ref-palette-tertiary-300deg80);
--md-sys-color-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg30);
--md-sys-color-on-tertiary-300deg: var(--md-ref-palette-tertiary-300deg20);
--md-sys-color-on-tertiary-300deg-container: var(--md-ref-palette-tertiary-300deg90);
--md-sys-color-primary-330deg: var(--md-ref-palette-primary-330deg80);
--md-sys-color-primary-330deg-container: var(--md-ref-palette-primary-330deg30);
--md-sys-color-on-primary-330deg: var(--md-ref-palette-primary-330deg20);
--md-sys-color-on-primary-330deg-container: var(--md-ref-palette-primary-330deg90);
--md-sys-color-secondary-330deg: var(--md-ref-palette-secondary-330deg80);
--md-sys-color-secondary-330deg-container: var(--md-ref-palette-secondary-330deg30);
--md-sys-color-on-secondary-330deg: var(--md-ref-palette-secondary-330deg20);
--md-sys-color-on-secondary-330deg-container: var(--md-ref-palette-secondary-330deg90);
--md-sys-color-tertiary-330deg: var(--md-ref-palette-tertiary-330deg80);
--md-sys-color-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg30);
--md-sys-color-on-tertiary-330deg: var(--md-ref-palette-tertiary-330deg20);
--md-sys-color-on-tertiary-330deg-container: var(--md-ref-palette-tertiary-330deg90);
}
.Alert .Icon {
font-size: 5em !important;
line-height: 1 !important;
}
.Align {
min-width: 0;
}
.Align.Center > * {
margin-left: auto;
margin-right: auto;
min-width: 0;
}
.Align.Right > * {
margin-left: auto;
min-width: 0;
}
.Align.Left > * {
margin-right: auto;
min-width: 0;
}
.AppBar {
border-bottom: solid 1px rgb(var(--md-sys-color-outline-variant));
position: sticky;
z-index: 1010;
top: 0px;
background-color: rgb(var(--md-sys-color-background));
margin-bottom: 16px;
width: 100%;
padding: 8px 0;
}
@media print {
.AppBar {
background-color: unset;
}
}
.AppBar .AppBarTitle {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
column-gap: 0.5ch;
}
@media only screen and (max-width: 600px) {
.AppBar .AppBarTitle > H1 {
font-family: var(--md-sys-typescale-headline-small-font);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
line-height: var(--md-sys-typescale-headline-small-line-height);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}
}
.AppBar .AppBarTitle > H1 {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Back link */
.AppBar .AppBarTitle > A:first-child {
margin-left: -4px;
color: var(--md-sys-color-on-surface-variant);
text-decoration: none;
user-select: none;
font-size: var(--md-sys-typescale-headline-small-size);
}
@media print {
.AppBar .AppBarTitle A:first-child {
display: none;
}
}
.AppBar .AppBarTitle A:first-child:hover {
color: rgba(var(--md-sys-color-on-surface-variant), calc(1 - var(--md-sys-state-hover-state-layer-opacity)));
}
.AppBar .AppBarTitle A:first-child:hover:active {
color: rgba(var(--md-sys-color-on-surface-variant), calc(1 - var(--md-sys-state-pressed-state-layer-opacity)));
}
.AppBar .AppBarTitle A:first-child:focus {
color: rgba(var(--md-sys-color-on-surface-variant), calc(1 - var(--md-sys-state-focus-state-layer-opacity)));
}
.AppBar > .Block:not(:first-child),
.AppBar > .Block:not(:last-child) {
margin-block-start: 0;
margin-block-end: 0;
}
.Avatar {
display: inline-flex;
align-items: center;
}
.Avatar > DIV {
color: rgb(var(--md-sys-color-on-surface));
background-color: rgb(var(--md-sys-color-surface-variant));
background-size: cover;
background-position: center center;
border-radius: 50% 50%;
border: solid 1px rgb(var(--md-sys-color-outline-variant));
width: 2em;
height: 2em;
display: inline-flex;
align-items: center;
}
.Avatar > DIV > DIV {
width: 100%;
text-align: center;
white-space: nowrap;
text-transform: uppercase;
}
.Avatar > SPAN {
margin-left: 0.5ch;
}
.BannerImage {
width: 100%;
background-size: cover;
background-position: center;
}
.SubmitButton {
display: inline-flex;
min-width: 0;
}
.SubmitButton > INPUT[type=checkbox] {
position: absolute;
height: calc(2.5em + 2px);
font-size: var(--md-sys-typescale-label-large-size);
width: 1px;
border: none !important;
outline: none !important;
z-index: -1;
margin-left: 2ch;
background-color: transparent;
}
BUTTON {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
border-radius: 1.25em;
height: 2.5em;
padding: 0 2ch;
border: none;
cursor: pointer;
user-select: none;
outline: none;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
BUTTON.Filled, BUTTON.Tonal, BUTTON.Text, BUTTON.Elevated {
height: calc(2.5em + 2px);
}
BUTTON:focus {
outline: none;
}
BUTTON > .Icon:first-child {
margin-right: 0.4ch;
margin-left: -0.25ch;
margin-bottom: -0.05em;
font-size: 1.1em;
}
BUTTON.SingleIcon {
width: calc(2.5em + 2px);
padding: 0;
}
BUTTON.SingleIcon > .Icon {
font-size: 1.5em !important;
margin: 0;
}
BUTTON.Filled {
color: rgb(var(--md-sys-color-on-primary));
background-color: rgb(var(--md-sys-color-primary));
}
BUTTON.Filled:hover:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-primary), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-primary), var(--md-sys-state-hover-state-layer-opacity)));
}
BUTTON.Filled:hover:active:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-primary), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-primary), var(--md-sys-state-pressed-state-layer-opacity)));
}
BUTTON.Filled:focus:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-primary), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-primary), var(--md-sys-state-focus-state-layer-opacity)));
}
BUTTON.Filled:disabled {
cursor: default;
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
BUTTON.Outlined {
background-color: rgb(var(--md-sys-color-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
color: var(--md-sys-color-on-primary);
}
BUTTON.Outlined:hover:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)));
}
BUTTON.Outlined:hover:active:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)));
}
BUTTON.Outlined:focus:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)));
}
BUTTON.Outlined:disabled {
cursor: default;
border-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
BUTTON.Text {
color: rgb(var(--md-sys-color-primary));
background-color: transparent;
}
BUTTON.Text:hover:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)));
}
BUTTON.Text:hover:active:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)));
}
BUTTON.Text:focus:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)));
}
BUTTON.Text:disabled {
cursor: default;
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
BUTTON.Tonal {
color: rgb(var(--md-sys-color-on-secondary-container));
background-color: rgb(var(--md-sys-color-secondary-container));
}
BUTTON.Tonal:hover:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-secondary-container), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-secondary-container), var(--md-sys-state-hover-state-layer-opacity)));
}
BUTTON.Tonal:hover:active:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-secondary-container), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-secondary-container), var(--md-sys-state-pressed-state-layer-opacity)));
}
BUTTON.Tonal:focus:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-secondary-container), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-secondary-container), var(--md-sys-state-focus-state-layer-opacity)));
}
BUTTON.Tonal:disabled {
cursor: default;
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
BUTTON.Elevated {
color: rgb(var(--md-sys-color-primary));
background-color: rgb(var(--md-sys-color-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
}
BUTTON.Elevated:hover:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)));
}
BUTTON.Elevated:hover:active:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)));
}
BUTTON.Elevated:focus:not(:disabled) {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)));
}
BUTTON.Elevated:disabled {
cursor: default;
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
box-shadow: initial;
}
.Card {
display: flex;
width: 100%;
}
.Card > DIV {
width: 100%;
border-radius: 12px;
}
.Card > DIV > .BannerImage {
border-radius: 12px;
padding: 0;
}
.Card > DIV > DIV {
padding: 16px;
}
/* Elevated */
.Card.Elevated > DIV {
background-color: rgb(var(--md-sys-color-surface-container-low));
box-shadow: var(--md-sys-elevation-level1-shadow);
}
.Card.Elevated > DIV[tabindex]:hover {
cursor: hand;
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
box-shadow: var(--md-sys-elevation-level2-shadow);
}
.Card.Elevated > DIV[tabindex]:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
.Card.Elevated > DIV[tabindex]:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
box-shadow: var(--md-sys-elevation-level1-shadow);
}
.Card.Elevated > DIV.Disabled {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-disabled-state-layer-opacity));
box-shadow: var(--md-sys-elevation-level0-shadow);
}
/* Filled */
.Card.Filled > DIV {
background-color: rgb(var(--md-sys-color-surface-container-highest));
}
.Card.Filled > DIV[tabindex]:hover {
cursor: hand;
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
box-shadow: var(--md-sys-elevation-level1-shadow);
}
.Card.Filled > DIV[tabindex]:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
.Card.Filled > DIV[tabindex]:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
.Card.Filled > DIV.Disabled {
background-color: rgba(var(--md-sys-color-surface-container-highest), var(--md-sys-state-disabled-state-layer-opacity));
}
/* Outlined */
.Card.Outlined > DIV {
background-color: rgb(var(--md-sys-color-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
}
.Card.Outlined > DIV[tabindex]:hover {
cursor: hand;
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
box-shadow: var(--md-sys-elevation-level1-shadow);
}
.Card.Outlined > DIV[tabindex]:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
.Card.Outlined > DIV[tabindex]:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
.Card.Outlined > DIV.Disabled {
background-color: unset;
border: solid 1px rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.RadioStrip.Vertical {
display: flex;
flex-direction: column;
row-gap: 0.5em;
flex-wrap: nowrap;
}
.RadioStrip.Horizontal {
display: flex;
flex-direction: row;
column-gap: 1ch;
row-gap: 0.5em;
flex-wrap: wrap;
}
.Radio, .Checkbox {
display: flex;
align-items: center;
column-gap: 2px;
}
.Radio > INPUT[type="radio"], .Checkbox > INPUT[type="checkbox"] {
flex-shrink: 0;
flex-grow: 0;
}
INPUT[type=radio], INPUT[type=checkbox] {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1.1em;
width: 1.1em;
vertical-align: text-top;
font-family: inherit;
font-size: inherit;
border-radius: 3px;
outline: none;
}
INPUT[type=radio] {
border-radius: 1em;
}
INPUT[type=Radio] + LABEL, INPUT[type=Checkbox] + LABEL {
margin-left: 0.5ch;
cursor: default;
}
/* Checkmark icon */
INPUT[type=checkbox]:checked {
background-image: url('data:image/svg+xml;utf8,');
background-size: 0.8em;
background-position: center;
background-repeat: no-repeat;
}
INPUT[type=checkbox]:not(:checked) {
background-image: none !important;
}
/* Enabled */
INPUT[type=radio]:not(:disabled),
INPUT[type=checkbox]:not(:disabled) {
border: solid 1px rgb(var(--md-sys-color-on-surface));
cursor: hand;
}
/* Invalid */
.Radio.Invalid > INPUT[type=radio]:not(:disabled):invalid,
.Checkbox.Invalid > INPUT[type=checkbox]:not(:disabled):invalid {
border: solid 1px rgb(var(--md-sys-color-error));
}
/* Checked */
INPUT[type=radio]:checked:not(:disabled),
INPUT[type=checkbox]:checked:not(:disabled) {
color: rgb(var(--md-sys-color-on-primary));
background-color: rgb(var(--md-sys-color-primary));
border-color: rgb(var(--md-sys-color-primary));
}
/* Checked and invalid */
INPUT[type=radio]:checked:not(:disabled):invalid,
INPUT[type=checkbox]:checked:not(:disabled):invalid {
background-color: rgb(var(--md-sys-error));
border-color: rgb(var(--md-sys-error));
}
/* Disabled */
INPUT[type=radio]:disabled:not(:checked),
INPUT[type=checkbox]:disabled:not(:checked) {
border: solid 1px rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
INPUT[type=radio]:disabled:checked,
INPUT[type=checkbox]:disabled:checked {
color: rgb(var(--md-sys-color-surface));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
INPUT[type=Radio]:disabled + LABEL,
INPUT[type=Checkbox]:disabled + LABEL {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
/* Hover */
INPUT[type=radio]:checked:not(:disabled):hover,
INPUT[type=checkbox]:checked:not(:disabled):hover {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=radio]:not(:checked):not(:disabled):hover,
INPUT[type=checkbox]:not(:checked):not(:disabled):hover {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=radio]:not(:disabled):invalid:hover,
INPUT[type=checkbox]:not(:disabled):invalid:hover {
outline: solid 0.5em rgba(var(--md-sys-color-error), var(--md-sys-state-hover-state-layer-opacity));
}
/* Pressed */
INPUT[type=radio]:checked:not(:disabled):hover:active,
INPUT[type=checkbox]:checked:not(:disabled):hover:active {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=radio]:not(:checked):not(:disabled):hover:active,
INPUT[type=checkbox]:not(:checked):not(:disabled):hover:active {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=radio]:not(:disabled):invalid:hover:active,
INPUT[type=checkbox]:not(:disabled):invalid:hover:active {
outline: solid 0.5em rgba(var(--md-sys-color-error), var(--md-sys-state-pressed-state-layer-opacity));
}
/* Focus */
INPUT[type=radio]:checked:not(:disabled):focus,
INPUT[type=checkbox]:checked:not(:disabled):focus {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
INPUT[type=radio]:not(:checked):not(:disabled):focus,
INPUT[type=checkbox]:not(:checked):not(:disabled):focus {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
INPUT[type=radio]:not(:disabled):invalid:focus,
INPUT[type=checkbox]:not(:disabled):invalid:focus {
outline: solid 0.5em rgba(var(--md-sys-color-error), var(--md-sys-state-focus-state-layer-opacity));
}
CODE {
background-color: rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity));
border-radius: 3px;
font-family: 'Roboto Mono', monospace;
padding: 0 0.5ch;
}
PRE.Code {
background-color: rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity));
border-radius: 3px;
font-family: 'Roboto Mono', monospace;
padding: 0.5em 1ch;
overflow-x: auto;
margin: 0;
}
PRE.Code > CODE {
background-color: unset;
border-radius: 0;
padding: 0;
}
.ColorSwatch {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 3px;
}
.Debugger {
font-family: var(--md-sys-typescale-body-small-font);
font-size: var(--md-sys-typescale-body-small-size);
font-weight: var(--md-sys-typescale-body-small-weight);
line-height: var(--md-sys-typescale-body-small-line-height);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
display: none;
padding: 0 8px 8px 8px;
background-color: rgb(var(--md-sys-color-secondary-container));
color: rgb(var(--md-sys-color-on-secondary-container));
border-width: 0 0 0 5px;
border-style: solid;
border-color: rgb(var(--md-sys-color-secondary));
position: fixed;
bottom: 1ch;
right: -48ch;
width: 50ch;
max-height: 90vh;
z-index: 1000000;
overflow-wrap: break-word;
overflow-y: auto;
cursor: w-resize;
transition: right 0.25s;
}
.Debugger.Shown {
cursor: e-resize;
right: 0;
}
.Debugger.Error {
background-color: rgb(var(--md-sys-color-error-container));
color: rgb(var(--md-sys-color-on-error-container));
border-color: rgb(var(--md-sys-on-error-container));
}
.Debugger > H5 {
margin-block-start: 0.5em !important;
margin-block-end: 0 !important;
text-transform: initial;
padding: 0 1px;
}
.Debugger > DIV, .Debugger > PRE {
white-space: nowrap;
overflow-x: auto;
padding: 0 1px;
}
.Debugger *[data-ref] {
cursor: default;
}
.Debugger *[data-ref]:hover {
outline: solid 1px rgb(var(--md-sys-color-error));
}
:root {
--debugger-highlight-color: 255,0,0;
}
@media (prefers-color-scheme: dark) {
:root {
--debugger-highlight-color: 255,255,0;
}
}
.DebuggerHighlight {
animation-name: DebuggerPulse;
animation-duration: 1s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
outline-style: solid;
outline-width: 1px;
background-color: rgba(var(--debugger-highlight-color), var(--md-sys-state-hover-state-layer-opacity)) !important;
}
.DebuggerHighlightNoAnim {
border: solid 1px rgb(var(--debugger-highlight-color));
background-color: rgba(var(--debugger-highlight-color), var(--md-sys-state-hover-state-layer-opacity)) !important;
}
.DebuggerHighlight *:not(.Debugger), .DebuggerHighlightNoAnim *:not(.Debugger) {
background-color: transparent !important;
}
@keyframes DebuggerPulse {
from {
outline-color: rgba(var(--debugger-highlight-color), 1);
outline-offset: 1px;
}
to {
outline-color: rgba(var(--debugger-highlight-color), 0);
outline-offset: 16px;
}
}
.Deck > DIV {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
align-items: stretch;
}
.Deck > DIV > DIV {
display: flex;
align-items: stretch;
}
/* .Deck > DIV > DIV {
flex-grow: 1;
} */
/* Reduce flicker */
.Deck > DIV:not(.WidthObserved) {
visibility: hidden;
}
.Embed {
width: 100%;
}
.Field {
display: flex;
flex-wrap: wrap;
row-gap: 0.25em;
}
.FieldLabel {
color: rgb(var(--md-sys-color-on-surface-variant));
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.Field > DIV:first-child {
flex-basis: 150px;
flex-grow: 1;
min-width: 25%;
max-width: 100%;
}
.Field > DIV:last-child {
flex-basis: 450px;
flex-grow: 3;
min-width: 75%;
max-width: 100%;
}
.Field > DIV:first-child A {
color: inherit;
}
.FilterChip {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
user-select: none;
border-radius: 8px;
height: 32px;
display: inline-flex;
align-items: center;
padding: 5px 0;
vertical-align: bottom;
max-width: 100%;
}
.FilterChip > INPUT:first-child {
display: none;
}
.FilterChip > .Icon {
width: 0px;
font-size: 18px !important;
line-height: 18px !important;
transition: width 0.15s;
overflow: hidden;
}
.FilterChip > SPAN:last-child {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Disabled */
.FilterChip[disabled] {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
.FilterChip[disabled].Selected {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.FilterChip[disabled]:not(.Selected) {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border: solid 1px rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.FilterChip:not([disabled]) {
cursor: hand;
}
/* Checked */
.FilterChip.Selected {
padding-left: 8px;
padding-right: 16px;
}
.FilterChip.Selected > .Icon {
width: 26px;
}
.FilterChip:not([disabled]).Selected {
color: rgb(var(--md-sys-color-on-secondary-container));
background-color: rgb(var(--md-sys-color-secondary-container));
}
.FilterChip:not([disabled]).Selected:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-surface), var(--md-sys-state-hover-state-layer-opacity)));
}
.FilterChip:not([disabled]).Selected:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
.FilterChip:not([disabled]).Selected:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
/* Unchecked */
.FilterChip:not(.Selected) {
padding-left: 16px;
padding-right: 16px;
}
.FilterChip:not([disabled]):not(.Selected) {
border: solid 1px rgb(var(--md-sys-color-outline));
color: rgb(var(--md-sys-color-on-surface-variant));
}
.FilterChip:not([disabled]):not(.Selected):hover {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.FilterChip:not([disabled]):not(.Selected):hover:active {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.FilterChip:not([disabled]):not(.Selected):focus {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-focus-state-layer-opacity));
}
.InputForm.Block {
max-width: 800px;
}
.InputForm > FORM {
margin: 0;
display: inline;
}
.Gallery {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
}
.Gallery > DIV {
min-width: 0;
}
.GoogleChart > DIV:last-child {
visibility: hidden;
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-background));
}
.GoogleChart > DIV:last-child > .Primary {
color: rgb(var(--md-sys-color-primary));
}
.GoogleChart > DIV:last-child > .Secondary {
color: rgb(var(--md-sys-color-secondary));
}
.GoogleChart > DIV:last-child > .Tertiary {
color: rgb(var(--md-sys-color-tertiary));
}
.GoogleChart > DIV:last-child > .Outline {
color: rgb(var(--md-sys-color-outline));
}
.GoogleChart > DIV:last-child > .OutlineVariant {
color: rgb(var(--md-sys-color-outline-variant));
}
.GroupingFrame {
border: solid 1px rgb(var(--md-sys-color-outline-variant));
border-radius: 24px;
padding: 0 12px;
margin-top: 4px;
overflow: hidden;
}
.GroupingFrame > DIV {
margin-top: 4px;
}
/* Title */
.GroupingFrame > SPAN {
position: absolute;
color: rgb(var(--md-sys-color-outline-variant));
font-family: var(--md-sys-typescale-label-small-font);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
background-color: rgb(var(--md-sys-color-background));
margin-top: -8px;
margin-left: 12px;
padding: 0 0.5ch;
}
H1, H2, H3, H4, H5, H6 {
margin-top: 0;
margin-block-start: 0;
margin-block-end: 0;
}
H1:not(:first-child), H2:not(:first-child), H3:not(:first-child) {
margin-block-start: 12px;
}
H1:not(:last-child), H2:not(:last-child), H3:not(:last-child) {
margin-block-end: 12px;
}
H4:not(:first-child), H5:not(:first-child) {
margin-block-start: 8px;
}
H4:not(:last-child), H5:not(:last-child) {
margin-block-end: 8px;
}
H1, H2, H3 {
letter-spacing: 1px;
}
H1 {
font-family: var(--md-sys-typescale-headline-large-font);
font-size: var(--md-sys-typescale-headline-large-size);
font-weight: var(--md-sys-typescale-headline-large-weight);
line-height: var(--md-sys-typescale-headline-large-line-height);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}
H2 {
font-family: var(--md-sys-typescale-headline-medium-font);
font-size: var(--md-sys-typescale-headline-medium-size);
font-weight: var(--md-sys-typescale-headline-medium-weight);
line-height: var(--md-sys-typescale-headline-medium-line-height);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}
H3 {
font-family: var(--md-sys-typescale-headline-small-font);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
line-height: var(--md-sys-typescale-headline-small-line-height);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}
H4 {
font-family: var(--md-sys-typescale-title-large-font);
font-size: var(--md-sys-typescale-title-large-size);
font-weight: var(--md-sys-typescale-title-large-weight);
line-height: var(--md-sys-typescale-title-large-line-height);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
}
H5 {
font-family: var(--md-sys-typescale-title-medium-font);
font-size: var(--md-sys-typescale-title-medium-size);
font-weight: var(--md-sys-typescale-title-medium-weight);
line-height: var(--md-sys-typescale-title-medium-line-height);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
H6 {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
display: inline;
}
.Icon {
text-decoration: none;
vertical-align: bottom;
}
.Icon > .SVG {
height: 1em;
max-width: 100%;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 1em;
line-height: inherit;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
IMG {
max-width: 100%;
}
A:hover IMG {
filter: brightness(87.5%);
}
.InfoBubble {
vertical-align: middle;
}
.InfoBubble > SPAN {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.InfoBubble > SPAN > .Icon {
padding: 0 0.25ch;
color: rgb(var(--md-sys-color-on-surface-variant));
cursor: pointer;
font-size: 1.1em;
vertical-align: middle;
}
.InfoBubble > SPAN + DIV {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
text-transform: none;
text-decoration: none;
text-align: initial;
letter-spacing: 0;
white-space: normal;
color: rgb(var(--md-sys-color-on-surface-variant));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-surface));
display: none;
position: absolute;
z-index: 1100;
width: auto;
max-width: 48ch;
max-height: 10em;
overflow-y: auto;
padding: 0.5em 1ch 0.75em 1ch;
border-radius: 3px;
box-shadow: var(--md-sys-elevation-level1-shadow);
}
.InfoBubble > SPAN:hover + DIV, .InfoBubble > SPAN + DIV:hover {
display: block;
}
.InfoLink {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.InfoLink > A {
padding: 0 0.25ch;
color: rgb(var(--md-sys-color-on-surface-variant));
}
.InputChips {
background-color: transparent;
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
display: flex;
align-items: center;
row-gap: 0.5em;
padding: 0.25em 0.5ch;
flex-wrap: wrap;
min-height: 2.5em;
}
.InputChips:not([data-maxitems="1"]) {
column-gap: 1ch;
}
/* Valid */
.InputChips:not(.Invalid):not(.Disabled):hover:not(.Focus) {
border-color: rgb(var(--md-sys-color-on-surface));
caret-color: rgb(var(--md-sys-color-primary));
}
.InputChips:not(.Invalid).Focus {
border-color: rgb(var(--md-sys-color-primary));
outline: none;
}
/* Invalid */
.InputChips.Invalid:not(.Disabled):hover:not(.Focus) {
border-color: rgb(var(--md-sys-color-on-error-container));
}
.InputChips.Invalid {
border-color: rgb(var(--md-sys-color-error));
caret-color: rgb(var(--md-sys-color-error));
}
/* Disabled */
.InputChips.Disabled {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
/* Chip */
.InputChips > .Chip {
display: flex;
align-items: center;
height: 32px;
white-space: nowrap;
max-width: 100%;
column-gap: 4px;
}
.InputChips:not([data-maxitems="1"]) > .Chip {
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 8px;
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-surface-variant));
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
padding: 0 4px 0 12px;
}
.InputChips[data-maxitems="1"] > .Chip {
width: 100%;
}
.InputChips > .Chip > SPAN:first-child {
overflow-x: hidden;
text-overflow: ellipsis;
}
.InputChips[data-maxitems="1"] > .Chip > SPAN:first-child {
flex: 1;
}
.InputChips.Disabled > .Chip {
border-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
.InputChips:not(.Disabled) > .Chip {
cursor: hand;
}
.InputChips > .Chip > .Remove {
width: 20px;
height: 20px;
border-radius: 10px;
text-align: center;
}
.InputChips > .Chip > .Remove > I {
line-height: 20px;
}
.InputChips:not(.Disabled) > .Chip > .Remove:hover {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.InputChips:not(.Disabled) > .Chip > .Remove:hover:active {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.InputChips:not(.Disabled):not([data-maxitems="1"]) > .Chip:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)));
}
.InputChips:not(.Disabled):not([data-maxitems="1"]) > .Chip:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)));
}
.InputChips:not(.Disabled):not([data-maxitems="1"]) > .Chip:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)));
}
.InputChips > .BlankChip {
display: none;
}
.InputChips > INPUT[type="text"] {
flex: 1;
min-width: 8ch !important;
border: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
height: 32px !important;
}
.InputChips > INPUT[type="text"].Saturated {
/* display: none; */
width: 0px !important;
min-width: 0px !important;
flex: 0;
}
.InputChips > TEXTAREA {
display: none;
}
/* Popup */
.InputChips > UL {
display: none;
position: absolute;
z-index: 2;
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 3px;
padding: 0.25em 0 0.25em 0;
cursor: default;
}
.InputChips > UL > LI {
padding: 0.5em 3ch 0.5em 1ch;
display: block;
white-space: nowrap;
}
.InputChips > UL > LI > DIV:first-child {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.InputChips > UL > LI > DIV:last-child {
font-family: var(--md-sys-typescale-label-small-font);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
color: rgba(var(--md-sys-color-on-background), calc(1 - var(--md-sys-state-disabled-state-layer-opacity)));
}
.InputChips:not(.Disabled) > UL > LI.Active {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.InputChips:not(.Disabled) > UL > LI:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
}
.InputChips:not(.Disabled) > UL > LI:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
input[type="color"] {
width: 8ch;
padding: 0px !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-moz-color-swatch {
border: none;
}
.InputFile {
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
background-color: transparent;
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
outline: none;
display: flex;
align-items: center;
height: 2.5em;
}
.InputFile[disabled] {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.InputFile:not(.Invalid):not([disabled]):not(:focus):hover {
border-color: rgb(var(--md-sys-color-on-surface));
}
.InputFile:not(.Invalid):not([disabled]):focus {
border-color: rgb(var(--md-sys-color-primary));
outline: none;
}
.InputFile.Invalid {
border-color: rgb(var(--md-sys-color-error));
}
/* Drop zone */
.InputFile > .DropZone {
color: rgb(var(--md-sys-color-outline-variant));
user-select: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 0 0.5ch;
cursor: hand;
}
.InputFile:not(.Upload) > .DropZone, .InputFile[disabled] > .DropZone {
display: none;
cursor: initial;
}
.InputFile.Dragging {
border-color: rgb(var(--md-sys-color-primary));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-dragged-state-layer-opacity));
}
/* Button */
.InputFile > INPUT[type=file] {
display: none;
}
/* Progress */
.InputFile > PROGRESS {
width: 100%;
appearance: none;
height: 100%;
background-color: transparent;
color: rgb(var(--md-sys-color-primary));
}
.InputFile > PROGRESS::-webkit-progress-bar {
background-color: transparent;
}
.InputFile > PROGRESS::-webkit-progress-value {
background-color: rgb(var(--md-sys-color-primary));
}
.InputFile > PROGRESS::-moz-progress-bar {
background-color: rgb(var(--md-sys-color-primary));
}
.InputFile:not(.Uploading) > PROGRESS {
display: none;
}
/* Filename */
.InputFile:not(.Uploaded) > .FileName {
display: none;
}
.InputFile > .FileName {
display: flex;
align-items: center;
width: 100%;
padding: 0 0.5ch;
}
.InputFile > .FileName > DIV:first-child {
flex: 1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.InputFile > .FileName > .Icon {
cursor: hand;
color: rgb(var(--md-sys-color-on-surface-variant));
border-radius: 1em;
width: 1em;
height: 1em;
line-height: 1;
margin-right: 0.25em;
}
.InputFile > .FileName > .Icon:hover {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.InputFile > .FileName > .Icon:hover:active {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
INPUT[type=range] {
-webkit-appearance: none;
background: transparent;
margin: 0.5em 0;
border: none;
padding: 0;
width: 100%;
}
INPUT[type=range]:focus {
outline: none;
}
INPUT[type=range]:disabled {
background-color: unset;
cursor: default;
}
INPUT[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
INPUT[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
/* Thumb/handle */
INPUT[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -6px;
border: none;
height: 16px;
width: 16px;
border-radius: 8px;
background: rgb(var(--md-sys-color-primary));
cursor: ew-resize;
}
INPUT[type=range]:disabled::-webkit-slider-thumb {
background: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)));
cursor: default;
}
INPUT[type=range]:not(:disabled):hover::-webkit-slider-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):hover:active::-webkit-slider-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):focus::-webkit-slider-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
INPUT[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 8px;
background: rgb(var(--md-sys-color-primary));
cursor: ew-resize;
}
INPUT[type=range]:disabled::-moz-range-thumb {
background: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)));
cursor: default;
}
INPUT[type=range]:not(:disabled):hover::-moz-range-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):hover:active::-moz-range-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):focus::-moz-range-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
INPUT[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 8px;
background: rgb(var(--md-sys-color-primary));
cursor: ew-resize;
}
INPUT[type=range]:disabled::-ms-thumb {
background: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)));
cursor: default;
}
INPUT[type=range]:not(:disabled):hover::-ms-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):hover:active::-ms-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):focus::-ms-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
/* Track */
INPUT[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
border-radius: 2px;
}
INPUT[type=range]:not(:disabled)::-webkit-slider-runnable-track {
background-color: rgb(var(--md-sys-color-surface-variant));
}
INPUT[type=range]:disabled::-webkit-slider-runnable-track {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
cursor: default;
}
INPUT[type=range]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
border-radius: 2px;
}
INPUT[type=range]:not(:disabled)::-moz-range-track {
background-color: rgb(var(--md-sys-color-surface-variant));
}
INPUT[type=range]:disabled::-moz-range-track {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
cursor: default;
}
INPUT[type=range]:not(:disabled)::-moz-range-progress {
background-color: rgb(var(--md-sys-color-primary));
}
INPUT[type=range]:disabled::-moz-range-progress {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
cursor: default;
}
INPUT[type=range]::-ms-track {
width: 100%;
height: 4px;
cursor: pointer;
border-radius: 2px;
}
INPUT[type=range]:disabled::-ms-track {
cursor: default;
}
INPUT[type=range]:not(:disabled)::-ms-fill-lower {
background-color: rgb(var(--md-sys-color-primary));
border-radius: 2px;
}
INPUT[type=range]:disabled::-ms-fill-lower {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
INPUT[type=range]::-ms-fill-upper {
background-color: rgb(var(--md-sys-color-surface-variant));
border-radius: 2px;
}
INPUT[type=range]:disabled::-ms-fill-upper {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
INPUT:not([type=radio]):not([type=checkbox]):not([type=range]),
SELECT,
TEXTAREA {
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
background-color: transparent;
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
outline: none;
max-width: 100%;
}
INPUT:not([type=radio]):not([type=checkbox]):not([type=range]), SELECT {
height: 2.5em;
padding: 0 0.5ch;
}
INPUT[type=text].OTP {
font-size: calc(2.5 * var(--md-sys-typescale-body-large-size)) !important;
height: 1.5em !important;
letter-spacing: 0.5ch !important;
}
INPUT::placeholder, TEXTAREA::placeholder {
color: rgb(var(--md-sys-color-outline-variant));
}
INPUT:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px rgb(var(--md-sys-color-surface)) inset;
-webkit-text-fill-color: rgb(var(--md-sys-color-on-surface));
}
HTML.Safari SELECT {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 12px;
background-position: right 4px center;
background-repeat: no-repeat;
padding-right: 20px;
}
.AlignInput {
height: 2.5em;
display: inline-flex;
align-items: center;
}
INPUT:not([type=radio]):not([type=checkbox]):not([type=time]):not([type=date]):not([type=month]):not([type=range]),
TEXTAREA {
width: 100%;
}
INPUT[type=month] {
min-width: 18ch;
}
INPUT[type=date] {
min-width: 14ch;
}
INPUT[type=time] {
min-width: 14ch;
}
TEXTAREA {
resize: vertical;
padding: 0.25em 0.5ch;
min-height: 2.5em;
}
/* Disabled */
INPUT:not([type=radio]):not([type=checkbox]):not([type=range]):disabled,
TEXTAREA:disabled,
SELECT:disabled {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
SELECT:disabled, INPUT:disabled, TEXTAREA:disabled {
opacity: 1;
}
/* Valid */
INPUT:not(.Invalid):not([type=radio]):not([type=checkbox]):not([type=range]):not(:disabled):hover:not(:focus) ,
TEXTAREA:not(.Invalid):not(:disabled):hover:not(:focus) ,
SELECT:not(.Invalid):not(:disabled):hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-surface));
caret-color: rgb(var(--md-sys-color-primary));
}
INPUT:not(.Invalid):not([type=radio]):not([type=checkbox]):not([type=range]):focus,
SELECT:not(.Invalid):focus,
TEXTAREA:not(.Invalid):focus {
border-color: rgb(var(--md-sys-color-primary));
outline: none;
}
/* Invalid */
INPUT.Invalid:not([type=radio]):not([type=checkbox]):not([type=range]):not(:disabled):hover:not(:focus) ,
TEXTAREA.Invalid:not(:disabled):hover:not(:focus) ,
SELECT.Invalid:not(:disabled):hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-error-container));
}
INPUT.Invalid:not([type=radio]):not([type=checkbox]):not([type=range]),
SELECT.Invalid,
TEXTAREA.Invalid {
border-color: rgb(var(--md-sys-color-error));
caret-color: rgb(var(--md-sys-color-error));
}
/* Date, time and number icons */
INPUT::-webkit-outer-spin-button, INPUT::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
INPUT[type=number] {
-moz-appearance: textfield;
}
INPUT[type=date]::-webkit-calendar-picker-indicator,
INPUT[type=month]::-webkit-calendar-picker-indicator {
background-image: none;
background-color: rgb(var(--md-sys-color-on-surface));
-webkit-mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-size: 1em 1em;
cursor: hand;
}
INPUT[type=time]::-webkit-calendar-picker-indicator {
background-image: none;
background-color: rgb(var(--md-sys-color-on-surface));
-webkit-mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-size: 1em 1em;
cursor: hand;
}
INPUT:disabled[type=date]::-webkit-calendar-picker-indicator,
INPUT:disabled[type=month]:disabled::-webkit-calendar-picker-indicator,
INPUT:disabled[type=time]::-webkit-calendar-picker-indicator {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
visibility: visible;
}
.InputTimeZone {
display: inline-flex;
flex-wrap: nowrap;
column-gap: 1ch;
}
.InputTimeZone > .Off {
display: none;
}
.InputTimeZone > SELECT.SingleOption {
display: none;
}
A {
text-decoration: none;
color: rgb(var(--md-sys-color-primary));
}
A:hover {
text-decoration: underline;
cursor: pointer;
}
A > .Icon:first-child:not(:first-child) {
margin-right: 0.25ch;
}
A.TextLink:focus {
text-decoration: underline;
}
@media only screen and (min-width: 1001px) {
.MainMenu > .HorizontalSection, .MainMenu > .VerticalSection, .MainMenu > .Backdrop {
display: none !important;
}
}
@media only screen and (max-width: 1000px) {
.MainMenu > .RailSection {
display: none !important;
}
}
/* Rail */
.MainMenu > .RailSection {
background-color: rgb(var(--md-sys-color-surface));
min-width: 80px;
position: relative;
height: 100%;
z-index: 3;
top: 0;
}
.MainMenu > .RailSection > .NavRail {
height: 100%;
}
.MainMenu > .RailSection > .NavRail > .Panel {
padding: 16px 2px;
}
/* Vertical */
.MainMenu > .VerticalSection {
background-color: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
top: 0;
position: fixed;
z-index: 2;
width: 320px;
height: 100%;
border-radius: 0 2ch 2ch 0;
left: -320px;
transition: left 0.15s;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 12px 16px 12px;
}
.MainMenu > .VerticalSection.Shown {
left: 0;
}
.MainMenu > .VerticalSection > .NavDrawer {
flex: 1;
}
/* Horizontal */
.MainMenu > .HorizontalSection {
display: flex;
flex-direction: row;
align-items: center;
height: 48px;
padding-left: 4px;
padding-right: 4px;
column-gap: 4px;
}
/* Toggle */
.MainMenu .MenuToggle {
height: 32px;
width: 32px;
font-size: 24px;
line-height: 24px;
display: flex;
align-items: center;
padding: 4px;
border-radius: 16px;
cursor: hand;
user-select: none;
text-decoration: none;
color: inherit;
}
.MainMenu > .VerticalSection > .MenuToggle {
margin: 8px 0 4px -8px;
}
.MainMenu .MenuToggle:hover {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.MainMenu .MenuToggle:hover:active {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.MainMenu .MenuToggle:focus {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity));
}
/* Backdrop */
.MainMenu > .Backdrop {
background-color: rgba(var(--md-sys-color-scrim), 0);
backdrop-filter: blur(3px);
position: fixed;
z-index: 1;
top: 0;
left: -100vw;
height: 100vh;
width: 100vw;
transition: background-color 0.5s;
}
.MainMenu > .Backdrop.On {
background-color: rgba(var(--md-sys-color-scrim), .5);
left: 0;
}
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url('material-symbols-outlined.woff2') format('woff2');
}
.Menu {
display: inline-block;
padding-left: 0.5ch;
padding-right: 0.5ch;
cursor: default;
}
.Menu, .Menu + DIV {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.Menu + DIV {
display: none;
text-align: initial;
position: absolute;
z-index: 1100;
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 3px;
padding: 0.25em 0 0.25em 0;
cursor: default;
}
.Menu:hover + DIV, .Menu + DIV:hover {
display: table;
}
.Menu + DIV > * {
padding: 0.5em 3ch 0.5em 1ch;
display: block;
white-space: nowrap;
}
.Menu + DIV > A, .Menu + DIV > .Anchor {
text-decoration: none;
color: inherit;
}
.Menu + DIV > A:hover, .Menu + DIV > .Anchor:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
opacity: 1;
}
.Menu + DIV > A:hover:active, .Menu + DIV > .Anchor:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
opacity: 1;
}
.MessageBar {
padding: 0.5em 1ch;
border-width: 0 0 0 5px;
border-style: solid;
}
.MessageBar.Primary {
color: rgb(var(--md-sys-color-on-primary-container));
border-color: rgb(var(--md-sys-color-on-primary-container));
background-color: rgb(var(--md-sys-color-primary-container));
background-image: linear-gradient(90deg, transparent 0%, transparent 75%, rgb(var(--md-sys-color-background)) 100%);
}
.MessageBar.Error {
color: rgb(var(--md-sys-color-on-error-container));
border-color: rgb(var(--md-sys-color-on-error-container));
background-color: rgb(var(--md-sys-color-error-container));
background-image: linear-gradient(90deg, transparent 0%, transparent 75%, rgb(var(--md-sys-color-background)) 100%);
}
@media only screen and (max-width: 600px) {
.MobileHide {
display: none;
}
}
@media only screen and (min-width: 601px) {
.MobileOnly {
display: none;
}
}
.Modal {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: rgba(var(--md-sys-color-scrim), .5);
backdrop-filter: blur(3px);
z-index: 3000;
display: flex;
flex-direction: row;
align-items: center;
height: -webkit-fill-available;
animation-name: ModalShowBackdrop;
animation-duration: 0.5s;
}
.Modal > DIV {
background-color: rgb(var(--md-sys-color-background));
margin: auto;
width: 826px;
min-height: 240px;
max-width: calc(100vw - 4ch);
max-height: calc(100vh - 96px);
box-shadow: var(--md-sys-elevation-level5-shadow);
border-radius: 24px;
overflow-x: hidden;
overflow-y: auto;
border: solid 1px rgb(var(--md-sys-color-outline-variant));
position: relative;
padding: 0 16px;
animation-name: ModalShow;
animation-duration: 0.15s;
}
@media only screen and (max-width: 600px) {
.Modal {
align-items: end;
}
.Modal > DIV {
border-radius: 24px 24px 0 0;
max-width: calc(100vw - 16px);
border-bottom: 0px;
margin: 48px auto 0 auto;
}
}
.Modal > DIV > .Embed > .Page > .AppBar {
margin-left: -16px;
width: calc(100% + 32px);
padding-left: 16px;
padding-right: 16px;
}
@keyframes ModalShow {
from {top: 48px;}
to {top: 0;}
}
@keyframes ModalShowBackdrop {
from {background-color: rgba(var(--md-sys-color-scrim), 0)}
to {background-color: rgba(var(--md-sys-color-scrim), .5);}
}
.NavDrawer, .NavStrip {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
color: rgb(var(--md-sys-color-on-surface-variant));
overflow: hidden;
width: 100%;
height: fit-content;
}
.NavDrawer > .Slider, .NavStrip > .Slider {
height: 100%;
}
.NavDrawer > .Slider > .Panel > *:not(.NavTarget):not(.NavDrawer) {
margin-left: 16px;
margin-right: 16px;
}
.NavDrawer > .Slider, .NavStrip > .Slider {
display: flex;
flex-direction: row;
width: 100%;
transition: margin-left 0.15s;
}
.NavDrawer > .Slider > .Panel {
width: 100%;
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.NavStrip > .Slider > .Panel {
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
flex-shrink: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
align-items: center;
}
.NavDrawer > .Slider > .Panel::-webkit-scrollbar,
.NavStrip > .Slider > .Panel::-webkit-scrollbar {
display: none;
}
.AutoMargin {
margin: auto !important;
flex: 1;
}
.NavRail {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
color: rgb(var(--md-sys-color-on-surface-variant));
position: relative;
width: 80px;
height: fit-content;
z-index: 0;
}
.NavRail > .Panel {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
background-color: rgb(var(--md-sys-color-surface));
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
row-gap: 12px;
align-items: center;
}
.NavRail > .Slider {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
border-radius: 0 16px 16px 0;
transition: left 0.15s, width 0.15s;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.NavRail > .Slider > .Panel {
position: absolute;
width: calc(280px - 24px);
height: calc(100% - 32px);
top: 16px;
left: 12px;
transition: left 0.25s;
}
.NavTarget {
color: rgb(var(--md-sys-color-on-secondary-container));
}
.NavTarget:hover {
text-decoration: none;
}
*:not(.NavRail):not(.NavStrip) > .Panel > .NavTarget {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
column-gap: 12px;
align-items: center;
align-content: center;
/* height: 48px; */
min-height: 48px;
border-radius: 28px;
padding-left: 16px;
padding-right: 24px;
}
*:not(.NavRail):not(.NavStrip) > .Panel > .NavTarget.Tabulated {
margin-left: 32px;
}
.NavRail > .Panel > .NavTarget {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
display: flex;
flex-direction: column;
row-gap: 4px;
align-items: center;
}
.NavStrip > .Slider > .Panel > .NavTarget {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 2px;
align-items: center;
align-content: center;
/* height: 32px; */
min-height: 32px;
border-radius: 16px;
padding-left: 12px;
padding-right: 12px;
}
/* Icon */
.NavTarget > .TgtIcon {
font-size: 24px;
height: 24px;
line-height: 24px;
position: relative;
flex-shrink: 0;
flex-grow: 0;
}
.NavTarget > .TgtIcon.TgtNoIcon {
display: none;
}
.NavRail > .Panel > .NavTarget > .TgtIcon.TgtNoIcon {
display: initial;
}
.NavRail > .Panel > .NavTarget > .TgtIcon {
padding: 4px 16px;
border-radius: 16px;
height: 32px;
width: 56px;
}
.NavTarget > .TgtNext {
display: none;
flex-shrink: 0;
flex-grow: 0;
}
.NavTarget[data-next] > .TgtNext {
font-size: 24px;
height: 24px;
line-height: 24px;
display: initial;
margin-right: -4px;
}
.NavRail > .Panel > .NavTarget > .TgtNext {
display: none;
}
/* Label */
.NavTarget > .TgtLabel {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* Badges */
.NavTarget > .Badge {
display: none;
}
.NavDrawer > .Slider > .Panel > .NavTarget > .Badge {
display: initial;
margin-left: auto;
color: rgb(var(--md-sys-color-on-surface-variant));
white-space: nowrap;
}
.NavTarget > .TgtIcon > .MiniBadge {
display: none;
font-family: var(--md-sys-typescale-label-small-font);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
background-color: rgb(var(--md-sys-color-error));
color: rgb(var(--md-sys-color-on-error));
margin-top: -4px;
margin-left: -10px;
border-radius: 8px;
position: absolute;
padding: 0 4px;
height: 16px;
min-width: 16px;
text-align: center;
}
.NavTarget > .TgtIcon > .MiniBadge.MicroBadge {
height: 6px;
min-width: 6px;
padding: 0;
border-radius: 3px;
margin-left: -5px;
margin-top: 1px;
}
.NavRail > .Panel > .NavTarget > .TgtIcon > .MiniBadge,
.NavStrip > .Panel > .NavTarget > .TgtIcon > .MiniBadge {
display: initial;
}
/* Unselected */
.NavDrawer > .Slider > .Panel > .NavTarget:not(.Selected):hover,
.NavStrip > .Slider > .Panel > .NavTarget:not(.Selected):hover,
.NavRail > .Panel > .NavTarget:not(.Selected):hover > .TgtIcon {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.NavDrawer > .Slider > .Panel > .NavTarget:not(.Selected):hover:active,
.NavStrip > .Slider > .Panel > .NavTarget:not(.Selected):hover:active,
.NavRail > .Panel > .NavTarget:not(.Selected):hover:active > .TgtIcon {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.NavDrawer > .Slider > .Panel > .NavTarget:not(.Selected):focus,
.NavStrip > .Slider > .Panel > .NavTarget:not(.Selected):focus,
.NavRail > .Panel > .NavTarget:not(.Selected):focus > .TgtIcon {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity));
}
/* Selected */
.NavDrawer > .Slider > .Panel > .NavTarget.Selected,
.NavStrip > .Slider > .Panel > .NavTarget.Selected,
.NavRail > .Panel > .NavTarget.Selected > .TgtIcon {
background-color: rgb(var(--md-sys-color-secondary-container));
}
.NavDrawer > .Slider > .Panel > .NavTarget.Selected:hover,
.NavStrip > .Slider > .Panel > .NavTarget.Selected:hover,
.NavRail > .Panel > .NavTarget.Selected:hover > .TgtIcon {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
text-decoration: none;
}
.NavDrawer > .Slider > .Panel > .NavTarget.Selected:hover:active,
.NavStrip > .Slider > .Panel > .NavTarget.Selected:hover:active,
.NavRail > .Panel > .NavTarget.Selected:hover:active > .TgtIcon {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
.NavDrawer > .Slider > .Panel > .NavTarget.Selected:focus,
.NavStrip > .Slider > .Panel > .NavTarget.Selected:focus,
.NavRail > .Panel > .NavTarget.Selected:focus > .TgtIcon {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
HTML {
height: -webkit-fill-available;
}
.Top {
color: rgb(var(--md-sys-color-on-background));
border-color: rgb(var(--md-sys-color-outline));
background-color: rgb(var(--md-sys-color-background));
fill: rgb(var(--md-sys-color-on-background));
margin: 0;
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
text-align: initial;
width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
display: flex;
}
@media print {
.Top {
background-color: unset;
}
}
@media only screen and (max-width: 1000px) {
.Top {
font-family: var(--md-sys-typescale-body-medium-font);
font-size: var(--md-sys-typescale-body-medium-size);
font-weight: var(--md-sys-typescale-body-medium-weight);
line-height: var(--md-sys-typescale-body-medium-line-height);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
}
.FetchError {
display: none;
color: rgb(var(--md-sys-color-on-error-container));
background-color: rgb(var(--md-sys-color-error-container));
border-radius: 3px;
padding: 8px;
margin-top: 24px;
position: fixed;
z-index: 1000000;
left: 24px;
right: 24px;
box-shadow: var(--md-sys-elevation-level3-shadow);
align-items: flex-start;
}
.FetchError > I {
width: 24px;
height: 24px;
flex-grow: 0;
border-radius: 12px;
cursor: pointer;
text-align: center;
user-select: none;
}
.FetchError > I:hover {
background-color: rgba(var(--md-sys-color-on-error-container), var(--md-sys-state-hover-state-layer-opacity));
}
.FetchError > I:hover:active {
background-color: rgba(var(--md-sys-color-on-error-container), var(--md-sys-state-pressed-state-layer-opacity));
}
.FetchError > .ErrMsg {
flex-grow: 1;
text-align: center;
padding: 12px 12px 12px 36px;
font-family: 'Roboto Mono', monospace;
}
* {
box-sizing: border-box;
line-height: inherit;
}
*:focus {
outline: none;
}
.Page {
flex: 1;
height: max-content;
overflow-wrap: break-word;
}
.Top > .Page {
padding: 0 16px;
}
.Top > .Page.HasNav {
max-width: calc(100% - 80px);
}
.Page > .AppBar {
margin-left: -16px;
width: calc(100% + 32px);
padding-left: 16px;
padding-right: 16px;
}
NAV.TopNav {
height: 100vh;
width: 80px;
flex-shrink: 0;
display: none;
z-index: 2;
background-color: rgb(var(--md-sys-color-background));
}
@media only screen and (max-width: 1000px) {
NAV.TopNav {
height: 48px;
width: 100vw;
position: sticky;
top: 0;
}
.Top {
flex-direction: column;
}
.Top > .Page.HasNav {
max-width: initial;
}
.Top > .Page.HasNav > .AppBar {
padding-top: 0px;
top: 48px;
}
}
.Top > NAV.TopNav {
display: initial;
}
@media print {
.Top > NAV.TopNav {
display: none;
}
}
.Top > NAV.TopNav > .MainMenu > .RailSection {
position: fixed;
}
.State {
display: none;
}
.Disabled {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
cursor: auto;
}
P {
margin-block-start: 0;
margin-block-end: 0;
}
.Block {
max-width: 100%;
}
P:not(:first-child), .Block:not(:first-child) {
margin-block-start: 16px;
}
P:not(:last-child), .Block:not(:last-child) {
margin-block-end: 16px;
}
.Page > .Block:last-child {
margin-block-end: 16px;
}
.Empty {
display: none !important;
}
UL, OL {
margin: 0;
padding-inline-start: 3ch;
margin-block-start: 8px;
margin-block-end: 8px;
}
BLOCKQUOTE {
margin: 0px;
border-left: 1px solid rgb(var(--md-sys-color-outline-variant));
padding-left: 1ch;
}
@media print {
.NoPrint, .NoPrint * {
display: none !important;
}
@page {
size: A3;
}
}
.PageSizer {
white-space: nowrap;
}
.PageSizer SELECT {
margin-right: 1ch;
}
.Paginator {
width: 100%;
white-space: nowrap;
color: rgb(var(--md-sys-color-on-surface-variant));
}
.Paginator A {
border-radius: 3px;
color: inherit;
}
.Paginator A:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
text-decoration: none;
}
.Paginator A:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.Paginator A:focus {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
outline: none;
text-decoration: none;
}
.Paginator SPAN.Disabled {
border-radius: 3px;
color: rgb(var(--md-sys-color-on-surface-variant));
background-color: rgb(var(--md-sys-color-surface-variant));
}
.Paginator > * {
padding: 0.25em 1ch;
margin-left: 0.5ch;
display: inline-block;
}
.Paginator > .Ellipsis {
color: inherit;
background-color: inherit;
padding: 0;
vertical-align: bottom;
}
.PipeSeparator {
border-left: 1px solid rgb(var(--md-sys-color-outline-variant));
margin: 2px 0.5em 2px 0.5em;
}
.LiveProgress[max=0] {
visibility: hidden;
}
.LiveProgress > A {
display: none;
}
.LiveProgress > PROGRESS {
-webkit-appearance: none;
appearance: none;
height: 4px;
margin: 0;
width: 100%;
background-color: transparent;
color: rgb(var(--md-sys-color-primary));
}
.LiveProgress > PROGRESS::-webkit-progress-bar {
background-color: rgb(var(--md-sys-color-surface-variant));
}
.LiveProgress > PROGRESS::-webkit-progress-value {
background-color: rgb(var(--md-sys-color-primary));
}
.LiveProgress > PROGRESS::-moz-progress-bar {
background-color: rgb(var(--md-sys-color-primary));
}
.LiveProgress.Infinite {
background-image: linear-gradient(90deg,
rgb(var(--md-sys-color-surface-variant)) 0%,
rgb(var(--md-sys-color-surface-variant)) 20%,
rgb(var(--md-sys-color-primary)) 45%,
rgb(var(--md-sys-color-primary)) 55%,
rgb(var(--md-sys-color-surface-variant)) 80%,
rgb(var(--md-sys-color-surface-variant)) 100%);
background-size: 1000px 20px, 100% 100%, 100% 100%;
animation: ProgressAnimation 5s linear infinite;
}
.LiveProgress.Infinite > PROGRESS::-webkit-progress-bar {
background-color: transparent;
}
@keyframes ProgressAnimation {
from { background-position: 0px 0px; }
to { background-position: 2000px 0px; }
}
.Rating {
display: inline-block;
white-space: nowrap;
user-select: none;
}
.Rating .Star > .Icon {
margin-right: 0.25ch;
border-radius: 1em;
font-size: 1.5em;
line-height: 1;
width: 1em;
height: 1em;
display: inline-block;
}
/* Full */
.Rating .Star.Full > .Icon {
font-variation-settings: 'FILL' 1;
color: rgb(var(--md-sys-color-primary));
}
.Rating:not([disabled]) .Star.Full:hover > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.Rating:not([disabled]) .Star.Full:hover:active > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.Rating:not([disabled]) .Star.Full:focus > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
/* Not full */
.Rating:not([disabled]) .Star:not(.Full):hover > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.Rating:not([disabled]) .Star:not(.Full):hover:active > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.Rating:not([disabled]) .Star:not(.Full):focus > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
/* Disabled */
.Rating[disabled] .Star > .Icon {
color: rgba(var(--md-sys-color-on-background), var(--md-sys-state-disabled-state-layer-opacity));
}
.RichDropdown {
background-color: transparent;
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
outline: none;
padding: 0.5em 0.5ch;
width: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 5px top 50%;
background-size: 1.4em;
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
/* Disabled */
.RichDropdown[disabled] {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
/* Valid */
.RichDropdown:not([disabled]):focus {
border-color: rgb(var(--md-sys-color-primary));
caret-color: rgb(var(--md-sys-color-primary));
}
.RichDropdown:not([disabled]):hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-surface));
}
/* Invalid */
.RichDropdown.Invalid {
border-color: rgb(var(--md-sys-color-error));
caret-color: rgb(var(--md-sys-color-error));
}
.RichDropdown.Invalid:hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-error-container));
}
.RichDropdown > UL {
background-color: rgb(var(--md-sys-color-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 3px;
padding: 0.25em 0 0.25em 0;
z-index: 1100;
position: absolute;
display: none;
width: 100%;
margin: 0;
overflow-y: auto;
border: solid 1px rgb(var(--md-sys-color-outline-variant));
}
.RichDropdown > UL > LI {
padding: 0.5em 36px 0.5em 0.5ch;
display: block;
cursor: default;
}
.RichDropdown > DIV {
padding-right: 32px;
}
.RichDropdown > UL > LI:not(:first-child) {
border-top: solid 1px rgb(var(--md-sys-color-outline-variant));
}
.RichDropdown > UL > LI:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.RichDropdown > UL > LI:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
@font-face {
font-family: 'Roboto Flex';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-stretch: 100%;
src: url('roboto-flex-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 100 700;
src: url('roboto-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.Rule {
border: none;
border-top: solid 1px rgb(var(--md-sys-color-outline-variant));
}
.SidePanel {
position: fixed;
z-index: 2000;
top: 0;
right: 0;
height: 100vh;
padding-left: 4px;
/*width*/
cursor: ew-resize;
user-select: none;
overflow-y: auto;
max-width: 90vw;
min-width: 240px;
display: flex;
align-items: stretch;
animation-name: SidePanelShow;
animation-duration: 0.15s;
}
.SidePanel > DIV {
cursor: initial;
user-select: initial;
padding: 0 16px;
height: fit-content;
min-height: 100%;
width: 100%;
box-shadow: var(--md-sys-elevation-level5-shadow);
border-left: solid 1px rgb(var(--md-sys-color-outline));
background-color: rgb(var(--md-sys-color-background));
}
@keyframes SidePanelShow {
from {right: -48px;}
to {right: 0;}
}
.Snackbar {
display: block;
position: fixed;
bottom: -10em;
left: 12px;
z-index: 1000002;
width: 36ch;
min-height: 4em;
max-width: 90vw;
max-height: 8em;
border-radius: 0 0 3px 3px;
box-shadow: var(--md-sys-elevation-level1-shadow);
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level3-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level3-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-inverse-surface));
color: rgb(var(--md-sys-color-inverse-on-surface));
padding: 0.5em 1ch;
overflow-wrap: break-word;
transition: bottom 0.25s;
font-family: var(--md-sys-typescale-body-medium-font);
font-size: var(--md-sys-typescale-body-medium-size);
font-weight: var(--md-sys-typescale-body-medium-weight);
line-height: var(--md-sys-typescale-body-medium-line-height);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.Snackbar.Shown {
bottom: 2em;
}
.Snackbar A {
color: rgb(var(--md-sys-color-inverse-primary));
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.Top > .Page.HasNav .Snackbar {
left: 92px;
}
@media only screen and (max-width: 1000px) {
.Top > .Page.HasNav .Snackbar {
left: 12px;
}
}
A.Sorter {
color: inherit;
text-decoration: none;
border-bottom: dashed 1px rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-disabled-state-layer-opacity));
}
A.Sorter:hover, A.Sorter:focus {
border-bottom: solid 1px rgb(var(--md-sys-color-on-surface-variant));
}
.Splitter {
display: flex;
column-gap: 1ch;
row-gap: 0.5em;
min-width: 0;
}
.Splitter.Wrap {
flex-wrap: wrap;
}
.Splitter.Wrap.Width_600 > DIV {
min-width: 100%;
}
.Splitter > DIV {
min-width: 0;
}
.SuggestionChip {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
user-select: none;
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 8px;
height: 32px;
display: inline-flex;
align-items: center;
padding: 5px 16px;
vertical-align: bottom;
max-width: 100%;
color: rgb(var(--md-sys-color-on-surface-variant));
}
.SuggestionChip.Disabled {
border-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
A.SuggestionChip:not(.Disabled):hover {
text-decoration: none;
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)));
}
A.SuggestionChip:not(.Disabled):focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)));
}
A.SuggestionChip:not(.Disabled):hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)));
}
.SuggestionChip > .Icon:first-child {
margin-left: -8px;
margin-right: 8px;
font-size: 18px;
}
.DataTable {
width: 100%;
overflow-x: auto;
}
TABLE {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.DataTable > TABLE, .DataTable > TABLE > TBODY, .DataTable > TABLE > TBODY > TR {
width: 100%;
}
.DataTable > TABLE > TBODY > TR:last-child {
border-radius: 0 0 24px 24px;
}
.DataTable > TABLE > TBODY > TR > TH {
font-weight: 500;
color: rgb(var(--md-sys-color-on-surface-variant));
background-color: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
}
/* Reduce flicker */
.DataTable:not(.WidthObserved) {
visibility: hidden;
}
/* NoHeader */
.DataTable.NoHeader > TABLE > TBODY > TR:first-child > TH {
display: none;
}
/* Border */
.DataTable > TABLE > TBODY > TR > TD,
.DataTable > TABLE > TBODY > TR > TH {
border-width: 1px 0 0 1px;
border-style: solid;
border-color: rgb(var(--md-sys-color-surface-variant));
}
.DataTable > TABLE > TBODY > TR:last-child > TD, .DataTable > TABLE > TBODY > TR:last-child > TH {
border-bottom: solid 1px rgb(var(--md-sys-color-surface-variant));
}
.DataTable.Width_600 > TABLE > TBODY > TR > .LastNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR > .LastWide,
.DataTable.Width1200_ > TABLE > TBODY > TR > .LastExpanded {
border-right: solid 1px rgb(var(--md-sys-color-surface-variant));
}
/* Border radius */
.DataTable.Width_600 > TABLE > TBODY > TR:first-child > .FirstNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:first-child > .FirstWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:first-child > .FirstExpanded {
border-top-left-radius: 24px;
}
.DataTable.Width_600 > TABLE > TBODY > TR:first-child > .LastNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:first-child > .LastWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:first-child > .LastExpanded {
border-top-right-radius: 24px;
}
.DataTable.Width_600 > TABLE > TBODY > TR:last-child > .LastNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:last-child > .LastWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:last-child > .LastExpanded {
border-bottom-right-radius: 24px;
}
.DataTable.Width_600 > TABLE > TBODY > TR:last-child > .FirstNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:last-child > .FirstWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:last-child > .FirstExpanded {
border-bottom-left-radius: 24px;
}
/* No border */
.DataTable.NoBorder > TABLE > TBODY > TR > * {
border: none !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > TD {
border-radius: 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > .FirstNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR > .FirstWide,
.DataTable.NoBorder > TABLE > TBODY > TR > .FirstExpanded {
border-radius: 12px 0 0 12px !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > .LastNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR > .LastWide,
.DataTable.NoBorder > TABLE > TBODY > TR > .LastExpanded {
border-radius: 0 12px 12px 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.FirstNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.FirstWide,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.FirstExpanded {
padding-left: 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.LastNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.LastWide,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.LastExpanded {
padding-right: 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > TH {
padding: 8px 12px;
}
.DataTable.NoBorder > TABLE > TBODY > TR > TD {
padding: 6px 12px;
}
.DataTable.NoBorder.Width_600 > TABLE > TBODY > TR > TH,
.DataTable.NoBorder.Width_600 > TABLE > TBODY > TR > TD {
padding: 4px 8px;
}
/* Visibility */
.DataTable.Width_600 > TABLE > TBODY > TR > TH:not(.Narrow),
.DataTable.Width_600 > TABLE > TBODY > TR > TD:not(.Narrow) {
display: none;
}
.DataTable.Width600_1200 > TABLE > TBODY > TR > TH:not(.Wide),
.DataTable.Width600_1200 > TABLE > TBODY > TR > TD:not(.Wide) {
display: none;
}
.DataTable.Width1200_ > TABLE > TBODY > TR > TH:not(.Expanded),
.DataTable.Width1200_ > TABLE > TBODY > TR > TD:not(.Expanded) {
display: none;
}
/* Cell padding */
.DataTable > TABLE > TBODY > TR > TH {
padding: 16px 12px;
}
.DataTable > TABLE > TBODY > TR > TD {
padding: 12px 12px;
}
.DataTable.Width_600 > TABLE > TBODY > TR > TH {
padding: 16px 8px;
}
.DataTable.Width_600 > TABLE > TBODY > TR > TD {
padding: 12px 8px;
}
.DataTable > TABLE > TBODY > TR > .FirstNarrow,
.DataTable > TABLE > TBODY > TR > .FirstWide,
.DataTable > TABLE > TBODY > TR > .FirstExpanded {
padding-left: 16px;
}
.DataTable > TABLE > TBODY > TR > .LastNarrow,
.DataTable > TABLE > TBODY > TR > .LastWide,
.DataTable > TABLE > TBODY > TR > .LastExpanded {
padding-right: 16px;
}
/* Row height */
.DataTable > TABLE > TBODY > TR.MinRowHt1 {
min-height: calc(1em + 1 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt2 {
min-height: calc(1em + 2 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt3 {
min-height: calc(1em + 3 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt4 {
min-height: calc(1em + 4 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt5 {
min-height: calc(1em + 5 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR:first-child {
border: solid 1px rgb(var(--md-sys-color-surface-variant));
border-radius: 24px 24px 0 0;
}
/* Hover */
.DataTable > TABLE > TBODY > TR[data-href]:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
cursor: pointer;
}
.DataTable > TABLE > TBODY > TR[data-href]:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.DataTable > TABLE > TBODY > TR[data-href]:focus {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
/* Empty row */
.DataTable > TABLE > TBODY > TR.EmptyRow > TD {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
text-align: center;
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
/* Vertical align */
.DataTable.VAlignTop > TABLE > TBODY > TR,
.DataTable > TABLE > TBODY > TR.VAlignTop {
vertical-align: top;
}
.DataTable.VAlignBottom > TABLE > TBODY > TR,
.DataTable > TABLE > TBODY > TR.VAlignBottom {
vertical-align: bottom;
}
.DataTable.VAlignMiddle> TABLE > TBODY > TR,
.DataTable > TABLE > TBODY > TR.VAlignMiddle {
vertical-align: middle;
}
.TabSwitcher > .TabLabels {
border-bottom: solid 1px rgb(var(--md-sys-color-surface-variant));
}
.TabSwitcher.NoLine > .TabLabels {
border-bottom: 0;
}
.TabSwitcher > .TabLabels > .Toolbar > DIV {
column-gap: 0;
}
.TabSwitcher .TabLabel {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
display: inline-block;
padding: 4px 12px 0 12px;
color: rgb(var(--md-sys-color-on-surface-variant));
cursor: hand;
}
.TabSwitcher .TabLabel.SingleIcon {
padding: 4px 8px 0 8px;
}
.TabSwitcher .TabLabel.SingleIcon > DIV > .Icon {
font-size: 1.5em !important;
}
.TabSwitcher .TabLabel.Selected {
color: rgb(var(--md-sys-color-primary));
}
.TabSwitcher .TabLabel > U {
display: block;
margin: auto;
margin-top: 4px;
max-width: 48px;
height: 3px;
background-color: transparent;
}
.TabSwitcher .TabLabel.Selected > U {
background-color: rgb(var(--md-sys-color-primary));
border-radius: 3px 3px 0 0;
}
.TabSwitcher .TabLabel:not(.Selected):hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.TabSwitcher .TabLabel:not(.Selected):hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.TabSwitcher .TabLabel:not(.Selected):focus {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
.TabSwitcher .TabLabel.Selected:hover {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.TabSwitcher .TabLabel.Selected:hover:active {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.TabSwitcher .TabLabel.Selected:focus {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
.TabSwitcher .TabBody:not(.selected) {
display: none;
}
@media only screen and (max-width: 600px) {
.TabSwitcher .TabLabel {
padding: 4px 8px 0 8px;
}
.TabSwitcher .TabLabel.SingleIcon {
padding: 4px 4px 0 4px;
}
}
/* AppBar appearance */
.AppBar .TabSwitcher:last-child {
margin-bottom: -0.5rem;
}
.AppBar .TabSwitcher > .TabLabels {
border-bottom: none;
}
.TearOffCalendar {
width: 72px;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity));
text-align: center;
}
.TearOffCalendar > DIV:first-child {
width: 100%;
color: rgb(var(--md-sys-color-inverse-on-surface));
background-color: rgb(var(--md-sys-color-inverse-surface));
}
.TearOffCalendar > DIV:last-child {
min-width: 50px;
border-top: dotted 1px rgb(var(--md-sys-color-outline-variant));
padding-top: 2px;
}
.TextAlign.Center {
text-align: center;
}
.TextAlign.Right {
text-align: right;
}
.TextAlign.Left {
text-align: left;
}
.TextColorDefault {
color: rgb(var(--md-sys-color-on-background));
}
.TextColorInverse {
color: rgb(var(--md-sys-color-inverse-on-surface));
background-color: rgb(var(--md-sys-color-inverse-surface));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorPrimary {
color: rgb(var(--md-sys-color-primary));
}
.TextColorOnPrimary {
color: rgb(var(--md-sys-color-on-primary-container));
background-color: rgb(var(--md-sys-color-primary-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorSecondary {
color: rgb(var(--md-sys-color-secondary));
}
.TextColorOnSecondary {
color: rgb(var(--md-sys-color-on-secondary-container));
background-color: rgb(var(--md-sys-color-secondary-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorTertiary {
color: rgb(var(--md-sys-color-tertiary));
}
.TextColorOnTertiary {
color: rgb(var(--md-sys-color-on-tertiary-container));
background-color: rgb(var(--md-sys-color-tertiary-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorDisabled {
color: rgba(var(--md-sys-color-on-background), var(--md-sys-state-disabled-state-layer-opacity));
}
.TextColorDeemphasized {
color: rgba(var(--md-sys-color-on-background), calc(1 - var(--md-sys-state-disabled-state-layer-opacity)));
}
.TextColorError {
color: rgb(var(--md-sys-color-error));
}
.TextColorOnError {
color: rgb(var(--md-sys-color-on-error-container));
background-color: rgb(var(--md-sys-color-error-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorOK {
color: rgb(var(--md-sys-color-ok));
}
.TextColorOnOK {
color: rgb(var(--md-sys-color-on-ok-container));
background-color: rgb(var(--md-sys-color-ok-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextBold {
font-weight: 500;
font-variation-settings: "GRAD" 150;
}
.TextLightweight {
font-weight: 200;
font-variation-settings: "GRAD" -200;
}
.TextItalic {
font-variation-settings: "slnt" -10;
}
.TextMonospace {
font-family: 'Roboto Mono', monospace;
}
.Toggle {
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-flex;
align-items: center;
user-select: none;
}
.Toggle:not([disabled]) {
cursor: hand;
}
.Toggle > INPUT:first-child {
display: none;
}
.Toggle + .Toggle {
margin-left: 1ch;
}
/* Thumb */
.Toggle > .Thumb {
display: flex;
align-items: center;
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 16px;
font-size: 16px;
padding: 4px;
transition: margin-left 0.15s;
}
.Toggle.Selected > .Thumb > .Icon:first-child {
display: none;
}
.Toggle:not(.Selected) > .Thumb > .Icon:nth-child(2) {
display: none;
}
/* Disabled */
.Toggle[disabled].Selected {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.Toggle[disabled].Selected > .Thumb {
background-color: rgb(var(--md-sys-color-surface));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
margin-left: 26px;
}
.Toggle[disabled]:not(.Selected) {
border: solid 2px rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.Toggle[disabled]:not(.Selected) > .Thumb {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-disabled-state-layer-opacity));
margin-left: 2px;
}
/* Selected */
.Toggle.Selected:not([disabled]) {
background-color: rgb(var(--md-sys-color-primary));
}
.Toggle.Selected:not([disabled]) > .Thumb {
background-color: rgb(var(--md-sys-color-on-primary));
color: rgb(var(--md-sys-color-on-primary-container));
margin-left: 26px;
}
.Toggle.Selected:not([disabled]):hover > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.Toggle.Selected:not([disabled]):hover:active > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.Toggle.Selected:not([disabled]):focus > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
/* Unselected */
.Toggle:not(.Selected):not([disabled]) {
border: solid 2px rgb(var(--md-sys-color-outline));
background-color: rgb(var(--md-sys-color-surface-variant));
}
.Toggle:not(.Selected):not([disabled]) > .Thumb {
background-color: rgb(var(--md-sys-color-outline));
color: rgb(var(--md-sys-color-surface-variant));
margin-left: 2px;
}
.Toggle:not(.Selected):not([disabled]):hover > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.Toggle:not(.Selected):not([disabled]):hover:active > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.Toggle:not(.Selected):not([disabled]):focus > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
.Toolbar {
display: flex;
column-gap: 1ch;
row-gap: 0.5em;
width: 100%;
}
.Toolbar > DIV {
display: flex;
column-gap: 1ch;
row-gap: 0.5em;
min-width: 0;
height: 100%;
}
.Toolbar > DIV > DIV {
min-width: 0;
}
.Toolbar.Wrap, .Toolbar.Wrap > DIV {
flex-wrap: wrap;
}
.Toolbar > DIV:nth-child(2) {
justify-content: flex-end;
margin-left: auto;
}
.Toolbar.AlignCenter, .Toolbar.AlignCenter > DIV {
align-items: center;
}
.Toolbar.AlignTop, .Toolbar.AlignTop > DIV {
align-items: flex-start;
}
.Toolbar.AlignBottom, .Toolbar.AlignBottom > DIV {
align-items: flex-end;
}
.Page > .Toolbar:last-child,
.InputForm > FORM > DIV > .Toolbar:last-child {
padding-top: 16px;
margin-top: -16px;
position: sticky;
bottom: 0;
padding-bottom: 16px;
z-index: 1;
background-image: linear-gradient(
rgba(var(--md-sys-color-background), 0),
rgba(var(--md-sys-color-background), 1) 16px);
}
@media print {
.Page > .Toolbar:last-child,
.InputForm > FORM > DIV > .Toolbar:last-child {
background-image: unset;
}
}