html body .rd-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--color-med-grey);
    padding: 0;
    appearance: none;
    cursor: pointer;
    &:checked {
        background-color: var(--color-brand-orange);
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none"><path fill="%23fff" d="M15.702.217a.838.838 0 0 1 .074 1.21L6.282 11.711a.89.89 0 0 1-.666.288.919.919 0 0 1-.665-.288L.206 6.57a.836.836 0 0 1 .093-1.188.91.91 0 0 1 1.236.05l4.082 4.422L14.446.287a.911.911 0 0 1 1.256-.07Z"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        border-color: var(--color-brand-orange);
    }
}
.rd-checkbox:focus {
    outline: none !important;
}
.rd-checkbox:focus-visible {
    outline: 5px auto -webkit-focus-ring-color !important;
}