#map {
  height: 100vh;
  width: 100%;
  z-index: 1; /* Ensure the map is at the back */
  position: relative; /* Positioning context for the logo */
}
body {
  margin: 0;
  padding: 0;
}

.logo-container {
  position: absolute; /* Position the logo in the upper-right corner */
  top: 20px;
  right: 20px;
  z-index: 2; /* Ensure the logo is above the map */
}
.logo-container img {
  max-width: 15vw; /* Logo width is 10% of the viewport width */
  height: auto; /* Maintain aspect ratio */
}
/* Custom Leaflet popup styling */
.popup-content {
  background-color: #f8f8f8;
  padding: 18px;
  border-left: 4px solid #005d22;
}
.popup-content strong {
  color: #005d22;
}
.custom-popup-container .leaflet-popup-content-wrapper,
.custom-popup-container .leaflet-popup-tip {
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}
.custom-popup-container .leaflet-popup-content {
  margin: 0;
  line-height: 1.6;
  font-family: Arial, Helvetica, sans-serif;
}
.custom-popup-container .leaflet-popup-close-button {
  color: #777;
  font-size: 16px;
}
.error-message {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background-color: white;
  border-left: 4px solid #cc0000;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
}
.error-content h3 {
  margin-top: 0;
  color: #cc0000;
}
.error-content button {
  background-color: #005d22;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}