#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:#EA2027;
}
.legend-bg-akses-2{
  background-color:#F79F1F;
}
.legend-bg-akses-3{
  background-color:#ffd32a;
}
.legend-bg-akses-4{
  background-color:#00af47;
}
.legend-bg-akses-5{
  background-color:#3498db;
}

.legend-bg-kabupaten-1{
  background-color:#6D6D6D;
}
.legend-bg-kabupaten-2{
  background-color:#2780CA;
}
.legend-bg-kabupaten-3{
  background-color:#CB283C;
}

.tab-container {
    display: flex;
    justify-content: space-between;
    width: 180px; /* Adjust as needed */
}

.grid-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 100px; /* Adjust spacing */
}