@font-face {
    font-family: 'main-font';
    src: url('/monofonto.otf');
}

html body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: rgb(20, 21, 21);
  font-family: main-font;
}

.screen#page-flights, .screen#page-heading {
  /* align-items: center; */
  justify-content: center;
}

.info-page {
  color: white;
  border-color: white;
  border-width: 2px;
  border-radius: 5px;
  border-style: solid;
  margin: 10px;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  padding: 5px;
}

.info-page div.top {
  flex-grow: 1;
  overflow-y: scroll;
}

.info-page div.bottom {
  flex-shrink: 0;
  height: 30px;
  margin: 10px 0px;
}

.info-page > .header {
  color: rgb(12, 254, 254);
}

.info-page > h1.header {
  border-bottom: white solid 2px;
  margin: 20px 0;
  padding-bottom: 20px;
}

table.data-table {
  margin: 10px;
  border-collapse: collapse;
  select: none;
}

/* table.data-table tr * { */
/*   pointer-events: none; */
/* } */

table.data-table tr:hover {
  background-color: white;
  color: black;
  cursor: pointer;
}

table.data-table tr:active {
  background-color: rgb(12, 254, 254);
  color: white;
}

table.data-table td {
  padding: 2px 5px;
}

table.data-table td img {
  max-height: 100px;
}

/* .info-page > ul { */
/*   list-style: none; */
/*   padding: 10px 20px; */
/* } */
/**/
/* .info-page > ul > li { */
/*   height: 50px; */
/*   margin: 10px 0; */
/* } */
/**/
/* .info-page > ul > li > img { */
/*   width:50px; */
/*   max-height: 50px; */
/* } */

div.screen {
  display: none;
}

div.screen.visible {
  display: inherit;
  flex: 1;
}

.centered {
  text-align: center;
  /* justify-content: center; */
}

button, input[type="button"], input[type="submit"] {
  background-color: white;
  color: rgb(20, 21, 21);
  border: none;
  padding: 2px 6px;
}

button:hover, input[type="button"]:hover input[type="submit"]:hover {
  background-color: rgb(20, 21, 21);
  color: white;
  border: none;
}

button:active, input[type="button"]:active input[type="submit"]:hover {
  background-color: rgb(12, 254, 254);
}

input[type="text"], input[type="number"] {
  
}

input[type="text"].valid, input[type="number"].valid {
  border: 2px rgb(22, 164, 22);
  border-style: solid;
}

input[type="text"].invalid, input[type="number"].invalid {
  border: 2px rgb(233, 8, 8);
  border-style: solid;
}

#map { height: 100%; width: 100%; }
.hidden {
  display: none;
}
#container {
  height: 100vh;
  display: flex;
}
#sidbar {
  flex-shrink: 0;
  width: 300px;
}
#view {
  display: inherit;
  flex: 1;
  flex-direction: column;
}
#waveform {
  height: 70px;
  flex-shrink: 0;
}
#map {
  flex: 1;
}
#atc {
  heigth: 100px;
  width: 100%;
  flex-srink: 0;
  min-width: 0;
}
#atc-2 {
  heigth: 100px;
  width: 100%;
  flex-srink: 0;
  min-width: 0;
}