/*     ----==== TYPEAHEAD (part of common.css in canonical utilmind's distro) ====----
   AK 1.11.2021: I thought to move this into separate CSS and use it with delay, as <link rel="preload">.
   However we need the following statement to avoid FOUC.
   So let it be, let's use it all as common CSS.
*/
/* Fixx for twitter-typeahead from https://github.com/twitter/typeahead.js/issues/302 */
.input-group > .twitter-typeahead {
    position: relative;
    /*-ms-flex: 1 1 auto;
    -webkit-box-flex: 1;*/
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.input-group > .twitter-typeahead:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .twitter-typeahead > .tt-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-control.tt-input:focus {
    z-index: 3;
}

/* Fixx input background on FireFox only */
.tt-input::-moz-selection {
    color: #FFF;
    background: #3390FF;
}


/* More typeahead styles */
.tt-hint {
    color: #999 !important; /* important to override form-control. BTW, it's good for use as input.tt-hint, to display suggestions. */
}

.tt-menu {
    background-color: #fff;
/*  border: 1px solid #ccc; */
    border: 1px solid rgba(0, 0, 0, 0.2);
/*
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
*/
    border-radius: 0 0 8px 8px;
/*
    -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);

    min-width: 100%;
    z-index: 1201 !important; /* it must be at least +1 level above sidebar with z-index 1200. */
}

@media (max-width: 768px) { /* SM */
    /* typeahead on small screens.
        (Full width of viewport) - (width of left logo) - (some margins)
        */
    .tt-menu {
        min-width: calc(100vw - 80px);
    }
}

@media (max-width: 420px) { /* XXS? */
    /* typeahead on small screens.
        (Full width of viewport) - (little padding).
        */
    .tt-menu {
        min-width: calc(100vw - 8px);
    }
}

.tt-dataset {
    font-size: 18px; /* ~1.28em */
    line-height: 24px; /* ~1.5rem; */
}

.tt-dataset > .s {
    /* don't touch padding. It's already padding: 3px 20px. */
    border-top: 1px solid rgba(0, 0, 0, 0.2); /* Bootstrap's <hr> has opacity 0.1, I want this line just little bit better visible. */
    font-size: 0.86em; /* if there is no main list, then better use 0.9em instead */
    padding-top: 4px;
    padding-bottom: 4px;

    background-color: #f4f4f4; /* will be overriden by .tt-cursor and it's okay. */
}
.tt-dataset > .s:first-child,
.tt-dataset > .s ~ .s {
    border: none;
}

.tt-suggestion {
    padding: 3px 20px;
}

.tt-suggestion div.sub {
    color: #343a40; /* bootstrap's text-dark. Also not bad #333 -- little bit muted. */
    font-size: .8em;
}

.tt-highlight {
    color: #212529; /* same as Bootstrap4 body color */
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf; /*#85993C; /* #0097cf; */
}
.tt-suggestion:hover *,
.tt-suggestion.tt-cursor * { /* all selected text (with mouse or keyboard) must be white (including .tt-highlight), if not overriden below. */
    color: #fff !important;
}
.tt-suggestion:hover div.sub,
.tt-suggestion.tt-cursor div.sub {
    color: #eee !important; /* important to override #fff !important */
}
.tt-suggestion:hover .text-muted,
.tt-suggestion:hover .text-muted-p1,
.tt-suggestion.tt-cursor .text-muted,
.tt-suggestion.tt-cursor .text-muted-p1 {
    color: #ccc !important; /* important to override #fff !important */
}