.autocomplete__wrapper { position: relative; } .autocomplete__hint, .autocomplete__input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; line-height: 1.25; box-sizing: border-box; width: 100%; height: 40px; padding: 5px; border: 2px solid #0b0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom: 0; } .autocomplete__input { background-color: transparent; position: relative; } .autocomplete__hint { color: #BFC1C3; position: absolute; } .autocomplete__input--default{ padding: 4px; } .autocomplete__input--focused, .autocomplete__input:focus { outline-offset: 0; outline: 3px solid #ffbf47; } .autocomplete__input--show-all-values { padding: 4px 34px 4px 4px; cursor: pointer; } .autocomplete__dropdown-arrow-down{ z-index: -1; display: inline-block; position: absolute; right: 8px; width: 24px; height: 24px; top: 10px; } .autocomplete__menu { background-color: #fff; border: 2px solid #0B0C0C; border-top: 0; color: #34384B; margin: 0; max-height: 342px; overflow-x: hidden; padding: 0; width: 100%; width: calc(100% - 4px); } .autocomplete__menu--visible { display: block; } .autocomplete__menu--hidden { display: none; } .autocomplete__menu--overlay { box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px; left: 0; position: absolute; top: 100%; z-index: 100; } .autocomplete__menu--inline { position: relative; } .autocomplete__option { border-bottom: solid #BFC1C3; border-width: 1px 0; cursor: pointer; display: block; position: relative; } .autocomplete__option > * { pointer-events: none; } .autocomplete__option:first-of-type { border-top-width: 0; } .autocomplete__option:last-of-type { border-bottom-width: 0; } .autocomplete__option--odd { background-color: #FAFAFA; } .autocomplete__option--focused, .autocomplete__option:hover { background-color: #005EA5; border-color: #005EA5; color: white; outline: none; } .autocomplete__option--no-results { background-color: #FAFAFA; color: #646b6f; cursor: not-allowed; } .autocomplete__hint, .autocomplete__input, .autocomplete__option { font-size: 16px; line-height: 1.25; } .autocomplete__hint, .autocomplete__option { padding: 4px; } @media (min-width: 641px) { .autocomplete__hint, .autocomplete__input, .autocomplete__option { font-size: 19px; line-height: 1.31579; } } .autocomplete__list { list-style-type: none; padding: 0; margin: 20px 0 0; } .autocomplete__list .autocomplete__selected-option, .autocomplete__list .autocomplete__selected-option:hover { cursor: inherit; color: #0b0c0c; margin: 5px 0; } .autocomplete__list .autocomplete__remove-option { cursor: pointer; color: #005ea5; text-decoration: underline; background: transparent; border: none; font-size: inherit; margin-left: 5px; } .autocomplete__list .autocomplete__remove-option:hover{ color: #2b8cc4; } .autocomplete__list .autocomplete__remove-option:focus{ color: #0b0c0c; outline: 3px solid #ffbf47; outline-offset: 0; background-color: #ffbf47; } .autocomplete__list .autocomplete__remove-option:before { content: '× '; color: inherit; } .autocomplete__list-item-description { display: none; }