/* Map Canvas */
.map_canvas{
  height: 100vh;
  border:1px solid #999;
}
body {
  margin: 0;
}
/* ~~ Top Navigation Bar ~~ */
.navigation-container {
    width: 100%;
    height: 60px;
  }
.navigation-bar {
    background-color: #262262;
    height: 60px;
    width: 100%;
    border-spacing: 0;
  }
.logo {
    width:58px;
    padding: 10px 10px 10px 10px;
  }
/* Search Box */
#search {
position: absolute;
top: 70px;
left: 10px;
width: 500px;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
}
#search:focus {
  outline: 3px solid #80BDFF;
}
/* Legend style */
.map-legend {
    display: block;
    position:fixed;
    right:0;
    width: 50%;
    bottom:10px;
    padding:0px;
    width:500px;
    font-size:15px;
    font-family: 'Barlow', sans-serif;
  }
.legend {
   display:block;
   width:100%;
   max-width:100%;
   padding:0;
   margin-bottom:.5rem;
   font-size:1.5rem;
   font-weight: 40;
   font-family: 'Barlow', sans-serif;
  }
/* Colors for Legend */
.bg-planned {
    background-color: #77cc4b;
  }
.bg-inprogress {
    background-color: #00ffff;
  }
.bg-ready {
    background-color: #9933ff;
  }
/* Infowindow pictures */
.info{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60px;
  height: 60px;
  font-family: 'Barlow', sans-serif;
  font-size: 1.5rem;
}
/* Infowindow submit button */
.submit {
  background-color: #262262;
  border: none;
  color: #fdfdfd;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  width: 100%;
  border-radius:30px;
}
.submit:hover {background-color: #02EFFD;color: #262262;}

.infoTextH1{
  font-family: 'Barlow', sans-serif;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.infoTextH2{
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #9933ff;
  text-align: center;
}
.infoText{
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  text-align: center;
}
.infoAddress{
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}


/*Redirect */
 /* Dropdown Button */
 .dropbtn {
  background-color: #333366;
  color: white;
  padding: 16px 16px 16px 16px;
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  border: none;
  border-radius:30px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: 'Barlow', sans-serif;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: 'Barlow', sans-serif;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #5a5a8b;}