* {}

.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 .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 .hintsWrap {    max-width: 500px;  width: 100%;    position: absolute;
    /*display: none;*/
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    border-top: none;
    top: 35px;}

.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 ~ .hintsWrap {display:none;}
.cityList .input-group .form-control.city-input:active ~ .hintsWrap {background-color: #ccc;}

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