:root {
  --palette1: #aa3300;
  --palette2: #993300;
  --palette3: #773300;
  --palette4: #553300;
  --palette5: #333300;
  --unknown: #dbdada;
  --normal: #15b36f;
  --special: #ae75f8;
  --inspection: #ffcd56;
  --outOfOrder: #f45252;
  --highlight-color: #ffa33d;
  --highlight-color-dark: #ff8037;
  --font-color: rgba(0, 0, 0, 0.9);
  --font-family: "Plus Jakarta Sans", sans-serif;
  --dark-font-color: color-mix(in srgb, var(--font-color), black 50%);
  --light-font-color: #c4c4c4;
  --highlight-font-color: rgba(255, 255, 255, 0.9);
  --base-background: #ffffff;
  --background-color: #f8f9fa;
  --light-grey: color-mix(in srgb, var(--background-color), black 10%);
  --logo-padding: 1em 0em 1em 1em;
  --line-color: #cecdcd;
}

.theme-klst {
  --palette1: #0000aa;
  --palette2: #000099;
  --palette3: #000077;
  --palette4: #000055;
  --palette5: #000033;
  --highlight-color: #428fec;
  --highlight-color-dark: #428fec;
}

div::-webkit-scrollbar-track {
  opacity: 0;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 8px;
}

div::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background-color: #F5F5F5;
  opacity: 0;
}

div::-webkit-scrollbar-thumb {
  background-color: #BBBBBB;
  border: 2px solid #BBBBBB;
  border-radius: 8px;
}

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
}
button.button {
  background-color: var(--highlight-color-dark);
  border: 2px solid var(--highlight-color-dark);
  outline: none;
  min-height: 2.666em;
  height: 2.666em;
  border-radius: 1.333em;
  min-width: 6.666em;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  margin-top: 1em;
  text-align: center;
}
button.button:hover {
  background-color: var(--highlight-color);
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.1019607843);
}

.circle-button {
  width: 27px;
  height: 27px;
  border-radius: 27px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight-color);
  color: var(--highlight-font-color);
}
.circle-button.cancel {
  background: var(--base-background);
  color: var(--highlight-color);
  border: solid 2px var(--highlight-color);
}
.circle-button.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.assignment-selector {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.assignment-selector .company-selector,
.assignment-selector .role-selector {
  min-width: 376px;
}
.assignment-selector .banner {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 19px;
}
.assignment-selector .banner .viewer-name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 46px;
  font-weight: 600;
}
.assignment-selector .banner .viewer-name img {
  height: 52px;
}
.assignment-selector .banner {
  margin-bottom: 72px;
}
.assignment-selector .dropdown-select {
  margin-bottom: 20px;
}
.assignment-selector .role-selector {
  height: 0;
  opacity: 0;
  transition: opacity 0.25s, height 0.25s;
}
.assignment-selector .role-selector.show {
  height: 32px;
  opacity: 1;
}

.badge {
  background-color: var(--font-color);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  min-width: 2rem;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.badge:empty {
  display: none;
}

.broker-connectivity {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.broker-connectivity > span:nth-child(1) {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}
.broker-connectivity > .connecting {
  margin-top: 1rem;
}

.controller-connectivity svg {
  color: #dbdada;
}
.controller-connectivity.connected svg {
  color: var(--font-color);
}

.company-editor .name {
  font-weight: bold;
  grid-row: 2;
  align-self: flex-end;
}

.confirm-cancel-buttons {
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap: 7px;
}

.crud-model-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.crud-model-list .header-block {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-bottom: 2px solid #dbdada;
}
.crud-model-list .header-block .circle-button {
  grid-column: 1;
  grid-row: 1;
}
.crud-model-list .header-block .badge {
  min-height: 28px;
  font-size: 1rem;
  align-items: center;
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  padding-left: 14px;
  padding-right: 14px;
  background-color: #aaaaaa;
}
.crud-model-list .header-block .header {
  font-weight: bold;
  font-size: 20px;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.crud-model-list .list .no-entries {
  padding: 20px;
  text-align: center;
}

.data-connectivity {
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  background-color: #dbdada;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.data-connectivity svg {
  color: white;
}
.data-connectivity.online {
  background-image: linear-gradient(var(--highlight-color), var(--highlight-color-dark));
}
.data-connectivity .tooltip .text {
  left: 1em;
}

.device-entry {
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8em;
}
.device-entry .meta {
  display: flex;
  flex-direction: column;
  padding: 1em 0.5em;
  flex-grow: 1;
  overflow: hidden;
}
.device-entry .connectivity {
  display: flex;
  flex-direction: row;
}
.device-entry {
  min-height: 74px;
  border-bottom: 2px solid #dbdada;
  background: white;
  text-decoration: none;
  color: var(--font-color);
}
.device-entry:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}
.device-entry.active {
  background-color: #222222;
  color: var(--highlight-font-color);
}
.device-entry.active span.badge {
  background-color: white;
  color: var(--font-color);
}
.device-entry.active .controller-connectivity svg {
  color: white;
}
.device-entry .serial,
.device-entry .customer {
  font-weight: bold;
}
.device-entry .badge.no-entries {
  display: none;
}

.device-filter {
  height: 74px;
  border-bottom: 2px solid #dbdada;
  position: relative;
  background-color: var(--base-background);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 0 1em;
}
.device-filter .online-offline,
.device-filter .controller-connected {
  display: flex;
  cursor: pointer;
}
.device-filter .online,
.device-filter .offline,
.device-filter .connected,
.device-filter .disconnected {
  height: 32px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #dbdada;
  padding: 0 1em;
  cursor: pointer;
}
.device-filter .online.active,
.device-filter .offline.active,
.device-filter .connected.active,
.device-filter .disconnected.active {
  color: white;
  background-color: #222222;
}
.device-filter .online {
  color: var(--highlight-color);
}
.device-filter .online.active {
  color: var(--highlight-color);
}
.device-filter .online,
.device-filter .connected {
  border-radius: 2em 0em 0em 2em;
  border-right-width: 1px;
}
.device-filter .offline,
.device-filter .disconnected {
  border-radius: 0em 2em 2em 0em;
  border-left-width: 1px;
  color: var(--light-font-color);
}
.device-filter .filter-reset {
  margin-left: auto;
  color: var(--light-font-color);
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-filter .filter-reset.active {
  cursor: pointer;
}
.device-filter .filter-reset.active:hover {
  color: var(--font-color);
}

.device-list {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 66px);
  border-right: 2px solid #dbdada;
  background-color: var(--background-color);
  position: relative;
}
.device-list .scroll {
  height: calc(100% - 74px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.device-list .search-bar {
  background: white;
  width: 100%;
}
.device-list .toggle {
  position: absolute;
  width: 22px;
  height: 22px;
  right: -22px;
  background: #dbdada;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 22px;
  cursor: pointer;
}
.device-list {
  transition: flex-basis 0.2s ease;
}
.device-list.collapsed {
  flex: 0 0 15%;
}
.device-list .hideable {
  transition: opacity 0.2s ease, height 0.2s ease;
}
.device-list .hideable.hide {
  opacity: 0;
  height: 0;
  border: none;
}

.no-device {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device-info {
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.1019607843);
  background: var(--light-grey);
}
.device-info > .header {
  border-radius: 4px;
}
.device-info > .header.open {
  border-radius: 4px 4px 0px 0px;
}
.device-info > .header {
  background-color: #222222;
  border-radius: 4px;
}
.device-info > .header > .serial, .device-info > .header > .summary {
  font-weight: bold;
  display: flex;
}
.device-info > .header > .summary {
  margin-left: -0.5em;
}
.device-info > .header {
  padding: 0em 1em;
  height: 3.7rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  color: white;
}
.device-info > .header svg:nth-child(1) {
  color: var(--highlight-color);
}
.device-info > .header > span:nth-child(3) {
  margin-right: auto;
}

.device-detail {
  display: flex;
  align-items: start;
  gap: 4em;
}
.device-detail > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.device-detail > div .header {
  font-weight: bold;
  padding: 0;
  padding-bottom: 0.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.device-detail > div .header:not(first-child) {
  margin-top: 0.5em;
}
.device-detail {
  height: 0;
  transition: height 500ms, padding 500ms;
  padding: 0em 2em;
  background: var(--base-background);
  border-radius: 0px 0px 4px 4px;
}
.device-detail.open {
  height: 18em;
}
@media (min-width: 992px) {
  .device-detail.open {
    height: 12.5em;
  }
}
.device-detail.open {
  padding-top: 1.5em;
  padding-bottom: 1em;
}
.device-detail {
  overflow: hidden;
}

.dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog .modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.dialog .modal-dialog {
  z-index: 1;
  min-width: 644px;
}
.dialog .modal-dialog .content {
  background: var(--base-background);
}
.dialog .modal-dialog {
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.1019607843);
}
.dialog .modal-dialog .title-bar {
  height: 60px;
  background: var(--font-color);
  color: var(--base-background);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.dialog .modal-dialog .title-bar .title {
  flex: 1;
  text-align: center;
}
.dialog .modal-dialog .close {
  cursor: pointer;
}
.dialog .modal-dialog .content {
  padding-bottom: 40px;
  padding-right: 50px;
  padding-left: 50px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
}
.dialog .modal-dialog .buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 1.5rem;
}
.dialog .modal-dialog .buttons .button {
  margin: 0;
}
.dialog .modal-dialog .buttons .cancel {
  color: var(--font-color);
  background: var(--base-background);
  font-size: 1rem;
  box-shadow: none;
  border: 2px solid #dbdada;
}
.dialog .modal-dialog fieldset {
  border: none;
  padding-left: 20px;
  padding-right: 20px;
}
.dialog .modal-dialog fieldset input {
  border-radius: 0px;
  width: 100%;
  border: none;
  background: var(--base-background);
  outline: none;
  border-bottom: 2px solid #dbdada;
  padding: 6px 8px;
  font-weight: bold;
}

.dropdown-menu {
  display: flex;
}
.dropdown-menu .label {
  font-weight: bold;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0em 1em;
  cursor: pointer;
}
.dropdown-menu .label:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}
.dropdown-menu {
  position: relative;
}
.dropdown-menu .options {
  min-width: 100%;
  display: none;
}
.dropdown-menu .options.open {
  display: block;
}
.dropdown-menu .options {
  position: absolute;
  top: 71px;
  right: 0;
  width: 80px;
  background: var(--base-background);
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.dropdown-menu .options > button {
  display: flex;
  align-items: center;
  height: 48px;
  justify-content: flex-start;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.dropdown-menu .options > button:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}

.dropdown-select {
  display: flex;
}
.dropdown-select .label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0em 1em;
  cursor: pointer;
  border: solid 2px var(--line-color);
  height: 32px;
  border-radius: 32px;
}
.dropdown-select .label:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}
.dropdown-select {
  position: relative;
}
.dropdown-select .options {
  z-index: 100;
  min-width: 100%;
  display: none;
}
.dropdown-select .options.open {
  display: block;
}
.dropdown-select .options {
  position: absolute;
  top: 37px;
  right: 0;
  width: 80px;
  background: var(--base-background);
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.dropdown-select .options > div {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 48px;
  justify-content: flex-start;
  padding: 10px;
}
.dropdown-select .options > div:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}

.editable-list .no-item {
  min-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editable-list .add {
  background: var(--highlight-color);
  color: var(--highlight-font-color);
}

.filter-company-selector {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.filter-company-selector.dropdown-menu {
  flex: 1;
}
.filter-company-selector {
  position: relative;
}
.filter-company-selector .selected-company.active {
  background-color: #222222;
  font-weight: bold;
  color: white;
}
.filter-company-selector .selected-company {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-company-selector .selected-company .company {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  min-height: 32px;
}
.filter-company-selector .selected-company {
  height: 32px;
  flex: 1;
  border: 2px solid #dbdada;
  border-radius: 2em;
  padding: 0 1em;
  gap: 0.5em;
  overflow: hidden;
}
.filter-company-selector .companies.options {
  top: calc(100% + 6px);
  min-width: 200px;
  text-align: left;
  transform: scale(0);
}
.filter-company-selector .companies.options.open {
  transform: scale(1);
}
.filter-company-selector .companies.options {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}
.filter-company-selector .companies.options .company {
  justify-content: flex-start;
  padding: 0 1em;
}

.header-block {
  min-height: 148px;
  height: 148px;
  padding: 20px;
  padding-bottom: 0px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
}
.header-block .heading {
  font-weight: bold;
  font-size: 20px;
}

.history-list {
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.1019607843);
  border-radius: 4px;
  padding: 1em;
  padding-top: 0em;
}
.history-list .chart {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 2em;
}
.history-list .header .unknown {
  color: var(--unknown);
}
.history-list .header .normal {
  color: var(--normal);
}
.history-list .header .special {
  color: var(--special);
}
.history-list .header .inspection {
  color: var(--inspection);
}
.history-list .header .outOfOrder {
  color: var(--outOfOrder);
}
.history-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.history-list .header {
  height: 3.7rem;
  font-weight: bold;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
.history-list .header .label {
  margin-right: auto;
}
.history-list .header .clickable {
  cursor: pointer;
}
.history-list .header .switch {
  display: flex;
  gap: 0.5em;
}
.history-list .header svg.active {
  color: var(--highlight-color);
}
.history-list {
  background: white;
}
.history-list .entries {
  flex-grow: 1;
  background: var(--background-color);
  padding: 1em;
  border-radius: 4px;
  overflow: auto;
}
.history-list .entries > .scroll {
  white-space: nowrap;
  min-width: 100%;
  width: fit-content;
  display: grid;
  column-gap: 2em;
}
.history-list .entries > .scroll:has(> .status-entry) {
  grid-template-columns: auto auto auto auto;
}
.history-list .entries > .scroll:has(> .operational-entry) {
  grid-template-columns: auto auto auto;
}
.history-list .entries > .scroll:has(> .safety-chain-entry) {
  grid-template-columns: auto auto;
}
.history-list .entries > .scroll:has(> .error-entry) {
  grid-template-columns: auto auto auto auto auto auto;
}
.history-list .entries > .scroll > div.header {
  align-items: center;
  margin: -0.5em -0.5em 0.5em;
  line-height: 2;
}
.history-list .entries > .scroll > div.header > span {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.history-list .entries > .scroll > div {
  line-height: 1.5;
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}
.history-list .entries > .scroll > div > span {
  flex: 1;
}
.history-list .entries > .scroll > div:nth-child(odd) {
  background: white;
}

.init-account {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.init-account input {
  width: min(90vw, 280px) !important;
}
.init-account .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 43px;
  gap: 18px;
}
.init-account .logo img {
  height: 52px;
}
.init-account .logo {
  margin-bottom: 48px;
}
.init-account .welcome {
  height: 92px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.init-account .welcome b {
  color: var(--highlight-color);
}
.init-account section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.init-account label {
  align-self: flex-start;
  display: flex;
  gap: 16px;
  font-weight: bold;
}

.labeled-value {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .labeled-value {
    flex-direction: row;
  }
}
.labeled-value > .value {
  text-align: right;
}
@media (min-width: 992px) {
  .labeled-value > .value {
    text-align: left;
  }
}
.labeled-value {
  justify-content: space-between;
  line-height: 1.5;
}
.labeled-value > .label {
  white-space: nowrap;
}

.list-heading {
  height: 111px;
  border-bottom: 2px solid #dbdada;
  padding-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  font-weight: bold;
}
.list-heading .text {
  flex: 1;
}

.form-list {
  min-height: 74px;
  font-weight: bold;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.form-list input {
  width: 100%;
}

.loading-indicator {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loading-indicator > span:nth-child(1) {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}
.loading-indicator > .connecting {
  margin-top: 1rem;
}

.message-queue {
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 20px;
  padding: 40px;
  padding-top: 86px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
}
.message-queue .message {
  font-size: 1.2em;
  font-weight: bold;
  padding: 40px;
  border-radius: 4px;
  background-color: var(--base-background);
}

.mini-button {
  font-size: 10px;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mini-button.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.nav-bar {
  width: 100%;
  height: 66px;
  color: var(--font-color);
  background: var(--base-background);
  position: fixed;
  top: 0;
  margin: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-content: center;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.1019607843);
}
.nav-bar .spacer {
  flex-grow: 1;
}
.nav-bar .logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--logo-padding);
  gap: 10px;
}
.nav-bar .logo img {
  height: 100%;
}
.nav-bar .logo span {
  font-size: 1.6em;
  white-space: nowrap;
}
.nav-bar button {
  background: none;
  color: inherit;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  padding: 0em 1em;
}
.nav-bar button:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}
.nav-bar .back {
  width: 3em;
  align-items: center;
  justify-content: center;
  display: flex;
}
@media (min-width: 992px) {
  .nav-bar .back {
    display: none;
  }
}
.nav-bar .back:hover {
  background: var(--background-color);
  color: var(--dark-font-color);
}
.nav-bar .user-label {
  font-weight: normal;
}
.nav-bar .user-label :first-child {
  font-weight: bold;
}
.nav-bar .user-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nav-bar .user-label span {
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
}
.nav-bar .user-label span svg {
  width: 1em;
}

.password-input {
  position: relative;
}
.password-input input {
  width: 100%;
  padding-right: 40px;
}
.password-input .toggle {
  position: absolute;
  right: 10px;
  color: #dbdada;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.password-input svg {
  width: 1em;
}

.search-bar {
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #dbdada;
  gap: 1em;
  padding-left: 1em;
  padding-right: 1em;
  overflow: hidden;
  background: var(--background-color);
}
.search-bar input {
  flex: 1 1 90%;
  max-width: calc(100% - 3em);
  border: none;
  font-weight: 700;
  font-size: inherit;
  background: transparent;
  line-height: 2em;
  outline: 0px;
}
.search-bar input::placeholder {
  color: var(--light-font-color);
}
.search-bar input {
  color: var(--font-color);
}
.search-bar {
  color: var(--light-font-color);
}
.search-bar svg.fa-xmark:hover {
  color: var(--dark-font-color);
}

.change-chart {
  flex: 1;
}
.change-chart .loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip {
  position: relative;
}
.tooltip > .text {
  font-weight: normal;
  color: var(--font-color);
  position: absolute;
  right: 1em;
  top: 1.5em;
  background: white;
  width: fit-content;
  text-wrap: nowrap;
  padding: 1em 2em;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  z-index: 200;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: none;
}
.tooltip:hover > .text {
  opacity: 1;
}

.time-range-selector {
  container-name: time-range-selector/inline-size;
  background: var(--background-color);
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  gap: 10px;
  border-radius: 18px;
  border: 2px solid var(--light-grey);
  height: 36px;
  min-width: 220px;
  font-size: 12px;
}
.time-range-selector.active {
  background: var(--dark-font-color);
  color: var(--background-color);
}
.time-range-selector .since, .time-range-selector .until {
  flex: 1;
  display: flex;
  gap: 10px;
}
.time-range-selector .since span, .time-range-selector .until span {
  flex: 1;
  text-align: center;
}
.time-range-selector .since, .time-range-selector .until {
  cursor: pointer;
  position: relative;
}
.time-range-selector .since .tooltip, .time-range-selector .until .tooltip {
  position: absolute;
  bottom: 40px;
  white-space: nowrap;
  opacity: 0;
  padding: 1em 2em;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  z-index: 200;
  border-radius: 4px;
  color: var(--dark-font-color);
}
.time-range-selector .since:hover > .tooltip, .time-range-selector .until:hover > .tooltip {
  opacity: 1;
}
@container time-range-selector (max-width: 330px) {
  .time-range-selector .presets {
    display: none !important;
  }
}
.time-range-selector .hidden {
  display: none;
}
.time-range-selector .reset {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 1em;
  margin-left: -1em;
  padding-left: 1em;
  cursor: pointer;
  height: 100%;
  border-radius: 18px;
  color: var(--light-font-color);
}
.time-range-selector .presets {
  height: 100%;
  max-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex: 2;
  border-radius: 18px;
  border: none;
  border-inline: solid 2px var(--light-grey);
}
.time-range-selector .presets button {
  cursor: pointer;
  background: var(--background-color);
  color: var(--dark-font-color);
}
.time-range-selector .presets button.active {
  background: var(--dark-font-color);
  color: var(--background-color);
}
.time-range-selector .presets button {
  flex: 1;
  height: 100%;
  gap: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.time-range-selector .presets button span {
  font-weight: bold;
  font-size: 10px;
  text-align: center;
}
.time-range-selector .presets button:not(:last-child) {
  border-right: 2px solid var(--light-grey);
}
.time-range-selector .presets button:first-child {
  border-bottom-left-radius: 18px;
  border-top-left-radius: 18px;
}
.time-range-selector .presets button:last-child {
  border-bottom-right-radius: 18px;
  border-top-right-radius: 18px;
}

.list-entry {
  border-bottom: 2px solid #dbdada;
  height: 74px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.list-entry.clickable {
  cursor: pointer;
}
.list-entry .select {
  height: 16px;
  width: 16px;
  border: 2px solid #dbdada;
  border-radius: 16px;
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-entry.selected {
  background: var(--font-color);
  color: var(--base-background);
}
.list-entry.selected .select {
  background: var(--base-background);
  color: var(--font-color);
  border: none;
}
.list-entry .delete {
  background: var(--font-color);
  color: var(--base-background);
}

.list-entry.user .content {
  display: flex;
  flex-direction: column;
}
.list-entry.user .content .username {
  font-weight: bold;
}

.list-entry.company .content {
  display: flex;
  flex-direction: column;
}
.list-entry.company .content .name {
  font-weight: bold;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1em;
}
.login-form .logo {
  display: flex;
  align-items: center;
  font-size: 42px;
  gap: 14px;
  height: 52px;
}
.login-form .logo img {
  height: 100%;
}
.login-form .logo {
  margin-bottom: 52px;
}
.login-form .error {
  margin-bottom: 20px;
}
.login-form .inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 300px;
  max-width: 22rem;
}
.login-form .inputs > div, .login-form .inputs > input {
  width: 100%;
  min-width: 280px;
}
.login-form button {
  margin-top: 40px;
}
.login-form .error {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--highlight-color-dark);
}
.login-form .about {
  align-self: flex-end;
  position: absolute;
  bottom: 1em;
  right: 1em;
  left: 1em;
  display: flex;
  flex: 1;
  gap: 1em;
}
.login-form .about a {
  color: var(--light-font-color);
  text-decoration: none;
}
.login-form .about a.legal-notice {
  margin-right: auto;
}

.histogram-chart {
  flex: 1;
}
.histogram-chart .loading {
  display: flex;
  align-items: center;
  justify-content: center;
}
.histogram-chart .parameters {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.time-unit-selector {
  display: flex;
  border-radius: 18px;
  height: 36px;
  font-size: 10px;
  border: 2px solid var(--light-grey);
}
.time-unit-selector button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-unit-selector button.active {
  background: var(--dark-font-color);
  color: var(--background-color);
}
.time-unit-selector button {
  padding: 0 1em;
  font-weight: bold;
}
.time-unit-selector button:not(:last-child) {
  border-right: 2px solid var(--light-grey);
}
.time-unit-selector button:first-child {
  border-bottom-left-radius: 18px;
  border-top-left-radius: 18px;
}
.time-unit-selector button:last-child {
  border-bottom-right-radius: 18px;
  border-top-right-radius: 18px;
}

.floor-chart {
  flex: 1;
}
.floor-chart .loading {
  display: flex;
  align-items: center;
  justify-content: center;
}
.floor-chart .parameters {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.chart-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.chart-panel.change-chart {
  grid-template-rows: 1fr auto;
}
.chart-panel .parameters {
  padding-top: 1em;
}
.chart-panel .no-data {
  align-self: center;
  text-align: center;
}

.ownership-editor .combined {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ownership-editor .heading {
  font-weight: bold;
  font-size: 20px;
}
.ownership-editor .subtitle {
  color: var(--light-font-color);
  font-weight: bold;
}

.short-links {
  height: 100%;
  min-width: 78px;
  border-right: 2px solid var(--line-color);
  display: flex;
  position: sticky;
  top: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 51;
  background: var(--base-background);
}

.short-link {
  position: relative;
}
.short-link .badge {
  position: absolute;
  top: 0.3em;
  right: 0.3em;
}
.short-link.sub-menu {
  padding-left: 8px;
}
.short-link {
  font-size: 19px;
  background: var(--base-background);
  color: var(--font-color);
}
.short-link .bar {
  width: 8px;
  height: 100%;
  background: var(--font-color);
}
.short-link.active {
  background: var(--base-background);
}
.short-link.active .bar {
  color: var(--highlight-color);
  background: var(--highlight-color);
}
.short-link.active .badge {
  background: var(--highlight-color);
}
.short-link {
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  border-top: 2px solid var(--line-color);
}
.short-link:last-child {
  border-bottom: 2px solid var(--line-color);
}
.short-link {
  justify-content: flex-start;
}
.short-link .icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile .header-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.user-profile .header-block .email {
  grid-row: 2;
  grid-column: 1;
  font-size: 16px;
}
.user-profile form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}
html {
  color: rgba(0, 0, 0, 0.9);
  font-family: var(--font-family);
  font-size: 14px;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--background-color);
  margin: 0;
  padding: 0;
  flex: 1 0 100%;
}
body * {
  box-sizing: border-box;
}
body input, body button {
  font-family: inherit;
}

.show-sm {
  display: none;
}
@media (min-width: 992px) {
  .show-sm {
    display: flex;
  }
}

.main {
  max-height: 100vh;
  height: 100vh;
  max-width: 100vw;
  display: flex;
  overflow: auto;
}
@media (min-width: 992px) {
  .main {
    overflow: hidden;
  }
}
.main {
  padding-top: 66px;
}
.main .content {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  flex-direction: row;
}

.device-details {
  min-height: 880px;
}
@media (min-width: 992px) {
  .device-details {
    min-height: 0px;
  }
}
.device-details {
  padding: 1em;
  display: flex;
  gap: 1em;
  flex-direction: column;
  align-content: flex-start;
  overflow: hidden;
}
.device-details .status {
  display: flex;
  gap: 1em;
  flex-direction: column;
  flex: 1 1;
  flex-grow: 3;
}
@media (min-width: 992px) {
  .device-details .status {
    flex-direction: row;
    flex-grow: 1;
  }
}
.device-details .status > div {
  flex: 1 1;
}
.device-details .status {
  padding: 1em;
  margin: -1em;
  overflow: auto;
}
.device-details .operational {
  flex: 1 1;
}

.column-1 {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: clamp(300px, 25vw, 500px);
  display: none;
}
.column-1:last-child {
  display: flex;
  z-index: 49;
}
@media (min-width: 992px) {
  .column-1 {
    flex-grow: 0;
    display: flex;
  }
}
.column-1 {
  flex-direction: column;
  border-right: 2px solid #dbdada;
  animation: slideIn 0.2s ease forwards;
  z-index: 50;
  background: var(--background-color);
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.column-remaining {
  flex: 1 1 auto;
}

button {
  cursor: pointer;
}
button.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.chart-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
}
.chart-container canvas {
  flex: 1 1 auto;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

input {
  height: 32px;
  border-radius: 16px;
  border: 2px solid #dbdada;
  padding-left: 20px;
  padding-right: 20px;
  outline: none;
}
input::placeholder {
  color: #dbdada;
}

.change-subscribers .heading,
.change-owner .heading {
  grid-row: 2;
}