html, body {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  inset: 0;
  margin: 0;
  padding: 0;
}
body {
  background-color: #677;
  font-family: "Overpass";
  overflow: clip;
}
label {
  text-indent: 0.4rem;
  margin: 0.1rem;
}
span {
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
details summary {
  padding-left: 0.2rem;
  cursor: pointer;
}
textarea {
  resize: none;
}
img {
  object-fit: contain;
  max-width: 100%;
}
imput {
  padding: 0.2rem;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0.1rem;
}
button {
  appearance: none;
  display: inline-block;
  border: 1px solid #888;
  border-radius: 0.2rem;
  padding: 0.1rem 0.2rem;
  background-color: #eee;
  color: black;
  cursor: pointer;
}
button:hover {
  background-color: #ccc;
}
button:active {
  background-color: #bbb;
}
button:disabled {
  background-color: #ccc;
  color: #888;
}
button.go_link {
  font-size: smaller;
  padding: 0 0.2rem;
}
table {
  border-collapse: collapse;
  padding: 0;
  margin: 0.1rem;
}
tr {
  padding: 0;
  margin: 0;
}
tr:nth-child(odd) {
  background-color: rgb(0 0 0 / 10%);
}
th, td {
  padding: 0.1rem;
  margin: 0;
}
.packed {
  table-layout: fixed;
}
.packed tr:nth-child(odd) {
  background-color: unset;
}
.packed th {
  padding: 0;
}
.packed td {
  padding: 0;
}
.scroll_table {
  height: 8rem;
  overflow-y: auto;
}
.scroll_table thead th {
  position: sticky;
  top: 0;
  padding-left: 0.2rem;
  background-color: white;
}
.scroll_table tr {
  width: 100%;
}
.hashtag {
  font-style: italic;
  color: #448;
  background-color: #dda;
}
.hashtag:invalid {
  text-decoration: line-through;
  background-color: #daa;
}

/* Generic CSS classes */
.no-display {
  display: none;
}
.hidden {
  visibility: hidden;
}
.wait {
  cursor: wait !important;
}
.wait * {
  cursor: wait !important;
  filter: opacity(50%);
}
.fault {
  background-color: rgba(128, 32, 0, 0.25);
}
.invalid {
  border-color: red;
}

/* Checkbox toggle buttons:
 *
 * <input id='the_id' type='checkbox' class='toggle'>
 * <label for='the_id'>...</label>
 */
.toggle {
  display: none;
}
.toggle + label {
  background-color: #eee;
  font-size: 80%;
  border: 1px solid #888;
  border-radius: 0.2rem;
  padding: 0.3rem;
  text-indent: unset;
  color: black;
  cursor: pointer;
}
.toggle + label:hover {
  background-color: #ccc;
}
.toggle:active + label {
  background-color: #bbb;
}
.toggle:checked + label {
  background-color: #6ce;
}
.toggle:checked + label:hover {
  background-color: #5bd;
}

#map-pane {
  display: none;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#layer-menu {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  background-color: #566;
  color: white;
  border-top: 1px solid white;
  border-right: 1px solid white;
  user-select: none;
}
#zoom-level {
  padding: 0.3rem;
}
#layer-menu input {
  background: white;
  color: black;
}
#layer-menu a {
  color: white;
}
#layer-menu a:visited {
  color: #bbf;
}
#layer-zoom {
  display: none;
}
#layer-zoom:has(+ #toggle-zoom:checked) {
  display: grid;
  grid-template-columns: repeat(2, max-content);
}
#toggle-zoom + label {
  border-left: none;
  border-bottom: none;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-radius: 0;
  background-color: #566;
  color: white;
}
#toggle-zoom:hover + label {
  background-color: #677;
}
#toggle-zoom:active + label {
  background-color: #788;
}

#side-pane {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  max-width: 40%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
}
#divider {
  display: none;
  max-width: min-content;
  flex: 0 0;
  margin: 0;
  padding: 0;
  background-color: #566;
}
#divider * {
  margin: 0;
  margin-top: 0.5rem;
  padding: 0;
}
#sidebar {
  flex: 1 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  justify-content: start;
  padding: 0.2rem;
  padding-bottom: 0;
  background-color: #677;
  background-image: url(iris.svg);
  background-repeat: no-repeat;
  background-position: center;
}
#sidebar.hidden {
  max-width: 0;
  padding: 0;
}

.sb_row {
  flex: 0 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/* Align widgets at top on sidebar */
.sb_row > * {
  margin-left: auto;
}
.sb_row_left {
  flex: 0 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
label:has(+ #sb_resource) {
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0;
}
#sb_resource {
  margin-left: 0.1rem;
}
.sb_label {
  text-indent: unset;
  color: black;
  background-color: #888;
  align-content: center;
  margin: 0.1rem;
  padding: 0.2rem;
  border-radius: 0.5rem;
}
#sb_search {
  margin-left: 0;
}

#sb_list {
  flex: 1 0;
  margin-top: 0.1rem;
  overflow-y: auto;
}

@media screen and (min-width: 36rem) {
  #map-pane {
    display: block;
  }
  #layer-menu {
    display: block;
  }
  #divider {
    display: block;
  }
}

/* Delete button sliding "confirmation" animation */
#ob_delete {
  position: relative; /* add position context for ::before pseudo-element */
  z-index: 1;
  overflow: hidden;
}
#ob_delete:active {
  background: none; /* clear background to make slider visible */
}
#ob_delete::before {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: -100%;
  top: 0;
  content: "";
  background-color: #5bd;
}
#ob_delete:active::before {
  transition: left 1s;
  left: 0;
}

#sb_toast {
  visibility: hidden;
  position: absolute;
  z-index: 1;

  left: 2rem;
  bottom: 2rem;
  min-width: 10rem;
  margin: 5%;
  border-radius: 0.2rem;
  padding: 0.5rem;
  text-align: center;
  background-color: #400;
  color: white;
}
#sb_toast.show {
  visibility: visible;
  animation: fade_in 0.5s, fade_out 0.5s 2.5s;
}
@keyframes fade_in {
  from { bottom: 0; opacity: 0; }
  to { bottom: 2rem; opacity: 1; }
}
@keyframes fade_out {
  from { bottom: 2rem; opacity: 1; }
  to { bottom: 0; opacity: 0; }
}

#sb_auth_panel {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  background-color: rgba(238, 238, 238, 0.85);
}
#sb_auth_panel.show {
  visibility: visible;
  left: 0;
  transition: left 100ms ease-in-out;
}

.loading_bar {
  position: absolute;
  height: 3px;
}
.loading_bar.active {
  background-color: #6ce;
  animation: loading_bar_animation 1.5s infinite;
  animation-timing-function: ease-out;
}
@keyframes loading_bar_animation {
  0% {
    width: 0%;
    left: 0%;
  }
  60% {
    width: 70%;
    left: 20%;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip * {
  position: absolute;
  z-index: 4;
  visibility: hidden;
  inline-size: min-content;
  top: 50%;
  left: 0;
  padding: 0.5rem;
  border-radius: 0.2rem;
  color: white;
  background-color: black;
}
.tooltip:hover * {
  visibility: visible;
}

/* item state classes for tooltip backgrounds */
.item_available {
  background-color: #004;
}
.item_dark {
  background-color: #002;
}
.item_operator {
  background-color: #440;
}
.item_deployed {
  background-color: #530;
}
.item_planned {
  background-color: #044;
}
.item_external {
  background-color: #040;
}
.item_incident {
  background-color: #600;
}
.item_dedicated {
  background-color: #404;
}
.item_fault {
  background-color: #420;
}
.item_offline {
  background-color: #444;
}
.item_inactive {
  background-color: #400;
}
.item_unknown {
  background-color: #400;
}

.cards {
  display: flex;
  height: max-content;
  overflow-y: scroll;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
.card-compact {
  display: flex;
  flex: 1 0 8rem;
  flex-direction: column;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 0.1rem;
  padding-bottom: 0;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  margin: 0.1rem;
  background-color: #eee;
  border-radius: 0.1rem;
  box-shadow: 0.2rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
}
.card-compact:hover {
  box-shadow: 0.2rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.5);
  background-color: #ccc;
}
.card-expanded {
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
  background-color: #eee;
  overflow: hidden;
  padding: 0.1rem 0.2rem;
  margin: 0.1rem;
  border-radius: 0.1rem;
  box-shadow: 0.2rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
}
.title {
  font-weight: bold;
  font-size: smaller;
}
.info {
  font-style: italic;
  font-size: smaller;
  color: #448;
  overflow: hidden;
  text-overflow: ellipsis;
  /* padding keeps italic text from overflowing */
  padding-right: 0.05rem;
}
.create {
  font-style: italic;
  font-size: smaller;
  margin-top: 0.1rem;
}
.row {
  display: flex;
  justify-content: space-between;
  padding: 0.05rem 0;
}
.column {
  display: flex;
  flex-direction: column;
  padding: 0.2rem;
}
.start {
  align-self: start;
  justify-content: start;
}
.center {
  align-self: center;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.end {
  align-self: end;
  justify-content: end;
}
.right {
  left: unset;
  right: 0;
}
.fill {
  /* Setting width: 0 and min-width: 100% ignores element size */
  width: 0;
  min-width: 100%;
}
.tiny {
  font-size: xx-small;
}

/* Sign messages */
#sign_msg {
  display: grid;
  grid-template-areas: "ms";
  justify-items: center;
}
.sign_message {
  grid-area: ms;
}
.card-compact img.sign_message {
  max-height: 3rem;
}
.card-expanded img.sign_message {
  max-height: 6rem;
}

/* Message composer */
.mc_line_gap {
  margin-top: 3px;
}
#mc_grid {
  display: grid;
  margin: 0.1rem;
  gap: 0.1rem;
  justify-content: space-around;
  justify-items: center;
  align-content: space-around;
  align-items: center;
  grid-template-columns: repeat(4, auto);
  grid-template-areas: "pv ln ln ln"
                       "pt bx bs bc";
}
#mc_preview {
  filter: opacity(80%);
}
#mc_pixels {
  z-index: 1;
}
.preview {
  grid-area: pv;
  justify-self: end;
}
#mc_pattern {
  grid-area: pt;
  justify-self: end;
  font-size: smaller;
}
#mc_lines {
  grid-area: ln;
  justify-self: start;
  font-size: smaller;
}
#mc_expire {
  grid-area: bx;
}
#mc_send {
  grid-area: bs;
}
#mc_clear {
  grid-area: bc;
}
.multi {
  font-family: monospace;
  word-break: break-all;
  width: 100%;
}
#mp_preview_div * {
  align-items: center;
  justify-content: space-between;
}
#mp_preview_div select {
  min-width: 25%;
}

.pins {
  column-count: 2;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --------------------
 * Lane Control Signals
 * -------------------- */
.lcs {
  background-color: black;
  font-size: x-large;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  width: 2rem;
  padding: 0.2rem 0.3rem 0;
}
.lcs_dark {
  color: black;
}
.lcs_lane_open {
  color: lawngreen;
}
.lcs_use_caution {
  color: yellow;
}
.lcs_lane_closed_ahead {
  color: yellow;
}
.lcs_lane_closed {
  color: red;
}
.lcs_unknown {
  color: gray;
}

/* -------
 * Beacons
 * ------- */
.beacon-container {
  pointer-events: none;
}
.beacon-container:hover > .beacon {
  /* hilight all beacons when one is hovered (see pointer-events) */
  background-color: #ccc;
}
.beacon-container:active > .beacon {
  background-color: #dd8;
}
.beacon {
  cursor: pointer;
  pointer-events: auto;
}
.not-flashing {
  opacity: 0;
}
.flashing {
  animation: beacon-flash 1s step-start infinite;
}
.flash-delayed {
  animation-delay: 0.5s;
}
@keyframes beacon-flash {
  50% { opacity: 0; }
}
#ob_flashing {
  display: none;
}
.beacon-sign {
  font-weight: bold;
  white-space: break-spaces;
  background-color: #fb0;
  padding: 0.2rem;
  border: 1px solid black;
  border-radius: 0.2rem;
}
.signal-housing {
  align-self: start;
  background-color: black;
  text-indent: unset;
  padding: 0.2rem 0.2rem 0 0.2rem;
  border-radius: 0.2rem;
  border: 1px solid black;
}

/* -------
 * Cameras
 * ------- */
#ptz-controls {
  min-width: 10rem;
  display: grid;
  grid-template-columns: auto 1.5rem;
  grid-template-rows: repeat(4, auto);
}
#ptz-speed {
  grid-column: 2;
  grid-row: 1 / -1;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 1.5rem;
}
.preset-buttons button,
#ptz-controls button,
#lens-controls button {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#ptz-controls #ptz-joystick {
  width: 100%;
}
#ptz-controls #ptz-tilt-up,
#ptz-controls #ptz-tilt-down {
  width: 33%;
  margin-left: 33%;
}
#preset-mode-toggle.default {
  box-shadow: inherit;
}
#preset-mode-toggle.active {
  box-shadow: inset 0 0 1em #448;
}