.flex-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.flex-row.base-align {align-items: baseline;}
.flex-row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.flex-row > [class*='col-'].row-reverse-direction {
  display: flex;
  flex-direction: row-reverse;
}
._dash-loading {width:100%; text-align:center; margin-top:100px; font-size:20px; visibility:hidden;}
._dash-loading:before {margin-left:5%; content:'Assembling Dashboard...'; visibility:visible;}

/* Add this CSS to constrain your plots/images
.dash-graph {
    max-width: 100% !important;
    max-height: 500px !important;
    overflow: hidden;
}
*/
/* For general image containers
.image-container {
    max-width: 100%;
    max-height: 100vh;
    overflow: hidden;
}

.image-container img {
    max-width: 100%;
    height: auto;
}
*/

/* Header styles */
#dash-header {position:absolute; top:0;}
#dash-header .loading-indicator {position:absolute; top:20px; left:0; right:0; margin:auto;}
.header-logo {position:absolute; left:70px; z-index:10;}
.header-buttons button {margin-left: 10px;}

/* Navigation */
.hamburger-nav {
  cursor: pointer;
  font-size: 36px;
  position: absolute;
  z-index: 10;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none !important;
  font-size: 25px !important;
  color: #818181 !important;
  display: block;
  transition: 0.3s;
}
.sidenav a:not(#nav-close) {min-width:200px;}
.sidenav a:hover {
  color: #f1f1f1 !important;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px !important;
  margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* Dashboard layout specific styles */
.container.airport-graph {
  width:100%;
  max-width: 100% !important;
  max-height: 500px !important;
  flex-grow: 1;
}

.mapboxgl-ctrl-attrib {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
}

.mapboxgl-ctrl-attrib-button {
    background: transparent !important;
    border: none !important;
    /* Make the button smaller */
    width: 16px !important;        /* Default is usually ~24px */
    height: 16px !important;       /* Default is usually ~24px */
    min-width: 16px !important;    /* Prevent it from growing */
    min-height: 16px !important;   /* Prevent it from growing */
    padding: 2px !important;       /* Reduce internal padding */
    font-size: 10px !important;    /* Smaller text/icon */
}

/* If there's an icon/symbol in the button, make it smaller too */
.mapboxgl-ctrl-attrib-button::before,
.mapboxgl-ctrl-attrib-button svg {
    width: 12px !important;
    height: 12px !important;
}

.dash-spreadsheet .row {
  margin-left: 0px;
  margin-right: 0px;
  flex-wrap: nowrap;
  }
.dash-spreadsheet.dash-freeze-left {
    max-width: none !important;
}
#layout-winter-dashboard {margin-top: 10em;}
.display-none {display:none;}
#layout-dashboard {margin-top:1em;}
#map_display.eleven.columns {margin-left:4%; margin-top:10px;}
#airports-table .column-header-name {font-size:14px; font-weight:bold;}
#airports-table .dash-cell-value {font-size:14px;}
.dashboard-date-picker {font-size:16px; font-family:sans-serif;}
.dashboard-date-picker .SingleDatePicker_picker {z-index:20;}
.dashboard-date-picker .DateInput {width:146px;}
.timeseries-datepicker .btn-group {margin-top:-2px;}
.timeseries-datepicker button.btn {width:74px; border-color:#cccccc;}
.toggle-map-view {text-align:right; width:100%;}
.alert-view {margin-left:0; margin-top:-1%; position:relative; z-index:10;}
.alert-checklist {padding:5px; font-size:14px; margin-left:2% !important; margin-bottom:10px;}
.alert-checklist label {display:block;}
.btn-alert-refresh {width:96%; margin-left:2%; margin-bottom:10px;}
.timeseries-btns {flex-wrap: wrap;}
.sounding-section {margin-left:2%;}
.timeseries-btns {z-index:10;}
.timeseries_UI > * {margin-bottom: 15px;}
.timeseries_UI > *:last-child {margin-bottom: 0px;}
/*Override dropdown select styling*/
#model-select-dropdown .Select--multi .Select-value {margin-top: 0px; vertical-align: middle;}
/*Add styling for each model selection in dropdown*/
#model-select-dropdown .Select-value.model-gfs,
#winter-model-gfs.active {
  color: white;
  background-color: rgba(25, 25, 230, 1);
}
#model-select-dropdown .Select-value.model-gfs .Select-value-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#model-select-dropdown .Select-value.model-gfs .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-gfs .Select-value-icon:focus {
  background-color: rgba(100, 100, 255, 1);
  color: inherit;
}
#model-select-dropdown .Select-value.model-nam,
#winter-model-nam.active {
  color: black;
  background-color: rgba(25, 230, 25, 1);
}
#model-select-dropdown .Select-value.model-nam .Select-value-icon {
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
#model-select-dropdown .Select-value.model-nam .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-nam .Select-value-icon:focus {
  background-color: rgba(0, 180, 0, 0.7);
  color: inherit;
}
#model-select-dropdown .Select-value.model-hrrr,
#winter-model-hrrr.active {
  color: white;
  background-color: rgba(230, 0, 0, 1);
}
#model-select-dropdown .Select-value.model-hrrr .Select-value-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#model-select-dropdown .Select-value.model-hrrr .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-hrrr .Select-value-icon:focus {
  background-color: rgba(180, 0, 0, 0.7);
  color: inherit;
}
#model-select-dropdown .Select-value.model-coamps,
#winter-model-coamps.active {
  color: navy;
  background-color: rgba(255, 215, 0, 1);
}
#model-select-dropdown .Select-value.model-coamps .Select-value-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#model-select-dropdown .Select-value.model-coamps .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-coamps .Select-value-icon:focus {
  background-color: rgba(204, 173, 0, 0.7);
  color: inherit;
}
#model-select-dropdown .Select-value.model-coamps-highres,
#winter-model-coamps-highres.active {
  color: black;
  background-color: rgba(255, 132, 0, 1);
}
#model-select-dropdown .Select-value.model-coamps-highres .Select-value-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#model-select-dropdown .Select-value.model-coamps-highres .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-coamps-highres .Select-value-icon:focus {
  background-color: rgba(205, 106, 0, 0.7);
  color: inherit;
}
#model-select-dropdown .Select-value.model-era5,
#winter-model-era5.active {
  color: white;
  background-color: purple;
}
#model-select-dropdown .Select-value.model-era5 .Select-value-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#model-select-dropdown .Select-value.model-era5 .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-era5 .Select-value-icon:focus {
  background-color: purple;
  color: inherit;
}
#model-select-dropdown .Select-value.model-navgem,
#winter-model-navgem.active {
  color: white;
  background-color: orange;
}
#model-select-dropdown .Select-value.model-navgem .Select-value-icon {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
#model-select-dropdown .Select-value.model-navgem .Select-value-icon:hover,
#model-select-dropdown .Select-value.model-navgem .Select-value-icon:focus {
  background-color: orange;
  color: inherit;
}

span.model-line-type {
  color: #888;
  font-weight: bolder;
  font-size: 26px;
}

#winter-dashboard-table {margin-top:5px;}
.dash-table-tooltip {font-size:15px;}
#winter-airport-dropdown .Select-menu-outer {width:400px;}
.winter-radio .btn-group {display:block;}

.winter-legend {font-size:14px; text-align:left; display:initial;}
.winter-legend .winter-legend-mono {font-family:monospace;}
/* .winter-legend .winter-legend-title {font-family:initial}
.winter-legend .times-past {
  display: inline-block;
  width: 50%;
  text-align: right;
  padding-right: 13px;
  border-right: 1px solid black;
}
.winter-legend .times-future {
  display: inline-block;
  width: 50%;
  text-align: left;
  padding-left: 13px;
  color: rgb(119, 119, 119);
}*/

label.page-title {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 36px;
}

/* Override btn-outline-primary color when button is active */
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
    font-weight:bold;
}
div.col-md-2.airport-dropdown, div.two.columns.airport-dropdown {z-index:10;}
/*div#runway-div {position:absolute; visibility:visible; margin-left:15px; margin-top:45px; z-index:1;}*/
.section-fullscreen {position:absolute; margin:auto !important; left:0; right:0; top:40px; bottom:20px; z-index:1000;}

/* Footer styles */
.dash-footer {margin: 60px 0 20px 0; color:gray; text-align:center;}
.dash-footer .row {margin:0;}
.dash-footer img {display:inline;}
.dash-footer p {display:inline; margin-left:5px; font-size:12px;}

/* Override bootstrap 4 font sizes */
h1 {font-size:36px !important;}
h5 {font-size:16px !important;}
button {font-size:16px !important;}
#dash-header button {font-size:16px !important;}
.Select-control .Select-value .Select-value-label {font-size:16px !important;}