material-inspired-component-library
Version:
The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.
2 lines (1 loc) • 43.2 kB
CSS
:root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none }.micl-no-transition{transition:none }.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-iconfield{box-sizing:border-box;display:grid;grid-template-columns:48px 1fr;row-gap:var(--md-sys-padding-xl, 24px);background-color:inherit}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--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-motion-path: linear}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-extra-small-top: 4px 4px 0 0;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--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-top: 16px 16px 0 0;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-top: 28px 28px 0 0;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-disabled-state-layer-opacity: 38%;--md-sys-state-backdrop-opacity: 32%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0;--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem;--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}:root{--md-comp-date-picker-docked-container-width: 360px;--md-comp-date-picker-modal-container-width: 360px;--md-comp-date-input-modal-container-width: 328px}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input{block-size:fit-content;opacity:1;transition-duration:var(--md-comp-date-picker-motion-spatial-duration)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__view-hidden.micl-datepicker__months,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__view-hidden.micl-datepicker__years,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__view-hidden.micl-datepicker__input{block-size:0;opacity:0;transition-property:none}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months:not(.micl-datepicker__view-hidden),dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years:not(.micl-datepicker__view-hidden),dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input:not(.micl-datepicker__view-hidden){transition-behavior:allow-discrete;transition-property:opacity,display,block-size;transition-timing-function:linear}dialog.micl-dialog.micl-datepicker{--md-comp-date-picker-motion-spatial: cubic-bezier(0.31, 0.94, 0.34, 1);--md-comp-date-picker-motion-spatial-duration: 500ms;--md-comp-date-picker-motion-duration: 200ms;--md-comp-date-picker-motion-duration-reverse: 150ms;--md-comp-date-picker-button-motion-duration: 350ms;inline-size:var(--md-comp-date-picker-modal-container-width, 360px)}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)){inline-size:var(--md-comp-date-input-modal-container-width, 328px)}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) .micl-divider{margin-block:9.5px}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) .micl-dialog__content{min-block-size:85px}dialog.micl-dialog.micl-datepicker form{background-color:inherit}dialog.micl-dialog.micl-datepicker .micl-dialog__headline{display:grid;gap:0;grid-template-columns:max-content 1fr var(--md-sys-target-size, 48px);grid-template-areas:"datepicker-supporting datepicker-supporting datepicker-supporting" "datepicker-close datepicker-action datepicker-action" "datepicker-close datepicker-headline datepicker-mode" "datepicker-divider datepicker-divider datepicker-divider" "datepicker-year-selector datepicker-year-selector datepicker-month-selector";padding-inline-end:12px;padding-block:16px 4px}dialog.micl-dialog.micl-datepicker .micl-dialog__headline h1,dialog.micl-dialog.micl-datepicker .micl-dialog__headline h2,dialog.micl-dialog.micl-datepicker .micl-dialog__headline h3,dialog.micl-dialog.micl-datepicker .micl-dialog__headline h4,dialog.micl-dialog.micl-datepicker .micl-dialog__headline h5,dialog.micl-dialog.micl-datepicker .micl-dialog__headline h6,dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-heading{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking);grid-area:datepicker-headline;margin-block-start:36px;color:var(--md-sys-color-on-surface-variant)}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-dialog__supporting-text{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking);grid-area:datepicker-supporting}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__inputmode{grid-area:datepicker-mode;align-self:flex-end;justify-self:center}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-divider{grid-area:datepicker-divider;inline-size:calc(100% + 36px);margin-block-start:11.5px;margin-inline:-24px}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month-selector,dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year-selector{display:grid;grid-template-rows:var(--md-sys-target-size, 48px);align-items:center}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month-selector.micl-datepicker__view-hidden,dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year-selector.micl-datepicker__view-hidden{display:none}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month-selector{grid-area:datepicker-month-selector;grid-template-areas:"datepicker-month-previous datepicker-month-next";grid-template-columns:var(--md-sys-target-size, 48px) var(--md-sys-target-size, 48px);justify-items:flex-end;justify-content:flex-end}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month-selector .micl-datepicker__previous{grid-area:datepicker-month-previous}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month-selector .micl-datepicker__next{grid-area:datepicker-month-next}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year-selector{grid-area:datepicker-year-selector;grid-template-areas:"datepicker-year";grid-template-columns:1fr;justify-items:flex-start;margin-inline-start:-8px}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year-selector .micl-datepicker__previous{display:none;grid-area:datepicker-year-previous}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year-selector .micl-datepicker__next{display:none;grid-area:datepicker-year-next}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month{display:none;grid-area:datepicker-month;margin-inline:-12px auto}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year{grid-area:datepicker-year}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__month:not(:disabled),dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-datepicker__year:not(:disabled){color:var(--md-sys-color-on-surface-variant)}dialog.micl-dialog.micl-datepicker .micl-dialog__content{display:grid;grid-template-areas:"datepicker-view";position:relative;inline-size:100%;max-block-size:336px;min-block-size:330px;padding-inline:0;overflow:hidden auto;transition:min-block-size var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars{display:flex;grid-area:datepicker-view;position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:200%;opacity:1;overflow:hidden;transform:translateX(0);transition:transform var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial),opacity var(--md-comp-date-picker-motion-duration-reverse) linear,block-size var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete,display var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars.micl-datepicker__view-hidden{block-size:0%;opacity:0;transition-property:none}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars.micl-startleft,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars.micl-moveright{transform:translateX(0%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars.micl-startright,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars.micl-moveleft{transform:translateX(-50%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar{flex-shrink:0;block-size:100%;inline-size:50%}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;display:grid;grid-template-columns:repeat(7, var(--md-sys-target-size, 48px));grid-template-rows:40px repeat(6, var(--md-sys-target-size, 48px));block-size:100%;inline-size:100%;padding-inline:12px}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner span,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time{box-sizing:border-box;display:inline-flex;justify-content:center;border:none;color:var(--md-sys-color-on-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time{--statelayer-color: var(--md-sys-color-on-surface-variant);--statelayer-opacity: 0%;align-items:center;border:4px solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;background-clip:content-box;transition:--statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__today{outline:1px solid var(--md-sys-color-primary);outline-offset:-5px;color:var(--md-sys-color-primary)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__today:hover,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__today:focus-visible,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__today:active{--statelayer-color: var(--md-sys-color-primary)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__selected{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__selected:hover,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__selected:focus-visible,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__selected:active{--statelayer-color: var(--md-sys-color-on-primary)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time.micl-datepicker__outside{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time:not(.micl-datepicker__outside){cursor:pointer}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__calendars .micl-datepicker__calendar .micl-datepicker__calendar-inner time:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input{grid-area:datepicker-view}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months{overflow-y:hidden}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months .micl-datepicker__months-inner{block-size:auto;inline-size:100%}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months label{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:flex;align-items:center;block-size:var(--md-sys-target-size, 48px);gap:8px;padding-inline-start:16px;color:var(--md-sys-color-on-surface);cursor:pointer}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months label input[type=radio]{appearance:none;margin:0}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months label span{visibility:hidden;color:var(--md-sys-color-on-surface)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months label:has(input:checked){background-color:var(--md-sys-color-surface-variant)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__months label:has(input:checked) span{visibility:visible}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years{overflow-y:hidden}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years .micl-datepicker__years-inner{display:flex;flex-wrap:wrap;justify-content:center;block-size:auto;inline-size:100%}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label{--statelayer-color: var(--md-sys-color-on-surface-variant);--statelayer-opacity: 0%;font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:inline-flex;align-items:center;justify-content:center;block-size:36px;inline-size:72px;margin:8px;border:calc((var(--md-sys-target-size, 48px) - 36px)/2) solid rgba(0,0,0,0);border-radius:calc(var(--md-sys-target-size, 48px)/2);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;background-clip:content-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:--statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:has(input:checked){color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:has(input:checked):hover,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:has(input:checked):focus-visible,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label:has(input:checked):active{--statelayer-color: var(--md-sys-color-on-primary)}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__years label input[type=radio]{appearance:none;margin:0}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input{padding-inline:16px;margin-block-end:16px}dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input.micl-datepicker__view-hidden,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input input[type=date]::-webkit-calendar-picker-indicator,dialog.micl-dialog.micl-datepicker .micl-dialog__content .micl-datepicker__input input[type=date]::-webkit-inner-spin-button{display:none}dialog.micl-dialog.micl-datepicker .micl-dialog__actions{padding:8px 12px 12px 12px}dialog.micl-dialog.micl-datepicker.micl-dialog--docked{inline-size:var(--md-comp-date-picker-docked-container-width, 360px);border-radius:var(--md-sys-shape-corner-large)}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline{grid-template-areas:"datepicker-month-selector datepicker-year-selector";grid-template-columns:1fr 1fr;padding:8px 12px 18px 12px}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline h1,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline h2,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline h3,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline h4,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline h5,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline h6,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-heading,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-dialog__supporting-text,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__inputmode{display:none}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__month-selector{grid-template-areas:"datepicker-month-previous datepicker-month datepicker-month-next";grid-template-columns:var(--md-sys-target-size, 48px) 1fr var(--md-sys-target-size, 48px)}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__month-selector .micl-datepicker__month{display:inline-flex;margin-inline:0}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__year-selector{grid-template-areas:"datepicker-year-previous datepicker-year datepicker-year-next";grid-template-columns:var(--md-sys-target-size, 48px) 1fr var(--md-sys-target-size, 48px)}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__year-selector .micl-datepicker__previous,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__year-selector .micl-datepicker__next{display:block}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__actions>button{margin-block:-2px}