/* Ensure that body and html take up full height */
html, body {
    height: 100%;
    margin: 0; /* Removes any default margin */
    overflow: hidden; /* Prevents scrolling */
  }
  
  /* .map-container styles the container that holds the map */
  .map-container {
    position: relative; /* Ensures other elements inside are positioned relative to it */
    width: 100%;
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Prevents scroll inside the map container */
  }




.mapboxgl-popup-content {
  background: white; /* Ensure the background is white */
  padding: 15px; /* Add padding inside the popup */
  border-radius: 8px; /* Optional: Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for better visibility */
  overflow: hidden; /* Ensure content like images stays inside the box */
  width: 600px; /* Explicitly set the width */
}


.walking-map-popup .mapboxgl-popup-content{
  background: white; /* Ensure the background is white */
  padding: 15px; /* Add padding inside the popup */
  border-radius: 8px; /* Optional: Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for better visibility */
  overflow: hidden; /* Ensure content like images stays inside the box */
  width: 300px; /* Explicitly set the width */
}


.map-legend {
  position: absolute; /* Position it on top of the map */
  bottom: 20px; /* Distance from the bottom of the map */
  right: 20px; /* Distance from the left of the map */
  background: white; /* White background for better visibility */
  padding: 10px; /* Add padding inside the legend */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for better visibility */
  font-family: Arial, sans-serif; /* Font styling */
  font-size: 12px; /* Font size */
  line-height: 1.5; /* Line height for spacing */
}

.map-legend h3 {
  margin: 0 0 10px; /* Add spacing below the title */
  font-size: 14px; /* Slightly larger font for the title */
}

.map-legend div {
  display: flex; /* Align items horizontally */
  align-items: center; /* Center items vertically */
  margin-bottom: 5px; /* Add spacing between legend items */
}

.map-legend span {
  display: inline-block; /* Make the color box inline */
  width: 20px; /* Width of the color box */
  height: 20px; /* Height of the color box */
  margin-right: 10px; /* Spacing between the color box and text */
  border: 1px solid #000; /* Optional: Add a border to the color box */
}

.map-Title{
  position: absolute; /* Position it on top of the map */
  top: 20px; /* Distance from the bottom of the map */
  left: 20px; /* Distance from the left of the map */
  background: white; /* White background for better visibility */
  padding: 5px; /* Add padding inside the legend */
  border-radius: 8px; /* Rounded corners */
  font-family: Arial, sans-serif; /* Font styling */
  font-size: 25px; /* Font size */
}