* {}

.loader {
    font-size: 40px;
    color: #fff;
}

p.done {color: #7f7f7f;}
p.done:after {
    content: " - готово";
    font-weight: bold;
    color: #444;}

.loader-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    position: fixed;

}

.loader-wrap .img-fluid {max-width: 100px;}

.cityList {margin: 15px 0;}
.cityList .error_msg {    font-size: 18px;
    margin: 4px 0;
    color: #f00;
    font-weight: bold;}

.cityList .try_msg {    font-size: 18px;
    margin: 4px 0;
    font-weight: bold;}

.cityList .try_msg .newUrl {color:#b1b1b1; font-size: 16px; font-weight: normal;}

.cityList .listOfLoads {display: block;    margin: 0 0 8px;}

.cityList  button + label {display: block;    margin-top: 20px;}
.cityList .input-group {margin-bottom: 20px; display: block}
.cityList .input-group .form-control.city-input { max-width: 500px;  width: 100%;display: inline-block; padding-left: 25px;}
.cityList .input-group .count-results {display: inline-block;left: -110px;
    z-index: 10;
    color: #888;    position: relative; }

.cityList .input-group .textFieldClear {  width: 100px;
    position: relative;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 38px;
    z-index: 1;
    left: -90px;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;}

.cityList .input-group .textFieldClear:hover {background-color: #ddd;}

.cityList .input-group .hintsWrap .hint{     padding: 3px 0 4px 25px;  cursor: pointer; position: relative;   }
.cityList .input-group .hintsWrap .hint:hover {background-color: #8cbdff  }

.cityList .input-group .hintsWrap .hint:hover:before {
    display: inline-block;
    content: "→";
    position: absolute;
    margin-left: -24px;
    font-size: 24px;
    line-height: 20px;
}


.cityList .input-group .form-control.city-input.closed ~ .textFieldClear {display:none;}
.cityList .input-group .form-control.city-input:active ~ .textFieldClear {background-color: #ccc;}


.content {
    padding-left: 0;
    list-style-type: none; /* Убираем исходные маркеры */
    counter-reset: num; /* Задаём имя счетчика */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content li {
    width: 120px; height: 120px; border: 1px solid #ccc; border-radius: 5px;    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.2s ease-in;
    cursor: pointer;
    position: relative;
}

.content li:hover {
    background-color: #ddd;
    top: 1px;
    left: 1px;
}

.content li::before {
    content: counter(num); /* Выводим число */
    counter-increment: num; /* Увеличиваем значение счётчика */
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 25px;
    height: 25px;
    text-align: center;
    background-color: #fff;
}
.content li:hover::before {

}
.content li .cityIco {
    width: 70px;
    height: 55px;
    background-image: url(img/city-pack.png);
    background-repeat: no-repeat;
    margin-top: -5px;
    background-position: calc(counter(num)*70px) calc(counter(num)*70px);
}

.content li > div {
    position: relative;
    z-index: 10;
    font-size: 16px;
    font-weight: bold;
    color: #9022d2;
}


.content li > .singleCity {text-align: center; line-height: 20px;}

.content.friends a {text-decoration: none;}
.content.friends li {background-size: contain; border: 3px solid #ccc;     margin: 0 5px 10px auto}

.content.friends li.mounth1 {border-color: #2a44bb;}
.content.friends li.mounth2 {border-color: #659fff;}
.content.friends li.mounth3 {border-color: #f5ffcd;}
.content.friends li.mounth4 {border-color: #fff689;}
.content.friends li.mounth5 {border-color: #ffd158;}
.content.friends li.mounth6 {border-color: #b6ffb6;}
.content.friends li.mounth7 {border-color: #77ff6d;}
.content.friends li.mounth8 {border-color: #51ff08;}
.content.friends li.mounth9 {border-color: #ff3526;}
.content.friends li.mounth10 {border-color: #ff7934;}
.content.friends li.mounth11 {border-color: #ffbd83;}
.content.friends li.mounth12 {border-color: #915cff;}

.content.friends li > div:last-of-type {background-color: #ffffff9c; border-radius: 3px;}

.some {
    background-position: -70px 0px;
    background-position: -70px 0px;
    background-position: 0px -70px;
}

@media (max-width: 767px)  {
    .cityList .input-group .count-results {position: absolute;
        right: 20px;
        left: auto;
    /* width: 100px; */
        top: 7px;}
}