@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;900&display=swap');
.popup-overlay{
    z-index:999999;
  /*Hides pop-up when there is no "active" class*/
  display:none;
  position:fixed;
  background:#ffffff;
  border:5px solid aqua;
  border-radius: 20px;
  width:50%;
  top:10%;
  height:70% !important;
  left:25%; 
  box-shadow: 0 0 50px rgb(4, 128, 128);
}
.popup-overlay::-webkit-scrollbar-thumb {
  background: rgb(7, 194, 194);
  transition:.3s; 
  border-radius: 30px;
}
.popup-overlay.active{
  /*displays pop-up when "active" class is present*/
  visibility:visible;
  display:block;
  text-align:center;
}
.input:first-letter{
  text-transform: uppercase;
}
#app h2.card-title{
  color: #00004E;
}
.popup-content {
    display:none;
  /*Hides pop-up content when there is no "active" class */
 visibility:hidden;
}

.popup-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility:visible;
  display:block;
}
span.cityC{
  font-family: 'Roboto Condensed', sans-serif !important;
}
a.open{
  background-color:none;
  color:#00004E;
  padding:3px;
  border-bottom: 2px solid #00004E;
  transition: .2s;
}
a.open:hover{
  background-color:white;
  color:#00004E;
  padding:3px;
  border-bottom: 3px solid #00004E;
}
li{
  list-style-type:none;
  text-align: left;
}
.closer {
  position: absolute;
  float:right;
  left:2%;
  top:20px;
  height:25px;
  width:135px;
  line-height:5px;
  color: #333;
}

@media only screen and (max-width:800px) {
  .popup-overlay{
  width:80% !important;
  height:80%;
  left:10%; 
}
.closer {
  position: fixed;
  float:right;
  left:0;
  width:100% !important;
  text-align: center;
  top:0;
  height:35px;
  line-height:5px;
}
}