* {
    /* Typo */
    font-family: 'Roboto', sans-serif;


}

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

}

#container {
    display: flex;
}

#map {
    height: 600px;
    width: 70%;
}

#locationDetailsDashboard {
    /* width: 30%; */
    padding: 20px;
    overflow-y: auto;
}



/* Base table styling */
#locationInfos {
    width: 100%;
    /* Full-width table */
    border-collapse: collapse;
    /* No space between table cells */
    background-color: #fafafa;
    /* Subtle background */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
    border-radius: 8px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensures the border-radius is applied to the table */
}

/* Table header styling */
#locationInfos th {
    background-color: #0a0ac1;
    /* Deep, modern header color */
    color: white;
    /* Contrast color for the header text */
    padding: 12px;
    /* Comfortable padding */
    text-align: left;
    /* Aligning text to the left */
}

/* Table row and cell styling */
#locationInfos td {
    padding: 12px;
    /* Consistent cell padding */
    border-top: 1px solid #ddd;
    /* Subtle row separator */
}

#locationInfos tr:hover {
    background-color: #f0f0f0;
    /* Lighten the background color on hover */
}

/* Link styling in table */
#locationInfos a {
    color: #0077b6;
    /* Eye-catching link color */
    text-decoration: none;
    /* No underline for a clean look */
    transition: color 0.3s;
    /* Smooth color transition for hover effect */
}

#locationInfos a:hover {
    color: #023e8a;
    /* Darken color on hover */
}


#legende ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    /* Modern spacing approach */
    padding: 24px;
    /* Adjust padding as needed */
    background-color: #fafafa;
    /* Subtle background */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

#legende ul li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #0a0ac1;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

nav a:hover {
    background-color: #f0f0f0;
}

main {
    padding: 20px;
}



/* media query smartphone */

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 5px;
    }
    #container {
        display: flex;
    }
    
    #map {
        height: 600px;
        width: 100%;
    }
    #locationDetailsDashboard{
        display:none;
    }
    
    
}

#searchBar {
    display: flex; /* Makes the search bar a container for both input and icon */
    width: 100%; /* Stretches the bar to full width */
    background-color: #fff; /* White background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle bottom shadow */
    overflow: hidden; /* Ensures rounded corners clip content */
    margin-bottom: 20px; /* Spacing from other elements */
  }
  
  #searchInput {
    flex: 1; /* Expands input field to fill remaining space */
    padding: 16px; /* Comfortable padding */
    border: none; /* Removes default input border */
    outline: none; /* Removes outline on focus */
    font-family: inherit; /* Inherits font family from global styles */
    font-size: 16px; /* Consistent font size */
    color: rgba(0, 0, 0, 0.87); /* Text color with slight transparency */
    background: none; /* Removes default background color */
  }
  
  #searchInput::placeholder { /* Style the placeholder text */
    color: rgba(0, 0, 0, 0.54); /* Faded text color */
  }