style.css

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
  overflow: hidden;
}

#map-display {
	width: 100%;
	height: calc(100% - 79px);
}

/* Main containers */
.header{
   -webkit-box-shadow: 0 5px 15px rgba(1,1,1,.7);  /* makes a grey shadow below the navbar */
   box-shadow: 0 5px 15px rgba(1,1,1,.7); 
}

.bodyContainer {
	height:100%;
	width: auto;  /* need to overwrite the width set by bootstrap */
}

.mapContainer {
  height: 100%; 
}


div#panel {
  position: absolute;
  top: 159px;
  padding-top: 8px;
  height: calc(100% - 101px);  
  width: 300px;
  background-color: #fafafa;
  opacity: 0.92;
  -webkit-transition: width 0.6s;
  transition: width 0.6s;
  z-index: 1;
}

/* Collapse buttons */
div#collapseBtnXs{
   position: absolute;
   bottom: 10px;
   left: 10px;
   z-index:2;
}

div#collapseBtnXs button {
  font-weight: bold;
}

div#collapseBtn {
  float:right;
  margin-top: 3px;
  margin-right: 3px;
  font-weight: bold;
}

div#collapseBtn button {
  font-weight: bold;
}


div#panelContent {
  opacity: 1;
  height: inherit;   /* better than height: 100% */
  width: 100%;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
  overflow-y: auto;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #00456b #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #00456b;
    border-radius: 0px;
    border: 0px solid #ffffff;
  }
/*
@media all and (max-width: 768px) {
  div#panel {
  	 width: 0px;
  	 }
  div#panelContent{
  	 opacity: 0;
  }
}
*/
/* OpenLayers controls */

.ol-zoom {
   right: 8px;
   top: 12px;
   left: auto;      /* needed to avoid the background-color of the ol zoom control spanning from the left side of the screen */
}

@media all and (max-width: 768px) {
  .ol-zoom {
     top: initial;   /* needed to clear the top property specified by OpenLayers */
     right: 8px;
     bottom: 6px;
     left: auto;   /* needed to avoid the background-color of the ol zoom control spanning from the left side of the screen */
   }
}

.ol-scale-line {
	right: 40px;
	left: auto;
}


/* Hamburger button */
.header button span{
   background-color: #23527c;
}

.navbar-collapse {
	background-color: #fff;
}