html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100%;
}

/* Style checkboxes in layer control with colors */
.leaflet-control-layers-overlays input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 5px;
}

.leaflet-control-layers-overlays label:nth-child(1) input[type="checkbox"]:checked {
    background-color: yellow;
    border-color: orange;
}

.leaflet-control-layers-overlays label:nth-child(2) input[type="checkbox"]:checked {
    background-color: blue;
    border-color: darkblue;
}

.leaflet-control-layers-overlays label:nth-child(3) input[type="checkbox"]:checked {
    background-color: green;
    border-color: darkgreen;
}

.leaflet-control-layers-overlays label:nth-child(4) input[type="checkbox"]:checked {
    background-color: purple;
    border-color: purple;
}

.leaflet-control-layers-overlays label:nth-child(5) input[type="checkbox"]:checked {
    background-color: orange;
    border-color: darkorange;
}