:root {
  --critical: #f00;
  --major: rgb(255, 127, 0);
  --minor: rgb(230, 230, 0);
  --info: white;
}

.btn.btn-sm {
  line-height: 1.8;
}

.container,
.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

.breadcrumb {
  margin-bottom: 0;
}

a.map-image {
  max-height: 16em;
  display: block;
  overflow: hidden;
}

.critical {
  color: var(--critical);
}

.major {
  color: var(--major);
}

.minor {
  color: var(--minor);
}

.table-dark a {
  color: rgb(121, 230, 255);
  text-decoration: underline;
}

.table-dark a.btn {
  color: white;
}

#alert-summary .active {
  font-weight: bold;
  background-color: #030381;
}

.select2-selection__choice {
  color: black;
}

.table-control {
  background: white;
  padding: 1em;
  margin-bottom: 1em;
  font-weight: bold;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
  opacity: 1 !important;
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
  color: #27ff20;
}

table.dataTable thead th {
  vertical-align: initial;
}

.sidebar::-webkit-scrollbar {
  background: transparent;
  /* Chrome/Safari/Webkit */
  width: 0px;
}

.sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  width: 8rem !important;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  flex: 0 0 auto;
}

.sidebar .nav-item .nav-link {
  width: 8rem !important;
  padding: 1rem 0rem 1rem 1rem;
}

.select2.select2-container {
  width: 100% !important;
}

.DTFC_Cloned * {
  background-color: #4b4d5a;
}

.DTFC_Cloned input {
  background-color: #ffffff;
}

.modal-dialog {
  width: max-content;
}

.modal-dialog img {
  max-height: 85vh;
}

.dataTables_length {
  display: inline;
  margin-right: 1em;
  margin-left: 1em;
}

.table-footer,
.table-header {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
}

.rack-title {
  display: flex;
  justify-content: space-between;
  background-color: #b5b5b5;
  color: white;
  padding: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.rack .info {
  display: flex;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
}

.rack .phone_number {
  margin-left: 1rem;
}

.rack-body .info {
  flex-direction: column;
  background-color: blue;
  color: white;
  margin-right: 0.5rem;
  grid-row: 1 / 3;
}

.rack-body .info .status-img {
  width: 50px;
  height: 70px;
}

.modem {
  background-image: url("/static/images/modem.png");
}

.prr {
  color: white;
  transform: rotate(-90deg);
  margin-top: 50px;
}

.slot-wrapper {
  background-color: #c5c5c5;
  background-image: url("/static/images/rack_bg.png");
  background-repeat: no-repeat;
  background-position-y: 10px;
  background-size: 100px;
  border: solid 1px;
}

.slot {
  width: 35px;
  display: flex;
  flex-direction: column;
  font-weight: bold;
  margin: auto;
}

.connections {
  background-color: #6a0606;
  display: flex;
  justify-content: center;
}

.no-out .connections {
  height: 0;
}

.connections ul {
  padding: 0;
  margin-left: 0.3em;
  margin-right: 0.3em;
  font-size: 0.8em;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
}

.slot-wrapper.empty {
  background-image: none;
}

.slot a {
  height: 87%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: blue;
}

.slot-wrapper .status {
  height: 10px;
  margin-top: 4px;
  margin-bottom: 12px;
  background-color: white;
}

.slot-wrapper .status.ok {
  background-color: blue;
}

.slot-wrapper .status.err {
  background-color: red;
}

.slot-wrapper .status.warn {
  background-color: orange;
}

.slot-wrapper .status.none {
  background-color: transparent;
}

.slot-wrapper .status.Info {
  background: var(--info);
}

.slot-wrapper .status.Minor {
  background: var(--minor);
}

.slot-wrapper .status.Major {
  background: var(--major);
}

.slot-wrapper .status.Critical {
  background: var(--critical);
}

.slot a div {
  transform: rotate(-90deg);
  margin-bottom: 10px;
  margin-top: 155px;
  white-space: nowrap;
}

.rack .name {
  color: white;
  text-decoration: underline;
}

.rack-body {
  overflow-x: auto;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 80px auto;
  justify-content: flex-start;
}

.baugruppen {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  justify-content: flex-start;
  width: 100%;
}

button[data-selected="false"] .fa-check-square {
  display: none;
}

button[data-selected="true"] .fa-square {
  display: none;
}

td.nr,
th.nr,
table.dataTable th.nr {
  font-family: monospace;
  text-align: right;
}

li[data-type="pattern"] {
  background-color: #e4e4e4;
}

.whz-connections {
  background: #6a0606;
  padding: 0.5em;
}

.in-connections {
  background-color: #040673;
  padding: 0.5em;
  grid-row: 2;
  grid-column: 2;
}

ul.label-column {
  list-style: none;
  color: white;
}

.label-column a {
  color: white;
  text-decoration: underline;
}

.navbar {
  margin-bottom: 1rem;
}

.extra-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: auto;
  gap: 0.3em;
}

.flex-expand {
  flex: 1 auto;
}

.extra-header .select2-container {
  max-width: 220px;
  margin-left: 5px;
}

@media only screen and (max-width: 768px) {
  body {
    font-size: 13px;
  }

  .container,
  .container-fluid {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .sidebar .nav-item .nav-link {
    padding: 1rem 0rem 1rem 0rem;
    width: 5rem !important;
  }

  .sidebar {
    width: 5rem !important;
  }

  .navbar {
    /* padding: 0.5rem 1rem; */
    padding: 0.1rem 0.4rem;
  }

  .topbar {
    /* height: 4.375rem; */
    height: 3.375rem;
  }
}

.scroll-wrapper {
  width: 100%;
  overflow-x: auto;
}

.tooltip {
  pointer-events: none;
}

.toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

.toolbar input {
  width: 220px;
}

.navbar>nav {
  flex: 0 1 auto;
  overflow-x: auto;
}

ol.breadcrumb {
  flex-wrap: nowrap;
}

.breadcrumb-item {
  white-space: nowrap;
}

.no-wrap {
  white-space: nowrap;
}

.hidden-column {
  text-decoration: line-through !important;
}



.conditions {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  grid-gap: 1px;
  align-items: center;
  align-items: center;
  justify-items: center;
}

.conditions label {
  font-weight: bold;
}




.trigger-edit {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: left;
  gap: 3px;
  justify-items: center;
  align-items: center;
  justify-items: right;
}


.select2-results__option {
  padding: 0px 4px !important;
}

table.table,
table.table th,
table.table tr,
table.table td {
  border-right-width: 1px;
  border-right-style: solid;
}

td.number {
  text-align: right;
}


.bt-search-wrapper {
  position: relative;
  display: flex;
}

.bt-entry> :nth-child(1) {
  flex: 0 0 14em;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slot-label {
  white-space: nowrap;
}

.bt-entry> :nth-child(2) {
  flex: 0 0 8em;
}

.bt-result {
  display: grid;
  grid-template-columns: 250px 250px auto;
  grid-template-areas: "typ serial notiz"
    "hw sw notiz"
    "date date notiz";
  gap: 3px;
}

@media screen and (max-width: 720px) {
  .bt-result {
    grid-template-columns: auto auto;
    grid-template-areas: "typ typ"
      "serial serial"
      "sw hw"
      "notiz notiz"
      "date date";
    gap: 3px;
  }

}

.bt-result .serial {
  font-weight: bold;
  grid-area: serial;
}

.bt-result .typ {
  grid-area: typ;
  font-weight: bolder;
}

.bt-result .sw {
  grid-area: sw;
}

.bt-result .hw {
  grid-area: hw;
}


.bt-result .datum {
  grid-area: date;
  font-size: small;
}

.bt-result .anlage {
  grid-area: anlage;
}

.bt-result .notiz {
  grid-area: notiz;
  font-size: small;
}


.searchResults {
  background: white;
  position: absolute;
  z-index: 10;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  left: 0;
  width: 420px;
  display: none;
}

.searchResults:active,
.searchResults:focus,
.searchResults:focus-within {
  display: block;
}



*:focus-within {
  overflow: solid red 1px !important;
}


*:focus-visible {
  overflow: solid green 3px !important;
}

.serial-input:focus~.searchResults {
  display: block;
}

.searchResults .bt-result {
  border: solid black 1px;
  color: black;
  border-radius: 1px;
  padding: 3px 5px;
  cursor: pointer;
}

.bt-entry {
  display: flex;
  gap: 3px;

  background-color: #c5c5c5;

  border: solid black 1px;
  color: black;
  border-radius: 1px;
  padding: 3px 5px;
}

.bt-update-form {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 8em;
}

.current-selection {
  flex: 1 1;
  padding-left: 1em;
}

.rack-view {
  display: flex;
  gap: 0.3em;
  flex-direction: column;
}

.bt-entry .nfc-label,
.bt-entry .prr-label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  padding: 1em 1em;
  color: gray;
}

.tooltip-inner table {
  text-align: left;
}

table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked {
  background-color: #3a3b45 !important;
}

table.dataTable tbody tr>.dtfc-fixed-left,
table.dataTable tbody tr>.dtfc-fixed-right {
  background-color: #4b4d5a;
}

table.dataTable thead tr>.dtfc-fixed-left,
table.dataTable thead tr>.dtfc-fixed-right,
table.dataTable tfoot tr>.dtfc-fixed-left,
table.dataTable tfoot tr>.dtfc-fixed-right {
  background-color: #4b4d5a;


}

table.dataTable.table-striped>tbody>tr:hover {
  background: #0f0f13;
}