@charset "UTF-8";
/* CSS Document */

:root {
         --banner_height: 100px;
         --left_menu_width: 230px;
         --horizontal_menu_bar_height: 100px;
        }
 
/*===================================================================================================
  Common to all media viewport sizes
 =================================================================================================== */

    .material-icons.md-36 { font-size: 36px; }
    .material-icons.md-light { color: rgba(180, 180, 180, 1); }

    .tip {
        font-size: 10px;
        color: grey;
    }
    .tip2 {
            font-size: 10px;
            color: grey;
        }


      /* required to allow width sizing of dropdown menu items */
      .dropdown-menu {
        min-width:inherit;
         background-color: rgb(238,238,238);
      }

      /* style of hover over of dropdown items */
      .dropdown-menu > a:hover {
         background-color: white;
         /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);*/
      }

      /* style of current active dropdown item */
      .dropdown-menu>.active{
          background-color: rgb(208,208,208);
          color: black;
       }

     /*---------------------------------*/     
     /* class to style dropdown buttons */
     /*---------------------------------*/
      .ct_dropdown_button {
           background-color: gainsboro;
          font-family: Lato;
          color: black;
          font-size: 15px;
          border: 1px solid rgb(12,3,51); 
      }
      .ct_dropdown_button:hover {
           background-color: darkgrey;
          font-family: Lato;
          color: black;
          font-size: 15px;
          border: 1px solid rgb(12,3,51); 
      }

      .ct_dropdown_button:focus {
           background-color: white;
          font-family: Lato;
          color: black;
          font-size: 15px;
          border: 1px solid rgb(12,3,51); 
      }

     /* background rectangle of month/year arrow button */
	  .arrow_button {  
          /* Center the content */
        align-items: center;
        justify-content: center;

        /* Spacing */
          padding: 8px;
        float:left;
        background-color: rgb(238, 238, 238); /* color of background rect behind arrow*/
          border: 0px;
      }
      
      .arrow_button_left {      
        border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent; /* sets color of arrow */
        border-style: solid;
        border-width: 11px 11px 11px 0px;

        /* Size */
        height: 0px;
        width: 0px;
      }
      
      .arrow_button_right {      
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.5); /* sets color of arrow */
        border-style: solid;
        border-width: 11px 0px 11px 11px;

        /* Size */
        height: 0px;
        width: 0px;
      }

    .arrow_button_right_disabled {      
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.1); /* sets color of arrow */
        border-style: solid;
        border-width: 11px 0px 11px 11px;

        /* Size */
        height: 0px;
        width: 0px;
      }


    .arrow_button_left_disabled {
        border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent; /* sets color of arrow */
        border-style: solid;
        border-width: 11px 11px 11px 0px;

        /* Size */
        height: 0px;
        width: 0px;
    }
 
/*===================================================================================================
  Desktop viewport > 768px
 =================================================================================================== */

@media screen and (min-width:768px){
    
    .tip2 {
        display: none;
    }
    
    #map_stats_form {
        font-size: 14px;
        margin-left: 20px;
        margin-bottom: 10px;
    }
   
   .class_left_side_div {
      position: absolute;
      left: 0px;
      width: 230px;
      background-image: none;
      background-color: rgb(238, 238, 238);
      border-image-source: none;
      border-image-width: 1;
      border-image-outset: 0;
      border-image-repeat: stretch;
      border-color: transparent;
      top: var(--banner_height);
      height: 350vh;
	  display: block;
    }

   #new_in_baseline_text {
      float:  left;
      text-align: left;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 5px;
      margin-bottom: 5px;
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;

      font-family: Lato;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background-color: rgb(29, 8, 121);
   }
   #new_in_baseline_text a:hover {
        color: white;
   }
	
    #version_text {
      float:  left; 
      text-align: left;
      padding-left: 10px;
        padding-right: 10px;
      padding-top: 10px;

      font-family: Lato;
      text-align: center;
      font-size: 14px;
      }

     .release_text {
      float:  left;
      color: red;
      text-align: left;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 0px;
      padding-bottom: 10px;

      font-family: Lato;
      text-align: center;
      font-size: 12px;
      }
	
     /* ----------This should be same width --------------------*/ 
    .parameter_buttons_div {
        clear: both;
          padding-top: 10px;
          width: var(--left_menu_width);
          background-image: none;
          background-color: rgb(238, 238, 238);
          height: 100%;
      }
      
    #theme_text {
      float:  left; 
      text-align: left;
      padding-left: 10px;
      padding-top: 44px;

      font-family: Lato;
      text-align: center;
      font-size: 14px;
      }
    
    .report-symbol {
          position: relative;
          top: 36px;
          float: left;
          text-align: center;
          margin-right: 0px;
          margin-left: 0px;
        padding-left: 10px;
     }
   
      #map_area_txt {
          position: absolute;
          top: 44px;
          float: left;
          text-align: center;
          margin-right: 0px;
          margin-left: 0px;
      }
      
      #month_txt {
          position: relative;
          top: 44px;
          float: left;
          text-align: center;
          margin-right: 0px;
          margin-left: 130px;

      }
        
      #baseline_txt {
          position: relative;
          top: 40px;
          float: left;
          text-align: center;
          margin-right: 15px;
          margin-left: 20px;

      }
      
    .class_hr_rounded {
        /*clear: both;*/
         width: 90%;
         margin-top: 15px;
         float: left;
        border-top: 1px solid #CECECE;
         /*border-top: 3px solid #bbb;*/
         /*border-radius: 2px; */
      }
      
    #below_availability_hr {
         margin-top: 5px;
         float: left;
         border-top: 3px solid #bbb;
         border-radius: 2px;         
    }
      
    #but_availability {
        margin-top: 0px;
        margin-bottom: 10px;

    }
    
    .all-text {
       font-family: Lato;
      text-align: center;
      font-size: 10px;
      text-align: left; 
    }
       
    .parameter_text {
      float: left;
      padding-left: 10px;
      padding-bottom: 20px;
      font-family: Lato;
      text-align: center;
      font-size: 11px;
      text-align: left;
    }
    
    .additional_parameter_text {
      padding-bottom: 0px;
    }
      
      
    /* Parameter buttons styles */  
    .class_btn {
         width: 170px;
          border-radius: 4px;
		  height: 30px;
          border: 1;
          margin-bottom: 6px;
          margin-top: 6px;
          margin-left: 20px;
          margin-right: 5px;
          border-color: rgb(190,190,190);
          background-color: whitesmoke;
          text-decoration: none;
          font-family: Lato;
          font-size: 16px;
    }
      
    
      /* Add a background color on hover */
      .class_btn:hover {
        background-color: gainsboro;
        color: black;
        text-decoration:none;
      }
      
      .class_btn a {
          color: black;
          text-decoration:none;
      }
      .class_btn:active {
          background-color: lightgrey;
      }
      .class_btn:focus {
          background-color: lightgrey;
      }
      
      .class_btn_selected {
          background-color: lightgrey;
          position: relative;
      }
      
    
      
    /* ----------Top horizontal grey  div for Areas etc --------------------*/

      .class_horizontal_menu_div {
      position: absolute;
      display: table;
      left: var(--left_menu_width);
      top: var(--banner_height);
      height: var(--horizontal_menu_bar_height);
      background-image: none;
      background-color: rgb(238, 238, 238);
      border-style: ridge;
      border-image-source: none;
      border-image-width: 1;
      border-image-outset: 0;
      border-image-repeat: stretch;
      border-color: transparent;
      border-width: 0px;
      width: calc(100% - 230px);
    }
      
      #theme_dropdown {
          position: relative;
          float: left;
          left: 10px;
          margin-top: 35px;
          margin-bottom: 0px;

          background-color: aquamarine;
      }
    
      #area_dropdown {
          position: relative;
          float: left;
          left: 82px;
          top: 35px;
          background-color: aquamarine;
      }
	
	#param_dropdown_mobile {
		display: none;
	}
      
      #month_dropdown {
          position: relative;
          float: left;
          left: 0px;
          top: 35px;
          background-color: rgb(238, 238, 238);
      }
      
      #year_dropdown {
          position: relative;
          float: left;
          left: 0px;
          top: 35px;
          background-color: rgb(238, 238, 238);
      }

      #baseline_dropdown {
          position: relative;
          float: left;
          left: 0px;
          top: 35px;
          background-color: rgb(238, 238, 238);
      }
    
      #version_dropdown {
          position: relative;
          float: left;
          left: 0px;
          top: 0px;
          background-color: rgb(238, 238, 238);
          padding-bottom: 10px;
          padding-top: 10px;

      }
    /* If the screen size is 968px wide or less, hide the element */
    @media only screen and (max-width: 968px) {
        #baseline_dropdown {
            display: none;
        }
        #baseline_txt {
            display: none;
        }
    }
      
    
      
    /* ----------Curved corner elements --------------------*/
    
      .class_curved_corner {
      position: absolute;
      left: var(--left_menu_width);
      top: calc(var(--banner_height) + var(--horizontal_menu_bar_height));
      width: 18px;
      height: 18px;
      
      background-color: rgb(238, 238, 238);
    }
      .class_curved_corner2 {
      position: absolute;
      left: var(--left_menu_width);
      top: calc(var(--banner_height) + var(--horizontal_menu_bar_height));
      width: 18px;
      height: 18px;
      
      background-color: rgb(255, 255, 255);
      border-top-left-radius: 10px;
    }
      
      .class_info_icon {
          position: absolute;
          display: inline-block;
      } 
      
      .class_image_div {
          position: absolute;
          left: calc(var(--left_menu_width) + 10px );
          top: calc(var(--banner_height) + var(--horizontal_menu_bar_height) + 10px );
          width: calc(100% - 240px);
          height: 100%;
          /*background-color: lightgrey;*/
          border: 0px;
          border-style: outset;
          /*border-color: darkgrey;*/
      }
    
    #tsDiv {
        width=calc(100% - 240px);            
        height: 400px;
    }
    
    .my-container {
        font-family: Lato;
        color: black;
        font-size: 16px; 
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
    }
    
    .my-container2 {
        font-family: Lato;
        color: black;
        font-size: 14px; 
        padding-top: 20px;
        padding-bottom: 0px;
        padding-left: 10px;
    }
    .my-container2 a {
        
        color: blue;
        
    }
    
    .my-container3 {
        padding-top: 0px;
    }
    
    .anchor_links0 {
        position: relative;
        width: auto !important;
        display: inline-block;
    }
    .anchor_links {
        position: relative;
        top: 30px;
        width: auto !important;
        display: inline-block;
    }
    .w3-selected {color:#fff !important;background-color:darkgrey !important}
    
    #statsDiv {
        width=calc(100% - 240px);            
        height: 400px;
        position: relative;
        top: 30px;
    }
    
    
    #my_img {
        max-width: 100%;
        height: auto;
    }
      
      
	#area_dropdown_mobile {
		display: none;
	}
      

    /* Style of parameter popover help*/
    .popover {
        max-width: 50%;
    }
	
	 .mobile_txt {
		display: none;
	 }
	 
    #test {
        position: absolute;
        top: 500px;
        left: 500px;
        float: left;
        z-index: 10;
    }
    
    #between_availability_forms_break {
         display: none;
     }
    
    #image_controls {
        position: relative;
        float: right;
        top: -10px;
        height: 30px;
        width: 200px;
        background-color: rgb(238, 238, 238);
        border-radius: 0 0 0 35px;
        border-color: red;
        border-top: 1px solid rgb(218, 218, 218);
    }

    .inline_form {
        display: inline;
    }

    .hide {
        display: none;
    }

    #hillshade_form {
        position: relative;
        float: right;
        margin-top: 5px;
        margin-right: 5px;
    }
    .slide_switch_txt {
        font-size: 12px;
    }

    /* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 20px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #5C5C96;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #5C5C96;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 16px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

    #hillshade_controls {
        position: relative;
        float: left;
        top: -10px;
        height: 30px;
        width: 200px;
        padding-left: 30px;        
    }
    
    #availability_controls {
        position: relative;
        float: right;
        top: -10px;
        height: 30px;
        width: 250px;
        background-color: rgb(238, 238, 238);
        border-radius: 0 0 0 35px;
        border-color: red;
        border-top: 1px solid rgb(218, 218, 218);
    }

} /* end of media min-width 768 */


/*=====================================================
  Sizes up to 920px
 =====================================================*/

 @media screen and (max-width:920px){
    #map_area_txt {
            display: none;
        }
     
     #area_dropdown {
          position: relative;
          float: left;
          left: 0px;
          top: 35px;
          background-color: aquamarine;
      }
     #month_txt {
          display: none;
          margin-left: 50px;

      }
     
     #month_dropdown {
          
          left: 30px;
         position: relative;
          float: left;
          
          background-color: rgb(238, 238, 238);
          
      }
     #year_dropdown {
          position: relative;
          float: left;
          left: 24px;
          
          background-color: rgb(238, 238, 238);
      }
     
     #between_availability_forms_break {
         display: inline;
     }
     
     .report-symbol {
          
        padding-left: 25px;
     }
        
}


/*=====================================================
  Mobile sizes up to 768px
 =====================================================*/

 @media screen and (max-width:767px){
     
     .tip {
        display: none;
    }
     
	 .class_left_side_div {
		 display:  none;
	 }
	 
	 .class_horizontal_menu_div {
      position: absolute;
      display: block;
      left: 0px;
      top: 80px;
      height: 120px;
	 
      background-image: none;
      background-color: rgb(238, 238, 238);
      border-style: ridge;
      border-image-source: none;
      border-image-width: 1;
      border-image-outset: 0;
      border-image-repeat: stretch;
      border-color: transparent;
      border-width: 0px;
      width: 100%;
    }
	 
	 .mobile_txt {
		 font-size: 10px;
		 margin-right: 10px;
		 text-align: center;
		 margin-top: auto;
		 margin-bottom: auto;
	 }
	 
	
	 
	  #area_dropdown {
		 display: none;
      }
	 
	 
	 #area_flex_container {
		 
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 height: 60px;
		 
	 }
	 
	 #area_dropdown_mobile {
		 
         margin-right: 20px;
		 
		 
      }
	 
	 #param_dropdown_mobile {
         
      }
	
	  #date_flex_container {
		display: flex;
		 justify-content: center;
		 align-items: center;
		 height: 60px;
	 }
      
      #month_dropdown {
         /* position: relative;
          float: right;
          left: 0px;
          top: 25px;*/
          background-color: rgb(238, 238, 238);
		  order: 1;
		  
		  
      }
      
      #year_dropdown {
         /* position: relative;
          float: right;
          left: 0px;
          top: 25px;*/
          background-color: rgb(238, 238, 238);
		  order: 2;
		  
		  
      }
	 
	 
	 
	 .ct_dropdown_button {
          font-size: 12px;
		 height: 30px;
      }
      .ct_dropdown_button:hover {
          font-size: 12px;
      }

      .ct_dropdown_button:focus {
          font-size: 12px;
      }
	
	 #baseline_dropdown {
		 display: none;
	}
	
	 #baseline_txt {
            display: none;
        }
     
     #version_dropdown {
		 display: none;
	}
	
	 #version_txt {
            display: none;
        }
	 #month_txt {
            display: none;
        }
	 
	 #map_area_txt {
            display: none;
        }
     
    .class_image_div {
          position: absolute;
          left: 0px;
          top: 200px;
          width: 100%;
          height: 100%;
          /*background-color: lightgrey;*/
          border: 0px;
          border-style: outset;
          /*border-color: darkgrey;*/
     }
     #image_controls {
        position: relative;
        float: right;
        top: 0px;
        height: 30px;
        width: 230px;
        background-color: rgb(238, 238, 238);
        border-radius: 0 0 0 35px;
        border-color: red;
        border-top: 1px solid rgb(218, 218, 218);
    }
     
    #map_stats_form {
        font-size: 14px;
        margin-left: 20px;
        margin-bottom: 10px;
    }
     
     .my-container {
        font-family: Lato;
        color: black;
        font-size: 16px; 
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
    }
    
    .my-container2 {
        font-family: Lato;
        color: black;
        font-size: 14px; 
        padding-top: 20px;
        padding-bottom: 0px;
        padding-left: 10px;
    }
    .my-container2 a {
        
        color: blue;
        
    }
    
    .my-container3 {
        padding-top: 0px;
    }
     
     .anchor_links0 {
        position: relative;
        width: auto !important;
        display: inline-block;
    }
    .anchor_links {
        position: relative;
        top: 30px;
        width: auto !important;
        display: inline-block;
    }
    .w3-selected {color:#fff !important;background-color:darkgrey !important}
    
     #availability_controls {
        position: relative;
        float: right;
        top: 0px;
        height: 30px;
        width: 250px;
        background-color: rgb(238, 238, 238);
        border-radius: 0 0 0 35px;
        border-color: red;
        border-top: 1px solid rgb(218, 218, 218);
    }
     
    #statsDiv {
        height: 300px;
    }
    
     #tsDiv {
        height: 300px;
    }
     
     #stats_flag_Div {
         height: 300px;
     }

    
} /* @media screen and (max-width:767px){ */