/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 28, 2022, 10:31:16 PM
    Author     : Karthikeyan
*/

.footer-legends {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 250px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    font-size: .6em;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.container-map {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.map-container {
    position: relative;
    width: 80%;
}

.map-image {
    /*min-width: 1600px;*/
    width: 100%;
    height: auto;
    z-index: -1000;
}

/* Styling for the white dots (markers) */
.marker {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: white;
    border: 2px solid #000;
    border-radius: 50%;
    cursor: pointer;
}

.marker::after {
    content: attr(data-info);
    position: absolute;
    top: -50px;
    left: 25px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    display: none;
    font-size: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    color: #333;
    width: max-content;
    max-width: 200px;
    z-index: 10;
    border: 1px solid #ddd;
    white-space: nowrap;
}

/* Display popup when hovering over the marker */
.marker:hover::after {
    display: block;
}

.info-container {
    width: 19.8%;
    padding: 5px;
    /*background-color: #f7f7f7;*/
    background-color: #262626;
    color:#ffffff;
    border-radius: 2px;    
}

.info-box {
    margin-bottom: 20px;
    font-size: 18px;
}

.info-box strong {
    font-size: 24px;
    color: #0008ff;
}


.map-image-container {
    /* Adjust the image's outer dimensions and position */
    display: inline-block;
    position: relative;
}

.map-image-container img {
    /* Slightly transparent edges */
    width: 100%;
    height: auto;
    box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.6);
    border-radius: 15px; /* optional rounded corners */
}

.map-image-container::before {
    /* Adds a gradient overlay to soften the border */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px; /* matches the image corners */
    background: linear-gradient(
        rgba(255, 255, 255, 0), 
        rgba(255, 255, 255, 0)
    );
    pointer-events: none; /* Allows interaction with the image */
}