/* For time slider */
   #titleBar {
     /* position: absolute;
     bottom: 4px;
     left: 150px; */
     /* padding-top: 10px; */
     width: 100%;
     z-index: 1;
     font-size: 1.2rem;
     padding: 10px;
     /* display: flex; */
     /* align-items: center; */
     /* Vertically centers the items if they have different heights */
     /* justify-content: space-between; */
     /* This will push the first item to the left and the last item to the right */
     /* margin-left: -15px;
     margin-right: -15px; */
     /* margin: -15px; */
     /* background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding: 5px; */
     /* border: 1px solid #ddd;
     background-color: #f9f9f9; */
     /* height: 70px; */
     /* padding: 5px 10px; */
     /* border-radius: 3px; */
     /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19); */
   }

   @media (min-width: 768px) {
     [role="main"] {
       padding-top: 50px;
       /* Space for fixed navbar */
     }
   }
 
   #navSubtitle {
    font-size: 1.7rem;
   }

   #sliderTime {
     width: 220px;
     left: 10px;
     display: inline-block;
   }

   #iconTime {
     cursor: pointer;
     padding-right: 5px;
   }

   #timeLabel {
     /* bottom: 5px; */
     font-size: 1.5rem;
     /* background-color: #f9f9f9; */
     padding-left: 10px;
     padding-right: 10px;
     position: relative;
     right: -10px;
   }

   pre {
     background-color: rgb(248, 249, 250);
     padding: 5px 10px;
     border-radius: 3px;
   }

   .stars-category {
     padding-right: 10px;
   }

   #filterCoords {
     height: 50px;
     font-size: 0.7rem;
     width: 100%;
   }

   #sliderAltitudeQuery {
     width: 75%;
     left: 5px;
     top: 2px;
     display: inline-block;
     margin-right: 10px;
   }

   #sliderAltitudeFilter {
     width: 95%;
     left: 5px;
     top: 2px;
     display: inline-block;
     margin-right: 10px;
   }

   #filterPanel {
     border-radius: 0px;
     padding: 10px;
   }

   .filter-chart {
     width: 100%;
     height: 30vh;
   }

   input.large_check_box {
     margin: 2px;
   }

   #mapMenuCard {
     width: 300px;
   }

   /* #map {
     height: 43vh;
   } */

   #mapSurface {
     /* height: 40vh; */
     /* height: 40vh; */
     width: 100%;
     position: relative;
     top: 5px;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
   }

   #colorByAltitudeCard {
     top: 6px;
     left: 350px;
     width: 225px;
     z-index: 6;
     position: absolute;
     background-color: rgba(255, 255, 255, 1);
     padding: 10px 20px 10px 10px;
     border-radius: 3px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     font-size: 0.7rem;
     line-height: 1;
     padding: 10px;
   }

   #labelColorByAltitude {
     cursor: pointer;
     text-decoration: underline;
   }

   #labelColorByAltitude:hover {
     cursor: pointer;
     text-decoration: underline;
   }

   /* #buttonColorByAltitude {
    margin-bottom: 10px;
  } */

   .track-color-picker {
     margin-bottom: 5px;
   }

   .strata-input {
     position: relative;
     bottom: 2px;
   }

   .strata-label {
     position: relative;
     bottom: 2px;
   }

   .airport-label {
     display: none;
     position: relative;
     bottom: 2px;
   }

   .strata-text-input {
     display: none;
     position: relative;
     bottom: 2px;
   }

   #selectedFlightPlan,
   #selectedTaxiData,
   #selectedNir {
     font-family: Consolas, "courier new";
     color: rgb(0, 0, 0);
     background-color: #f8f9fa;
     border-style: solid;
     border-color: rgb(206, 212, 218);
     padding: 5px;
     border-radius: 4px;
   }

   #amendmentList tbody tr.selected {
     background-color: rgba(0, 255, 149, 0.5) !important;
   }

   #defaultColorLink,
   #blueColorLink {
     cursor: pointer;
     text-decoration: underline;
     padding-bottom: 3px;
   }

   #playControls {
     display: none;
     background-color: #f8f9fa;
     border-radius: 0px;
     border-style: solid;
     border-color: #d3d3d3;
     padding: 5px 15px;
     margin: 0 auto;
     position: absolute;
     left: max(120px, 30%);
     top: 56px;
     border-width: 1px;
   }

   /* 
  table.dataTable thead .sorting_asc {
    background: url("https://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
  }
  table.dataTable thead .sorting_desc {
    background: url("https://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
  }
  table.dataTable thead .sorting {
    background: url("https://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
  } */

   /* table.dataTable thead {
    position: relative;
    left: 5px;
  } */

   /* override left padding to allow of sort arrows on left  */
   /* table.dataTable.compact thead th, table.dataTable.compact thead td {
    padding: 10px 0px 10px 18px;
  } */

   #flight {
     overflow-y: auto;
     /* Scrollable contents if viewport is shorter than content. */
     height: 38vh;
   }

   /* .tbfm-metric {
    display: none;
  } */

   .tbfm-adapt {
     display: none;
   }

   .map-menu-section {
     color: rgb(83, 83, 83);
     font-weight: bold;
     margin-top: 3px;
     margin-bottom: 3px;
   }

   #popupTmi {
     line-height: 0.9;
     width: 200px;

   }

   .tmi-list {
     font-size: 0.8rem;
     height: 140px;
     overflow-y: scroll;
   }

   #tmiPanel {
     position: absolute;
     display: none;
     bottom: 10px;
     right: 80px;
     z-index: 1;
     background-color: rgba(248, 249, 250, 0.1);
     border-radius: 5px;
     padding: 5px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
     font-size: 1.4rem;
   }

   #gdpList {
     z-index: 1;
     background-color: rgba(248, 249, 250, 0);
     border-radius: 5px;
     padding: 5px;
     border: 3px solid #fa8e00bb;
     margin: 2px;
   }

    #gsList {
     z-index: 1;
     background-color: rgba(248, 249, 250, 0);
     border-radius: 5px;
     padding: 5px;
     border: 3px solid #ff0000bb;
     margin: 2px;
   }

    #afpList {
     z-index: 1;
     background-color: rgba(248, 249, 250, 0);
     border-radius: 5px;
     padding: 5px;
     border: 3px solid #0000ffbb;
     margin: 2px;
   }

   #tmiLegend {
     position: absolute;
     bottom: 10px;
     right: 5px;
     z-index: 1;
     background-color: rgb(248, 249, 250);
     border-radius: 5px;
     padding: 5px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
     font-size: 1em;
   }

   #inputCallsign,
   #inputAirline {
     width: 100px;
     margin-right: 5px;
   }

   #callsignPanel {
     font-size: 16px;
     padding-top: 5px;
   }

   #surfaceCountLabel {
     font-size: 16px;
     padding-top: 4px;
     float: right;
   }

   #surfaceLabel {
     position: absolute;
     top: 5px;
     left: 10%;
     width: 85%;
     z-index: 1;
     /* background-color: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        padding: 5px; */
     background-color: rgb(248, 249, 250);
     padding: 5px 10px;
     border-radius: 3px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
   }

   #surfaceWarning {
     position: absolute;
     top: 50px;
     left: 10%;
     width: 85%;
     z-index: 1;
     /* background-color: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        padding: 5px; */
     background-color: rgb(254, 255, 183);
     padding: 5px 10px;
     border-radius: 3px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
     font-size: 16px;
   }

   #selectMapHeight {
     position: absolute;
     right: 10px;
     top: 55px;
     font-size: 13px;
   }

   /* put above Map Scale which has bottom of 8px and height of 18px */
   #speedLegend {
     position: absolute;
     bottom: 30px;
     left: 8px;
     z-index: 1;
     background-color: rgb(248, 249, 250);
     border-radius: 3px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
     padding: 5px;
     line-height: 1.4;
   }

   .split {
     display: flex;
     height: 300px;
     /* Example height for the resizable area */
   }

   .gutter {
     background-color: #eee;
     background-repeat: no-repeat;
     background-position: 50%;
     cursor: col-resize;
   }

   .gutter.gutter-horizontal {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkGz/wAAAAI0lEQVQoU2M4c+bM/wEwAyj/gYyM/gYCBggAAAAAXwB/wB2qWAAAAABJRU5ErkJggg==');
   }

   .col-content {
     padding: 15px;
     border: 1px solid #ddd;
     background-color: #f9f9f9;
   }

   .metadata {
     font-size: 1em;
   }

   #titleStatus {
     /* position: relative;
    top: -10px; */
     height: 5vh;
     font-weight: 400;
     color: rgba(38, 90, 52, 1);
     font-size: max(min(2vw, 24px), 16px);
     padding-right: 15px;
   }

   .time-series-chart {
     width: 100%;
     /* height: 41vh; */
     height: 90%;
     display: none;
   }

   #chartGroup-A,
   #chartGroup-B {
     background-color: #ffffff;
   }

   /* #mapCol {
    min-width: 300px;
   } */

   #timeReset {
     padding-left: 10px;
     position: relative;
     top: -3px;
   }

   #timeResetWarning {
     padding-left: 10px;
     position: relative;
     top: -1px;
   }

   /* #buttonTimeReset {
     margin-bottom: 5px;
   } */