article {
  display: none;
}

body {
  background-color: black;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.header {
  display: flex;
  font-size: 1.75vw;
  margin-bottom: 1vh;
}

#leftHeader {
  display: flex;
  width: 65%;
}

#logo {
  padding-top: 1%;
  padding-left: 1%;
  width: 7vw;
  height: 3.9vw;
}

#title {
  padding-right: calc(3.5vw + 0.5%);
  margin: auto;
}

#rightHeader {
  /* padding-right: 5vw; */
  /* text-align: right; */
  margin: auto;
}

.everythingButTheHeader {
  display: flex;
}

table {
  border-collapse: collapse;
}

td {
  padding: 0.09vw;
  text-wrap: wrap;
}

.dataContainer {
  display: flex;
  flex-direction: column;
  width: 65%;
  height: 90vh;
}

.tableContainer,
.mapDiv {
  text-align: center;
  height: 100%;
  overflow-y: scroll;
}

/* table setting */
#updates {
  display: grid;
}

#builder {
  width: 27%;
}
#rater {
  width: 29%;
}
#state {
  padding-right: 10px;
}
#type {
  width: 20%;
}
#time {
  width: 17%;
}

th {
  font-size: 3vh;
}

tr td {
  color: white;
  min-height: 4.7h;
  height: 4.7vh;
  max-height: 4.7vh;
  font-size: 2.35vh;
  overflow: none;
  word-wrap: none;
}

/* TODO fix this so alternating colors don't flash around when table is updating with scrolling animation */
tr:nth-child(odd) td {
  background-color: rgb(1, 1, 39, 0.5);
}

tr:nth-child(even) td {
  background-color: rgb(1, 1, 39, 0.9);
}

@keyframes slideDownAndFade {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes slideDownFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

tr.leaving {
  animation: slideDownAndFade 2s forwards;
}

tr.incoming {
  animation: slideDownFromTop 2s forwards;
}

tr.staying {
  animation: slideDown 2s forwards;
}
/* end table settings */

#gwaph {
  width: 100%;
  height: 100%;
}

.sideThings {
  /* display: flex; */
  float: right;
  text-wrap: wrap;
  width: 35%;
  margin-inline: auto;
}

.bottomData {
  display: flex;
  height: 50vh;
  /* width: 71.6%; */
}

.inspectionCount {
  display: flex;
  /* align-self: center; */
  font-size: 3vh;
  font-weight: bold;
  /* text-align: center; */
  /* width: 20%; */
  justify-content: space-evenly;
}

#totalCompleted {
  /* font-size: 11vw; */
  /* font-weight: bold; */
}

#radar {
  width: 55%;
}

#forecast {
  width: 45%;
  /* zoom: calc(1/600); */
  /* zoom: 3.35; */
}

video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -2;
}

#background {
  position: absolute;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  right: 0;
  bottom: 0;
  background: rgba(20, 35, 61, 0.96);
}
/* announcement carousel styles */
.carousel {
  color: white;
  /* width: 65%; */
  height: 100%;
  /* border-radius: 3px; */
  margin-inline: 5px;
  overflow: hidden;
  position: relative; /* <-- required for absolute positioning of slides */
}

.carousel .slides {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  transition: left 1s ease-in-out;
}

.carousel .slides .slide {
  height: auto;
  zoom: 1.5;
}

.slideTitle {
  font-size: xxx-large;
}

.slideBody {
  font-size: xx-large;
}

.hidden {
  display: none;
}

.amtable {
  font-size: 2vh;
  width: 33%;
}

.amwrapper {
  margin-top: 50px;
  text-align: center;
}

.am-td {
  width: 33%;
}

#areaManagers {
  width: 100%;
}

a.return-links {
  text-decoration: none;
  padding: 5px;
  background-color: #0a1231;
  margin-top: 50px;
  width: 400px;
  border-radius: 10px;
}

a.return-links:hover {
  background-color: #0080ff;
}

a.return-links:active {
  background-color: #0080ff;
}

h1 {
  text-align: center;
  color: white;
}

#links-container {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}