.selectbox {
    color: #666;
    margin: 0;
    inset: unset;
    border: 1px solid #aaa;
    box-shadow: 0 0 1em 0 #0003;
    padding: 0;
    overflow: hidden;
}

.selectbox ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.selectbox li {
    cursor: pointer;
    padding: .25em 1em;
}

.selectbox li:hover,
.selectbox li:focus {
    background-color: #a2d2ff;
}

.selectbox li.selected {
    opacity: .25;
    background-color: transparent;
}

div.selectbox header {
    padding: .5em;
    margin: 0;
    border-bottom: 1px solid #ddd;
    background-color: #f1f1f1;
    position: relative;
}

div.selectbox header input {
    width: 100%;
}

div.selectbox header i {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: 0;
}

div.selectbox main {
    padding: 0;
    max-height: 200px;
    overflow: auto;
    min-width: 200px;
}

.selectbox-values {
    padding: .25em;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
    border: 1px solid #ccc;
}

.selectbox-values span {
    display: block;
    padding: .25em 0 .25em 1em;
    border: 1px solid #ccc;
    border-radius: .25em;
    background: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
}

.selectbox-values span a {
    cursor: pointer;
    color: #0003;
    padding: .25em;
}

.selectbox-values span a:hover {
    color: inherit;
}

/*div.selectbox.touch {
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

div.selectbox.touch::backdrop {
    background-color: #0005;
}*/