Material You: md-sys-elevation-level0: none md-sys-elevation-level1: >- rgba(from var(--md-sys-color-shadow) r g b / 0.2) 0px 2px 1px -1px, rgba(from var(--md-sys-color-shadow) r g b / 0.14) 0px 1px 1px 0px, rgba(from var(--md-sys-color-shadow) r g b / 0.12) 0px 1px 3px 0px md-sys-elevation-level2: >- rgba(from var(--md-sys-color-shadow) r g b / 0.2) 0px 3px 3px -2px, rgba(from var(--md-sys-color-shadow) r g b / 0.14) 0px 3px 4px 0px, rgba(from var(--md-sys-color-shadow) r g b / 0.12) 0px 1px 8px 0px md-sys-elevation-level3: >- rgba(from var(--md-sys-color-shadow) r g b / 0.2) 0px 3px 5px -1px, rgba(from var(--md-sys-color-shadow) r g b / 0.14) 0px 6px 10px 0px, rgba(from var(--md-sys-color-shadow) r g b / 0.12) 0px 1px 18px 0px md-sys-elevation-level4: >- rgba(from var(--md-sys-color-shadow) r g b / 0.2) 0px 5px 5px -3px, rgba(from var(--md-sys-color-shadow) r g b / 0.14) 0px 8px 10px 1px, rgba(from var(--md-sys-color-shadow) r g b / 0.12) 0px 3px 14px 2px md-sys-elevation-level5: >- rgba(from var(--md-sys-color-shadow) r g b / 0.2) 0px 7px 8px -4px, rgba(from var(--md-sys-color-shadow) r g b / 0.14) 0px 12px 17px 2px, rgba(from var(--md-sys-color-shadow) r g b / 0.12) 0px 5px 22px 4px md-sys-motion-expressive-spatial-fast: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.90) md-sys-motion-expressive-spatial-default: 500ms cubic-bezier(0.38, 1.21, 0.22, 1.00) md-sys-motion-expressive-spatial-slow: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98) md-sys-motion-expressive-effects-fast: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00) md-sys-motion-expressive-effects-default: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00) md-sys-motion-expressive-effects-slow: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00) md-sys-motion-standard-spatial-fast: 350ms cubic-bezier(0.27, 1.06, 0.18, 1.00) md-sys-motion-standard-spatial-default: 500ms cubic-bezier(0.27, 1.06, 0.18, 1.00) md-sys-motion-standard-spatial-slow: 750ms cubic-bezier(0.27, 1.06, 0.18, 1.00) md-sys-motion-standard-effects-fast: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00) md-sys-motion-standard-effects-default: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00) md-sys-motion-standard-effects-slow: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00) 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-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-legacy: cubic-bezier(0.4, 0, 0.2, 1) md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1) md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1) md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1) md-sys-motion-duration-short1: 50ms md-sys-motion-duration-short2: 100ms md-sys-motion-duration-short3: 150ms md-sys-motion-duration-short4: 200ms md-sys-motion-duration-medium1: 250ms md-sys-motion-duration-medium2: 300ms md-sys-motion-duration-medium3: 350ms md-sys-motion-duration-medium4: 400ms md-sys-motion-duration-long1: 450ms md-sys-motion-duration-long2: 500ms md-sys-motion-duration-long3: 550ms md-sys-motion-duration-long4: 600ms md-sys-motion-duration-extra-long1: 700ms md-sys-motion-duration-extra-long2: 800ms md-sys-motion-duration-extra-long3: 900ms md-sys-motion-duration-extra-long4: 1000ms md-sys-shape-corner-full: 9999px md-sys-shape-corner-extra-large-top: 28px 28px 0 0 md-sys-shape-corner-extra-large: 28px md-sys-shape-corner-large-top: 16px 16px 0 0 md-sys-shape-corner-large-end: 0 16px 16px 0 md-sys-shape-corner-large-start: 16px 0 0 16px md-sys-shape-corner-large: 16px md-sys-shape-corner-medium: 12px md-sys-shape-corner-small: 8px md-sys-shape-corner-extra-small-top: 4px 4px 0 0 md-sys-shape-corner-extra-small: 4px md-sys-shape-corner-none: 0 md-ref-typeface-weight-regular: 400 md-ref-typeface-weight-medium: 500 md-ref-typeface-weight-bold: 700 md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-display-large-size: 57px md-sys-typescale-display-large-tracking: '-0.25px' md-sys-typescale-display-large-line-height: 64px md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-display-large-size: 57px md-sys-typescale-emphasized-display-large-tracking: '-0.25px' md-sys-typescale-emphasized-display-large-line-height: 64px md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-display-medium-size: 45px md-sys-typescale-display-medium-line-height: 52px md-sys-typescale-display-medium-tracking: 0 md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-display-medium-size: 45px md-sys-typescale-emphasized-display-medium-line-height: 52px md-sys-typescale-emphasized-display-medium-tracking: 0 md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-display-small-size: 36px md-sys-typescale-display-small-line-height: 44px md-sys-typescale-display-small-tracking: 0 md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-display-small-size: 36px md-sys-typescale-emphasized-display-small-line-height: 44px md-sys-typescale-emphasized-display-small-tracking: 0 md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-headline-large-size: 32px md-sys-typescale-headline-large-line-height: 40px md-sys-typescale-headline-large-tracking: 0 md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-headline-large-size: 32px md-sys-typescale-emphasized-headline-large-line-height: 40px md-sys-typescale-emphasized-headline-large-tracking: 0 md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-headline-medium-size: 28px md-sys-typescale-headline-medium-line-height: 36px md-sys-typescale-headline-medium-tracking: 0 md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-headline-medium-size: 28px md-sys-typescale-emphasized-headline-medium-line-height: 36px md-sys-typescale-emphasized-headline-medium-tracking: 0 md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-headline-small-size: 24px md-sys-typescale-headline-small-line-height: 32px md-sys-typescale-headline-small-tracking: 0 md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-headline-small-size: 24px md-sys-typescale-emphasized-headline-small-line-height: 32px md-sys-typescale-emphasized-headline-small-tracking: 0 md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-title-large-size: 22px md-sys-typescale-title-large-line-height: 28px md-sys-typescale-title-large-tracking: 0 md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-title-large-size: 22px md-sys-typescale-emphasized-title-large-line-height: 28px md-sys-typescale-emphasized-title-large-tracking: 0 md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-title-medium-size: 16px md-sys-typescale-title-medium-line-height: 24px md-sys-typescale-title-medium-tracking: 0.15px md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold) md-sys-typescale-emphasized-title-medium-size: 16px md-sys-typescale-emphasized-title-medium-line-height: 24px md-sys-typescale-emphasized-title-medium-tracking: 0.15px md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-title-small-size: 14px md-sys-typescale-title-small-line-height: 20px md-sys-typescale-title-small-tracking: 0.1px md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold) md-sys-typescale-emphasized-title-small-size: 14px md-sys-typescale-emphasized-title-small-line-height: 20px md-sys-typescale-emphasized-title-small-tracking: 0.1px md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-body-large-size: 16px md-sys-typescale-body-large-line-height: 24px md-sys-typescale-body-large-tracking: 0.5px md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-body-large-size: 16px md-sys-typescale-emphasized-body-large-line-height: 24px md-sys-typescale-emphasized-body-large-tracking: 0.5px md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-body-medium-size: 14px md-sys-typescale-body-medium-line-height: 20px md-sys-typescale-body-medium-tracking: 0.25px md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-body-medium-size: 14px md-sys-typescale-emphasized-body-medium-line-height: 20px md-sys-typescale-emphasized-body-medium-tracking: 0.25px md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular) md-sys-typescale-body-small-size: 12px md-sys-typescale-body-small-line-height: 16px md-sys-typescale-body-small-tracking: 0.4px md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-emphasized-body-small-size: 12px md-sys-typescale-emphasized-body-small-line-height: 16px md-sys-typescale-emphasized-body-small-tracking: 0.4px md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-label-large-weight-prominent: var(--md-ref-typeface-weight-bold) md-sys-typescale-label-large-size: 14px md-sys-typescale-label-large-line-height: 20px md-sys-typescale-label-large-tracking: 0.1px md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold) md-sys-typescale-emphasized-label-large-size: 14px md-sys-typescale-emphasized-label-large-line-height: 20px md-sys-typescale-emphasized-label-large-tracking: 0.1px md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-label-medium-weight-prominent: var(--md-ref-typeface-weight-bold) md-sys-typescale-label-medium-size: 12px md-sys-typescale-label-medium-line-height: 16px md-sys-typescale-label-medium-tracking: 0.5px md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold) md-sys-typescale-emphasized-label-medium-size: 12px md-sys-typescale-emphasized-label-medium-line-height: 16px md-sys-typescale-emphasized-label-medium-tracking: 0.5px md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium) md-sys-typescale-label-small-size: 11px md-sys-typescale-label-small-line-height: 16px md-sys-typescale-label-small-tracking: 0.5px md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold) md-sys-typescale-emphasized-label-small-size: 11px md-sys-typescale-emphasized-label-small-line-height: 16px md-sys-typescale-emphasized-label-small-tracking: 0.5px modes: dark: md-sys-color-primary: 'var(--md-sys-color-primary-dark, #b5c4ff)' md-sys-color-on-primary: 'var(--md-sys-color-on-primary-dark, #1c2d61)' md-sys-color-primary-container: 'var(--md-sys-color-primary-container-dark, #344479)' md-sys-color-on-primary-container: 'var(--md-sys-color-on-primary-container-dark, #dce1ff)' md-sys-color-primary-palette-key-color: 'var(--md-sys-color-primary-palette-key-color-dark, #6575ad)' md-sys-color-inverse-primary: 'var(--md-sys-color-inverse-primary-dark, #4c5c92)' md-sys-color-primary-fixed: 'var(--md-sys-color-primary-fixed-dark, #dce1ff)' md-sys-color-primary-fixed-dim: 'var(--md-sys-color-primary-fixed-dim-dark, #b5c4ff)' md-sys-color-on-primary-fixed: 'var(--md-sys-color-on-primary-fixed-dark, #02174b)' md-sys-color-on-primary-fixed-variant: 'var(--md-sys-color-on-primary-fixed-variant-dark, #344479)' md-sys-color-secondary: 'var(--md-sys-color-secondary-dark, #c1c5dd)' md-sys-color-on-secondary: 'var(--md-sys-color-on-secondary-dark, #2b3042)' md-sys-color-secondary-container: 'var(--md-sys-color-secondary-container-dark, #414659)' md-sys-color-on-secondary-container: 'var(--md-sys-color-on-secondary-container-dark, #dee1f9)' md-sys-color-secondary-palette-key-color: 'var(--md-sys-color-secondary-palette-key-color-dark, #72768b)' md-sys-color-secondary-fixed: 'var(--md-sys-color-secondary-fixed-dark, #dee1f9)' md-sys-color-secondary-fixed-dim: 'var(--md-sys-color-secondary-fixed-dim-dark, #c1c5dd)' md-sys-color-on-secondary-fixed: 'var(--md-sys-color-on-secondary-fixed-dark, #161b2c)' md-sys-color-on-secondary-fixed-variant: 'var(--md-sys-color-on-secondary-fixed-variant-dark, #414659)' md-sys-color-tertiary: 'var(--md-sys-color-tertiary-dark, #e3badb)' md-sys-color-on-tertiary: 'var(--md-sys-color-on-tertiary-dark, #432740)' md-sys-color-tertiary-container: 'var(--md-sys-color-tertiary-container-dark, #5b3d57)' md-sys-color-on-tertiary-container: 'var(--md-sys-color-on-tertiary-container-dark, #ffd7f6)' md-sys-color-tertiary-palette-key-color: 'var(--md-sys-color-tertiary-palette-key-color-dark, #8f6c89)' md-sys-color-tertiary-fixed: 'var(--md-sys-color-tertiary-fixed-dark, #ffd7f6)' md-sys-color-tertiary-fixed-dim: 'var(--md-sys-color-tertiary-fixed-dim-dark, #e3badb)' md-sys-color-on-tertiary-fixed: 'var(--md-sys-color-on-tertiary-fixed-dark, #2c122a)' md-sys-color-on-tertiary-fixed-variant: 'var(--md-sys-color-on-tertiary-fixed-variant-dark, #5b3d57)' md-sys-color-neutral-palette-key-color: 'var(--md-sys-color-neutral-palette-key-color-dark, #76767d)' md-sys-color-neutral-variant-palette-key-color: 'var(--md-sys-color-neutral-variant-palette-key-color-dark, #75767f)' md-sys-color-error: 'var(--md-sys-color-error-dark, #ffb4ab)' md-sys-color-on-error: 'var(--md-sys-color-on-error-dark, #690005)' md-sys-color-error-container: 'var(--md-sys-color-error-container-dark, #93000a)' md-sys-color-on-error-container: 'var(--md-sys-color-on-error-container-dark, #ffdad6)' md-sys-color-surface: 'var(--md-sys-color-surface-dark, #121318)' md-sys-color-on-surface: 'var(--md-sys-color-on-surface-dark, #e3e1e9)' md-sys-color-surface-variant: 'var(--md-sys-color-surface-variant-dark, #45464f)' md-sys-color-on-surface-variant: 'var(--md-sys-color-on-surface-variant-dark, #c6c6d0)' md-sys-color-surface-dim: 'var(--md-sys-color-surface-dim-dark, #121318)' md-sys-color-surface-bright: 'var(--md-sys-color-surface-bright-dark, #38393f)' md-sys-color-surface-container-lowest: 'var(--md-sys-color-surface-container-lowest-dark, #0d0e13)' md-sys-color-surface-container-low: 'var(--md-sys-color-surface-container-low-dark, #1a1b21)' md-sys-color-surface-container: 'var(--md-sys-color-surface-container-dark, #1e1f25)' md-sys-color-surface-container-high: 'var(--md-sys-color-surface-container-high-dark, #292a2f)' md-sys-color-surface-container-highest: 'var(--md-sys-color-surface-container-highest-dark, #34343a)' md-sys-color-inverse-surface: 'var(--md-sys-color-inverse-surface-dark, #e3e1e9)' md-sys-color-inverse-on-surface: 'var(--md-sys-color-inverse-on-surface-dark, #2f3036)' md-sys-color-surface-tint: 'var(--md-sys-color-surface-tint-dark, #b5c4ff)' md-sys-color-outline: 'var(--md-sys-color-outline-dark, #8f909a)' md-sys-color-outline-variant: 'var(--md-sys-color-outline-variant-dark, #45464f)' md-sys-color-shadow: 'var(--md-sys-color-shadow-dark, #000000)' md-sys-color-scrim: 'var(--md-sys-color-scrim-dark, #000000)' disabled-text-color: 'var(--disabled-text-color-dark, #ffffff80)' disabled-color: 'var(--disabled-color-dark, #000000)' state-inactive-color: 'var(--state-inactive-color-dark, #484a4e)' light: md-sys-color-primary: 'var(--md-sys-color-primary-light, #4c5c92)' md-sys-color-on-primary: 'var(--md-sys-color-on-primary-light, #ffffff)' md-sys-color-primary-container: 'var(--md-sys-color-primary-container-light, #dce1ff)' md-sys-color-on-primary-container: 'var(--md-sys-color-on-primary-container-light, #344479)' md-sys-color-primary-palette-key-color: 'var(--md-sys-color-primary-palette-key-color-light, #6575ad)' md-sys-color-inverse-primary: 'var(--md-sys-color-inverse-primary-light, #b5c4ff)' md-sys-color-primary-fixed: 'var(--md-sys-color-primary-fixed-light, #dce1ff)' md-sys-color-primary-fixed-dim: 'var(--md-sys-color-primary-fixed-dim-light, #b5c4ff)' md-sys-color-on-primary-fixed: 'var(--md-sys-color-on-primary-fixed-light, #02174b)' md-sys-color-on-primary-fixed-variant: 'var(--md-sys-color-on-primary-fixed-variant-light, #344479)' md-sys-color-secondary: 'var(--md-sys-color-secondary-light, #595e72)' md-sys-color-on-secondary: 'var(--md-sys-color-on-secondary-light, #ffffff)' md-sys-color-secondary-container: 'var(--md-sys-color-secondary-container-light, #dee1f9)' md-sys-color-on-secondary-container: 'var(--md-sys-color-on-secondary-container-light, #414659)' md-sys-color-secondary-palette-key-color: 'var(--md-sys-color-secondary-palette-key-color-light, #72768b)' md-sys-color-secondary-fixed: 'var(--md-sys-color-secondary-fixed-light, #dee1f9)' md-sys-color-secondary-fixed-dim: 'var(--md-sys-color-secondary-fixed-dim-light, #c1c5dd)' md-sys-color-on-secondary-fixed: 'var(--md-sys-color-on-secondary-fixed-light, #161b2c)' md-sys-color-on-secondary-fixed-variant: 'var(--md-sys-color-on-secondary-fixed-variant-light, #414659)' md-sys-color-tertiary: 'var(--md-sys-color-tertiary-light, #745470)' md-sys-color-on-tertiary: 'var(--md-sys-color-on-tertiary-light, #ffffff)' md-sys-color-tertiary-container: 'var(--md-sys-color-tertiary-container-light, #ffd7f6)' md-sys-color-on-tertiary-container: 'var(--md-sys-color-on-tertiary-container-light, #5b3d57)' md-sys-color-tertiary-palette-key-color: 'var(--md-sys-color-tertiary-palette-key-color-light, #8f6c89)' md-sys-color-tertiary-fixed: 'var(--md-sys-color-tertiary-fixed-light, #ffd7f6)' md-sys-color-tertiary-fixed-dim: 'var(--md-sys-color-tertiary-fixed-dim-light, #e3badb)' md-sys-color-on-tertiary-fixed: 'var(--md-sys-color-on-tertiary-fixed-light, #2c122a)' md-sys-color-on-tertiary-fixed-variant: 'var(--md-sys-color-on-tertiary-fixed-variant-light, #5b3d57)' md-sys-color-neutral-palette-key-color: 'var(--md-sys-color-neutral-palette-key-color-light, #76767d)' md-sys-color-neutral-variant-palette-key-color: 'var(--md-sys-color-neutral-variant-palette-key-color-light, #75767f)' md-sys-color-error: 'var(--md-sys-color-error-light, #ba1a1a)' md-sys-color-on-error: 'var(--md-sys-color-on-error-light, #ffffff)' md-sys-color-error-container: 'var(--md-sys-color-error-container-light, #ffdad6)' md-sys-color-on-error-container: 'var(--md-sys-color-on-error-container-light, #93000a)' md-sys-color-surface: 'var(--md-sys-color-surface-light, #faf8ff)' md-sys-color-on-surface: 'var(--md-sys-color-on-surface-light, #1a1b21)' md-sys-color-surface-variant: 'var(--md-sys-color-surface-variant-light, #e2e1ec)' md-sys-color-on-surface-variant: 'var(--md-sys-color-on-surface-variant-light, #45464f)' md-sys-color-surface-dim: 'var(--md-sys-color-surface-dim-light, #dad9e0)' md-sys-color-surface-bright: 'var(--md-sys-color-surface-bright-light, #faf8ff)' md-sys-color-surface-container-lowest: 'var(--md-sys-color-surface-container-lowest-light, #ffffff)' md-sys-color-surface-container-low: 'var(--md-sys-color-surface-container-low-light, #f4f3fa)' md-sys-color-surface-container: 'var(--md-sys-color-surface-container-light, #eeedf4)' md-sys-color-surface-container-high: 'var(--md-sys-color-surface-container-high-light, #e9e7ef)' md-sys-color-surface-container-highest: 'var(--md-sys-color-surface-container-highest-light, #e3e1e9)' md-sys-color-inverse-surface: 'var(--md-sys-color-inverse-surface-light, #2f3036)' md-sys-color-inverse-on-surface: 'var(--md-sys-color-inverse-on-surface-light, #f1f0f7)' md-sys-color-surface-tint: 'var(--md-sys-color-surface-tint-light, #4c5c92)' md-sys-color-outline: 'var(--md-sys-color-outline-light, #767680)' md-sys-color-outline-variant: 'var(--md-sys-color-outline-variant-light, #c6c6d0)' md-sys-color-shadow: 'var(--md-sys-color-shadow-light, #000000)' md-sys-color-scrim: 'var(--md-sys-color-scrim-light, #000000)' disabled-text-color: 'var(--disabled-text-color-light, #808080)' disabled-color: 'var(--disabled-color-light, #a5a5a5)' state-inactive-color: 'var(--state-inactive-color-light, #9e9e9e)' primary-color: var(--md-sys-color-primary) accent-color: var(--md-sys-color-secondary) state-icon-color: var(--md-sys-color-on-surface-variant) primary-text-color: var(--md-sys-color-on-surface) secondary-text-color: var(--md-sys-color-on-surface-variant) label-badge-text-color: var(--md-sys-color-on-surface-variant) secondary-background-color: var(--md-sys-color-secondary-container) light-primary-color: hsl(from var(--md-sys-color-primary) h s calc(l + 20)) dark-primary-color: hsl(from var(--md-sys-color-primary) h s calc(l - 20)) darker-primary-color: hsl(from var(--md-sys-color-primary) h s calc(l - 40)) divider-color: var(--md-sys-color-outline-variant) scrollbar-thumb-color: '#2e3038' stroke-color: var(--md-sys-color-on-surface-variant) active-color: var(--md-sys-color-tertiary) track-color: var(--md-sys-color-inverse-primary) hover-color: var(--md-sys-color-primary) error-color: var(--md-sys-color-error) on-error-color: var(--md-sys-color-on-error) warning-color: 'var(--md-sys-color-warning, #ffa600)' success-color: 'var(--md-sys-color-success, #43a047)' info-color: 'var(--md-sys-color-info, #039be5)' red-color: 'var(--md-sys-color-red, #f44336)' pink-color: 'var(--md-sys-color-pink, #e91e63)' purple-color: 'var(--md-sys-color-purple, #926bc7)' deep-purple-color: 'var(--md-sys-color-deep-purple, #6e41ab)' indigo-color: 'var(--md-sys-color-indigo, #3f51b5)' blue-color: 'var(--md-sys-color-blue, #2196f3)' light-blue-color: 'var(--md-sys-color-light-blue, #03a9f4)' cyan-color: 'var(--md-sys-color-cyan, #00bcd4)' teal-color: 'var(--md-sys-color-teal, #009688)' green-color: 'var(--md-sys-color-green, #4caf50)' light-green-color: 'var(--md-sys-color-light-green, #8bc34a)' lime-color: 'var(--md-sys-color-lime, #cddc39)' yellow-color: 'var(--md-sys-color-yellow, #ffeb3b)' amber-color: 'var(--md-sys-color-amber, #ffc107)' orange-color: 'var(--md-sys-color-orange, #ff9800)' deep-orange-color: 'var(--md-sys-color-deep-orange, #ff6f22)' brown-color: 'var(--md-sys-color-brown, #795548)' light-grey-color: 'var(--md-sys-color-light-grey, #bdbdbd)' grey-color: 'var(--md-sys-color-grey, #9e9e9e)' dark-grey-color: 'var(--md-sys-color-dark-grey, #606060)' blue-grey-color: 'var(--md-sys-color-blue-grey, #607d8b)' ha-color-primary-05: 'var(--md-sys-color-primary-05, #000d36)' ha-color-primary-10: 'var(--md-sys-color-primary-10, #000d36)' ha-color-primary-20: 'var(--md-sys-color-primary-20, #1d2d5f)' ha-color-primary-30: 'var(--md-sys-color-primary-30, #354477)' ha-color-primary-40: 'var(--md-sys-color-primary-40, #4d5c90)' ha-color-primary-50: 'var(--md-sys-color-primary-50, #6675ab)' ha-color-primary-60: 'var(--md-sys-color-primary-60, #808ec6)' ha-color-primary-70: 'var(--md-sys-color-primary-70, #9aa9e2)' ha-color-primary-80: 'var(--md-sys-color-primary-80, #b5c4ff)' ha-color-primary-90: 'var(--md-sys-color-primary-90, #dce1ff)' ha-color-primary-95: 'var(--md-sys-color-primary-95, #dce1ff)' ha-color-neutral-05: 'var(--md-sys-color-neutral-05, #141414)' ha-color-neutral-10: 'var(--md-sys-color-neutral-10, #202020)' ha-color-neutral-20: 'var(--md-sys-color-neutral-20, #363636)' ha-color-neutral-30: 'var(--md-sys-color-neutral-30, #4a4a4a)' ha-color-neutral-40: 'var(--md-sys-color-neutral-40, #5e5e5e)' ha-color-neutral-50: 'var(--md-sys-color-neutral-50, #7a7a7a)' ha-color-neutral-60: 'var(--md-sys-color-neutral-60, #989898)' ha-color-neutral-70: 'var(--md-sys-color-neutral-70, #b1b1b1)' ha-color-neutral-80: 'var(--md-sys-color-neutral-80, #b1b1b1)' ha-color-neutral-90: 'var(--md-sys-color-neutral-90, #e6e6e6)' ha-color-neutral-95: 'var(--md-sys-color-neutral-95, #f3f3f3)' ha-color-orange-05: 'var(--md-sys-color-orange-05, #1d0d00)' ha-color-orange-10: 'var(--md-sys-color-orange-10, #2c1600)' ha-color-orange-20: 'var(--md-sys-color-orange-20, #4a2800)' ha-color-orange-30: 'var(--md-sys-color-orange-30, #693c00)' ha-color-orange-40: 'var(--md-sys-color-orange-40, #8b5000)' ha-color-orange-50: 'var(--md-sys-color-orange-50, #ae6600)' ha-color-orange-60: 'var(--md-sys-color-orange-60, #d27c00)' ha-color-orange-70: 'var(--md-sys-color-orange-70, #f79300)' ha-color-orange-80: 'var(--md-sys-color-orange-80, #ffb870)' ha-color-orange-90: 'var(--md-sys-color-orange-90, #ffdcbe)' ha-color-orange-95: 'var(--md-sys-color-orange-95, #ffeee1)' ha-color-red-05: 'var(--md-sys-color-red-05, #2d0000)' ha-color-red-10: 'var(--md-sys-color-red-10, #410001)' ha-color-red-20: 'var(--md-sys-color-red-20, #690002)' ha-color-red-30: 'var(--md-sys-color-red-30, #930005)' ha-color-red-40: 'var(--md-sys-color-red-40, #bb1614)' ha-color-red-50: 'var(--md-sys-color-red-50, #e0342a)' ha-color-red-60: 'var(--md-sys-color-red-60, #ff5545)' ha-color-red-70: 'var(--md-sys-color-red-70, #ff8a7b)' ha-color-red-80: 'var(--md-sys-color-red-80, #ffb4a9)' ha-color-red-90: 'var(--md-sys-color-red-90, #ffdad5)' ha-color-red-95: 'var(--md-sys-color-red-95, #ffedea)' ha-color-green-05: 'var(--md-sys-color-green-05, #001502)' ha-color-green-10: 'var(--md-sys-color-green-10, #002204)' ha-color-green-20: 'var(--md-sys-color-green-20, #00390a)' ha-color-green-30: 'var(--md-sys-color-green-30, #005313)' ha-color-green-40: 'var(--md-sys-color-green-40, #006e1c)' ha-color-green-50: 'var(--md-sys-color-green-50, #22892f)' ha-color-green-60: 'var(--md-sys-color-green-60, #41a447)' ha-color-green-70: 'var(--md-sys-color-green-70, #5dc05e)' ha-color-green-80: 'var(--md-sys-color-green-80, #78dc77)' ha-color-green-90: 'var(--md-sys-color-green-90, #94f990)' ha-color-green-95: 'var(--md-sys-color-green-95, #c8ffc0)' energy-grid-consumption-color: 'var(--md-sys-color-energy-grid-consumption, #488fc2)' energy-grid-return-color: 'var(--md-sys-color-energy-grid-return, #8353d1)' energy-solar-color: 'var(--md-sys-color-energy-solar, #ff9800)' energy-non-fossil-color: 'var(--md-sys-color-energy-non-fossil, #0f9d58)' energy-battery-out-color: 'var(--md-sys-color-energy-battery-out, #4db6ac)' energy-battery-in-color: 'var(--md-sys-color-energy-battery-in, #f06292)' energy-gas-color: 'var(--md-sys-color-energy-gas, #8e021b)' energy-water-color: 'var(--md-sys-color-energy-water, #00bcd4)' primary-background-color: var(--md-sys-color-surface-container) card-background-color: var(--md-sys-color-surface-container-low) ha-card-background: var(--md-sys-color-surface-container-low) ha-card-border-radius: var(--md-sys-shape-corner-extra-large) ha-card-box-shadow: var(--md-sys-elevation-level1) ha-card-border-color: '#00000000' ha-card-border-width: 0px ha-card-border-style: none ha-card-border: none ha-config-card-border-radius: var(--md-sys-shape-corner-large) lovelace-background: var(--md-sys-color-surface) view-background: var(--md-sys-color-surface) app-header-background-color: var(--md-sys-color-surface) margin-title-ltr: 0 margin-title-rtl: 0 sidebar-selected-text-color: var(--md-sys-color-secondary) sidebar-selected-icon-color: var(--md-sys-color-on-secondary-container) sidebar-selected-background: var(--md-sys-color-secondary-container) sidebar-icon-color: var(--md-sys-color-on-surface-variant) sidebar-text-color: var(--md-sys-color-on-surface-variant) sidebar-menu-button-text-color: var(--md-sys-color-on-surface-variant) sidebar-state-pressed-background: var(--md-sys-color-on-secondary-container) sidebar-background-color: var(--md-sys-color-surface-container) md-list-item-hover-state-layer-color: var(--md-sys-color-on-surface) md-list-item-pressed-state-layer-color: var(--md-sys-color-on-secondary-container) md-list-item-hover-state-layer-opacity: 0.08 md-list-item-pressed-state-layer-opacity: 0.1 app-header-text-color: var(--md-sys-color-on-surface) app-header-edit-text-color: var(--md-sys-color-on-surface-variant) ha-dialog-surface-background: var(--md-sys-color-surface-container-high) ha-dialog-border-radius: var(--md-sys-shape-corner-extra-large) mdc-dialog-scrim-color: rgba(from var(--md-sys-color-scrim) r g b / 0.32) dialog-content-overflow: hidden auto md-dialog-container-color: var(--md-sys-color-surface-container-high) md-dialog-headline-size: var(--md-sys-typescale-headline-small-size) md-dialog-headline-weight: var(--md-sys-typescale-headline-small-weight) md-dialog-headline-line-height: var(--md-sys-typescale-headline-small-line-height) md-dialog-headline-tracking: var(--md-sys-typescale-headline-small-tracking) md-dialog-supporting-text-size: var(--md-sys-typescale-body-medium-size) md-dialog-supporting-text-weight: var(--md-sys-typescale-body-medium-weight) md-dialog-supporting-text-line-height: var(--md-sys-typescale-body-medium-line-height) md-dialog-supporting-text-tracking: var(--md-sys-typescale-body-medium-tracking) mdc-theme-primary: var(--md-sys-color-primary) mdc-theme-secondary: var(--md-sys-color-secondary) mdc-theme-surface: var(--md-sys-color-surface-container) mdc-theme-on-primary: var(--md-sys-color-on-primary) mdc-theme-on-secondary: var(--md-sys-color-on-secondary) mdc-theme-on-surface: var(--md-sys-color-on-surface) mdc-theme-error: var(--md-sys-color-error) md-divider-color: var(--md-sys-color-outline-variant) md-switch-checked-button-color: var(--md-sys-color-on-primary) md-switch-unchecked-button-color: var(--md-sys-color-outline) md-switch-checked-track-color: var(--md-sys-color-primary) md-switch-unchecked-track-color: var(--md-sys-color-surface-container-highest) md-switch-checked-icon-color: var(--md-sys-color-on-primary-container) md-switch-unchecked-icon-color: var(--md-sys-color-surface-container-highest) md-switch-checked-button-state-layer: var(--md-sys-color-primary-container) md-switch-unchecked-button-state-layer: var(--md-sys-color-on-surface-variant) md-switch-unchecked-track-state-layer: var(--md-sys-color-on-surface) switch-checked-button-color: var(--md-switch-checked-button-color) switch-unchecked-button-color: var(--md-switch-unchecked-button-color) switch-checked-track-color: var(--md-switch-checked-track-color) switch-unchecked-track-color: var(--md-switch-unchecked-track-color) switch-checked-icon-color: var(--md-switch-checked-icon-color) switch-unchecked-icon-color: var(--md-switch-unchecked-icon-color) switch-checked-button-state-layer: var(--md-switch-checked-button-state-layer) switch-unchecked-button-state-layer: var(--md-switch-unchecked-button-state-layer) switch-unchecked-track-state-layer: var(--md-switch-unchecked-track-state-layer) checkbox-checked-border-color: var(--md-sys-color-primary) checkbox-checked-icon-color: var(--md-sys-color-on-primary) checkbox-unchecked-border-color: var(--md-sys-color-on-surface-variant) checkbox-unchecked-icon-color: var(--md-sys-color-on-surface) mdc-checkbox-checked-color: var(--checkbox-checked-border-color) mdc-checkbox-ink-color: var(--checkbox-checked-icon-color) mdc-checkbox-unchecked-color: var(--checkbox-unchecked-border-color) mdc-radio-unchecked-color: var(--md-sys-color-on-surface-variant) slider-color: var(--md-sys-color-inverse-primary) slider-secondary-color: var(--md-sys-color-primary) md-slider-handle-color: var(--md-sys-color-surface-container-low) md-slider-handle-shadow-color: transparent md-slider-hover-handle-color: var(--md-sys-color-surface-container-low) md-slider-hover-state-layer-color: transparent md-slider-hover-state-layer-opacity: 0 md-slider-pressed-handle-color: var(--md-sys-color-surface-container-low) md-slider-pressed-state-layer-color: transparent md-slider-pressed-state-layer-opacity: 0 md-slider-focus-handle-color: var(--md-sys-color-surface-container-low) md-slider-active-track-height: 24px md-slider-inactive-track-height: 24px md-slider-active-track-shape: 8px md-slider-inactive-track-shape: 8px md-slider-active-track-color: var(--md-sys-color-primary) md-slider-inactive-track-color: var(--md-sys-color-secondary-container) md-slider-label-text-color: var(--md-sys-color-inverse-on-surface) md-slider-label-container-color: var(--md-sys-color-inverse-surface) md-slider-label-container-height: 44px md-slider-label-container-width: 48px md-slider-with-tick-marks-container-size: 4px md-slider-with-tick-marks-active-container-color: var(--md-sys-color-on-primary) md-slider-with-tick-marks-inactive-container-color: var(--md-sys-color-on-secondary-container) md-slider-disabled-handle-color: var(--md-sys-color-surface-container-low) button-height: 40px ha-button-height: 40px ha-button-border-radius: calc(var(--ha-button-height)) mdc-button-disabled-fill-color: rgba(from var(--md-sys-color-on-surface) r g b / 0.12) mdc-button-disabled-ink-color: rgba(from var(--md-sys-color-on-surface) r g b / 0.38) mdc-typography-button-font-size: var(--md-sys-typescale-label-large-size) mdc-typography-button-line-height: var(--md-sys-typescale-label-large-line-height) mdc-typography-button-letter-spacing: var(--md-sys-typescale-label-large-tracking) mdc-typography-button-font-weight: var(--md-sys-typescale-label-large-weight) mdc-typography-button-text-transform: capitalize mdc-button-horizontal-padding: 12px mdc-button-outline-color: var(--md-sys-color-outline) mdc-fab-box-shadow: var(--md-sys-elevation-level3) mdc-fab-extended-label-padding: 16px mdc-shape-small: var(--md-sys-shape-corner-small) mdc-shape-medium: var(--md-sys-shape-corner-medium) mdc-shape-large: var(--md-sys-shape-corner-large) ha-assist-chip-container-shape: var(--md-sys-shape-corner-small) ha-assist-chip-filled-container-color: var(--md-sys-color-secondary-container) md-assist-chip-outline-color: var(--md-sys-color-outline-variant) md-assist-chip-leading-icon-color: var(--md-sys-color-on-secondary-container) md-assist-chip-label-text-color: var(--md-sys-color-on-secondary-container) md-assist-chip-hover-state-layer-color: var(--md-sys-color-on-secondary-container) md-assist-chip-pressed-state-layer-color: var(--md-sys-color-on-surface-variant) hacs-default-icon-color: var(--md-sys-color-primary) md-input-chip-outline-color: var(--md-sys-color-outline-variant) md-input-chip-focus-outline-color: var(--md-sys-color-on-surface-variant) md-input-chip-disabled-outline-color: var(--md-sys-color-on-surface) md-input-chip-disabled-outline-opacity: 0.12 md-input-chip-selected-outline-width: 0px md-input-chip-disabled-selected-container-color: var(--md-sys-color-on-surface) md-input-chip-disabled-selected-container-opacity: 0.12 md-input-chip-label-text-size: var(--md-sys-typescale-label-large-size) md-input-chip-label-text-weight: var(--md-sys-typescale-label-large-weight) md-input-chip-label-text-line-height: var(--md-sys-typescale-label-large-line-height) md-input-chip-label-text-tracking: var(--md-sys-typescale-label-large-tracking) md-input-chip-label-text-color: var(--md-sys-color-on-surface-variant) md-input-chip-disabled-label-text-color: var(--md-sys-color-on-surface) md-input-chip-disabled-label-text-opacity: 0.38 md-input-chip-selected-label-text-color: var(--md-sys-color-on-secondary-container) md-input-chip-icon-size: 18px md-input-chip-leading-icon-color: var(--md-sys-color-on-surface-variant) md-input-chip-hover-leading-icon-color: var(--md-sys-color-primary) md-input-chip-focus-leading-icon-color: var(--md-sys-color-primary) md-input-chip-pressed-leading-icon-color: var(--md-sys-color-primary) md-input-chip-selected-leading-icon-color: var(--md-sys-color-primary) md-input-chip-disabled-leading-icon-color: var(--md-sys-color-on-surface) md-input-chip-disabled-leading-icon-opacity: 0.38 md-input-chip-trailing-icon-color: var(--md-sys-color-on-surface-variant) md-input-chip-selected-trailing-icon-color: var(--md-sys-color-on-secondary-container) md-input-chip-disabled-trailing-icon-color: var(--md-sys-color-on-surface) md-input-chip-disabled-trailing-icon-opacity: 0.38 md-input-chip-disabled-avatar-opacity: 0.38 md-input-chip-hover-state-layer-color: var(--md-sys-color-on-surface-variant) md-input-chip-hover-state-layer-opacity: 0.08 md-input-chip-selected-hover-state-layer-color: var(--md-sys-color-on-secondary-container) md-input-chip-selected-hover-state-layer-opacity: 0.08 md-input-chip-pressed-state-layer-color: var(--md-sys-color-on-surface-variant) md-input-chip-pressed-state-layer-opacity: 0.1 md-input-chip-selected-pressed-state-layer-color: var(--md-sys-color-on-secondary-container) md-input-chip-selected-pressed-state-layer-opacity: 0.1 horizontal-stack-card-margin: 0px 4px vertical-stack-card-margin: 4px 0px ha-view-sections-row-gap: 18px header-height: 64px footer-height: 64px mdc-top-app-bar-fixed-box-shadow: none app-header-edit-background-color: var(--md-sys-color-surface-container) app-header-selection-bar-color: none navbar-background: var(--md-sys-color-surface-container) font-family: >- Figtree, "Google Sans", "Roboto Flex", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" primary-font-family: var(--font-family) ha-card-header-font-family: var(--font-family) mdc-typography-font-family: var(--font-family) mdc-typography-button-font-family: var(--font-family) mdc-typography-headline6-font-family: var(--font-family) mdc-typography-body1-font-family: var(--font-family) mdc-typography-subtitle1-font-family: var(--font-family) md-ref-typeface-plain: var(--font-family) ha-card-header-font-size: var(--md-sys-typescale-headline-small-size) ha-heading-card-title-font-size: var(--md-sys-typescale-title-medium-size) ha-heading-card-title-font-weight: var(--md-sys-typescale-title-medium-weight) ha-heading-card-title-line-height: var(--md-sys-typescale-title-medium-line-height) ha-heading-card-subtitle-font-size: var(--md-sys-typescale-title-small-size) ha-heading-card-subtitle-font-weight: var(--md-sys-typescale-title-small-weight) ha-heading-card-subtitle-line-height: var(--md-sys-typescale-title-small-line-height) ha-font-family-body: var(--font-family) ha-font-family-heading: var(--font-family) ha-font-family-code: var(--font-family) ha-font-family-longform: var(--font-family) text-primary-color: var(--md-sys-color-surface) text-light-primary-color: hsl(from var(--md-sys-color-surface) h s calc(l + 20)) text-accent-color: var(--md-sys-color-on-secondary) link-text-color: var(--md-sys-color-primary) mdc-theme-background: var(--md-sys-color-surface) mdc-theme-text-disabled-on-light: var(--disabled-text-color) mdc-theme-text-primary-on-background: var(--md-sys-color-on-surface) mdc-theme-text-secondary-on-background: var(--md-sys-color-on-surface-variant) mdc-theme-text-hint-on-background: var(--md-sys-color-on-surface-variant) mdc-theme-text-icon-on-background: var(--md-sys-color-on-surface-variant) input-background-color: var(--md-sys-color-surface-container-highest) input-fill-color: var(--md-sys-color-surface-container-highest) input-ink-color: var(--md-sys-color-on-surface) input-label-ink-color: var(--md-sys-color-on-surface-variant) input-disabled-fill-color: rgba(from var(--md-sys-color-surface-container-highest) r g b / 0.5) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) input-idle-line-color: var(--md-sys-color-on-surface-variant) input-hover-line-color: var(--md-sys-color-primary) input-dropdown-icon-color: var(--md-sys-color-on-surface-variant) mdc-select-fill-color: var(--md-sys-color-surface-container-highest) mdc-select-ink-color: var(--md-sys-color-on-surface) mdc-select-label-ink-color: var(--md-sys-color-on-surface-variant) mdc-select-idle-line-color: var(--md-sys-color-on-surface-variant) mdc-select-hover-line-color: var(--md-sys-color-primary) mdc-select-dropdown-icon-color: var(--md-sys-color-on-surface-variant) mdc-text-field-ink-color: var(--md-sys-color-on-surface) mdc-text-field-label-ink-color: var(--md-sys-color-on-surface-variant) mdc-text-field-fill-color: var(--md-sys-color-surface-container-highest) mdc-text-field-idle-line-color: var(--md-sys-color-on-surface-variant) mdc-text-field-hover-line-color: var(--md-sys-color-primary) md-menu-container-color: var(--md-sys-color-surface-container) md-menu-item-label-text-size: var(--md-sys-typescale-body-large-size) md-menu-item-label-text-line-height: var(--md-sys-typescale-body-large-line-height) md-menu-item-label-text-weight: var(--md-sys-typescale-body-large-weight) mdc-list-item-graphic-margin: 16px mdc-menu-item-height: 56px code-editor-background-color: var(--md-sys-color-surface-container) codemirror-meta: var(--md-sys-color-on-surface) codemirror-property: var(--md-sys-color-primary) codemirror-atom: var(--md-sys-color-primary) bubble-accent-color: var(--md-sys-color-inverse-primary) bubble-select-arrow-background-color: var(--md-sys-color-inverse-primary) bubble-select-list-item-accent-color: var(--md-sys-color-secondary-container) bubble-sub-button-light-background-color: var(--md-sys-color-secondary-container) bubble-main-background-color: var(--md-sys-color-surface-container-highest) bubble-pop-up-main-background-color: var(--md-sys-color-surface-container-low) bubble-pop-up-border-radius: var(--md-sys-shape-corner-extra-large) version: 5.0.1