﻿.autocomplete-container {
    position: relative;
}

    .autocomplete-container.loading input {
        background-image: url('/Css/ajax-loader.gif');
        background-repeat: no-repeat;
        background-size: 22px;
        background-position: 7px;
    }

ul.autocomplete-results {
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    height: 0;
    line-height: 0;
    opacity: 0;
    z-index: 3;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    background: white;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 0.8em;
}

    ul.autocomplete-results.has-results {
        height: 140px;
        line-height: 1.5;
        opacity: 1;
        box-shadow: 0 3px 7px rgba(0,0,0,0.3);
        margin-top: -1px;
    }

    ul.autocomplete-results li {
        cursor: pointer;
        padding: 2px 5px;
    }

        ul.autocomplete-results li:hover {
            background: #ccc;
        }

        ul.autocomplete-results li.selected {
            background: #2b358f;
            color: #fff;
        }

.autocomplete-container .error-message {
    display: none;
    color: red;
    text-align: center;
    padding: 5px;
    font-size: 0.8em;
    background-color: yellow;
    border: 1px solid red;
    border-top: none;
    margin-bottom: 3px;
}

.input-container.has-error {
    margin-bottom: 0;
}

.autocomplete-container.has-error .error-message {
    display: block;
}

.autocomplete-container.has-error .input-box {
    border: 1px solid red !important;
}

@media only screen and (max-device-width:1020px) {
    .address-select .input-container {
          margin-bottom: 2.7em;
    }

    .input-container.has-error {
        margin-bottom: 0;
    }

    .autocomplete-container.has-error .input-box {
        border: 2px solid red !important;
    }

    
    .autocomplete-container .error-message {
        font-size: 1.8em;
        border: 2px solid red;
        padding: 0.2em;
    }

    .address-select .action-button-row.loading .action-button-loader {
        height: 5em;
        background-size: 4.5em;
    }

    ul.autocomplete-results.has-results {
        height: 15em;
    }

    ul.autocomplete-results li {
        font-size: 2em;
    }

    
}
