#map {
    height : 100vh;
    width: 100%;
}
#country-select{
    z-index: 500;
    top: 0;
}
#country-drop{
    width: 40%;
}


/* errors handling */
    #error{
        z-index: 2090;
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        background-color: rgba(247, 247, 247, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
    }
    #error #errors-container{
        z-index: 3000;

        height: 80vw;
        width: 80vw;

        background-color: rgba(247, 247, 247, 0.85);
        border-radius: 15px;
        border: solid 2px #181818e3;
        box-shadow: 10px 10px 5px #00264e6b;
    }
    #error #errors-container #title{
        margin: 10% 5%;
        width: 90%;
        height: 40%;
        border-radius: 7px;
        background-color: rgba(204, 0, 0, 0.9);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #error #errors-container #title h1{
        color: rgb(247, 247, 247);
        font-weight: 700;
        font-size: 3.5em;
    }
    #error #errors-container #title h6{
        color: rgb(247, 247, 247);
        font-weight: 500;
        font-size: 1.5;
        text-decoration: underline;
    }
    #error #errors-container #message-container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 5%;
    }
    #error #errors-container #message-container button{
        padding: 2.5% 12.5%;
    }
/* errors handling */


/*  Modal Buttons   */
    /* button svg{
        height: 2em;
        width: 2em;
    } */

    #country-button{
        z-index: 2000;
        position: absolute;
        top: 70%;
        left: 2.5%;
        border-radius: 50%;
        padding: 5px;

    }

    #weather-button{
        z-index: 2000;
        position: absolute;
        top: 75%;
        left: 2.5%;
        border-radius: 50%;
        padding: 5px;

    }
    #city-button{
        z-index: 2000;
        position: absolute;
        top: 80%;
        left: 2.5%;
        border-radius: 50%;
        padding: 5px;
        display: hide;
    }
    #poi-extra-button{
        z-index: 2000;
        position: absolute;
        top: 85%;
        left: 2.5%;
        border-radius: 50%;
        padding: 5px;
        display: hide;
    }
    #route-button{
        z-index: 2000;
        position: absolute;
        top: 90%;
        left: 2.5%;
        border-radius: 50%;
        padding: 5px;
        display: hide;
    }
/*  Modal Buttons   */



/*  Modals  */
    #country-modal{
        z-index: 2080;
    }
    .table-striped>tbody>tr:nth-child(odd)>td, 
    .table-striped>tbody>tr:nth-child(odd)>th {
       background-color: #0d6dfd50; 
    }
    #weather-modal{
        z-index: 2080;
    }
    #city-modal{
        z-index: 2080;
    }
    #route-modal{
        z-index: 2080;
    }
    #loading-modal{
        z-index: 2080;
        width: 100vw;
        height: 100vh;
    }
        #loading-container .modal-body{
            width: 100vw;
            height: 100vh;
        }
    #city-image-loading{
        height: 6em;
        display: none;
    }
    #poi-loading{
        height: 6em;
        display: none;
    }
    /* loading modal */
        #loading-modal .container{
            height: 15em;
        }
    /* loading modal */
    #poi-modal{
        z-index: 2080;
    }
    /* poi modal */
        #poi-modal .modal-body{
            height: 20em;
            overflow-y: scroll;
        }
    /* poi modal */
    #news-modal{
        z-index: 2080;
    }
        #news-modal .img-con img{
            width: 100%;
            height: auto;
        }
        #news-modal .modal-body{
            height: 20em;
            overflow-y: scroll;
        }
        #news-modal #article-list{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #news-modal .article{
            width: 80%;
            
        }
    #currency-modal{
        z-index: 2080;
    }

    #form-info{
        display: none;
    }

    /* city modal body */
    #city-modal .modal-body{
        height: 20em;
        overflow-y: scroll;
    }
    #city-modal .modal-body #transport-nav{
       position: sticky;
       top: 0;
       background-color: white;
    }
    /* city modal body */
    .pad-r{
        padding-right: 1.25rem;
    }

    .dropdown-menu{
        z-index: 2080;
    }
/*  Modals  */

@media only screen and (max-width: 600px) {
    #errors-container{
        height: 40vw;
        width: 40vw;
    }
    .article{
        width: 100% !important;
        
    }
}

/*  Loading Animation   */
#load {
    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;
  }
  
  #load 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;
  }
  
  #load div:nth-child(2) {
    animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
  }
  #load div:nth-child(3) {
    animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
  }
  #load div:nth-child(4) {
    animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
  }
  #load div:nth-child(5) {
    animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;
  }
  #load div:nth-child(6) {
    animation-delay:1s;
    -o-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
  }
  #load div:nth-child(7) {
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
  }
  
  @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;
      }
    }
/*  Loading Animation   */