* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.clickable {
  cursor: pointer;
}

button {
  background-color: #777777;
  border: 1px solid black;
}

textarea {
  color: #fff;
  background-color: rgba(5, 5, 5, 0);
  border: none;
}

body {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background: url("../img/arma3-terrain-altis-satellitemap.webp") center, repeating-linear-gradient(180deg, rgb(0, 0, 0) 0px, rgba(144, 144, 144, 0.2274509804) 3px, rgba(144, 144, 144, 0.2274509804) 15px), linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%);
  background-blend-mode: multiply;
  color: #fff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 1em;
  display: grid;
  gap: 0.5em;
  grid-template: "t h h" max-content "m m u" "m m u" "m m u" "m m d" "c c d" min-content/max-content auto 30em;
}
body > * {
  box-shadow: 0 0 10px black;
  border: 1px solid #272727;
  background-color: rgba(21, 21, 21, 0.8078431373);
  padding: 0.5em;
}
body #title {
  grid-area: t;
  font-size: 150%;
}
body #header {
  grid-area: h;
}
body #map {
  grid-area: m;
  background: url("../img/arma3-terrain-altis-satellitemap.webp");
  background-position: center;
  background-size: cover;
}
body #unit-list {
  grid-area: u;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
body #details {
  display: grid;
  grid-area: d;
  display: grid;
  gap: 0.5em;
  grid-template: "i c" min-content "i s" min-content "n n"/min-content auto min-content;
}
body #side-tabs {
  display: flex;
  flex-direction: row;
}
body #side-tabs > * {
  text-align: center;
  flex: 1;
}
body #side-tabs .side-bluefor {
  background-color: #162538;
}
body #side-tabs .side-bluefor.active {
  background-color: rgb(58, 97, 148);
}
body #side-tabs .side-opfor {
  background-color: #381616;
}
body #side-tabs .side-opfor.active {
  background-color: rgb(148, 58, 58);
}
body #side-tabs .side-indi {
  background-color: #1d3816;
}
body #side-tabs .side-indi.active {
  background-color: rgb(77, 148, 58);
}
body #side-tabs .side-civ {
  background-color: #464646;
}
body #side-tabs .side-civ.active {
  background-color: rgb(134, 134, 134);
}
body #command-line {
  grid-area: c;
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}
body #command-line > textarea {
  flex: 1;
}
body #command-line > button {
  padding: 0.5em;
}
body .unit-card {
  display: grid;
  gap: 0.5em;
  grid-template: "i c n" "i s n"/min-content auto max-content;
  padding: 0.5em;
  border: 1px solid #272727;
}
body .unit-card.selected {
  border: 1px solid #f2b100;
}
body .nato-symbol {
  grid-area: i;
  border: 1px solid #fff;
}
body .unit-name {
  grid-area: c;
}
body .unit-notes {
  grid-area: n;
}
body .unit-status-display {
  grid-area: s;
  display: flex;
  flex-direction: row;
}
body .unit-status > img {
  width: 1em;
}
body .unit-status.red > img {
  filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);
}
body .unit-status.orange > img {
  filter: brightness(50%) sepia(100) saturate(100) hue-rotate(250deg);
}/*# sourceMappingURL=styles.css.map */