body, select, input, button {font-size: 1rem; line-height: 1.4; font-family: sans-serif;}

:root {
    --large-padding: 0.5em;
    --medium-padding: 0.25em;
    --small-padding: 0.15em;
    --tiny-padding: 0.05em;
    --max-width: 400px;
}

form {max-width: var(--max-width);}
label, select, fieldset {display: block;}
label:not(:has(input)) {margin-bottom: var(--medium-padding);}
select[multiple] + .fieldset {border: 1px solid; padding: var(--small-padding) 0;}
select[multiple] + .fieldset label {padding: var(--tiny-padding) var(--medium-padding);}
select[multiple] + .fieldset label input {display: inline-block; margin-right: var(--large-padding);}
select[multiple] + .fieldset .multiselect-group {padding: var(--small-padding) var(--large-padding) var(--tiny-padding); font-weight: bold;}
select[multiple] + .fieldset hr {border: none; border-top: 1px solid; margin: var(--large-padding) 0 var(--small-padding); opacity: 0.4;}
.multiselect-native {position: relative;}
.multiselect-native:not(.is-expanded) {border: 1px solid;}
.multiselect-native:not(.is-expanded) output {display: flex; align-items: center;}
.multiselect-native:not(.is-expanded) .fieldset,
.multiselect-native.is-expanded output,
.multiselect-native.is-expanded select {display: none;}
.multiselect-native select {opacity: 0;}
.multiselect-count {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 24px;
    display: flex;
    align-items: center;
    padding: 0 var(--large-padding);
    pointer-events: none;
}
input, select, option {padding: var(--small-padding) var(--large-padding);}
select {
    border: 1px solid;
    padding-right: 24px;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 8px center;
    background-size: 8px;
    font-family: sans-serif;
}
select {
    box-sizing: border-box;
}
select[multiple] option {
    padding-top: 0;
    padding-bottom: 0;
}
label:has(button) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.multiselect-toggle {
    display: inline-block;
    padding: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    border: none;
    background: none;
    cursor: pointer;
    font-family: monospace;
}