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

#map { 
   position: absolute;
   top: 0;
   left: 0;
   height: 100%; 
   width: 100%;
}

.legend {
   position: absolute;
   top: 70px;
   bottom: 30px;
   right: 10px;
   z-index: 99999;
   background: rgba(0, 0, 0, 0.5);
   padding: 30px;
   text-align: left;
   width: 200px;
   overflow-y: auto;
   color: white;
   font-family: Arial, sans-serif;
}

.legend-group {
   margin-bottom: 20px;
}

.legend-group-title {
   margin-top: 0;
   margin-bottom: 15px;
   color: white;
   font-size: 16px;
   text-align: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   padding-bottom: 10px;
   cursor: pointer;
   user-select: none;
}

.legend-markers-container {
   margin-top: 10px;
}

.legend-marker {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   padding: 5px;
   border-radius: 3px;
   transition: background-color 0.2s;
}

.legend-marker:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.legend-icon {
   width: 20px;
   height: 20px;
   margin-right: 10px;
}

.legend-text {
   font-size: 14px;
   color: white;
}

.leaflet-bottom.leaflet-right {
   display: none;
}

.leaflet-top.leaflet-right {
   z-index: 100000;
}