html, body {
    font-family: Arial, Helvetica, sans-serif;
    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;
}

/*For the preloader in the weather modal*/
.pre-load {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
  }
  
  .pre-load:before {
      content: "";
      position: fixed;
      top: calc(50% - 30px);
      left: calc(50% - 30px);
      border: 6px solid #f2f2f2;
      border-top: 6px solid #56829e ;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      -webkit-animation: animate-preloader 1s linear infinite;
      animation: animate-preloader 1s linear infinite;
  }
  
  @-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);
      }
  }
  
  .weather-modal-body {
    overflow: hidden;
    min-height: 350px;
  }
  
  .fadeOut {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 1s, opacity 1s linear;
  }

  /*to stop the background of the search bar being see through*/
  .geoapify-form {
    background-color: white;
  }

  /*Mobile styles*/
@media only screen and (max-width: 992px) {
    #selectContainer {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 11px 0;
    }
}