#container {
    display: flex; /* Enables side-by-side layout */
    flex-direction: row; /* Horizontal alignment */
    width: 100%;
    min-height: 100%; /* Optional: Ensures it takes at least full content height */
}

#map-container {
    flex: 2; /* Map container takes 2/3 of the container */
    display: flex; /* Flexbox alignment */
    align-items: center; /* Centers map vertically */
    overflow: hidden; /* Ensures no content overflows */
}

#map-container svg {
    width: auto; /* Maintains aspect ratio */
    height: 100%; /* Fits the height of the container */
    max-width: 100%; /* Prevents overflow horizontally */
    max-height: 100%; /* Prevents overflow vertically */
}

#info-box {
    flex: 0 0 500px; /* Fixed width for the info-box */
    padding: 20px;
    border-left: 2px solid #ccc;
    box-sizing: border-box; /* Ensures padding doesn’t break layout */
    overflow-y: auto; /* Enables scrolling for long content */
}

.tooltip {
    position: absolute;
    background-color: #00008b; /* Blue background */
    color: white; /* White text */
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    pointer-events: none; /* Prevents interference with mouse */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}