html, body, .body
{
    height: 100% ;
    overflow: hidden;
    margin: 0;
    padding:0;
    
    font-family: 'Lato', sans-serif;
}

img.calendar-icon{
    vertical-align: middle;
    height: 1.5em;
}

.hidden{
   display: none !important;
}


.clickable{
    cursor: pointer ;
}



div.map-container
{
    width: 100%;
    height: 100% ;
}

#map-belgium
{
    height: 100% ;
}


.leaflet-verticalcenter {
    position: absolute;
    top: 50%; /* possible because the placeholder's parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
    z-index: 1000;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

/*********************************************
 ************ OVERLAYS ***********************
 ********************************************/
div.overlays{
    position: absolute;
    top: 0;
    left:0;
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
    
    pointer-events: none; /* allow events to go down to leaflet map*/
}

div.dynamic-overlays{
    display: inline-block;
    position: relative;
    flex-grow: 1; /* fill all remaining width space */
    height: 100%;
    
    pointer-events: none; /* allow events to go down to leaflet map*/
}

div.modal-overlay{
    display: inline-block;
    z-index: 1024;
     
    width: 40%;
    height: 100%;
    position: relative;
    
    background: white;
    border-radius: 0px 15px 15px 0px;
    
    pointer-events: auto; /* catch events */
    transition: width 0.5s;
    
    overflow: auto;
}

@media only screen and (min-width: 1001px) and (max-width: 1200px) {
    div.modal-overlay{
        width: 60%;
    }
}

@media only screen and (max-width: 1000px) {
    div.modal-overlay{
        width: 100%;
        border-radius: 0;
    }
}


/**********************************************
 ****** CONTROLS-CONTAINER ********************
 *********************************************/

.controls-open-container{
    display: none;
}

@media only screen and (max-height: 600px),(max-width: 600px) {
    .controls-open-container{
        display: block;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        
        z-index: 1012;
        pointer-events: auto; /* catch events */
    }
}

.controls-container{
    display: inline-flex;
    max-height: 85%;
    overflow-y: hidden;
    overflow-x: hidden;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1002;
    pointer-events: auto; /* catch events */
    overflow-y: auto;
}

@media only screen and (max-height: 600px),(max-width: 600px) {
    .controls-container{
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        max-height: 100%; /* overrite default element */
        top: 0;
        right: 0;
        
        background: white;
        
        z-index: 1048;
    }
}

.controls-container-filler{
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
}

.controls-options-ctn{
    display: flex;
    flex-flow: column nowrap;
}

.controls-option-ctn{
    margin: 2px;
    background: white;
    padding: 2px;
    flex: 0 0 auto;
}

@media only screen and (max-height: 600px),(max-width: 600px) {
    .controls-option-ctn{
        display: block;
    }
}

#controls-option-harvest-ctn{
    flex-shrink: 1;
    overflow-y: auto;
}


.station-filters-container{
    display: inline-block;
    vertical-align: top;
}

@media only screen and (max-height: 600px),(max-width: 600px) {
    .station-filters-container{
        display: block;
    }
}

@media only screen and (max-height: 600px),(max-width: 600px) {
    .harvest-filters{
        width: 100%;
    }
    
    .harvest-filter-ctn{
        display: flex;
        flex-flow: row wrap ;
        justify-content: space-between;
    }
}

.parameter-details-ctn{
    margin-right: 0.5rem;
    margin-left: 2rem;
    
    padding-left: 1rem;
    padding-right: 1rem;
    
    border-radius: 1rem;
    border: 1px solid black ;
}

.parameter-details-ctn > div{
    display: flex;
    flex-flow: row;
    align-items: center ;
}

.parameter-details-list > div{
    display: block !important;
}

.intensity-label{
    padding-left: 1rem;
}




@media only screen and (max-height: 600px),(max-width: 600px) {
    .station-filters-items-container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.station-filter-item{
    width: 100%;
    white-space: nowrap;
}

@media only screen and (max-height: 600px),(max-width: 600px){
    .station-filter-item{
        width: auto;
        flex: 1 1 auto;
    }
}


.controls-control{
    display: none;
}

@media only screen and (max-height: 600px),(max-width: 600px){
    .controls-control{
        display: block;
        background-color: white;
        border-radius: 50%;
        border: 1px solid black;
        padding: 0.15rem;
    }
    
    .controls-control:hover{
        background-color: lightgray !important;
    }
    
    .controls-control:active{
      background-color: gray !important;
    }
}

.controls-control-icon{
    height: 30px;
    display:block;
    vertical-align: middle;
    
}





.controls-title{
    display: none;
}

.controls-ctn{
    display: inline-block;
    width: 55px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (max-height: 600px),(max-width: 600px){
    .controls-ctn{
        display: block;
        width: 100%;
    }
    
    .controls{
        margin: 2px;
        border: 1px solid black;
        background: white;
        padding: 2px;
    }
    
    .controls-title{
        display: block;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: bold;
    }
    
    .control-layers-container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}


.control-layer-container{
    border: solid 1px black;
    margin: 2px;
    background: white;
}

@media only screen and (max-height: 600px),(max-width: 600px){
    .control-layer-container{
        display: flex;
        flex: 1 1 auto;
    }
}

div.control-layer{
    width: 100%;
    display: inline-block;
    cursor: pointer;
    /*height: 50px ;*/
    
    text-align: center;
    font-size: 0.8rem;
    padding-bottom: 5px;
}

div.control-layer:hover{
    background: #a1daf8;
}

.layer-active{
    background: #ffcc00 !important;
}

img.icon-layer{
    max-width: 100%;
    max-height: 40px;
    
    display: block;
    margin: auto;
    padding-top: 2px;
    padding-bottom: 2px;
}

/*****************************************
 ******* SEARCH INPUT ********************
 ****************************************/
.search-location-container{
    display: inline-block;
    
    width: 20%;
    min-width: 200px;
    
    position: absolute;
    left: 0.5rem; 
    top: 0.5rem;
    z-index: 1002;
    pointer-events: auto; /* catch events */
}
@media screen and (max-width: 815px) {
    .search-location-container{
        left: 60px; /* 60px to be visible when the main wow menu collapse as hamburger menu */
    }
}

.location-input-container
{
    position: relative;
    width: 100%;
    height: 30px;
}

input.search_location{
    margin: 0;
    padding-left: 28px;
    width: 100%;
    height: 100%;
    
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

img.search_location_icon{
    position: absolute;
    bottom: 2px;
    left: 5px;
    width: 24px;
    height: 24px;
}

.location_suggestions{
    position: absolute;
        
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    
    background: white;
    
    z-index: 1025;
}

@media only screen and (max-height: 600px){
    .location_suggestions{
        max-height: 200px;
    }
}

div.location-suggestion-item
{
    border: 1px solid black;
    padding: 2px;
}

div.location-suggestion-item:hover{
    background-color: #a1daf8;
}

/***************************************************
 ****************** LOADING LOGO *******************
 **************************************************/
div.loading-logo-container{
    position: absolute;
    width: 100%;
    height: 100%;
    
    z-index: 1003;
    background-color: rgba(220,220,220, 0.33);
}

img.loading-logo{
    margin: auto;
    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/***************************************************
 *************** LEGEND ****************************
 **************************************************/
.legend-container{
    z-index: 1002;
    position: absolute;
    left: 20px;
    bottom: 5%;
    /*height: 200px;*/
    max-width: 200px;
}

@media only screen and (max-width: 1000px) {
    .legend-container{
        display: none;
    }
}

div.legend{
    display: inline-block;
    margin: 7px;
    max-height: 250px;
    background: white;
}

.legend-image{
    height: 100%;
}

div.html-legend-ctn{
    padding: 0.4rem;
    font-size: 11px;
}

div.html-legend-row{
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
    
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

/****************************************************
 ************ TIME CONTAINER ************************
 ***************************************************/
div.map-time-container{
    display: flex;
    justify-content: center;
    
    position: absolute;
    bottom: 2%;
    left: 12.5%;
    width: 75%;
    
    z-index: 1002;
    pointer-events: auto; /* catch events */
}

.slider-container{
    flex: 1 1 auto;
}

@media only screen and (max-width: 800px) {
    .slider-container{
        display: none;
    }
}

div.map-datepicker-container{
    flex: 0 0 auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

div.calendar-icon-container{
    display: inline-block;
    vertical-align: middle;
    background: white;
    border-radius: 5px;
}

/**********************************************************
 **************** MAP *************************************
 *********************************************************/
div.marker-popup-image{
    z-index: 1030;
    width: 540px;
    height: 395px;
}

div.marker-popup
{
    z-index: 1030;
    width: 550px ;
    max-height: 200px ;
}

div.marker-popup-content-image{
    width: 515px;
    height: 384px;
    margin: auto;
}

/*
img.photo{
    width: 515px;
    height: 384px;
    margin: auto;
}
*/

div.marker-popup-content{
    width: 530px ;
    height: 100% ;
}

h1.marker-popup-title{
    color: #009fe3 ;
    font-size: 1.1rem ;
    text-align: center ;
}

table.popup-obs-table{
    width: 100% ;
}

p.obs-timestamp{
    margin-left: 20px !important ;
    font-style: italic ;
}

td.obs-icon{
    /*width: 50px ;*/
    text-align: center ;
}

img.obs-icon
{
    width: 40px ;
    height: 40px ;
    margin: auto ;
}

td.obs-nb{
    text-align: center ;
    /*width: 50px ;*/
}

.ui-slider-horizontal.ui-slider-pips {
  margin-bottom: -0.6em !important;
}

#ui-datepicker-div
{
    z-index: 1200 !important;
}

input.picker-date{
    width: 10ch ;
}

input.picker-hour{
    width: 6.5ch;
}


.marker-harvest-single{
    display: flex;
    vertical-align: middle;
    border-radius: 50%;
}

.harvest-obs-recent{
    background: #77abb7;
}

.harvest-obs-old{
    background: darkgray;
}

.harvest-single-icon{
    height: 100%;
    width: 100%;
}

.harvest-popup-picture-ctn{
    width: 100%;
}

.harvest-popup-picture-ctn img{
    width: 100%;
}

.harvest-obs-picture::after{
    width: 25px;
    height: 20px;
    
    position: absolute;
    top: -8px;
    right: -12px;
    content: "";
    
    background-image: url('../images/harvest/photoIcon.png');
    background-size: 20px 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    
    opacity: 0.75;
    background-color: white;
    border-radius: 25%;
}

.marker-cluster-ctn{
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    
    display: flex !important;
    align-items: center !important;
    
    padding: 0.25rem !important;
    
    border-radius: 50% !important;
    border: 1px lightgray solid !important;
}

.marker-cluster-count{
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    
    background: #0e4f64 !important;
    color: white !important;
    
    padding: 0.15rem !important;
    border-radius: 1rem !important;
}

.marker-cluster-type-icon{
    width: 30px;
    height: 30px;
}

.harvest-popup-ctn{
    font-size: 0.75rem;
}

.harvest-popup-city-name{
    font-weight: bold;
    color: #009fe3;
}

.harvest-popup-timestamp{
    font-size: smaller;
    font-style: italic;
}

.harvest-popup-icon-ctn{
    float: left;
}

.harvest-popup-icon{
    margin: 0.33rem;
    border-radius: 0.25rem;
}

.harvest-popup-icon-img{
    height: 2rem;
}

.harvest-popup-description-ctn{
}

.harvest-popup-description{
    padding: 0.25rem;
}

.harvest-popup-type-title{
    font-weight: bold;
}

.harvest-image-fullres{
    max-height: 95vh;
    max-width: 80%;
}

.harvest-image-fullres > img {
  height: calc(85vh - 3em);
  object-fit: contain;
}

/*****************************
 **** Toast library fix ******
 ****************************/
.t-element{
    z-index: 1100 !important ;
}