/* Website design custom CSS */

* {
  font-family: 'Montserrat', sans-serif;
}

/* Header text */
h1 {
  color: #e7e7e7;
}

body {
  background-color: #212222;
}

#map { height: 600px;
        position: relative; }

.navbar-dark {
  background-color: rgba(0,41.6,23.1,.85);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
}

.jumbotron {
  background-color: rgba(0,41.6,23.1,.1);
}

.navbar-dark .navbar-nav .active .nav-link {
  color: #fff233;
  text-shadow: 2px 2px 3px #000;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
  text-shadow: 2px 2px 3px #000;
}

.navbar-dark .navbar-brand {
  color: #e65514;
  font-weight: 900;
  font-size: 2rem;
  text-shadow: 2px 2px 2px #000;
}

.legend {
    background: rgba(246,248,247,.7);
    border: 5px solid rgba(0,41.6,23.1,1);
    top: 90px;
    left: 75px;
    padding: 15px;
    position: absolute;
    width: 17%;
    z-index: 5000;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .7);
    border-radius: 4px;
    text-align: center;
}

.legend-main {
    top: 210px;
    text-align: left;
}

.leaflet-menu{
  background-color: rgba(246,248,247,.7);
  border: 5px solid rgba(0,41.6,23.1,1);
  padding: 15px;
  position: absolute;
  width: 17%;
  z-index: 5000;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .7);
  border-radius: 4px;
}

/* Custom scroll bar
.ss-scroll {
  width: 12px;
  z-index: 9999;
  background: rgba(0,41.6,23.1,.7);

} */

#logo {
   position:absolute;z-index:10; top:2px;right:2px;
}

.leaflet-bar a, .leaflet-bar a:hover{
  background-color: #fff233;
  border-bottom: 1px solid #000;
}

/* Control items (zoom, scalebar) are yellow */
.leaflet-control {
  background-color: #fff233;
}

.body-text {
  color: #fff;
  background-color: rgba(0,41.6,23.1,1);
  border-radius: 14px;
  padding: 12px;
}

/* b {
  color: #fff233;
} */

.circle {
  background: rgba(0, 0, 0, .5); /* color of the circle */
  border-radius: 50%; /* make the div a circular shape */
  box-shadow: 4px 4px 3px grey; /* see http://www.w3schools.com/css/css3_shadows.asp */
  -moz-box-shadow: 4px 4px 3px grey;
  -webkit-box-shadow: 4px 4px 3px grey;
}

.leaflet-control-minimap {
    border: rgba(0, 0, 0, 1) solid;
    border-radius: 3px;
    background: #f8f8f9;
    transition: all .6s
}


.labelClass{
line-height: 9pt;
color: #272727;
font-weight: 600;
-webkit-text-fill-color: #272727; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 0.2px;
-webkit-text-stroke-color: white;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fff999;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  font-size: 18px;
  overflow: auto; /* Enable scroll if needed */
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button */
.close {
 color: #000;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.close:hover,
.close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

.icons > ul {
  font-size: 38px;
  text-align: center;
}

.icons {
  width: 100%;
  height: 100%;
  text-align: center;
}

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: 100%;
}