.TypeaheadInput_input {
    /*overflow: hidden;*/
    /*flex: 1;*/
    /*flex-basis: auto;*/
    /*display: inline-block;*/

    @media (prefers-color-scheme: dark) {
        color: white !important;
        border: var(--dark-brown-color) !important;
    }
}

.TypeaheadInput_container {
    background: transparent;
    min-width: 10px;
    display: inline-flex !important;
    flex-basis: 10px;
    text-align: left;
    float: none;
}

.TypeaheadInput_query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.TypeaheadInput_menu {
    position: absolute;
    z-index: 100;
    display: none;
    max-height: 80vh;
    /*
    `max-width: 90vw` is a kludge to prevent the menu to moving off the screen and stretching the whole page.
    We don't use 100wv because menu can be offset from the left side of the screen.
    Ideally to completely prevent this issue from happening we need to set it to 50vw or less
    for the case when the menu appear inside the searchbox when the menu left edge is close to the center of the screen.
    */
    max-width: 90vw;
    margin-top: 50px;
    margin-right: -500px; /* allow popup menu to be much wider than the parent TypeaheadInput_container container */
    padding: 8px 0;
    overflow-y: auto;
    scrollbar-width: thin !important;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

    @media (prefers-color-scheme: dark) {
        background: var(--dark-brown-color) !important;
    }
}

.TypeaheadInput_menu::-webkit-scrollbar {
    width: 9px;
}

.TypeaheadInput_menuOpen {
    display: block;
}

.TypeaheadInput_suggestion {
    cursor: default;
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.TypeaheadInput_suggestion.TypeaheadInput_cursor {
    color: #fff;
    background-color: #0097cf;
}

.TypeaheadInput_suggestion p {
    margin: 0;
}

.TypeaheadInput_highlight {
    font-weight: bold;
}