.hide {
  display: none;
}
.c-city {
  padding: 1em;
  position: absolute;
  width: 350px;
  display: none;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 1px #ddd;
}
.c-city.active {
  display: block;
}
.c-city .c-tab-title {
  display: flex;
  justify-content: space-around;
}
.c-city.auto-input .c-tab-title , .c-city.auto-input .default{
  display: none;
}
.c-city.auto-input .reload {
  display: block;
}
.c-city .reload {
  display: none;
}
.c-city .c-tab-title .c-tab-item {
  cursor: pointer;
  display:inline;
}
.c-city .c-tab-title .c-tab-item:hover {
  color: #00b5ad;
}
.c-city .c-tab-title .c-tab-item:not(last-child) {
  margin-right: 0.5em;

}
.c-city .c-tab-title .c-tab-item.active {
    color: #00b5ad;
    padding-bottom: 3px;
    border-bottom: 2px solid #00b5ab;
}
.c-city .city-list {
  padding: 0;
  list-style: none;
  margin: 0;
  margin-top: 1em;
}
.c-city .city-list .city {
  float: left;
  list-style: none;
  padding: 0.2em 0.3em;
  cursor: pointer;
}
.c-city .city-list .city:hover {
  background-color: #00b5ad;
  color: #fff;
}
.c-city .clearfix::after{
  content: '';
  display: table;
  width: 0;
  height: 0;
  clear: both;
}
.c-city .c-dd-city,.c-city .c-dl-city-list {
  margin: 0;
}
.c-city .c-dd-city:not(last-child) {
  margin-bottom: 0.3em;
}
.c-city .c-dd-city {
  padding: 0 0.2em;
  cursor: pointer;
}
.c-city .c-dd-city:hover , .c-city .c-dd-city.active {
  background-color: #00b5ad;
    color: #fff;
}