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

/* Center the loader on the page */
#loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0f7fa;
  z-index: 1000;
}

/*adding Loader styles */
#loader {
  display: flex;
  height: 10px;
  width: 30%; 
  max-width: 300px; 
}

/* creating Loader with blocks */
#loader div {
  flex: 1; 
  height: 10px;
  animation: loading 1.4s infinite;
}

#loader div:nth-child(1) { background-color: red; }
#loader div:nth-child(2) { background-color: orange; }
#loader div:nth-child(3) { background-color: yellow; }
#loader div:nth-child(4) { background-color: green; }
#loader div:nth-child(5) { background-color: blue; }
#loader div:nth-child(6) { background-color: indigo; }
#loader div:nth-child(7) { background-color: violet; }

/* Animation */
@keyframes loading {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  40% { opacity: 0.2; }
  100% { opacity: 0.2; }
}

#loader div:nth-child(1) { animation-delay: 0s; }
#loader div:nth-child(2) { animation-delay: 0.2s; }
#loader div:nth-child(3) { animation-delay: 0.4s; }
#loader div:nth-child(4) { animation-delay: 0.6s; }
#loader div:nth-child(5) { animation-delay: 0.8s; }
#loader div:nth-child(6) { animation-delay: 1s; }
#loader div:nth-child(7) { animation-delay: 1.2s; }

  
  #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;
  }

/* Style for the round buttons */
.leaflet-touch .leaflet-bar button {
  border-radius: 50%;
}

.easy-button-container{
  border-radius: 50%;
}

.leaflet-bar button {
  background-color: #00BFFF; 
  border: none;
  color: white;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaflet-bar button:hover {
  background-color: #009ACD; 
}

.leaflet-bar button.active {
  background-color: #555; 
  color: white;
}



  /* Custom popup styles */
.leaflet-popup-content-wrapper {
  background-color: rgba(0, 0, 0, 0.2);
  color: #000; 
  border-radius: 5px; 
}

.leaflet-popup-tip-container {
  display: none; 
}

.leaflet-popup-content {
  margin: 1px 1px 1px 1px;
}

/* Custom styles for the weather icon */
.fa-cloud-sun-rain {
  font-size: 15vh; 
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  padding-bottom: inherit;
}

/* Adjust modal body height and scrolling */
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* Style for each Wikipedia entry */
.entry {
  display: flex;
  margin-bottom: 20px;
}

.entry-thumbnail {
  width: 30%;
  margin-right: 10px;
}

.entry-content {
  width: 70%;
}

.entry img {
  width: 100%;
  height: auto;
}

.entry h5 {
  font-size: 18px; 
}

.entry p {
  font-size: 14px; 
}

.entry a {
  font-size: 14px; 
}

.select_date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-label {
float: left;
}

.date_picker {
float: right;
}

.form-control {
  width: 50%;
}

.table {
  margin-top: 12px;
}

#weather-description {
  padding: 10px;
  border: 0.5px solid #dee2e6;
  border-radius: 10px;
}

.mb-3 {
  margin-bottom: 1rem !important;
  display: flex;
  justify-items: center;
  padding-top: 10px;
}

.card-title {
  text-align: center;
}

.form-control {
  width: 50%;
}

.currency {
  margin-left: 30px;
  width: 40%;
}

.currencyExchange {
  display: flex;
  justify-content: space-around;
}

.footer_padding {
  padding: 2px !important;
}

/* Custom styles for the modals */
#newsModalBody img,
#wikipediaEntries img {
  width: auto; 
  height: 150px; 
  object-fit: cover; 
  min-width: 150px;
  padding: 10px;
  border-radius: 20px !important;
}

#newsModalBody .card-body,
#wikipediaEntries .card-body {
  display: flex;
  flex-direction: column;
}

#newsModalBody .read-more-link,
#wikipediaEntries .read-more-link {
  align-self: start; /* Align the button to the start */
  margin-top: auto; /* Push the button to the bottom */
}

/* Ensure content stacks on larger screens */
@media (min-width: 768px) {
  #newsModalBody .row,
  #wikipediaEntries .row {
    flex-wrap: wrap;
  }
}

.news-image,
.wiki-image {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-bottom: 10px;  
}

.p_left {
  padding-left: 10% !important;
}

/* currency modal */
input::placeholder {
  color: grey;
  opacity: 1; /* Ensure the color is visible */
}

#currencyModal .currency-exchange-container {
  gap: 1rem; /* Adjusts the space between the input fields and the icon */
}

#currencyModal .icon-container i {
  font-size: 24px; /* Adjust size as needed */
  color: grey; /* Change color if needed */
}

.currency-icon {
  width: 50px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background: #d7d9db !important;
}

.currency-title {
  padding: 10px;
}

/* wikipedia spinner styles */
.wikipedia-modal-body {
  position: relative;
  min-height: 100px; 
}

#wikipediaLoader {
  position: absolute;
  top: 30%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
}

.wikipedia-spinner-border {
  width: 3rem; 
  height: 3rem; 
}