/* autocomplete.css */

/* Style for the autocomplete items container */
.autocomplete-items {
    position: absolute;
    border: 1px solid #999;
    background-color: #fff;
    z-index: 99;
    max-height: 200px; /* Optional: limit the height of the dropdown */
    overflow-y: auto; /* Optional: add scroll if needed */
    border-radius: 5px; /* Match the input field's border radius */
}

/* Style for each autocomplete item */
.autocomplete-items div {
    width: 450px;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    background: #fdfdfd; /* Match the input field's background */
    color: #62707f; /* Match the input field's color */
    border-radius: 5px; /* Match the input field's border radius */
    box-sizing: border-box; /* Ensure padding and border are included in total width */
    transition: .2s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
}

/* Highlight the item on hover */
.autocomplete-items div:hover {
    background-color: #e0e0e0; /* Slightly different color for hover effect */
}

/* Style for the active item */
.autocomplete-active {
    background-color: #ddd;
    color: #000;
}

/* Ensure the autocomplete field looks consistent */
.autocomplete-input {
    height: 35px;
    vertical-align: middle;
    display: inline-block;
    border: 0 none;
    padding: 0 20px;
    background: #fdfdfd;
    color: #62707f;
    transition: .2s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    border-radius: 5px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}