@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
  background: #000000;
  font-family: 'Open Sans', sans-serif;
}

  #loading-screen {
    position:absolute;
    width:600px;
    height:36px;
    left:50%;
    top:40%;
    margin-left:-300px;
    overflow:visible;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
  }
  
  #loading-screen div {
    position:absolute;
    width:20px;
    height:36px;
    opacity:0;
    font-family:Helvetica, Arial, sans-serif;
    animation:move 2s linear infinite;
    -o-animation:move 2s linear infinite;
    -moz-animation:move 2s linear infinite;
    -webkit-animation:move 2s linear infinite;
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    color:#35C4F0;
  }
  
  #loading-screen div:nth-child(2) {
    animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
  }
  #loading-screen div:nth-child(3) {
    animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
  }
  #loading-screen div:nth-child(4) {
    animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
  }
  #loading-screen div:nth-child(5) {
    animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;
  }
  #loading-screen div:nth-child(6) {
    animation-delay:1s;
    -o-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
  }
  #loading-screen div:nth-child(7) {
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
  }
  #percent {
    display: flex;
    justify-content: center;
    align-items: center;
    color:#35C4F0;
    height: 100vh; /* Adjusts the height to center it vertically */
    font-size: 24px; /* Adjust the size as needed */
}

  @keyframes move {
    0% {
      left:0;
      opacity:0;
    }
      35% {
          left: 41%; 
          -moz-transform:rotate(0deg);
          -webkit-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);
          opacity:1;
      }
      65% {
          left:59%; 
          -moz-transform:rotate(0deg); 
          -webkit-transform:rotate(0deg); 
          -o-transform:rotate(0deg);
          transform:rotate(0deg); 
          opacity:1;
      }
      100% {
          left:100%; 
          -moz-transform:rotate(-180deg); 
          -webkit-transform:rotate(-180deg); 
          -o-transform:rotate(-180deg); 
          transform:rotate(-180deg);
          opacity:0;
      }
  }
  
  @-moz-keyframes move {
      0% {
          left:0; 
          opacity:0;
      }
      35% {
          left:41%; 
          -moz-transform:rotate(0deg); 
          transform:rotate(0deg);
          opacity:1;
      }
      65% {
          left:59%; 
          -moz-transform:rotate(0deg); 
          transform:rotate(0deg);
          opacity:1;
      }
      100% {
          left:100%; 
          -moz-transform:rotate(-180deg); 
          transform:rotate(-180deg);
          opacity:0;
      }
  }
  
  @-webkit-keyframes move {
      0% {
          left:0; 
          opacity:0;
      }
      35% {
          left:41%; 
          -webkit-transform:rotate(0deg); 
          transform:rotate(0deg); 
          opacity:1;
      }
      65% {
          left:59%; 
          -webkit-transform:rotate(0deg); 
          transform:rotate(0deg); 
          opacity:1;
      }
      100% {
          left:100%;
          -webkit-transform:rotate(-180deg); 
          transform:rotate(-180deg); 
          opacity:0;
      }
  }

  
  @-o-keyframes move {
      0% {
          left:0; 
          opacity:0;
      }
      35% {
          left:41%; 
          -o-transform:rotate(0deg); 
          transform:rotate(0deg); 
          opacity:1;
      }
      65% {
          left:59%; 
          -o-transform:rotate(0deg); 
          transform:rotate(0deg); 
          opacity:1;
      }
      100% {
          left:100%; 
          -o-transform:rotate(-180deg); 
          transform:rotate(-180deg); 
          opacity:0;
      }
  }









@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap");

:root {
  --primary: #94b3fd;
  --secondary: #c70a80;
  --secondary-light: #d800a6;
  --light: white;
  --grey: rgb(214, 214, 214);
  --black: #222222;
  --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.folium-map {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align content to the top */
  height: 100vh;
  padding-top: 20px; /* Optional: add some space at the top */
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center; /* Center the search bar horizontally */
  flex-direction: column;  /* Stack the search bar and result list vertically */
  align-items: center;
}

.search {
  z-index: 100000;
  display: flex;
  box-shadow: var(--shadow);
  width: 50%;
  justify-content: space-between; /* Adjusts space between input and button */
}

.search input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  outline: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 2px solid var(--light);

}

.search input::placeholder {
  font-size: 14px;
  font-weight: 500;
}

.search button {
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--light);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  border: 2px solid transparent;
  background-color: var(--secondary);

  cursor: pointer;
  transition: background-color 0.2s;

}

.search button i {
  margin-right: 5px;
  

}

.search button:hover {
  background-color: var(--secondary-light);
}

.result {
  z-index: 100000;
  margin-top: 8px;
  border-radius: 5px;
  background-color: var(--light);
  max-height: 0;
  overflow: hidden;
  box-shadow: var(--shadow);


}

.result.show {
  max-height: fit-content;
  
}

.result li {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  margin-left: -20px;
  
}

.result li i {
  font-size: 14px;
  margin-right: 10px;
  
  
}

.result li a {
  font-size: 14px;
  text-decoration: none;
  color: var(--black);
  font-weight: 500;
  transition: color 0.2s;

  
}

.result li:hover {
  color: var(--light);
  background-color: var(--secondary);
}

.result li:hover a {
  color: var(--light);
}




@media only screen and (max-width: 600px) {

}