.checkbox {display: inline-flex;align-items: center;cursor: pointer;font-size: 16px;margin-right: 20px;}.checkbox input {display: none;}.checkbox input:checked + .checkmark {background-color: var(--primary);border-color: var(--primary);}.checkbox input:checked + .checkmark::after {content: "";position: absolute;top: 1px;left: 4px;width: 10px;height: 15px;border: solid #fff;border-width: 0 3px 3px 0;transform: rotate(45deg);}.checkbox .checkmark {width: 20px;height: 20px;border: 1px solid #ccc;border-radius: 4px;background-color: #fff;margin-right: 8px;position: relative;transition: background-color 0.2s, border-color 0.2s;}.checkbox .checkmark:hover {border-color: #999;}