body {
   height: 100%;
   overflow: hidden; 
}

/*
#map {
     position: absolute;
     width: 100%;
     margin: 0;
     padding: 0;
}
*/

.content-container {
   height: calc(100% - 60px);
   min-height: calc(100% - 60px);
}

#map-reference {
   position: absolute;
   bottom:0px;
   left: 0px;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 2px;
   padding: 0px 5px 2px 5px;
}

.op-container {
   position: absolute;
   top:5px;
   right: 30px;
}

.op-label {
   color: white;   
   font-weight: bold;
   font-family: Arial;
   opacity: 0.7; 
}

#popover {
   position: absolute;
   top: 0px;
   left: 0px;
   width:100%;
   height:100%;   
   background: rgba(33, 33, 33, 0.6);
   visibility:hidden;
} 

#popover-container{
   position: relative;
   background: white;
   margin: 10% 30%;
   height: 60%;
   width: 50%;
   overflow-y: scroll;
}

#popover-content {
   padding: 10px;
   overflow-y:auto;
}

#popover-close {
   position:relativ;
   float: right;
   margin: 10px; 
   cursor: pointer;
   z-index: 102;
}

#time-slider-background {
   position: absolute;
   bottom: 50px;
   left: 2.5%;
   width: 95%;
   height: 8px;
   border-radius: 5px;
   background-color: white;
   pointer-events: none;
}

.time-slider {
   position:absolute;
   bottom: 47px;
   width: 15px;
   height: 15px;
   border-radius: 10px;
   background-color: #090F33;
}

#time-slider-body {
   position:absolute;
   bottom: 50px;
   height: 8px;
   background-color: #090F33;
   pointer-events: none;
}

.time-slider-text-top {
   position: absolute;
   bottom: 66px;
   color: #090F33;
   font-family: Arial;
   background: rgba(255, 255, 255, 0.6);
   border-radius: 5px;
   font-weight: 800;
}

.time-slider-text-bottom {
   position: absolute;
   bottom: 24px;
   color: #090F33;
   font-family: Arial;
   font-weight: 800;
   background: rgba(255, 255, 255, 0.6);
   border-radius: 5px;
}

@media only screen and (max-width: 800px) {
   #time-slider-background {
      height: 16px;
      left: 10%;
      width: 80%;
   }
   
   .time-slider {
      width: 30px;
      height: 30px;
      bottom: 43px;
   }
   
   #time-slider-body {
      height: 16px;
   }

   #popover-container{
      margin: 5% 10%;
      height: 90%;
      width: 80%;
   }
}

.map-control {
   position: absolute;   
   left: 50px;
   border: solid 3px rgba(255, 255, 255, 0.5);
   border-radius: 5px;
   cursor: pointer;
}

.map-control-text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
   color: white;
   font-weight: bold;
   opacity: 0.75;
   font-family: Arial;
   cursor: pointer;
}

.ol-control button {
   background-color:#090F33;
}

.ol-control button:hover {
   background-color:#292F63;
}

.context {
   position: absolute;
   width: 150px;
   height: 25px;
   background: white;
   padding: 5px;
   border-radius: 10px;
   font-family: Arial;
   cursor: pointer;
   transition: all .2s ease;
   text-align:center;
   line-height: 25px;
}

.context:hover {
   transform: scale(1.1); 
}

.markerList {
   text-align: left;
   font-family: Arial;
}

.markerList th {
   cursor: pointer;
   transition: all .2s ease;
}

.markerList th:hover {
   transform: scale(1.1) translate(10%);
}

.desc-h1 {
   font-family: Arial;
   margin-left: 15px; 
}

.desc-a {
   font-family: Arial;
   margin-left: 15px; 
}

.desc-p {
   font-family: Arial;
   margin-left: 15px; 
   text-align: justify;
}