body {
  background-color: #bbb;
  font-family: "Overpass";
}
label {
  text-indent: 0.4rem;
  margin-right: 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%;
}
.card img.message {
  max-height: 3rem;
}
.form img.message {
  max-height: 6rem;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button {
  appearance: none;
  display: inline-block;
  border: 1px solid #888;
  border-radius: 0.2rem;
  padding: 0.1rem 0.2rem;
  background: none;
  color: black;
  cursor: pointer;
}
button:hover {
  background-color: #ccc;
}
button:active {
  background-color: #bbb;
}
button.go_link {
  font-size: smaller;
  padding: 0 0.2rem;
}

/* 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.1rem 0.1rem 0 0.1rem;
  margin: 0.1rem 0;
  color: black;
  cursor: pointer;
}
.toggle + label:hover {
  background-color: #ccc;
}
.toggle:active + label {
  background-color: #bbb;
}
.toggle:checked + label {
  background-color: #3584e4;
}
.toggle:checked + label:hover {
  background-color: #26e;
}

.root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

#mapid {
  display: none;
}
#sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  user-select: none;
  flex: 0 1 100%;
  margin: 0.2rem;
  background-image: url(iris.svg);
  background-repeat: no-repeat;
  background-position: center;
}
#sb_div {
  width: 100%;
  display: grid;
  gap: 0.1rem;
  grid-template-columns: repeat(4, auto);
  grid-template-areas: "resource resource config fullscreen"
                       "search   state    state  refresh";
}
#sb_label {
  grid-area: resource;
}
#sb_config {
  grid-area: config;
}
#sb_fullscreen {
  grid-area: fullscreen;
}
#sb_search {
  grid-area: search;
}
#sb_state {
  grid-area: state;
}
#sb_refresh {
  grid-area: refresh;
}
#sb_list {
  flex: 0 1 100%;
  margin-top: 0.1rem;
  overflow-y: auto;
}

@media screen and (min-width: 36rem) {
  #mapid {
    display: block;
    flex: 3 1 60%;
  }
  #sidebar {
    flex: 2 0 40%;
  }
}

#ob_close {
  margin: none;
  padding: none;
}

/* Delete button sliding "confirmation" animation */
#ob_delete {
  position: relative; /* add position context for ::before pseudo-element */
  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: #bbb;
}
#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: #fff;
}
#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_login {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
  background-color: rgba(238, 238, 238, 0.75);
}
#sb_login.show {
  visibility: visible;
  left: 0;
  transition: left 100ms ease-in-out;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 0.1rem dotted gray;
}

.tooltip * {
  visibility: hidden;
  inline-size: min-content;
  z-index: 1;
  position: absolute;
  bottom: 100%;
  right: 0;
  padding: 0.5rem;
  border-radius: 0.2rem;
  color: #fff;
}

.tooltip:hover * {
  visibility: visible;
}

/* item state classes for tooltip backgrounds */
.item_available {
  background-color: #004;
}
.item_deployed {
  background-color: #440;
}
.item_planned {
  background-color: #044;
}
.item_external {
  background-color: #040;
}
.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;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
.card {
  display: flex;
  flex: 1 0 8rem;
  flex-direction: column;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.1rem 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:hover {
  box-shadow: 0.2rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.5);
  background-color: #ccc;
}
.form {
  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;
}
.ob_name {
  font-weight: bold;
  font-size: 70%;
}
.info {
  font-style: italic;
  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;
}
.inactive {
  text-decoration: line-through;
}
.row {
  display: flex;
  justify-content: space-between;
  padding: 0.05rem 0;
  z-index: 1; /* required for ob_delete::before slider pseudo-element */
}
.column {
  display: flex;
  flex-direction: column;
  padding: 0.1rem;
}

.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(3, auto);
  grid-template-areas: "pv ln ln"
                       "pt bs bc";
}
#mc_preview {
  grid-area: pv;
  justify-self: end;
  filter: opacity(80%);
}
#mc_pattern {
  grid-area: pt;
  justify-self: end;
  font-size: smaller;
}
#mc_lines {
  grid-area: ln;
  justify-self: start;
  font-size: smaller;
}
#mc_send {
  grid-area: bs;
}
#mc_clear {
  grid-area: bc;
}

.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;
}
.fill {
  /* Setting width: 0 and min-width: 100% ignores element size */
  width: 0;
  min-width: 100%;
}
.pins {
  column-count: 2;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* -------
 * 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;
  align-self: start;
  background-color: black;
  text-indent: 0;
  padding: 0.15rem 0.1rem 0 0.1rem;
  border-radius: 0.2rem;
  border: 1px solid black;
}
.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;
}