body {
  background-color: #121212; /* Dark background for the body */
  color: #e0e0e0; /* Lighter text color for better readability on dark background */
}

.rc-slider-track {
  background-color: #2196f3 !important; /* Brighter color for slider track to stand out on dark background */
}

.rc-slider-handle {
  border: solid 2px #bb86fc !important; /* Using a purple accent color for slider handles */
}

.mapbox-content {
  width: 100%; /* Fallback for browsers that do not support vw */
  height: 80%; /* Fallback for browsers that do not support vh */
  background-color: #121212; /* Ensuring the map background is also dark */
}

.download-button-enabled {
  cursor: pointer;
  background-color: #03dac5; /* Using a teal accent color for enabled state */
  color: #000; /* Dark text color for contrast */
  border: none; /* Removing border */
}

.download-button-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
  background-color: #37474f; /* Darker shade for disabled state */
  color: #bdbdbd; /* Light grey text */
  border: none; /* Removing border */
}

.map-container .leaflet-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  touch-action: none;
}

/* Customizing popup for Leaflet map to fit dark theme */
.custom-popup .leaflet-popup-content {
  width: auto !important; /* Allow content to define width */
  min-width: 400px; /* Set a minimum width */
  max-width: 600px; /* Set a maximum width if desired */
  background-color: #333; /* Dark background for popups */
  color: #e0e0e0; /* Light text color for readability */
}

/* Adjusting Leaflet popup tip color */
.leaflet-popup-tip {
  background: #333;
}

.custom-navbar {
  background-color: #004c80 !important;
}

.custom-offcanvas-width {
  width: 60% !important; /* Adjust the width as needed */
}

.custom-offcanvas2-width {
  width: 30% !important; /* Adjust the width as needed */
}
/* assets/style.css */
.dash-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.dash-loading-component {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dash-loading-component::after {
  content: "Loading...";
  margin-top: 20px;
  color: #000;
  font-size: 20px;
}

/* assets/custom.css */
.nav-tabs .nav-link {
  color: #004c80 !important; /* Change the text color of the tab titles */
}

.nav-tabs .nav-link.active {
  color: #fff !important; /* Optional: Change active tab text color */
  background-color: #004c80 !important; /* Optional: Change active tab background color */
  border-color: #004c80 !important; /* Optional: Change active tab border color */
}

.dash-loading-container {
  cursor: progress; /* Change cursor to indicate loading */
}

.leaflet-popup-content {
  width: 500px !important; /* Adjust the width as needed */
}

/* Hide the default Dash "Loading..." message */
._dash-loading {
  visibility: hidden;
}

/* Optional: Custom loader styles */
._dash-loading::after {
  content: "Loading..."; /* Custom text or leave as 'Loading...' */
  visibility: visible;
  display: inline-block;
  color: black; /* Custom color */
  text-align: center;
  margin-top: 2rem;
}

.dropdown-item {
  background-color: #f8f9fa !important; /* Change the background color */
}

.custom-navbar {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* assets/custom_offcanvas.css */
@media (min-width: 769px) {
  .custom-offcanvas-width3 {
    width: 400px !important; /* Adjust the width as needed */
  }

  .custom-offcanvas2-width3 {
    width: 600px !important; /* Adjust the width as needed */
  }
}

@media (max-width: 768px) {
  .custom-offcanvas-width3 {
    width: 100% !important;
  }

  .custom-offcanvas2-width3 {
    width: 100% !important;
  }
}