body {
    display: flex;
    justify-content: space-between;
    overflow-y: hidden; 
    overflow-x: hidden; 
}

#location-list, #destination-list {
    z-index: 1000; 
}
#top-container {
    margin-bottom: 0;
    z-index: 1001;
}
.from-hover-area, .to-hover-area {
    top: 125px;
    width: 80px;
    height: 560px;
    position: absolute;
    z-index: 1000;
}
#from-controls-container.drawing, #to-controls-container.drawing {
    opacity: 1 !important;
}
#from-controls-container:hover, #to-controls-container:hover {
    opacity: 1;
}
.from-hover-area:hover ~ #from-controls-container, .to-hover-area:hover ~ #to-controls-container {
    opacity: 1;
}

#from-controls-container, #to-controls-container {
    opacity: 0;
    top: 80px;
    position: relative;
    z-index: 1001; 
    transition: opacity 0.3s;
}
.leaflet-pm-actions-container {
    opacity: 1;
}
#from-controls-container {
    left: 0;
}

#to-controls-container {
    right: 0;
}
.leaflet-container {
	font-family: "Quicksand", sans-serif;
}
.button-container .leaflet-pm-actions-container .leaflet-pm-action {
    font-size: 10px;
}
.pm-textarea {
    font-family: "Quicksand", sans-serif;
}
.leaflet-interactive {
    stroke: #e14d20;
    stroke-width: 1px;
    fill: #f88a4b;
    fill-opacity: 0.4;
}
.leaflet-marker-icon .marker-icon .leaflet-zoom-animated .leaflet-interactive {
    border: 1px solid #e14d20;
}
#zoning {
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; 
    height: 560px;
    width: 100%;
    margin: 0 auto; 
    gap: 5px; 
    width: 100%;
}

#from-container, #to-container {
    height: 100%;
    margin: 0;
    padding: 10px;
    flex: 1; 
}
#map-from, #map-to {
    height: 100%; 
    width: 100%;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
}

#search-form {
    z-index: 1000; 
    margin-top: 10px;
    margin-bottom: -5px;
}