/*
 * SPDX-FileCopyrightText: 2023 Siemens AG
 *
 * SPDX-License-Identifier: MIT
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* Dimensions */
/* Font sizes */
/* Line heights */
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2025 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
 * SPDX-FileCopyrightText: 2023 Siemens AG
 *
 * SPDX-License-Identifier: MIT
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/*
* SPDX-FileCopyrightText: 2023 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
 * SPDX-FileCopyrightText: 2023 Siemens AG
 *
 * SPDX-License-Identifier: MIT
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.ix-form-control,
.ix-form-control-plaintext {
  color: var(--theme-input--color);
  border-radius: var(--theme-input--border-radius);
  height: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  background-color: var(--theme-input--background);
  border: solid 1px var(--theme-input--border-color);
  box-shadow: var(--theme-input--box-shadow);
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  font-family: Siemens Sans, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.429em;
  color: var(--theme-color-std-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smooting: grayscale;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ix-form-control::-moz-placeholder, .ix-form-control-plaintext::-moz-placeholder {
  color: var(--theme-input-hint--color);
}
.ix-form-control::placeholder,
.ix-form-control-plaintext::placeholder {
  color: var(--theme-input-hint--color);
}
.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled), .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
  cursor: pointer;
}
.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),
.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled) {
  cursor: pointer;
}
.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover {
  background-color: var(--theme-input--background--hover);
  border-color: var(--theme-input--border-color--hover);
  cursor: auto;
}
.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover, .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover,
.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,
.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled).hover {
  background-color: var(--theme-input--background--hover);
  border-color: var(--theme-input--border-color--hover);
  cursor: auto;
}
.ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible, .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
  background-color: var(--theme-input--background--focus);
  border-color: var(--theme-input--border-color--focus);
  outline-offset: var(--theme-input--focus--outline-offset);
  box-shadow: var(--theme-input--box-shadow);
  outline: 1px solid var(--theme-color-focus-bdr);
}
.ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,
.ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible {
  background-color: var(--theme-input--background--focus);
  border-color: var(--theme-input--border-color--focus);
  outline-offset: var(--theme-input--focus--outline-offset);
  box-shadow: var(--theme-input--box-shadow);
  outline: 1px solid var(--theme-color-focus-bdr);
}

.ix-form-control:focus-visible {
  color: var(--theme-input--color);
}

.ix-form-control[type=number]::-webkit-inner-spin-button {
  margin-right: -2px;
  margin-left: 2px;
  display: none;
}
.ix-form-control[type=number] {
  text-align: right;
}

.ix-form-control.readonly,
.ix-form-control[readonly] {
  background: transparent !important;
  border-block-start: none !important;
  border-inline-start: none !important;
  border-inline-end: none !important;
  border-radius: 0rem;
}

.ix-form-control:-moz-read-only {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--theme-input--border-color);
  cursor: default !important;
}

.ix-form-control:read-only,
.ix-form-control[readonly],
.ix-form-control[readOnly],
.ix-form-control.readonly {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--theme-input--border-color);
  cursor: default !important;
}
.ix-form-control:read-only::-moz-placeholder, .ix-form-control[readonly]::-moz-placeholder, .ix-form-control[readOnly]::-moz-placeholder, .ix-form-control.readonly::-moz-placeholder {
  color: transparent;
}
.ix-form-control:-moz-read-only::placeholder {
  color: transparent;
}
.ix-form-control:read-only::placeholder,
.ix-form-control[readonly]::placeholder,
.ix-form-control[readOnly]::placeholder,
.ix-form-control.readonly::placeholder {
  color: transparent;
}

.ix-form-control:disabled,
.ix-form-control.disabled {
  background: transparent !important;
  border-block-start: none !important;
  border-inline-start: none !important;
  border-inline-end: none !important;
  border-radius: 0rem;
  color: var(--theme-color-weak-text);
  border-color: var(--theme-input--border-color-bottom--disabled);
}
.ix-form-control:disabled::-moz-placeholder, .ix-form-control.disabled::-moz-placeholder {
  color: transparent;
}
.ix-form-control:disabled::placeholder,
.ix-form-control.disabled::placeholder {
  color: transparent;
}

.ix-form-control-plaintext {
  outline: 0;
}

.form-group {
  position: relative;
}

.input-wrapper {
  display: flex;
  position: relative;
  align-items: center;
  flex-wrap: nowrap;
}
.input-wrapper > .glyph {
  display: block;
  position: absolute;
  margin-inline-start: 0.312rem;
  color: var(--theme-color-std-text);
}
.input-wrapper > input {
  padding-inline-start: 2.2rem;
}

select.ix-form-control {
  padding: 0 0.312rem;
}

textarea.ix-form-control {
  padding: 0.375rem 0.5rem;
}

input.ix-form-control.disabled, input.ix-form-control:disabled {
  color: var(--theme-input--color--disabled);
}
input.ix-form-control:-moz-read-only {
  cursor: default;
}
input.ix-form-control:read-only, input.ix-form-control.readonly {
  cursor: default;
}

input {
  min-height: 2rem;
  width: auto;
  padding: 0.25rem 0.5rem;
  background-color: var(--theme-input--background);
  color: var(--theme-input--color);
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  text-overflow: ellipsis;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
  border-radius: var(--theme-input--border-radius);
  box-shadow: var(--theme-input--box-shadow);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: var(--theme-ms-0);
  line-height: var(--theme-line-height-md);
  font-weight: var(--theme-font-weight-normal);
  letter-spacing: var(--theme-letter-spacing-xl);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smooting: grayscale;
}
input[type=number] {
  text-align: right;
}
input[type=number]::-webkit-inner-spin-button {
  margin-right: -2px;
  margin-left: 2px;
  display: none;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
input:-webkit-autofill, input:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
input::-moz-placeholder {
  color: var(--theme-input-hint--color);
}
input::placeholder {
  color: var(--theme-input-hint--color);
}
input.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), input:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
input.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), input:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
input.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), input:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
input.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), input:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
input:-moz-read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
input.read-only, input:read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
input.read-only::-moz-placeholder, input:read-only::-moz-placeholder {
  color: transparent;
}
input:-moz-read-only::placeholder {
  color: transparent;
}
input.read-only::placeholder, input:read-only::placeholder {
  color: transparent;
}
input:disabled, input.disabled {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled);
}
input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
  color: transparent;
}
input:disabled::placeholder, input.disabled::placeholder {
  color: transparent;
}

textarea {
  min-height: 2rem;
  width: auto;
  padding: 0.25rem 0.5rem;
  background-color: var(--theme-input--background);
  color: var(--theme-input--color);
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  text-overflow: ellipsis;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);
  border-radius: var(--theme-input--border-radius);
  box-shadow: var(--theme-input--box-shadow);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: var(--theme-ms-0);
  line-height: var(--theme-line-height-md);
  font-weight: var(--theme-font-weight-normal);
  letter-spacing: var(--theme-letter-spacing-xl);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smooting: grayscale;
}
textarea[type=number] {
  text-align: right;
}
textarea[type=number]::-webkit-inner-spin-button {
  margin-right: -2px;
  margin-left: 2px;
  display: none;
}
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
textarea:-webkit-autofill, textarea:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
  background-color: var(--theme-input--background--autofill) !important;
  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
  color: var(--theme-input--color--autofill) !important;
}
textarea::-moz-placeholder {
  color: var(--theme-input-hint--color);
}
textarea::placeholder {
  color: var(--theme-input-hint--color);
}
textarea.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), textarea:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
textarea.hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), textarea:hover:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  border-color: var(--theme-input--border-color--hover) !important;
  background-color: var(--theme-input--background--hover);
}
textarea.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only), textarea:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:-moz-read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
textarea.focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only), textarea:focus:not(.readonly,
.read-only,
.disabled,
[readonly],
[disabled],
:read-only) {
  outline: 1px solid var(--theme-color-focus-bdr);
  outline-offset: var(--theme-input--focus--outline-offset);
  border-color: var(--theme-input--border-color--focus) !important;
}
textarea:-moz-read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
textarea.read-only, textarea:read-only {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly);
}
textarea.read-only::-moz-placeholder, textarea:read-only::-moz-placeholder {
  color: transparent;
}
textarea:-moz-read-only::placeholder {
  color: transparent;
}
textarea.read-only::placeholder, textarea:read-only::placeholder {
  color: transparent;
}
textarea:disabled, textarea.disabled {
  box-shadow: none;
  background-color: transparent;
  outline: none;
  border: var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled);
}
textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
  color: transparent;
}
textarea:disabled::placeholder, textarea.disabled::placeholder {
  color: transparent;
}
textarea {
  min-height: 2rem;
  padding: calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness));
}
textarea:not([rows]) {
  height: 3.25rem;
}

textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),
input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]) {
  border-color: var(--theme-input--border-color--info);
}
textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,
input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover {
  border-color: var(--theme-input--border-color--info--hover) !important;
}
textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,
input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active {
  border-color: var(--theme-input--border-color--info--active) !important;
}

textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),
input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]) {
  background-color: var(--theme-input--background--warning);
  border-color: var(--theme-input--border-color--warning--active) !important;
}
textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,
input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover {
  background-color: var(--theme-input--background--warning--hover);
  border-color: var(--theme-input--border-color--warning--hover) !important;
}
textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,
input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active {
  border-color: var(--theme-input--border-color--warning--active) !important;
}

textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),
input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]) {
  background-color: var(--theme-input--background--invalid);
  border-color: var(--theme-input--border-color--invalid) !important;
}
textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,
input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover {
  background-color: var(--theme-input--background--invalid--hover);
  border-color: var(--theme-input--border-color--invalid--hover) !important;
}
textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,
input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active {
  border-color: var(--theme-input--border-color--invalid--active) !important;
}

:host {
  display: block;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
:host *,
:host *::after,
:host *::before {
  box-sizing: border-box;
}
:host ::-webkit-scrollbar-button {
  display: none;
}
@-moz-document url-prefix() {
  :host * {
    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
    scrollbar-width: thin;
  }
}
:host {
  /* width */
}
:host ::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
:host {
  /* Track */
}
:host ::-webkit-scrollbar-track {
  border-radius: 5px;
  background: var(--theme-scrollbar-track--background);
}
:host ::-webkit-scrollbar-track:hover {
  background: var(--theme-scrollbar-track--background--hover);
}
:host {
  /* Handle */
}
:host ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--theme-scrollbar-thumb--background);
}
:host {
  /* Handle on hover */
}
:host ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb--background--hover);
}
:host ::-webkit-scrollbar-corner {
  display: none;
}
:host .standaloneAppearance {
  box-shadow: none;
}
:host .hidden {
  display: none;
}
:host .header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
}
:host .clock {
  display: flex;
  justify-content: center;
  align-items: start;
}
:host .clock .flex {
  display: flex;
  height: 100%;
  align-items: start;
}
:host .clock .flex .columns {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
:host .clock .flex .columns .column-header {
  height: 2.5rem;
  width: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: var(--theme-color-soft-text);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
:host .clock .flex .column-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  margin-top: 3rem;
  width: 0.5rem;
}
:host .clock .element-list {
  list-style-type: none;
  overflow: auto;
  padding: 0.0625rem;
  margin: -0.0625rem;
  max-height: 15.75rem;
}
:host .clock .element-list button {
  all: unset;
}
:host .clock .element-list .element-container {
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--theme-color-primary);
}
:host .clock .element-list .element-container:hover {
  background-color: var(--theme-datepicker-day--background--hover);
}
:host .clock .element-list .element-container:focus-visible {
  box-shadow: 0 0 0 1px var(--theme-color-focus-bdr);
}
:host .clock .element-list .selected {
  background-color: var(--theme-datepicker-day--background--selected);
  color: var(--theme-datepicker-day--color--selected);
  font-weight: var(--theme-font-weight-bold);
}
:host .clock .element-list .selected:hover {
  background-color: var(--theme-datepicker-day--background--selected-hover);
}
:host .clock .element-list .selected:focus-visible {
  border: 0.0625rem solid var(--theme-color-inv-contrast-text);
}
:host .clock .element-list .element-list-padding {
  width: 2.5rem;
  height: 13.125rem;
  min-height: 13.125rem;
}
:host .clock div.element-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:host .clock div.element-list::-webkit-scrollbar {
  display: none;
}
:host .footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
:host .footer .confirm-button {
  margin-left: auto;
}
:host .footer--compact {
  flex-direction: column;
  align-items: center;
}
:host .footer--compact .confirm-button {
  margin-left: initial;
}
:host .default-space {
  margin-left: 1rem;
}
:host .text-align {
  text-align: center;
}