body {
        margin: 0;
        padding: 0;
        font-family: "Open Sans", sans-serif;
        overflow:auto;
/*        overflow: hidden;*/
/*        overflow-y: auto;*/
}

@media (max-width: 900px) {
    html {
        font-size: 12px;
    }
}

@media (max-width: 700px) {
    html {
        font-size: 11px;
    }
}
@media (max-width: 500px) {
    html {
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    html {
        font-size: 9px;
    }
}


.Roboto-light {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: normal;
}

.Roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.Roboto-medium {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: normal;
}

.Roboto-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.Roboto-light-italic {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: italic;
}

.Roboto-regular-italic {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: italic;
}

.Roboto-medium-italic {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: italic;
}

.Roboto-bold-italic {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: italic;
}
#comparison-container{
  position: fixed;
/*  position: absolute;*/
    top: 0rem;
    right: 0;
    /*width: calc(100vw - 22rem);
    height: calc(100vh - 5rem);*/
    height: calc(100vh);
    width:100vw;
    z-index: 1;           
}
#map {
/*  pointer-events: none;*/
    position:fixed;
/*    position: absolute;*/
    top:0px !important;
    bottom:0;
    width:100%;
    height: 100vh;
/*    z-index: 2;*/
/*    background-color: #38526C;*/
}
#compareMap {
    pointer-events: none;
    position:fixed;
/*    position: absolute;*/
    top:0px !important;
    bottom:0;
    width:100%;
    height: 100vh;
/*    z-index: 1;*/
/*    background-color: #38526C;  */
    opacity:0;  
}
.mapboxgl-compare {    
/*    z-index: 1111 !important;*/
}

.mapboxgl-ctrl .mapboxgl-ctrl-attrib{
  user-select: none;
}



.menuLabel{
        font-family: "Roboto", serif;
        font-weight: 400;   
        font-size:1.25rem;        
/*        margin-top:0.5rem;*/
        color:#F2F2F2;
}

.menuSubLabel{     
        font-family: "Roboto", serif;
        font-weight: 300;   
        font-size:1rem;        
        margin-top:0.5rem;
        color:#FFFFFF;
        margin-left:0.25rem;
}
#mapControls{
        position: fixed;
        top: 1rem;
        left: 1rem;        
        z-index: 1000;
        background-color: #291F3C;
        padding: 1rem;
        border-radius: 0.5rem;
}
#mapControlsCompare{
      position: fixed;
        top: 1rem;
        right: 1rem;        
        z-index: 1000;
        background-color: #291F3C;
        padding: 1rem;
        border-radius: 0.5rem;
        display: none;

}
.selectMenu{
        width:15rem;
        margin-left:0.75rem !important;
}
.selectMenu option{
        font-style: 1rem !important;
}
.select2-selection__rendered{
/*  font-weight: bold;*/
/*  font-size: 1rem !important;*/
/*  margin: 1rem;*/
/*  padding: 1rem !important;*/
/*  padding: 0.25rem !important;*/
}
.select2-container .select2-selection--single{
  height: 1.75rem;
}

.hidden{
        display: none;
}
#compareButton{
  position: absolute;
  z-index: 100;
  width:150px;
  top:1rem;
  left:calc(50% - 75px);
}
#startStoryButton{
  position: fixed;
  z-index: 100;
  width:150px;
  bottom:1rem;
  left:calc(50% - 75px);
}
#downloadButton{
  position: fixed;
  z-index: 100;
  width:150px;
  bottom:1rem;
  right:1rem;
}
#exitStoryButton{
  position: fixed;
  z-index: 100;
  width:150px;
  bottom:1rem;
  left:calc(50% - 75px);
  display: none;
}
.mapboxgl-compare {
  background-color: #291F3C;
}
.mapboxgl-compare .compare-swiper-vertical{
  background-color: #291F3C; 

}
.mapboxgl-ctrl-attrib-inner{
  user-select: none;
}
.button{
  padding: 0.5rem;
  border-radius: 5px;
  background-color: #291F3C;
  color:white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

#analysisResultsCheck{
        margin-left: 1rem;
}


.blLegend{
  bottom:2rem;
  left:1rem;
  display: none;
}
.brLegend{
  bottom:2rem;
  right:1rem;
  display: none;
}
.mapLegend{
  position: fixed;
  z-index: 500;
  background-color: white;  
  border-radius: 1rem;
  width:auto;
  height:auto;  
  padding-bottom:1rem;
  border-radius: 0.25rem;  
  box-shadow: 0 0 5px #626262;
  background-color: #fff;            
}
.legendSubTitle{
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  margin-left: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color:#484848;
}
.legendLine{
  border-top: 1px solid #BEBEBE;
  margin: 0.5rem 1rem 0.5rem 1rem;
}
.legendTitle{
  font-family: "Poppins", sans-serif;
  font-weight: 500;  
  font-size: 1rem;
  width:auto;
  padding: 0.25rem;
  background-color:#002C00;
  color:#fff;
  text-align: center;
}
#legendTitleContent{
  display: inline-block;
}
.closeLegendBox{
  font-size:0.75rem;
  float:right;
  color:white;
  cursor:pointer;
/*  margin-right:0.5rem;  */
  margin-left:1rem;  
  margin-top:0.125rem;
  display: inline-block;
}
.analysisLegendContent{
  padding-top: 0.25rem;
  margin-right: 0.25rem;
}
.legendGradient{
  height:6rem;
  width:2rem;
  display: inline-block;
  margin-left: 1rem;
}
.gradientLabelHolder{
  height:6.5rem;  
  width:2.5rem;
  display: inline-block;
  position: relative;
/*  margin-left: 1rem;*/
  
}
.legendGradientLabelTop{  
  position: absolute;
  top:0.5rem;
  left:0px;  
}
.legendGradientLabelBottom{ 
position: absolute; 
  bottom:0rem;
  left:0px;  
}
.legendBox{
  height:0.75rem;
  width:0.75rem;
  display: inline-block; 
  margin-left:0.5rem;   
  margin-bottom:0.25rem;
  border: 0.5px solid #888888;
}
.legendGradient{
  height:2rem;
  width:12rem;
  margin-left:0.5rem;
  margin-right:0.5rem;
/*  display: inline-block;*/
/*  margin-left: 1rem;*/
}
.gradientLabelHolder{
  height:2rem;  
  width:12rem;  
  margin-left:0.5rem;
  margin-right:0.5rem;
}
.left{
  float:left;
}
.right{
  float:right;
}

.legendBoxLabel{
  height: 1.25rem;  
  vertical-align: middle;
  display: inline-block;  
  line-height: 0.5rem;
}
.legendItemLabel{
  color:#000;
}

#slideIndicator{
  position: fixed;
  z-index: 2;
  top:5px;
  left:0px;
  width:100%;
  height: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  opacity: 0;
}

#slideIndicatorBox{
  padding: 1rem;
  background-color: #291F3C;
  width: auto;
  border-radius: 10px;
}
#backButton{
/*  float: left;*/
  display: inline-block;
  color:white;
  cursor: pointer;
  margin-left: 1rem;
  margin-right: 1rem;
}
#forwardButton{
/*  float: right;*/
  display: inline-block;
  color:white;
  cursor: pointer;
  margin-left: 1rem;
  margin-right: 1rem;
}
#indicatorText{
  color:white;
}


/*<div id='slideIndicator'>
        <div id='slideIndicatorBox'>
            <div id='backButton' class='btn'>
                <i class="fa-solid fa-arrow-left"></i>                
            </div>            
            <span id='indicatorText'>Slide 1 of 15</span>
            <div id='forwardButton' class='btn'>
                <i class="fa-solid fa-arrow-right"></i>
            </div>            
        </div>
    </div>*/


#welcomeModal {
    
}
#msgModal{
  /* display: none; */
}

.modalHolder{
  position: fixed;
    z-index: 5000;
    background-color: rgba(0, 0, 0, 0.45);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    /* display: none; */

}

.welcomeWindow{
    position: absolute;
    padding: 1rem;
    width: auto;
    max-width: 70rem;
    padding: 1rem;
    background-color: white;
    width: auto;
    height: auto;
    top: 4rem;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, .4);
    border-radius: 5px;
}

#footerLogos{
    width:100%;
    height: auto;
}

@media (max-width: 800px) {
    #welcomeWindow {
        max-width: 90%;
    }
}

#welcomeTitle {
    font-size: 1.5rem;
}

#welcomeLogo {
    height: 6rem;
    width: auto;
}
.modalCloseButton{
    width:20rem;
    margin-left: calc(50% - 10rem);
     /*margin-left: 17vw;*/
}
#welcomeSubtitle {
    font-size: 1rem;
    font-family: 'Merriweather', serif;
    color: black;
    /*letter-spacing: 0.1rem;*/
    user-select: none;
}

.welcomeContent {
    font-size: 0.7rem;
    user-select: none;
    color: black;
}

#welcomeButtonHolder {
    width: 100%;
    height: auto;
    line-height: 1.5rem;
    text-align: center;
}

.welcomeButton {
    margin: 0.5rem;
    display: inline-block;
}