.autosuggest-input.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* reset inherited bold for placeholder */
input[placeholder]          {font-weight: normal !important; text-overflow: ellipsis; transition: opacity 0.3s ease;}
::-webkit-input-placeholder {font-weight: normal !important; text-overflow: ellipsis; transition: opacity 0.3s ease;}
::-moz-placeholder          {font-weight: normal !important; text-overflow: ellipsis; transition: opacity 0.3s ease;}/* Firefox 19+ */
:-moz-placeholder           {font-weight: normal !important; text-overflow: ellipsis; transition: opacity 0.3s ease;}/* Firefox 18- */
:-ms-input-placeholder      {font-weight: normal !important; text-overflow: ellipsis; transition: opacity 0.3s ease;}

:focus:input[placeholder]         {opacity: 0;}
:focus::-webkit-input-placeholder {opacity: 0;}
:focus::-moz-placeholder          {opacity: 0;}/* Firefox 19+ */
:focus:-moz-placeholder           {opacity: 0;}/* Firefox 18- */
:focus:-ms-input-placeholder      {opacity: 0;}

.autosuggest {
    position: absolute;
    left: 0;
    top:100%;
    /*top: 92%;
    top: calc(100% - 3px);*/
    color: black;
    background-color: white;
    width: 100%;
    max-height: 300px;
    box-shadow: 0 6px 8px rgba(0,0,0,0.3);
    z-index: 1;
    overflow: auto;
    font-size: 14px;
    text-align: left;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #DDDDDD;
    cursor: pointer;
}
.autosuggest ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.autosuggest li {
    padding: 4px 14px 5px;
    line-height: 1.45;
}
.autosuggest li:not(:first-of-type) {
    /*border-top: 1px solid #F6F6F6; too low contrast*/
    border-top: 1px solid #EAEAEA;
}
.autosuggest li.current {
    background-color: #E5F8FD;
    border-top-color: #DDF0F5;
}
.autosuggest li.current + li {
    border-top-color: #DDF0F5;
}

/*alternate blue highlight with inverse text colors*/
.autosuggest.alt-bg li.current {
    background-color: #03bfe8;
    border-top-color: #04b5d9;
    color: white;
}
.autosuggest.alt-bg li.current + li {
    border-top-color: #04b5d9;
}
.autosuggest.alt-bg li.current .secondary-line {
    /*color: #e6e6e6;*/
    color: #f0f0f0;
    /*color: #eceba4; // yellow looks good*/
}

.autosuggest li .primary-line {
    display: block;

}
.autosuggest li .secondary-line {
    color: #8c8c8c;
    font-size: 13px;
}
.autosuggest li .secondary-line span + span:before {
    content: ', ';
}

.autosuggest .too-many-items-hint {
    padding: 4px 12px 6px;
    text-align: center;
    font-size: 0.8em;
    cursor: default;
    border-top: 1px solid #DDD;
    background-color: #ffffde;
}
.autosuggest .too-many-items-hint b {
    color: #ff3e3e;
}

/* breakpoint for mobile/compact view */
@media (max-width: 500px) {
    /*on mobile autosuggest is hidden beneath keyboard, make it shorter*/
    .autosuggest {
        max-height: 220px;
    }
}


/* zhk selector custom styling */
/* field is too narrow, span autosuggest to the section field */
.zhk-name-group .zhk-selector .autosuggest {
    width: 283px; /* .zhk-name-group: use it to not impact other pages without section */
}
.zhk-selector .autosuggest .autosuggest-zhk-section {
    margin-left: 5px;
    color: gray;
    font-size: 12px;
}
.zhk-selector .autosuggest li.current .autosuggest-zhk-section {
    color: lightgray;
}
.zhk-selector .autosuggest .wrong-city {
    color: orangered;
}
.zhk-selector .autosuggest li.current .wrong-city {
    color: #ffccba;
}