:root {
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);

  --mdc-typography-font-family: system-ui;

  --mdc-theme-primary: #1976d2; /* blue 700 */
  --mdc-theme-secondary: #f57c00; /* orange 700 */

  --mdc-checkbox-checked-color: var(--mdc-theme-primary);

  --background-nav: #f5f5f5; /* grey 100 */
  --light-primary: hsl(from var(--mdc-theme-primary) h s 90%);
  --light-primary2: hsl(from var(--mdc-theme-primary) h s 70%);
  --dark-primary: hsl(from var(--mdc-theme-primary) h s 20%);
  --light-secondary: hsl(from var(--mdc-theme-secondary) h s 90%);
  --light-secondary2: hsl(from var(--mdc-theme-secondary) h s 70%);
  --circle-icon-background: #e0e0e0; /* grey 300 */
  --divider: #d3d3d3;
  --furnace-wood: #9c6b30; /* AHs brown */
  --furnace-oil: #7986cb; /* indigo 300 */
  --furnace-gas: #fbc02d; /* yellow 700 */
  --not-active: #bbbbbb;
  --inspection-early: #d3d3d3;
  --disabled-in-progress: #e0e0e0; /* grey 300 */
  --inspection-completed: #a9a9a9;
  --diagram-timeline: #e0e0e0; /* grey 300 */

  --mdc-dialog-z-index: 20;

  --mdc-switch-selected-focus-track-color: var(--light-primary);
  --mdc-switch-selected-pressed-track-color: var(--light-primary);
  --mdc-switch-selected-hover-track-color: var(--light-primary);
  --mdc-switch-selected-track-color: var(--light-primary);

  --mdc-switch-selected-focus-handle-color: var(--dark-primary);
  --mdc-switch-selected-pressed-handle-color: var(--dark-primary);
  --mdc-switch-selected-hover-handle-color: var(--dark-primary);
  --mdc-switch-selected-handle-color: var(--dark-primary);

  --form-group-align-items: flex-start;
  --form-group-justify-content: flex-start;
  --form-group-margin-left: 56px;
  --form-group-margin-bottom: 8px;
  --form-field-padding-left: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --mdc-theme-primary: #64b5f6; /* blue 300 */
    --mdc-theme-secondary: #ffb74d; /* orange 300 */
    --mdc-theme-background: #000;
    --mdc-theme-surface: #000;
    --mdc-theme-error: #ff4f6f;
    --mdc-theme-on-primary: #000;
    --mdc-theme-on-secondary: #000;
    --mdc-theme-on-surface: #fff;
    --mdc-theme-on-error: #000;
    --mdc-theme-text-primary-on-background: rgba(255, 255, 255, 0.87);
    --mdc-theme-text-secondary-on-background: rgba(255, 255, 255, 0.54);
    --mdc-theme-text-hint-on-background: rgba(255, 255, 255, 0.38);
    --mdc-theme-text-disabled-on-background: rgba(255, 255, 255, 0.38);
    --mdc-theme-text-icon-on-background: rgba(255, 255, 255, 0.38);
    --mdc-theme-text-primary-on-light: rgba(255, 255, 255, 0.87);
    --mdc-theme-text-secondary-on-light: rgba(255, 255, 255, 0.54);
    --mdc-theme-text-hint-on-light: rgba(255, 255, 255, 0.38);
    --mdc-theme-text-disabled-on-light: rgba(255, 255, 255, 0.38);
    --mdc-theme-text-icon-on-light: rgba(255, 255, 255, 0.38);
    --mdc-theme-text-primary-on-dark: black;
    --mdc-theme-text-secondary-on-dark: rgba(0, 0, 0, 0.7);
    --mdc-theme-text-hint-on-dark: rgba(0, 0, 0, 0.5);
    --mdc-theme-text-disabled-on-dark: rgba(0, 0, 0, 0.5);
    --mdc-theme-text-icon-on-dark: rgba(0, 0, 0, 0.5);

    --mdc-ripple-color: rgba(255, 255, 255, 0.87);

    --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.38);
    --mdc-filled-button-disabled-container-color: rgba(255, 255, 255, 0.12);
    --mdc-filled-button-disabled-label-text-color: rgba(255, 255, 255, 0.38);
    --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.12);
    --mdc-protected-button-disabled-label-text-color: rgba(255, 255, 255, 0.38);
    --mdc-outlined-button-disabled-label-text-color: rgba(255, 255, 255, 0.38);
    --mdc-outlined-button-outline-color: rgba(255, 255, 255, 0.12);
    --mdc-outlined-button-disabled-outline-color: rgba(255, 255, 255, 0.12);

    --mdc-checkbox-unchecked-color: rgba(255, 255, 255, 0.54);
    --mdc-checkbox-disabled-color: rgba(255, 255, 255, 0.38);
    --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);

    --mdc-elevation-box-shadow-for-gss: 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12);

    --mdc-switch-unselected-handle-color: #e0e0e0;
    --mdc-switch-unselected-hover-handle-color: #f5f5f5;
    --mdc-switch-unselected-focus-handle-color: #f5f5f5;
    --mdc-switch-unselected-pressed-handle-color: #f5f5f5;
    --mdc-switch-disabled-unselected-handle-color: #eeeeee;
    --mdc-switch-unselected-hover-state-layer-color: #eeeeee;
    --mdc-switch-unselected-focus-state-layer-color: #eeeeee;
    --mdc-switch-unselected-pressed-state-layer-color: #eeeeee;
    --mdc-switch-unselected-track-color: #616161;
    --mdc-switch-unselected-hover-track-color: #616161;
    --mdc-switch-unselected-focus-track-color: #616161;
    --mdc-switch-unselected-pressed-track-color: #616161;
    --mdc-switch-disabled-unselected-track-color: #eeeeee;

    --background-nav: #212121; /* grey 900 */
    --light-primary: hsl(from var(--mdc-theme-primary) h s 20%);
    --light-primary2: hsl(from var(--mdc-theme-primary) h s 45%);
    --dark-primary: hsl(from var(--mdc-theme-primary) h s 80%);
    --light-secondary: hsl(from var(--mdc-theme-secondary) h s 20%);
    --light-secondary2: hsl(from var(--mdc-theme-secondary) h s 45%);
    --circle-icon-background: #616161; /* grey 600 */
    --divider: #1f1f1f;
    --furnace-wood: #9c6b30; /* AHs brown */
    --furnace-oil: #7986cb; /* indigo 300 */
    --furnace-gas: #fbc02d; /* yellow 700 */
    --not-active: #616161; /* grey 700 */
    --inspection-early: #424242; /* grey 800 */
    --disabled-in-progress: #616161; /* grey 700 */
    --inspection-completed: #757575; /* grey 600 */
    --diagram-timeline: #616161; /* grey 700 */
  }

  /* Drawer */
  .mdc-drawer {
    border-color: rgba(255, 255, 255, 0.12);

    &, .mdc-drawer__title, .mdc-deprecated-list-item {
      color: rgba(255, 255, 255, 0.87);
    }
    .mdc-deprecated-list-group__subheader, .mdc-drawer__subtitle, .mdc-deprecated-list-item__graphic {
      color: rgba(255, 255, 255, 0.6);
    }
    .mdc-drawer__subtitle .db-inactive {
      color: var(--mdc-theme-error);
    }
  }

  .mdc-drawer--modal {
    box-shadow: 0px 8px 10px -5px rgba(255, 255, 255, 0.2), 0px 16px 24px 2px rgba(255, 255, 255, 0.14), 0px 6px 30px 5px rgba(255, 255, 255, 0.12);

    & + .mdc-drawer-scrim {
      background-color: rgba(255, 255, 255, 0.32);
    }
  }
  /* Linear Progress */
  .mdc-linear-progress__buffer-bar {
    background-color: #757575; /* grey 600 */
  }

  /* Select */
  .mdc-select:not(.mdc-select--disabled) {
    .mdc-select__selected-text {
      color: rgba(255, 255, 255, 0.87);
    }
    .mdc-floating-label, & + .mdc-select-helper-text {
      color: rgba(255, 255, 255, 0.6);
    }
    &.mdc-select--focused .mdc-floating-label {
      color: rgba(98, 0, 238, 0.87);
    }
    .mdc-select__dropdown-icon, .mdc-select__icon {
      fill: rgba(255, 255, 255, 0.54);
    }
  }
  .mdc-select.mdc-select--disabled {
    .mdc-select__selected-text, .mdc-floating-label, .mdc-select__dropdown-icon, .mdc-select__icon, & + .mdc-select-helper-text {
      color: rgba(255, 255, 255, 0.38);
    }
  }
  .mdc-select--filled:not(.mdc-select--disabled) {
    .mdc-select__anchor {
      background-color: #212121;
    }
    .mdc-line-ripple::before {
      border-bottom-color: rgba(255, 255, 255, 0.42);
    }
    :hover .mdc-line-ripple::before {
      border-bottom-color: rgba(255, 255, 255, 0.87);
    }
  }
  .mdc-select--filled.mdc-select--disabled .mdc-line-ripple::before {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
  .mdc-select--outlined:not(.mdc-select--disabled) {
    .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
      border-color: rgba(255, 255, 255, 0.38);
    }
    &:not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline {
      .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
        border-color: rgba(255, 255, 255, 0.87);
      }
    }
  }
  .mdc-select--outlined.mdc-select--disabled {
    .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
      border-color: rgba(255, 255, 255, 0.06);
    }
  }

  /* Card */
  .mdc-card {
    box-shadow: 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12);
  }
  .mdc-card--outlined {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.2), 0px 0px 0px 0px rgba(255, 255, 255, 0.14), 0px 0px 0px 0px rgba(255, 255, 255, 0.12);
  }
  .mdc-card__action-icons {
    &, &:not(:disabled) {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  /* Dialog */
  .mdc-dialog {
    .mdc-dialog__scrim, .mdc-dialog__surface-scrim {
      background-color: rgba(255, 255, 255, 0.32);
    }
    .mdc-dialog__title {
      color: rgba(255, 255, 255, 0.87);
    }
    .mdc-dialog__content {
      color: rgba(255, 255, 255, 0.6);
    }
    &.mdc-dialog--scrollable {
      .mdc-dialog__title, .mdc-dialog__actions, &.mdc-dialog-scroll-divider-footer .mdc-dialog__actions {
        border-color: rgba(255, 255, 255, 0.12);
      }

      .mdc-dialog__title {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        margin-bottom: 0;
      }
    }
    &.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header {
      /* @alternate */
      box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
    }
    .mdc-dialog__surface {
      border-radius: 4px;
      /* @alternate */
      border-radius: var(--mdc-shape-medium, 4px);
    }
  }
  .mdc-dialog__surface {
    /* @alternate */
    box-shadow: 0px 11px 15px -7px rgba(255, 255, 255, 0.2), 0px 24px 38px 3px rgba(255, 255, 255, 0.14), 0px 9px 46px 8px rgba(255, 255, 255, 0.12);
  }

  /* List */
  .mdc-deprecated-list-divider {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }
  .mdc-list-divider {
    background-color: rgba(255, 255, 255, 0.12);
  }

  /* Menu */
  .mdc-menu {
    .mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list {
      color: rgba(255, 255, 255, 0.87);
    }
  }
  .mdc-menu-surface {
    box-shadow: 0px 5px 5px -3px rgba(255, 255, 255, 0.2), 0px 8px 10px 1px rgba(255, 255, 255, 0.14), 0px 3px 14px 2px rgba(255, 255, 255, 0.12);
  }

  /* Radio */
  .mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
    border-color: rgba(255, 255, 255, 0.54);
  }
  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
  .mdc-radio .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
    border-color: rgba(255, 255, 255, 0.38);
  }
  .mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked + .mdc-radio__background .mdc-radio__outer-circle,
  .mdc-radio .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
    border-color: rgba(255, 255, 255, 0.38);
  }
  .mdc-radio [aria-disabled=true] .mdc-radio__native-control + .mdc-radio__background .mdc-radio__inner-circle,
  .mdc-radio .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
    border-color: rgba(255, 255, 255, 0.38);
  }

  /* Tab */
  .mdc-tab {
    .mdc-tab__text-label {
      color: rgba(255, 255, 255, 0.6);
    }
    .mdc-tab__icon {
      color: rgba(255, 255, 255, 0.54);
    }
  }
  .mdc-tab--active {
    .mdc-tab__text-label {
      color: var(--mdc-theme-primary);
    }
    .mdc-tab__icon {
      color: var(--mdc-theme-primary);
    }
  }

  .mdc-data-table {
    border-color: rgba(255, 255, 255, 0.12);
  }
  .mdc-data-table__cell,
  .mdc-data-table__header-cell {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }
  .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
    background-color: rgba(255, 255, 255, 0.04);
  }
  .mdc-data-table__header-cell {
    color: rgba(255, 255, 255, 0.87);
  }
  .mdc-data-table__pagination-total,
  .mdc-data-table__pagination-rows-per-page-label,
  .mdc-data-table__cell {
    color: rgba(255, 255, 255, 0.87);
  }

  /* Text Field */
  .mdc-text-field:not(.mdc-text-field--disabled) {
    .mdc-floating-label {
      color: rgba(255, 255, 255, 0.6);
    }
    .mdc-text-field__input {
      color: rgba(255, 255, 255, 0.87);
    }
  }
  @media all {
    .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
      &::-webkit-input-placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder, &::placeholder {
        color: rgba(255, 255, 255, 0.54);
      }
    }
  }
  .mdc-text-field:not(.mdc-text-field--disabled) {
    & + .mdc-text-field-helper-line .mdc-text-field-helper-text, .mdc-text-field-character-counter, & + .mdc-text-field-helper-line .mdc-text-field-character-counter {
      color: rgba(255, 255, 255, 0.6);
    }
    .mdc-text-field__icon--leading, .mdc-text-field__icon--trailing {
      color: rgba(255, 255, 255, 0.54);
    }
    .mdc-text-field__affix--prefix, .mdc-text-field__affix--suffix {
      color: rgba(255, 255, 255, 0.6);
    }
  }
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: #212121;

    .mdc-line-ripple::before {
      border-bottom-color: rgba(255, 255, 255, 0.42);
    }
    &:hover .mdc-line-ripple::before {
      border-bottom-color: rgba(255, 255, 255, 0.87);
    }
  }
  .mdc-text-field--outlined:not(.mdc-text-field--disabled) {
    .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
      border-color: rgba(255, 255, 255, 0.38);
    }
    &:not(.mdc-text-field--focused):hover .mdc-notched-outline {
      .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
        border-color: rgba(255, 255, 255, 0.87);
      }
    }
  }
  .mdc-text-field--disabled .mdc-text-field__input {
    color: rgba(255, 255, 255, 0.38);
  }
  @media all {
    .mdc-text-field--disabled .mdc-text-field__input {
      &::-webkit-input-placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder, &::placeholder {
        color: rgba(255, 255, 255, 0.38);
      }
    }
  }
  .mdc-text-field--disabled {
    .mdc-floating-label, .mdc-text-field-character-counter {
      color: rgba(255, 255, 255, 0.38);
    }
    & + .mdc-text-field-helper-line {
      .mdc-text-field-helper-text, .mdc-text-field-character-counter {
        color: rgba(255, 255, 255, 0.38);
      }
    }
    .mdc-text-field__icon--leading, .mdc-text-field__icon--trailing {
      color: rgba(255, 255, 255, 0.3);
    }
    .mdc-text-field__affix--prefix, .mdc-text-field__affix--suffix {
      color: rgba(255, 255, 255, 0.38);
    }
    .mdc-line-ripple::before {
      border-bottom-color: rgba(255, 255, 255, 0.06);
    }
    .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
      border-color: rgba(255, 255, 255, 0.06);
    }
  }

  /* Top App Bar */
  .mdc-top-app-bar--short-collapsed {
    box-shadow: 0px 2px 4px -1px rgba(255, 255, 255, 0.2), 0px 4px 5px 0px rgba(255, 255, 255, 0.14), 0px 1px 10px 0px rgba(255, 255, 255, 0.12);
  }
  .mdc-top-app-bar--fixed-scrolled {
    box-shadow: 0px 2px 4px -1px rgba(255, 255, 255, 0.2), 0px 4px 5px 0px rgba(255, 255, 255, 0.14), 0px 1px 10px 0px rgba(255, 255, 255, 0.12);
  }
}

/* * { */
/*     user-select: none; */
/*     -webkit-user-select: none; */
/*     -moz-user-select: none; */
/*     -ms-user-select: none; */
/* } */

* {
  scrollbar-width: thin;
}

.mdc-tab-scroller__scroll-area,
.mdc-tab-scroller__test {
  scrollbar-width: none;
}

html {
  overscroll-behavior: none;
  height: 100vh;
}

body {
  overscroll-behavior: none;
  margin: 0px;
  padding: 0px;
  height: 100%;
  color: var(--mdc-theme-on-surface);
}

.app {
  height: 100%;
  background-color: var(--mdc-theme-background);
}

.layout {
  height: 100%;
}

.mdc-drawer-app-content > .visibly {
  &, & > .visibly  {
    height: 100%;
  }
}

.detail-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* prevents jumping scrollbars when clicking three dot menu */

  .detail-main {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    flex: 1 1 auto;
    /* height: calc(100% - 64px); */
  }
  .detail-content {
    height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
  }
  .detail-content:has(> .top-level-list > .top-level-list--cards) {
    scrollbar-gutter: auto;
  }
  .detail-nav {
    background-color: var(--background-nav);
    flex-shrink: 0;
    max-height: 288px;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .mdc-deprecated-list {
    padding: 0;


    & > .mdc-deprecated-list-item.details__section--compact:last-child {
      margin-bottom: 12px;
    }

    .mdc-deprecated-list-item {
      &.multiline {
        height: 100%;
        align-items: flex-start;
        padding-bottom: 12px;

        .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__meta {
          padding-top: 16px;
        }
      }

      &.action-item {
        will-change: auto;

        .mdc-deprecated-list-item__text {
          color: var(--mdc-theme-text-secondary-on-background);
        }
      }
      &.action-item--expander > .mdc-deprecated-list-item__text {
        color: var(--mdc-theme-text-primary-on-background);
      }
      &.action-item--filled > .mdc-deprecated-list-item__text {
        color: var(--mdc-theme-text-primary-on-background);
        font-weight: 700;
      }

      /* Group headers label their group, they are not clickable themselves — only their context menu is. */
      &.action-item--header {
        cursor: default;

        .mdc-icon-button {
          cursor: pointer;
        }
      }

      &.list-item--no-left-padding {
        padding-left: 0;
      }

    }

    .mdc-deprecated-list-item__graphic.material-icons {
      display: inline-block;
    }
  }

  .mdc-deprecated-list-group__subheader {
    padding-left: 56px;
    color: var(--mdc-theme-primary);
  }
  .details__section {
    padding-left: 72px;
    padding-right: 16px;
    /*padding-top: 20px;*/
    padding-bottom: 20px;
  }
  .details__section--compact {
    height: 24px;
    padding-bottom: 0px;
  }

  .details__section--indented {
    padding-left: 36px;
  }
  .button-full-width {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 16px 16px 72px;
  }
}

.clickable-cell {
  cursor: pointer;
}

.mdc-top-app-bar__section--align-start {
  padding-left: 4px;
}

.right-align {
  text-align: right;
}

.icon--card-info-inline {
  font-size: 16px;
  vertical-align: middle;
}

.circle-icon {
  background-color: var(--circle-icon-background);
  color: var(--mdc-theme-text-secondary-on-light);

  &.connect-icons {
    font-size: 24px;
  }
}
.circle-icon--big {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .material-icons {
    font-size: 20px;
  }
}
.mdc-deprecated-list-item__meta {
  .connect-icons {
    padding-right: 4px;
  }

  &.auto-complete-button-in-list-item .material-icons {
    color: var(--mdc-theme-text-secondary-on-background);
  }

  &.contact-data-indicators {
    white-space: nowrap;

    .material-icons:not(.mdc-icon-button) {
      margin-right: 0px;
      padding-right: 0px;
      text-align: center;
    }
  }
  &.mdc-deprecated-list-item__meta--multi-item {
    display: flex;
    align-items: center;
  }

  .circle-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .material-icons {
      font-size: 20px;
    }
  }
}
.lifecycle--planned {
  color: var(--mdc-theme-primary);
}
.lifecycle--removed {
  color: var(--not-active);
}
.list-item--not-active {
  color: var(--not-active);
}
.furnace-wood {
  color: var(--furnace-wood);
}
.furnace-oil {
  color: var(--furnace-oil);
}
.furnace-gas {
  color: var(--furnace-gas);
}

.action-header {
  display: flex;
  align-items: center;

  .action-header__actions {
    margin-left: auto;
    margin-right: -8px;
  }
}

.wizard-header {
  display: flex;
  align-items: center;
  padding-left: 16px;
  margin-left: 56px;
  margin-top: 24px;
  margin-bottom: 16px;
  color: var(--mdc-theme-primary);

  &.wizard-header--sub {
    margin-top: 16px;
    margin-bottom: 8px;
    color: var(--mdc-theme-primary);
  }
  &.wizard-header--warning {
    color: var(--mdc-theme-secondary);
  }
  &.wizard-header--error {
    color: var(--mdc-theme-error);
  }

  .wizard-header__actions {
    margin-left: auto;
    margin-right: -8px;
  }
}

.wizard-paragraph {
  text-align: left;
  padding-left: 16px;
  margin-left: 56px;
  min-height: 1em;
}

.standard-header {
  display: flex;
  align-items: center;

  &.standard-header--primary {
    color: var(--mdc-theme-primary);
  }
}

.group-header {
  color: var(--mdc-theme-primary);
  padding-top: 16px;
}

.list-group-header {
  color: var(--mdc-theme-primary);
  padding-bottom: 0px;

  & ~ .mdc-deprecated-list {
    margin-left: -16px;
    margin-right: -16px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: var(--form-group-align-items);
  justify-content: var(--form-group-justify-content);
  margin-left: var(--form-group-margin-left);
  margin-bottom: var(--form-group-margin-bottom);
}
.form-group--reset {
  --form-group-align-items: flex-start;
  --form-group-justify-content: flex-start;
  --form-group-margin-left: 56px;
  --form-group-margin-bottom: 8px;
}
.form-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.form-field__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* simple text based formlets have a height of 56px.
   * Including the validation helper text this amounts to 75px.
   * This setting ensures that for the most common usecase we
   * end up with a formlet box which does not jump when the
   * validation text is displayed. */
  min-height: 75px;
}
.form-field-ng {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.form-field-ng__graphic {
  margin-right: 32px;
  width: 24px;
  height: 24px;
  color: var(--mdc-theme-text-icon-on-background);
}
.form-field-ng__icon-button {
  height: 56px;
  color: var(--mdc-theme-text-icon-on-background);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--mdc-theme-text-icon-on-background);
}
.form-field-ng__graphic .mdc-icon-button {
  color: var(--mdc-theme-text-icon-on-background);
  --mdc-theme-primary: var(--mdc-theme-text-icon-on-background);
  --mdc-theme-secondary: var(--mdc-theme-text-icon-on-background);
}
.form-field {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;

  &.form-field--list {
    padding-bottom: 0;
    padding-left: 0;
  }
}
.form {
  &.form--squashed .form-field, &.filter-form .form-field {
    padding-bottom: 0px;
  }
  .form-field {
    & > .form-field__separator {
      align-self: flex-start;
      margin-top: 24px;
    }
    
    .form-field__graphic {
      margin-right: 32px;
      width: 24px;
      height: 24px;
      color: var(--mdc-theme-text-icon-on-background);

      .mdc-icon-button {
        color: var(--mdc-theme-text-icon-on-background);
        --mdc-theme-primary: var(--mdc-theme-text-icon-on-background);
        --mdc-theme-secondary: var(--mdc-theme-text-icon-on-background);
      }
    }
    .form-field__icon-button {
      height: 56px;
      color: var(--mdc-theme-text-icon-on-background);
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: var(--mdc-theme-text-icon-on-background);
    }
    .form-field__control:first-child {
      margin-left: 56px;
    }

    .form-field__control {
      &, .mdc-form-field {
        justify-content: space-between;
        width: 100%;
      }

      &.form-field__control--group .mdc-text-field-helper-line {
        margin-left: 8px;
        margin-bottom: 0px;
      }
    }

    .mdc-text-field {
      background-color: var(--mdc-theme-surface);
      width: 100%;
    }
    .mdc-select {
      &, .mdc-menu {
        background-color: var(--mdc-theme-surface);
        width: 100%;
      }
      .mdc-select__anchor {
        background-color: var(--mdc-theme-surface);
      }
    }
    .hs-form-no-fullwidth {
      .mdc-select, .mdc-text-field {
        width: unset;
      }
    }

    .mdc-form-field {
      min-height: 56px;
    }

    .mdc-form-field--align-end > label {
      margin-left: 16px;
      font-size: 16px;
    }
  }

  .form-field__indent {
    .form-field .form-field__control:first-child {
      margin-left: 72px;
    }
    .form-field__multiselect button {
      margin-right: 16px;
    }
  }

  &.filter-form {
    .form-field .mdc-form-field {
      min-height: 48px;
    }

    .mdc-select, .mdc-text-field {
      margin-bottom: 16px;
    }
  }

  &:not(.form--no-margin-changes) .mdc-deprecated-list-item__graphic {
    margin-right: 48px;
  }

  .mdc-tab-bar {
    padding-bottom: 16px;
  }
  .action-header {
    color: var(--mdc-theme-primary);
  }
  .action-header.action-header--warning {
    color: var(--mdc-theme-secondary);
  }
  .action-header.action-header--error {
    color: var(--mdc-theme-error);
  }
}

.hs-form-no-fullwidth {
  display: inline-grid;
  position: relative;
  margin-right: 16px;

  &:last-child {
    margin-right: 0;
  }
}
.form--no-margin-changes .form-page .form .mdc-deprecated-list-item__graphic {
  margin-right: 32px;
}
.form-field--furnace-notice-index {
  align-items: start;
  display: flex;
}
.number-formlet--furnace-notice-index {
  min-width: 52px;
  max-width: 200px;
  padding-top: 8px;
}

#qr-scanner, #qr-scanner__scrim {
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
#qr-scanner {
  z-index: 20;
}
#qr-scanner__scrim {
  background-color: var(--mdc-theme-text-icon-on-background);
  opacity: 1;
}
#qr-scanner__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
#qr-scanner__button-row {
  padding: 16px;
}
#qr-scanner__reader {
  background-color: var(--mdc-theme-background);
  padding: 8px !important;
  border: 3px solid var(--mdc-theme-primary) !important;
}

.diff-json {
  font-size: 90%;
}
/* Disable "Powered by scanapp.org" */
#qr-scanner__reader > div > img[alt="Info icon"] {
  display: none;
}
/* Disable "Or drop an image to scan" */
#qr-scanner__reader__dashboard_section > div > div > label + div {
  display: none;
}
#html5-qrcode-anchor-scan-type-change {
  display: inline-block;
  margin-top: 0.7em;
  text-decoration: none !important;
  color: var(--mdc-theme-text-secondary-on-light);
  font-size: 0.8rem;
}
#qr-scanner__reader__dashboard_section_csr,
#html5-qrcode-button-camera-stop {
  font-size: 0.7rem;
}
#qr-scanner__reader__dashboard_section {
  padding-bottom: 0px !important;
}

.overlay {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 7;
  background-color: var(--mdc-theme-surface);
}

.form-page {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1000000;
  background-color: var(--mdc-theme-surface);
  display: flex;
  flex-direction: column;

  .mdc-top-app-bar {
    background-color: var(--mdc-theme-surface);
  }
  .mdc-deprecated-list {
    padding: 0;
  }

  & > .form {
    min-height: 0px;
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content .form-page {
  margin-right: 0;
}

.mdc-deprecated-list-item {
  .mdc-deprecated-list-item__meta-actions {
    display: none;
  }
  .mdc-deprecated-list-item__meta a {
    color: var(--mdc-theme-text-icon-on-background);
  }

  .mdc-deprecated-list-item__meta--multi-icon > * {
    margin-left: 8px;
  }
  .mdc-deprecated-list-item__meta--multi-icon-double {
    min-width: 75px;
  }

  &:hover .mdc-deprecated-list-item__meta-actions {
    display: inline-block;
  }
}
.item-meta--no-margin {
  margin-left: 0;
  margin-right: 0;
}

.resistances {
  counter-reset: ctr;

  .action-header__text:after {
    content: counter(ctr);
    counter-increment: ctr;
  }
}

.login-form {
  margin: auto;
  max-width: 600px;

  .auth-error {
    text-align: center;
    margin-top : 8px;
    margin-bottom : 8px;
    color: var(--mdc-theme-error);
  }
  .mdc-form-field {
    justify-content: space-between;
    width: 100%;
  }
}
.login-form__button {
  width: 100%;
}
.login-form__button--hidden {
  width: 64px;
  margin-left: auto;
}

.full-width {
  width: 100%
}
.objective-table {
  /* margin-left: 40px; */
  width: 100%;

  .mdc-data-table {
    width: 100%;
  }
  .mdc-data-table__header-cell {
    white-space: normal;
  }

  &.mdc-data-table--objectives-table .mdc-data-table__row {
    & > :nth-child(1) { width: 50%; }
    & > :nth-child(2), & > :nth-child(3) { width: 25%; }
  }
}

.overview-table {
  padding-bottom: 16px;

  .mdc-data-table__row {
    position: relative;
  }
}
.overview-table__cross-out {
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  border: none;
  border-top: 1px solid currentColor;
}

.app-version {
  position: absolute;
  bottom: 32px;
  height: 20px;
  width: 100%;
  text-align: center;
  color: var(--mdc-theme-text-icon-on-background);

  & > button {
    color: var(--mdc-theme-text-icon-on-background);
    border-width: 0px;
    background-color: #00000000;
  }
}

.german-hidden {
  line-height: 0px;
  color: var(--mdc-theme-background);
}

.splash .info .desc {
  padding-top: 16px;
  color: var(--dark-primary);
  background-color: var(--mdc-theme-surface);
  text-align: center;
}

.update-info {
  text-align: center;
}

.mdc-text-field--deletable .mdc-text-field__icon.mdc-text-field__icon--trailing {
  pointer-events: auto;
}
.mdc-text-field > .visibly {
  align-self: center;
  line-height: 0;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid) .mdc-floating-label,
.mdc-select--focused:not(.mdc-select--disabled):not(.mdc-select--invalid) .mdc-floating-label {
  color: var(--mdc-theme-primary);
}
.mdc-select--invalid + .mdc-select-helper-text {
  color: var(--mdc-theme-error);
}

.tree-navigation {
  background-color: var(--background-nav);
}

.mdc-top-app-bar {
  position: static;
  padding-top: env(safe-area-inset-top);
  background-color: var(--background-nav);
  color:  var(--mdc-theme-on-surface);

  .mdc-top-app-bar__navigation-icon, .mdc-top-app-bar__action-item {
    color: var(--mdc-theme-on-surface);
  }
  .mdc-top-app-bar__section--align-end {
    padding-right: calc(var(--scrollbar-width, 10px) + 4px);
  }
}

.mdc-deprecated-list-item__text a {
  text-decoration: none;
}

.hs-icon-button--in-form {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
.inspection,
.activity {
  display: inline-block;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  font-weight: bold;
  font-size: 14px;
  line-height: 15px;
}
.inspection {
  position: relative;
  color: var(--mdc-theme-primary);
  border-color: var(--mdc-theme-primary);

  &.inspection--late {
    color: var(--mdc-theme-secondary);
    border-color: var(--mdc-theme-secondary);

    &.inspection--in-progress {
      background-color: var(--light-secondary);
    }

    &.inspection--completed, &.inspection--billed, &.activity.activity--completed {
      background-color: var(--mdc-theme-secondary);
    }

    &.inspection--disabled {
      background-color: var(--mdc-theme-surface);
      color: var(--light-secondary2);
    }
  }

  &.inspection--early {
    background-color: var(--mdc-theme-surface);
    color: var(--inspection-early);
    border-color: var(--inspection-early);
  }
  &.inspection--in-progress {
    background-color: var(--light-primary);
  }
  &.inspection--disabled {
    background-color: var(--mdc-theme-surface);
    color: var(--mdc-theme-text-disabled-on-background);
    border-color: var(--mdc-theme-text-disabled-on-background);

    .activity-symbol.activity-symbol--disabled {
      color: var(--mdc-theme-text-disabled-on-background);
    }
  }

  .activity-symbol.activity-symbol--disabled {
    color: var(--light-primary2);
  }

  &.inspection--has-hint-dot {
    &::after {
      position: absolute;
      top: -6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      content: "";
      z-index: 20;
    }
    &.inspection--has-hint-dot-grey::after {
      background-color: var(--inspection-completed);
    }
    &.inspection--has-hint-dot-blue::after {
      background-color: var(--mdc-theme-primary);
    }
    &.inspection--has-hint-dot-orange::after {
      background-color: var(--mdc-theme-secondary);
    }
    &.inspection--has-hint-dot-red::after {
      background-color: var(--mdc-theme-error);
    }
  }
}

.inspection.inspection--planned,
.activity.activity--not-completed {
  background-color: var(--mdc-theme-surface);
}
.inspection-block--disabled .inspection.inspection--in-progress {
  background-color: var(--disabled-in-progress);
}
.inspection.inspection--completed,
.inspection.inspection--billed,
.activity.activity--completed {
  color: var(--mdc-theme-on-primary);
  background-color: var(--mdc-theme-primary);
}
.activity-symbol--annotation {
  font-size: smaller;
  vertical-align: top;
  line-height: 6px;
}
.activity-symbol--ligature {
  /* Move letters of e.g. Lö closer to each other */
  letter-spacing: -1px;
}
.activity-symbol--annotation-minus {
  line-height: 3px;
}
.inspection--late .activity-symbol.activity-symbol--disabled {
  color: var(--light-secondary2);
}
.inspection-block--later .inspection {
  &, &.inspection--in-progress, .activity-symbol, .activity-symbol.activity-symbol--disabled {
    color: var(--inspection-early);
    border-color: var(--inspection-early);
  }
  .inspection.inspection--completed {
    &, .activity-symbol, .activity-symbol.activity-symbol--disabled {
      color: var(--mdc-theme-on-primary);
      background-color: var(--inspection-early);
      border-color: var(--inspection-early);
    }
  }
}
.inspection-block--disabled .inspection {
  &, &.inspection--in-progress, .activity-symbol, .activity-symbol.activity-symbol--disabled {
    color: var(--inspection-completed);
    border-color: var(--inspection-completed);
  }

  .activity-symbol.activity-symbol--disabled {
    color: var(--inspection-early);
  }

  &.inspection--completed {
    & , .activity-symbol {
      color: var(--mdc-theme-on-primary);
      background-color: var(--inspection-completed);
      border-color: var(--inspection-completed);
      clip-path: border-box;
    }
    .activity-symbol.activity-symbol--disabled {
      color: var(--inspection-early);
    }
  }
}

.inspection-block.inspection-block--disabled .inspection.inspection--has-hint-dot::after {
  background-color: var(--inspection-completed);
}
.mdc-deprecated-list-item__meta .inspections-group {
  position: relative;
}
.schedule-period-map .mdc-deprecated-list-item__text {
  color: var(--mdc-theme-secondary);
}
.schedule-activity-item {
  margin-left: 56px;
}

.top-level-list {
  display: flex;
  flex-direction: column;
  height: 100%;

  & > .top-level-list__header {
    flex: 0 1 auto;
  }
  & > .top-level-list--cards, & > .top-level-list--compact {
    flex: 1 1 auto;
    min-height: 0;

    & > div {
      scrollbar-gutter: stable;
    }
  }

  .top-level-list__header {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: var(--background-nav);
  }

  /* this prevents the item to become the containing block of the position: fixed; mdc-menu context menu.
   * If we don't do this the menu is offset relative to the item instead of the viewport, leading to a completely mis-
   * placed menu.
   * */
  .mdc-deprecated-list-item {
    will-change: unset;
  }

  /* this complicated construct is necessary because the context menu list (which is one line) still gets styled like a
   * two line list because it is nested in the two line building item list. We have to create higher specificity to
   * override this.
   * */
  .mdc-deprecated-list-item .mdc-deprecated-list .mdc-deprecated-list-item {
    height: 48px;

    .mdc-deprecated-list-item__text {
      align-self: auto;
    }
  }
}
.mdc-deprecated-list-item.item--selected {
  background-color: var(--light-primary);
}
.mdc-deprecated-list-item.item--frozen {
  background-color: var(--inspection-early);
}

.top-level-list--cards {
  background-color: var(--background-nav);
}
.top-level-list--compact {
  padding: 0px;
}
.list-item__graphic--icon-button {
  width: 48px;
  height: 48px;
  margin-left: -12px;
  margin-right: 20px;
}
.list-item__meta--icon-button {
  margin-right: -12px;
}
.mdc-deprecated-list-item__meta + .list-item__meta--icon-button {
  margin-left: 0px;
}
.top-level-list__header {
  .list-item__graphic--icon-button {
    margin-left: -16px;
  }
  .list-item__meta--icon-button {
    margin-right: -16px;
  }
}

#selection-menu {
  margin-right: 8px;
  width: 48px;

  .mdc-deprecated-list-item {
    padding-right: 16px;
    padding-left: 16px;
    flex-grow: 1;
  }
}
.contact-list {
  padding: 0px;
}
.building-card {
  padding: 8px 16px;

  &.building-card--selected {
    .mdc-card, .mdc-card__media {
      background-color: var(--light-primary);
    }
  }
  &.building-card--frozen {
    .mdc-card, .mdc-card__media {
      background-color: var(--inspection-early);
    }
  }
  &.building-card--warning .mdc-card {
    box-shadow: 0px 0px 10px var(--mdc-theme-error) inset;
  }

  .mdc-card__primary-action {
    will-change: auto;
  }
  .building-card__header {
    height: 110px;
    display: flex;
    flex-direction: row;

    &.building-card__header--contacts {
      height: 72px;
    }
    &.building-card__header--message-log {
      height: 72px;
    }
  }

  .building-card__address {
    margin-top: 8px;
    margin-right: 16px;
    overflow: hidden;

    & > div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .building-card__status {
    margin-top: 8px;
    margin-right: 16px;
    text-align: right;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    .building-card__status__line {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: end;
    }
    .inspection-block {
      position: relative;
    }
  }

  .building-card__status__icon {
    color: var(--mdc-theme-text-secondary-on-background);
    line-height: 12px;
    margin-right: 4px;
  }

  .building-card__status__label {
    display: inline-block;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    font-size: 10px;
    font-weight: bold;
    line-height: 12px;

    &.building-card__status__label-planned {
      background-color: var(--mdc-theme-secondary);
      color: var(--mdc-theme-on-secondary);
      border-color: var(--mdc-theme-secondary);
    }
    &.building-card__status__label-critical {
      background-color: var(--mdc-theme-error);
      color: var(--mdc-theme-on-primary);
      border-color: var(--mdc-theme-error);
    }
  }

  .preliminary .building-card__status__label.building-card__status__label-planned {
    background-color: var(--inspection-early);
    color: var(--mdc-theme-on-primary);
    border-color: var(--inspection-early);
  }
  .building-card__appointment {
    color: var(--mdc-theme-text-secondary-on-light);

    &.building-card__appointment--sent {
      color: var(--mdc-theme-primary);
    }
  }
  .preliminary .building-card__appointment {
    color: var(--not-active);
  }
  .building-card__address--sub {
    color: var(--mdc-theme-text-secondary-on-light);
  }
  .building-card__content {
    flex-grow: 1;
  }
  .mdc-card__media {
    height: 65px;
    background-color: var(--mdc-theme-surface);
    padding: 4px 16px;
  }
  .building-card__inspections-diagram {
    display: flex;

    .building-card__inspections-diagram__standard-inspections {
      flex-shrink: 1;
      flex-grow: 1;
      margin-right: 8px;
    }
    .building-card__inspections-diagram__furnace-inspection {
      flex-shrink: 0;
      flex-grow: 0;
    }
    .building-card__inspections-diagram__blocks {
      display: flex;
      padding-bottom: 4px;
      padding-right: 1%;
    }
    .building-card__timeline {
      width: 100%;
      display: flex;
      flex-direction: row;

      .building-card__timeline__line_outer {
        background-color: inherit;
        height: 6px;
        box-sizing: border-box;
        padding-right: 1px;

        &:nth-child(3n) {
          padding-right: 1%;
        }

        .building-card__timeline__line_inner {
          background-color: var(--diagram-timeline);
          height: inherit;
          border-radius: 1px;
        }
      }
    }
  }
}

.building-card__inspections-diagram__year {
  margin-top: 18px;
  margin-right: 3px;
  font-size: 16px;
  font-weight: bold;
  color: var(--mdc-theme-error);
}

.building-avatar {
  margin: 16px;

  .building-icon__apartments {
    position: absolute;
    top: 12px;
    left: 44px;
  }

  .building-icon__agreements {
    position: absolute;
    top: 36px;
    left: 44px;
  }
}
.building-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--mdc-theme-text-secondary-on-light);
  background-color: var(--background-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &.building-icon--good {
    color: var(--mdc-theme-on-primary);
    background-color: var(--mdc-theme-primary);
  }
  &.building-icon--light {
    background-color: var(--light-primary);
  }
  &.building-icon--warning {
    color: var(--mdc-theme-secondary);
  }
  &.building-icon--error {
    color: var(--mdc-theme-error);
  }
}

.building-icon__apartments {
  width: 20px;
  height: 20px;
  border: 1px solid var(--mdc-theme-text-secondary-on-light);
  border-radius: 50%;
  color: var(--mdc-theme-text-secondary-on-light);
  background-color: var(--mdc-theme-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mdc-deprecated-list-item {
  .building-icon__apartments {
    position: absolute;
    top: 8px;
    left: 36px;
  }
  .building-icon__agreements {
    position: absolute;
    top: 32px;
    left: 36px;
  }
  .activity-icon__agreements {
    position: absolute;
    bottom: -8px;
    right: -8px;
  }
}

.building-icon__agreements {
  width: 20px;
  height: 20px;
  border: 1px solid #666666;
  border-radius: 50%;
  color: #666666;
  background-color: var(--mdc-theme-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.activity-icon__agreements {
  width: 14px;
  height: 14px;
  border: 1px solid #666666;
  border-radius: 50%;
  color: #666666;
  background-color: var(--mdc-theme-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.building-card__inspections-diagram__blocks {
  height: 21px;
  /* Prevent overlaying of drawer. */
  isolation: isolate;

  .inspection-block-month {
    display: flex;
    flex-basis: calc(100% / 12);
  }
  .inspection-block {
    display: flex;
    flex-direction: column;
    align-items: center;

    & + .inspection-block-dummy:has(+ .inspection-block) {
      min-width: 4px;
    }

    .inspection-block__line-1 {
      margin-top: 8px;
      min-height: calc(1em + 8px);
      width: 100%;
      text-align: center;
      color: var(--mdc-theme-text-secondary-on-light);
    }
    .inspection-block__line-2 {
      margin-top: -8px;
      width: 100%;
      text-align: center;
      color: var(--mdc-theme-text-secondary-on-light);
    }
  }
}

.building-card__inspections-diagram__furnace-inspection .inspection-block {
  &, .inspection-block__line-1, .inspection-block__line-2 {
    text-align: right;
  }
}
.building-card {
  .building-card__info {
    padding-left: 16px;
    padding-top: 11px;
    padding-bottom: 8px;
    height: 20px;
    color: var(--mdc-theme-text-secondary-on-light);
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  &.building-card--defect .building-card__info {
    height: 80px;
  }

  .building-card__info--pad1 {
    padding-right: 24px;
  }
  .building-card__info--pad2 {
    padding-right: 34px;
  }
  .building-card__info--pad3 {
    padding-right: 44px;
  }
  .building-card__info--pad4 {
    padding-right: 54px;
  }
  .building-card__info--inspection {
    height: 80px;
  }
  .building-card__info--message-log, .building-card__info--account-statement {
    height: 60px;
  }
}
.with-top-divider.building-card__info--contact {
  height: 80px;
  margin-bottom: 16px;
}
.building-card__index {
  position: absolute;
  bottom: 8px;
  right: 16px;
  color: var(--mdc-theme-text-secondary-on-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-info__row {
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.card-info__row__icon {
  font-size: 16px;
  padding-right: 4px;
}
.card-info__row__data {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-info_row--highlighted {
  color: var(--mdc-theme-secondary);
}
.building-card__info--defect {
  height: 120px;
}
.building-card__info--invoice {
  height: 80px;
}
.building-card__info--calendar-standard {
  height: 60px;
}
.building-card__info--calendar-automatic {
  padding-top: 16px;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  height: 65px;
  color: var(--mdc-theme-text-secondary-on-light);
}
.building-card__info--daily-overview {
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 10px;
  margin: 0px 16px;
  color: var(--mdc-theme-text-secondary-on-light);
}
.building-card__info--approval {
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 10px;
  margin: 0px 16px;
  color: var(--mdc-theme-text-secondary-on-light);
}
.building-card__info--sepa-mandate-flow {
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 10px;
  margin: 0px 16px;
  height: 80px;
  color: var(--mdc-theme-text-secondary-on-light);
}
.building-card__info__line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.with-top-divider {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--divider);
  padding-top: 10px;
  margin: 0px 16px;
  color: var(--mdc-theme-text-secondary-on-light);
}

.hs-sweep-log__info {
  text-align: center;
  padding: 32px;
}
.hs-sweep-log__entry {
  height: 75px;
  padding: 8px 8px;

  .mdc-card__primary-action {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .hs-sweep-log__entry__content {
    padding: 16px;
  }
}

.hs-tab--stacked {
  height: 48px;
  padding-left: 10px;
  padding-right: 10px;
  min-width: 0;
  width: 20%;
  font-size: 0.6rem;
}

.bottom-nav-wrapper {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--background-nav);

  &.has-unread #mdc-tab-1::after {
    position: absolute;
    top: 1px;
    left: calc(50% + 12px);
    content:"\A";
    width: 10px;
    height: 10px;
    display: inline-block;
    border-width: 1px;
    border-radius: 6px;
    border-style: solid;
    background-color: var(--mdc-theme-secondary);
    border-color: var(--mdc-theme-secondary);
  }
}

.hs-search-app-bar {
  .mdc-top-app-bar__section--align-start {
    flex-grow: 0;
    padding-right: 0;
  }

  .mdc-top-app-bar__section--align-end {
    padding-left: 0;
  }
  .mdc-text-field {
    padding-left: 0px;
    background-color: inherit;

    .mdc-text-field {
      padding-left: 20px;
    }
  }
  .mdc-text-field--fullwidth {
    flex-grow: 1;
  }
  .mdc-text-field {
    .mdc-text-field__input {
      color: var(--mdc-theme-on-surface);
      caret-color: var(--mdc-theme-on-surface);
      font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
      line-height: 2rem;
      border-bottom-color: transparent;
    }
    .mdc-text-field__input::placeholder {
      color: var(--mdc-theme-text-hint-on-light);
    }
    .mdc-text-field__icon--trailing {
      color: var(--mdc-theme-on-surface);
    }
  }
}

.hs-top-app-bar--form {
  .mdc-top-app-bar {
    color: var(--mdc-theme-text-primary-on-background);
    background-color: var(--background-nav);
  }
  .mdc-top-app-bar__row {
    color: var(--mdc-theme-text-primary-on-background);
    background-color: var(--background-nav);
  }
  .mdc-icon-button {
    color: var(--mdc-theme-text-primary-on-background);
  }
}

.hs-form-page {
  position: relative;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--mdc-theme-text-primary-on-background);
  background-color: var(--background-nav);
  display: block;

  .form {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.hs-text--continuous {
  white-space: normal;
  overflow-wrap: break-word;

  .mdc-deprecated-list-item__primary-text, .mdc-deprecated-list-item__secondary-text {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

.todo-item-group__collapsible {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.hs-picture__contentarea {
  width: 100%;
  max-width: 600px;
}

.hs-picture__input-button-row, .hs-form-inline__button-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;

  & > * {
    margin-top: 16px;
  }
}

.hs-picture__camera {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .mdc-button {
    margin-top: 16px;
    margin-bottom: 16px;
    background-color: rgba(0, 150, 0, 0.5);
    color: rgba(255, 255, 255, 1.0);
  }
}

.hs-picture__output {
  width: 100%;
  display: block;
  margin-bottom: 32px;

  .mdc-text-field {
    width: 100%;
  }
}

#hs-picture__video {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#hs-picture__output__snapshot {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#hs-picture__output__name {
  width: 100%;
}

#hs-picture__canvas {
  display: none;
}

#hs-picture__input-button-row__camera-button, #hs-picture__input-button-row__abort-button {
  min-width: 176px;
}

#hs-picture__file-size-error, #hs-picture__no-media-support-warning {
  margin-top: 16px;
}

.hs-text--good {
  color: var(--mdc-theme-primary);
}

.hs-text--info {
  &, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__secondary-text, .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-primary);
  }
}

.hs-text--warning {
  &, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__secondary-text, .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-secondary);
  }
}

.mdc-button.filter-year {
  color: var(--mdc-theme-text-primary-on-background);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;

  &.hs-text--error {
    color: var(--mdc-theme-error);
  }
}

.drawer-header-button {
  margin: 0;
  padding: 0;
  border-width: 0px;
  background-color: #00000000;
  cursor: pointer;
  color: var(--mdc-theme-text-primary-on-background);
}

.hs-icon-button--small {
  font-size: small;
  margin: 0px !important;
  padding: 0px !important;
  width: 24px !important;
  height: 24px !important;
}

.hs-text--error {
  &, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__secondary-text, .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-error);
  }
}

.hs-bg--error {
  background-color: var(--mdc-theme-error);
}

.hs-item--info {
  color: var(--mdc-theme-on-primary);
  background-color: var(--mdc-theme-primary);
}
.hs-item--warning {
  color: var(--mdc-theme-on-secondary);
  background-color: var(--mdc-theme-secondary);
}
.hs-item--error {
  color: var(--mdc-theme-on-primary);
  background-color: var(--mdc-theme-error);
}
.hs-item-meta--boxed-rounded {
  border-radius: 10px;
  padding-left: 6px;
  padding-right: 6px;
}
.hs-item-meta--dot::after {
  content:"\A";
  width: 10px;
  height: 10px;
  display: inline-block;
  border-width: 1px;
  border-radius: 6px;
  border-style: solid;
}
.hs-item-meta--dot-warning::after {
  background-color: var(--mdc-theme-secondary);
  border-color: var(--mdc-theme-secondary);
}
.hs-item-meta--relative {
  position: relative;
}

.hs-input--visually-hidden {
  position: relative;
  height: 0px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.hs-input--visually-hidden:focus + label {
  outline: thin dotted;
}

.hs-search--no-results {
  text-align: center;
  padding-top: 24px;
}

.mdc-drawer {
  height: 100%;
  padding-top: env(safe-area-inset-top);

  &.mdc-drawer--dismissible {
    left: inherit;
  }

  .mdc-deprecated-list-item--activated {
    color: var(--mdc-theme-primary);

    .mdc-deprecated-list-item__graphic {
      color: var(--mdc-theme-primary);
    }
  }

  .hs-drawer__notification-toggle--subscribed {
    .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__text {
      color: var(--mdc-theme-error);
    }
  }
}

.mdc-drawer-app-content {
  height: 100%;
}
@media all and (max-width: 1023px) {
  .mdc-drawer-app-content {
    height: calc(100% - 48px - env(safe-area-inset-bottom));
  }
}

.hs-list-item-actions {
  padding-left: 72px;
  padding-bottom: 16px;
}

.hs-flex-form-field-wrapper {
  display: flex;

  .form-field {
    flex-grow: 1;
  }
}

#svg-host {
  width: 100%;
  height: auto;

  svg {
    width: 100%;
    height: auto;
  }
}

.hs-form__overflow-menu {
  display: none;
}
.hs-form__overflow-items {
  display: block;
}

@media (max-width: 850px) {
  .hs-form__overflow-menu {
    display: block;
  }
  .hs-form__overflow-items {
    display: none;
  }
}

.hs-form__bottom__info-line {
  padding-top: 19px;
}

.svg-form-element {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  display: block;
  background-color: #e5e5e5;
  border-style: hidden;

  &:focus {
    border-color: var(--mdc-theme-primary);
    border-style: solid;
    border-width: 2px;
    outline: none;
  }

  &[type="button"] {
    background-color: orange;
    border-radius: 4px;
    border-style: outset;
  }
}

.hs-forms-list__button {
  margin-left: 5px;
}

.meta-year {
  font-size: 16px;
}

.text-field-static {
  height: 56px;
  line-height: 56px;
  padding-left: 16px;
  padding-right: 16px;
}

.mdc-deprecated-list-item__meta .meta-text {
  font-size: 16px;
  white-space: nowrap;
}
.building-card__status {
  .paid-cash, .payment-matched {
    color: var(--mdc-theme-primary);
  }

  .payment-matched--manual, .payment-open, .payment-wont-match {
    color: var(--mdc-theme-text-secondary-on-light);
  }
}
.pricing-item--paid .mdc-deprecated-list-item__meta .meta-text {
  color: var(--mdc-theme-primary);
}
.pricing-item--open .mdc-deprecated-list-item__meta .meta-text {
  color: var(--mdc-theme-secondary);
}
.pricing-item--other-year .mdc-deprecated-list-item__meta .meta-text {
  color: var(--mdc-theme-secondary);
}
/* #10709: Year group header in the building accounting list */
.accounting-year-header .mdc-deprecated-list-item__text {
  color: var(--mdc-theme-primary);
  font-weight: bold;
}
.accounting-text-total {
  font-weight: bold;
  margin-left: 8px;
  margin-right: 8px;
}
.accounting-text-total--open {
  color: var(--mdc-theme-secondary);
}
.building-accounting-info .action-item .mdc-deprecated-list-item__text {
  display: inline-flex;
  flex-grow: 1;

  .accounting-text-total {
    margin-left: auto;
    margin-right: 0;
  }
}

.mdc-deprecated-list-item__meta {
  .mdc-menu-surface--anchor .mdc-icon-button,
  & > .mdc-icon-button:last-child,
  & > span:last-child > .mdc-icon-button {
    margin-right: -12px;
  }
}
.hs-toggle-icon .mdc-icon-button {
  margin-left: -12px;
  margin-right: 20px;
}

.organizer {
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);

  .mdc-deprecated-list-item__graphic {
    margin-right: 0px;
  }
  #id-Konfiguration {
    max-width: 10em;
  }

  .organizer__header {
    padding: 0px 16px;
    padding-bottom: 0px;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background-color: var(--background-nav);

    label:has(> input[type="time"]) {
      padding: 0;
    }
    .organizer__header__list-item .mdc-deprecated-list-item__primary-text::before {
      height: 0;
    }

    .mdc-dialog ul {
      margin: 10px 0;
    }

    .organizer__header__stats {
      display: flex;
      align-items: flex-start;

      .mdc-deprecated-list-item__primary-text {
        min-width: 20px;
        line-height: 24px;
      }

      *:nth-child(2n+3) {
        margin-left: 12px;
      }
      .material-icons {
        margin-right: 4px;
      }
    }

    .organizer__header__stats .material-icons, .form-field__control .mdc-icon-button {
      color: var(--mdc-theme-text-secondary-on-background);
    }

    .mdc-select-helper-text--validation-msg {
      display: none;
    }
  }

  .organizer__settings {
    display: flex;
    align-items: center;
    flex-grow: 1;

    .form-field {
      flex-grow: 1;

      div {
        width: 100%;
      }
    }
  }

  .organizer__slot {
    display: flex;
    align-items: center;

    .form-field {
      display: flex;
      align-items: center;

      input[type="time"] {
        max-width: 64px;
      }

      .mdc-text-field-helper-line {
        grid-row: 2;
        grid-column: 1 / span 3;
      }
    }
    .form-field__control {
      display: grid;
      grid-template-columns: auto auto auto;
      align-items: center;
    }
  }

  .organizer__header__list-item-wrapper {
    display: flex;
    align-items: center;

    .mdc-deprecated-list-item {
      padding: 0;
      flex-grow: 1;
    }
    .organizer__header__list-item-wrapper__button {
      color: var(--mdc-theme-text-icon-on-background);
    }
  }

  .organizer-form {
    padding-top: 16px;

    .form-field {
      padding-right: 0px;
    }
    .form-button {
      color: var(--mdc-theme-text-icon-on-background);
    }
    .mdc-deprecated-list {
      padding-top: 0px;
      padding-bottom: 0px;
    }
  }

  .organizer__list {
    overflow: auto;
    flex: 1 1 auto;
    min-width: 0;

    .mdc-card:has(.form-page), .mdc-card__primary-action:has(.form-page) {
      position: static;
    }
    .mdc-deprecated-list-item__meta {
      text-align: right;
    }
    .mdc-deprecated-list-item--disabled {
      .inspection.inspection--planned, .activity.activity--not-completed {
        background-color: var(--mdc-theme-on-primary);
        color: var(--mdc-theme-text-disabled-on-background);
        border-color: var(--mdc-theme-text-disabled-on-background);
      }
    }
  }
}

@media all and (max-width: 650px) {
  .organizer .organizer__header {
    justify-content: space-around;

    #id-Mitarbeiter {
      width: 150px;

      .mdc-select__selected-text {
        font-size: 0;

        &::after {
          content: attr(data-shorthand);
          font-size: 16px;
        }
      }
    }
    .organizer__header__list-item:first-child {
      width: 150px;
    }
    .mdc-deprecated-list-item {
      padding: 0 4px;
    }
    .organizer__header__stats .mdc-deprecated-list-item__primary-text {
      min-width: 0;
    }
  }
  .settings__appointments input[type="time"] {
    max-width: 64px;
  }
}
.organizer__header__stats__dialog {
  display: flex;
  gap: 5px;
}
.form-field__control__slot {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .form-field__control__slot__line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .form-field__control label {
      margin: 0;
    }

    .form-field {
      padding: 0;

      .mdc-form-field {
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
      }
    }
  }
}
.form .form-field .form-field__control__slot .form-field__control__slot__line .form-field__control {
  margin: 0;
}

.fs-34 {
  font-size: 34px;
}

#filter-progress {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--mdc-theme-surface);

  #filter-progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.hs-bottom-nav .mdc-tab-indicator .mdc-tab-indicator__content--underline {
  border-color: var(--background-nav);
}

.maybe-formlet.maybe-formlet--selected {
  border-top: 1px solid var(--mdc-theme-error);
  border-bottom: 1px solid var(--mdc-theme-error);
}

.mdc-radio .mdc-radio__native-control:enabled:checked + .mdc-radio__background {
  .mdc-radio__outer-circle, .mdc-radio__inner-circle {
    border-color: var(--mdc-theme-primary);
  }
}

.activity-history-list .mdc-deprecated-list-item__meta .inspection {
  background-color: var(--inspection-early);
  border-color: var(--inspection-early);
}

.validation-item--error {
  &, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__secondary-text, .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-error);
  }
}
.validation-item--warning {
  &, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__secondary-text, .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-secondary);
  }
}
.validation-item--info {
  &, .mdc-deprecated-list-item__graphic, .mdc-deprecated-list-item__secondary-text, .mdc-deprecated-list-item__meta {
    color: var(--mdc-theme-primary);
  }
}

#zoom-select .mdc-select__anchor {
  width: 162px;
}

.notice {
  padding: 16px 16px 16px 70px;
}
.notice-error {
  color: var(--mdc-theme-error);

  pre {
    font-family: sans-serif;
  }
}

.print-area__svg {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.mdc-card {
  border-radius: 0;
}
.hs-detail-button-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 72px;
  padding-right: 16px;
}
.hs-schedule-planner-button {
  height: 36px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: start;
  gap: unset;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.hs-schedule-planner-button__button {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.hs-schedule-planner-button__dropdown {
  width: 36px;
  height: 36px;
  padding: unset;
  color: var(--mdc-theme-on-primary);
  background-color: var(--mdc-theme-primary);
  border-left: 1px solid white;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.hs-schedule-planner-button__dropdown--disabled {
  color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
  background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12));
}

.no-padding--top {
  padding-top: 0px;
}
.no-padding--bottom {
  padding-bottom: 0px;
}
.no-padding--left {
  padding-left: 0px;
}
.no-padding--right {
  padding-right: 0px;
}

.hs-settings-user__image {
  width: 90%;
  max-width: 256px;
}
.image-preview {
  max-width: calc(100% - 48px);
  margin-left: 48px;
  background-color: #fff;
}
.image-preview-box {
  position: relative;
  display: inline-block;
  max-width: 100%;

  .image-preview {
    display: block;
    cursor: zoom-in;
  }
  .image-preview-box__zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
  }
}

.image-zoom {
  flex: 1 1 auto;
  min-height: 0px;
  position: relative;
  overflow: hidden;
  touch-action: none;
  background-color: var(--mdc-theme-surface);
}
.detail-content > .image-zoom {
  height: 100%;
}
.image-zoom__image {
  position: absolute;
  left: 0px;
  top: 0px;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}

.image-photo-challenge {
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 56px;
  display: block;
  max-width: 256px;
  height: auto
}

.diff-added {
  color: #388e3c;
}
.diff-removed {
  color: #d32f2f;
  text-decoration: line-through;
}
.diff-changed {
  color: orange;
}

.inspection-print__item {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  break-inside: avoid;
}
.inspection-print__item__address {
  flex: 1 1 64px;
}
.inspection-print__item__general-info {
  display: flex;
  flex-direction: row;
}
.inspection-print__item__info {
  margin-top: 16px;
}
.inspection-print__item__row {
  display: flex;
  flex-direction: row;
  margin-top: 16px;
}
.inspection-print__item__row__col1 {
  flex: 0 0 128px;
}
.inspection-print__item__row__col2 {
  flex: 1 1 128px;
}
.inspection-print__item__row__col2__unit-info__activities {
  padding-left: 8px;
}
.inspection-print__item__row__col3 {
  flex: 1 1 128px;
}

.list-item--notice,
.list-item--notice .mdc-deprecated-list-item__text,
.list-item--notice .mdc-deprecated-list-item__primary-text,
.list-item--notice .mdc-deprecated-list-item__secondary-text,
.list-item--notice .mdc-deprecated-list-item__graphic,
.list-item--notice .mdc-deprecated-list-item__meta
{
  color: var(--mdc-theme-secondary);
}
.list-item--warning,
.list-item--warning .mdc-deprecated-list-item__text,
.list-item--warning .mdc-deprecated-list-item__primary-text,
.list-item--warning .mdc-deprecated-list-item__secondary-text,
.list-item--warning .mdc-deprecated-list-item__graphic,
.list-item--warning .mdc-deprecated-list-item__meta
{
  color: var(--mdc-theme-secondary);
}
.list-item--error,
.list-item--error .mdc-deprecated-list-item__text,
.list-item--error .mdc-deprecated-list-item__primary-text,
.list-item--error .mdc-deprecated-list-item__secondary-text,
.list-item--error .mdc-deprecated-list-item__graphic,
.list-item--error .mdc-deprecated-list-item__meta
{
  color: var(--mdc-theme-error);
}

.defect-switch {
  --mdc-switch-unselected-focus-handle-color: var(--mdc-theme-error);
  --mdc-switch-unselected-pressed-handle-color: var(--mdc-theme-error);
  --mdc-switch-unselected-hover-handle-color: var(--mdc-theme-error);
  --mdc-switch-unselected-handle-color: var(--mdc-theme-error);
  --mdc-switch-unselected-focus-state-layer-color: var(--mdc-theme-error);
  --mdc-switch-unselected-pressed-state-layer-color: var(--mdc-theme-error);
  --mdc-switch-unselected-hover-state-layer-color: var(--mdc-theme-error);
}

.findable-defect-switch {
  --mdc-switch-selected-focus-handle-color: var(--mdc-theme-error);
  --mdc-switch-selected-pressed-handle-color: var(--mdc-theme-error);
  --mdc-switch-selected-hover-handle-color: var(--mdc-theme-error);
  --mdc-switch-selected-handle-color: var(--mdc-theme-error);
  --mdc-switch-selected-focus-state-layer-color: var(--mdc-theme-error);
  --mdc-switch-selected-pressed-state-layer-color: var(--mdc-theme-error);
  --mdc-switch-selected-hover-state-layer-color: var(--mdc-theme-error);
  --mdc-switch-selected-focus-track-color: var(--mdc-switch-unselected-focus-track-color, #e0e0e0);
  --mdc-switch-selected-pressed-track-color: var(--mdc-switch-unselected-pressed-track-color, #e0e0e0);
  --mdc-switch-selected-hover-track-color: var(--mdc-switch-unselected-hover-track-color, #e0e0e0);
  --mdc-switch-selected-track-color: var(--mdc-switch-unselected-track-color, #e0e0e0);
}

.milestone-repr-list-item {
  padding-left: 72px;
  padding-right: 16px;
}
.milestone-repr-list-item-placeholder {
  padding-bottom: 4px;
}
.milestone-repr-list-item-placeholder__inner {
  padding-left: 4px;
  padding-right: 4px;
  background-color: gray;
  opacity: 20%;
}
.milestone-repr {
  font-family: 'Liberation Sans', helvetica, arial, sans-serif;
  display: flex;
  flex-direction: row;
  padding-left: 8px;
}
.milestone-repr--negated {
}
.milestone-repr__left {
  font-family: 'Liberation Sans', helvetica, arial, sans-serif;
  display: flex;
  flex-direction: row;
  padding-top: 14px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: #fc3d3d;
}
.milestone-repr__center {
  font-family: 'Liberation Sans', helvetica, arial, sans-serif;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-left: 8px;
}
.milestone-repr__center__header {
  padding-right: 4px;
  display: flex;
}
.milestone-repr__center__header__description {
  line-height: 48px;
  margin-right: auto;
}
.milestone-repr__center__header__action-icon {
}
.milestone-repr__children {
  min-height: 48px;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & > .milestone-repr {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px gray solid;
    border-radius: 8px;

    &:first-child {
      margin-top: 4px;
      margin-bottom: 8px;
    }
    &:last-child {
      margin-top: 8px;
      margin-bottom: 4px;
    }
  }
}
.milestone-repr__actions {
  display: flex;
  align-items: center;
  background-color: rgb(230, 230, 230);
}
.milestone-repr__select {
  width: 110px;
}
.milestone-repr__block {
  line-height: 18px;
  padding-left: 4px;
  padding-bottom: 4px;
  padding-top: 4px;
}

div.ellipsed-line {
  display: flex;
}
span.ellipsed-line {
  display: inline-flex;
  width: 100%;
}
.ellipsed-line {
  .ellipsed-line__leading {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }

  .ellipsed-line__focus {
    flex-shrink: 0;
  }
  .ellipsed-line__trailing {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 1em;
    flex-shrink: 100000;
  }
}

#signature-control {
  position: relative;
}
.signature-baseline {
  width: 85%;
  height: 1px;
  background-color: var(--mdc-theme-text-hint-on-background);
  position: absolute;
  top: 66%;
  left: 5%;
}
.signature-canvas {
  width: 95%;
  border: 1px solid var(--mdc-theme-on-surface);
  background-color: #fff;
}
.signature-button-row {
  margin-left: 16px;
  margin-right: 16px;
  flex-direction: row;
  display: flex;
}
.signature-preview .image-preview {
  margin-left: 72px;
  border: 1px solid var(--mdc-theme-on-surface);
  max-width: 256px;
}

.hs-card-action--icon {
  min-width: auto;
  padding: 13px;
  margin: -6px 0;
}

.health-center__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .material-icons {
    font-size: 96px;
  }
}
.health-center__header--health-good {
  color: green;
}
.health-center__header--health-ok {
  color: orange;
}
.health-center__header--health-bad {
  color: var(--mdc-theme-error);
}
.health-center__flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.health-center__flex-max-item {
  flex: 1 1 auto;
}
.health-center__problem-table .mdc-data-table {
  width: 100%;
}
.repair-job-list {
  display: contents;
}
.repair-job-list__status-icon {
  margin-right: 16px;
}
.repair-item-wrapper,
.history-item-wrapper,
.notes-item-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;

  .mdc-deprecated-list-item {
    flex: 1 1 auto;
  }
}
.notes-item-wrapper__index,
.history-item-wrapper__index,
.repair-item-wrapper__index {
  min-width: 20px;
  text-align: end;
}
.repair-icon-button {
  color: var(--mdc-theme-text-hint-on-background);
}
.job-status--completed {
  color: rgb(0, 180, 0);
}
.job-status--failed {
  color: rgb(180, 0, 0);
}
.repair-status--done {
  color: rgb(0, 180, 0);
}
.repair-status--failed {
  color: rgb(180, 0, 0);
}

.chip-list {
  display: flex;
  margin-top: 2px;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
}
.chip-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
}
.chip {
  height: 20px;
  color: var(--mdc-theme-on-primary);
  background-color: var(--mdc-theme-primary);
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 2px;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  cursor: pointer;

  &.chip--gas-unchanged {
    height: 18px;
    color: var(--mdc-theme-on-surface);
    background-color: var(--mdc-theme-surface);
    border-color: black;
    border-style: solid;
    border-width: 1px;
  }
  &.chip--gas-new {
    height: 18px;
    color: var(--mdc-theme-primary);
    background-color: var(--mdc-theme-on-primary);
    border-color: var(--mdc-theme-primary);
    border-style: solid;
    border-width: 1px;
  }
  &.chip--gas-changed {
    height: 18px;
    color: var(--mdc-theme-on-surface);
    background-color: var(--mdc-theme-surface);
    border-color: var(--mdc-theme-primary);
    border-style: solid;
    border-width: 1px;
  }
  &.chip--gas-deleted {
    height: 18px;
    color: var(--mdc-theme-text-secondary-on-background);
    background-color: var(--mdc-theme-surface);
    border-color: var(--mdc-theme-text-secondary-on-background);
    border-style: solid;
    border-width: 1px;
  }
  &.chip--warning {
    height: 18px;
    color: var(--mdc-theme-secondary);
    background-color: var(--mdc-theme-surface);
    border-color: var(--mdc-theme-secondary);
    border-style: solid;
    border-width: 1px;
  }
  &.chip--error {
    height: 18px;
    color: var(--mdc-theme-error);
    background-color: var(--mdc-theme-surface);
    border-color: var(--mdc-theme-error);
    border-style: solid;
    border-width: 1px;
  }
  &.chip--left {
    border-radius: 6px 0 0 6px;
    margin-right: 1px;
  }
  &.chip--right {
    border-radius: 0 6px 6px 0;
  }
  &.chip--center {
    border-radius: 0 0 0 0;
    margin-right: 1px;
  }
  &.chip--icon {
    display: flex ;
    flex-flow: column;
    justify-content: center;
    padding-left: 2px;
    padding-right: 2px;

    .material-icons {
      font-size: 14px;
    }
  }
}

.text-block--nested-2 {
  padding-left: 32px;
}
.text-block--nested-3 {
  padding-left: 64px;
}
.text-block--nested-4 {
  padding-left: 96px;
}
.text-block--nested-5 {
  padding-left: 128px;
}

.tr-svg {
  margin-left: 88px;
  max-width: 280px;
}

.dc-svg {
  margin-top: 20px;
  margin-left: 75px;
  max-width: 280px;
}

.dc-details {
  display: flex;

  div.dc-details-left {
    width: 180px;
  }
}

.wizard-progress__text {
  text-align: center;
}

.mdc-dialog__surface:has(.mdc-select) {
  overflow: visible;
}

.mdc-dialog__content:has(.mdc-select) {
  overflow: visible;
}

.dashboard {
  .mdc-deprecated-list {
    padding: 0;
  }

  .dashboard-urgent {
    .mdc-card-wrapper__text-section {
      color: var(--mdc-theme-on-error);
    }
    .dashboard-number {
      color: var(--mdc-theme-on-error);
    }
  }

  .mdc-card .dashboard-urgent {
    background-color: var(--mdc-theme-error);
  }
}

.dashboard-card {
  padding: 16px;

  .mdc-card-wrapper__text-section {
    color: var(--mdc-theme-text-primary-on-background);
  }

  .dashboard-number {
    color: var(--mdc-theme-text-primary-on-background);
  }
}

.mdc-dialog__content .form .form-field .form-field__control:first-child {
  margin-left: 0px;
}

.form-field:has(.action-header) {
  padding-bottom: 0px;
}

/* While a menu is open, everything behind it stops responding to the pointer, so no
 * list item shows a hover state or a pointer cursor it cannot act on. The click still
 * reaches the body, which is what dismisses the menu.
 * */
body:has(.mdc-menu-surface--open) {
  * {
    pointer-events: none;
  }

  .mdc-menu-surface--open {
    &, * {
      pointer-events: auto;
    }
  }
}
.mdc-menu {
  &.mdc-menu-surface .mdc-deprecated-list-item:not(:hover, .mdc-ripple-upgraded--background-focused, .mdc-deprecated-list-item--selected) > .mdc-deprecated-list-item__ripple {
    &::before, &::after {
      opacity: 0;
    }
  }

  .mdc-deprecated-list-item {
    height: 48px;
  }
  .mdc-deprecated-list-item__text {
    align-self: center;
  }
}

.hs-statistic-table {
  margin-left: 72px;
}
.hs-statistic-table__data-cell .mdc-deprecated-list-item {
  padding: 0;
}
.hs-statistic__item {
  .mdc-deprecated-list-item__text {
    width: 100%;
  }
  .mdc-deprecated-list-item__secondary-text {
    width: 100%;
    margin-top: -35px;
  }
}
.hs-statistic__item__row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/* A row label or column header made of text and activity symbol blocks side by side. */
.hs-statistic__label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* The blocks belong together more closely than to the name they qualify. */
.hs-statistic__symbols {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;

  /* Without this the blocks make the label taller than the lines above and below it. */
  .inspection {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.hs-statistic__item__row__right {
  text-align: right;
}
.vert-buffer--52 {
  display: block;
  width: 100%;
  height: 52px;
}

li.mdc-deprecated-list-divider + li.mdc-deprecated-list-divider {
  display: none;
}

.filter__subform {
  height: 0;
  overflow-y: scroll;
  transition: height 0.2s ease-in;
}

.right-align {
  text-align: right;
}

.gas-wizard-list-item-wrapper {
  display: flex;
  align-items: center;

  .mdc-deprecated-list-item {
    flex-grow: 1;
  }
  .mdc-deprecated-list-item__meta {
    display: inline-flex;
  }

  .gas-wizard-list-item-wrapper__button--start {
    margin-right: 4px;

    .mdc-icon-button {
      padding-left: 16px;
      width: unset;
    }
  }
}
.gas-wizard-list-item-wrapper--right {
  .mdc-deprecated-list-item {
    padding-right: 0;
  }
  .mdc-deprecated-list-item__meta .mdc-deprecated-list-item__graphic {
    margin-right: 8px;
  }
}

.building-info--warning {
  .mdc-deprecated-list-item__secondary-text {
    color: var(--mdc-theme-secondary);
  }
  .building-icon {
    background-color: var(--mdc-theme-secondary);
  }
}

#json-editor {
  height: 100%;
}

.jodit-container:not(.jodit_inline) .jodit-workplace {
  max-width: 180mm; /* 210 mm A4 width, minus 2 * 15 mm margin */
}

.contact-selection {
  flex: 0 0 auto;
  max-height: 50%;
  overflow-y: auto;
}

#editor-container #info-panel {
  background-color: var(--mdc-theme-background);
}

/* Custom-made non-mdc helper texts */
/* Helpertext general style */
.helper-text {
  color: var(--mdc-theme-text-secondary-on-background);
  font-family: var(--mdc-typography-font-family);
  font-size: 12px;
  align-items: center;
  display: flex;
  padding-left: 16px;
  padding-right: 16px;

  &.helper-text--conditional {
    color: var(--mdc-theme-secondary);
  }
  &.helper-text--validation {
    color: var(--mdc-theme-error);
  }
  .helper-text-icon {
    width: 24px;
    margin-right: 32px;
  }
}
/* Helper text geometry on detail pages */
.detail-page .helper-text {
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Helper text geometry in formlets */
.form-page .form .helper-text {
  margin-top: 0px;
  margin-bottom: 8px;
}
/* Used to display a dot ('.') at the bottom of the div like you would do it in a text indicate an ordinal, e.g. "Version 2.79.0" */
.ordinal-box {
  height: 56px;
  display: flex;
  align-items: flex-end;
  line-height: 1;
}

/* vim: set sw=2 et: */