@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--md-ref-typeface-mono); font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; color: var(--md-sys-color-on-surface-variant); } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } } [hidden]:where(:not([hidden='until-found'])) { display: none !important; } [x-cloak] { display: none !important; } @layer material.tokens { :root, [data-theme='light'] { color-scheme: light; --md-sys-color-background: #fdf7fe; --md-sys-color-on-background: #34313a; --md-sys-color-surface: #fdf7fe; --md-sys-color-surface-dim: #ded8e4; --md-sys-color-surface-bright: #fdf7fe; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f8f1fa; --md-sys-color-surface-container: #f2ecf5; --md-sys-color-surface-container-high: #ece6f0; --md-sys-color-surface-container-highest: #e7e0ec; --md-sys-color-on-surface: #34313a; --md-sys-color-on-surface-variant: #615d68; --md-sys-color-outline: #7d7983; --md-sys-color-outline-variant: #b5b0bb; --md-sys-color-inverse-surface: #0f0d12; --md-sys-color-inverse-on-surface: #a09ba1; --md-sys-color-primary: #655789; --md-sys-color-primary-dim: #594b7c; --md-sys-color-on-primary: #fdf7ff; --md-sys-color-primary-container: #d4c3fd; --md-sys-color-on-primary-container: #493c6c; --md-sys-color-primary-fixed: #d4c3fd; --md-sys-color-primary-fixed-dim: #c6b6ee; --md-sys-color-on-primary-fixed: #352857; --md-sys-color-on-primary-fixed-variant: #524576; --md-sys-color-inverse-primary: #d4c3fd; --md-sys-color-secondary: #625c71; --md-sys-color-secondary-dim: #565065; --md-sys-color-on-secondary: #fdf7ff; --md-sys-color-secondary-container: #e8def8; --md-sys-color-on-secondary-container: #554f63; --md-sys-color-secondary-fixed: #e8def8; --md-sys-color-secondary-fixed-dim: #dad0ea; --md-sys-color-on-secondary-fixed: #423c50; --md-sys-color-on-secondary-fixed-variant: #5f586e; --md-sys-color-tertiary: #7b5270; --md-sys-color-tertiary-dim: #6e4664; --md-sys-color-on-tertiary: #fff7f9; --md-sys-color-tertiary-container: #f4bfe3; --md-sys-color-on-tertiary-container: #5f3956; --md-sys-color-tertiary-fixed: #f4bfe3; --md-sys-color-tertiary-fixed-dim: #e5b2d5; --md-sys-color-on-tertiary-fixed: #4a2642; --md-sys-color-on-tertiary-fixed-variant: #694260; --md-sys-color-error: #a8364b; --md-sys-color-error-dim: #6b0221; --md-sys-color-on-error: #fff7f7; --md-sys-color-error-container: #f97386; --md-sys-color-on-error-container: #6e0523; --md-sys-color-success: #006d46; --md-sys-color-on-success: #e7ffed; --md-sys-color-success-container: #86f9bc; --md-sys-color-on-success-container: #00734a; --md-sys-color-warning: #7c5900; --md-sys-color-on-warning: #fff8f1; --md-sys-color-warning-container: #fab925; --md-sys-color-on-warning-container: #6a4b00; --md-sys-color-info: #005bc5; --md-sys-color-on-info: #f9f8ff; --md-sys-color-info-container: #1c7afc; --md-sys-color-on-info-container: #001435; --md-sys-color-inverse-error: #f97386; --md-sys-color-inverse-success: #3bb27b; --md-sys-color-inverse-warning: #f3b31e; --md-sys-color-inverse-info: #699cff; } [data-theme='dark'] { color-scheme: dark; --md-sys-color-background: #0f0d12; --md-sys-color-on-background: #eae3ef; --md-sys-color-surface: #0f0d12; --md-sys-color-surface-dim: #0f0d12; --md-sys-color-surface-bright: #2e2b34; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #141218; --md-sys-color-surface-container: #1b181f; --md-sys-color-surface-container-high: #211e26; --md-sys-color-surface-container-highest: #27242d; --md-sys-color-on-surface: #eae3ef; --md-sys-color-on-surface-variant: #aea9b4; --md-sys-color-outline: #78737e; --md-sys-color-outline-variant: #4a4650; --md-sys-color-inverse-surface: #fdf7fe; --md-sys-color-inverse-on-surface: #575459; --md-sys-color-primary: #cdc0ec; --md-sys-color-primary-dim: #bfb2de; --md-sys-color-on-primary: #443a5f; --md-sys-color-primary-container: #574d72; --md-sys-color-on-primary-container: #e9deff; --md-sys-color-primary-fixed: #ded0fe; --md-sys-color-primary-fixed-dim: #d0c3ef; --md-sys-color-on-primary-fixed: #3c3256; --md-sys-color-on-primary-fixed-variant: #594e74; --md-sys-color-inverse-primary: #645980; --md-sys-color-secondary: #cbc2db; --md-sys-color-secondary-dim: #beb5cd; --md-sys-color-on-secondary: #433d51; --md-sys-color-secondary-container: #3e384c; --md-sys-color-on-secondary-container: #c4bbd4; --md-sys-color-secondary-fixed: #e8def8; --md-sys-color-secondary-fixed-dim: #dad0ea; --md-sys-color-on-secondary-fixed: #423c50; --md-sys-color-on-secondary-fixed-variant: #5f586e; --md-sys-color-tertiary: #ffcfef; --md-sys-color-tertiary-dim: #f4bfe3; --md-sys-color-on-tertiary: #69415f; --md-sys-color-tertiary-container: #f4bfe3; --md-sys-color-on-tertiary-container: #5f3956; --md-sys-color-tertiary-fixed: #f4bfe3; --md-sys-color-tertiary-fixed-dim: #e5b2d5; --md-sys-color-on-tertiary-fixed: #4a2642; --md-sys-color-on-tertiary-fixed-variant: #694260; --md-sys-color-error: #f97386; --md-sys-color-error-dim: #c44b5f; --md-sys-color-on-error: #490013; --md-sys-color-error-container: #871c34; --md-sys-color-on-error-container: #ff97a3; --md-sys-color-success: #3bb27b; --md-sys-color-on-success: #002615; --md-sys-color-success-container: #059460; --md-sys-color-on-success-container: #001e10; --md-sys-color-warning: #f3b31e; --md-sys-color-on-warning: #4e3600; --md-sys-color-warning-container: #e4a604; --md-sys-color-on-warning-container: #593f00; --md-sys-color-info: #699cff; --md-sys-color-on-info: #001e4b; --md-sys-color-info-container: #0c74f6; --md-sys-color-on-info-container: #000a23; --md-sys-color-inverse-error: #a8364b; --md-sys-color-inverse-success: #006d46; --md-sys-color-inverse-warning: #7c5900; --md-sys-color-inverse-info: #005bc5; } [data-contrast='medium'], [data-contrast='medium'][data-theme='light'], [data-contrast='medium'] [data-theme='light'] { color-scheme: light; --md-sys-color-background: #fdf7fe; --md-sys-color-on-background: #25232b; --md-sys-color-surface: #fdf7fe; --md-sys-color-surface-dim: #ded8e4; --md-sys-color-surface-bright: #fdf7fe; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f8f1fa; --md-sys-color-surface-container: #f2ecf5; --md-sys-color-surface-container-high: #ece6f0; --md-sys-color-surface-container-highest: #e7e0ec; --md-sys-color-on-surface: #25232b; --md-sys-color-on-surface-variant: #45414b; --md-sys-color-outline: #615d68; --md-sys-color-outline-variant: #7d7983; --md-sys-color-inverse-surface: #0f0d12; --md-sys-color-inverse-on-surface: #c8c3c9; --md-sys-color-primary: #483b6b; --md-sys-color-primary-dim: #3c305f; --md-sys-color-on-primary: #e1d3ff; --md-sys-color-primary-container: #7b6da0; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-primary-fixed: #7b6da0; --md-sys-color-primary-fixed-dim: #6e6093; --md-sys-color-on-primary-fixed: #ffffff; --md-sys-color-on-primary-fixed-variant: #ffffff; --md-sys-color-inverse-primary: #d4c3fd; --md-sys-color-secondary: #464054; --md-sys-color-secondary-dim: #3a3548; --md-sys-color-on-secondary: #dfd5ef; --md-sys-color-secondary-container: #787187; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-secondary-fixed: #787187; --md-sys-color-secondary-fixed-dim: #6c657b; --md-sys-color-on-secondary-fixed: #ffffff; --md-sys-color-on-secondary-fixed-variant: #ffffff; --md-sys-color-tertiary: #5c3653; --md-sys-color-tertiary-dim: #502b47; --md-sys-color-on-tertiary: #ffcaee; --md-sys-color-tertiary-container: #936787; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-tertiary-fixed: #936787; --md-sys-color-tertiary-fixed-dim: #855b7a; --md-sys-color-on-tertiary-fixed: #ffffff; --md-sys-color-on-tertiary-fixed-variant: #ffffff; --md-sys-color-error: #821830; --md-sys-color-error-dim: #6b0221; --md-sys-color-on-error: #ffcdd1; --md-sys-color-error-container: #c44b5f; --md-sys-color-on-error-container: #ffffff; --md-sys-color-success: #004d30; --md-sys-color-on-success: #7df0b3; --md-sys-color-success-container: #008656; --md-sys-color-on-success-container: #ffffff; --md-sys-color-warning: #593e00; --md-sys-color-on-warning: #ffd385; --md-sys-color-warning-container: #986d00; --md-sys-color-on-warning-container: #ffffff; --md-sys-color-info: #003f8e; --md-sys-color-on-info: #cbd9ff; --md-sys-color-info-container: #006fef; --md-sys-color-on-info-container: #ffffff; --md-sys-color-inverse-error: #ff9da8; --md-sys-color-inverse-success: #5ace94; --md-sys-color-inverse-warning: #f3b31e; --md-sys-color-inverse-info: #98b8ff; } [data-contrast='medium'][data-theme='dark'], [data-contrast='medium'] [data-theme='dark'] { color-scheme: dark; --md-sys-color-background: #0f0d12; --md-sys-color-on-background: #ffffff; --md-sys-color-surface: #0f0d12; --md-sys-color-surface-dim: #0f0d12; --md-sys-color-surface-bright: #2e2b34; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #141218; --md-sys-color-surface-container: #1b181f; --md-sys-color-surface-container-high: #211e26; --md-sys-color-surface-container-highest: #27242d; --md-sys-color-on-surface: #ffffff; --md-sys-color-on-surface-variant: #bcb6c2; --md-sys-color-outline: #96919c; --md-sys-color-outline-variant: #78737e; --md-sys-color-inverse-surface: #fdf7fe; --md-sys-color-inverse-on-surface: #39373c; --md-sys-color-primary: #cdc0ec; --md-sys-color-primary-dim: #bfb2de; --md-sys-color-on-primary: #3a3054; --md-sys-color-primary-container: #7a6f96; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-primary-fixed: #ded0fe; --md-sys-color-primary-fixed-dim: #d0c3ef; --md-sys-color-on-primary-fixed: #180e30; --md-sys-color-on-primary-fixed-variant: #3c3256; --md-sys-color-inverse-primary: #5a4f75; --md-sys-color-secondary: #cbc2db; --md-sys-color-secondary-dim: #beb5cd; --md-sys-color-on-secondary: #393347; --md-sys-color-secondary-container: #787187; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-secondary-fixed: #e8def8; --md-sys-color-secondary-fixed-dim: #dad0ea; --md-sys-color-on-secondary-fixed: #221d2f; --md-sys-color-on-secondary-fixed-variant: #423c50; --md-sys-color-tertiary: #ffcfef; --md-sys-color-tertiary-dim: #f4bfe3; --md-sys-color-on-tertiary: #5e3855; --md-sys-color-tertiary-container: #f4bfe3; --md-sys-color-on-tertiary-container: #542f4c; --md-sys-color-tertiary-fixed: #f4bfe3; --md-sys-color-tertiary-fixed-dim: #e5b2d5; --md-sys-color-on-tertiary-fixed: #180015; --md-sys-color-on-tertiary-fixed-variant: #4a2642; --md-sys-color-error: #ff9da8; --md-sys-color-error-dim: #ff8695; --md-sys-color-on-error: #5f001c; --md-sys-color-error-container: #c44b5f; --md-sys-color-on-error-container: #ffffff; --md-sys-color-success: #5ace94; --md-sys-color-on-success: #00341e; --md-sys-color-success-container: #008656; --md-sys-color-on-success-container: #ffffff; --md-sys-color-warning: #f3b31e; --md-sys-color-on-warning: #412d00; --md-sys-color-warning-container: #e4a604; --md-sys-color-on-warning-container: #332200; --md-sys-color-info: #98b8ff; --md-sys-color-on-info: #002a62; --md-sys-color-info-container: #006fef; --md-sys-color-on-info-container: #ffffff; --md-sys-color-inverse-error: #821830; --md-sys-color-inverse-success: #004d30; --md-sys-color-inverse-warning: #593e00; --md-sys-color-inverse-info: #003f8e; } [data-contrast='high'], [data-contrast='high'][data-theme='light'], [data-contrast='high'] [data-theme='light'] { color-scheme: light; --md-sys-color-background: #fdf7fe; --md-sys-color-on-background: #000000; --md-sys-color-surface: #fdf7fe; --md-sys-color-surface-dim: #ded8e4; --md-sys-color-surface-bright: #fdf7fe; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f8f1fa; --md-sys-color-surface-container: #f2ecf5; --md-sys-color-surface-container-high: #ece6f0; --md-sys-color-surface-container-highest: #e7e0ec; --md-sys-color-on-surface: #000000; --md-sys-color-on-surface-variant: #25232b; --md-sys-color-outline: #45414b; --md-sys-color-outline-variant: #54505a; --md-sys-color-inverse-surface: #0f0d12; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-primary: #281b49; --md-sys-color-primary-dim: #1e103f; --md-sys-color-on-primary: #e1d3ff; --md-sys-color-primary-container: #584a7b; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-primary-fixed: #584a7b; --md-sys-color-primary-fixed-dim: #4c3f6f; --md-sys-color-on-primary-fixed: #ffffff; --md-sys-color-on-primary-fixed-variant: #ffffff; --md-sys-color-inverse-primary: #d4c3fd; --md-sys-color-secondary: #262134; --md-sys-color-secondary-dim: #1c1729; --md-sys-color-on-secondary: #dfd6ef; --md-sys-color-secondary-container: #554f64; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-secondary-fixed: #554f64; --md-sys-color-secondary-fixed-dim: #494358; --md-sys-color-on-secondary-fixed: #ffffff; --md-sys-color-on-secondary-fixed-variant: #ffffff; --md-sys-color-tertiary: #391733; --md-sys-color-tertiary-dim: #2e0d28; --md-sys-color-on-tertiary: #ffcbee; --md-sys-color-tertiary-container: #6d4563; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-tertiary-fixed: #6d4563; --md-sys-color-tertiary-fixed-dim: #603a57; --md-sys-color-on-tertiary-fixed: #ffffff; --md-sys-color-on-tertiary-fixed-variant: #ffffff; --md-sys-color-error: #500016; --md-sys-color-error-dim: #3d000f; --md-sys-color-on-error: #ffced2; --md-sys-color-error-container: #97283e; --md-sys-color-on-error-container: #ffffff; --md-sys-color-success: #002a18; --md-sys-color-on-success: #7df0b4; --md-sys-color-success-container: #005f3c; --md-sys-color-on-success-container: #ffffff; --md-sys-color-warning: #312100; --md-sys-color-on-warning: #ffd486; --md-sys-color-warning-container: #6c4d00; --md-sys-color-on-warning-container: #ffffff; --md-sys-color-info: #002252; --md-sys-color-on-info: #ccdaff; --md-sys-color-info-container: #004eac; --md-sys-color-on-info-container: #ffffff; --md-sys-color-inverse-error: #ffdddf; --md-sys-color-inverse-success: #89fcbf; --md-sys-color-inverse-warning: #ffe2b1; --md-sys-color-inverse-info: #dde5ff; } [data-contrast='high'][data-theme='dark'], [data-contrast='high'] [data-theme='dark'] { color-scheme: dark; --md-sys-color-background: #0f0d12; --md-sys-color-on-background: #ffffff; --md-sys-color-surface: #0f0d12; --md-sys-color-surface-dim: #0f0d12; --md-sys-color-surface-bright: #2e2b34; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #141218; --md-sys-color-surface-container: #1b181f; --md-sys-color-surface-container-high: #211e26; --md-sys-color-surface-container-highest: #27242d; --md-sys-color-on-surface: #ffffff; --md-sys-color-on-surface-variant: #eae3ef; --md-sys-color-outline: #bcb6c2; --md-sys-color-outline-variant: #a7a1ad; --md-sys-color-inverse-surface: #fdf7fe; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-primary: #ebe1ff; --md-sys-color-primary-dim: #ded0fe; --md-sys-color-on-primary: #302649; --md-sys-color-primary-container: #aa9dc8; --md-sys-color-on-primary-container: #000000; --md-sys-color-primary-fixed: #ded0fe; --md-sys-color-primary-fixed-dim: #d0c3ef; --md-sys-color-on-primary-fixed: #000000; --md-sys-color-on-primary-fixed-variant: #180e30; --md-sys-color-inverse-primary: #3c3256; --md-sys-color-secondary: #ebe1fb; --md-sys-color-secondary-dim: #ddd3ed; --md-sys-color-on-secondary: #2e293c; --md-sys-color-secondary-container: #a8a0b8; --md-sys-color-on-secondary-container: #000000; --md-sys-color-secondary-fixed: #e8def8; --md-sys-color-secondary-fixed-dim: #dad0ea; --md-sys-color-on-secondary-fixed: #000000; --md-sys-color-on-secondary-fixed-variant: #221d2f; --md-sys-color-tertiary: #ffdbf2; --md-sys-color-tertiary-dim: #fac5e9; --md-sys-color-on-tertiary: #43203b; --md-sys-color-tertiary-container: #f4bfe3; --md-sys-color-on-tertiary-container: #2e0e29; --md-sys-color-tertiary-fixed: #f4bfe3; --md-sys-color-tertiary-fixed-dim: #e5b2d5; --md-sys-color-on-tertiary-fixed: #000000; --md-sys-color-on-tertiary-fixed-variant: #180015; --md-sys-color-error: #ffdddf; --md-sys-color-error-dim: #ffc7cb; --md-sys-color-on-error: #5f001c; --md-sys-color-error-container: #ff798c; --md-sys-color-on-error-container: #000000; --md-sys-color-success: #89fcbf; --md-sys-color-on-success: #00341e; --md-sys-color-success-container: #42b880; --md-sys-color-on-success-container: #000000; --md-sys-color-warning: #ffe2b1; --md-sys-color-on-warning: #3c2900; --md-sys-color-warning-container: #e4a604; --md-sys-color-on-warning-container: #000000; --md-sys-color-info: #dde5ff; --md-sys-color-on-info: #002a62; --md-sys-color-info-container: #74a2ff; --md-sys-color-on-info-container: #000000; --md-sys-color-inverse-error: #500016; --md-sys-color-inverse-success: #002a18; --md-sys-color-inverse-warning: #312100; --md-sys-color-inverse-info: #002252; } } @layer material.tokens { :root { --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-xs: 4px; --md-sys-shape-corner-sm: 8px; --md-sys-shape-corner-md: 12px; --md-sys-shape-corner-lg: 16px; --md-sys-shape-corner-lg-increased: 20px; --md-sys-shape-corner-xl: 28px; --md-sys-shape-corner-xl-increased: 32px; --md-sys-shape-corner-xxl: 48px; --md-sys-shape-corner-full: 9999px; } } @layer material.tokens { :root { --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); } } @layer material.tokens { :root { --md-sys-motion-spatial-fast: linear(0, 0.0195, 0.0716, 0.1471, 0.2381, 0.3378, 0.4404, 0.5416, 0.6378, 0.7265, 0.806, 0.8754, 0.9342, 0.9826, 1.0211, 1.0503, 1.0713, 1.0849, 1.0924, 1.0948, 1.0931, 1.0882, 1.0812, 1.0726, 1.0632, 1.0534, 1.0438, 1.0347, 1.0263, 1.0187, 1.0121, 1.0064, 1.0018, 0.9981, 0.9953, 0.9933, 0.992, 0.9913, 0.991, 0.9912, 0.9916, 0.9923, 0.9931, 0.994, 0.9949, 0.9958, 0.9967, 0.9975, 1); --md-sys-motion-spatial-fast-duration: 350ms; --md-sys-motion-spatial-default: linear(0, 0.0185, 0.0663, 0.1336, 0.2126, 0.2973, 0.3832, 0.4669, 0.5461, 0.6192, 0.6854, 0.7443, 0.7958, 0.8402, 0.8779, 0.9094, 0.9354, 0.9564, 0.9731, 0.9861, 0.996, 1.0033, 1.0085, 1.0119, 1.014, 1.015, 1.0152, 1.0148, 1.014, 1.0129, 1.0117, 1.0104, 1.0091, 1.0078, 1.0066, 1.0055, 1.0046, 1.0037, 1.0029, 1.0023, 1.0017, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1, 0.9999, 1); --md-sys-motion-spatial-default-duration: 500ms; --md-sys-motion-spatial-slow: linear(0, 0.0166, 0.0597, 0.1211, 0.1939, 0.273, 0.354, 0.434, 0.5107, 0.5826, 0.6487, 0.7084, 0.7615, 0.8081, 0.8484, 0.8829, 0.912, 0.9361, 0.9559, 0.9719, 0.9845, 0.9943, 1.0017, 1.0071, 1.0108, 1.0132, 1.0146, 1.0151, 1.0151, 1.0145, 1.0137, 1.0126, 1.0114, 1.0102, 1.009, 1.0078, 1.0067, 1.0057, 1.0047, 1.0039, 1.0031, 1.0025, 1.0019, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1); --md-sys-motion-spatial-slow-duration: 650ms; --md-sys-motion-effects-fast: linear(0, 0.0163, 0.0576, 0.1147, 0.1807, 0.2507, 0.3214, 0.3902, 0.4558, 0.5172, 0.5737, 0.6253, 0.6718, 0.7136, 0.7508, 0.7837, 0.8128, 0.8383, 0.8606, 0.8801, 0.897, 0.9117, 0.9244, 0.9353, 0.9448, 0.9529, 0.9599, 0.9658, 0.9709, 0.9753, 0.979, 0.9822, 0.9849, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9977, 0.998, 0.9983, 0.9986, 0.9988, 1); --md-sys-motion-effects-fast-duration: 150ms; --md-sys-motion-effects-default: linear(0, 0.0124, 0.0446, 0.0902, 0.1443, 0.2032, 0.2642, 0.3253, 0.3849, 0.4422, 0.4963, 0.547, 0.594, 0.6372, 0.6768, 0.7127, 0.7452, 0.7745, 0.8009, 0.8244, 0.8454, 0.8641, 0.8807, 0.8954, 0.9084, 0.9199, 0.93, 0.9389, 0.9467, 0.9536, 0.9596, 0.9648, 0.9694, 0.9734, 0.9769, 0.98, 0.9826, 0.985, 0.987, 0.9887, 0.9902, 0.9916, 0.9927, 0.9937, 0.9946, 0.9953, 0.9959, 0.9965, 1); --md-sys-motion-effects-default-duration: 200ms; --md-sys-motion-effects-slow: linear(0, 0.0139, 0.0496, 0.0995, 0.1583, 0.2216, 0.2865, 0.3509, 0.4131, 0.4722, 0.5275, 0.5788, 0.6258, 0.6687, 0.7075, 0.7424, 0.7737, 0.8016, 0.8264, 0.8484, 0.8678, 0.8849, 0.8999, 0.9131, 0.9247, 0.9347, 0.9435, 0.9512, 0.9578, 0.9636, 0.9686, 0.973, 0.9767, 0.98, 0.9828, 0.9852, 0.9873, 0.9891, 0.9907, 0.992, 0.9931, 0.9941, 0.995, 0.9957, 0.9963, 0.9969, 0.9973, 0.9977, 1); --md-sys-motion-effects-slow-duration: 300ms; --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-duration-short: 150ms; --md-sys-motion-duration-medium: 300ms; --md-sys-motion-duration-long: 500ms; } [data-motion="standard"] { --md-sys-motion-spatial-fast: linear(0, 0.0316, 0.1076, 0.2062, 0.313, 0.4185, 0.517, 0.6056, 0.6828, 0.7486, 0.8036, 0.8487, 0.8852, 0.9142, 0.937, 0.9546, 0.968, 0.9781, 0.9856, 0.991, 0.9948, 0.9975, 0.9992, 1.0004, 1.001, 1.0014, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.001, 1.0008, 1.0007, 1.0005, 1.0004, 1.0003, 1.0003, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1); --md-sys-motion-spatial-fast-duration: 350ms; --md-sys-motion-spatial-default: linear(0, 0.0322, 0.1094, 0.2094, 0.3173, 0.4237, 0.5227, 0.6114, 0.6886, 0.7541, 0.8086, 0.8532, 0.8891, 0.9175, 0.9397, 0.9569, 0.9699, 0.9796, 0.9867, 0.9918, 0.9954, 0.9979, 0.9995, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1); --md-sys-motion-spatial-default-duration: 500ms; --md-sys-motion-spatial-slow: linear(0, 0.0311, 0.1061, 0.2037, 0.3095, 0.4143, 0.5125, 0.6009, 0.6782, 0.7442, 0.7995, 0.8451, 0.882, 0.9115, 0.9347, 0.9527, 0.9665, 0.9769, 0.9846, 0.9903, 0.9943, 0.9971, 0.999, 1.0002, 1.0009, 1.0013, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.001, 1.0008, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1); --md-sys-motion-spatial-slow-duration: 750ms; } @media (prefers-reduced-motion: reduce) { :root, [data-motion="standard"] { --md-sys-motion-spatial-fast-duration: 0ms; --md-sys-motion-spatial-default-duration: 0ms; --md-sys-motion-spatial-slow-duration: 0ms; --md-sys-motion-effects-fast-duration: 0ms; --md-sys-motion-effects-default-duration: 0ms; --md-sys-motion-effects-slow-duration: 0ms; --md-sys-motion-duration-short: 0ms; --md-sys-motion-duration-medium: 0ms; --md-sys-motion-duration-long: 0ms; } } } @layer material.tokens { :root { --md-ref-typeface-brand: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --md-ref-typeface-plain: var(--md-ref-typeface-brand); --md-ref-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --md-ref-typeface-weight-regular: 400; --md-ref-typeface-weight-medium: 500; --md-ref-typeface-weight-bold: 700; --md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand); --md-sys-typescale-display-lg-tracking: -0.0125rem; --md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-display-lg-tracking: 0rem; --md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand); --md-sys-typescale-display-md-tracking: 0rem; --md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-display-md-tracking: 0rem; --md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand); --md-sys-typescale-display-sm-tracking: 0rem; --md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-display-sm-tracking: 0rem; --md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand); --md-sys-typescale-headline-lg-tracking: 0rem; --md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-headline-lg-tracking: 0rem; --md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand); --md-sys-typescale-headline-md-tracking: 0rem; --md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-headline-md-tracking: 0rem; --md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand); --md-sys-typescale-headline-sm-tracking: 0rem; --md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-headline-sm-tracking: 0rem; --md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand); --md-sys-typescale-title-lg-tracking: 0rem; --md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand); --md-sys-typescale-emphasized-title-lg-tracking: 0rem; --md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain); --md-sys-typescale-title-md-tracking: 0.0125rem; --md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-title-md-tracking: 0.009375rem; --md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-title-sm-tracking: 0.00625rem; --md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-title-sm-tracking: 0.00625rem; --md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain); --md-sys-typescale-body-lg-tracking: 0.03125rem; --md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-body-lg-tracking: 0.009375rem; --md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-body-md-tracking: 0.0125rem; --md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-body-md-tracking: 0.015625rem; --md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain); --md-sys-typescale-body-sm-tracking: 0.025rem; --md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-body-sm-tracking: 0.025rem; --md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-label-lg-tracking: 0.00625rem; --md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-label-lg-tracking: 0.00625rem; --md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain); --md-sys-typescale-label-md-tracking: 0.03125rem; --md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-label-md-tracking: 0.03125rem; --md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain); --md-sys-typescale-label-sm-tracking: 0.03125rem; --md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain); --md-sys-typescale-emphasized-label-sm-tracking: 0.03125rem; } } @layer material.tokens { :root { --md-sys-state-hover-state-layer-opacity: 0.08; --md-sys-state-focus-state-layer-opacity: 0.1; --md-sys-state-pressed-state-layer-opacity: 0.1; --md-sys-state-dragged-state-layer-opacity: 0.16; --md-sys-state-disabled-content-opacity: 0.38; --md-sys-state-disabled-container-opacity: 0.12; } } @layer material.tokens { :root { --md-sys-measurement-space25: 2px; --md-sys-measurement-space50: 4px; --md-sys-measurement-space75: 6px; --md-sys-measurement-space100: 8px; --md-sys-measurement-space125: 10px; --md-sys-measurement-space200: 16px; --md-sys-measurement-space300: 24px; --md-sys-measurement-space400: 32px; --md-sys-measurement-space500: 40px; --md-sys-measurement-space600: 48px; --md-sys-measurement-space700: 56px; --md-sys-measurement-space800: 64px; --md-sys-measurement-space900: 72px; } } @layer material.base { } @layer material.base { html { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-family: var(--md-ref-typeface-brand); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } @layer material.base { .md-state-layer { position: relative; isolation: isolate; &::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast); } @media (hover: hover) { &:hover::before { opacity: var(--md-sys-state-hover-state-layer-opacity); } } &:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } &:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); } &[data-md-dragged]::before { opacity: var(--md-sys-state-dragged-state-layer-opacity); } &:disabled::before, &[aria-disabled='true']::before { display: none; } } .md-focus-ring { outline: none; &:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } } .md-touch-target { position: relative; &::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: var(--md-sys-measurement-space600); min-height: var(--md-sys-measurement-space600); transform: translate(-50%, -50%); } } .md-link { cursor: pointer; text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; border-radius: var(--md-sys-shape-corner-xs); &:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } } } @layer material.text { .md-type-display-lg { font: var(--md-sys-typescale-display-lg); letter-spacing: var(--md-sys-typescale-display-lg-tracking); font-variation-settings: normal; } .md-type-emphasized-display-lg { font: var(--md-sys-typescale-emphasized-display-lg); letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking); font-variation-settings: "ROND" 100; } .md-type-display-md { font: var(--md-sys-typescale-display-md); letter-spacing: var(--md-sys-typescale-display-md-tracking); font-variation-settings: normal; } .md-type-emphasized-display-md { font: var(--md-sys-typescale-emphasized-display-md); letter-spacing: var(--md-sys-typescale-emphasized-display-md-tracking); font-variation-settings: "ROND" 100; } .md-type-display-sm { font: var(--md-sys-typescale-display-sm); letter-spacing: var(--md-sys-typescale-display-sm-tracking); font-variation-settings: normal; } .md-type-emphasized-display-sm { font: var(--md-sys-typescale-emphasized-display-sm); letter-spacing: var(--md-sys-typescale-emphasized-display-sm-tracking); font-variation-settings: "ROND" 100; } .md-type-headline-lg { font: var(--md-sys-typescale-headline-lg); letter-spacing: var(--md-sys-typescale-headline-lg-tracking); font-variation-settings: normal; } .md-type-emphasized-headline-lg { font: var(--md-sys-typescale-emphasized-headline-lg); letter-spacing: var(--md-sys-typescale-emphasized-headline-lg-tracking); font-variation-settings: "ROND" 100; } .md-type-headline-md { font: var(--md-sys-typescale-headline-md); letter-spacing: var(--md-sys-typescale-headline-md-tracking); font-variation-settings: normal; } .md-type-emphasized-headline-md { font: var(--md-sys-typescale-emphasized-headline-md); letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking); font-variation-settings: "ROND" 100; } .md-type-headline-sm { font: var(--md-sys-typescale-headline-sm); letter-spacing: var(--md-sys-typescale-headline-sm-tracking); font-variation-settings: normal; } .md-type-emphasized-headline-sm { font: var(--md-sys-typescale-emphasized-headline-sm); letter-spacing: var(--md-sys-typescale-emphasized-headline-sm-tracking); font-variation-settings: "ROND" 100; } .md-type-title-lg { font: var(--md-sys-typescale-title-lg); letter-spacing: var(--md-sys-typescale-title-lg-tracking); font-variation-settings: normal; } .md-type-emphasized-title-lg { font: var(--md-sys-typescale-emphasized-title-lg); letter-spacing: var(--md-sys-typescale-emphasized-title-lg-tracking); font-variation-settings: "ROND" 100; } .md-type-title-md { font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); font-variation-settings: normal; } .md-type-emphasized-title-md { font: var(--md-sys-typescale-emphasized-title-md); letter-spacing: var(--md-sys-typescale-emphasized-title-md-tracking); font-variation-settings: "ROND" 100; } .md-type-title-sm { font: var(--md-sys-typescale-title-sm); letter-spacing: var(--md-sys-typescale-title-sm-tracking); font-variation-settings: normal; } .md-type-emphasized-title-sm { font: var(--md-sys-typescale-emphasized-title-sm); letter-spacing: var(--md-sys-typescale-emphasized-title-sm-tracking); font-variation-settings: "ROND" 100; } .md-type-body-lg { font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); font-variation-settings: normal; } .md-type-emphasized-body-lg { font: var(--md-sys-typescale-emphasized-body-lg); letter-spacing: var(--md-sys-typescale-emphasized-body-lg-tracking); font-variation-settings: "ROND" 100; } .md-type-body-md { font: var(--md-sys-typescale-body-md); letter-spacing: var(--md-sys-typescale-body-md-tracking); font-variation-settings: normal; } .md-type-emphasized-body-md { font: var(--md-sys-typescale-emphasized-body-md); letter-spacing: var(--md-sys-typescale-emphasized-body-md-tracking); font-variation-settings: "ROND" 100; } .md-type-body-sm { font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; } .md-type-emphasized-body-sm { font: var(--md-sys-typescale-emphasized-body-sm); letter-spacing: var(--md-sys-typescale-emphasized-body-sm-tracking); font-variation-settings: "ROND" 100; } .md-type-label-lg { font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } .md-type-emphasized-label-lg { font: var(--md-sys-typescale-emphasized-label-lg); letter-spacing: var(--md-sys-typescale-emphasized-label-lg-tracking); font-variation-settings: "ROND" 100; } .md-type-label-md { font: var(--md-sys-typescale-label-md); letter-spacing: var(--md-sys-typescale-label-md-tracking); font-variation-settings: normal; } .md-type-emphasized-label-md { font: var(--md-sys-typescale-emphasized-label-md); letter-spacing: var(--md-sys-typescale-emphasized-label-md-tracking); font-variation-settings: "ROND" 100; } .md-type-label-sm { font: var(--md-sys-typescale-label-sm); letter-spacing: var(--md-sys-typescale-label-sm-tracking); font-variation-settings: normal; } .md-type-emphasized-label-sm { font: var(--md-sys-typescale-emphasized-label-sm); letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking); font-variation-settings: "ROND" 100; } .md-ink { color: var(--md-sys-color-on-surface); } .md-ink-variant { color: var(--md-sys-color-on-surface-variant); } .md-ink-quiet { color: var(--md-sys-color-outline); } .md-ink-primary { color: var(--md-sys-color-primary); } .md-ink-error { color: var(--md-sys-color-error); } .md-ink-success { color: var(--md-sys-color-success); } .md-ink-warning { color: var(--md-sys-color-warning); } .md-ink-info { color: var(--md-sys-color-info); } .md-ink-inverse { color: var(--md-sys-color-inverse-on-surface); } .md-text-start { text-align: start; } .md-text-center { text-align: center; } .md-text-end { text-align: end; } .md-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .md-line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .md-nowrap { white-space: nowrap; } .md-tabular { font-variant-numeric: tabular-nums; } .md-mono { font-family: var(--md-ref-typeface-mono); } .md-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } } @layer material.components { [data-md-icon] { flex-shrink: 0; inline-size: var(--md-icon-size, 24px); block-size: var(--md-icon-size, 24px); } [data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) { transform: scaleX(-1); } } @layer material.components { [data-md-loading] { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: var(--md-loading-size, 48px); block-size: var(--md-loading-size, 48px); color: var(--md-sys-color-primary); & > svg { inline-size: 100%; block-size: 100%; } & > [data-md-loading-still] { display: none; } @media (prefers-reduced-motion: reduce) { & > [data-md-loading-animated] { display: none; } & > [data-md-loading-still] { display: block; } } } [data-md-loading][data-md-contained] { border-radius: var(--md-sys-shape-corner-full); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } } @layer material.components { [data-md-tooltip-anchor] { display: inline-flex; } [data-md-tooltip] { inset: auto; margin: 0; max-inline-size: 200px; overflow: visible; border-width: 0; border-radius: var(--md-sys-shape-corner-xs); padding-block: var(--md-sys-measurement-space50); padding-inline: var(--md-sys-measurement-space100); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); font: var(--md-sys-typescale-body-sm); letter-spacing: var(--md-sys-typescale-body-sm-tracking); font-variation-settings: normal; text-align: center; white-space: normal; pointer-events: none; opacity: 0; transition-property: opacity; transition-duration: var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-effects-fast); &:popover-open:not([data-md-popover-closing]) { opacity: 1; @starting-style { opacity: 0; } } } [data-md-tooltip]:is([data-md-side='top'], [data-md-side='bottom']) { margin-block: var(--md-sys-measurement-space50); position-try-fallbacks: flip-block; } [data-md-tooltip]:is([data-md-side='left'], [data-md-side='right']) { margin-inline: var(--md-sys-measurement-space50); position-try-fallbacks: flip-inline; } [data-md-tooltip][data-md-side='top'] { position-area: top; } [data-md-tooltip][data-md-side='bottom'] { position-area: bottom; } [data-md-tooltip][data-md-side='left'] { position-area: left; } [data-md-tooltip][data-md-side='right'] { position-area: right; } } @layer material.components { @property --md-color { syntax: '*'; inherits: false; } @property --md-on-color { syntax: '*'; inherits: false; } @property --md-container { syntax: '*'; inherits: false; } @property --md-on-container { syntax: '*'; inherits: false; } [data-md-color='primary'] { --md-color: var(--md-sys-color-primary); --md-on-color: var(--md-sys-color-on-primary); --md-container: var(--md-sys-color-primary-container); --md-on-container: var(--md-sys-color-on-primary-container); } [data-md-color='secondary'] { --md-color: var(--md-sys-color-secondary); --md-on-color: var(--md-sys-color-on-secondary); --md-container: var(--md-sys-color-secondary-container); --md-on-container: var(--md-sys-color-on-secondary-container); } [data-md-color='tertiary'] { --md-color: var(--md-sys-color-tertiary); --md-on-color: var(--md-sys-color-on-tertiary); --md-container: var(--md-sys-color-tertiary-container); --md-on-container: var(--md-sys-color-on-tertiary-container); } [data-md-color='error'] { --md-color: var(--md-sys-color-error); --md-on-color: var(--md-sys-color-on-error); --md-container: var(--md-sys-color-error-container); --md-on-container: var(--md-sys-color-on-error-container); } [data-md-color='success'] { --md-color: var(--md-sys-color-success); --md-on-color: var(--md-sys-color-on-success); --md-container: var(--md-sys-color-success-container); --md-on-container: var(--md-sys-color-on-success-container); } [data-md-color='warning'] { --md-color: var(--md-sys-color-warning); --md-on-color: var(--md-sys-color-on-warning); --md-container: var(--md-sys-color-warning-container); --md-on-container: var(--md-sys-color-on-warning-container); } [data-md-color='info'] { --md-color: var(--md-sys-color-info); --md-on-color: var(--md-sys-color-on-info); --md-container: var(--md-sys-color-info-container); --md-on-container: var(--md-sys-color-on-info-container); } } @layer material.components { [data-md-button] { --md-button-color: var(--md-color, var(--md-sys-color-primary)); --md-button-on-color: var(--md-on-color, var(--md-sys-color-on-primary)); --md-button-tone: var(--md-container, var(--md-sys-color-secondary-container)); --md-button-on-tone: var(--md-on-container, var(--md-sys-color-on-secondary-container)); --md-button-tone-selected: var(--md-sys-color-secondary); --md-button-on-tone-selected: var(--md-sys-color-on-secondary); --md-button-quiet: var(--md-sys-color-on-surface-variant); --md-button-container: transparent; --md-button-label: var(--md-button-color); --md-button-outline: transparent; --md-button-elevation: none; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; block-size: var(--md-button-height); background-color: var(--md-button-container); color: var(--md-button-label); box-shadow: var(--md-button-elevation); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition-property: border-radius, padding, margin, bottom, background-color, color, box-shadow; transition-duration: var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration); transition-timing-function: var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast); } [data-md-button][data-md-size='xs'] { --md-button-height: 32px; --md-button-padding: var(--md-sys-measurement-space200); --md-button-gap: var(--md-sys-measurement-space100); --md-button-icon: 20px; --md-button-outline-width: 1px; --md-button-square: var(--md-sys-shape-corner-md); --md-button-pressed: var(--md-sys-shape-corner-sm); --md-button-narrow: 28px; --md-button-default: 32px; --md-button-wide: 40px; } [data-md-button][data-md-size='sm'] { --md-button-height: 40px; --md-button-padding: var(--md-sys-measurement-space200); --md-button-gap: var(--md-sys-measurement-space100); --md-button-icon: 20px; --md-button-outline-width: 1px; --md-button-square: var(--md-sys-shape-corner-md); --md-button-pressed: var(--md-sys-shape-corner-sm); --md-button-narrow: 32px; --md-button-default: 40px; --md-button-wide: 52px; } [data-md-button][data-md-size='sm'][data-md-icon-button] { --md-button-icon: 24px; } [data-md-button][data-md-size='md'] { --md-button-height: 56px; --md-button-padding: var(--md-sys-measurement-space300); --md-button-gap: var(--md-sys-measurement-space100); --md-button-icon: 24px; --md-button-outline-width: 1px; --md-button-square: var(--md-sys-shape-corner-lg); --md-button-pressed: var(--md-sys-shape-corner-md); --md-button-narrow: 48px; --md-button-default: 56px; --md-button-wide: 72px; } [data-md-button][data-md-size='lg'] { --md-button-height: 96px; --md-button-padding: var(--md-sys-measurement-space600); --md-button-gap: 12px; --md-button-icon: 32px; --md-button-outline-width: 2px; --md-button-square: var(--md-sys-shape-corner-xl); --md-button-pressed: var(--md-sys-shape-corner-lg); --md-button-narrow: 64px; --md-button-default: 96px; --md-button-wide: 128px; } [data-md-button][data-md-size='xl'] { --md-button-height: 136px; --md-button-padding: var(--md-sys-measurement-space800); --md-button-gap: var(--md-sys-measurement-space200); --md-button-icon: 40px; --md-button-outline-width: 3px; --md-button-square: var(--md-sys-shape-corner-xl); --md-button-pressed: var(--md-sys-shape-corner-lg); --md-button-narrow: 104px; --md-button-default: 136px; --md-button-wide: 184px; } [data-md-button]:not([data-md-icon-button]) { gap: var(--md-button-gap); padding-inline: var(--md-button-padding); } [data-md-button]:not([data-md-icon-button]):is([data-md-size='xs'], [data-md-size='sm']) { font: var(--md-sys-typescale-label-lg); letter-spacing: var(--md-sys-typescale-label-lg-tracking); font-variation-settings: normal; } [data-md-button]:not([data-md-icon-button])[data-md-size='md'] { font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); font-variation-settings: normal; } [data-md-button]:not([data-md-icon-button])[data-md-size='lg'] { font: var(--md-sys-typescale-headline-sm); letter-spacing: var(--md-sys-typescale-headline-sm-tracking); font-variation-settings: normal; } [data-md-button]:not([data-md-icon-button])[data-md-size='xl'] { font: var(--md-sys-typescale-headline-lg); letter-spacing: var(--md-sys-typescale-headline-lg-tracking); font-variation-settings: normal; } [data-md-button][data-md-icon-button] { --md-button-width: var(--md-button-default); inline-size: var(--md-button-width); &[data-md-width='narrow'] { --md-button-width: var(--md-button-narrow); } &[data-md-width='wide'] { --md-button-width: var(--md-button-wide); } } :where([data-md-button]) { border-radius: var(--md-sys-shape-corner-full); } :where([data-md-button]):where([data-md-shape='square'], [data-md-selected='true']) { border-radius: var(--md-button-square); } :where([data-md-button]):where([data-md-icon-button][data-md-shape='square'][data-md-selected='true']) { border-radius: var(--md-sys-shape-corner-full); } :where([data-md-button]):where(:active) { border-radius: var(--md-button-pressed); } [data-md-button][data-md-color='primary'] { --md-button-tone: var(--md-sys-color-secondary-container); --md-button-on-tone: var(--md-sys-color-on-secondary-container); } [data-md-button]:not([data-md-color='primary']) { --md-button-tone-selected: var(--md-button-color); --md-button-on-tone-selected: var(--md-button-on-color); --md-button-quiet: var(--md-button-color); } [data-md-button][data-md-variant='filled'] { --md-button-container: var(--md-button-color); --md-button-label: var(--md-button-on-color); &[data-md-selected='false'] { --md-button-container: var(--md-sys-color-surface-container); --md-button-label: var(--md-sys-color-on-surface-variant); } } [data-md-button][data-md-variant='tonal'] { --md-button-container: var(--md-button-tone); --md-button-label: var(--md-button-on-tone); &[data-md-selected='true'] { --md-button-container: var(--md-button-tone-selected); --md-button-label: var(--md-button-on-tone-selected); } } [data-md-button][data-md-variant='outlined'] { --md-button-label: var(--md-button-quiet); --md-button-outline: var(--md-sys-color-outline-variant); border: var(--md-button-outline-width) solid var(--md-button-outline); &[data-md-selected='true'] { --md-button-container: var(--md-sys-color-inverse-surface); --md-button-label: var(--md-sys-color-inverse-on-surface); --md-button-outline: transparent; } } [data-md-button][data-md-variant='elevated'] { --md-button-container: var(--md-sys-color-surface-container-low); --md-button-elevation: var(--md-sys-elevation-1); &[data-md-selected='true'] { --md-button-container: var(--md-button-color); --md-button-label: var(--md-button-on-color); } } [data-md-button][data-md-variant='text'][data-md-icon-button]:not([data-md-selected='true']) { --md-button-label: var(--md-button-quiet); } [data-md-button][data-md-variant='text']:not([data-md-icon-button])[data-md-selected='true'] { --md-button-container: var(--md-button-tone); --md-button-label: var(--md-button-on-tone); } @media (hover: hover) { [data-md-button]:is([data-md-variant='filled'], [data-md-variant='tonal']):hover { --md-button-elevation: var(--md-sys-elevation-1); } [data-md-button][data-md-variant='elevated']:hover { --md-button-elevation: var(--md-sys-elevation-2); } } [data-md-button]:is(:disabled, [aria-disabled='true']) { box-shadow: none; color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent); } [data-md-button]:is([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-variant='elevated'], [data-md-variant='outlined'][data-md-selected='true']):is(:disabled, [aria-disabled='true']) { background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); } [data-md-button]:disabled { cursor: not-allowed; } [data-md-button][aria-disabled='true'] { pointer-events: none; } [data-md-button-icon] { display: contents; } [data-md-button-spinner] { align-items: center; justify-content: center; } [data-md-button-spinner] > [data-md-loading] { inline-size: var(--md-button-icon); block-size: var(--md-button-icon); color: currentColor; } @media (width < 840px) { [data-md-button] > [data-md-responsive] { display: none; } } @media (width < 600px) { [data-md-button][data-md-compact-fab] { --md-button-height: 56px; --md-button-padding: var(--md-sys-measurement-space200); --md-button-gap: var(--md-sys-measurement-space100); position: fixed; inset-inline-end: var(--md-sys-measurement-space200); bottom: calc(var(--material-bottom-bar, 0px) + var(--material-snackbar-height, 0px) + var(--md-sys-measurement-space200)); z-index: 30; border-radius: var(--md-sys-shape-corner-lg); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: var(--md-sys-elevation-3); font: var(--md-sys-typescale-title-md); letter-spacing: var(--md-sys-typescale-title-md-tracking); font-variation-settings: normal; } [data-md-button][data-md-compact-fab] [data-md-icon] { inline-size: 24px; block-size: 24px; } [data-md-button][data-md-compact-fab][data-md-unavailable] { display: none; } } } @layer material.components { [data-md-shape][style*='--md-shape-size'] { inline-size: var(--md-shape-size); block-size: var(--md-shape-size); } } @layer material.components { body:has(> [data-md-error-page]) { margin: 0; min-height: 100dvh; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); } [data-md-error-page] { display: flex; min-height: 100dvh; max-width: 576px; margin-inline: auto; flex-direction: column; align-items: center; justify-content: center; padding-inline: var(--md-sys-measurement-space300); padding-block: var(--md-sys-measurement-space600); text-align: center; } [data-md-error-art] { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 192px; height: 192px; } @media (width >= 600px) { [data-md-error-art] { width: 240px; height: 240px; } } [data-md-error-shape] { position: absolute; inset: 0; } [data-md-error-shape] svg { width: 100%; height: 100%; color: var(--md-sys-color-primary-container); } @media (prefers-reduced-motion: no-preference) { [data-md-error-shape] { animation: material-error-turn 60s linear infinite; } } @keyframes material-error-turn { to { transform: rotate(1turn); } } [data-md-error-code] { position: relative; margin: 0; color: var(--md-sys-color-on-primary-container); font: var(--md-sys-typescale-emphasized-display-lg); letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking); font-variation-settings: 'ROND' 100; font-variant-numeric: tabular-nums; } [data-md-error-headline] { margin: var(--md-sys-measurement-space500) 0 0; font: var(--md-sys-typescale-headline-md); letter-spacing: var(--md-sys-typescale-headline-md-tracking); text-wrap: balance; } @media (width >= 600px) { [data-md-error-headline] { font: var(--md-sys-typescale-headline-lg); letter-spacing: var(--md-sys-typescale-headline-lg-tracking); } } [data-md-error-message] { margin: 12px 0 0; max-width: 448px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-lg); letter-spacing: var(--md-sys-typescale-body-lg-tracking); text-wrap: balance; } [data-md-error-actions] { display: flex; margin-top: var(--md-sys-measurement-space500); flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } }