* {
  box-sizing: border-box;
}

/** From skeleton */
html {
  font-size: 62.5%; 
}
body {
  font-size: 1.2em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.2;
  font-weight: 400;
  font-family: "Arial", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
button, input[type="button"] {
  padding: 0 15px;
  line-height: 38px;
}


html, body {
  height:100vh;

}

#baseContainer {
  max-height:100vh;
  max-width:100vw;
  min-width:100vw;
  min-height:100vh;
  display: grid;
  height:100%;
  grid-template-columns: 32em minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 120px;
  grid-template-areas:
    ". ."
    ". .";
}

a {
  text-decoration: none;
}

input {
  text-align: inherit;
}

#mapid {
  overflow: hidden;
  z-index: 0;
  grid-column: 1 / -1;
  grid-row: 2 / -1;
}

#root {
  grid-column: 1;
  grid-row: 2;
  z-index:1;
  max-height:100%;
  min-height:0;
  overflow:hidden;
  pointer-events:none;
}



body {
  background-color:gray;
}
/** Extra Stuff **/
.hidden {
  display:none;
}

.hoverIconEffect {
  cursor: pointer;
}

/** Radio Card **/
.radioCard {
  border-radius: 0.5rem;
  border:1px solid lightgray;
  background-color: rgb(243, 243, 243);
  padding:0.5rem;
  /* min-width:24rem; */
}
.radioCard:not(:last-child) {
  margin-bottom: 4px;
}
.radioCard header {
  display:flex;
  align-items: center;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
}
.radioCard header div:nth-child(1) {
  font-size: 12pt;
  flex:1;
}
.radioCard header div:nth-child(2) {
  font-size: 10pt;
  margin-right:0.4rem;
  color:rgb(190, 190, 190);
}
.radioCard .gpsError {
  margin: 6px;
  color: rgb(255, 75, 75);
}
.radioCard header img {
  width:24px;
  height:24px;
  border-radius:24px;
  border:1px solid lightgray;
  background:white;
}

.radioCardMore {
  display:flex;
  justify-content: center;
}

.radioLead {
  background-color:rgb(229, 244, 253);
  border-color:rgb(91, 138, 167);
}
.radioLead header div:nth-child(2) {
  color: rgba(81, 133, 165, 0.4);
}
.radioLead header img {
  border-color:rgb(91, 138, 167);
}
.radioLead .infoLine {
  background-color:rgb(204, 233, 252);
  border-color:rgb(204, 233, 252);
}

/** Horizontal Card Set Idea **/
.h-radio-cards {
  display:flex;
  justify-content: center;
  padding:8px;
  gap:8px 8px;
  margin-left:24rem;
  overflow-x: visible;
}

/** Flight Card **/
.flightCard {
  /* background-color: rgb(37, 37, 37); */
  color: white;
}

.flightCard header {
  display: flex;
  align-items: flex-start;
}

.flightCard .flightInfo {
  color: gray;
  flex:1;
}

.flightCard header h3 {
  color:white;
  font-size:14pt;
  padding:0;
  margin:0;
  margin-bottom:0.4rem;
  letter-spacing: normal;
}

.status.ready {
  color:rgb(0, 0, 0);
  text-transform: uppercase;
  font-size: 6pt;
  background-color: rgb(103, 214, 127);
  padding:0.4rem;
  border-radius:0.4rem;
}

.status.ended {
  color:rgb(100, 100, 100);
  text-transform: uppercase;
  font-size: 6pt;
  background-color: rgb(201, 201, 201);
  padding:0.4rem;
  border-radius:0.4rem;
}

.status.initializing {
  border-radius:0.4rem;
  font-size:6pt;
  padding:0.4rem;
  border:1px solid rgb(78, 78, 255);
}

.status.active {
  color:white;
  text-transform: uppercase;
  font-size: 6pt;
  background-color: rgb(78, 78, 255);
  padding:0.4rem;
  border-radius:0.4rem;
  box-shadow: 0px 0px 6px 2px rgba(46,157,255,1);
}

button {
  color:black;
  border: none;
  border-radius: 0.5rem;
  width: 100%;
  background:white;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button:hover {
  background-color: rgb(245, 245, 245);
}

button.important {
  background-color: red;
  border: none;
}

button.important:hover {
  background-color: rgb(255, 75, 75);
}

/** bottom card framer **/
.bottomCardHolder {
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(71,71,71,1) 100%);
  position: fixed;
  bottom:0;
  width:100%;
}
.bottomCardHolder.hidden {
  transition: all .5s ease-in-out;
  height:0;
}
.bottomCardHolder .radioCard {
  margin-top:-80px;
  margin-bottom:3rem;
}
.bottomCardHolder i {
  color:white;
  position:fixed;
  right:20px;
  bottom:40px;
}

/** Selector box **/
.dropdown {
  background: rgb(0,0,0);
  display:flex;
  color:white;
  align-items: center;
  padding:4px;
  border-radius:0.5rem;
  position:relative;
  width:100%;
}

#airborne-selector {
  position:relative;
}

#airborne-selector.radio-selecting .selector .radioCard:hover {
  border:2px solid grey;
}

#airborne-selector.airborne-selected .airborne {
  border:2px solid #6CA8FD
}

#airborne-selector.airborne-selected .airborne:hover {
  border: 2px solid #c2dbff;
}

.dropdown .header {
  flex:1;
  display:flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

#airborne-selector.radio-selecting .airborne {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border:1px solid #6CA8FD !important;
  border-bottom:1px dashed lightgray !important;
  margin:1px;
  margin-bottom:2px;
}

.selector {
  display:none;
  position:absolute;
  left:1px;
  padding:4px;
  background: black;
  box-shadow: 5px 7px 10px 1px rgba(202,202,202,0.3);
  border:1px solid #6CA8FD;
  /* border-top:1px dashed lightgray; */
  border-top:none;
  width:29rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.selector.visible {
  display:block;
}

.selector div {
  flex:1;
}

.placeholder {
  flex:1;
  font-style: italic;
  user-select: none;
  display:flex;
  align-items: center;
  padding:0.7rem;
  width:100%;
}

.dropdown .feather-chevron-down {
  order:5
}

.selector ul {
  position: absolute;
  width:100%;
  background-color: lightgray;
  border:1px solid darkgray;
  border-radius:0.4rem;
  color:black;
  list-style: none;
  padding:0;
  margin:0;
  margin-left:1rem;
  padding:1rem 0rem 1rem 0rem;
  box-shadow: 2px 3px 5px 1px rgba(0,0,0,0.5);
}

.selector ul li {
  padding:0.4rem;
  margin:0;
}
.selector ul li:hover {
  background-color:rgb(233, 233, 233);
}

.selector ul.hidden {
  display:none;
}

/** Sidebar **/
.sidebar {
  width: 30em;
  margin:2rem;
  max-height:calc(100% - 4rem);
  pointer-events:auto;
  overflow:visible;
	align-self: start;
}

.topbar {
  color:white;
  display: flex;
  background-color: rgba(37, 37, 37, 1);
  margin-bottom:2rem;
}

.topbar a {
  padding:2rem;
  flex-grow: 1;
  text-align: center;
}

.topbar a:hover {
  background-color: rgb(78, 78, 78);
}

.topbar .active {
  background-color: rgb(78, 78, 78);
}

.sidebar h3 {
  color:white;
  padding:0;
  margin:0;
  font-size:12pt;
  letter-spacing: normal;
  margin-top:0.2rem;
  margin-bottom:0.2rem;
}

.sidebar-tile {
  /* background-color: rgba(37, 37, 37, 1); */
  padding:16px;
}

.sidebar-tile h3:nth-child(1) {
  margin-top:0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/** Flight row **/
#flightInfo {
  position:relative;
}

.flightSelector {
  display:flex;
  flex-direction: column;
}

.flightSelector > .flight-list {
  flex:1;
}

.flight-list {
  /* display:flex;
  gap:1rem;
  flex-direction: column; */
  overflow-y: auto;
  max-height:400px;

}

.missing {
  color:white;
  text-align:center;
  font-style: italic;
}

input[type="text"] {
  background:none;
  border:none;
  border-radius:0;
  color:white;
  border-bottom:1px solid rgb(43, 43, 43);
  width:100%;
}

input[type="text"]::placeholder {
  font-style: italic;
  color:white;
  opacity: 1;
}

/** New Flight Radio Picker **/
.radio-picker {
  margin-bottom:2rem;
}

.radio-picker .radioCard {
  border:2px solid black;
  padding:2rem;
  background:black;
  color:white;
  margin-bottom:4px;
}

.radio-picker .radioCard header {
  align-items: center;
  margin:0;
}

.radio-picker .radioCard.radio-selected {
  border: 2px solid #6CA8FD;
}

.radio-picker .radioCard:hover {
  border:2px solid grey;
}

.radio-picker .radioCard.radio-selected:hover {
  border: 2px solid #c2dbff;
}

.airborne {
  border-radius: 0.5rem;
  display:flex;
  border:1px solid black;
  max-width:29rem;
}

#airborne-selector .airborne {
  border:2px solid black;
}

#airborne-selector .airborne:hover {
  border:2px solid grey;
}

#airborne-selector.airborne-selected .airborne:hover {
  border:2px solid #c2dbff;
}

#airborne-selector .radioCard {
  border:2px solid black;
  background:black;
  color:white;
}

#airborne-selector .radioCard header {
  width:100%;
}

.airborne .radio-selected {
  order:0;
}

.assigned-radios .radioCard {
  background-color:rgba(0, 0, 0, 0.3);
  padding:2rem;
  color:white;
  border:1px solid black;
}

.assigned-radios .radio-selected {
  border: 2px solid #6CA8FD;
}

.connected-false {
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  margin-right:1rem;
}

.connected-true {
  height: 16px;
  width: 15px;
  background-color: rgb(51, 177, 62);
  border-radius: 50%;
  display: inline-block;
  margin-right:1rem;
}

.connected-replay {
  height: 15px;
  width: 15px;
  background-color: orange;
  border-radius: 50%;
  display: inline-block;
  margin-right:1rem;
}

.unavailGRS {
  color:white;
  font-style: italic;
}

.shade {
  background-color: rgba(37, 37, 37, 1);
  color: white;
  padding:2rem;
  height:100%;
  grid-column:1 / -1;
  grid-row:2 / -1;
  z-index:100;
}

.shade select {
  background: transparent;
}

.radioId {
  font-family: monospace;
}

.deviceId {
  min-width: 40px;
  display: inline-block;
  text-align: right;
}

h3.replayInfo {
  color:orange;
  text-align: center;
}

.replayControl {
  display:flex;
  align-items: center;
}

.replayControl input {
  flex:1;
  padding:0;
  margin:0;
  margin-left:8px;
}

.replayControl span {
  margin-left: 8px;
}

div.lineLabel {
  background:transparent;
  border:none;
  position:absolute;
  color:white;
  font-size:10pt;
  font-weight:bold;
  text-shadow: black 1px 1px;
  box-shadow: none;
}

.lineLabel .leaflet-popup-tip {
  background: transparent;
  border: none;
  box-shadow: none;
}

.lineLabel .leaflet-popup-tip-container {
  display:none;
}

.radioLine {
  fill: none;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 6px;
  animation: stroke 0.5s linear infinite;
  shape-rendering: geometricPrecision;
  stroke-dashoffset: -12px;
}

.arsRadioLine {
  stroke-dashoffset: 12px;
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}

.flightDetails.ifLive {
  display:none;
}

.flightDetails.ifLive-grid {
  display:none; 
}

.flightFeedConnected .ifLive {
  display:block;
}

.flightFeedConnected .ifLive-grid {
  display:grid;
}

*[data-role] {
  display:none;
}

.flightCard button {
  align-items: center;
  justify-content: center;
}

button:disabled {
  background-color:grey;
}

.grsInstructions {
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  background-color: lightgrey;
  color: black;
  border: 1px solid grey
}

#deviceNameInput[data-role-visible] + #deviceNameDisplay {
  display: none;
}
#deviceFrequencyInput[data-role-visible] + #deviceFrequencyDisplay {
  display: none;
}

#deviceNameDisplay {
  font-size: x-large;
}

.leaflet-layerstree-children {
  padding-left:20px;
}

.leaflet-control-container input {
  margin-bottom:0;
  margin-right:4px;
}

.rssi-processing {
  
}

.rssi-processing input {
  margin-bottom:0;
}

.start-hidden {
  display:none;
}

.rssi-processing .processing-options button {
  max-width: 120px;
  padding:0;
}

.rssi-processing .processing-options input {
  color:black;
  width: 64px;
}

.rssi-processing .processing-options select {
  color:black;
}

#flightToolbox {
  position: fixed;
  top:40px;
  right: 100px;
  color: white;
  background-color: rgba(128, 128, 128, 0.8);
  padding: 8px;
  margin-top: 8px;
  border: 1px solid black;
  border-radius: 8px;
  pointer-events: auto;
}

#flightToolbox > div {
  display:none;
}

#flightToolbox:hover > div {
  display:block;
}

#flightToolbox hr {
  margin:0;
  margin-top:4px;
  margin-bottom:4px;
}

#flightToolbox h1 {
  font-size:12pt;
  text-align:center;
  margin-bottom:0;
  padding-bottom:0;
}

#flightToolbox:hover h1 {
  margin-bottom:4px;
}

#flightToolbox h3 {
  font-size:10pt;
  font-weight:bold;
  text-align: left;
  margin-bottom: 4px;
  padding-bottom: 0;
}

#flightToolbox button:hover {
  background-color: rgb(209, 209, 209);
}

#flightToolbox button {
  padding:0;
  margin:0;
}

.flightPlot {
  position:fixed;
  left:8px;
  right:8px;
  padding:8px;
  top:40px;
  background-color:white;
}

div.delete {
  color:red;
  margin-top:8px;
}
div.delete > button {
  display:none;
}

div.delete:hover > button {
  display:block;
}

button.delete {
  background-color: orange;
  padding-left:0;
  padding-right:0;
}

button.delete > svg {
  display:block;
  margin:auto;
}

.flightLog {
  position: fixed;
  top: 40px;
  bottom: 32px;
  left:10px;
  right:10px;
  padding: 8px;
  background:black;
  color:lightgrey;
  overflow-y:auto;
  pointer-events: auto;
}

.flightLog .logLine {
  display: flex;
  height:1.5em;
}

.flightLog .logLine > div {
  margin-right:4px;
}

.flightLog .logLine .lineTimestamp {
  color:darkgrey;
  font-size:8pt;
  margin-right:8px;
}

.flightLog .logLine .lineType {
  width:150px;
}

.radioName, .linkName, .linkLatency {
  margin-left:4px;
  margin-right:4px;
  font-weight: bold;
  color:white;
}

.rawDetails {
  display: none;
  position: fixed;
  z-index: 8;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.rawContent {
  margin: 50px auto;
  border: 1px solid #999;
  width: 60%;
  background-color:black;
  color:white;
  padding:8px;
  border-radius:8px;
}

.switchDot {
  position:absolute;
  height: 10px;
  width: 10px;
  background-color: #0d754d;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  border:1px solid white;
  z-index:4;
  margin-top:-2px;
}

.switchDot .switchTooltip {
  display:none;
}

.switchDot:hover .switchTooltip {
  display:block;
  background:rgba(37, 37, 37, 0.9);
  color:white;
  border-radius: 12px;
  width:12rem;
  position:absolute;
  top: 20px;
  text-align: center;
  padding:12px;
  left:-6rem;
}

.createMessage {
  color: black;
  background-color: grey;
  padding: 8px;
  border: 2px solid black;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}

/** New flight buttons **/
button.create {
  background-color: #0d754d;
  color:white;
}

a.cancel {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  border-radius: 0.5rem;
  width: 100%;
  background: white;
  text-transform: uppercase;
  color:black;
}

/** Aircraft selector filter **/
#airborne-selector input {
  background:none;
  border: 0;
  outline: 0;
  margin:8px;
}

.filterBox input + .search {
  display:none;
}

.filterBox input:placeholder-shown ~ .search {
  display:block;
}

.filterBox input + .clearSearch {
  display:block;
}

.filterBox input:placeholder-shown ~ .clearSearch {
  display:none;
}

#airborne-selector .filterBox {
  display: none;
}

#airborne-selector.radio-selecting .filterBox {
  display:flex;
}

#airborne-selector.radio-selecting .placeholder {
  display:none;
}

#airborne-selector.radio-selecting .header .radioCard {
  display:none;
}

.filterBox input::placeholder {
  color:grey;
  font-size:9pt;
}

#flightSidebar {
  display:none;
}

.sidebar-tile label.visible, .sidebar-tile label.collapsed {
  display:none;
}

.leaflet-container .leaflet-marker-pane img.grs-map {
  background: green;
  border-radius: 25px;
  border: 1px solid black;
  padding: 2px;
  box-sizing: border-box;
}
.leaflet-container .leaflet-marker-pane img.grs-map.error {
  background-color: tomato;
}

.leaflet-container .leaflet-marker-pane img.grs-map.no-signal {
  background-color: chocolate;
}

[data-tooltip] {
  /* position: relative; */
  z-index: 2;
  display: block;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
	transition: .2s ease-out;
	transform: translate(-50%, 5px)
}

[data-tooltip]:before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  padding: 7px;
	/* width: 100%; */
  min-width: 70px;
	max-width: 270px;
  border-radius: 3px;
  background-color: white;
  color: black;
  content: attr(data-tooltip);
  text-align: center;
  line-height: 1.2;
	transition: .2s ease-out;
  border:1px solid black;
  box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.3);
}

/*
[data-tooltip]:after {

  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  border-top: 5px solid white;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
*/

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
	transform: translate(-50%, 0)
}
[data-tooltip=false]:hover:before,
[data-tooltip=false]:hover:after {
  visibility: hidden;
  opacity: 0;
}

@media only screen and (max-width:600px) {
  #mapid {
    top:unset;
  }

  nav {
    display:block;
    z-index:100;
    height:unset;
  }

  nav > input[type='checkbox']:not(:checked) ~ div.submenu {
    display:none;
  }

  nav > input[type='checkbox']:checked + div.submenu {
    display:block;
    background:red;
  }

  nav div.header {
    display:flex;
  }

  nav .header h1 {
    flex:1;
  }

  nav .header label {
    display:block;
    margin:0;
    padding:8px;
  }

  nav .menu {
    display:block;
  }

  #flightToolbox {
    display:none;
  }

  .menuController {
    display:block;
  }

  #navMenuController:checked + div > label.menuController {
    background-color:white;
    color:black;
  }

  #navMenuController:checked + div.header {
    border-bottom:1px dotted grey;
  }

  #navMenuController:checked ~ div.submenu {
    border-bottom:1px dotted grey;
    display:block;
    margin:0;
  }

  #navMenuController:checked ~ div.menu a {
    display:flex;
    flex:1;
    justify-content: center;
    align-items: center;
    height:4em;
  }

  #navMenuController:checked ~ div.menu a.active {
    border:0;
    background-color:white;
    color:black;
  }

  #navMenuController:checked ~ div.userContainer {
    display:flex;
    align-items: center;
    justify-content: center;
    height:4em;
  }

  #navMenuController:checked ~ div.userContainer .userDropdown {
    position: unset;
  }

  .aircraftManager .manager {
    max-width: unset;
    min-width: unset;
    width:100%;
  }

}

@media only screen and (orientation: landscape) {
  #root {
    grid-column: 1;
    grid-row: 2 / -1;
  }
  
}

@media only screen and (max-width: 600px) {
  .sidebar {
    width: 100vw;
    margin:0;
    max-height: unset;
    height: 100vh;

  }

  .sidebar-tile {
    padding-top: 26px;
  }

  .flightSelectedMobile {
    height: unset;
  }

  .flight-list {
    max-height: 85vh;
  }
  .leaflet-control-zoom {
    display: none;
  }
 }


.leaflet-control-layers-toggle {
	background-image: url(/images/layers.png) !important;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/images/layers-2x.png) !important;
	}