select {
font-size:16px; padding-top: 3px;
    padding-bottom: 3px;} 
input {
 font-size:16px;   border: 1px solid silver;
    padding-top: 3px;
    padding-bottom: 3px;
}
@media (max-width:500px)
{
select {
font-size:18px; padding-top: 3px;
    padding-bottom: 3px;} 
input {
 font-size:18px;   border: 1px solid silver;
    padding-top: 3px;
    padding-bottom: 3px;
}
}
#form {
    width: 25%;
}

#form > #country {
    width: 100%;
}

#form > #city {
    width: 100%;
}

#hints {
 margin-top:-12px;   max-height: 300px;
    overflow: auto;
  display: none;
    border: 1px solid silver;
    border-top: 0;
    width: 100%;
}

#hints > ul {
    padding: 0;
  margin-left:auto; margin-right:auto; margin-top:0;  text-align: center;   width: 80%;
}

#hints > ul > li {
    border-bottom: 1px solid black;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
  text-align: center; background-color: #ebf4f2; width: 100%;
 margin: 0;
    display: block;
    list-style: none;
}

#hints > ul > li:last-child {
    border-bottom: 0;
}

#hints > ul > li:hover {
    color: blue;
}

#hints2 {
 margin-top:-12px;   max-height: 300px;
    overflow: auto;
  display: none;
    border: 1px solid silver;
    border-top: 0;
    width: 100%;
}

#hints2 > ul {
    padding: 0;
  margin-left:auto; margin-right:auto; margin-top:0;  text-align: center;   width: 80%;
}

#hints2 > ul > li {
    border-bottom: 1px solid black;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
  text-align: center; background-color: #ebf4f2; width: 100%;
 margin: 0;
    display: block;
    list-style: none;
}

#hints2 > ul > li:last-child {
    border-bottom: 0;
}

#hints2 > ul > li:hover {
    color: blue;
}