.c-auto-complete{
    display: inline-block;
    position: relative;
    width: 210px;

    font-size: 11px;
}

.c-auto-complete::after{
    position: absolute;
    top: 3px;
    right: 3px;
    content: url(//s5o.ru/common/images/core/loader-16x16.gif);

    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility 0ms linear 50ms, opacity 40ms linear 10ms;
    transition: visibility 0ms linear 50ms, opacity 40ms linear 10ms;
}
.c-auto-complete.m-state_loading::after{
    visibility: visible;
    opacity: 1;

    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}

.c-auto-complete__input{
    border: none;
    margin: 0;
    display: inline-block;
    border-radius: 2px;
    padding: 5px 8px;
    background: #fff;
    width: 100%;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.c-auto-complete__input:focus{
    outline: -webkit-focus-ring-color auto 3px;
}

.c-auto-complete__results{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 11;
    margin-top: 3px;
    font-weight: normal;
    background: #fff;
    box-shadow: 0 0 3px #323232;
    font-size: 11px;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility 0ms linear 80ms, opacity 80ms linear;
    transition: visibility 0ms linear 80ms, opacity 80ms linear;
}
.c-auto-complete__results.m-state_shown{
    visibility: visible;
    opacity: 1;

    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}

.c-auto-complete__result{
    padding: 4px 8px;
    border-bottom: 1px solid #d8d8d8;
    cursor: pointer;

    -webkit-transition: background-color 40ms linear;
    transition: background-color 40ms linear;
}
.c-auto-complete__result:last-child{
    border-bottom: none;
}
.c-auto-complete__result.m-state_active{
    background-color: #e7e7e7;
}