/*Size of map*/
html, body {
  margin: 0;
  padding: 0;
}

#map {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#selectContainer {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 11px 0;
}

#countrySelect {
  width: 200px;
  margin: 0 auto;
}

/*Font size and color for leaflet buttons*/
.fa {
  font-size: 15px;
  color: navy;
}

/*Image for the layer button*/
.leaflet-control-layers-toggle {
  background-image: url(../css/images/layers.png);
  background-size: contain;
}

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(../css/images/layers.png);
  background-size: 26px 26px;
}

/*Blur map background when modals are open*/ 
.blur-map {
  filter: blur(3px); 
}

/*Preloader*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#preloader img {
  width: 200px; 
  height: auto;
  animation: animate-preloader 1s linear infinite;
}

.loading-text {
  color: #ffff;
  margin-top: 10px; 
  font-size: 3em; 
  text-align: center;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*Styling headers of weather modal*/
.date-header {
  background-color: blue; 
  color: white;
  font-weight: bold;
  border-top: 2px solid #ccc; 
}


/*Styling images of news modal*/
img.newsarticle {
  width: 100%;
  display: block;
  margin: 0 auto;
}

/*Styling for iframe video in webcam modal*/
.embed-responsive-item {
  width: 100%;
}

/*Styling the error modal*/
#errorModal .modal-header {
  border-bottom: 1px solid #dc3545;
}

#errorModal .btn-outline-danger {
  border-color: #dc3545;
}

#errorModal .btn-outline-danger:hover {
  background-color: #dc3545;
  color: white;
}

#errorModal .modal-body {
  min-height: 100px; 
}


.leaflet-touch .leaflet-bar button {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0px;
}


.barometer-container {
  width: 100%;
  background-color: #eee;
  border-radius: 8px;
  position: relative;
  height: 20px;
}

.barometer-indicator {
  height: 100%;
  border-radius: 8px 0 0 8px; /* Smooth corners on the left side */
  position: absolute;
  left: 0;
  top: 0;
}

/* Colors for different advisory levels */

.low-risk { background-color: #4CAF50; }
.medium-risk { background-color: #FFEB3B; }
.high-risk { background-color: #FF9800; }
.extreme-risk { background-color: #F44336; }


/* Weather forecast styling */

.weather-forecast-container {
  font-family: Arial, sans-serif;
}

.forecast-day.today {
  background-color: #f0f0f0; 
}

.forecast-day .date {
  font-weight: bold;
}

.forecast-day .condition {
  color: #666;
}

.forecast-day .temps .max-temp {
  color: #E57373; 

.forecast-day .temps .min-temp {
  color: #64B5F6;
}
}

.result-container input[readonly] {
  background-color: #e9ecef;
  color: #495057;
  border-color: #ced4da;
}