#map { 
height: 800px; 
width:100%; 
cursor: pointer;
z-index: 9;
position: absolute;
background-color: white;
}
.info {
    color:#555;
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(255,255,255,1);
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,0.9);

}
.info h4 {
    margin: 0 0 5px;
    color: #000;
}

body {
  width: 100%;
}

#circ {
  float: right;
  margin-top: 20px; 
  margin-right: 150px;
}

#circ1 {
  float: right;
  margin-top: 12px; 
  margin-right: 150px;
}

#circ2 {
  float: right;
  margin-top: 2px; 
  margin-right: 150px;
}
#circ3 {
  float: right;
  margin-top: 1px; 
  margin-right: 150px;
}
.my-legend {
  z-index:99;
  position: absolute;
  margin-top: 360px;
  margin-left: 60%;
  width: 260px;
  background: rgba(255,255,255,0.9);
      padding: 16px 18px;
border-radius: 10px;

}

.leaflet-control-layers-base {
  font-size: 15px;
}

.legend-title {
    text-align: left;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 90%;
    line-height: 14px;
}
.legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
}
.legend-scale ul li {
    font-size: 80%;
    list-style: none;
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 2px;
}
ul.legend-labels li span {
    display: block;
    float: left;
    height: 16px;
    width: 30px;
    margin-right: 5px;
    margin-left: 0;
    border: 1px solid #999;
}
.legend-source {
    font-size: 70%;
    line-height: 14px;
    color: #999;
    clear: both;
}