:root {
  --header-height: 48px;
}

html,
body {
  height: 100%;
}

.header {
  height: var(--header-height);
  background-color: #320000;
  color: white;
}

.main-content {
  background-color: #320000;
  color: white;
  height: calc(100% - var(--header-height));
}

.main-content > div {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.container-fluid .card .card-header {
  background-color: #320000;
  color: white;
  border-color: #f8f9fa;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.container-fluid .card .card-body {
  background-color: #160000;
  color: white;
  border-color: #f8f9fa;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.container-fluid .card .card-body *:not(.graph-color) {
  background-color: #160000;
  color: white;
}

#bootstrap-graph {
  width: 100%;
  height: 200px;
  background-color: #fff7;
}

#contextMenu {
  border-radius: 6px;
  display: none;
  position: absolute;
  z-index: 1000;
  background: white;
  padding: 4px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

#contextMenu li {
  list-style: none;
  padding: 0px 16px;
  cursor: pointer;
  color: #222;
}

#contextMenu li:hover {
  background-color: #32000077;
}

#zabbix-list-burger-menu {
  position: fixed;
  border: solid 2px #fff;
  border-radius: 5px;
  padding: 5px;
  background-color: #320000;
  width: 200px;
  min-height: 40px;
  user-select: none;
}

#zabbix-list-burger-menu span {
  cursor: pointer;
}

#modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0009;
  z-index: 9;
}

#modal-background > div {
  position: absolute;
  border: solid 1px white;
  border-radius: 10px;
  padding: 10px;
  width: 320px;
  height: 370px;
  background-color: #320000;
  user-select: none;
}

#modal-background > div > div {
  text-align: center;
}

#connection-check.disabled {
  background-color: #222;
}

#connection-check {
  padding: 2px 10px;
  white-space: nowrap;
  width: 200px;
  border: solid 1px white;
  border-radius: 5px;
  margin: 0 auto;
  cursor: pointer;
}

.burger {
  position: relative;
  font-size: 20px;
}

.burger i {
  position: absolute;
  left: -12px;
  top: -16px;
  cursor: pointer;
}

.spacer {
  font-size: 8px;
}

ul {
  margin: 0;
}

.graph-color {
  width: 0;
  --bs-table-bg-type: unset !important;
}

.graph-color.red {
  background-color: red;
}

.graph-color.blue {
  background-color: blue;
}

.graph-color.green {
  background-color: green;
}

.graph-color.orange {
  background-color: orange;
}

.graph-color.purple {
  background-color: purple;
}

.graph-color.cyan {
  background-color: cyan;
}

.graph-color.magenta {
  background-color: magenta;
}

.graph-color.yellow {
  background-color: yellow;
}

.graph-color.lime {
  background-color: lime;
}

.graph-color.teal {
  background-color: teal;
}

.graph-color.navy {
  background-color: navy;
}

.graph-color.maroon {
  background-color: maroon;
}

.graph-color.olive {
  background-color: olive;
}

.graph-color.coral {
  background-color: coral;
}

.graph-color.tomato {
  background-color: tomato;
}

.graph-color.gold {
  background-color: gold;
}

.graph-color.mediumslateblue {
  background-color: mediumslateblue;
}

.graph-color.darkcyan {
  background-color: darkcyan;
}

.graph-color.sandybrown {
  background-color: sandybrown;
}

.graph-color.steelblue {
  background-color: steelblue;
}