body {
font-family: 'Helvetica Neue';
font-size: 18px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
label {
color: var(--text-color);
font-size: 18px;
display: inline-block;
margin: .375em;
}
input[type="radio"], input[type="checkbox"] {
display: inline-block;
margin: 0 .33em 0 0;
accent-color: var(--purple-800-brand);
}
input[type="radio"]:disabled, input[type="checkbox"]:disabled {
cursor: not-allowed;
}
input[type="radio"]:focus, input[type="checkbox"]:focus {
outline-color: var(--purple-800-brand);
}
.radio-header, .checkbox-header {
margin: .5em 0 0;
color: var(--gray-800);
}
.horizontal-group label {
margin: .375em;
}
.vertical-group label {
display: block;
}
select {
display: block;
color: var(--text-color);
border-color: var(--text-color);
border-radius: 6px;
font-size: 18px;
padding: .25em 1em .25em .25em;
}
select:hover {
border-color: var(--gray-800);
}
select:focus{
border-color: var(--purple-800-brand);
}
select:focus-visible {
outline-color: var(--purple-800-brand);
}
select:disabled {
cursor: not-allowed;
border: none;
background-color: var(--disabled-color);
opacity: 75%;
}