html, body, #mainContainer, #mobile-device {
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  overflow: hidden;
  background: #333a42;
  font-family: Arial;
  font-size: 12px;
}

.blackbg {
  background: black;
}

#mainContainer {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1200px) {
  #mainContainer {
    font-size: 10px;
  }
}

#mobile-device img {~
  width: 100%;
  height: 100%;
}

#headerBar {
    width: 100%;
    height: 7em;
    padding: 10px 20px;
    border-bottom: 3px solid lightslategrey;
    color: #deefff;
}
#headerTitles, #headerSearch, #headerLogos {
  height: 100%;
}

#headerBarMobile {
  width: 100%;
  height: 5.5em;
  padding: 0px 10px;
  border-bottom: 3px solid lightslategrey;
  color: #deefff;
  text-align: center;  
}
#mainContent {
  position: relative;
  height: calc(100% - 7em);
}
@media screen and (max-width: 767px) {
  #mainContent {
    height: calc(100% - 5.5em) !important;
  }
}


/* Header */

#betaLabelButton {
  position: relative;
  top: -22px;
  left: -24px;
  /*width: 80px;*/
  font-size: 18px;
  font-weight: bold;  
  line-height: 22px;
  text-align: center;
  background: darkred;
  color: white;
  border-radius: 5px;
  border: 2px solid;
  border-color: lightgrey;
  outline: none;
}
#betaLabelButton:hover {
  border-color: white;
  background: #b71c2b;  
}

#mainTitle {
    display: flex;
    font-size: 2.5em;
    line-height: 1.25em;
    letter-spacing: 1px;
}
#subTitle {
    text-align: right;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.25em;
}
#hubIntroButton {
    position: absolute;
    top: calc(50% - 0.5*2.5em + 2px);
    left: calc(100% - 4em);
    font-size: 1em;
}
#mainTitleMobile {
    font-size: 2em;
    line-height: 1.5em;
}
#subTitleMobile {
    font-size: 1.25em;
    font-style: italic;
    line-height: 1.25em;
}
#headerTitles:hover {
  color: white;
}

#headerLogos {
  right: -auto;
  overflow-x: hidden;
  /*padding: 0 20px;*/
  /*text-align: justify;*/
}
/*
#headerLogos div {
  width: calc(100% / 8);
  float: right;
}
#headerLogos div img {
  float: left;
}
*/
#headerLogos .headerLogo {
    float: left;
    height: 100%;
    padding: 0 4px;
}
#headerLogos .headerLogo img {  
    height: 100%;
    /*float: left;*/
}

#headerLogos .headerLogoLarge {
    float: left;
    // margin-right: 2%;
    width: 49%;
    height: 100%;  
}

.headerLogo img, .headerLogoLarge img {
    // width: 100%;
    height: 100%;  
}
*/

#headerSearch {
  padding: 0 10px;  
}

#lmeSelectList {
    /*width: calc(50% - 1em);*/
    width: 100%;
    /*height: calc(2em + 2px);*/
    position: absolute;
    top: calc(50% - 1em);    
    font-size: 1.5em;
    /*padding: 0;*/
    padding: 0 10px 0 0;
    border: 0;    
}
#lmeSelectList .btn {
    width: 100%;
    text-align: left;
    font-size: inherit;
    border-radius: 5px;
    position: 
}
#lmeSelectList .fa-caret-down {
  /*position: relative;*/
  /*left: calc(50% - 1em);*/
  position: absolute;
  right: 5%;
  top: 25%;
}

#lmeSelectList .dropdown-menu {
    width: calc(100% - 10px);
    max-height: calc((1.25em * 2.25 * 10) + 4px);
    /*max-height: 100px;*/
    padding: 0;
    overflow-y: scroll;
    /*background: #333a42;*/
    background: rgba(51, 58, 66, 0.9);    
    border: 2px solid grey;
    border-radius: 5px;      
}
#lmeSelectList .dropdown-menu li {
    font-size: 1.25em;
    line-height: 2.25em;
    padding: 0 10px;  
}
#lmeSelectList .dropdown-menu li {
  color: lightgrey;
}
#lmeSelectList .dropdown-menu li:hover {
  // background: #727b84;
  background: rgba(114, 123, 132, 0.5);
}
#lmeSelectList .dropdown-menu li:hover {
  color: white;
  text-decoration: none;
}

#searchBox {
  width: calc(50% - 1em);
  left: calc(50% + 0.5em);
}

/* Main Content */

#mapPlaceholder {
    text-align: center;
    left: 40%;
    right: 40%;
}
#googleContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

#mapControls {
}
#mapControlsButtonHeader {
    position: relative;
    left: calc(2.5em + 15px);
    width: 220px;
}
#mapControlsButton {
  position: absolute;
  z-index: 0;
}
#mapControlsButtonText {
  height: 38px;
  width: 184px;
  margin-left: 36px;
  padding: 6px 5px;
  font-size: 1.3em;
  color: white;
  background: #333a42;
  border: 2px solid grey;
}

#mapControlsContent {
    position: relative;
    left: 3em;
    width: 220px;
    height: calc(100% - 2.5em);
    border-top: 0;
    border-top-left-radius: 0;    
    border-top-right-radius: 0;    
}
#mapControlsDimmer {
  padding-top: 10px;
  
}
.mapControlsHeader {
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid grey;  
}
.mapControlsFooter {
  height: 20px;
}

#mapBaseLayers {  
}
#mapOverlays {
  height: calc(100% - 185px);
}
#mapOverlaysList {
  max-height: calc(100% - 35px);
  overflow-y: scroll;
}
#mapOverlaysList .section {
  color: white;
  margin-bottom: 8px;
  margin-top: 10px;  
}

#buttonsPanelLeft {
  position: absolute;
  top: 10px;
  left: 50px;
  height: calc(100% - 130px);
}
#buttonsPanelLeft .buttonRegular {
  float: left;
  margin-right: 10px;
}

#debugButtonsPanel {
  position: absolute;
  top: -30px;
  right: 20px;
}
#debugButtonsPanel .buttonRegular {
  float: right;
  margin-left: 10px;
}

#buttonLmeInfoTabPanel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}
#buttonLmeInfoTabPanel .buttonRegular {
  width: 2.4em;
  height: 2.4em;
  z-index: 2;
  font-size: 1.5em;  
}

.mediaPanelButton {
  width: 100px;
  position: fixed;
  right: 10px;
}
.mediaPanelButton button {
  text-align: right;
  padding: 6px;
}
.mediaPanelButton .fa {
  position: absolute;
  left: 0px;
  top: 0.3em;
  font-size: 2em;
  line-height: 0;  
}

#mediaPanelButtonCollapsed {
  z-index: 0;
  bottom: 20px;
}
#mediaPanelButtonExpanded {
  z-index: 2;
  bottom: 65px;
}
#mediaPanelButtonCollapsed button[aria-expanded=true] {
  display: none;
}
#mediaPanelButtonExpanded button[aria-expanded=false] {
  display: none;
}
#mediaPanelButtonCollapsed button, #mediaPanelButtonExpanded button {
  padding-right: 15px;
}

#contentPanelButtonCollapsed {
  z-index: 0;
  bottom: 60px;
}
.contentPanelButtonCollapsedMediaExpanded {
  bottom: 110px !important;
}
#contentPanelButtonExpanded {
  z-index: 2;
}
#contentPanelButtonCollapsed button[aria-expanded=true] {
  display: none;
}
#contentPanelButtonExpanded button[aria-expanded=false] {
  display: none;
}
#contentPanelButtonExpanded button {
  padding-right: 10px;
}

.lmeName {
  font-size: 1.25em;
}
#lmeNamePopup {  
  z-index: 3;
  display: none;
  position: absolute;
  color: white;
  border-color: white;
}

#factsInfoPopup {
  display: none;
  width: 350px;
  /*height: 250px;*/
  z-index: 3;
  position: absolute;
  border-color: white;
  opacity: 0.95;
}
#factsInfoPopup .infoPopupHeader {
  height: 30px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid white;
}
#factsInfoPopup .panelHeaderButtons {
  font-size: 1.25em;
  position: absolute;
  top: 5px;
  right: 5px;
}
#factsInfoPopup .infoPopupTitle {
  color: white;
}
#factsInfoPopup .infoPopupContent {
  height: 150px;
  overflow-y: scroll;
  color: #ddd;
}
#factsInfoPopup .infoPopupLink {
  height: 30px;
  padding-top: 8px;
  margin-top: 10px;
  border-top: 1px solid white;
  text-align: center;
}
#factsInfoPopup a {
  color: white;
}


#lmeDetailsPanel {
  // display: none;
  width: 250px;
  // height: 400px;
  top: 20px;
  right: 20px;
  border-color: deepskyblue;
  color: white;
}
#lmeDetailsPanel .panelInner {
  // min-height: calc(400px - 24px);
}

#lmeDetailsPanel .lmeName {
  // color: #ffff00;
  // color: #dcfbff;
}
#lmeDetails {
  top: 70px;
  right: 20px;
  margin-top: 0.5em;
  padding-top: 0.75em;
  border-top: 2px solid lightgrey;
  font-size: 1.1em;
}
#lmeDetails .row {
  padding: 0;
  line-height: 1.75em;
}
#lmeDetails .lmeFactsProp {
  width: 55%;
}

.infoIcon {
    font-size: 1.25em;
    position: absolute;
    left: 45%;
    top: 0;  
}

.lmeTrafficLight {
  width: 60px;
  text-align: center;
  border-radius: 5px;
  color: black;
}
.lmeTL-red {
  background: #FF0000;
}
.lmeTL-orange {
  background: #FF991F;
}
.lmeTL-yellow {
  background: #E0FF19;
}
.lmeTL-green {
  background: #73FF0D;
}
.lmeTL-blue {
  background: #6EFFF2;
}
.lmeTL-grey {
  background: #CCCCCC;
}


.mainContentPanelIncHeader {
  width: calc(100% - 600px);
  position: absolute;
  left: 300px;
  top: 20px;
  padding: 20px;
  background: #222;
  color: white;
  border-color: ghostwhite; 
}
.mainContentPanelIncHeader .panelInner {
  height: calc(400px - 44px);
}
.mainContentPanelIncHeader .panelHeader {
}
.mainContentPanelIncHeader .panelContent {
  max-height: 300px;
  overflow-y: scroll;
}

.mainContentPanel {
  width: calc(100% - 310px);
  height: calc(100% - 7em - 130px);
  // height: 600px;
  position: absolute;
  left: 10px;
  top: calc(7em + 10px);
  padding: 0;
  background: #222;
  color: white;
  border-color: ghostwhite;
  font-size: 1em; 
  opacity: 1;
}

#lmeIntroPanel {
  max-width: calc(100% - 600px);
  max-height: 100%;
  left: 100px;
}
#lmeIntroPanel .panelHeader {
  margin-bottom: 0px;
}
#lmeIntroPanel .panelContent {
  height: calc(100% - 200px);
}

#lmeIntroPanel h3 {
  margin-bottom: 10px;
  margin-top: 20px;  
}

#webLinkContent {
  // height: calc(100% - 7em - 120px);
  padding: 20px 0 0 0;
  background: slategrey;
}
#webLinkContent .panelHeader {
  height: 40px;
  margin-bottom: 0;
  padding-left: 20px;
}
#webLinkContent .panelHeaderButtons {
  right: 10px;
  font-size: 1.25em;
}
#webLinkContent .panelContent {
  width: 100%;
  height: calc(100% - 40px);
}

#imageLinkContent {
  // height: 700px;
  padding: 20px;
}
#imageLinkContent .panelHeader {
  height: 40px;
}
#imageLinkContent .panelHeaderButtons {
  font-size: 1.25em;
}
#imageLinkContent .panelContent {
  width: 100%;
  height: calc(100% - 80px);
  background-color: black;
  text-align: center;
}
#imageLinkContent img {
  // width: 100%;
  // height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
#imageLinkContent .panelFooter {
    height: 40px;
    text-align: right;
    margin-top: 10px;
    margin-right: 10px;
}
#imageLinkContent .panelFooter a {
  color: lightgrey;
}
#imageLinkContent .panelFooter a:hover {
  color: white;
}

.mainContentPanel .panelContent {
  width: 100%;
  height: 100%;
  // max-height: 280px;
  // overflow-y: scroll;
}
.mainContentPanel iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

#lmeLearnMoreButton .fa {
  position: absolute;
  left: 0px;
  top: 50%;
  font-size: 2em;
  line-height: 0;  
}

#lmeLearnMoreButton button[aria-expanded=false] .expanded {
  display: none;
}
#lmeLearnMoreButton button[aria-expanded=true] .collapsed {
  display: none;
}


#mediaPanel {
  width: 100%;
  // width: calc(100% - 200px);
  // margin: 0 100px;
  height: 110px;
  position: absolute;
  bottom: 0px;
  // left: 150px;
  overflow-x: scroll;
  overflow-y: hidden;
  background: rgba(51, 58, 66, 0.8);    
  border-top: 2px solid lightslategrey;
}
#mediaInner {
  width: 100%;
}
#mediaCarousel {
  // width: calc((10 * 214px) + 6px);
  margin: 0 5px;
  padding: 0 5px;
}
.mediaThumbnail {
    display: inline-block;
    width: 200px;
    height: 100px;
    position: relative;
    top: 4px;
    // left: 10px;
    margin: 0 5px 0 5px;
    border: 1px solid grey;
    background: slategrey;
}
.mediaThumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mediaThumbnail:hover {
  border: 1px solid white;  
  cursor: pointer;
}
.mediaThumbnail:hover .mediaThumbLink {
  background: rgba(40, 40, 40, 0.8);  
  color: white;
}
.mediaThumbLink {
    // width: 100%;
    // height: 100%;
    // text-align: center;
    width: 100%;
    height: 2em;
    position: absolute;
    // top: calc(50% - 1em);
    bottom: 0px;
    padding: 5px;
    background: rgba(50, 50, 50, 0.6);    
    color: lightgrey;
    font-style: italic;
    font-size: 1.2em;
    overflow: hidden;
}
.mediaThumbLink .fa {
  font-size: 1.5em;
  margin-right: 10px;
  vertical-align: top;
}

#featuredContent {
  width: 100%;
  // width: calc(100% - 300px);
  // height: calc((100% - 7em)/4.5);
  height: 160px;
  position: absolute;
  // left: 150px;
  bottom: 110px;
  background: #333a42;
  opacity: 0.9;
  border-top: 2px solid lightslategrey;
  border-bottom: 1px solid lightslategrey;
  border-left: 1px solid lightslategrey;
  border-right: 1px solid lightslategrey;
    
}
#featuredContent .row {
  width: 100%;
  height: 100%;
}
.featurePanel {
    width: 100%;
    height: 100%;
    text-align: center;
    border-left: 1px solid lightslategrey;
    border-right: 1px solid lightslategray;
    padding: 0;
    color: lightgrey;
}
.featurePanelContent {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    text-align: left;
    padding: 10px;
    font-size: 1.25em;
    // position: absolute;
    // top: 20px;  
}
.featurePanelContent .featureHeader {
  font-size: 1.5em;
  font-style: italic;
  color: white;
  margin-bottom: 10px;
}

.featurePanelContent .featureStoriesTitle {
  font-size: 1.25em;
  font-style: italic;
  color: white;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 2px solid grey;
  /*border: 1px solid yellow;*/
}
.featurePanelContent .featureStoriesMapLayers {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid grey;
}
.featurePanelContent .featureStoriesContent {
  /*border: 1px solid cyan;*/
}


.featuresTable {
  // margin-top: 10px;
}
.featuresTable tr {
  margin-bottom: 5px;
}
.featuresTable tr:not(.featureLinkText):hover {
  background: dimgrey;
  color: white;
  text-decoration-line: underline;
  cursor: pointer;
}
.featuresTable td {
  vertical-align: top;
}
.featuresTable .featureLinkText td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.featuresTable .sectionHeader {
    font-size: 18px;
    font-style: italic;
    text-decoration: underline;  
}

.featureNewsEntry, .featureLinkEntry {
  
}
.featureNewsDate, .featureLinkType {
  width: 90px;
}
.featureNewsTitle, .featureLinkTitle {
  margin-bottom: 5px;
}

#lmeTabPanel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 400px;
  height: calc(100% - 130px);
  color: white;
  background: #222;
  opacity: 0.9;
}
#lmeTabPanelHeader {
    font-size: 1.6em;
    padding: 10px;
    border: 2px solid grey;
    border-bottom: 0;  
}
#lmeTabPanelContent {
  height: calc(100% - 135px);
  border: 1px solid grey;
  border-top: 0;
} 
#lmeTabPanelContent .tab-pane {
  height: calc(100% - 10px);
}
#buttonLmeInfoTabPanel .buttonRegular {
    width: 2.65em;
    height: 2.65em;
    z-index: 2;
    font-size: 1.6em;  
}

.statsTable .row {
  position: relative;
}

.lmeFactsLayerSwitch {
  position: absolute;
  right: 50px;
  top: 6px;
}



#featurePanelStats {
  color: white;
  font-size: 1.1em;
}
#featurePanelStats .row {
  padding: 5px;
  /*line-height: 1.25em;*/
}
#featurePanelStats .lmeFactsProp {
  width: 55%;
}
.statsTable {
  margin-bottom: 10px;
}

.lmeDescriptionPanel {
  padding: 0.5em;
  /*margin-top: 1.0em;*/
}

.featurePanelContent .btn {
  width: 80%;
  margin-left: 10%;
}