material-inspired-component-library/dist/timepicker.css

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.

: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 !important}.micl-no-transition{transition:none !important}.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-sys-timepicker-input-height: 72px;--md-sys-timepicker-input-width: 96px;--md-sys-timepicker-input-width-24h: 114px;--md-sys-timepicker-separator-width: 24px;--md-sys-timepicker-period-height: 72px;--md-sys-timepicker-period-width: 52px;--md-sys-timepicker-dial-size: 256px;--md-sys-timepicker-dial-center-size: 8px;--md-sys-timepicker-dial-track-width: 2px}dialog.micl-dialog.micl-timepicker{--md-sys-timepicker-motion-duration: 350ms}dialog.micl-dialog.micl-timepicker .micl-dialog__headline{padding-block-end:20px}dialog.micl-dialog.micl-timepicker .micl-dialog__headline h2{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);color:var(--md-sys-color-on-surface-variant)}dialog.micl-dialog.micl-timepicker .micl-dialog__content{display:grid;padding-block-start:1px;grid-template-areas:"timepicker-hour timepicker-separator timepicker-minute timepicker-period" "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting" "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";grid-template-columns:auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto}dialog.micl-dialog.micl-timepicker .micl-dialog__actions:has(.micl-timepicker__inputmode){justify-content:space-between}dialog.micl-dialog.micl-timepicker .micl-dialog__actions .micl-timepicker__inputmode{margin-inline-start:-8px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)){--md-sys-timepicker-input-height: 80px;--md-sys-timepicker-period-height: 80px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal{--md-sys-timepicker-period-height: 38px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__headline{padding-block-end:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content{grid-template-areas:"timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial" "timepicker-hour timepicker-separator timepicker-minute timepicker-dial" "timepicker-period timepicker-period timepicker-period timepicker-dial";grid-template-rows:72px var(--md-sys-timepicker-input-height) auto}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period{--md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);--md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));display:flex;align-self:flex-start;margin-inline:0;margin-block:16px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__am{border-start-end-radius:0;border-end-start-radius:var(--md-sys-shape-corner-small)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__pm{border-block-start-width:1px;border-inline-start-width:0px;border-start-end-radius:var(--md-sys-shape-corner-small);border-end-start-radius:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__dial{margin-block:0;margin-inline:40px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-minute{display:none}.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{--statelayer-color: var(--md-sys-color-on-surface);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);box-sizing:border-box;inline-size:var(--md-sys-timepicker-input-width);block-size:var(--md-sys-timepicker-input-height);margin:0;padding:0;border:none;outline:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface-container-highest);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;color:var(--md-sys-color-on-surface);text-align:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-appearance:textfield;transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker input[name=hour]::-webkit-inner-spin-button,.micl-timepicker input[name=hour]::-webkit-outer-spin-button,.micl-timepicker input[name=minute]::-webkit-inner-spin-button,.micl-timepicker input[name=minute]::-webkit-outer-spin-button{-webkit-appearance:none}.micl-timepicker input[name=hour]::selection,.micl-timepicker input[name=minute]::selection{background-color:rgba(0,0,0,0)}.micl-timepicker input[name=hour].micl-timepicker--selected,.micl-timepicker input[name=minute].micl-timepicker--selected{--statelayer-color: var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border:2px solid var(--md-sys-color-primary)}.micl-timepicker input[name=hour]:hover,.micl-timepicker input[name=minute]:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker input[name=hour]:focus-visible,.micl-timepicker input[name=minute]:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]:active,.micl-timepicker input[name=minute]:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]{grid-area:timepicker-hour;justify-self:flex-end}.micl-timepicker input[name=minute]{grid-area:timepicker-minute}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=hour],.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=minute]{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);border:none;cursor:pointer}.micl-timepicker:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))){--md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h)}.micl-timepicker__separator{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);grid-area:timepicker-separator;block-size:var(--md-sys-timepicker-input-height);line-height:var(--md-sys-timepicker-input-height);inline-size:var(--md-sys-timepicker-separator-width);text-align:center;color:var(--md-sys-color-on-surface)}.micl-timepicker__period{--md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);grid-area:timepicker-period;block-size:var(--md-sys-timepicker-period-height);inline-size:0}.micl-timepicker__period:has(.micl-timepicker__am){inline-size:var(--md-sys-timepicker-period-width);margin-inline:12px 0}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm{--statelayer-color: var(--md-sys-color-on-surface-variant);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);appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;inline-size:var(--md-sys-timepicker-period-width);block-size:var(--md-sys-timepicker-ampm-height);min-block-size:var(--md-sys-timepicker-ampm-height);margin:0;border:1px solid var(--md-sys-color-outline);outline:none;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker__period .micl-timepicker__am::before,.micl-timepicker__period .micl-timepicker__pm::before{content:"AM";position:absolute;inline-size:100%;text-align:center}.micl-timepicker__period .micl-timepicker__am:checked,.micl-timepicker__period .micl-timepicker__pm:checked{color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover:checked,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked,.micl-timepicker__period .micl-timepicker__am:active:checked,.micl-timepicker__period .micl-timepicker__pm:hover:checked,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked,.micl-timepicker__period .micl-timepicker__pm:active:checked{--statelayer-color: var(--md-sys-color-on-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover::after,.micl-timepicker__period .micl-timepicker__am:focus-visible::after,.micl-timepicker__period .micl-timepicker__am:active::after,.micl-timepicker__period .micl-timepicker__pm:hover::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible::after,.micl-timepicker__period .micl-timepicker__pm:active::after{border-color:var(--md-sys-color-on-surface)}.micl-timepicker__period .micl-timepicker__am:hover:checked::after,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__am:active:checked::after,.micl-timepicker__period .micl-timepicker__pm:hover:checked::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__pm:active:checked::after{border-color:var(--md-sys-color-primary)}.micl-timepicker__period .micl-timepicker__am:hover,.micl-timepicker__period .micl-timepicker__pm:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:-2px}.micl-timepicker__period .micl-timepicker__am:active,.micl-timepicker__period .micl-timepicker__pm:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker__period .micl-timepicker__am{border-start-start-radius:var(--md-sys-shape-corner-small);border-start-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm{border-block-start-width:0px;border-end-start-radius:var(--md-sys-shape-corner-small);border-end-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm::before{content:"PM"}.micl-timepicker__supporting-text-hour,.micl-timepicker__supporting-text-minute{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);grid-area:timepicker-hour-supporting;padding-block:4px 0;color:var(--md-sys-color-on-surface-variant)}.micl-timepicker__supporting-text-minute{grid-area:timepicker-minute-supporting}.micl-timepicker .micl-timepicker__dial{--micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);--micl-hour-radius: var(--micl-dial-radius);--micl-angle: 0deg;position:relative;grid-area:timepicker-dial;justify-self:center;block-size:var(--md-sys-timepicker-dial-size, 256px);inline-size:var(--md-sys-timepicker-dial-size, 256px);margin-block:36px 0;margin-inline:0;outline:none;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-surface-container-highest);list-style-type:none;touch-action:none}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner{--micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);z-index:2}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner::before{z-index:2}.micl-timepicker .micl-timepicker__dial data{--micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));--micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));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);position:absolute;display:grid;place-content:center;block-size:var(--md-sys-target-size, 48px);inline-size:var(--md-sys-target-size, 48px);inset-inline-start:var(--micl-a);inset-block-start:var(--micl-b);outline:none;border-radius:var(--md-sys-shape-corner-full);color:var(--md-sys-color-on-surface);cursor:pointer;z-index:1;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__time--selected{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.micl-timepicker .micl-timepicker__dial data::before{content:"";position:absolute;block-size:var(--md-sys-target-size, 48px);inline-size:calc(2*var(--md-sys-target-size, 48px));inset-inline-start:0;inset-block-end:0;transform:rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));transform-origin:calc(var(--md-sys-target-size, 48px)/2) center;z-index:1}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track{--micl-track-length: 92px;position:relative;display:block;inline-size:var(--md-sys-timepicker-dial-track-width, 2px);block-size:var(--micl-track-length);inset-inline-start:calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px))/2);inset-block-start:calc(var(--md-sys-timepicker-dial-size, 256px)/2 - var(--micl-track-length));border-radius:calc(var(--md-sys-timepicker-dial-track-width, 2px)*2);background-color:var(--md-sys-color-primary);transform:rotate(calc(90deg + var(--micl-angle)));transform-origin:bottom}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track::before{content:"";position:absolute;display:block;block-size:var(--md-sys-timepicker-dial-center-size, 8px);inline-size:var(--md-sys-timepicker-dial-center-size, 8px);inset-block-end:-3px;inset-inline-start:-3px;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-primary)}