#mapid{
    width: 100%;
    height: 500px;
  }
  html, body {
    height: 100%;
    margin: 0;
  }
  #map {
    width: 100%;
    height: 500px;
  }
  
  .legend div {
    display: block;
    height: 13px;
    opacity: 1;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 15px;
  }
  
  .legend label {
    padding-left:25px;
    padding-right:20px;
    width: 130px;
    text-align: left !important;
    font-size: .7rem;
  }
  
  .leaflet-left .legend.leaflet-control{
    width: 130px;
  }
  
  #map { width: 100%; height: 500px; }
  .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,1); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 0px; } .info h4 { margin: 0 0 5px; color: #777; }
  .legend { text-align: left; line-height: 10px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
  
  
  .legend-bg-keberfungsian-1{
    background-color:#ffe189;
  }
  .legend-bg-keberfungsian-2{
    background-color:#FBBE01;
  }
  .legend-bg-keberfungsian-3{
    background-color:#FE8D00;
  }
  .legend-bg-keberfungsian-4{
    background-color:#ff5d00;
  }
  .legend-bg-keberfungsian-5{
    background-color:#00af47;
  }
  
  .legend-bg-akses-1{
    background-color:#A3E3FF;
  }
  .legend-bg-akses-2{
    background-color:#5EBCE4;
  }
  .legend-bg-akses-3{
    background-color:#1780AE;
  }
  .legend-bg-akses-4{
    background-color:#02587E;
  }
  .legend-bg-akses-5{
    background-color:#00af47;
  }
  
  .legend-bg-kabupaten-1{
    background-color:#6D6D6D;
  }
  .legend-bg-kabupaten-2{
    background-color:#2780CA;
  }
  .legend-bg-kabupaten-3{
    background-color:#CB283C;
  }