﻿.ui-menu.ui-autocomplete {
    border-radius: .25rem;
}

    .ui-menu.ui-autocomplete li:first-child > div {
        border-radius: .25rem .25rem 0 0 !important;
    }

    .ui-menu.ui-autocomplete li:last-child > div {
        border-radius: 0 0 .25rem .25rem !important;
    }



.autocomplete-element-wrapper {
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 35px;
}

.autocomplete-element {
    position: absolute;
    font-weight: 400;
    color: #FFF;
    padding: 2px 22px 2px 10px;
    margin-top: 5px;
    margin-left: 5px;
    background-color: #007bff;
    border-color: #007bff;
    border-radius: .25rem;
    left: 0;
    max-width: calc(100% - 3.25rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover .autocomplete-element {
    padding: 2px 20px 2px 5px;
    margin-top: 3px;
    margin-left: 4px;
    max-width: calc(100% - 2.5rem);
}

.autocomplete-element .clear-autocomplete {
    font-size: 15px;
    line-height: 15px;
    opacity: 1;
    cursor: pointer;
    color: #FFF;
    text-shadow: none;
    float: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    text-align: center;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0 .25rem .25rem 0;
}

    .autocomplete-element .clear-autocomplete:hover {
        background-color: rgba(0,0,0,.2);
    }

.aspNetDisabled + .autocomplete-element-wrapper .autocomplete-element {
    padding: 2px 10px 2px 10px;
}

    .aspNetDisabled + .autocomplete-element-wrapper .autocomplete-element .clear-autocomplete {
        display: none;
    }

@media screen and (max-width: 512px) {
    .autocomplete-element {
        padding: 2px 22px 2px 10px;
    }

        .autocomplete-element .clear-autocomplete {
            line-height: 18px;
        }
}

.autocomplete-sm .autocomplete-element-wrapper .autocomplete-element {
    padding: 2px 20px 2px 5px;
    margin-top: 3px;
    margin-left: 4px;
}


@media screen and (max-width: 650px) {
    .material-autocomplete-custom li:first-child {
        margin-bottom: 5px;
    }

    .material-autocomplete-custom li {
        display: block !important;
    }

    .padding-bottom-45-xs {
        padding-bottom: 45px !important;
    }
}

@media screen and (max-width: 424px) {
    .material-autocomplete-custom li .autocomplete-sm input[type=text] {
        width: 170px;
    }

    .material-autocomplete-custom li .input-group-prepend .input-group-text, .material-autocomplete-custom li .input-group-append .input-group-text {
        padding-left: .3rem;
        padding-right: .3rem;
    }

    .material-autocomplete-custom li .RATIOCUSTOM {
        width: 61px !important;
    }

    .material-autocomplete-custom li .input-group-append .btn {
        padding-left: .43rem !important;
        padding-right: .43rem !important;
    }
}
