body{
    margin: 0%;
    padding: 0%;
  }

  /* stle the map view */
    #map{
        width: 100%;
        height: 885px;
    }


  /* override bootstrap and jquery styles messing up with measure function fonts */
  .leaflet-control-measure-interaction h3 {
    font-size: 1em;
    font-weight: bold;
  }

  .leaflet-popup-content h3 {
    font-size: 1em;
    font-weight: bold;
  }


  /* style coordinate display and center it with translation along x axis */
  .map-coordinate{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(81, 120, 226);
    padding: 3px;
    border: 1px solid black;
    border-radius: 5px;
    color: white;
  }

  /* position and style fullscreen div/button  */
  .fullscreen{
    position: absolute;
    left: 10px;
    top: 130px;
    padding: 5px;
    background-color: white;
    border: 2px solid grey;
  }

   /* position and style home div/button  */

  .home {
    position: absolute;
    left: 10px;
    top: 175px;
    padding: 5px;
    background-color: white;
    border: 2px solid grey;
  }

  /* Style the error alert message box */
.alert {
  padding: 20px;
  color: black;
  margin-bottom: 1px;
  position: fixed;
  text-align: center;
  top: 80px;
  left:0%;
  width: 100%;
  z-index: 1000;

}