.checkbox {
    align-items: center;
    display: flex;
    padding: 0 4px;
}

.checkbox.yesno { width: 100%; }

.checkbox .text {
    flex: auto;
    font-weight: 600;
}

.checkbox:not(.yesno) .text { cursor: pointer; }

.checkbox .status {
    background-color: #fff;
    border: 1px solid #cdcdcd;
    cursor: pointer;
    flex: 16px 0 0;
    height: 16px;
    width: 16px;
}

.checkbox .status.disabled {
    opacity: 0.25;
    cursor: default;
}

.checkbox .status + .text { margin-left: 0.35rem; }

.checkbox .status + .status-label { margin-left: 0.5rem; }

.checkbox .status-label + .status { margin-left: 0.2rem; }

.checkbox .status-label { cursor: pointer; }
.checkbox .status-label.disabled {
    opacity: 0.25;
    cursor: default;
}

.checkbox .status.selected { border: none; }

.checkbox .status.yes.selected {
    background-color: #39f;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3e %3cpath fill='white' d='M8.23 3.14q.12.12.12.3 0 .17-.12.3L5.1 6.85l-.6.58q-.1.12-.28.12-.17 0-.3-.12l-.58-.58L1.77 5.3q-.12-.13-.12-.3 0-.17.12-.3l.6-.58q.1-.12.3-.12.16 0 .28.12L4.22 5.4l2.83-2.84q.12-.12.3-.12.17 0 .3.12z'/%3e %3c/svg%3e");
}

.checkbox .status.no.selected {
    background-color: #e11f21;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3e %3cpath fill='white' d='M7.7 6.4q.14.14.14.33 0 .2-.13.33l-.64.65q-.14.14-.33.14-.2 0-.32-.13L5 6.3 3.6 7.7q-.14.14-.33.14-.2 0-.33-.13l-.65-.64q-.14-.14-.14-.33 0-.2.13-.32L3.7 5 2.3 3.6q-.14-.14-.14-.33 0-.2.13-.33l.64-.65q.14-.14.33-.14.2 0 .32.13L5 3.7l1.4-1.4q.14-.14.33-.14.2 0 .33.13l.65.64q.14.14.14.33 0 .2-.13.32L6.3 5z'/%3e %3c/svg%3e");
}