@property --_time-angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --_time-radius{syntax: "<length>"; inherits: true; initial-value: 0px;}.md-time-demo{min-inline-size:0;max-inline-size:100%}.md-time-panel{--_elevation-level: var(--_time-elevation);--_shadow-color: var(--md-sys-color-shadow);box-sizing:border-box;padding:var(--md-sys-measurement-space300);inline-size:max-content;max-inline-size:calc(100dvw - 2 * var(--md-sys-measurement-space200));max-block-size:calc(100dvh - 2 * var(--md-sys-measurement-space200));border:0;border-radius:var(--_time-shape);background:var(--_time-container);color:var(--md-sys-color-on-surface);overflow:auto}.md-time-panel[data-time-inline]{position:relative;margin:0;max-inline-size:100%;max-block-size:none}.md-time-panel::backdrop{background:color-mix(in srgb,var(--md-comp-navigation-drawer-scrim-color) calc(var(--md-comp-navigation-drawer-scrim-opacity) * 100%),transparent)}.md-time-title{margin:0 0 var(--md-sys-measurement-space250);color:var(--_time-headline-color);font-family:var(--_time-headline-font-family);font-size:var(--_time-headline-font-size);font-weight:var(--_time-headline-font-weight);line-height:var(--_time-headline-line-height);letter-spacing:var(--_time-headline-tracking)}.md-time-body{display:flex;flex-direction:column;align-items:center;gap:var(--md-sys-measurement-space450)}.md-time-selectors{display:flex;align-items:flex-start;direction:ltr}.md-time-hour,.md-time-minute{flex:none;inline-size:var(--_time-value-width)}.md-time-separator{display:grid;place-items:center;flex:none;inline-size:var(--md-sys-measurement-space300);block-size:var(--_time-value-height);color:var(--_time-separator-color);font-family:var(--_time-separator-font-family);font-size:var(--_time-separator-font-size);font-weight:var(--_time-separator-font-weight);line-height:var(--_time-separator-line-height);letter-spacing:var(--_time-separator-tracking)}.md-time-value,.md-time-period{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;padding:0;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.md-time-value{--_button-rest-shape: var(--_time-value-shape);--_button-pressed-shape: var(--_time-value-shape);--_button-background-state-color: var( --_time-value-background-state-color, transparent );--_button-background-state-opacity: var( --_time-value-background-state-opacity, 0 );--_button-state-color: var(--_time-value-state-color);--_button-state-opacity: var(--_time-value-state-opacity);--_button-pressed-state-color: var(--_time-value-pressed-state-color);--_button-pressed-state-opacity: var(--_time-value-pressed-state-opacity);inline-size:var(--_time-value-width);block-size:var(--_time-value-height);border-radius:var(--_time-value-shape);background:var(--_time-value-container);color:var(--_time-value-label);font-family:var(--_time-value-font-family);font-size:var(--_time-value-font-size);font-weight:var(--_time-value-font-weight);line-height:var(--_time-value-line-height);letter-spacing:var(--_time-value-tracking)}.md-time-period-group{display:flex;flex-direction:column;flex:none;box-sizing:border-box;inline-size:var(--_time-period-width);block-size:var(--_time-period-height);border:var(--_time-period-outline-width) solid var(--_time-period-outline);border-radius:var(--_time-period-shape);overflow:clip;margin-inline-start:var(--md-sys-measurement-space150)}.md-time-period{--_time-period-container: transparent;--_button-rest-shape: 0px;--_button-pressed-shape: 0px;--_button-background-state-color: var( --_time-period-background-state-color, transparent );--_button-background-state-opacity: var( --_time-period-background-state-opacity, 0 );--_button-state-color: var(--_time-period-state-color);--_button-state-opacity: var(--_time-period-state-opacity);--_button-pressed-state-color: var(--_time-period-pressed-state-color);--_button-pressed-state-opacity: var(--_time-period-pressed-state-opacity);flex:1;min-block-size:0;min-inline-size:0;border-radius:0;background:var(--_time-period-container);color:var(--_time-period-label);font-family:var(--_time-period-font-family);font-size:var(--_time-period-font-size);font-weight:var(--_time-period-font-weight);line-height:var(--_time-period-line-height);letter-spacing:var(--_time-period-tracking)}.md-time-period+.md-time-period{border-block-start:var(--_time-period-outline-width) solid var(--_time-period-outline)}.md-time-value::before,.md-time-period::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:var(--_button-background-state-color);opacity:var(--_button-background-state-opacity)}:root :is(.md-time-value,.md-time-period)[data-component-state=pressed]::before,:root:not([data-feedback-ready]) :is(.md-time-value,.md-time-period)::before{background:var(--_button-state-color);opacity:var(--_button-state-opacity, 0)}:is(.md-time-value,.md-time-period):is(:focus-visible,[data-component-state=focused]){outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}.md-time-period:is(:focus-visible,[data-component-state=focused]){outline-offset:calc(-1 * var(--md-sys-state-focus-indicator-thickness))}.md-time-field-wrap{display:flex;flex-direction:column;align-items:flex-start}.md-time-field{--_time-field-outline-width: 0px;--_time-field-outline: transparent;box-sizing:border-box;display:block;inline-size:var(--_time-field-width);block-size:var(--_time-field-height);min-inline-size:var(--_time-field-width);padding:0;border:var(--_time-field-outline-width) solid var(--_time-field-outline);border-radius:var(--_time-field-shape);background:var(--_time-field-container);color:var(--_time-field-label);text-align:center;font-family:var(--_time-field-font-family);font-size:var(--_time-field-font-size);font-weight:var(--_time-field-font-weight);line-height:var(--_time-field-line-height);letter-spacing:var(--_time-field-tracking)}.md-time-field:is(:focus-visible,[data-component-state=focused]){outline:var(--_time-focus-width) solid var(--_time-focus-color);outline-offset:var(--_time-focus-offset)}.md-time-field:is(:hover,[data-component-state=hovered]):not(:focus-visible):not([data-component-state=focused]){background:color-mix(in srgb,var(--_time-field-state-color) calc(var(--_time-field-state-opacity) * 100%),var(--_time-field-container))}.md-time-supporting{margin-block-start:7px;color:var(--_time-support-color);font-family:var(--_time-support-font-family);font-size:var(--_time-support-font-size);font-weight:var(--_time-support-font-weight);line-height:var(--_time-support-line-height);letter-spacing:var(--_time-support-tracking)}.md-time-field[aria-invalid=true]{border:var(--md-comp-time-input-time-input-field-focus-outline-width) solid var(--md-sys-color-error);color:var(--md-sys-color-error)}.md-time-dial{--_time-angle: 300deg;--_time-radius: calc(var(--_time-dial-size) * 101 / 256);position:relative;flex:none;inline-size:var(--_time-dial-size);block-size:var(--_time-dial-size);border-radius:var(--_time-dial-shape);background:var(--_time-dial-container);touch-action:none;cursor:pointer;user-select:none;direction:ltr;transition:--_time-angle var(--_motion-fast-spatial-duration) var(--_motion-fast-spatial-easing),--_time-radius var(--_motion-fast-spatial-duration) var(--_motion-fast-spatial-easing)}.md-time-dial[data-ring=inner]{--_time-radius: calc(var(--_time-dial-size) * 69 / 256)}.md-time-dial[data-dragging]{transition:none}.md-time-dial:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}.md-time-hand{position:absolute;pointer-events:none;bottom:50%;left:50%;translate:-50% 0;block-size:var(--_time-radius);inline-size:var(--_time-dial-track-width);background:var(--_time-dial-track-color);transform-origin:50% 100%;rotate:var(--_time-angle)}.md-time-handle{display:block;position:absolute;top:0;left:50%;translate:-50% -50%;inline-size:var(--_time-dial-handle-size);block-size:var(--_time-dial-handle-size);border-radius:var(--_time-dial-handle-shape);background:var(--_time-dial-handle-color)}.md-time-dot{display:none;position:absolute;left:50%;top:50%;translate:-50% -50%;inline-size:var(--_time-dial-center-size);block-size:var(--_time-dial-center-size);border-radius:var(--_time-dial-center-shape);background:var(--_time-dial-selected-label)}.md-time-dial[data-dot=true] .md-time-dot{display:block}.md-time-center{position:absolute;pointer-events:none;left:50%;top:50%;translate:-50% -50%;inline-size:var(--_time-dial-center-size);block-size:var(--_time-dial-center-size);border-radius:var(--_time-dial-center-shape);background:var(--_time-dial-center-color)}.md-time-labels,.md-time-selected-labels{position:absolute;pointer-events:none;inset:0;color:var(--_time-dial-label)}.md-time-selected-labels{color:var(--_time-dial-selected-label);clip-path:circle(calc(var(--_time-dial-handle-size) / 2) at calc(50% + sin(var(--_time-angle)) * var(--_time-radius)) calc(50% - cos(var(--_time-angle)) * var(--_time-radius)))}.md-time-tick{position:absolute;left:var(--_time-label-x);top:var(--_time-label-y);translate:-50% -50%;font-family:var(--_time-dial-font-family);font-size:var(--_time-dial-font-size);font-weight:var(--_time-dial-font-weight);line-height:var(--_time-dial-line-height);letter-spacing:var(--_time-dial-tracking)}.md-time-actions{display:flex;align-items:center;gap:var(--md-sys-measurement-space100);margin-block-start:var(--md-sys-measurement-space300)}.md-time-actions>span{flex:1}.md-time-error{margin:var(--md-sys-measurement-space100) 0 0;color:var(--md-sys-color-error)}.md-time-error:empty{display:none}.md-time-panel[data-mode=clock] .md-time-field-wrap,.md-time-panel[data-mode=input] :is(.md-time-value,.md-time-dial),.md-time-panel [hidden]{display:none}.md-time-panel[data-mode=input] :is(.md-time-hour,.md-time-minute){inline-size:var(--_time-field-width)}.md-time-panel[data-mode=input] .md-time-separator{block-size:var(--_time-field-height)}.md-time-panel[data-mode=clock][data-orientation=landscape] .md-time-body{display:grid;grid-template-columns:max-content max-content;align-items:center}.md-time-panel[data-mode=clock][data-orientation=landscape] .md-time-selectors{display:grid;grid-template-areas:"hour separator minute" "period period period";grid-template-columns:max-content max-content max-content;row-gap:var(--md-sys-measurement-space150)}.md-time-hour{grid-area:hour}.md-time-minute{grid-area:minute}.md-time-separator{grid-area:separator}.md-time-panel[data-mode=clock][data-orientation=landscape] .md-time-period-group{grid-area:period;justify-self:center;flex-direction:row;margin:0}.md-time-panel[data-mode=clock][data-orientation=landscape] .md-time-period+.md-time-period{border-block-start:0;border-inline-start:var(--_time-period-outline-width) solid var(--_time-period-outline)}[data-time-mode]>svg:last-of-type{display:none}.md-time-panel[data-mode=input] [data-time-mode]>svg:first-of-type{display:none}.md-time-panel[data-mode=input] [data-time-mode]>svg:last-of-type{display:block}@media(prefers-reduced-motion:reduce){.md-time-dial{transition:none}}@media(forced-colors:active){.md-time-panel,.md-time-period-group,.md-time-field,.md-time-value{border:1px solid CanvasText}.md-time-dial{outline:1px solid CanvasText}.md-time-labels{color:CanvasText}.md-time-selected-labels{color:HighlightText}.md-time-handle{background:Highlight}}.md-time-tick{--_time-label-x: 50%;--_time-label-y: 50%}.md-time-panel:where([data-mode=input]){--_time-container: var(--md-comp-time-input-container-color);--_time-elevation: var(--md-comp-time-input-container-elevation);--_time-shape: var(--md-comp-time-input-container-shape);--_time-focus-color: var(--md-comp-time-input-focus-indicator-color);--_time-focus-offset: var(--md-comp-time-input-focus-indicator-outline-offset);--_time-focus-width: var(--md-comp-time-input-focus-indicator-thickness);--_time-headline-color: var(--md-comp-time-input-headline-color);--_time-headline-font-family: var(--md-comp-time-input-headline-font);--_time-headline-line-height: var(--md-comp-time-input-headline-line-height);--_time-headline-font-size: var(--md-comp-time-input-headline-size);--_time-headline-tracking: var(--md-comp-time-input-headline-tracking);--_time-headline-font-weight: var(--md-comp-time-input-headline-weight)}.md-time-panel:where([data-mode=clock]){--_time-container: var(--md-comp-time-picker-container-color);--_time-elevation: var(--md-comp-time-picker-container-elevation);--_time-shape: var(--md-comp-time-picker-container-shape);--_time-headline-color: var(--md-comp-time-picker-headline-color);--_time-headline-font-family: var(--md-comp-time-picker-headline-font);--_time-headline-line-height: var(--md-comp-time-picker-headline-line-height);--_time-headline-font-size: var(--md-comp-time-picker-headline-size);--_time-headline-tracking: var(--md-comp-time-picker-headline-tracking);--_time-headline-font-weight: var(--md-comp-time-picker-headline-weight)}.md-time-panel:where([data-mode=input]){--_time-period-height: var(--md-comp-time-input-period-selector-container-height);--_time-period-shape: var(--md-comp-time-input-period-selector-container-shape);--_time-period-width: var(--md-comp-time-input-period-selector-container-width);--_time-period-font-family: var(--md-comp-time-input-period-selector-label-text-font);--_time-period-line-height: var(--md-comp-time-input-period-selector-label-text-line-height);--_time-period-font-size: var(--md-comp-time-input-period-selector-label-text-size);--_time-period-tracking: var(--md-comp-time-input-period-selector-label-text-tracking);--_time-period-font-weight: var(--md-comp-time-input-period-selector-label-text-weight);--_time-period-outline: var(--md-comp-time-input-period-selector-outline-color);--_time-period-outline-width: var(--md-comp-time-input-period-selector-outline-width)}.md-time-panel:where([data-mode=clock]){--_time-period-shape: var(--md-comp-time-picker-period-selector-container-shape);--_time-period-font-family: var(--md-comp-time-picker-period-selector-label-text-font);--_time-period-line-height: var(--md-comp-time-picker-period-selector-label-text-line-height);--_time-period-font-size: var(--md-comp-time-picker-period-selector-label-text-size);--_time-period-tracking: var(--md-comp-time-picker-period-selector-label-text-tracking);--_time-period-font-weight: var(--md-comp-time-picker-period-selector-label-text-weight);--_time-period-outline: var(--md-comp-time-picker-period-selector-outline-color);--_time-period-outline-width: var(--md-comp-time-picker-period-selector-outline-width)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_time-period-container: var(--md-comp-time-input-period-selector-selected-container-color);--_time-period-label: var(--md-comp-time-input-period-selector-selected-label-text-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_time-period-label: var(--md-comp-time-input-period-selector-unselected-label-text-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_time-period-container: var(--md-comp-time-picker-period-selector-selected-container-color);--_time-period-label: var(--md-comp-time-picker-period-selector-selected-label-text-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_time-period-label: var(--md-comp-time-picker-period-selector-unselected-label-text-color)}.md-time-panel:where([data-mode=clock]):where([data-orientation=landscape]){--_time-period-height: var(--md-comp-time-picker-period-selector-horizontal-container-height);--_time-period-width: var(--md-comp-time-picker-period-selector-horizontal-container-width)}.md-time-panel:where([data-mode=clock]):where([data-orientation=portrait]){--_time-period-height: var(--md-comp-time-picker-period-selector-vertical-container-height);--_time-period-width: var(--md-comp-time-picker-period-selector-vertical-container-width)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-period-state-opacity: var(--md-comp-time-input-period-selector-hover-state-layer-opacity);--_time-period-background-state-opacity: var(--md-comp-time-input-period-selector-hover-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-period-state-opacity: var(--md-comp-time-picker-period-selector-hover-state-layer-opacity);--_time-period-background-state-opacity: var(--md-comp-time-picker-period-selector-hover-state-layer-opacity)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-period-label: var(--md-comp-time-input-period-selector-selected-hover-label-text-color);--_time-period-state-color: var(--md-comp-time-input-period-selector-selected-hover-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-input-period-selector-selected-hover-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-period-label: var(--md-comp-time-input-period-selector-unselected-hover-label-text-color);--_time-period-state-color: var(--md-comp-time-input-period-selector-unselected-hover-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-input-period-selector-unselected-hover-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-period-label: var(--md-comp-time-picker-period-selector-selected-hover-label-text-color);--_time-period-state-color: var(--md-comp-time-picker-period-selector-selected-hover-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-picker-period-selector-selected-hover-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-period-label: var(--md-comp-time-picker-period-selector-unselected-hover-label-text-color);--_time-period-state-color: var(--md-comp-time-picker-period-selector-unselected-hover-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-picker-period-selector-unselected-hover-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-period-state-opacity: var(--md-comp-time-input-period-selector-focus-state-layer-opacity);--_time-period-background-state-opacity: var(--md-comp-time-input-period-selector-focus-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-period-state-opacity: var(--md-comp-time-picker-period-selector-focus-state-layer-opacity);--_time-period-background-state-opacity: var(--md-comp-time-picker-period-selector-focus-state-layer-opacity)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-period-label: var(--md-comp-time-input-period-selector-selected-focus-label-text-color);--_time-period-state-color: var(--md-comp-time-input-period-selector-selected-focus-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-input-period-selector-selected-focus-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-period-label: var(--md-comp-time-input-period-selector-unselected-focus-label-text-color);--_time-period-state-color: var(--md-comp-time-input-period-selector-unselected-focus-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-input-period-selector-unselected-focus-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-period-label: var(--md-comp-time-picker-period-selector-selected-focus-label-text-color);--_time-period-state-color: var(--md-comp-time-picker-period-selector-selected-focus-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-picker-period-selector-selected-focus-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-period-label: var(--md-comp-time-picker-period-selector-unselected-focus-label-text-color);--_time-period-state-color: var(--md-comp-time-picker-period-selector-unselected-focus-state-layer-color);--_time-period-background-state-color: var(--md-comp-time-picker-period-selector-unselected-focus-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-period-state-opacity: var(--md-comp-time-input-period-selector-pressed-state-layer-opacity)}.md-time-panel:where([data-mode=input]) .md-time-period{--_time-period-pressed-state-opacity: var(--md-comp-time-input-period-selector-pressed-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-period-state-opacity: var(--md-comp-time-picker-period-selector-pressed-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-period{--_time-period-pressed-state-opacity: var(--md-comp-time-picker-period-selector-pressed-state-layer-opacity)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-period-label: var(--md-comp-time-input-period-selector-selected-pressed-label-text-color);--_time-period-state-color: var(--md-comp-time-input-period-selector-selected-pressed-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)){--_time-period-pressed-state-color: var(--md-comp-time-input-period-selector-selected-pressed-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-period-label: var(--md-comp-time-input-period-selector-unselected-pressed-label-text-color);--_time-period-state-color: var(--md-comp-time-input-period-selector-unselected-pressed-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-period:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_time-period-pressed-state-color: var(--md-comp-time-input-period-selector-unselected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-period-label: var(--md-comp-time-picker-period-selector-selected-pressed-label-text-color);--_time-period-state-color: var(--md-comp-time-picker-period-selector-selected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)){--_time-period-pressed-state-color: var(--md-comp-time-picker-period-selector-selected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-period-label: var(--md-comp-time-picker-period-selector-unselected-pressed-label-text-color);--_time-period-state-color: var(--md-comp-time-picker-period-selector-unselected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-period:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_time-period-pressed-state-color: var(--md-comp-time-picker-period-selector-unselected-pressed-state-layer-color)}.md-time-panel:where([data-mode=input]) .md-time-field{--_time-field-container: var(--md-comp-time-input-time-input-field-container-color);--_time-field-label: var(--md-comp-time-input-time-input-field-label-text-color)}.md-time-panel:where([data-mode=input]){--_time-field-height: var(--md-comp-time-input-time-input-field-container-height);--_time-field-shape: var(--md-comp-time-input-time-input-field-container-shape);--_time-field-width: var(--md-comp-time-input-time-input-field-container-width);--_time-field-font-family: var(--md-comp-time-input-time-input-field-label-text-font);--_time-field-line-height: var(--md-comp-time-input-time-input-field-label-text-line-height);--_time-field-font-size: var(--md-comp-time-input-time-input-field-label-text-size);--_time-field-tracking: var(--md-comp-time-input-time-input-field-label-text-tracking);--_time-field-font-weight: var(--md-comp-time-input-time-input-field-label-text-weight)}.md-time-panel:where([data-mode=input]) .md-time-field:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-field-label: var(--md-comp-time-input-time-input-field-hover-label-text-color);--_time-field-state-color: var(--md-comp-time-input-time-input-field-hover-state-layer-color);--_time-field-background-state-color: var(--md-comp-time-input-time-input-field-hover-state-layer-color);--_time-field-state-opacity: var(--md-comp-time-input-time-input-field-hover-state-layer-opacity);--_time-field-background-state-opacity: var(--md-comp-time-input-time-input-field-hover-state-layer-opacity)}.md-time-panel:where([data-mode=input]) .md-time-field:where(:where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-field-container: var(--md-comp-time-input-time-input-field-focus-container-color);--_time-field-label: var(--md-comp-time-input-time-input-field-focus-label-text-color);--_time-field-outline: var(--md-comp-time-input-time-input-field-focus-outline-color);--_time-field-outline-width: var(--md-comp-time-input-time-input-field-focus-outline-width)}.md-time-panel:where([data-mode=input]){--_time-separator-color: var(--md-comp-time-input-time-input-field-separator-color);--_time-separator-font-family: var(--md-comp-time-input-time-input-field-separator-font);--_time-separator-line-height: var(--md-comp-time-input-time-input-field-separator-line-height);--_time-separator-font-size: var(--md-comp-time-input-time-input-field-separator-size);--_time-separator-tracking: var(--md-comp-time-input-time-input-field-separator-tracking);--_time-separator-font-weight: var(--md-comp-time-input-time-input-field-separator-weight)}.md-time-panel:where([data-mode=clock]){--_time-separator-color: var(--md-comp-time-picker-time-selector-separator-color);--_time-separator-font-family: var(--md-comp-time-picker-time-selector-separator-font);--_time-separator-line-height: var(--md-comp-time-picker-time-selector-separator-line-height);--_time-separator-font-size: var(--md-comp-time-picker-time-selector-separator-size);--_time-separator-tracking: var(--md-comp-time-picker-time-selector-separator-tracking);--_time-separator-font-weight: var(--md-comp-time-picker-time-selector-separator-weight)}.md-time-panel:where([data-mode=input]){--_time-support-color: var(--md-comp-time-input-time-input-field-supporting-text-color);--_time-support-font-family: var(--md-comp-time-input-time-input-field-supporting-text-font);--_time-support-line-height: var(--md-comp-time-input-time-input-field-supporting-text-line-height);--_time-support-font-size: var(--md-comp-time-input-time-input-field-supporting-text-size);--_time-support-tracking: var(--md-comp-time-input-time-input-field-supporting-text-tracking);--_time-support-font-weight: var(--md-comp-time-input-time-input-field-supporting-text-weight)}.md-time-panel:where([data-mode=clock]){--_time-dial-container: var(--md-comp-time-picker-clock-dial-color);--_time-dial-size: var(--md-comp-time-picker-clock-dial-container-size);--_time-dial-font-family: var(--md-comp-time-picker-clock-dial-label-text-font);--_time-dial-line-height: var(--md-comp-time-picker-clock-dial-label-text-line-height);--_time-dial-font-size: var(--md-comp-time-picker-clock-dial-label-text-size);--_time-dial-tracking: var(--md-comp-time-picker-clock-dial-label-text-tracking);--_time-dial-font-weight: var(--md-comp-time-picker-clock-dial-label-text-weight);--_time-dial-selected-label: var(--md-comp-time-picker-clock-dial-selected-label-text-color);--_time-dial-center-color: var(--md-comp-time-picker-clock-dial-selector-center-container-color);--_time-dial-center-shape: var(--md-comp-time-picker-clock-dial-selector-center-container-shape);--_time-dial-center-size: var(--md-comp-time-picker-clock-dial-selector-center-container-size);--_time-dial-handle-color: var(--md-comp-time-picker-clock-dial-selector-handle-container-color);--_time-dial-handle-shape: var(--md-comp-time-picker-clock-dial-selector-handle-container-shape);--_time-dial-handle-size: var(--md-comp-time-picker-clock-dial-selector-handle-container-size);--_time-dial-track-color: var(--md-comp-time-picker-clock-dial-selector-track-container-color);--_time-dial-track-width: var(--md-comp-time-picker-clock-dial-selector-track-container-width);--_time-dial-shape: var(--md-comp-time-picker-clock-dial-shape);--_time-dial-label: var(--md-comp-time-picker-clock-dial-unselected-label-text-color)}.md-time-panel:where([data-mode=clock]){--_time-value-height: var(--md-comp-time-picker-time-selector-container-height);--_time-value-shape: var(--md-comp-time-picker-time-selector-container-shape);--_time-value-width: var(--md-comp-time-picker-time-selector-container-width);--_time-value-font-family: var(--md-comp-time-picker-time-selector-label-text-font);--_time-value-line-height: var(--md-comp-time-picker-time-selector-label-text-line-height);--_time-value-font-size: var(--md-comp-time-picker-time-selector-label-text-size);--_time-value-tracking: var(--md-comp-time-picker-time-selector-label-text-tracking);--_time-value-font-weight: var(--md-comp-time-picker-time-selector-label-text-weight)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_time-value-container: var(--md-comp-time-picker-time-selector-selected-container-color);--_time-value-label: var(--md-comp-time-picker-time-selector-selected-label-text-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)))){--_time-value-container: var(--md-comp-time-picker-time-selector-unselected-container-color);--_time-value-label: var(--md-comp-time-picker-time-selector-unselected-label-text-color)}.md-time-panel:where([data-mode=clock]):where([data-format="24h"][data-orientation=portrait]){--_time-value-width: var(--md-comp-time-picker-time-selector-24h-vertical-container-width)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-value-state-opacity: var(--md-comp-time-picker-time-selector-hover-state-layer-opacity);--_time-value-background-state-opacity: var(--md-comp-time-picker-time-selector-hover-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-value-label: var(--md-comp-time-picker-time-selector-selected-hover-label-text-color);--_time-value-state-color: var(--md-comp-time-picker-time-selector-selected-hover-state-layer-color);--_time-value-background-state-color: var(--md-comp-time-picker-time-selector-selected-hover-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_time-value-label: var(--md-comp-time-picker-time-selector-unselected-hover-label-text-color);--_time-value-state-color: var(--md-comp-time-picker-time-selector-unselected-hover-state-layer-color);--_time-value-background-state-color: var(--md-comp-time-picker-time-selector-unselected-hover-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-value-state-opacity: var(--md-comp-time-picker-time-selector-focus-state-layer-opacity);--_time-value-background-state-opacity: var(--md-comp-time-picker-time-selector-focus-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-value-label: var(--md-comp-time-picker-time-selector-selected-focus-label-text-color);--_time-value-state-color: var(--md-comp-time-picker-time-selector-selected-focus-state-layer-color);--_time-value-background-state-color: var(--md-comp-time-picker-time-selector-selected-focus-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:focus-visible,:has(>input:focus-visible),[data-component-state=focused]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled))){--_time-value-label: var(--md-comp-time-picker-time-selector-unselected-focus-label-text-color);--_time-value-state-color: var(--md-comp-time-picker-time-selector-unselected-focus-state-layer-color);--_time-value-background-state-color: var(--md-comp-time-picker-time-selector-unselected-focus-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-value-state-opacity: var(--md-comp-time-picker-time-selector-pressed-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-value{--_time-value-pressed-state-opacity: var(--md-comp-time-picker-time-selector-pressed-state-layer-opacity)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-value-label: var(--md-comp-time-picker-time-selector-selected-pressed-label-text-color);--_time-value-state-color: var(--md-comp-time-picker-time-selector-selected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate)){--_time-value-pressed-state-color: var(--md-comp-time-picker-time-selector-selected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:where(:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))):where(:active,[data-pressed],[data-component-state=pressed]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-button-cancelled]))){--_time-value-label: var(--md-comp-time-picker-time-selector-unselected-pressed-label-text-color);--_time-value-state-color: var(--md-comp-time-picker-time-selector-unselected-pressed-state-layer-color)}.md-time-panel:where([data-mode=clock]) .md-time-value:not(:where(:checked,[aria-pressed=true],[aria-selected=true],[aria-current=page],[data-selected=true],:has(>input:checked,>input:indeterminate))){--_time-value-pressed-state-color: var(--md-comp-time-picker-time-selector-unselected-pressed-state-layer-color)}