.ui-autocomplete {
    margin-left: 0!important;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 500px !important;

    span.muted{
        color: #aaa;
        font-size: 0.8rem!important;

    }

    .ui-menu-item-wrapper{
        padding: 0.8rem 4rem 0.8rem 1.5rem!important;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        position: relative;

        &:hover{
            background-color: #58A617;
            border-top: 1px solid #58A617;
            border-bottom: 1px solid #58A617;
        }
        &:hover span.muted{
            color: #fff!important;
        }

        &::after{
            font: var(--fa-font-solid);
            content: '\f105';
            width: 1rem;
            height: 1rem;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-left: 5px;
            transform: translateY(-50%);
        }

    }



    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
        border: 1px solid #58A617!important;
        border-left: none!important;
        border-right: none!important;

        background: #58A617!important;
        color: #fff;
        margin: 0!important;
    }


}

.autocomplete-icon{
    display: flex;
    width: 2.3rem;
    position: relative;


    &.search::after{
        display: flex;
        font: var(--fa-font-regular);
        content: '\f002';
        left: 50%;
        top: 50%;
        position: absolute;
        color: #777;
        transform: translateY(-50%) translateX(-50%);
    }

    &.preload::after{
        display: flex;
        font: var(--fa-font-regular);
        content: '\f110';
        left: 50%;
        top: 50%;
        position: absolute;
        color: #777;
        transform: translateY(-50%) translateX(-50%);
        animation: rotate 2s linear infinite;
    }

    &.found::after{
        display: flex;
        font: var(--fa-font-regular);
        /*content: '\f05e';*/
        content: '\f058';
        left: 50%;
        top: 50%;
        position: absolute;
        color: #777;
        transform: translateY(-50%) translateX(-50%);

    }
    &.nothing::after{
        display: flex;
        font: var(--fa-font-regular);
        /*content: '\f05e';*/
        content: '\e384';
        left: 50%;
        top: 50%;
        position: absolute;
        color: #777;
        transform: translateY(-50%) translateX(-50%);

    }

    &.typing::after{
        display: flex;
        font: var(--fa-font-regular);
        content: '\e211';
        left: 50%;
        top: 50%;
        position: absolute;
        color: #777;
        transform: translateY(-50%) translateX(-50%);
    }


}



@keyframes rotate {
    100% {
        transform: translateY(-50%) translateX(-50%) rotate(360deg);
    }
}



/*media max 540*/
@media (max-width: 540px) {
    .ui-autocomplete {
        margin-left: -80px !important;
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100% !important;
    }
}