html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#mainContainer {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--screen-height);
  height: calc(var(--screen-height) - 0px);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}


/* 
body,
html,
#map {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
} */


/* The map container */
#map {
  width: 100%;
  height: 100vh;
}


/* The country select bar */
#selectCountry {
  position: fixed;
  border-radius: 4px;
  top: 0;
  left: calc(50% - 125px);
  z-index: 1000;
  width: 250px;
  margin: 10px auto;
  border: solid 2px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease; 
  cursor: pointer;
}

#selectCountry:hover {
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px); 
}

#selectCountry:active {
  background-color: #e0e0e0; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; 
  transform: translateY(2px); 
  outline: none; 
  border: solid 2px rgba(0, 0, 0, 0.2); 
}



/* The nav menu with the categories */
#interestsContainer {
  display: flex;
  z-index: 1000;
  width: 100%;
  background-image: linear-gradient(to top, #79797900, rgba(60, 141, 188, 0));
  justify-content: center;
  height: 0;
}

#interestsContainer .btn {
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: pointer;
  display: block;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 12px;
  border: solid 2px #00000033;
  box-shadow: 0 4px 8px #00000033;
  font-weight: bold;
  height: 30px;
  text-align: center;
  text-decoration: none;
  width: 120px;
  bottom: 53px;
  transition: all 0.2s ease; 
}
#interestsContainer .btn:hover {
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px); 
}

#interestsContainer .btn:active {
  background-color: #e0e0e0; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; 
  transform: translateY(2px); 
  outline: none; 
  border: solid 2px rgba(0, 0, 0, 0.2); 
}


/* Flag container from the right side */
#countryFlagContainer {
  position: fixed;
  top: 50px;
  right: 10px;
  z-index: 600;
  display: flex;
  opacity: 0;
  width: 48px;
  height: 33px;
  justify-content: center;
  align-items: center;
  border: solid 2px #919191a9 !important;
  border-radius: 4px !important;
  background-color: #ffffffa0;
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 1s ease-in-out;

}

#countryFlag {
  max-width: 48px;
  border-radius: 4px;
}


/* Toast popups */
#toastContainer {
  position: absolute;
  top: 50px;
  right: -5px;
  z-index: 8000;
}


/* No Javascript fallback message */
.noscript-message {
  position: absolute;
  top: 0;
  left: 0;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #000000;
  display: flex;
  justify-content: center;
  color: lightsteelblue;
  align-items: center;
  text-align: center;
  width: 100vw;
  z-index: 9999;
  overflow: auto !important;
  flex-direction: column;
}

.instructions {
  margin-top: 20px;
  text-align: left;
}

.noscript-message h1 {
  color: #7ef9ee;
}
.noscript-message p {
  color: #d3f576;
}

/* Loading styles */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8900;
  opacity: 1;
  transition: opacity 0.5s ease-in;
  overflow: auto;
}

.loading-container.hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes swing {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

/* Marker cistom styles */
.marker-container {
  position: absolute;
  top: 0;
  left: 0;
  position: relative;
  width: 70px;
  height: 50px;
}

.marker-icon {
  width: 70%;
  height: 100%;
  background: url("../leaflet/css/images/marker-icon.png") no-repeat center
    center;
  background-size: contain;
  animation: swing 1.5s infinite ease-in-out;
  transform-origin: bottom center;
}

.shadow-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
  background: url("../leaflet/css/images/marker-shadow.png") no-repeat center
    center;
  background-size: contain;
  animation: swing 1.5s infinite ease-in-out;
  transform-origin: bottom center;
}

/* Popup custom styles */
.popup {
  width: 200px;
  border-radius: 6px;
}

/* Used for weather cells */
.w-70p {
  width: 70px;
}
.w-150p {
  width: 150px;
}

.bg-blue-100 {
  background-color: #f0f9ff;
}
.bg-blue-200 {
  background-color: #cfe2f3;
}
.bg-blue-300 {
  background-color: #9fc5e8;
}
.bg-blue-500 {
  background-color: #3c8dbc;
}

.bg-gradient-darkblue-lightblue {
  background: linear-gradient(to bottom, #3c8dbc, #cfe2f3, #cfe2f3);
}

.back-to-top{ 
  display: none;
}

.progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 8px);
  z-index: 1000;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 8px;
  
}

.progress-bar {
  background-color: #28a745;
  height: 8px;
  transition: width 0.2s;
  border-radius: 8px;
}


/* Leaflet buttons styles */
.leaflet-bar > button > span {
  width: 100%;
  font-weight: bold;
}
.leaflet-bar > button {
  padding: 0 !important;
}

.leaflet-bar,
.leaflet-control-layers-toggle {
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.476) !important;
}
/* Other styles */
.pointer:hover {
  cursor: pointer;
}

/* Adjust for mobile devices */
@media (max-width: 768px) {
  .leaflet-bar > button {
    padding: 0 !important;
    font-weight: bold;
  }
  .leaflet-bar > button > span {
    width: 100%;
    font-weight: bold;
  }
  #interestsContainer {
    /* bottom: 0; */
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    z-index: 1000;
    max-width: 140px;
    height: auto;
    background: linear-gradient(to top, #79797900, rgba(60, 141, 188, 0));
    padding: 10px 0;
  }

  #interestsContainer .btn {
    position:static;
   
  }
  #interestsContainer .btn:hover {
    background-color: rgb(220, 220, 220);
    border: solid 2px rgba(0, 0, 0, 0.2);
    color: rgb(0, 0, 0);
  }
}