.header, .footer {
    background: white;
    height: 5vh;
    width: 100vw;
    border-bottom: 1px solid dimgray;
}
.loader {
    display: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    position: absolute;
    left: 110vh;
    top: 50vh;
}

.loading {
    border: 2vh solid #ccc;
    width: 20vh;
    height: 20vh;
    border-radius: 50%;
    border-top-color: #e97828;
    border-left-color: cornflowerblue;
    border-right-color: lightseagreen;
    border-bottom-color: coral;
    animation: spin 1s infinite ease-in;
    opacity: 0.9;

}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.footer{
    border-top: 1px solid dimgray;
}
.map{
    padding: 0;
    height: 91.5vh;
}
.map iframe{
    width: 100vw;
    height: 91.5vh;

}
.leaflet-control-attribution {
    display: none !important;

}
.footer{
    height: 4vh;
    text-align: center;
    vertical-align: center;
    font-size: 70%;
    z-index: 999;
}
.leaflet-control-locate {
    position: fixed !important;
    bottom: 20px !important;
}
.my-div-span{
    font-size: 150%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.station_icon{
    width: 30px !important;
}
#select_route{
    width: 5vh;
}
.city-select{
    margin-top: 8vh;
}
.city-select button{
    width: 100%;
    padding: 1vh;
    border-radius: 6px;
    height: 15vh;
    color: black;
    font-size: 120%;
    font-weight: 600;
    background: #E8EFF0;
    opacity: 0.8;
}
.warning{
    border-radius: 6px;
    border: 1px solid dimgray;
    color: dimgray;
    text-align: center;
    padding: 1vh;
    z-index: 999;
    background: #efefef;
}
.city-select img{
    width: 5vh;
    margin-right: 1vh;
}
button:active {
  background: #e5e5e5;
  -webkit-box-shadow: inset 0px 0px 5px #908f8f;
     -moz-box-shadow: inset 0px 0px 5px  #908f8f;
          box-shadow: inset 0px 0px 5px  #908f8f;
   outline: none;
}
select{
    border-radius: 6px;
    margin-top: 1vh !important;
    padding: 5px;
    color: dimgray;
}
.remember{
     background: #e5e5e5;
    color: dimgray;
    font-size: 80%;
    text-align: center;
    margin-top: 3vh;
    padding: 2vh;
    border-radius: 6px;
    border: 1px solid dimgray;
}
.remember span{
    margin-left: 2vh;
}
.remember input{
    width: 3vh;
    opacity: 0.8;
}
input:active {
  background: #e5e5e5;
  -webkit-box-shadow: inset 0px 0px 5px #908f8f;
     -moz-box-shadow: inset 0px 0px 5px  #908f8f;
          box-shadow: inset 0px 0px 5px  #908f8f;
   outline: none;
}