.map { width: 100%; height: 95vh; }

.ol-popup {
position: absolute; background-color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px; border-radius: 10px; border: 1px solid #cccccc;
bottom: 12px; left: -50px; min-width: 250px;
}
.ol-popup:after, .ol-popup:before {
top: 100%; border: solid transparent; content: " "; height: 0; width: 0;
position: absolute; pointer-events: none;
}
.ol-popup:after  { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; }
.ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; }
.ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; }
.ol-popup-closer:after { content: "✖"; }

.legenda {
z-index: 1000; background: white; border-radius: 4px; padding: 8px;
position: absolute; left: 10px; bottom: 20px; border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0,0,0,0.2); font-family: Arial, sans-serif;
}

.selettore {
z-index: 1000; background: white; border-radius: 4px; padding: 10px;
position: absolute; left: 60px; top: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.bw { filter: grayscale(100%); }