.checkbox__container {
    display: flex;
    align-items: flex-start;
    gap: calc(12/16 * 1rem);
}

.checkbox__container.with-error {
    color: red !important;
}

.zwilling-input[type="checkbox"] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    bottom: -2px;
    vertical-align: middle;
}

.zwilling-input[type="checkbox"]:checked {
    appearance: none;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M20.3007 6.47321C20.5936 6.7661 20.5936 7.24098 20.3007 7.53387L8.92285 18.9117L4.69928 14.6882C4.40639 14.3953 4.40639 13.9204 4.69928 13.6275C4.99218 13.3346 5.46705 13.3346 5.75994 13.6275L8.92285 16.7904L19.2401 6.47321C19.533 6.18032 20.0078 6.18032 20.3007 6.47321Z" fill="black"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
    border-radius: 2px;
    width: 24px;
    height: 24px;
    position: relative;
    bottom: -2px;
    vertical-align: middle;
    border: 1px solid #342d27;
}