/* checked 预先选定复选框或单选按钮。*/
.cn-check::before {
    display: block;
    font-family: 'Material Icons';
    font-display: auto;
    content: attr(checked-char);
    text-align: center;
    font-size: 0.8em;
    line-height: 1rem;
    height: 1rem;
    color: white;
}
.cn-check[checked='false']::before {
    color: gray;
}
.cn-check.indeterminate::before {
    content: '-';
}
.cn-check[checked='true'] {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.cn-form-check {
}

[type='range'] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
}
[type='range']::-webkit-slider-runnable-track {
    height: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
[type='range' i]::-webkit-slider-container {
    height: 20px;
    overflow: hidden;
}
[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid transparent;
    margin-top: -6px;
    border-image: linear-gradient(var(--range-color, #3b82f6), var(--range-color, #3b82f6)) 0 fill /
        8 16 8 0 / 0px 0px 0 100vw;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
