/**
  This file resets default behavior in browsers.
 */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
/* stylelint-disable-line meowtec/no-px */
.ob-font-ui-title {
  font-size: var(--font-ui-title-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-title-weight);
  line-height: var(--font-ui-title-line-height);
}

.ob-font-ui-subtitle {
  font-size: var(--font-ui-subtitle-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-subtitle-weight);
  line-height: var(--font-ui-subtitle-line-height);
}

.ob-font-ui-overline {
  font-size: var(--font-ui-overline-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-overline-weight);
  line-height: var(--font-ui-overline-line-height);
  letter-spacing: 1.13px;
  text-transform: uppercase;
}

.ob-font-ui-button {
  font-size: var(--font-ui-button-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-button-weight);
  line-height: var(--font-ui-button-line-height);
}

.ob-font-ui-body-active {
  font-size: var(--font-ui-body-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-active-weight);
  line-height: var(--font-ui-body-active-line-height);
}

.ob-font-ui-body {
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
}

.ob-font-ui-label-active {
  font-size: var(--font-ui-label-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-active-weight);
  line-height: var(--font-ui-label-active-line-height);
}

.ob-font-ui-label {
  font-size: var(--font-ui-label-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-weight);
  line-height: var(--font-ui-label-line-height);
}

.ob-element-active-color-stroke {
  stroke: var(--element-active-color);
}

.ob-element-active-color-fill {
  fill: var(--element-active-color);
}

.ob-element-neutral-color-stroke {
  stroke: var(--element-neutral-color);
}

.ob-element-neutral-color-fill {
  fill: var(--element-neutral-color);
}

.ob-element-disabled-color-stroke {
  stroke: var(--element-disabled-color);
}

.ob-element-disabled-color-fill {
  fill: var(--element-disabled-color);
}

.ob-element-active-inverted-color-stroke {
  stroke: var(--element-active-inverted-color);
}

.ob-element-active-inverted-color-fill {
  fill: var(--element-active-inverted-color);
}

.ob-element-neutral-inverted-color-stroke {
  stroke: var(--element-neutral-inverted-color);
}

.ob-element-neutral-inverted-color-fill {
  fill: var(--element-neutral-inverted-color);
}

.ob-element-disabled-inverted-color-stroke {
  stroke: var(--element-disabled-inverted-color);
}

.ob-element-disabled-inverted-color-fill {
  fill: var(--element-disabled-inverted-color);
}

.ob-container-backdrop-color-stroke {
  stroke: var(--container-backdrop-color);
}

.ob-container-backdrop-color-fill {
  fill: var(--container-backdrop-color);
}

.ob-container-section-color-stroke {
  stroke: var(--container-section-color);
}

.ob-container-section-color-fill {
  fill: var(--container-section-color);
}

.ob-container-background-color-stroke {
  stroke: var(--container-background-color);
}

.ob-container-background-color-fill {
  fill: var(--container-background-color);
}

.ob-container-global-color-stroke {
  stroke: var(--container-global-color);
}

.ob-container-global-color-fill {
  fill: var(--container-global-color);
}

.ob-border-divider-color-stroke {
  stroke: var(--border-divider-color);
}

.ob-border-divider-color-fill {
  fill: var(--border-divider-color);
}

.ob-border-outline-color-stroke {
  stroke: var(--border-outline-color);
}

.ob-border-outline-color-fill {
  fill: var(--border-outline-color);
}

.ob-border-solid-color-stroke {
  stroke: var(--border-solid-color);
}

.ob-border-solid-color-fill {
  fill: var(--border-solid-color);
}

.ob-border-edge-color-stroke {
  stroke: var(--border-edge-color);
}

.ob-border-edge-color-fill {
  fill: var(--border-edge-color);
}

.ob-instrument-enhanced-primary-color-stroke {
  stroke: var(--instrument-enhanced-primary-color);
}

.ob-instrument-enhanced-primary-color-fill {
  fill: var(--instrument-enhanced-primary-color);
}

.ob-instrument-regular-primary-color-stroke {
  stroke: var(--instrument-regular-primary-color);
}

.ob-instrument-regular-primary-color-fill {
  fill: var(--instrument-regular-primary-color);
}

.ob-instrument-enhanced-secondary-color-stroke {
  stroke: var(--instrument-enhanced-secondary-color);
}

.ob-instrument-enhanced-secondary-color-fill {
  fill: var(--instrument-enhanced-secondary-color);
}

.ob-instrument-port-color-stroke {
  stroke: var(--instrument-port-color);
}

.ob-instrument-port-color-fill {
  fill: var(--instrument-port-color);
}

.ob-instrument-starboard-color-stroke {
  stroke: var(--instrument-starboard-color);
}

.ob-instrument-starboard-color-fill {
  fill: var(--instrument-starboard-color);
}

.ob-instrument-frame-primary-color-stroke {
  stroke: var(--instrument-frame-primary-color);
}

.ob-instrument-frame-primary-color-fill {
  fill: var(--instrument-frame-primary-color);
}

.ob-instrument-frame-secondary-color-stroke {
  stroke: var(--instrument-frame-secondary-color);
}

.ob-instrument-frame-secondary-color-fill {
  fill: var(--instrument-frame-secondary-color);
}

.ob-instrument-tick-mark-primary-color-stroke {
  stroke: var(--instrument-tick-mark-primary-color);
}

.ob-instrument-tick-mark-primary-color-fill {
  fill: var(--instrument-tick-mark-primary-color);
}

.ob-instrument-tick-mark-secondary-color-stroke {
  stroke: var(--instrument-tick-mark-secondary-color);
}

.ob-instrument-tick-mark-secondary-color-fill {
  fill: var(--instrument-tick-mark-secondary-color);
}

.ob-instrument-tick-mark-tertiary-color-stroke {
  stroke: var(--instrument-tick-mark-tertiary-color);
}

.ob-instrument-tick-mark-tertiary-color-fill {
  fill: var(--instrument-tick-mark-tertiary-color);
}

.ob-alert-running-color-stroke {
  stroke: var(--alert-running-color);
}

.ob-alert-running-color-fill {
  fill: var(--alert-running-color);
}

.ob-alert-caution-color-stroke {
  stroke: var(--alert-caution-color);
}

.ob-alert-caution-color-fill {
  fill: var(--alert-caution-color);
}

.ob-alert-warning-color-stroke {
  stroke: var(--alert-warning-color);
}

.ob-alert-warning-color-fill {
  fill: var(--alert-warning-color);
}

.ob-alert-alarm-color-stroke {
  stroke: var(--alert-alarm-color);
}

.ob-alert-alarm-color-fill {
  fill: var(--alert-alarm-color);
}

.ob-alert-critical-alarm-color-stroke {
  stroke: var(--alert-critical-alarm-color);
}

.ob-alert-critical-alarm-color-fill {
  fill: var(--alert-critical-alarm-color);
}

.ob-normal-enabled-background-color-stroke {
  stroke: var(--normal-enabled-background-color);
}

.ob-normal-enabled-background-color-fill {
  fill: var(--normal-enabled-background-color);
}

.ob-normal-enabled-border-color-stroke {
  stroke: var(--normal-enabled-border-color);
}

.ob-normal-enabled-border-color-fill {
  fill: var(--normal-enabled-border-color);
}

.ob-normal-hover-background-color-stroke {
  stroke: var(--normal-hover-background-color);
}

.ob-normal-hover-background-color-fill {
  fill: var(--normal-hover-background-color);
}

.ob-normal-hover-border-color-stroke {
  stroke: var(--normal-hover-border-color);
}

.ob-normal-hover-border-color-fill {
  fill: var(--normal-hover-border-color);
}

.ob-normal-pressed-background-color-stroke {
  stroke: var(--normal-pressed-background-color);
}

.ob-normal-pressed-background-color-fill {
  fill: var(--normal-pressed-background-color);
}

.ob-normal-pressed-border-color-stroke {
  stroke: var(--normal-pressed-border-color);
}

.ob-normal-pressed-border-color-fill {
  fill: var(--normal-pressed-border-color);
}

.ob-normal-focused-background-color-stroke {
  stroke: var(--normal-focused-background-color);
}

.ob-normal-focused-background-color-fill {
  fill: var(--normal-focused-background-color);
}

.ob-normal-focused-border-color-stroke {
  stroke: var(--normal-focused-border-color);
}

.ob-normal-focused-border-color-fill {
  fill: var(--normal-focused-border-color);
}

.ob-normal-disabled-background-color-stroke {
  stroke: var(--normal-disabled-background-color);
}

.ob-normal-disabled-background-color-fill {
  fill: var(--normal-disabled-background-color);
}

.ob-normal-disabled-border-color-stroke {
  stroke: var(--normal-disabled-border-color);
}

.ob-normal-disabled-border-color-fill {
  fill: var(--normal-disabled-border-color);
}

.ob-on-normal-active-color-stroke {
  stroke: var(--on-normal-active-color);
}

.ob-on-normal-active-color-fill {
  fill: var(--on-normal-active-color);
}

.ob-on-normal-neutral-color-stroke {
  stroke: var(--on-normal-neutral-color);
}

.ob-on-normal-neutral-color-fill {
  fill: var(--on-normal-neutral-color);
}

.ob-on-normal-disabled-color-stroke {
  stroke: var(--on-normal-disabled-color);
}

.ob-on-normal-disabled-color-fill {
  fill: var(--on-normal-disabled-color);
}

.ob-raised-enabled-background-color-stroke {
  stroke: var(--raised-enabled-background-color);
}

.ob-raised-enabled-background-color-fill {
  fill: var(--raised-enabled-background-color);
}

.ob-raised-enabled-border-color-stroke {
  stroke: var(--raised-enabled-border-color);
}

.ob-raised-enabled-border-color-fill {
  fill: var(--raised-enabled-border-color);
}

.ob-raised-hover-background-color-stroke {
  stroke: var(--raised-hover-background-color);
}

.ob-raised-hover-background-color-fill {
  fill: var(--raised-hover-background-color);
}

.ob-raised-hover-border-color-stroke {
  stroke: var(--raised-hover-border-color);
}

.ob-raised-hover-border-color-fill {
  fill: var(--raised-hover-border-color);
}

.ob-raised-pressed-background-color-stroke {
  stroke: var(--raised-pressed-background-color);
}

.ob-raised-pressed-background-color-fill {
  fill: var(--raised-pressed-background-color);
}

.ob-raised-pressed-border-color-stroke {
  stroke: var(--raised-pressed-border-color);
}

.ob-raised-pressed-border-color-fill {
  fill: var(--raised-pressed-border-color);
}

.ob-raised-focused-background-color-stroke {
  stroke: var(--raised-focused-background-color);
}

.ob-raised-focused-background-color-fill {
  fill: var(--raised-focused-background-color);
}

.ob-raised-focused-border-color-stroke {
  stroke: var(--raised-focused-border-color);
}

.ob-raised-focused-border-color-fill {
  fill: var(--raised-focused-border-color);
}

.ob-raised-disabled-background-color-stroke {
  stroke: var(--raised-disabled-background-color);
}

.ob-raised-disabled-background-color-fill {
  fill: var(--raised-disabled-background-color);
}

.ob-raised-disabled-border-color-stroke {
  stroke: var(--raised-disabled-border-color);
}

.ob-raised-disabled-border-color-fill {
  fill: var(--raised-disabled-border-color);
}

.ob-on-raised-active-color-stroke {
  stroke: var(--on-raised-active-color);
}

.ob-on-raised-active-color-fill {
  fill: var(--on-raised-active-color);
}

.ob-on-raised-neutral-color-stroke {
  stroke: var(--on-raised-neutral-color);
}

.ob-on-raised-neutral-color-fill {
  fill: var(--on-raised-neutral-color);
}

.ob-on-raised-disabled-color-stroke {
  stroke: var(--on-raised-disabled-color);
}

.ob-on-raised-disabled-color-fill {
  fill: var(--on-raised-disabled-color);
}

.ob-indent-enabled-background-color-stroke {
  stroke: var(--indent-enabled-background-color);
}

.ob-indent-enabled-background-color-fill {
  fill: var(--indent-enabled-background-color);
}

.ob-indent-enabled-border-color-stroke {
  stroke: var(--indent-enabled-border-color);
}

.ob-indent-enabled-border-color-fill {
  fill: var(--indent-enabled-border-color);
}

.ob-indent-hover-background-color-stroke {
  stroke: var(--indent-hover-background-color);
}

.ob-indent-hover-background-color-fill {
  fill: var(--indent-hover-background-color);
}

.ob-indent-hover-border-color-stroke {
  stroke: var(--indent-hover-border-color);
}

.ob-indent-hover-border-color-fill {
  fill: var(--indent-hover-border-color);
}

.ob-indent-pressed-background-color-stroke {
  stroke: var(--indent-pressed-background-color);
}

.ob-indent-pressed-background-color-fill {
  fill: var(--indent-pressed-background-color);
}

.ob-indent-pressed-border-color-stroke {
  stroke: var(--indent-pressed-border-color);
}

.ob-indent-pressed-border-color-fill {
  fill: var(--indent-pressed-border-color);
}

.ob-indent-focused-background-color-stroke {
  stroke: var(--indent-focused-background-color);
}

.ob-indent-focused-background-color-fill {
  fill: var(--indent-focused-background-color);
}

.ob-indent-focused-border-color-stroke {
  stroke: var(--indent-focused-border-color);
}

.ob-indent-focused-border-color-fill {
  fill: var(--indent-focused-border-color);
}

.ob-indent-disabled-background-color-stroke {
  stroke: var(--indent-disabled-background-color);
}

.ob-indent-disabled-background-color-fill {
  fill: var(--indent-disabled-background-color);
}

.ob-indent-disabled-border-color-stroke {
  stroke: var(--indent-disabled-border-color);
}

.ob-indent-disabled-border-color-fill {
  fill: var(--indent-disabled-border-color);
}

.ob-on-indent-active-color-stroke {
  stroke: var(--on-indent-active-color);
}

.ob-on-indent-active-color-fill {
  fill: var(--on-indent-active-color);
}

.ob-on-indent-neutral-color-stroke {
  stroke: var(--on-indent-neutral-color);
}

.ob-on-indent-neutral-color-fill {
  fill: var(--on-indent-neutral-color);
}

.ob-on-indent-disabled-color-stroke {
  stroke: var(--on-indent-disabled-color);
}

.ob-on-indent-disabled-color-fill {
  fill: var(--on-indent-disabled-color);
}

.ob-flat-enabled-background-color-stroke {
  stroke: var(--flat-enabled-background-color);
}

.ob-flat-enabled-background-color-fill {
  fill: var(--flat-enabled-background-color);
}

.ob-flat-enabled-border-color-stroke {
  stroke: var(--flat-enabled-border-color);
}

.ob-flat-enabled-border-color-fill {
  fill: var(--flat-enabled-border-color);
}

.ob-flat-hover-background-color-stroke {
  stroke: var(--flat-hover-background-color);
}

.ob-flat-hover-background-color-fill {
  fill: var(--flat-hover-background-color);
}

.ob-flat-hover-border-color-stroke {
  stroke: var(--flat-hover-border-color);
}

.ob-flat-hover-border-color-fill {
  fill: var(--flat-hover-border-color);
}

.ob-flat-pressed-background-color-stroke {
  stroke: var(--flat-pressed-background-color);
}

.ob-flat-pressed-background-color-fill {
  fill: var(--flat-pressed-background-color);
}

.ob-flat-pressed-border-color-stroke {
  stroke: var(--flat-pressed-border-color);
}

.ob-flat-pressed-border-color-fill {
  fill: var(--flat-pressed-border-color);
}

.ob-flat-focused-background-color-stroke {
  stroke: var(--flat-focused-background-color);
}

.ob-flat-focused-background-color-fill {
  fill: var(--flat-focused-background-color);
}

.ob-flat-focused-border-color-stroke {
  stroke: var(--flat-focused-border-color);
}

.ob-flat-focused-border-color-fill {
  fill: var(--flat-focused-border-color);
}

.ob-flat-disabled-background-color-stroke {
  stroke: var(--flat-disabled-background-color);
}

.ob-flat-disabled-background-color-fill {
  fill: var(--flat-disabled-background-color);
}

.ob-flat-disabled-border-color-stroke {
  stroke: var(--flat-disabled-border-color);
}

.ob-flat-disabled-border-color-fill {
  fill: var(--flat-disabled-border-color);
}

.ob-on-flat-active-color-stroke {
  stroke: var(--on-flat-active-color);
}

.ob-on-flat-active-color-fill {
  fill: var(--on-flat-active-color);
}

.ob-on-flat-neutral-color-stroke {
  stroke: var(--on-flat-neutral-color);
}

.ob-on-flat-neutral-color-fill {
  fill: var(--on-flat-neutral-color);
}

.ob-on-flat-disabled-color-stroke {
  stroke: var(--on-flat-disabled-color);
}

.ob-on-flat-disabled-color-fill {
  fill: var(--on-flat-disabled-color);
}

.ob-selected-enabled-background-color-stroke {
  stroke: var(--selected-enabled-background-color);
}

.ob-selected-enabled-background-color-fill {
  fill: var(--selected-enabled-background-color);
}

.ob-selected-enabled-border-color-stroke {
  stroke: var(--selected-enabled-border-color);
}

.ob-selected-enabled-border-color-fill {
  fill: var(--selected-enabled-border-color);
}

.ob-selected-hover-background-color-stroke {
  stroke: var(--selected-hover-background-color);
}

.ob-selected-hover-background-color-fill {
  fill: var(--selected-hover-background-color);
}

.ob-selected-hover-border-color-stroke {
  stroke: var(--selected-hover-border-color);
}

.ob-selected-hover-border-color-fill {
  fill: var(--selected-hover-border-color);
}

.ob-selected-pressed-background-color-stroke {
  stroke: var(--selected-pressed-background-color);
}

.ob-selected-pressed-background-color-fill {
  fill: var(--selected-pressed-background-color);
}

.ob-selected-pressed-border-color-stroke {
  stroke: var(--selected-pressed-border-color);
}

.ob-selected-pressed-border-color-fill {
  fill: var(--selected-pressed-border-color);
}

.ob-selected-focused-background-color-stroke {
  stroke: var(--selected-focused-background-color);
}

.ob-selected-focused-background-color-fill {
  fill: var(--selected-focused-background-color);
}

.ob-selected-focused-border-color-stroke {
  stroke: var(--selected-focused-border-color);
}

.ob-selected-focused-border-color-fill {
  fill: var(--selected-focused-border-color);
}

.ob-selected-disabled-background-color-stroke {
  stroke: var(--selected-disabled-background-color);
}

.ob-selected-disabled-background-color-fill {
  fill: var(--selected-disabled-background-color);
}

.ob-selected-disabled-border-color-stroke {
  stroke: var(--selected-disabled-border-color);
}

.ob-selected-disabled-border-color-fill {
  fill: var(--selected-disabled-border-color);
}

.ob-on-selected-active-color-stroke {
  stroke: var(--on-selected-active-color);
}

.ob-on-selected-active-color-fill {
  fill: var(--on-selected-active-color);
}

.ob-on-selected-neutral-color-stroke {
  stroke: var(--on-selected-neutral-color);
}

.ob-on-selected-neutral-color-fill {
  fill: var(--on-selected-neutral-color);
}

.ob-on-selected-disabled-color-stroke {
  stroke: var(--on-selected-disabled-color);
}

.ob-on-selected-disabled-color-fill {
  fill: var(--on-selected-disabled-color);
}

.ob-thumb-enabled-background-color-stroke {
  stroke: var(--thumb-enabled-background-color);
}

.ob-thumb-enabled-background-color-fill {
  fill: var(--thumb-enabled-background-color);
}

.ob-thumb-enabled-border-color-stroke {
  stroke: var(--thumb-enabled-border-color);
}

.ob-thumb-enabled-border-color-fill {
  fill: var(--thumb-enabled-border-color);
}

.ob-thumb-hover-background-color-stroke {
  stroke: var(--thumb-hover-background-color);
}

.ob-thumb-hover-background-color-fill {
  fill: var(--thumb-hover-background-color);
}

.ob-thumb-hover-border-color-stroke {
  stroke: var(--thumb-hover-border-color);
}

.ob-thumb-hover-border-color-fill {
  fill: var(--thumb-hover-border-color);
}

.ob-thumb-pressed-background-color-stroke {
  stroke: var(--thumb-pressed-background-color);
}

.ob-thumb-pressed-background-color-fill {
  fill: var(--thumb-pressed-background-color);
}

.ob-thumb-pressed-border-color-stroke {
  stroke: var(--thumb-pressed-border-color);
}

.ob-thumb-pressed-border-color-fill {
  fill: var(--thumb-pressed-border-color);
}

.ob-thumb-focused-background-color-stroke {
  stroke: var(--thumb-focused-background-color);
}

.ob-thumb-focused-background-color-fill {
  fill: var(--thumb-focused-background-color);
}

.ob-thumb-focused-border-color-stroke {
  stroke: var(--thumb-focused-border-color);
}

.ob-thumb-focused-border-color-fill {
  fill: var(--thumb-focused-border-color);
}

.ob-thumb-disabled-background-color-stroke {
  stroke: var(--thumb-disabled-background-color);
}

.ob-thumb-disabled-background-color-fill {
  fill: var(--thumb-disabled-background-color);
}

.ob-thumb-disabled-border-color-stroke {
  stroke: var(--thumb-disabled-border-color);
}

.ob-thumb-disabled-border-color-fill {
  fill: var(--thumb-disabled-border-color);
}

.ob-on-thumb-active-color-stroke {
  stroke: var(--on-thumb-active-color);
}

.ob-on-thumb-active-color-fill {
  fill: var(--on-thumb-active-color);
}

.ob-on-thumb-neutral-color-stroke {
  stroke: var(--on-thumb-neutral-color);
}

.ob-on-thumb-neutral-color-fill {
  fill: var(--on-thumb-neutral-color);
}

.ob-on-thumb-disabled-color-stroke {
  stroke: var(--on-thumb-disabled-color);
}

.ob-on-thumb-disabled-color-fill {
  fill: var(--on-thumb-disabled-color);
}

.ob-amplified-enabled-background-color-stroke {
  stroke: var(--amplified-enabled-background-color);
}

.ob-amplified-enabled-background-color-fill {
  fill: var(--amplified-enabled-background-color);
}

.ob-amplified-enabled-border-color-stroke {
  stroke: var(--amplified-enabled-border-color);
}

.ob-amplified-enabled-border-color-fill {
  fill: var(--amplified-enabled-border-color);
}

.ob-amplified-hover-background-color-stroke {
  stroke: var(--amplified-hover-background-color);
}

.ob-amplified-hover-background-color-fill {
  fill: var(--amplified-hover-background-color);
}

.ob-amplified-hover-border-color-stroke {
  stroke: var(--amplified-hover-border-color);
}

.ob-amplified-hover-border-color-fill {
  fill: var(--amplified-hover-border-color);
}

.ob-amplified-pressed-background-color-stroke {
  stroke: var(--amplified-pressed-background-color);
}

.ob-amplified-pressed-background-color-fill {
  fill: var(--amplified-pressed-background-color);
}

.ob-amplified-pressed-border-color-stroke {
  stroke: var(--amplified-pressed-border-color);
}

.ob-amplified-pressed-border-color-fill {
  fill: var(--amplified-pressed-border-color);
}

.ob-amplified-focused-background-color-stroke {
  stroke: var(--amplified-focused-background-color);
}

.ob-amplified-focused-background-color-fill {
  fill: var(--amplified-focused-background-color);
}

.ob-amplified-focused-border-color-stroke {
  stroke: var(--amplified-focused-border-color);
}

.ob-amplified-focused-border-color-fill {
  fill: var(--amplified-focused-border-color);
}

.ob-amplified-disabled-background-color-stroke {
  stroke: var(--amplified-disabled-background-color);
}

.ob-amplified-disabled-background-color-fill {
  fill: var(--amplified-disabled-background-color);
}

.ob-amplified-disabled-border-color-stroke {
  stroke: var(--amplified-disabled-border-color);
}

.ob-amplified-disabled-border-color-fill {
  fill: var(--amplified-disabled-border-color);
}

.ob-on-amplified-active-color-stroke {
  stroke: var(--on-amplified-active-color);
}

.ob-on-amplified-active-color-fill {
  fill: var(--on-amplified-active-color);
}

.ob-on-amplified-neutral-color-stroke {
  stroke: var(--on-amplified-neutral-color);
}

.ob-on-amplified-neutral-color-fill {
  fill: var(--on-amplified-neutral-color);
}

.ob-on-amplified-disabled-color-stroke {
  stroke: var(--on-amplified-disabled-color);
}

.ob-on-amplified-disabled-color-fill {
  fill: var(--on-amplified-disabled-color);
}

.ob-running-enabled-background-color-stroke {
  stroke: var(--running-enabled-background-color);
}

.ob-running-enabled-background-color-fill {
  fill: var(--running-enabled-background-color);
}

.ob-running-enabled-border-color-stroke {
  stroke: var(--running-enabled-border-color);
}

.ob-running-enabled-border-color-fill {
  fill: var(--running-enabled-border-color);
}

.ob-running-hover-background-color-stroke {
  stroke: var(--running-hover-background-color);
}

.ob-running-hover-background-color-fill {
  fill: var(--running-hover-background-color);
}

.ob-running-hover-border-color-stroke {
  stroke: var(--running-hover-border-color);
}

.ob-running-hover-border-color-fill {
  fill: var(--running-hover-border-color);
}

.ob-running-pressed-background-color-stroke {
  stroke: var(--running-pressed-background-color);
}

.ob-running-pressed-background-color-fill {
  fill: var(--running-pressed-background-color);
}

.ob-running-pressed-border-color-stroke {
  stroke: var(--running-pressed-border-color);
}

.ob-running-pressed-border-color-fill {
  fill: var(--running-pressed-border-color);
}

.ob-running-focused-background-color-stroke {
  stroke: var(--running-focused-background-color);
}

.ob-running-focused-background-color-fill {
  fill: var(--running-focused-background-color);
}

.ob-running-focused-border-color-stroke {
  stroke: var(--running-focused-border-color);
}

.ob-running-focused-border-color-fill {
  fill: var(--running-focused-border-color);
}

.ob-running-disabled-background-color-stroke {
  stroke: var(--running-disabled-background-color);
}

.ob-running-disabled-background-color-fill {
  fill: var(--running-disabled-background-color);
}

.ob-running-disabled-background-color-stroke {
  stroke: var(--running-disabled-background-color);
}

.ob-running-disabled-background-color-fill {
  fill: var(--running-disabled-background-color);
}

.ob-running-disabled-border-color-stroke {
  stroke: var(--running-disabled-border-color);
}

.ob-running-disabled-border-color-fill {
  fill: var(--running-disabled-border-color);
}

.ob-on-running-active-color-stroke {
  stroke: var(--on-running-active-color);
}

.ob-on-running-active-color-fill {
  fill: var(--on-running-active-color);
}

.ob-on-running-neutral-color-stroke {
  stroke: var(--on-running-neutral-color);
}

.ob-on-running-neutral-color-fill {
  fill: var(--on-running-neutral-color);
}

.ob-on-running-disabled-color-stroke {
  stroke: var(--on-running-disabled-color);
}

.ob-on-running-disabled-color-fill {
  fill: var(--on-running-disabled-color);
}

.ob-caution-enabled-background-color-stroke {
  stroke: var(--caution-enabled-background-color);
}

.ob-caution-enabled-background-color-fill {
  fill: var(--caution-enabled-background-color);
}

.ob-caution-enabled-border-color-stroke {
  stroke: var(--caution-enabled-border-color);
}

.ob-caution-enabled-border-color-fill {
  fill: var(--caution-enabled-border-color);
}

.ob-caution-hover-background-color-stroke {
  stroke: var(--caution-hover-background-color);
}

.ob-caution-hover-background-color-fill {
  fill: var(--caution-hover-background-color);
}

.ob-caution-hover-border-color-stroke {
  stroke: var(--caution-hover-border-color);
}

.ob-caution-hover-border-color-fill {
  fill: var(--caution-hover-border-color);
}

.ob-caution-pressed-background-color-stroke {
  stroke: var(--caution-pressed-background-color);
}

.ob-caution-pressed-background-color-fill {
  fill: var(--caution-pressed-background-color);
}

.ob-caution-pressed-border-color-stroke {
  stroke: var(--caution-pressed-border-color);
}

.ob-caution-pressed-border-color-fill {
  fill: var(--caution-pressed-border-color);
}

.ob-caution-focused-background-color-stroke {
  stroke: var(--caution-focused-background-color);
}

.ob-caution-focused-background-color-fill {
  fill: var(--caution-focused-background-color);
}

.ob-caution-focused-border-color-stroke {
  stroke: var(--caution-focused-border-color);
}

.ob-caution-focused-border-color-fill {
  fill: var(--caution-focused-border-color);
}

.ob-caution-disabled-background-color-stroke {
  stroke: var(--caution-disabled-background-color);
}

.ob-caution-disabled-background-color-fill {
  fill: var(--caution-disabled-background-color);
}

.ob-caution-disabled-border-color-stroke {
  stroke: var(--caution-disabled-border-color);
}

.ob-caution-disabled-border-color-fill {
  fill: var(--caution-disabled-border-color);
}

.ob-on-caution-active-color-stroke {
  stroke: var(--on-caution-active-color);
}

.ob-on-caution-active-color-fill {
  fill: var(--on-caution-active-color);
}

.ob-on-caution-neutral-color-stroke {
  stroke: var(--on-caution-neutral-color);
}

.ob-on-caution-neutral-color-fill {
  fill: var(--on-caution-neutral-color);
}

.ob-on-caution-disabled-color-stroke {
  stroke: var(--on-caution-disabled-color);
}

.ob-on-caution-disabled-color-fill {
  fill: var(--on-caution-disabled-color);
}

.ob-warning-enabled-background-color-stroke {
  stroke: var(--warning-enabled-background-color);
}

.ob-warning-enabled-background-color-fill {
  fill: var(--warning-enabled-background-color);
}

.ob-warning-enabled-border-color-stroke {
  stroke: var(--warning-enabled-border-color);
}

.ob-warning-enabled-border-color-fill {
  fill: var(--warning-enabled-border-color);
}

.ob-warning-hover-background-color-stroke {
  stroke: var(--warning-hover-background-color);
}

.ob-warning-hover-background-color-fill {
  fill: var(--warning-hover-background-color);
}

.ob-warning-hover-border-color-stroke {
  stroke: var(--warning-hover-border-color);
}

.ob-warning-hover-border-color-fill {
  fill: var(--warning-hover-border-color);
}

.ob-warning-pressed-background-color-stroke {
  stroke: var(--warning-pressed-background-color);
}

.ob-warning-pressed-background-color-fill {
  fill: var(--warning-pressed-background-color);
}

.ob-warning-pressed-border-color-stroke {
  stroke: var(--warning-pressed-border-color);
}

.ob-warning-pressed-border-color-fill {
  fill: var(--warning-pressed-border-color);
}

.ob-warning-focused-background-color-stroke {
  stroke: var(--warning-focused-background-color);
}

.ob-warning-focused-background-color-fill {
  fill: var(--warning-focused-background-color);
}

.ob-warning-focused-border-color-stroke {
  stroke: var(--warning-focused-border-color);
}

.ob-warning-focused-border-color-fill {
  fill: var(--warning-focused-border-color);
}

.ob-warning-disabled-background-color-stroke {
  stroke: var(--warning-disabled-background-color);
}

.ob-warning-disabled-background-color-fill {
  fill: var(--warning-disabled-background-color);
}

.ob-warning-disabled-border-color-stroke {
  stroke: var(--warning-disabled-border-color);
}

.ob-warning-disabled-border-color-fill {
  fill: var(--warning-disabled-border-color);
}

.ob-on-warning-active-color-stroke {
  stroke: var(--on-warning-active-color);
}

.ob-on-warning-active-color-fill {
  fill: var(--on-warning-active-color);
}

.ob-on-warning-neutral-color-stroke {
  stroke: var(--on-warning-neutral-color);
}

.ob-on-warning-neutral-color-fill {
  fill: var(--on-warning-neutral-color);
}

.ob-on-warning-disabled-color-stroke {
  stroke: var(--on-warning-disabled-color);
}

.ob-on-warning-disabled-color-fill {
  fill: var(--on-warning-disabled-color);
}

.ob-alarm-enabled-background-color-stroke {
  stroke: var(--alarm-enabled-background-color);
}

.ob-alarm-enabled-background-color-fill {
  fill: var(--alarm-enabled-background-color);
}

.ob-alarm-enabled-border-color-stroke {
  stroke: var(--alarm-enabled-border-color);
}

.ob-alarm-enabled-border-color-fill {
  fill: var(--alarm-enabled-border-color);
}

.ob-alarm-hover-background-color-stroke {
  stroke: var(--alarm-hover-background-color);
}

.ob-alarm-hover-background-color-fill {
  fill: var(--alarm-hover-background-color);
}

.ob-alarm-hover-border-color-stroke {
  stroke: var(--alarm-hover-border-color);
}

.ob-alarm-hover-border-color-fill {
  fill: var(--alarm-hover-border-color);
}

.ob-alarm-pressed-background-color-stroke {
  stroke: var(--alarm-pressed-background-color);
}

.ob-alarm-pressed-background-color-fill {
  fill: var(--alarm-pressed-background-color);
}

.ob-alarm-pressed-border-color-stroke {
  stroke: var(--alarm-pressed-border-color);
}

.ob-alarm-pressed-border-color-fill {
  fill: var(--alarm-pressed-border-color);
}

.ob-alarm-focused-background-color-stroke {
  stroke: var(--alarm-focused-background-color);
}

.ob-alarm-focused-background-color-fill {
  fill: var(--alarm-focused-background-color);
}

.ob-alarm-focused-border-color-stroke {
  stroke: var(--alarm-focused-border-color);
}

.ob-alarm-focused-border-color-fill {
  fill: var(--alarm-focused-border-color);
}

.ob-alarm-disabled-background-color-stroke {
  stroke: var(--alarm-disabled-background-color);
}

.ob-alarm-disabled-background-color-fill {
  fill: var(--alarm-disabled-background-color);
}

.ob-alarm-disabled-border-color-stroke {
  stroke: var(--alarm-disabled-border-color);
}

.ob-alarm-disabled-border-color-fill {
  fill: var(--alarm-disabled-border-color);
}

.ob-on-alarm-active-color-stroke {
  stroke: var(--on-alarm-active-color);
}

.ob-on-alarm-active-color-fill {
  fill: var(--on-alarm-active-color);
}

.ob-on-alarm-neutral-color-stroke {
  stroke: var(--on-alarm-neutral-color);
}

.ob-on-alarm-neutral-color-fill {
  fill: var(--on-alarm-neutral-color);
}

.ob-on-alarm-disabled-color-stroke {
  stroke: var(--on-alarm-disabled-color);
}

.ob-on-alarm-disabled-color-fill {
  fill: var(--on-alarm-disabled-color);
}

.ob-critical-alarm-enabled-background-color-stroke {
  stroke: var(--critical-alarm-enabled-background-color);
}

.ob-critical-alarm-enabled-background-color-fill {
  fill: var(--critical-alarm-enabled-background-color);
}

.ob-critical-alarm-enabled-border-color-stroke {
  stroke: var(--critical-alarm-enabled-border-color);
}

.ob-critical-alarm-enabled-border-color-fill {
  fill: var(--critical-alarm-enabled-border-color);
}

.ob-critical-alarm-hover-background-color-stroke {
  stroke: var(--critical-alarm-hover-background-color);
}

.ob-critical-alarm-hover-background-color-fill {
  fill: var(--critical-alarm-hover-background-color);
}

.ob-critical-alarm-hover-border-color-stroke {
  stroke: var(--critical-alarm-hover-border-color);
}

.ob-critical-alarm-hover-border-color-fill {
  fill: var(--critical-alarm-hover-border-color);
}

.ob-critical-alarm-pressed-background-color-stroke {
  stroke: var(--critical-alarm-pressed-background-color);
}

.ob-critical-alarm-pressed-background-color-fill {
  fill: var(--critical-alarm-pressed-background-color);
}

.ob-critical-alarm-pressed-border-color-stroke {
  stroke: var(--critical-alarm-pressed-border-color);
}

.ob-critical-alarm-pressed-border-color-fill {
  fill: var(--critical-alarm-pressed-border-color);
}

.ob-critical-alarm-focused-background-color-stroke {
  stroke: var(--critical-alarm-focused-background-color);
}

.ob-critical-alarm-focused-background-color-fill {
  fill: var(--critical-alarm-focused-background-color);
}

.ob-critical-alarm-focused-border-color-stroke {
  stroke: var(--critical-alarm-focused-border-color);
}

.ob-critical-alarm-focused-border-color-fill {
  fill: var(--critical-alarm-focused-border-color);
}

.ob-critical-alarm-disabled-background-color-stroke {
  stroke: var(--critical-alarm-disabled-background-color);
}

.ob-critical-alarm-disabled-background-color-fill {
  fill: var(--critical-alarm-disabled-background-color);
}

.ob-critical-alarm-disabled-border-color-stroke {
  stroke: var(--critical-alarm-disabled-border-color);
}

.ob-critical-alarm-disabled-border-color-fill {
  fill: var(--critical-alarm-disabled-border-color);
}

.ob-on-critical-alarm-active-color-stroke {
  stroke: var(--on-critical-alarm-active-color);
}

.ob-on-critical-alarm-active-color-fill {
  fill: var(--on-critical-alarm-active-color);
}

.ob-on-critical-alarm-neutral-color-stroke {
  stroke: var(--on-critical-alarm-neutral-color);
}

.ob-on-critical-alarm-neutral-color-fill {
  fill: var(--on-critical-alarm-neutral-color);
}

.ob-on-critical-alarm-disabled-color-stroke {
  stroke: var(--on-critical-alarm-disabled-color);
}

.ob-on-critical-alarm-disabled-color-fill {
  fill: var(--on-critical-alarm-disabled-color);
}

.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

html {
  font-size: 8px;
}

* {
  box-sizing: border-box;
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.ob-icon.ob-large {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}

.ob-app-btn {
  position: relative;
  text-align: center;
}

.ob-app-btn.ob-large {
  width: 9rem;
}

.ob-app-btn.ob-large .ob-btn-icon {
  width: 9rem;
  height: 9rem;
  font-size: 5rem;
}

.ob-app-btn.ob-large .ob-label {
  width: 9rem;
}

.ob-app-btn.ob-small {
  width: 4rem;
}

.ob-app-btn.ob-small .ob-btn-icon {
  width: 4rem;
  height: 4rem;
  font-size: 2.5rem;
}

.ob-app-btn.ob-small .ob-label {
  width: 4rem;
}

.ob-app-btn .ob-btn-icon {
  background-color: var(--raised-enabled-background-color);
  border-color: var(--raised-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  color: var(--on-raised-active-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ob-app-btn .ob-btn-icon:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--raised-hover-background-color);
  border-color: var(--raised-hover-border-color);
  border-width: 0.125rem;
}

.ob-app-btn .ob-btn-icon:focus {
  background-color: var(--raised-focused-background-color);
  border-color: var(--raised-focused-background-color);
  z-index: 2;
}

.ob-app-btn .ob-btn-icon:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--raised-focused-border-color) solid;
  border-radius: 4.5rem;
}

.ob-app-btn .ob-btn-icon:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--raised-pressed-background-color);
  border-color: var(--raised-pressed-border-color);
  border-width: 0.125rem;
}

.ob-app-btn .ob-btn-icon:disabled, .ob-app-btn .ob-btn-icon.ob-disabled {
  background-color: var(--raised-disabled-background-color);
  border-color: var(--raised-disabled-border-color);
  border-width: 0.125rem;
}

.ob-app-btn .ob-btn-icon:disabled, .ob-app-btn .ob-btn-icon.ob-disabled, :disabled .ob-app-btn .ob-btn-icon, .ob-disabled .ob-app-btn .ob-btn-icon {
  color: var(--on-raised-disabled-color);
}

.ob-app-btn .ob-btn-icon:hover:not(:disabled) {
  cursor: pointer;
}

.ob-app-btn .ob-label {
  font-size: var(--font-ui-label-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-weight);
  line-height: var(--font-ui-label-line-height);
  color: var(--element-active-color);
  height: 2rem;
  margin-top: 0.5rem;
  text-align: center;
}

.ob-app-btn .ob-label:disabled, .ob-app-btn .ob-label.ob-disabled, :disabled .ob-app-btn .ob-label, .ob-disabled .ob-app-btn .ob-label {
  color: var(--on-normal-disabled-color);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-button {
  font-size: var(--font-ui-button-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-button-weight);
  line-height: var(--font-ui-button-line-height);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 12rem;
  height: 4rem;
  padding: 0 1rem;
  vertical-align: middle;
  border-radius: 0.75rem;
}

.ob-button:hover:not(:disabled) {
  cursor: pointer;
}

.ob-button .ob-label {
  margin-left: 1rem;
}

.ob-button.ob-button--icon {
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
  padding: 0;
}

.ob-button.ob-button--normal {
  color: var(--on-normal-active-color);
  background-color: var(--normal-enabled-background-color);
  border-color: var(--normal-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-button.ob-button--normal:disabled, .ob-button.ob-button--normal.ob-disabled, :disabled .ob-button.ob-button--normal, .ob-disabled .ob-button.ob-button--normal {
  color: var(--on-normal-disabled-color);
}

.ob-button.ob-button--normal:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--normal-hover-background-color);
  border-color: var(--normal-hover-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--normal:focus {
  background-color: var(--normal-focused-background-color);
  border-color: var(--normal-focused-background-color);
  z-index: 2;
}

.ob-button.ob-button--normal:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--normal-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-button.ob-button--normal:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--normal-pressed-background-color);
  border-color: var(--normal-pressed-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--normal:disabled, .ob-button.ob-button--normal.ob-disabled {
  background-color: var(--normal-disabled-background-color);
  border-color: var(--normal-disabled-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--normal .ob-icon {
  color: var(--on-normal-neutral-color);
}

.ob-button.ob-button--normal .ob-icon:disabled, .ob-button.ob-button--normal .ob-icon.ob-disabled, :disabled .ob-button.ob-button--normal .ob-icon, .ob-disabled .ob-button.ob-button--normal .ob-icon {
  color: var(--on-normal-disabled-color);
}

.ob-button.ob-button--raised {
  color: var(--on-raised-active-color);
  background-color: var(--raised-enabled-background-color);
  border-color: var(--raised-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-button.ob-button--raised:disabled, .ob-button.ob-button--raised.ob-disabled, :disabled .ob-button.ob-button--raised, .ob-disabled .ob-button.ob-button--raised {
  color: var(--on-raised-disabled-color);
}

.ob-button.ob-button--raised:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--raised-hover-background-color);
  border-color: var(--raised-hover-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--raised:focus {
  background-color: var(--raised-focused-background-color);
  border-color: var(--raised-focused-background-color);
  z-index: 2;
}

.ob-button.ob-button--raised:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--raised-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-button.ob-button--raised:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--raised-pressed-background-color);
  border-color: var(--raised-pressed-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--raised:disabled, .ob-button.ob-button--raised.ob-disabled {
  background-color: var(--raised-disabled-background-color);
  border-color: var(--raised-disabled-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--raised .ob-icon {
  color: var(--on-raised-neutral-color);
}

.ob-button.ob-button--raised .ob-icon:disabled, .ob-button.ob-button--raised .ob-icon.ob-disabled, :disabled .ob-button.ob-button--raised .ob-icon, .ob-disabled .ob-button.ob-button--raised .ob-icon {
  color: var(--on-raised-disabled-color);
}

.ob-button.ob-button--supressed {
  color: var(--on-flat-neutral-color);
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed:disabled, .ob-button.ob-button--supressed.ob-disabled, :disabled .ob-button.ob-button--supressed, .ob-disabled .ob-button.ob-button--supressed {
  color: var(--on-flat-disabled-color);
}

.ob-button.ob-button--supressed:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-button.ob-button--supressed:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-button.ob-button--supressed:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed:disabled, .ob-button.ob-button--supressed.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed .ob-icon {
  color: var(--on-flat-neutral-color);
}

.ob-button.ob-button--supressed .ob-icon:disabled, .ob-button.ob-button--supressed .ob-icon.ob-disabled, :disabled .ob-button.ob-button--supressed .ob-icon, .ob-disabled .ob-button.ob-button--supressed .ob-icon {
  color: var(--on-flat-disabled-color);
}

.ob-button.ob-button--alarm .ob-icon {
  color: var(--alert-alarm-color);
}

.ob-button.ob-button--warning .ob-icon {
  color: var(--alert-warning-color);
}

.ob-button.ob-button--caution .ob-icon {
  color: var(--alert-caution-color);
}

.ob-button .ob-button__counter {
  color: var(--element-active-color);
  position: absolute;
  right: -1rem;
  top: -1rem;
}

.ob-button .ob-button__counter:disabled, .ob-button .ob-button__counter.ob-disabled, :disabled .ob-button .ob-button__counter, .ob-disabled .ob-button .ob-button__counter {
  color: var(--on-normal-disabled-color);
}

.ob-button .ob-icon {
  margin-left: auto;
  margin-right: auto;
}

.ob-button-group {
  display: inline-flex;
  height: 4rem;
  background-color: var(--container-backdrop-color);
  border-color: var(--indent-enabled-border-color);
  border-width: 0.125rem;
  border-radius: 4rem;
}

.ob-button-group__item {
  position: relative;
  display: inline-flex;
  height: 4rem;
}

.ob-button-group__item > .ob-text-under {
  font-size: var(--font-ui-label-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-weight);
  line-height: var(--font-ui-label-line-height);
  color: var(--on-flat-neutral-color);
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(4.5rem);
}

.ob-button-group__item > .ob-text-under:disabled, .ob-button-group__item > .ob-text-under.ob-disabled, :disabled .ob-button-group__item > .ob-text-under, .ob-disabled .ob-button-group__item > .ob-text-under {
  color: var(--on-flat-disabled-color);
}

.ob-button-group__item--selected > .ob-text-under {
  font-size: var(--font-ui-label-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-active-weight);
  line-height: var(--font-ui-label-active-line-height);
  color: var(--on-flat-active-color);
}

.ob-button-group__item--selected > .ob-text-under:disabled, .ob-button-group__item--selected > .ob-text-under.ob-disabled, :disabled .ob-button-group__item--selected > .ob-text-under, .ob-disabled .ob-button-group__item--selected > .ob-text-under {
  color: var(--on-flat-disabled-color);
}

.ob-button-group__button {
  border-radius: 4rem;
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
  color: var(--on-flat-neutral-color);
}

.ob-button-group__button:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-button-group__button:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-button-group__button:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 3.5rem;
}

.ob-button-group__button:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-button-group__button:disabled, .ob-button-group__button.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-button-group__button:disabled, .ob-button-group__button.ob-disabled, :disabled .ob-button-group__button, .ob-disabled .ob-button-group__button {
  color: var(--on-flat-disabled-color);
}

.ob-button-group__item--selected > .ob-button-group__button {
  background-color: var(--normal-enabled-background-color);
  border-color: var(--normal-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  color: var(--on-normal-active-color);
}

.ob-button-group__item--selected > .ob-button-group__button:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--normal-hover-background-color);
  border-color: var(--normal-hover-border-color);
  border-width: 0.125rem;
}

.ob-button-group__item--selected > .ob-button-group__button:focus {
  background-color: var(--normal-focused-background-color);
  border-color: var(--normal-focused-background-color);
  z-index: 2;
}

.ob-button-group__item--selected > .ob-button-group__button:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--normal-focused-border-color) solid;
  border-radius: 3.5rem;
}

.ob-button-group__item--selected > .ob-button-group__button:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--normal-pressed-background-color);
  border-color: var(--normal-pressed-border-color);
  border-width: 0.125rem;
}

.ob-button-group__item--selected > .ob-button-group__button:disabled, .ob-button-group__item--selected > .ob-button-group__button.ob-disabled {
  background-color: var(--normal-disabled-background-color);
  border-color: var(--normal-disabled-border-color);
  border-width: 0.125rem;
}

.ob-button-group__item--selected > .ob-button-group__button:disabled, .ob-button-group__item--selected > .ob-button-group__button.ob-disabled, :disabled .ob-button-group__item--selected > .ob-button-group__button, .ob-disabled .ob-button-group__item--selected > .ob-button-group__button {
  color: var(--on-normal-disabled-color);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.ob-icon.ob-large {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}

.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-card {
  background-color: var(--container-background-color);
  border-radius: 0.25rem;
  display: inline-flex;
  flex-direction: column;
}

.ob-card .ob-card-header {
  display: flex;
  position: relative;
  height: 5rem;
  padding-left: 2rem;
}

.ob-card .ob-card-header .ob-card-header-title-icon {
  color: var(--element-neutral-color);
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1rem;
}

.ob-card .ob-card-header .ob-card-header-title {
  font-size: var(--font-ui-overline-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-overline-weight);
  line-height: var(--font-ui-overline-line-height);
  letter-spacing: 1.13px;
  text-transform: uppercase;
  color: var(--element-active-color);
  margin: auto 0;
}

.ob-card .ob-card-header .ob-card-header-action-icon {
  position: absolute;
  height: 100%;
  right: 0;
  width: 6rem;
  text-align: center;
  color: var(--on-flat-neutral-color);
  display: flex;
}

.ob-card .ob-card-header .ob-card-header-action-icon * {
  margin: auto;
}

.ob-card .ob-card-header .ob-card-header-action-icon::before {
  content: "";
  position: absolute;
  left: -0.125rem;
  top: calc(($card-header-height - $icon-normal-height) / 2);
  bottom: calc(($card-header-height - $icon-normal-height) / 2);
  width: 0.125rem;
  background-color: var(--border-divider-color);
}

.ob-card .ob-card-header::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  height: 0.125rem;
  bottom: -0.125rem;
  background-color: var(--border-divider-color);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-dimming-menu {
  position: relative;
  width: 34rem;
  background: var(--container-global-color);
  box-shadow: var(--shadow-floating);
  border-radius: 0 0 0.25rem 0.25rem;
}

.ob-dimming-menu .ob-section {
  padding: 2rem 3rem;
}

.ob-dimming-menu .ob-section:not(:first-child) {
  border-top: 0.125rem solid var(--border-outline-color);
}

.ob-dimming-menu .ob-section > .ob-heading {
  font-size: var(--font-ui-overline-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-overline-weight);
  line-height: var(--font-ui-overline-line-height);
  letter-spacing: 1.13px;
  text-transform: uppercase;
  color: var(--on-normal-neutral-color);
  text-transform: uppercase;
}

.ob-dimming-menu .ob-section > .ob-heading:disabled, .ob-dimming-menu .ob-section > .ob-heading.ob-disabled, :disabled .ob-dimming-menu .ob-section > .ob-heading, .ob-disabled .ob-dimming-menu .ob-section > .ob-heading {
  color: var(--on-normal-disabled-color);
}

.ob-dimming-menu .ob-section.ob-list-item {
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
  display: flex;
}

.ob-dimming-menu .ob-section.ob-list-item:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-dimming-menu .ob-section.ob-list-item:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-dimming-menu .ob-section.ob-list-item:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-dimming-menu .ob-section.ob-list-item:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-dimming-menu .ob-section.ob-list-item:disabled, .ob-dimming-menu .ob-section.ob-list-item.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-dimming-menu .ob-section.ob-list-item:hover:not(:disabled) {
  cursor: pointer;
}

.ob-dimming-menu .ob-section.ob-list-item:not(:first-child) {
  border-top: 0.125rem solid var(--border-outline-color);
}

.ob-dimming-menu .ob-section.ob-list-item .ob-label {
  font-size: var(--font-ui-button-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-button-weight);
  line-height: var(--font-ui-button-line-height);
  color: var(--on-normal-active-color);
  margin-right: auto;
  margin-left: 2.5rem;
}

.ob-dimming-menu .ob-section.ob-list-item .ob-label:disabled, .ob-dimming-menu .ob-section.ob-list-item .ob-label.ob-disabled, :disabled .ob-dimming-menu .ob-section.ob-list-item .ob-label, .ob-disabled .ob-dimming-menu .ob-section.ob-list-item .ob-label {
  color: var(--on-normal-disabled-color);
}

.ob-dimming-menu .ob-section.ob-list-item .ob-icon {
  color: var(--on-normal-neutral-color);
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.ob-dimming-menu .ob-section.ob-list-item .ob-icon:disabled, .ob-dimming-menu .ob-section.ob-list-item .ob-icon.ob-disabled, :disabled .ob-dimming-menu .ob-section.ob-list-item .ob-icon, .ob-disabled .ob-dimming-menu .ob-section.ob-list-item .ob-icon {
  color: var(--on-normal-disabled-color);
}

.ob-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.ob-icon.ob-large {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-button {
  font-size: var(--font-ui-button-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-button-weight);
  line-height: var(--font-ui-button-line-height);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 12rem;
  height: 4rem;
  padding: 0 1rem;
  vertical-align: middle;
  border-radius: 0.75rem;
}

.ob-button:hover:not(:disabled) {
  cursor: pointer;
}

.ob-button .ob-label {
  margin-left: 1rem;
}

.ob-button.ob-button--icon {
  width: 4rem;
  min-width: 4rem;
  height: 4rem;
  padding: 0;
}

.ob-button.ob-button--normal {
  color: var(--on-normal-active-color);
  background-color: var(--normal-enabled-background-color);
  border-color: var(--normal-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-button.ob-button--normal:disabled, .ob-button.ob-button--normal.ob-disabled, :disabled .ob-button.ob-button--normal, .ob-disabled .ob-button.ob-button--normal {
  color: var(--on-normal-disabled-color);
}

.ob-button.ob-button--normal:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--normal-hover-background-color);
  border-color: var(--normal-hover-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--normal:focus {
  background-color: var(--normal-focused-background-color);
  border-color: var(--normal-focused-background-color);
  z-index: 2;
}

.ob-button.ob-button--normal:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--normal-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-button.ob-button--normal:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--normal-pressed-background-color);
  border-color: var(--normal-pressed-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--normal:disabled, .ob-button.ob-button--normal.ob-disabled {
  background-color: var(--normal-disabled-background-color);
  border-color: var(--normal-disabled-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--normal .ob-icon {
  color: var(--on-normal-neutral-color);
}

.ob-button.ob-button--normal .ob-icon:disabled, .ob-button.ob-button--normal .ob-icon.ob-disabled, :disabled .ob-button.ob-button--normal .ob-icon, .ob-disabled .ob-button.ob-button--normal .ob-icon {
  color: var(--on-normal-disabled-color);
}

.ob-button.ob-button--raised {
  color: var(--on-raised-active-color);
  background-color: var(--raised-enabled-background-color);
  border-color: var(--raised-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-button.ob-button--raised:disabled, .ob-button.ob-button--raised.ob-disabled, :disabled .ob-button.ob-button--raised, .ob-disabled .ob-button.ob-button--raised {
  color: var(--on-raised-disabled-color);
}

.ob-button.ob-button--raised:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--raised-hover-background-color);
  border-color: var(--raised-hover-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--raised:focus {
  background-color: var(--raised-focused-background-color);
  border-color: var(--raised-focused-background-color);
  z-index: 2;
}

.ob-button.ob-button--raised:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--raised-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-button.ob-button--raised:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--raised-pressed-background-color);
  border-color: var(--raised-pressed-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--raised:disabled, .ob-button.ob-button--raised.ob-disabled {
  background-color: var(--raised-disabled-background-color);
  border-color: var(--raised-disabled-border-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--raised .ob-icon {
  color: var(--on-raised-neutral-color);
}

.ob-button.ob-button--raised .ob-icon:disabled, .ob-button.ob-button--raised .ob-icon.ob-disabled, :disabled .ob-button.ob-button--raised .ob-icon, .ob-disabled .ob-button.ob-button--raised .ob-icon {
  color: var(--on-raised-disabled-color);
}

.ob-button.ob-button--supressed {
  color: var(--on-flat-neutral-color);
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed:disabled, .ob-button.ob-button--supressed.ob-disabled, :disabled .ob-button.ob-button--supressed, .ob-disabled .ob-button.ob-button--supressed {
  color: var(--on-flat-disabled-color);
}

.ob-button.ob-button--supressed:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-button.ob-button--supressed:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-button.ob-button--supressed:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed:disabled, .ob-button.ob-button--supressed.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-button.ob-button--supressed .ob-icon {
  color: var(--on-flat-neutral-color);
}

.ob-button.ob-button--supressed .ob-icon:disabled, .ob-button.ob-button--supressed .ob-icon.ob-disabled, :disabled .ob-button.ob-button--supressed .ob-icon, .ob-disabled .ob-button.ob-button--supressed .ob-icon {
  color: var(--on-flat-disabled-color);
}

.ob-button.ob-button--alarm .ob-icon {
  color: var(--alert-alarm-color);
}

.ob-button.ob-button--warning .ob-icon {
  color: var(--alert-warning-color);
}

.ob-button.ob-button--caution .ob-icon {
  color: var(--alert-caution-color);
}

.ob-button .ob-button__counter {
  color: var(--element-active-color);
  position: absolute;
  right: -1rem;
  top: -1rem;
}

.ob-button .ob-button__counter:disabled, .ob-button .ob-button__counter.ob-disabled, :disabled .ob-button .ob-button__counter, .ob-disabled .ob-button .ob-button__counter {
  color: var(--on-normal-disabled-color);
}

.ob-button .ob-icon {
  margin-left: auto;
  margin-right: auto;
}

.ob-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.ob-icon.ob-large {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}

.ob-nav-top-bar {
  box-shadow: var(--shadow-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 6rem;
  background-color: var(--container-global-color);
  color: var(--element-active-color);
}

.ob-nav-top-bar:disabled, .ob-nav-top-bar.ob-disabled, :disabled .ob-nav-top-bar, .ob-disabled .ob-nav-top-bar {
  color: var(--on-normal-disabled-color);
}

.ob-nav-top-bar .ob-menu-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item {
  height: 100%;
  padding: 0 calc(($nav-top-bar-height - $nav-btn-height) / 2);
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item > * {
  margin: 0 calc(($nav-top-bar-spacing / 2));
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item > *:first-child {
  margin-left: 0;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item > *:last-child {
  margin-right: 0;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active {
  font-size: var(--font-ui-body-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-active-weight);
  line-height: var(--font-ui-body-active-line-height);
  background-color: var(--selected-enabled-background-color);
  border-color: var(--selected-enabled-background-color);
  border-style: solid;
  border-width: 0.125rem;
  color: var(--on-selected-active-color);
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--selected-hover-background-color);
  border-color: var(--selected-hover-border-color);
  border-width: 0.125rem;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active:focus {
  background-color: var(--selected-focused-background-color);
  border-color: var(--selected-focused-background-color);
  z-index: 2;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--selected-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--selected-pressed-background-color);
  border-color: var(--selected-pressed-border-color);
  border-width: 0.125rem;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active:disabled, .ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active.ob-disabled {
  background-color: var(--selected-disabled-background-color);
  border-color: var(--selected-disabled-border-color);
  border-width: 0.125rem;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active:disabled, .ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active.ob-disabled, :disabled .ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active, .ob-disabled .ob-nav-top-bar .ob-menu-container .ob-nav-item.ob-active {
  color: var(--on-selected-disabled-color);
}

.ob-nav-top-bar .ob-menu-container .ob-button {
  margin: 0 1rem;
}

.ob-nav-top-bar .ob-menu-container .ob-nav-top-bar__apps > * {
  margin: 0 1rem;
}

.ob-nav-top-bar .ob-menu-container .ob-clock {
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
  color: var(--on-normal-active-color);
  margin: 0 2rem;
}

.ob-nav-top-bar .ob-menu-container .ob-clock:disabled, .ob-nav-top-bar .ob-menu-container .ob-clock.ob-disabled, :disabled .ob-nav-top-bar .ob-menu-container .ob-clock, .ob-disabled .ob-nav-top-bar .ob-menu-container .ob-clock {
  color: var(--on-normal-disabled-color);
}

.ob-nav-top-bar .ob-menu-container .ob-divider {
  width: 0.125rem;
  height: 4rem;
  background-color: var(--border-divider-color);
}

.ob-nav-top-bar .ob-menu-container .ob-title {
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
  margin-left: 2rem;
}

.ob-nav-top-bar .ob-menu-container .ob-sub-title {
  font-size: var(--font-ui-body-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-active-weight);
  line-height: var(--font-ui-body-active-line-height);
  margin-left: 2rem;
}

.ob-nav-menu {
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
  box-shadow: var(--shadow-floating);
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 5.75rem;
  bottom: 0;
  left: 0;
  width: 40rem;
  background-color: var(--container-global-color);
}

.ob-nav-menu .ob-nav-menu-body {
  flex-grow: 1;
}

.ob-nav-menu .ob-nav-menu-footer {
  width: 100%;
  border-top: 0.125rem solid var(--border-outline-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item {
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
  position: relative;
  height: 6rem;
  display: flex;
  flex-direction: row;
  padding: 1.5rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item:disabled, .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item:hover:not(:disabled) {
  cursor: pointer;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__icon {
  color: var(--on-flat-neutral-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__icon:disabled, .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__icon.ob-disabled, :disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__icon, .ob-disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__icon {
  color: var(--on-flat-disabled-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__label {
  color: var(--on-flat-active-color);
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
  margin-left: 1rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__label:disabled, .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__label.ob-disabled, :disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__label, .ob-disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__label {
  color: var(--on-flat-disabled-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-item .ob-nav-menu-footer-item__divider {
  position: absolute;
  right: -0.125rem;
  left: 5.5rem;
  bottom: -0.125rem;
  height: 0.125rem;
  background-color: var(--border-divider-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding {
  height: 12rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__icon {
  color: var(--on-flat-neutral-color);
  height: 6.25rem;
  font-size: 6.25rem;
  line-height: 6.25rem;
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__icon:disabled, .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__icon.ob-disabled, :disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__icon, .ob-disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__icon {
  color: var(--on-flat-disabled-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__name {
  color: var(--on-flat-neutral-color);
}

.ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__name:disabled, .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__name.ob-disabled, :disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__name, .ob-disabled .ob-nav-menu .ob-nav-menu-footer .ob-nav-menu-footer-branding .ob-nav-menu-footer-branding__name {
  color: var(--on-flat-disabled-color);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
}

.ob-icon.ob-large {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}

.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-nav-list-item {
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
  display: flex;
  position: relative;
  width: 100%;
  height: 6rem;
  padding-left: 1.375rem;
}

.ob-nav-list-item:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-nav-list-item:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-nav-list-item:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 0.5rem;
}

.ob-nav-list-item:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-nav-list-item:disabled, .ob-nav-list-item.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-nav-list-item:hover:not(:disabled) {
  cursor: pointer;
}

.ob-nav-list-item.ob-level-2 {
  padding-left: 3.875rem;
}

.ob-nav-list-item.ob-level-3 {
  padding-left: 7.875rem;
}

.ob-nav-list-item.ob-nav-list-item--icon {
  width: 6rem;
  padding-left: 0;
}

.ob-nav-list-item.ob-nav-list-item--icon .ob-nav-list-item__icon {
  margin: auto;
}

.ob-nav-list-item.ob-nav-list-item--icon .ob-badge {
  right: 0.375rem;
  padding: 0 0.25rem;
  width: unset;
}

.ob-nav-list-item.ob-nav-list-item--icon .ob-badge.ob-badge--alarm {
  top: 0.375rem;
}

.ob-nav-list-item.ob-nav-list-item--icon .ob-badge.ob-badge--alarm .ob-text {
  position: relative;
}

.ob-nav-list-item.ob-nav-list-item--icon .ob-badge.ob-badge--in-command {
  bottom: 0.375rem;
}

.ob-nav-list-item .ob-icon {
  color: var(--on-flat-neutral-color);
  margin-top: auto;
  margin-bottom: auto;
}

.ob-nav-list-item .ob-icon:disabled, .ob-nav-list-item .ob-icon.ob-disabled, :disabled .ob-nav-list-item .ob-icon, .ob-disabled .ob-nav-list-item .ob-icon {
  color: var(--on-flat-disabled-color);
}

.ob-nav-list-item .ob-icon:not(:first-child) {
  margin-left: 1rem;
}

.ob-nav-list-item .ob-label {
  color: var(--on-flat-active-color);
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  flex-grow: 1;
}

.ob-nav-list-item .ob-label:disabled, .ob-nav-list-item .ob-label.ob-disabled, :disabled .ob-nav-list-item .ob-label, .ob-disabled .ob-nav-list-item .ob-label {
  color: var(--on-flat-disabled-color);
}

.ob-nav-list-item .ob-label:not(:first-child) {
  margin-left: 1rem;
}

.ob-nav-list-item .ob-label:after {
  position: absolute;
  left: 0;
  bottom: calc(var(--font-ui-body-line-height) / 2 - 3rem);
  content: "";
  height: 0.125rem;
  width: 100%;
  border-radius: 0.125rem;
  background-color: var(--border-divider-color);
}

.ob-nav-list-item.ob-active .ob-label {
  font-size: var(--font-ui-body-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-active-weight);
  line-height: var(--font-ui-body-active-line-height);
}

.ob-nav-list-item .ob-badge {
  position: absolute;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  right: 0.875rem;
}

.ob-nav-list-item .ob-badge.ob-badge--alarm {
  font-size: var(--font-ui-label-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-active-weight);
  line-height: var(--font-ui-label-active-line-height);
  color: var(--element-active-color);
  top: 0.875rem;
  background-color: var(--alert-alarm-color);
}

.ob-nav-list-item .ob-badge.ob-badge--alarm:disabled, .ob-nav-list-item .ob-badge.ob-badge--alarm.ob-disabled, :disabled .ob-nav-list-item .ob-badge.ob-badge--alarm, .ob-disabled .ob-nav-list-item .ob-badge.ob-badge--alarm {
  color: var(--element-disabled-color);
}

.ob-nav-list-item .ob-badge.ob-badge--alarm .ob-text {
  top: calc(0.75rem - var(--font-ui-label-active-line-height) / 2);
  position: absolute;
  text-align: center;
  width: 2.5rem;
}

.ob-nav-list-item .ob-badge.ob-badge--in-command {
  color: var(--element-active-color);
  bottom: 0.875rem;
  background-color: var(--instrument-dynamic-color);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.ob-nav-list-item .ob-badge.ob-badge--in-command:disabled, .ob-nav-list-item .ob-badge.ob-badge--in-command.ob-disabled, :disabled .ob-nav-list-item .ob-badge.ob-badge--in-command, .ob-disabled .ob-nav-list-item .ob-badge.ob-badge--in-command {
  color: var(--element-disabled-color);
}

.ob-nav-list-item .ob-badge.ob-badge--in-command .ob-icon {
  color: var(--element-active-color);
  line-height: 1.25rem;
  font-size: 1.25rem;
  color: var(--element-active-inverted-color);
  margin: auto;
  position: relative;
  top: 0.125rem;
}

.ob-nav-list-item .ob-badge.ob-badge--in-command .ob-icon:disabled, .ob-nav-list-item .ob-badge.ob-badge--in-command .ob-icon.ob-disabled, :disabled .ob-nav-list-item .ob-badge.ob-badge--in-command .ob-icon, .ob-disabled .ob-nav-list-item .ob-badge.ob-badge--in-command .ob-icon {
  color: var(--element-disabled-color);
}

.ob-nav-list-item .ob-nav-list-item__flyout {
  position: absolute;
  right: 0;
}

.ob-nav-list-item.ob-nav-list-item--icon .ob-nav-list-item__flyout {
  right: calc((1 * $base-size - $icon-normal-height) / 2);
  top: calc(($nav-list-item-height - $icon-normal-height) / 2);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-slider .ob-slider__container {
  height: 4rem;
  width: 100%;
  display: flex;
  position: relative;
}

.ob-slider .ob-slider__container:hover:not(:disabled) {
  cursor: pointer;
}

.ob-slider .ob-slider__track {
  background-color: var(--indent-enabled-background-color);
  border-color: var(--indent-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  border-radius: 0.75rem;
  position: absolute;
  width: 100%;
  height: 0.5rem;
  top: calc($slider-height / 2 - $slider-track-height / 2);
}

.ob-slider .ob-slider__track:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--indent-hover-background-color);
  border-color: var(--indent-hover-border-color);
  border-width: 0.125rem;
}

.ob-slider .ob-slider__track:focus {
  background-color: var(--indent-focused-background-color);
  border-color: var(--indent-focused-background-color);
  z-index: 2;
}

.ob-slider .ob-slider__track:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--indent-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-slider .ob-slider__track:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--indent-pressed-background-color);
  border-color: var(--indent-pressed-border-color);
  border-width: 0.125rem;
}

.ob-slider .ob-slider__track:disabled, .ob-slider .ob-slider__track.ob-disabled {
  background-color: var(--indent-disabled-background-color);
  border-color: var(--indent-disabled-border-color);
  border-width: 0.125rem;
}

.ob-slider .ob-slider__track--selected {
  background: var(--element-active-color);
  border-radius: 0.75rem;
  position: absolute;
  left: 0;
  height: 0.5rem;
  top: calc($slider-height / 2 - $slider-track-height / 2);
}

.ob-slider .ob-slider__item {
  font-size: var(--font-ui-button-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-button-weight);
  line-height: var(--font-ui-button-line-height);
  background-color: var(--amplified-enabled-background-color);
  border-color: var(--amplified-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  color: var(--on-amplified-active-color);
  z-index: 2;
  position: absolute;
  border-radius: 0.75rem;
  text-align: center;
  padding: 0.375rem;
  width: 6rem;
  height: 4rem;
}

.ob-slider .ob-slider__item:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--amplified-hover-background-color);
  border-color: var(--amplified-hover-border-color);
  border-width: 0.125rem;
}

.ob-slider .ob-slider__item:focus {
  background-color: var(--amplified-focused-background-color);
  border-color: var(--amplified-focused-background-color);
  z-index: 2;
}

.ob-slider .ob-slider__item:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--amplified-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-slider .ob-slider__item:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--amplified-pressed-background-color);
  border-color: var(--amplified-pressed-border-color);
  border-width: 0.125rem;
}

.ob-slider .ob-slider__item:disabled, .ob-slider .ob-slider__item.ob-disabled {
  background-color: var(--amplified-disabled-background-color);
  border-color: var(--amplified-disabled-border-color);
  border-width: 0.125rem;
}

.ob-slider .ob-slider__item:disabled, .ob-slider .ob-slider__item.ob-disabled, :disabled .ob-slider .ob-slider__item, .ob-disabled .ob-slider .ob-slider__item {
  color: var(--on-amplified-disabled-color);
}

.ob-global-surface {
  margin: 0;
  background-color: var(--container-background-color);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__container {
  background: var(--indent-enabled-background-color);
  display: flex;
  border-radius: 0.75rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__container:hover:not(:disabled) {
  cursor: pointer;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item {
  background-color: var(--flat-enabled-background-color);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.125rem;
  border-radius: 0.75rem;
  min-width: 6rem;
  height: 4rem;
  flex-basis: 0;
  flex-grow: 1;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--flat-hover-background-color);
  border-width: 0.125rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item:focus {
  background-color: var(--flat-focused-background-color);
  border-color: var(--flat-focused-background-color);
  z-index: 2;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--flat-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--flat-pressed-background-color);
  border-width: 0.125rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item:disabled, .ob-toggle-button-icon .ob-toggle-button-icon__item.ob-disabled {
  background-color: var(--flat-disabled-background-color);
  border-width: 0.125rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item .ob-icon {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  margin: 0.375rem auto;
  color: var(--on-normal-neutral-color);
}

.ob-toggle-button-icon .ob-toggle-button-icon__item .ob-icon:disabled, .ob-toggle-button-icon .ob-toggle-button-icon__item .ob-icon.ob-disabled, :disabled .ob-toggle-button-icon .ob-toggle-button-icon__item .ob-icon, .ob-disabled .ob-toggle-button-icon .ob-toggle-button-icon__item .ob-icon {
  color: var(--on-normal-disabled-color);
}

.ob-toggle-button-icon .ob-toggle-button-icon__item .ob-label {
  font-size: var(--font-ui-label-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-weight);
  line-height: var(--font-ui-label-line-height);
  color: var(--on-normal-active-color);
  text-align: center;
  height: 3rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item .ob-label:disabled, .ob-toggle-button-icon .ob-toggle-button-icon__item .ob-label.ob-disabled, :disabled .ob-toggle-button-icon .ob-toggle-button-icon__item .ob-label, .ob-disabled .ob-toggle-button-icon .ob-toggle-button-icon__item .ob-label {
  color: var(--on-normal-disabled-color);
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected {
  background-color: var(--amplified-enabled-background-color);
  border-color: var(--amplified-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  border-radius: 0.75rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--amplified-hover-background-color);
  border-color: var(--amplified-hover-border-color);
  border-width: 0.125rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected:focus {
  background-color: var(--amplified-focused-background-color);
  border-color: var(--amplified-focused-background-color);
  z-index: 2;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--amplified-focused-border-color) solid;
  border-radius: 1.25rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--amplified-pressed-background-color);
  border-color: var(--amplified-pressed-border-color);
  border-width: 0.125rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected:disabled, .ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected.ob-disabled {
  background-color: var(--amplified-disabled-background-color);
  border-color: var(--amplified-disabled-border-color);
  border-width: 0.125rem;
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected .ob-label {
  font-size: var(--font-ui-label-active-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-label-active-weight);
  line-height: var(--font-ui-label-active-line-height);
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected .ob-icon {
  color: var(--on-normal-active-color);
}

.ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected .ob-icon:disabled, .ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected .ob-icon.ob-disabled, :disabled .ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected .ob-icon, .ob-disabled .ob-toggle-button-icon .ob-toggle-button-icon__item.ob-selected .ob-icon {
  color: var(--on-normal-disabled-color);
}

/**
  This file resets default behavior in browsers.
 */
:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

/* stylelint-disable-line meowtec/no-px */
.ob-visually-hidden {
  position: absolute;
  width: 1px;
  /* stylelint-disable-line meowtec/no-px */
  height: 1px;
  /* stylelint-disable-line meowtec/no-px */
  padding: 0;
  margin: -1px;
  /* stylelint-disable-line meowtec/no-px */
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none;
  /* stylelint-disable-line property-no-vendor-prefix */
}

/** Use this function for unit testing
 *  Sets content to $tag, so that getCalculatedStyle can be used to assert the style with highest priority.
 */
.ob-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ob-toggle-switch__label {
  font-size: var(--font-ui-body-size);
  font-family: "Open Sans", sans-serif;
  font-weight: var(--font-ui-body-weight);
  line-height: var(--font-ui-body-line-height);
  color: var(--on-normal-active-color);
}

.ob-toggle-switch__label:disabled, .ob-toggle-switch__label.ob-disabled, :disabled .ob-toggle-switch__label, .ob-disabled .ob-toggle-switch__label {
  color: var(--on-normal-disabled-color);
}

.ob-toggle-switch {
  position: relative;
  width: 100%;
  height: 6rem;
}

.ob-toggle-switch .ob-toggle-switch__label {
  position: absolute;
  left: 0;
  margin: 1.5rem 0;
}

.ob-toggle-switch .ob-toggle-switch__button {
  position: absolute;
  right: 0;
  margin: 1.5rem 0;
}

.ob-toggle-switch .ob-toggle-switch__divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.125rem;
  top: 5.875rem;
  background: var(--border-divider-color);
}

.ob-toggle-switch__button {
  background-color: var(--indent-enabled-background-color);
  border-color: var(--indent-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 3rem;
  border-radius: 3rem;
}

.ob-toggle-switch__button:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--indent-hover-background-color);
  border-color: var(--indent-hover-border-color);
  border-width: 0.125rem;
}

.ob-toggle-switch__button:focus {
  background-color: var(--indent-focused-background-color);
  border-color: var(--indent-focused-background-color);
  z-index: 2;
}

.ob-toggle-switch__button:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--indent-focused-border-color) solid;
  border-radius: 2rem;
}

.ob-toggle-switch__button:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--indent-pressed-background-color);
  border-color: var(--indent-pressed-border-color);
  border-width: 0.125rem;
}

.ob-toggle-switch__button:disabled, .ob-toggle-switch__button.ob-disabled {
  background-color: var(--indent-disabled-background-color);
  border-color: var(--indent-disabled-border-color);
  border-width: 0.125rem;
}

.ob-toggle-switch__button:hover:not(:disabled) {
  cursor: pointer;
}

.ob-toggle-switch__button.ob-selected {
  background-color: var(--selected-enabled-background-color);
  border-color: var(--selected-enabled-background-color);
  border-style: solid;
  border-width: 0.125rem;
}

.ob-toggle-switch__button.ob-selected:hover:not(:disabled):not(.ob-disabled) {
  z-index: 1;
  background-color: var(--selected-hover-background-color);
  border-color: var(--selected-hover-border-color);
  border-width: 0.125rem;
}

.ob-toggle-switch__button.ob-selected:focus {
  background-color: var(--selected-focused-background-color);
  border-color: var(--selected-focused-background-color);
  z-index: 2;
}

.ob-toggle-switch__button.ob-selected:focus::before {
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  z-index: 2;
  width: calc(100% + 0.25rem);
  height: calc(100% + 0.25rem);
  margin: -0.5rem;
  content: "";
  border: 0.5rem var(--selected-focused-border-color) solid;
  border-radius: 2rem;
}

.ob-toggle-switch__button.ob-selected:active:not(:disabled):not(.ob-disabled) {
  background-color: var(--selected-pressed-background-color);
  border-color: var(--selected-pressed-border-color);
  border-width: 0.125rem;
}

.ob-toggle-switch__button.ob-selected:disabled, .ob-toggle-switch__button.ob-selected.ob-disabled {
  background-color: var(--selected-disabled-background-color);
  border-color: var(--selected-disabled-border-color);
  border-width: 0.125rem;
}

.ob-toggle-switch__button .ob-toggle-switch__thumb {
  border-color: var(--thumb-enabled-border-color);
  border-style: solid;
  border-width: 0.125rem;
  position: absolute;
  left: -0.125rem;
  width: 3rem;
  height: 3rem;
  border-radius: 3rem;
}

.ob-toggle-switch__button .ob-toggle-switch__thumb::after {
  background-color: var(--thumb-enabled-background-color);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.ob-toggle-switch__button.ob-selected .ob-toggle-switch__thumb {
  right: -0.125rem;
  left: unset;
}

.ob-toggle-switch__button.ob-disabled .ob-toggle-switch__thumb,
.ob-toggle-switch__button:disabled .ob-toggle-switch__thumb {
  background: var(--on-indent-disabled-color);
  border-width: 0;
  width: 2rem;
  height: 2rem;
  left: 0.375rem;
}

.ob-toggle-switch__button.ob-disabled .ob-toggle-switch__thumb::after,
.ob-toggle-switch__button:disabled .ob-toggle-switch__thumb::after {
  background-color: unset;
}

.ob-toggle-switch__button.ob-disabled.ob-selected .ob-toggle-switch__thumb,
.ob-toggle-switch__button:disabled.ob-selected .ob-toggle-switch__thumb {
  background: var(--on-selected-disabled-color);
  left: unset;
  right: 0.375rem;
}

:root[theme=night] {
  --element-active-color: rgb(71, 71, 0);
  --element-neutral-color: rgba(71, 71, 0, .650);
  --element-inactive-color: rgba(71, 71, 0, .450);
  --element-disabled-color: rgba(71, 71, 0, .250);
  --element-active-inverted-color: rgb(0, 0, 0);
  --element-neutral-inverted-color: rgba(0, 0, 0, .600);
  --element-inactive-inverted-color: rgba(0, 0, 0, .400);
  --element-disabled-inverted-color: rgba(0, 0, 0, .200);
  --container-backdrop-color: rgb(5, 5, 0);
  --container-section-color: rgb(0, 0, 0);
  --container-background-color: rgb(0, 0, 0);
  --container-global-color: rgb(10, 10, 0);
  --container-overlay-color: rgba(0, 0, 0, .300);
  --border-divider-color: rgba(71, 71, 0, .200);
  --border-outline-color: rgba(71, 71, 0, .200);
  --border-edge-color: rgba(71, 71, 0, .100);
  --border-silhouette-color: rgb(0, 0, 0);
  --border-icon-outline-color: rgba(0, 0, 0, .500);
  --border-solid-color: rgb(46, 46, 0);
  --instrument-enhanced-primary-color: rgb(0, 77, 32);
  --instrument-enhanced-secondary-color: rgb(0, 51, 21);
  --instrument-enhanced-tertiary-color: rgba(0, 51, 17, .200);
  --instrument-regular-primary-color: rgb(71, 71, 0);
  --instrument-regular-secondary-color: rgb(51, 51, 0);
  --instrument-regular-tertiary-color: rgba(51, 51, 0, .150);
  --instrument-frame-primary-color: rgb(10, 10, 0);
  --instrument-frame-secondary-color: rgb(0, 0, 0);
  --instrument-frame-tertiary-color: rgb(33, 36, 0);
  --instrument-tick-mark-primary-color: rgb(71, 71, 0);
  --instrument-tick-mark-secondary-color: rgb(51, 51, 0);
  --instrument-tick-mark-tertiary-color: rgb(36, 36, 0);
  --instrument-starboard-color: rgb(12, 39, 33);
  --instrument-port-color: rgb(43, 18, 27);
  --alert-running-color: rgb(23, 56, 0);
  --alert-caution-color: rgb(92, 69, 0);
  --alert-warning-color: rgb(92, 44, 0);
  --alert-alarm-color: rgb(77, 0, 5);
  --alert-critical-alarm-color: rgb(76, 0, 77);
  --alert-limit-primary-color: rgba(0, 0, 0, .200);
  --alert-limit-secondary-color: rgba(0, 0, 0, .200);
  --automation-device-primary-color: rgb(71, 71, 0);
  --automation-device-secondary-color: rgb(26, 26, 0);
  --automation-device-tertiary-color: rgb(0, 0, 0);
  --automation-device-primary-inverted-color: rgb(0, 0, 0);
  --automation-device-secondary-inverted-color: rgb(10, 10, 0);
  --automation-device-tertiary-inverted-color: rgb(51, 51, 0);
  --automation-pipe-primary-color: rgb(31, 31, 0);
  --automation-pipe-secondary-color: rgb(15, 15, 0);
  --automation-pipe-tertiary-color: rgb(0, 0, 0);
  --automation-pipe-primary-inverted-color: rgb(0, 0, 0);
  --automation-pipe-secondary-inverted-color: rgb(15, 15, 0);
  --automation-pipe-tertiary-inverted-color: rgb(32, 32, 0);
  --automation-pipe-overlay-color: rgba(0, 0, 0, .200);
  --automation-pipe-disabled-color: rgba(0, 0, 0, .100);
  --automation-acid-alkalis: rgb(21, 18, 23);
  --automation-air-ventilation: rgb(20, 20, 20);
  --automation-fire-fighting: rgb(25, 16, 18);
  --automation-flammable-gas: rgb(25, 26, 15);
  --automation-fresh-water: rgb(16, 23, 25);
  --automation-fuel: rgb(27, 20, 13);
  --automation-masses: rgb(23, 20, 17);
  --automation-non-flammable-gas: rgb(31, 34, 27);
  --automation-oil: rgb(30, 26, 11);
  --automation-sea-water: rgb(17, 24, 23);
  --automation-steam: rgb(19, 20, 21);
  --automation-waste-media: rgb(20, 20, 20);
  --normal-enabled-background-color: rgb(0, 0, 0);
  --normal-enabled-border-color: rgb(26, 26, 0);
  --normal-hover-background-color: rgb(0, 0, 0);
  --normal-hover-border-color: rgb(36, 36, 0);
  --normal-pressed-background-color: rgb(0, 0, 0);
  --normal-pressed-border-color: rgb(15, 15, 0);
  --normal-focused-background-color: rgb(0, 0, 0);
  --normal-focused-border-color: rgba(0, 51, 21, .500);
  --normal-disabled-background-color: rgba(255, 255, 255, .00);
  --normal-disabled-border-color: rgb(10, 10, 0);
  --normal-activated-background-color: rgba(71, 71, 0, .120);
  --normal-activated-border-color: rgb(0, 0, 0);
  --on-normal-active-color: rgb(71, 71, 0);
  --on-normal-neutral-color: rgba(71, 71, 0, .650);
  --on-normal-disabled-color: rgba(71, 71, 0, .350);
  --raised-enabled-background-color: rgb(15, 15, 0);
  --raised-enabled-border-color: rgb(26, 26, 0);
  --raised-hover-background-color: rgb(15, 15, 0);
  --raised-hover-border-color: rgb(36, 36, 0);
  --raised-pressed-background-color: rgb(0, 0, 0);
  --raised-pressed-border-color: rgb(15, 15, 0);
  --raised-focused-background-color: rgb(15, 15, 0);
  --raised-focused-border-color: rgba(0, 51, 21, .500);
  --raised-disabled-background-color: rgba(0, 0, 0, .00);
  --raised-disabled-border-color: rgb(10, 10, 0);
  --on-raised-active-color: rgb(71, 71, 0);
  --on-raised-neutral-color: rgb(51, 51, 0);
  --on-raised-disabled-color: rgba(71, 71, 0, .350);
  --indent-enabled-background-color: rgb(0, 0, 0);
  --indent-enabled-border-color: rgba(71, 71, 0, .300);
  --indent-hover-background-color: rgba(0, 0, 0, .00);
  --indent-hover-border-color: rgb(25, 26, 0);
  --indent-pressed-background-color: rgba(0, 0, 0, .00);
  --indent-pressed-border-color: rgb(10, 10, 0);
  --indent-focused-background-color: rgba(0, 0, 0, .00);
  --indent-focused-border-color: rgba(0, 51, 21, .500);
  --indent-disabled-background-color: rgba(0, 0, 0, .00);
  --indent-disabled-border-color: rgba(0, 0, 0, .100);
  --on-indent-active-color: rgb(71, 71, 0);
  --on-indent-neutral-color: rgb(51, 51, 0);
  --on-indent-disabled-color: rgb(18, 18, 0);
  --flat-enabled-background-color: rgba(255, 255, 255, .00);
  --flat-enabled-border-color: rgba(0, 0, 0, .00);
  --flat-hover-background-color: rgba(0, 0, 0, .00);
  --flat-hover-border-color: rgb(26, 26, 0);
  --flat-pressed-background-color: rgba(0, 0, 0, .00);
  --flat-pressed-border-color: rgb(15, 15, 0);
  --flat-focused-background-color: rgba(0, 0, 0, .00);
  --flat-focused-border-color: rgba(0, 51, 21, .500);
  --flat-disabled-background-color: rgba(0, 0, 0, .00);
  --flat-disabled-border-color: rgba(0, 0, 0, .00);
  --flat-activated-background-color: rgb(15, 15, 0);
  --flat-activated-border-color: rgba(0, 0, 0, .00);
  --flat-checked-background-color: rgba(0, 71, 30, .150);
  --flat-checked-border-color: rgba(15, 74, 163, .00);
  --on-flat-active-color: rgb(71, 71, 0);
  --on-flat-neutral-color: rgb(51, 51, 0);
  --on-flat-disabled-color: rgba(97, 107, 46, .200);
  --selected-enabled-background-color: rgb(0, 10, 4);
  --selected-enabled-border-color: rgb(0, 51, 21);
  --selected-hover-background-color: rgb(0, 10, 4);
  --selected-hover-border-color: rgb(0, 61, 26);
  --selected-pressed-background-color: rgb(0, 10, 4);
  --selected-pressed-border-color: rgb(0, 41, 17);
  --selected-focused-background-color: rgb(0, 10, 4);
  --selected-focused-border-color: rgba(0, 51, 21, .500);
  --selected-disabled-background-color: rgb(0, 10, 4);
  --selected-disabled-border-color: rgba(0, 0, 0, .00);
  --on-selected-active-color: rgb(0, 51, 21);
  --on-selected-neutral-color: rgb(0, 36, 15);
  --on-selected-disabled-color: rgb(0, 26, 11);
  --thumb-enabled-background-color: rgb(0, 0, 0);
  --thumb-enabled-border-color: rgb(26, 26, 0);
  --thumb-hover-background-color: rgb(0, 0, 0);
  --thumb-hover-border-color: rgb(36, 36, 0);
  --thumb-pressed-background-color: rgb(7, 7, 7);
  --thumb-pressed-border-color: rgb(15, 15, 0);
  --thumb-focused-background-color: rgb(0, 0, 0);
  --thumb-focused-border-color: rgba(0, 71, 30, .500);
  --thumb-disabled-background-color: rgb(0, 10, 4);
  --thumb-disabled-border-color: rgba(0, 0, 0, .00);
  --on-thumb-active-color: rgb(71, 71, 0);
  --on-thumb-neutral-color: rgb(51, 51, 0);
  --on-thumb-disabled-color: rgb(18, 18, 0);
  --amplified-enabled-background-color: rgba(0, 71, 30, .150);
  --amplified-enabled-border-color: rgba(0, 0, 0, .00);
  --amplified-hover-background-color: rgba(0, 71, 30, .200);
  --amplified-hover-border-color: rgba(0, 0, 0, .00);
  --amplified-pressed-background-color: rgba(0, 71, 30, .080);
  --amplified-pressed-border-color: rgba(0, 0, 0, .00);
  --amplified-focused-background-color: rgba(0, 71, 30, .150);
  --amplified-focused-border-color: rgba(0, 71, 30, .500);
  --amplified-disabled-background-color: rgba(0, 71, 30, .100);
  --amplified-disabled-border-color: rgba(0, 0, 0, .00);
  --on-amplified-active-color: rgb(0, 51, 21);
  --on-amplified-neutral-color: rgb(0, 36, 15);
  --on-amplified-disabled-color: rgb(0, 26, 11);
  --device-enabled-background-color: rgb(31, 31, 0);
  --device-enabled-border-color: rgb(0, 0, 0);
  --device-hover-background-color: rgb(36, 36, 0);
  --device-hover-border-color: rgb(0, 0, 0);
  --device-pressed-background-color: rgb(26, 26, 0);
  --device-pressed-border-color: rgb(0, 0, 0);
  --device-focused-background-color: rgb(31, 31, 0);
  --device-focused-border-color: rgba(0, 71, 30, .500);
  --device-disabled-background-color: rgba(0, 0, 0, .00);
  --device-disabled-border-color: rgba(0, 0, 0, .050);
  --on-device-active-color: rgb(71, 71, 0);
  --on-device-neutral-color: rgb(51, 51, 0);
  --on-device-disabled-color: rgb(18, 18, 0);
  --notification-enabled-background-color: rgb(0, 76, 32);
  --notification-enabled-border-color: rgba(0, 0, 0, .500);
  --notification-hover-background-color: rgb(0, 66, 28);
  --notification-hover-border-color: rgba(0, 0, 0, .100);
  --notification-pressed-background-color: rgb(0, 56, 23);
  --notification-pressed-border-color: rgba(0, 0, 0, .200);
  --notification-focused-background-color: rgb(0, 77, 32);
  --notification-focused-border-color: rgba(0, 51, 21, .500);
  --notification-disabled-background-color: rgb(0, 76, 32);
  --notification-disabled-border-color: rgba(0, 0, 0, .00);
  --on-notification-active-color: rgb(0, 0, 0);
  --on-notification-neutral-color: rgba(0, 0, 0, .600);
  --on-notification-disabled-color: rgba(0, 0, 0, .200);
  --running-enabled-background-color: rgb(23, 56, 0);
  --running-enabled-border-color: rgba(0, 0, 0, .100);
  --running-hover-background-color: rgb(19, 46, 0);
  --running-hover-border-color: rgba(0, 0, 0, .100);
  --running-pressed-background-color: rgb(15, 36, 0);
  --running-pressed-border-color: rgba(0, 0, 0, .200);
  --running-focused-background-color: rgb(23, 56, 0);
  --running-focused-border-color: rgba(0, 51, 21, .500);
  --running-disabled-background-color: rgb(23, 56, 0);
  --running-disabled-border-color: rgba(0, 0, 0, .00);
  --on-running-active-color: rgb(0, 0, 0);
  --on-running-neutral-color: rgba(0, 0, 0, .600);
  --on-running-disabled-color: rgba(0, 0, 0, .200);
  --caution-enabled-background-color: rgb(92, 69, 0);
  --caution-enabled-border-color: rgb(0, 0, 0);
  --caution-hover-background-color: rgb(82, 61, 0);
  --caution-hover-border-color: rgb(0, 0, 0);
  --caution-pressed-background-color: rgb(71, 54, 0);
  --caution-pressed-border-color: rgb(0, 0, 0);
  --caution-focused-background-color: rgb(92, 69, 0);
  --caution-focused-border-color: rgba(0, 51, 21, .500);
  --caution-disabled-background-color: rgb(92, 69, 0);
  --caution-disabled-border-color: rgba(0, 0, 0, .00);
  --on-caution-active-color: rgba(0, 0, 0, .900);
  --on-caution-neutral-color: rgba(0, 0, 0, .600);
  --on-caution-disabled-color: rgba(0, 0, 0, .300);
  --warning-enabled-background-color: rgb(92, 44, 0);
  --warning-enabled-border-color: rgba(0, 0, 0, .100);
  --warning-hover-background-color: rgb(82, 39, 0);
  --warning-hover-border-color: rgba(0, 0, 0, .100);
  --warning-pressed-background-color: rgb(71, 34, 0);
  --warning-pressed-border-color: rgba(0, 0, 0, .200);
  --warning-focused-background-color: rgb(92, 44, 0);
  --warning-focused-border-color: rgba(0, 51, 21, .500);
  --warning-disabled-background-color: rgb(92, 44, 0);
  --warning-disabled-border-color: rgba(0, 0, 0, .00);
  --on-warning-active-color: rgba(0, 0, 0, .900);
  --on-warning-neutral-color: rgba(0, 0, 0, .600);
  --on-warning-disabled-color: rgba(0, 0, 0, .300);
  --alarm-enabled-background-color: rgb(76, 0, 5);
  --alarm-enabled-border-color: rgb(0, 0, 0);
  --alarm-hover-background-color: rgb(66, 0, 4);
  --alarm-hover-border-color: rgb(0, 0, 0);
  --alarm-pressed-background-color: rgb(56, 0, 4);
  --alarm-pressed-border-color: rgb(0, 0, 0);
  --alarm-focused-background-color: rgb(76, 0, 5);
  --alarm-focused-border-color: rgba(0, 51, 21, .500);
  --alarm-disabled-background-color: rgb(76, 0, 5);
  --alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-alarm-active-color: rgb(0, 0, 0);
  --on-alarm-neutral-color: rgba(0, 0, 0, .650);
  --on-alarm-disabled-color: rgba(0, 0, 0, .300);
  --critical-alarm-enabled-background-color: rgb(76, 0, 76);
  --critical-alarm-enabled-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-hover-background-color: rgb(66, 0, 66);
  --critical-alarm-hover-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-pressed-background-color: rgb(61, 0, 61);
  --critical-alarm-pressed-border-color: rgba(0, 0, 0, .200);
  --critical-alarm-focused-background-color: rgb(76, 0, 76);
  --critical-alarm-focused-border-color: rgba(0, 51, 21, .500);
  --critical-alarm-disabled-background-color: rgb(76, 0, 76);
  --critical-alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-critical-alarm-active-color: rgb(0, 0, 0);
  --on-critical-alarm-neutral-color: rgba(0, 0, 0, .700);
  --on-critical-alarm-disabled-color: rgba(0, 0, 0, .300);
  --font-ui-title-size: 24px;
  --font-ui-title-weight: bold;
  --font-ui-title-line-height: 32px;
  --font-ui-subtitle-size: 24px;
  --font-ui-subtitle-weight: regular;
  --font-ui-subtitle-line-height: 32px;
  --font-ui-overline-size: 12px;
  --font-ui-overline-weight: semibold;
  --font-ui-overline-line-height: 24px;
  --font-ui-button-size: 16px;
  --font-ui-button-weight: semibold;
  --font-ui-button-line-height: 24px;
  --font-ui-body-active-size: 16px;
  --font-ui-body-active-weight: bold;
  --font-ui-body-active-line-height: 24px;
  --font-ui-body-size: 16px;
  --font-ui-body-weight: regular;
  --font-ui-body-line-height: 24px;
  --font-ui-label-active-size: 12px;
  --font-ui-label-active-weight: bold;
  --font-ui-label-active-line-height: 16px;
  --font-ui-label-size: 12px;
  --font-ui-label-weight: regular;
  --font-ui-label-line-height: 16px;
  --font-instrument-label-s-size: 16px;
  --font-instrument-label-s-weight: regular;
  --font-instrument-label-s-line-height: 24px;
  --font-instrument-label-m-size: 32px;
  --font-instrument-label-m-weight: regular;
  --font-instrument-label-m-line-height: 40px;
  --font-instrument-label-l-size: 64px;
  --font-instrument-label-l-weight: regular;
  --font-instrument-label-l-line-height: 80px;
  --font-instrument-value-s-size: 16px;
  --font-instrument-value-s-weight: semibold;
  --font-instrument-value-s-line-height: 24px;
  --font-instrument-value-s-enhanced-size: 24px;
  --font-instrument-value-s-enhanced-weight: semibold;
  --font-instrument-value-s-enhanced-line-height: 32px;
  --font-instrument-value-m-size: 32px;
  --font-instrument-value-m-weight: semibold;
  --font-instrument-value-m-line-height: 40px;
  --font-instrument-value-m-enhanced-size: 48px;
  --font-instrument-value-m-enhanced-weight: semibold;
  --font-instrument-value-m-enhanced-line-height: 64px;
  --font-instrument-value-l-size: 64px;
  --font-instrument-value-l-weight: semibold;
  --font-instrument-value-l-line-height: 80px;
  --font-instrument-value-l-enhanced-size: 96px;
  --font-instrument-value-l-enhanced-weight: semibold;
  --font-instrument-value-l-enhanced-line-height: 128px;
  --font-instrument-unit-s-size: 16px;
  --font-instrument-unit-s-weight: regular;
  --font-instrument-unit-s-line-height: 24px;
  --font-instrument-unit-m-size: 32px;
  --font-instrument-unit-m-weight: regular;
  --font-instrument-unit-m-line-height: 40px;
  --font-instrument-unit-l-size: 64px;
  --font-instrument-unit-l-weight: regular;
  --font-instrument-unit-l-line-height: 80px;
  --font-instrument-status-s-size: 16px;
  --font-instrument-status-s-weight: regular;
  --font-instrument-status-s-line-height: 24px;
  --font-instrument-status-m-size: 32px;
  --font-instrument-status-m-weight: regular;
  --font-instrument-status-m-line-height: 40px;
  --font-instrument-status-l-size: 64px;
  --font-instrument-status-l-weight: regular;
  --font-instrument-status-l-line-height: 80px;
  --shadow-flat: 0px 0px 0px 1px rgb(19, 22, 4);
  --shadow-raised: 0px 0px 0px 1px rgb(19, 22, 4);
  --shadow-floating: 0px 0px 0px 1px rgb(27, 31, 10);
  --shadow-overlay: 0px 0px 0px 1px rgb(30, 35, 6);
}

:root[theme=bright] {
  --element-active-color: rgb(26, 26, 26);
  --element-neutral-color: rgba(0, 0, 0, .550);
  --element-inactive-color: rgba(0, 0, 0, .420);
  --element-disabled-color: rgba(0, 0, 0, .200);
  --element-active-inverted-color: rgb(255, 255, 255);
  --element-neutral-inverted-color: rgba(255, 255, 255, .700);
  --element-inactive-inverted-color: rgba(255, 255, 255, .400);
  --element-disabled-inverted-color: rgba(255, 255, 255, .200);
  --container-backdrop-color: rgb(224, 224, 224);
  --container-section-color: rgb(240, 240, 240);
  --container-background-color: rgb(255, 255, 255);
  --container-global-color: rgb(255, 255, 255);
  --container-overlay-color: rgba(0, 0, 0, .100);
  --border-divider-color: rgba(0, 0, 0, .080);
  --border-outline-color: rgba(0, 0, 0, .080);
  --border-edge-color: rgba(0, 0, 0, .050);
  --border-solid-color: rgb(51, 51, 51);
  --border-icon-outline-color: rgba(0, 0, 0, .500);
  --instrument-enhanced-primary-color: rgb(26, 45, 255);
  --instrument-enhanced-secondary-color: rgb(46, 79, 138);
  --instrument-enhanced-tertiary-color: rgba(46, 79, 138, .300);
  --instrument-regular-primary-color: rgb(13, 13, 13);
  --instrument-regular-secondary-color: rgb(89, 89, 89);
  --instrument-regular-tertiary-color: rgba(102, 102, 102, .250);
  --instrument-frame-primary-color: rgb(255, 255, 255);
  --instrument-frame-secondary-color: rgb(240, 240, 240);
  --instrument-frame-tertiary-color: rgb(140, 140, 140);
  --instrument-tick-mark-primary-color: rgb(13, 13, 13);
  --instrument-tick-mark-secondary-color: rgb(89, 89, 89);
  --instrument-tick-mark-tertiary-color: rgb(140, 140, 140);
  --instrument-starboard-color: rgb(53, 158, 133);
  --instrument-port-color: rgb(225, 98, 144);
  --alert-running-color: rgb(0, 138, 23);
  --alert-caution-color: rgb(250, 217, 0);
  --alert-warning-color: rgb(246, 148, 0);
  --alert-alarm-color: rgb(223, 27, 27);
  --alert-critical-alarm-color: rgb(229, 0, 229);
  --alert-limit-primary-color: rgba(0, 0, 0, .100);
  --alert-limit-secondary-color: rgba(0, 0, 0, .100);
  --automation-device-primary-color: rgb(255, 255, 255);
  --automation-device-secondary-color: rgb(89, 89, 89);
  --automation-device-tertiary-color: rgb(13, 13, 13);
  --automation-device-primary-inverted-color: rgb(51, 51, 51);
  --automation-device-secondary-inverted-color: rgb(102, 102, 102);
  --automation-device-tertiary-inverted-color: rgb(143, 143, 143);
  --automation-pipe-primary-color: rgb(255, 255, 255);
  --automation-pipe-secondary-color: rgb(198, 198, 198);
  --automation-pipe-tertiary-color: rgba(0, 0, 0, .800);
  --automation-pipe-primary-inverted-color: rgba(0, 0, 0, .100);
  --automation-pipe-secondary-inverted-color: rgba(0, 0, 0, .200);
  --automation-pipe-tertiary-inverted-color: rgba(0, 0, 0, .200);
  --automation-pipe-overlay-color: rgba(0, 0, 0, .200);
  --automation-pipe-disabled-color: rgba(0, 0, 0, .100);
  --automation-acid-alkalis: rgb(231, 193, 244);
  --automation-air-ventilation: rgb(222, 222, 222);
  --automation-fire-fighting: rgb(255, 177, 196);
  --automation-flammable-gas: rgb(216, 224, 127);
  --automation-fresh-water: rgb(198, 241, 251);
  --automation-fuel: rgb(249, 208, 169);
  --automation-masses: rgb(209, 191, 173);
  --automation-non-flammable-gas: rgb(220, 232, 206);
  --automation-oil: rgb(253, 243, 155);
  --automation-sea-water: rgb(173, 230, 213);
  --automation-steam: rgb(203, 203, 203);
  --automation-waste-media: rgb(138, 138, 138);
  --normal-enabled-background-color: rgb(255, 255, 255);
  --normal-enabled-border-color: rgb(140, 140, 140);
  --normal-hover-background-color: rgb(230, 230, 230);
  --normal-hover-border-color: rgb(140, 140, 140);
  --normal-pressed-background-color: rgb(204, 204, 204);
  --normal-pressed-border-color: rgb(140, 140, 140);
  --normal-focused-background-color: rgb(255, 255, 255);
  --normal-focused-border-color: rgba(0, 110, 225, .300);
  --normal-disabled-background-color: rgba(255, 255, 255, .00);
  --normal-disabled-border-color: rgba(0, 0, 0, .100);
  --normal-activated-background-color: rgb(235, 235, 235);
  --normal-activated-border-color: rgba(0, 0, 0, .200);
  --on-normal-active-color: rgb(13, 13, 13);
  --on-normal-neutral-color: rgba(0, 0, 0, .650);
  --on-normal-disabled-color: rgba(0, 0, 0, .300);
  --raised-enabled-background-color: rgba(0, 0, 0, .650);
  --raised-enabled-border-color: rgba(0, 0, 0, .100);
  --raised-hover-background-color: rgba(0, 0, 0, .750);
  --raised-hover-border-color: rgba(0, 0, 0, .100);
  --raised-pressed-background-color: rgba(0, 0, 0, .850);
  --raised-pressed-border-color: rgba(0, 0, 0, .300);
  --raised-focused-background-color: rgba(0, 0, 0, .650);
  --raised-focused-border-color: rgba(0, 110, 225, .300);
  --raised-disabled-background-color: rgba(0, 0, 0, .00);
  --raised-disabled-border-color: rgba(0, 0, 0, .100);
  --on-raised-active-color: rgb(255, 255, 255);
  --on-raised-neutral-color: rgba(255, 255, 255, .700);
  --on-raised-disabled-color: rgba(0, 0, 0, .200);
  --indent-enabled-background-color: rgba(0, 0, 0, .050);
  --indent-enabled-border-color: rgba(0, 0, 0, .050);
  --indent-hover-background-color: rgba(0, 0, 0, .100);
  --indent-hover-border-color: rgba(0, 0, 0, .050);
  --indent-pressed-background-color: rgba(0, 0, 0, .160);
  --indent-pressed-border-color: rgba(0, 0, 0, .100);
  --indent-focused-background-color: rgba(0, 0, 0, .050);
  --indent-focused-border-color: rgba(0, 110, 225, .300);
  --indent-disabled-background-color: rgba(0, 0, 0, .00);
  --indent-disabled-border-color: rgba(0, 0, 0, .100);
  --on-indent-active-color: rgb(13, 13, 13);
  --on-indent-neutral-color: rgba(0, 0, 0, .450);
  --on-indent-disabled-color: rgba(0, 0, 0, .300);
  --flat-enabled-background-color: rgba(0, 0, 0, .00);
  --flat-enabled-border-color: rgba(0, 0, 0, .00);
  --flat-hover-background-color: rgba(0, 0, 0, .060);
  --flat-hover-border-color: rgba(0, 0, 0, .00);
  --flat-pressed-background-color: rgba(0, 0, 0, .120);
  --flat-pressed-border-color: rgba(0, 0, 0, .00);
  --flat-focused-background-color: rgba(0, 0, 0, .00);
  --flat-focused-border-color: rgba(0, 110, 225, .300);
  --flat-disabled-background-color: rgba(0, 0, 0, .00);
  --flat-disabled-border-color: rgba(0, 0, 0, .00);
  --flat-activated-background-color: rgba(0, 0, 0, .050);
  --flat-activated-border-color: rgba(0, 0, 0, .00);
  --flat-checked-background-color: rgba(48, 87, 146, .100);
  --flat-checked-border-color: rgba(15, 74, 163, .00);
  --on-flat-active-color: rgb(13, 13, 13);
  --on-flat-neutral-color: rgba(0, 0, 0, .650);
  --on-flat-disabled-color: rgba(0, 0, 0, .300);
  --selected-enabled-background-color: rgb(46, 79, 138);
  --selected-enabled-border-color: rgba(0, 0, 0, .00);
  --selected-hover-background-color: rgb(33, 57, 99);
  --selected-hover-border-color: rgba(0, 0, 0, .00);
  --selected-pressed-background-color: rgb(20, 35, 61);
  --selected-pressed-border-color: rgba(0, 0, 0, .00);
  --selected-focused-background-color: rgb(46, 79, 138);
  --selected-focused-border-color: rgba(0, 110, 225, .300);
  --selected-disabled-background-color: rgba(0, 0, 0, .200);
  --selected-disabled-border-color: rgba(0, 0, 0, .00);
  --on-selected-active-color: rgb(255, 255, 255);
  --on-selected-neutral-color: rgba(255, 255, 255, .800);
  --on-selected-disabled-color: rgba(0, 0, 0, .300);
  --thumb-enabled-background-color: rgb(255, 255, 255);
  --thumb-enabled-border-color: rgb(140, 140, 140);
  --thumb-hover-background-color: rgb(230, 230, 230);
  --thumb-hover-border-color: rgb(140, 140, 140);
  --thumb-pressed-background-color: rgb(204, 204, 204);
  --thumb-pressed-border-color: rgb(140, 140, 140);
  --thumb-focused-background-color: rgb(255, 255, 255);
  --thumb-focused-border-color: rgba(0, 110, 225, .300);
  --thumb-disabled-background-color: rgba(0, 0, 0, .100);
  --thumb-disabled-border-color: rgba(0, 0, 0, .00);
  --on-thumb-active-color: rgb(13, 13, 13);
  --on-thumb-neutral-color: rgba(0, 0, 0, .650);
  --on-thumb-disabled-color: rgba(0, 0, 0, .300);
  --amplified-enabled-background-color: rgba(46, 79, 138, .100);
  --amplified-enabled-border-color: rgba(0, 0, 0, .00);
  --amplified-hover-background-color: rgba(46, 79, 138, .200);
  --amplified-hover-border-color: rgba(0, 0, 0, .00);
  --amplified-pressed-background-color: rgba(46, 79, 138, .260);
  --amplified-pressed-border-color: rgba(0, 0, 0, .00);
  --amplified-focused-background-color: rgba(46, 79, 138, .100);
  --amplified-focused-border-color: rgba(0, 110, 225, .300);
  --amplified-disabled-background-color: rgba(0, 0, 0, .100);
  --amplified-disabled-border-color: rgba(0, 0, 0, .00);
  --on-amplified-active-color: rgb(13, 13, 13);
  --on-amplified-neutral-color: rgba(0, 0, 0, .650);
  --on-amplified-disabled-color: rgba(0, 0, 0, .300);
  --device-enabled-background-color: rgb(255, 255, 255);
  --device-enabled-border-color: rgba(0, 0, 0, .200);
  --device-hover-background-color: rgb(239, 239, 239);
  --device-hover-border-color: rgba(0, 0, 0, .200);
  --device-pressed-background-color: rgb(230, 230, 230);
  --device-pressed-border-color: rgba(0, 0, 0, .050);
  --device-focused-background-color: rgb(255, 255, 255);
  --device-focused-border-color: rgba(0, 110, 225, .300);
  --device-disabled-background-color: rgba(0, 0, 0, .00);
  --device-disabled-border-color: rgba(0, 0, 0, .050);
  --on-device-active-color: rgb(255, 255, 255);
  --on-device-neutral-color: rgba(0, 0, 0, .450);
  --on-device-disabled-color: rgb(179, 179, 179);
  --running-enabled-background-color: rgb(0, 138, 23);
  --running-enabled-border-color: rgba(0, 0, 0, .100);
  --running-hover-background-color: rgb(27, 111, 27);
  --running-hover-border-color: rgba(0, 0, 0, .100);
  --running-pressed-background-color: rgb(17, 70, 17);
  --running-pressed-border-color: rgba(0, 0, 0, .200);
  --running-focused-background-color: rgb(37, 152, 37);
  --running-focused-border-color: rgb(247, 247, 247);
  --running-disabled-background-color: rgb(37, 152, 37);
  --running-disabled-border-color: rgba(0, 0, 0, .00);
  --on-running-active-color: rgb(255, 255, 255);
  --on-running-neutral-color: rgba(255, 255, 255, .700);
  --on-running-disabled-color: rgba(255, 255, 255, .300);
  --caution-enabled-background-color: rgb(250, 217, 0);
  --caution-enabled-border-color: rgba(0, 0, 0, .100);
  --caution-hover-background-color: rgb(199, 173, 0);
  --caution-hover-border-color: rgba(0, 0, 0, .100);
  --caution-pressed-background-color: rgb(148, 128, 0);
  --caution-pressed-border-color: rgba(0, 0, 0, .200);
  --caution-focused-background-color: rgb(250, 217, 0);
  --caution-focused-border-color: rgb(247, 247, 247);
  --caution-disabled-background-color: rgb(250, 217, 0);
  --caution-disabled-border-color: rgba(0, 0, 0, .00);
  --on-caution-active-color: rgba(0, 0, 0, .900);
  --on-caution-neutral-color: rgba(0, 0, 0, .600);
  --on-caution-disabled-color: rgba(0, 0, 0, .300);
  --warning-enabled-background-color: rgb(255, 145, 15);
  --warning-enabled-border-color: rgba(0, 0, 0, .100);
  --warning-hover-background-color: rgb(194, 117, 0);
  --warning-hover-border-color: rgba(0, 0, 0, .100);
  --warning-pressed-background-color: rgb(143, 90, 0);
  --warning-pressed-border-color: rgba(0, 0, 0, .200);
  --warning-focused-background-color: rgb(246, 148, 0);
  --warning-focused-border-color: rgb(247, 247, 247);
  --warning-disabled-background-color: rgb(246, 148, 0);
  --warning-disabled-border-color: rgba(0, 0, 0, .00);
  --on-warning-active-color: rgba(0, 0, 0, .900);
  --on-warning-neutral-color: rgba(0, 0, 0, .600);
  --on-warning-disabled-color: rgba(0, 0, 0, .300);
  --alarm-enabled-background-color: rgb(228, 27, 27);
  --alarm-enabled-border-color: rgba(0, 0, 0, .100);
  --alarm-hover-background-color: rgb(182, 22, 22);
  --alarm-hover-border-color: rgba(0, 0, 0, .100);
  --alarm-pressed-background-color: rgb(137, 16, 16);
  --alarm-pressed-border-color: rgba(0, 0, 0, .200);
  --alarm-focused-background-color: rgb(228, 27, 27);
  --alarm-focused-border-color: rgb(247, 247, 247);
  --alarm-disabled-background-color: rgb(228, 27, 27);
  --alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-alarm-active-color: rgb(255, 255, 255);
  --on-alarm-neutral-color: rgba(255, 255, 255, .700);
  --on-alarm-disabled-color: rgba(0, 0, 0, .300);
  --critical-alarm-enabled-background-color: rgb(201, 0, 202);
  --critical-alarm-enabled-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-hover-background-color: rgb(152, 0, 153);
  --critical-alarm-hover-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-pressed-background-color: rgb(102, 0, 102);
  --critical-alarm-pressed-border-color: rgba(0, 0, 0, .200);
  --critical-alarm-focused-background-color: rgb(201, 0, 202);
  --critical-alarm-focused-border-color: rgb(247, 247, 247);
  --critical-alarm-disabled-background-color: rgb(201, 0, 202);
  --critical-alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-critical-alarm-active-color: rgb(255, 255, 255);
  --on-critical-alarm-neutral-color: rgba(255, 255, 255, .700);
  --on-critical-alarm-disabled-color: rgba(255, 255, 255, .300);
  --font-ui-title-size: 24px;
  --font-ui-title-weight: bold;
  --font-ui-title-line-height: 32px;
  --font-ui-subtitle-size: 24px;
  --font-ui-subtitle-weight: regular;
  --font-ui-subtitle-line-height: 32px;
  --font-ui-overline-size: 12px;
  --font-ui-overline-weight: semibold;
  --font-ui-overline-line-height: 24px;
  --font-ui-button-size: 16px;
  --font-ui-button-weight: semibold;
  --font-ui-button-line-height: 24px;
  --font-ui-body-active-size: 16px;
  --font-ui-body-active-weight: bold;
  --font-ui-body-active-line-height: 24px;
  --font-ui-body-size: 16px;
  --font-ui-body-weight: regular;
  --font-ui-body-line-height: 24px;
  --font-ui-label-active-size: 12px;
  --font-ui-label-active-weight: bold;
  --font-ui-label-active-line-height: 16px;
  --font-ui-label-size: 12px;
  --font-ui-label-weight: regular;
  --font-ui-label-line-height: 16px;
  --font-instrument-label-s-size: 16px;
  --font-instrument-label-s-weight: regular;
  --font-instrument-label-s-line-height: 24px;
  --font-instrument-label-m-size: 32px;
  --font-instrument-label-m-weight: regular;
  --font-instrument-label-m-line-height: 40px;
  --font-instrument-label-l-size: 64px;
  --font-instrument-label-l-weight: regular;
  --font-instrument-label-l-line-height: 80px;
  --font-instrument-value-s-size: 16px;
  --font-instrument-value-s-weight: semibold;
  --font-instrument-value-s-line-height: 24px;
  --font-instrument-value-s-enhanced-size: 24px;
  --font-instrument-value-s-enhanced-weight: semibold;
  --font-instrument-value-s-enhanced-line-height: 32px;
  --font-instrument-value-m-size: 32px;
  --font-instrument-value-m-weight: semibold;
  --font-instrument-value-m-line-height: 40px;
  --font-instrument-value-m-enhanced-size: 48px;
  --font-instrument-value-m-enhanced-weight: semibold;
  --font-instrument-value-m-enhanced-line-height: 64px;
  --font-instrument-value-l-size: 64px;
  --font-instrument-value-l-weight: semibold;
  --font-instrument-value-l-line-height: 80px;
  --font-instrument-value-l-enhanced-size: 96px;
  --font-instrument-value-l-enhanced-weight: semibold;
  --font-instrument-value-l-enhanced-line-height: 128px;
  --font-instrument-unit-s-size: 16px;
  --font-instrument-unit-s-weight: regular;
  --font-instrument-unit-s-line-height: 24px;
  --font-instrument-unit-m-size: 32px;
  --font-instrument-unit-m-weight: regular;
  --font-instrument-unit-m-line-height: 40px;
  --font-instrument-unit-l-size: 64px;
  --font-instrument-unit-l-weight: regular;
  --font-instrument-unit-l-line-height: 80px;
  --font-instrument-status-s-size: 16px;
  --font-instrument-status-s-weight: regular;
  --font-instrument-status-s-line-height: 24px;
  --font-instrument-status-m-size: 32px;
  --font-instrument-status-m-weight: regular;
  --font-instrument-status-m-line-height: 40px;
  --font-instrument-status-l-size: 64px;
  --font-instrument-status-l-weight: regular;
  --font-instrument-status-l-line-height: 80px;
  --shadow-flat: 0px 1px 1px 0px rgba(0, 0, 0, .400);
  --shadow-raised: 0px 2px 4px 0px rgba(0, 0, 0, .400);
  --shadow-floating: 0px 4px 16px 0px rgba(0, 0, 0, .400);
  --shadow-overlay: 0px 8px 32px 0px rgba(0, 0, 0, .600);
  --shadow-focused: 0px 0px 0px 4px rgb(0, 59, 148);
}

:root[theme=day] {
  --element-active-color: rgb(26, 26, 26);
  --element-neutral-color: rgba(0, 0, 0, .590);
  --element-inactive-color: rgba(0, 0, 0, .420);
  --element-disabled-color: rgba(0, 0, 0, .200);
  --element-active-inverted-color: rgb(255, 255, 255);
  --element-neutral-inverted-color: rgba(255, 255, 255, .700);
  --element-inactive-inverted-color: rgba(255, 255, 255, .400);
  --element-disabled-inverted-color: rgba(255, 255, 255, .200);
  --container-backdrop-color: rgb(224, 224, 224);
  --container-section-color: rgb(240, 240, 240);
  --container-background-color: rgb(247, 247, 247);
  --container-global-color: rgb(252, 252, 252);
  --container-overlay-color: rgba(0, 0, 0, .100);
  --border-divider-color: rgba(0, 0, 0, .080);
  --border-outline-color: rgba(0, 0, 0, .080);
  --border-edge-color: rgba(0, 0, 0, .050);
  --border-solid-color: rgb(51, 51, 51);
  --border-icon-outline-color: rgba(0, 0, 0, .400);
  --border-silhouette-color: rgb(247, 247, 247);
  --instrument-enhanced-primary-color: rgb(0, 112, 214);
  --instrument-enhanced-secondary-color: rgb(50, 91, 154);
  --instrument-enhanced-tertiary-color: rgba(50, 91, 154, .200);
  --instrument-regular-primary-color: rgb(51, 51, 51);
  --instrument-regular-secondary-color: rgb(102, 102, 102);
  --instrument-regular-tertiary-color: rgba(102, 102, 102, .250);
  --instrument-frame-primary-color: rgb(255, 255, 255);
  --instrument-frame-secondary-color: rgb(240, 240, 240);
  --instrument-frame-tertiary-color: rgb(217, 217, 217);
  --instrument-tick-mark-primary-color: rgb(51, 51, 51);
  --instrument-tick-mark-secondary-color: rgb(112, 112, 112);
  --instrument-tick-mark-tertiary-color: rgb(143, 143, 143);
  --instrument-starboard-color: rgb(53, 158, 133);
  --instrument-port-color: rgb(225, 98, 144);
  --navigation-green-color: rgb(184, 234, 195);
  --navigation-yellow-color: rgb(247, 241, 161);
  --navigation-orange-color: rgb(247, 204, 161);
  --navigation-red-color: rgb(241, 177, 200);
  --navigation-generic-color: rgb(202, 194, 239);
  --navigation-white-color: rgb(199, 213, 234);
  --alert-running-color: rgb(34, 135, 34);
  --alert-caution-color: rgb(250, 217, 0);
  --alert-warning-color: rgb(246, 148, 0);
  --alert-alarm-color: rgb(223, 27, 27);
  --alert-critical-alarm-color: rgb(229, 0, 229);
  --alert-limit-primary-color: rgba(0, 0, 0, .100);
  --alert-limit-secondary-color: rgba(0, 0, 0, .100);
  --automation-device-primary-color: rgb(255, 255, 255);
  --automation-device-secondary-color: rgb(112, 112, 112);
  --automation-device-tertiary-color: rgb(0, 0, 0);
  --automation-device-primary-inverted-color: rgb(15, 15, 15);
  --automation-device-secondary-inverted-color: rgb(102, 102, 102);
  --automation-device-tertiary-inverted-color: rgb(128, 128, 128);
  --automation-button-primary-color: rgb(255, 255, 255);
  --automation-button-tertiary-color: rgba(0, 0, 0, .200);
  --automation-button-primary-inverted-color: rgb(224, 224, 224);
  --automation-button-tertiary-inverted-color: rgba(0, 0, 0, .100);
  --automation-pipe-primary-color: rgb(255, 255, 255);
  --automation-pipe-secondary-color: rgba(0, 0, 0, .200);
  --automation-pipe-tertiary-color: rgba(0, 0, 0, .590);
  --automation-pipe-primary-inverted-color: rgb(224, 224, 224);
  --automation-pipe-secondary-inverted-color: rgba(0, 0, 0, .100);
  --automation-pipe-tertiary-inverted-color: rgba(0, 0, 0, .420);
  --automation-pipe-overlay-color: rgba(0, 0, 0, .200);
  --automation-pipe-disabled-color: rgba(0, 0, 0, .100);
  --automation-acid-alkalis: rgb(231, 193, 244);
  --automation-air-ventilation: rgb(222, 222, 222);
  --automation-fire-fighting: rgb(255, 177, 196);
  --automation-flammable-gas: rgb(216, 224, 127);
  --automation-fresh-water: rgb(198, 241, 251);
  --automation-fuel: rgb(249, 208, 169);
  --automation-masses: rgb(209, 191, 173);
  --automation-non-flammable-gas: rgb(220, 232, 206);
  --automation-oil: rgb(253, 243, 155);
  --automation-sea-water: rgb(173, 230, 213);
  --automation-steam: rgb(203, 203, 203);
  --automation-waste-media: rgb(138, 138, 138);
  --normal-enabled-background-color: rgb(255, 255, 255);
  --normal-enabled-border-color: rgb(205, 205, 205);
  --normal-hover-background-color: rgb(240, 240, 240);
  --normal-hover-border-color: rgba(0, 0, 0, .200);
  --normal-pressed-background-color: rgb(224, 224, 224);
  --normal-pressed-border-color: rgba(0, 0, 0, .200);
  --normal-focused-background-color: rgb(255, 255, 255);
  --normal-focused-border-color: rgba(0, 110, 225, .300);
  --normal-disabled-background-color: rgba(255, 255, 255, .00);
  --normal-disabled-border-color: rgba(0, 0, 0, .100);
  --normal-activated-background-color: rgb(235, 235, 235);
  --normal-activated-border-color: rgba(0, 0, 0, .200);
  --on-normal-active-color: rgb(26, 26, 26);
  --on-normal-neutral-color: rgba(0, 0, 0, .550);
  --on-normal-disabled-color: rgba(0, 0, 0, .300);
  --raised-enabled-background-color: rgba(0, 0, 0, .600);
  --raised-enabled-border-color: rgba(0, 0, 0, .100);
  --raised-hover-background-color: rgba(0, 0, 0, .700);
  --raised-hover-border-color: rgba(0, 0, 0, .100);
  --raised-pressed-background-color: rgba(0, 0, 0, .800);
  --raised-pressed-border-color: rgba(0, 0, 0, .300);
  --raised-focused-background-color: rgba(0, 0, 0, .600);
  --raised-focused-border-color: rgba(0, 110, 225, .300);
  --raised-disabled-background-color: rgba(0, 0, 0, .00);
  --raised-disabled-border-color: rgba(0, 0, 0, .100);
  --on-raised-active-color: rgb(255, 255, 255);
  --on-raised-neutral-color: rgba(255, 255, 255, .700);
  --on-raised-disabled-color: rgba(0, 0, 0, .200);
  --indent-enabled-background-color: rgba(0, 0, 0, .050);
  --indent-enabled-border-color: rgba(0, 0, 0, .050);
  --indent-hover-background-color: rgba(0, 0, 0, .100);
  --indent-hover-border-color: rgba(0, 0, 0, .050);
  --indent-pressed-background-color: rgba(0, 0, 0, .160);
  --indent-pressed-border-color: rgba(0, 0, 0, .100);
  --indent-focused-background-color: rgba(0, 0, 0, .050);
  --indent-focused-border-color: rgba(0, 110, 225, .300);
  --indent-disabled-background-color: rgba(0, 0, 0, .00);
  --indent-disabled-border-color: rgba(0, 0, 0, .100);
  --on-indent-active-color: rgba(0, 0, 0, .900);
  --on-indent-neutral-color: rgba(0, 0, 0, .440);
  --on-indent-disabled-color: rgba(0, 0, 0, .300);
  --flat-enabled-background-color: rgba(0, 0, 0, .00);
  --flat-enabled-border-color: rgba(0, 0, 0, .00);
  --flat-hover-background-color: rgba(0, 0, 0, .060);
  --flat-hover-border-color: rgba(0, 0, 0, .00);
  --flat-pressed-background-color: rgba(0, 0, 0, .120);
  --flat-pressed-border-color: rgba(0, 0, 0, .00);
  --flat-focused-background-color: rgba(0, 0, 0, .00);
  --flat-focused-border-color: rgba(0, 110, 225, .300);
  --flat-disabled-background-color: rgba(0, 0, 0, .00);
  --flat-disabled-border-color: rgba(0, 0, 0, .00);
  --flat-activated-background-color: rgba(0, 0, 0, .050);
  --flat-activated-border-color: rgba(0, 0, 0, .00);
  --flat-checked-background-color: rgba(48, 87, 146, .100);
  --flat-checked-border-color: rgba(15, 74, 163, .00);
  --on-flat-active-color: rgba(0, 0, 0, .900);
  --on-flat-neutral-color: rgba(0, 0, 0, .550);
  --on-flat-disabled-color: rgba(0, 0, 0, .300);
  --selected-enabled-background-color: rgb(50, 91, 154);
  --selected-enabled-border-color: rgba(0, 0, 0, .00);
  --selected-hover-background-color: rgb(38, 69, 115);
  --selected-hover-border-color: rgba(0, 0, 0, .00);
  --selected-pressed-background-color: rgb(28, 50, 84);
  --selected-pressed-border-color: rgba(0, 0, 0, .00);
  --selected-focused-background-color: rgb(50, 91, 154);
  --selected-focused-border-color: rgba(0, 110, 225, .300);
  --selected-disabled-background-color: rgba(0, 0, 0, .200);
  --selected-disabled-border-color: rgba(0, 0, 0, .00);
  --on-selected-active-color: rgb(255, 255, 255);
  --on-selected-neutral-color: rgba(255, 255, 255, .800);
  --on-selected-disabled-color: rgba(0, 0, 0, .300);
  --thumb-enabled-background-color: rgb(255, 255, 255);
  --thumb-enabled-border-color: rgba(0, 0, 0, .200);
  --thumb-hover-background-color: rgb(230, 230, 230);
  --thumb-hover-border-color: rgba(0, 0, 0, .200);
  --thumb-pressed-background-color: rgb(204, 204, 204);
  --thumb-pressed-border-color: rgba(0, 0, 0, .200);
  --thumb-focused-background-color: rgb(255, 255, 255);
  --thumb-focused-border-color: rgba(0, 110, 225, .300);
  --thumb-disabled-background-color: rgba(0, 0, 0, .100);
  --thumb-disabled-border-color: rgba(0, 0, 0, .00);
  --on-thumb-active-color: rgba(0, 0, 0, .900);
  --on-thumb-neutral-color: rgba(0, 0, 0, .550);
  --on-thumb-disabled-color: rgba(0, 0, 0, .300);
  --amplified-enabled-background-color: rgba(48, 87, 146, .100);
  --amplified-enabled-border-color: rgba(0, 0, 0, .00);
  --amplified-hover-background-color: rgba(48, 87, 146, .200);
  --amplified-hover-border-color: rgba(0, 0, 0, .00);
  --amplified-pressed-background-color: rgba(48, 87, 146, .260);
  --amplified-pressed-border-color: rgba(0, 0, 0, .00);
  --amplified-focused-background-color: rgba(48, 87, 146, .100);
  --amplified-focused-border-color: rgba(0, 110, 225, .300);
  --amplified-disabled-background-color: rgba(0, 0, 0, .100);
  --amplified-disabled-border-color: rgba(0, 0, 0, .00);
  --on-amplified-active-color: rgba(0, 0, 0, .900);
  --on-amplified-neutral-color: rgba(0, 0, 0, .550);
  --on-amplified-disabled-color: rgba(0, 0, 0, .300);
  --device-enabled-background-color: rgb(255, 255, 255);
  --device-enabled-border-color: rgba(0, 0, 0, .200);
  --device-hover-background-color: rgb(239, 239, 239);
  --device-hover-border-color: rgba(0, 0, 0, .200);
  --device-pressed-background-color: rgb(230, 230, 230);
  --device-pressed-border-color: rgba(0, 0, 0, .050);
  --device-focused-background-color: rgb(255, 255, 255);
  --device-focused-border-color: rgba(0, 110, 225, .300);
  --device-disabled-background-color: rgba(0, 0, 0, .00);
  --device-disabled-border-color: rgba(0, 0, 0, .050);
  --on-device-active-color: rgb(255, 255, 255);
  --on-device-neutral-color: rgba(0, 0, 0, .440);
  --on-device-disabled-color: rgb(179, 179, 179);
  --notification-enabled-background-color: rgb(0, 112, 214);
  --notification-enabled-border-color: rgba(0, 0, 0, .100);
  --notification-hover-background-color: rgb(0, 85, 163);
  --notification-hover-border-color: rgba(0, 0, 0, .100);
  --notification-pressed-background-color: rgb(0, 53, 102);
  --notification-pressed-border-color: rgba(0, 0, 0, .200);
  --notification-focused-background-color: rgb(0, 112, 214);
  --notification-focused-border-color: rgba(0, 112, 214, .300);
  --notification-disabled-background-color: rgb(0, 112, 214);
  --notification-disabled-border-color: rgba(0, 0, 0, .00);
  --on-notification-active-color: rgb(255, 255, 255);
  --on-notification-neutral-color: rgba(255, 255, 255, .700);
  --on-notification-disabled-color: rgba(255, 255, 255, .300);
  --running-enabled-background-color: rgb(37, 146, 40);
  --running-enabled-border-color: rgba(0, 0, 0, .100);
  --running-hover-background-color: rgb(29, 114, 29);
  --running-hover-border-color: rgba(0, 0, 0, .100);
  --running-pressed-background-color: rgb(27, 106, 29);
  --running-pressed-border-color: rgba(0, 0, 0, .200);
  --running-focused-background-color: rgb(37, 146, 40);
  --running-focused-border-color: rgb(247, 247, 247);
  --running-disabled-background-color: rgb(37, 146, 40);
  --running-disabled-border-color: rgba(0, 0, 0, .00);
  --on-running-active-color: rgb(255, 255, 255);
  --on-running-neutral-color: rgba(255, 255, 255, .700);
  --on-running-disabled-color: rgba(255, 255, 255, .300);
  --caution-enabled-background-color: rgb(250, 217, 0);
  --caution-enabled-border-color: rgba(0, 0, 0, .300);
  --caution-hover-background-color: rgb(199, 173, 0);
  --caution-hover-border-color: rgba(0, 0, 0, .300);
  --caution-pressed-background-color: rgb(148, 128, 0);
  --caution-pressed-border-color: rgba(0, 0, 0, .200);
  --caution-focused-background-color: rgb(250, 217, 0);
  --caution-focused-border-color: rgb(247, 247, 247);
  --caution-disabled-background-color: rgb(250, 217, 0);
  --caution-disabled-border-color: rgba(0, 0, 0, .00);
  --on-caution-active-color: rgba(0, 0, 0, .900);
  --on-caution-neutral-color: rgba(0, 0, 0, .600);
  --on-caution-disabled-color: rgba(0, 0, 0, .300);
  --warning-enabled-background-color: rgb(255, 145, 15);
  --warning-enabled-border-color: rgba(0, 0, 0, .300);
  --warning-hover-background-color: rgb(194, 117, 0);
  --warning-hover-border-color: rgba(0, 0, 0, .300);
  --warning-pressed-background-color: rgb(143, 90, 0);
  --warning-pressed-border-color: rgba(0, 0, 0, .200);
  --warning-focused-background-color: rgb(246, 148, 0);
  --warning-focused-border-color: rgb(247, 247, 247);
  --warning-disabled-background-color: rgb(246, 148, 0);
  --warning-disabled-border-color: rgba(0, 0, 0, .00);
  --on-warning-active-color: rgba(0, 0, 0, .900);
  --on-warning-neutral-color: rgba(0, 0, 0, .600);
  --on-warning-disabled-color: rgba(0, 0, 0, .300);
  --alarm-enabled-background-color: rgb(228, 27, 27);
  --alarm-enabled-border-color: rgba(0, 0, 0, .100);
  --alarm-hover-background-color: rgb(182, 22, 22);
  --alarm-hover-border-color: rgba(0, 0, 0, .100);
  --alarm-pressed-background-color: rgb(137, 16, 16);
  --alarm-pressed-border-color: rgba(0, 0, 0, .200);
  --alarm-focused-background-color: rgb(228, 27, 27);
  --alarm-focused-border-color: rgb(247, 247, 247);
  --alarm-disabled-background-color: rgb(228, 27, 27);
  --alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-alarm-active-color: rgb(255, 255, 255);
  --on-alarm-neutral-color: rgba(255, 255, 255, .700);
  --on-alarm-disabled-color: rgba(0, 0, 0, .300);
  --critical-alarm-enabled-background-color: rgb(201, 0, 202);
  --critical-alarm-enabled-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-hover-background-color: rgb(152, 0, 153);
  --critical-alarm-hover-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-pressed-background-color: rgb(102, 0, 102);
  --critical-alarm-pressed-border-color: rgba(0, 0, 0, .200);
  --critical-alarm-focused-background-color: rgb(201, 0, 202);
  --critical-alarm-focused-border-color: rgb(247, 247, 247);
  --critical-alarm-disabled-background-color: rgb(201, 0, 202);
  --critical-alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-critical-alarm-active-color: rgb(255, 255, 255);
  --on-critical-alarm-neutral-color: rgba(255, 255, 255, .700);
  --on-critical-alarm-disabled-color: rgba(255, 255, 255, .300);
  --font-ui-title-size: 24px;
  --font-ui-title-weight: bold;
  --font-ui-title-line-height: 32px;
  --font-ui-subtitle-size: 24px;
  --font-ui-subtitle-weight: regular;
  --font-ui-subtitle-line-height: 32px;
  --font-ui-overline-size: 12px;
  --font-ui-overline-weight: semibold;
  --font-ui-overline-line-height: 24px;
  --font-ui-button-size: 16px;
  --font-ui-button-weight: semibold;
  --font-ui-button-line-height: 24px;
  --font-ui-body-active-size: 16px;
  --font-ui-body-active-weight: bold;
  --font-ui-body-active-line-height: 24px;
  --font-ui-body-size: 16px;
  --font-ui-body-weight: regular;
  --font-ui-body-line-height: 24px;
  --font-ui-label-active-size: 12px;
  --font-ui-label-active-weight: bold;
  --font-ui-label-active-line-height: 16px;
  --font-ui-label-size: 12px;
  --font-ui-label-weight: regular;
  --font-ui-label-line-height: 16px;
  --font-instrument-label-s-size: 16px;
  --font-instrument-label-s-weight: regular;
  --font-instrument-label-s-line-height: 24px;
  --font-instrument-label-m-size: 32px;
  --font-instrument-label-m-weight: regular;
  --font-instrument-label-m-line-height: 40px;
  --font-instrument-label-l-size: 64px;
  --font-instrument-label-l-weight: regular;
  --font-instrument-label-l-line-height: 80px;
  --font-instrument-value-s-size: 16px;
  --font-instrument-value-s-weight: semibold;
  --font-instrument-value-s-line-height: 24px;
  --font-instrument-value-s-enhanced-size: 24px;
  --font-instrument-value-s-enhanced-weight: semibold;
  --font-instrument-value-s-enhanced-line-height: 32px;
  --font-instrument-value-m-size: 32px;
  --font-instrument-value-m-weight: semibold;
  --font-instrument-value-m-line-height: 40px;
  --font-instrument-value-m-enhanced-size: 48px;
  --font-instrument-value-m-enhanced-weight: semibold;
  --font-instrument-value-m-enhanced-line-height: 64px;
  --font-instrument-value-l-size: 64px;
  --font-instrument-value-l-weight: semibold;
  --font-instrument-value-l-line-height: 80px;
  --font-instrument-value-l-enhanced-size: 96px;
  --font-instrument-value-l-enhanced-weight: semibold;
  --font-instrument-value-l-enhanced-line-height: 128px;
  --font-instrument-unit-s-size: 16px;
  --font-instrument-unit-s-weight: regular;
  --font-instrument-unit-s-line-height: 24px;
  --font-instrument-unit-m-size: 32px;
  --font-instrument-unit-m-weight: regular;
  --font-instrument-unit-m-line-height: 40px;
  --font-instrument-unit-l-size: 64px;
  --font-instrument-unit-l-weight: regular;
  --font-instrument-unit-l-line-height: 80px;
  --font-instrument-status-s-size: 16px;
  --font-instrument-status-s-weight: regular;
  --font-instrument-status-s-line-height: 24px;
  --font-instrument-status-m-size: 32px;
  --font-instrument-status-m-weight: regular;
  --font-instrument-status-m-line-height: 40px;
  --font-instrument-status-l-size: 64px;
  --font-instrument-status-l-weight: regular;
  --font-instrument-status-l-line-height: 80px;
  --shadow-flat: 0px 1px 1px 0px rgba(0, 0, 0, .200);
  --shadow-raised: 0px 2px 4px 0px rgba(0, 0, 0, .200);
  --shadow-floating: 0px 4px 16px 0px rgba(0, 0, 0, .300);
  --shadow-overlay: 0px 8px 32px 0px rgba(0, 0, 0, .400);
  --shadow-focused: 0px 0px 0px 4px rgb(0, 59, 148);
}

:root[theme=dusk] {
  --element-active-color: rgb(242, 242, 242);
  --element-neutral-color: rgba(255, 255, 255, .550);
  --element-inactive-color: rgba(255, 255, 255, .350);
  --element-disabled-color: rgba(255, 255, 255, .150);
  --element-active-inverted-color: rgb(0, 0, 0);
  --element-neutral-inverted-color: rgba(0, 0, 0, .600);
  --element-inactive-inverted-color: rgba(0, 0, 0, .400);
  --element-disabled-inverted-color: rgba(0, 0, 0, .200);
  --container-backdrop-color: rgb(15, 15, 15);
  --container-section-color: rgb(26, 26, 26);
  --container-background-color: rgb(31, 31, 31);
  --container-global-color: rgb(38, 38, 38);
  --container-overlay-color: rgba(0, 0, 0, .300);
  --border-divider-color: rgba(255, 255, 255, .080);
  --border-outline-color: rgba(0, 0, 0, .900);
  --border-edge-color: rgba(255, 255, 255, .050);
  --border-silhouette-color: rgb(0, 0, 0);
  --border-icon-outline-color: rgba(0, 0, 0, .500);
  --border-solid-color: rgb(51, 51, 51);
  --instrument-enhanced-primary-color: rgb(129, 223, 254);
  --instrument-enhanced-secondary-color: rgb(86, 150, 199);
  --instrument-enhanced-tertiary-color: rgba(92, 139, 193, .200);
  --instrument-regular-primary-color: rgb(230, 230, 230);
  --instrument-regular-secondary-color: rgb(153, 153, 153);
  --instrument-regular-tertiary-color: rgba(171, 171, 171, .150);
  --instrument-frame-primary-color: rgb(51, 51, 51);
  --instrument-frame-secondary-color: rgb(23, 23, 23);
  --instrument-frame-tertiary-color: rgb(5, 5, 5);
  --instrument-tick-mark-primary-color: rgb(230, 230, 230);
  --instrument-tick-mark-secondary-color: rgb(156, 156, 156);
  --instrument-tick-mark-tertiary-color: rgb(115, 115, 115);
  --instrument-starboard-color: rgb(41, 133, 111);
  --instrument-port-color: rgb(186, 86, 122);
  --alert-running-color: rgb(19, 138, 0);
  --alert-caution-color: rgb(237, 206, 6);
  --alert-warning-color: rgb(246, 148, 0);
  --alert-alarm-color: rgb(229, 38, 38);
  --alert-critical-alarm-color: rgb(229, 0, 229);
  --alert-limit-primary-color: rgba(0, 0, 0, .100);
  --alert-limit-secondary-color: rgba(0, 0, 0, .100);
  --automation-device-primary-color: rgb(230, 230, 230);
  --automation-device-secondary-color: rgb(115, 115, 115);
  --automation-device-tertiary-color: rgb(15, 15, 15);
  --automation-device-primary-inverted-color: rgb(0, 0, 0);
  --automation-device-secondary-inverted-color: rgb(51, 51, 51);
  --automation-device-tertiary-inverted-color: rgb(154, 154, 154);
  --automation-pipe-primary-color: rgb(156, 156, 156);
  --automation-pipe-secondary-color: rgb(20, 20, 20);
  --automation-pipe-tertiary-color: rgb(0, 0, 0);
  --automation-pipe-primary-inverted-color: rgb(15, 15, 15);
  --automation-pipe-secondary-inverted-color: rgba(255, 255, 255, .200);
  --automation-pipe-tertiary-inverted-color: rgba(255, 255, 255, .350);
  --automation-pipe-overlay-color: rgba(0, 0, 0, .200);
  --automation-pipe-disabled-color: rgba(0, 0, 0, .100);
  --automation-acid-alkalis: rgb(133, 113, 140);
  --automation-air-ventilation: rgb(133, 133, 133);
  --automation-fire-fighting: rgb(156, 106, 119);
  --automation-flammable-gas: rgb(119, 124, 72);
  --automation-fresh-water: rgb(89, 129, 139);
  --automation-fuel: rgb(153, 114, 74);
  --automation-masses: rgb(136, 118, 102);
  --automation-non-flammable-gas: rgb(112, 122, 97);
  --automation-oil: rgb(101, 94, 37);
  --automation-sea-water: rgb(91, 128, 121);
  --automation-steam: rgb(94, 97, 103);
  --automation-waste-media: rgb(90, 90, 90);
  --normal-enabled-background-color: rgb(51, 51, 51);
  --normal-enabled-border-color: rgb(0, 0, 0);
  --normal-hover-background-color: rgb(64, 64, 64);
  --normal-hover-border-color: rgb(0, 0, 0);
  --normal-pressed-background-color: rgb(38, 38, 38);
  --normal-pressed-border-color: rgb(0, 0, 0);
  --normal-focused-background-color: rgb(51, 51, 51);
  --normal-focused-border-color: rgba(87, 121, 162, .500);
  --normal-disabled-background-color: rgba(255, 255, 255, .00);
  --normal-disabled-border-color: rgba(0, 0, 0, .100);
  --normal-activated-background-color: rgb(38, 38, 38);
  --normal-activated-border-color: rgb(0, 0, 0);
  --on-normal-active-color: rgb(242, 242, 242);
  --on-normal-neutral-color: rgba(255, 255, 255, .550);
  --on-normal-disabled-color: rgba(255, 255, 255, .200);
  --raised-enabled-background-color: rgb(125, 125, 125);
  --raised-enabled-border-color: rgb(5, 5, 5);
  --raised-hover-background-color: rgb(140, 140, 140);
  --raised-hover-border-color: rgb(0, 0, 0);
  --raised-pressed-background-color: rgb(112, 112, 112);
  --raised-pressed-border-color: rgb(0, 0, 0);
  --raised-focused-background-color: rgb(125, 125, 125);
  --raised-focused-border-color: rgba(87, 121, 162, .500);
  --raised-disabled-background-color: rgba(0, 0, 0, .00);
  --raised-disabled-border-color: rgba(0, 0, 0, .100);
  --on-raised-active-color: rgb(0, 0, 0);
  --on-raised-neutral-color: rgba(0, 0, 0, .700);
  --on-raised-disabled-color: rgba(255, 255, 255, .200);
  --indent-enabled-background-color: rgba(0, 0, 0, .300);
  --indent-enabled-border-color: rgba(0, 0, 0, .400);
  --indent-hover-background-color: rgba(255, 255, 255, .060);
  --indent-hover-border-color: rgb(15, 15, 15);
  --indent-pressed-background-color: rgba(0, 0, 0, .400);
  --indent-pressed-border-color: rgb(15, 15, 15);
  --indent-focused-background-color: rgba(0, 0, 0, .200);
  --indent-focused-border-color: rgba(87, 121, 162, .500);
  --indent-disabled-background-color: rgba(0, 0, 0, .00);
  --indent-disabled-border-color: rgba(0, 0, 0, .100);
  --on-indent-active-color: rgb(242, 242, 242);
  --on-indent-neutral-color: rgba(255, 255, 255, .550);
  --on-indent-disabled-color: rgba(255, 255, 255, .200);
  --flat-enabled-background-color: rgba(255, 255, 255, .00);
  --flat-enabled-border-color: rgba(0, 0, 0, .00);
  --flat-hover-background-color: rgba(255, 255, 255, .060);
  --flat-hover-border-color: rgba(0, 0, 0, .00);
  --flat-pressed-background-color: rgba(255, 255, 255, .120);
  --flat-pressed-border-color: rgba(0, 0, 0, .00);
  --flat-focused-background-color: rgba(255, 255, 255, .00);
  --flat-focused-border-color: rgba(87, 121, 162, .500);
  --flat-disabled-background-color: rgba(0, 0, 0, .00);
  --flat-disabled-border-color: rgba(0, 0, 0, .00);
  --flat-activated-background-color: rgba(0, 0, 0, .050);
  --flat-activated-border-color: rgba(0, 0, 0, .00);
  --flat-checked-background-color: rgba(48, 87, 146, .100);
  --flat-checked-border-color: rgba(15, 74, 163, .00);
  --on-flat-active-color: rgb(242, 242, 242);
  --on-flat-neutral-color: rgba(255, 255, 255, .550);
  --on-flat-disabled-color: rgba(255, 255, 255, .200);
  --selected-enabled-background-color: rgb(74, 123, 165);
  --selected-enabled-border-color: rgb(0, 0, 0);
  --selected-hover-background-color: rgb(97, 144, 184);
  --selected-hover-border-color: rgb(0, 0, 0);
  --selected-pressed-background-color: rgb(62, 102, 137);
  --selected-pressed-border-color: rgb(0, 0, 0);
  --selected-focused-background-color: rgb(74, 123, 165);
  --selected-focused-border-color: rgba(87, 121, 162, .500);
  --selected-disabled-background-color: rgba(0, 0, 0, .200);
  --selected-disabled-border-color: rgba(0, 0, 0, .00);
  --on-selected-active-color: rgb(255, 255, 255);
  --on-selected-neutral-color: rgba(255, 255, 255, .550);
  --on-selected-disabled-color: rgba(0, 0, 0, .300);
  --thumb-enabled-background-color: rgb(51, 51, 51);
  --thumb-enabled-border-color: rgb(0, 0, 0);
  --thumb-hover-background-color: rgb(64, 64, 64);
  --thumb-hover-border-color: rgb(0, 0, 0);
  --thumb-pressed-background-color: rgb(92, 92, 92);
  --thumb-pressed-border-color: rgb(0, 0, 0);
  --thumb-focused-background-color: rgb(61, 61, 61);
  --thumb-focused-border-color: rgba(87, 121, 162, .500);
  --thumb-disabled-background-color: rgb(50, 50, 50);
  --thumb-disabled-border-color: rgba(0, 0, 0, .00);
  --on-thumb-active-color: rgb(242, 242, 242);
  --on-thumb-neutral-color: rgba(255, 255, 255, .550);
  --on-thumb-disabled-color: rgba(255, 255, 255, .200);
  --amplified-enabled-background-color: rgba(56, 122, 168, .100);
  --amplified-enabled-border-color: rgba(0, 0, 0, .00);
  --amplified-hover-background-color: rgba(56, 122, 168, .160);
  --amplified-hover-border-color: rgba(0, 0, 0, .00);
  --amplified-pressed-background-color: rgba(56, 122, 168, .080);
  --amplified-pressed-border-color: rgba(0, 0, 0, .00);
  --amplified-focused-background-color: rgba(56, 122, 168, .100);
  --amplified-focused-border-color: rgba(56, 122, 168, .500);
  --amplified-disabled-background-color: rgba(0, 0, 0, .100);
  --amplified-disabled-border-color: rgba(0, 0, 0, .00);
  --on-amplified-active-color: rgb(242, 242, 242);
  --on-amplified-neutral-color: rgba(255, 255, 255, .550);
  --on-amplified-disabled-color: rgba(255, 255, 255, .200);
  --device-enabled-background-color: rgb(31, 31, 31);
  --device-enabled-border-color: rgb(26, 26, 26);
  --device-hover-background-color: rgb(46, 46, 46);
  --device-hover-border-color: rgb(26, 26, 26);
  --device-pressed-background-color: rgb(61, 61, 61);
  --device-pressed-border-color: rgb(26, 26, 26);
  --device-focused-background-color: rgb(31, 31, 31);
  --device-focused-border-color: rgba(87, 121, 162, .500);
  --device-disabled-background-color: rgba(0, 0, 0, .00);
  --device-disabled-border-color: rgba(0, 0, 0, .050);
  --on-device-active-color: rgb(255, 255, 255);
  --on-device-neutral-color: rgb(123, 123, 123);
  --on-device-disabled-color: rgb(84, 84, 84);
  --running-enabled-background-color: rgb(19, 138, 0);
  --running-enabled-border-color: rgba(0, 0, 0, .100);
  --running-hover-background-color: rgb(23, 168, 0);
  --running-hover-border-color: rgba(0, 0, 0, .100);
  --running-pressed-background-color: rgb(15, 107, 0);
  --running-pressed-border-color: rgba(0, 0, 0, .200);
  --running-focused-background-color: rgb(19, 138, 0);
  --running-focused-border-color: rgb(247, 247, 247);
  --running-disabled-background-color: rgb(19, 138, 0);
  --running-disabled-border-color: rgba(0, 0, 0, .00);
  --on-running-active-color: rgb(255, 255, 255);
  --on-running-neutral-color: rgba(255, 255, 255, .600);
  --on-running-disabled-color: rgba(255, 255, 255, .200);
  --caution-enabled-background-color: rgb(237, 206, 6);
  --caution-enabled-border-color: rgb(20, 20, 20);
  --caution-hover-background-color: rgb(250, 222, 46);
  --caution-hover-border-color: rgb(20, 20, 20);
  --caution-pressed-background-color: rgb(199, 173, 5);
  --caution-pressed-border-color: rgb(20, 20, 20);
  --caution-focused-background-color: rgb(237, 206, 6);
  --caution-focused-border-color: rgb(247, 247, 247);
  --caution-disabled-background-color: rgb(237, 206, 6);
  --caution-disabled-border-color: rgba(0, 0, 0, .00);
  --on-caution-active-color: rgba(0, 0, 0, .900);
  --on-caution-neutral-color: rgba(0, 0, 0, .600);
  --on-caution-disabled-color: rgba(0, 0, 0, .300);
  --warning-enabled-background-color: rgb(246, 148, 0);
  --warning-enabled-border-color: rgba(0, 0, 0, .100);
  --warning-hover-background-color: rgb(255, 166, 31);
  --warning-hover-border-color: rgba(0, 0, 0, .100);
  --warning-pressed-background-color: rgb(204, 123, 0);
  --warning-pressed-border-color: rgba(0, 0, 0, .200);
  --warning-focused-background-color: rgb(246, 148, 0);
  --warning-focused-border-color: rgb(247, 247, 247);
  --warning-disabled-background-color: rgb(246, 148, 0);
  --warning-disabled-border-color: rgba(0, 0, 0, .00);
  --on-warning-active-color: rgba(0, 0, 0, .900);
  --on-warning-neutral-color: rgba(0, 0, 0, .600);
  --on-warning-disabled-color: rgba(0, 0, 0, .300);
  --alarm-enabled-background-color: rgb(229, 38, 38);
  --alarm-enabled-border-color: rgb(20, 20, 20);
  --alarm-hover-background-color: rgb(232, 64, 64);
  --alarm-hover-border-color: rgb(20, 20, 20);
  --alarm-pressed-background-color: rgb(200, 24, 24);
  --alarm-pressed-border-color: rgb(20, 20, 20);
  --alarm-focused-background-color: rgb(229, 38, 38);
  --alarm-focused-border-color: rgb(247, 247, 247);
  --alarm-disabled-background-color: rgb(229, 38, 38);
  --alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-alarm-active-color: rgb(255, 255, 255);
  --on-alarm-neutral-color: rgba(255, 255, 255, .650);
  --on-alarm-disabled-color: rgba(0, 0, 0, .300);
  --critical-alarm-enabled-background-color: rgb(201, 0, 202);
  --critical-alarm-enabled-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-hover-background-color: rgb(152, 0, 153);
  --critical-alarm-hover-border-color: rgba(0, 0, 0, .100);
  --critical-alarm-pressed-background-color: rgb(102, 0, 102);
  --critical-alarm-pressed-border-color: rgba(0, 0, 0, .200);
  --critical-alarm-focused-background-color: rgb(201, 0, 202);
  --critical-alarm-focused-border-color: rgb(247, 247, 247);
  --critical-alarm-disabled-background-color: rgb(201, 0, 202);
  --critical-alarm-disabled-border-color: rgba(0, 0, 0, .00);
  --on-critical-alarm-active-color: rgb(255, 255, 255);
  --on-critical-alarm-neutral-color: rgba(255, 255, 255, .700);
  --on-critical-alarm-disabled-color: rgba(255, 255, 255, .300);
  --notification-enabled-background-color: rgb(129, 212, 254);
  --notification-enabled-border-color: rgba(0, 0, 0, .500);
  --notification-hover-background-color: rgb(90, 191, 242);
  --notification-hover-border-color: rgba(0, 0, 0, .100);
  --notification-pressed-background-color: rgb(60, 167, 221);
  --notification-pressed-border-color: rgba(0, 0, 0, .200);
  --notification-focused-background-color: rgb(129, 212, 254);
  --notification-focused-border-color: rgb(247, 247, 247);
  --notification-disabled-background-color: rgb(129, 212, 254);
  --notification-disabled-border-color: rgba(0, 0, 0, .00);
  --on-notification-active-color: rgb(0, 0, 0);
  --on-notification-neutral-color: rgba(0, 0, 0, .600);
  --on-notification-disabled-color: rgba(0, 0, 0, .200);
  --font-ui-title-size: 24px;
  --font-ui-title-weight: bold;
  --font-ui-title-line-height: 32px;
  --font-ui-subtitle-size: 24px;
  --font-ui-subtitle-weight: regular;
  --font-ui-subtitle-line-height: 32px;
  --font-ui-overline-size: 12px;
  --font-ui-overline-weight: semibold;
  --font-ui-overline-line-height: 24px;
  --font-ui-button-size: 16px;
  --font-ui-button-weight: semibold;
  --font-ui-button-line-height: 24px;
  --font-ui-body-active-size: 16px;
  --font-ui-body-active-weight: bold;
  --font-ui-body-active-line-height: 24px;
  --font-ui-body-size: 16px;
  --font-ui-body-weight: regular;
  --font-ui-body-line-height: 24px;
  --font-ui-label-active-size: 12px;
  --font-ui-label-active-weight: bold;
  --font-ui-label-active-line-height: 16px;
  --font-ui-label-size: 12px;
  --font-ui-label-weight: regular;
  --font-ui-label-line-height: 16px;
  --font-instrument-label-s-size: 16px;
  --font-instrument-label-s-weight: regular;
  --font-instrument-label-s-line-height: 24px;
  --font-instrument-label-m-size: 32px;
  --font-instrument-label-m-weight: regular;
  --font-instrument-label-m-line-height: 40px;
  --font-instrument-label-l-size: 64px;
  --font-instrument-label-l-weight: regular;
  --font-instrument-label-l-line-height: 80px;
  --font-instrument-value-s-size: 16px;
  --font-instrument-value-s-weight: semibold;
  --font-instrument-value-s-line-height: 24px;
  --font-instrument-value-s-enhanced-size: 24px;
  --font-instrument-value-s-enhanced-weight: semibold;
  --font-instrument-value-s-enhanced-line-height: 32px;
  --font-instrument-value-m-size: 32px;
  --font-instrument-value-m-weight: semibold;
  --font-instrument-value-m-line-height: 40px;
  --font-instrument-value-m-enhanced-size: 48px;
  --font-instrument-value-m-enhanced-weight: semibold;
  --font-instrument-value-m-enhanced-line-height: 64px;
  --font-instrument-value-l-size: 64px;
  --font-instrument-value-l-weight: semibold;
  --font-instrument-value-l-line-height: 80px;
  --font-instrument-value-l-enhanced-size: 96px;
  --font-instrument-value-l-enhanced-weight: semibold;
  --font-instrument-value-l-enhanced-line-height: 128px;
  --font-instrument-unit-s-size: 16px;
  --font-instrument-unit-s-weight: regular;
  --font-instrument-unit-s-line-height: 24px;
  --font-instrument-unit-m-size: 32px;
  --font-instrument-unit-m-weight: regular;
  --font-instrument-unit-m-line-height: 40px;
  --font-instrument-unit-l-size: 64px;
  --font-instrument-unit-l-weight: regular;
  --font-instrument-unit-l-line-height: 80px;
  --font-instrument-status-s-size: 16px;
  --font-instrument-status-s-weight: regular;
  --font-instrument-status-s-line-height: 24px;
  --font-instrument-status-m-size: 32px;
  --font-instrument-status-m-weight: regular;
  --font-instrument-status-m-line-height: 40px;
  --font-instrument-status-l-size: 64px;
  --font-instrument-status-l-weight: regular;
  --font-instrument-status-l-line-height: 80px;
  --shadow-flat: 0px 1px 1px 0px rgba(0, 0, 0, .600);
  --shadow-raised: 0px 2px 4px 0px rgba(0, 0, 0, .700);
  --shadow-floating: 0px 4px 16px 0px rgba(0, 0, 0, .600);
  --shadow-overlay: 0px 8px 32px 0px rgba(0, 0, 0, .800);
}

/*# sourceMappingURL=openbridge.css.map */