.autoComplete_wrapper {display: inline-block;position: relative} .autoComplete_wrapper > input {width: 370px;height: 40px;padding-left: 10px;font-size: 1rem;color: rgb(116, 116, 116);border-radius: 4px;border: 1px solid rgba(33, 33, 33, 0.2);outline: none} .autoComplete_wrapper > input::placeholder {color: rgba(123, 123, 123, 0.5);transition: all 0.3s ease} .autoComplete_wrapper > ul {position: absolute;max-height: 226px;overflow-y: scroll;top: 100%;left: 0;right: 0;padding: 0;margin: 0.5rem 0 0 0;border-radius: 4px;background-color: #fff;border: 1px solid rgba(33, 33, 33, 0.1);z-index: 1000;outline: none} .autoComplete_wrapper > ul > li {padding: 10px 20px;list-style: none;text-align: left;font-size: 16px;color: #212121;transition: all 0.1s ease-in-out;border-radius: 3px;background-color: rgba(255, 255, 255, 1);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: all 0.2s ease} .autoComplete_wrapper > ul > li::selection {color: rgba(#ffffff, 0);background-color: rgba(#ffffff, 0)} .autoComplete_wrapper > ul > li:hover {cursor: pointer;background-color: rgba(123, 123, 123, 0.1)} .autoComplete_wrapper > ul > li mark {background-color: transparent;color: rgba(255, 122, 122, 1);font-weight: bold} .autoComplete_wrapper > ul > li mark::selection {color: rgba(#ffffff, 0);background-color: rgba(#ffffff, 0)} .autoComplete_wrapper > ul > li[aria-selected="true"] {background-color: rgba(123, 123, 123, 0.1)} @media only screen and (max-width: 600px) {.autoComplete_wrapper > input {width: 18rem} }