* {
    scrollbar-width: thin;
    scrollbar-color: #bbb #eee;
}

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: #c0c3c6;
}

*::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #c0c3c6;
}

input[list] {
    height: auto;
    border: 1px solid #bfc9d4;
    color: #3b3f5c;
    font-size: 15px;
    padding: 8px 10px;
    letter-spacing: 1px;
    height: calc(1.4em + 1.4rem + 2px);
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    display: block;
    width: 100%;
}
input[list]:focus {
    outline: none;
}
input[list] + div[list],
div[list-group] + div > div[list] {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 164px;
    overflow-y: auto;
    max-width: 550px;
    background: #fff;
    border: var(--border);
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 3px 3px -3px #333;
    z-index: 100;
}
input[list] + div[list] span,
div[list-group] + div > div[list] span {
    display: block;
    padding: 7px 5px 7px 20px;
    color: #069;
    text-decoration: none;
    cursor: pointer;
}
input[list] + div[list] span:not(:last-child),
div[list-group] + div > div[list] span:not(:last-child) {
    border-bottom: 1px solid #eee;
}
input[list] + div[list] span:hover,
div[list-group] + div > div[list] span:hover {
    background: rgba(100, 120, 140, 0.2);
}
/*  */

div[list-group] + div > div[list] {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}