body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  /* height:400px; */
}

.mapboxgl-ctrl-geocoder {
  width: 33.3333%;
  font-size: 15px;
  line-height: 20px;
  max-width: 360px;
  left: calc( 50% - 180px );
  top:10px;
}

.mapboxgl-ctrl-group button {
  margin-bottom: 0px;
}

.mapboxgl-ctrl-attrib-inner {
  text-align: right;
}

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

#toggle {
  color: "white";
  border-color: "black";
  cursor: pointer;
  display: block;
  border-radius: 5px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
  text-align: center;
  width: 60px;
  height: 60px;
}

.toggleMap {
  background-image: url("mapLogo.png");
}
.toggleAerial {
  background-image: url("aerialLogo.png");
}

.mapboxgl-popup {
  max-width: 400px;
  font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.attrib {
  /* if you want your custom attribution to look different add stuff here*/
  /* font-weight: bold; */
  /* color: red; */
}

#logo {
  /* change logo position or image size here */
  position: absolute;
  bottom: 30px;
  left: 10px;
  z-index: 2;
}

#logo img {
  width: 88px;
  height: 88px;
}

.mapboxgl-ctrl-geocoder--input {
  /* search box for address customization */
  height: 50px !important;
  padding: 11px 35px !important;
}

.mapboxgl-ctrl-geocoder--icon-search {
  /* search address icon */
  top: 14px !important;
}