:root {
    --wsf-field-checkbox-color-background: var(--wsf-field-color-background); 
    --wsf-field-checkbox-checked-color-background: var(--wsf-form-color-accent);
    --wsf-field-checkbox-checkmark-color: var(--wsf-form-color-base-contrast);
    --wsf-field-checkbox-border-radius: var(--wsf-field-border-radius);
    --wsf-field-checkbox-gap-horizontal: 6px;
    --wsf-field-checkbox-gap-vertical: 10px;
    --wsf-field-checkbox-button-color: var(--wsf-form-color-base);
    --wsf-field-checkbox-checked-button-color-background: var(--wsf-form-color-accent);
    --wsf-field-checkbox-checked-button-color: var(--wsf-form-color-base-contrast);
    --wsf-field-checkbox-checked-switch-color-background: var(--wsf-form-color-accent);
    --wsf-field-checkbox-checked-switch-color: var(--wsf-form-color-base-contrast);
    --wsf-field-checkbox-checked-swatch-border-color: var(--wsf-form-color-primary);
    --wsf-field-checkbox-checked-swatch-box-shadow-color: var(--wsf-form-color-base-contrast);
    --wsf-field-checkbox-checked-image-border-color: var(--wsf-form-color-primary);
    --wsf-field-checkbox-checked-image-box-shadow-color: var(--wsf-form-color-base-contrast);   
    --wsf-field-checkbox-check-height: calc(var(--wsf-field-checkbox-size) / 1.6);
    --wsf-field-checkbox-check-size: calc(var(--wsf-field-checkbox-size) / 6);
    --wsf-field-checkbox-check-width: calc(var(--wsf-field-checkbox-size) / 3.3);
    --wsf-field-checkbox-size: calc(var(--wsf-field-font-size) * var(--wsf-field-line-height));
    --wsf-field-checkbox-switch-color: var(--wsf-field-checkbox-checked-switch-color-background);
    --wsf-field-checkbox-switch-size: calc(var(--wsf-field-checkbox-size) * 0.8);
    --wsf-field-checkbox-switch-width: calc(var(--wsf-field-checkbox-size) * 1.8);
}

.wsf-form [data-row-checkbox] {
    position: relative;
}

.wsf-form input[type=checkbox].wsf-field {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--wsf-field-checkbox-color-background);
    border-radius: var(--wsf-field-checkbox-border-radius);
    bottom: auto;
    border: var(--wsf-field-border);
    display: block;
    height: var(--wsf-field-checkbox-size);
    margin: 0;
    min-height: var(--wsf-field-checkbox-size);
    opacity: 1;
    padding: 0;
    position: absolute;
    text-align: left;
    top: 1px;
    vertical-align: middle;
    width: var(--wsf-field-checkbox-size);
}

.wsf-form input[type=checkbox].wsf-field:checked {
    background-color: var(--wsf-field-checkbox-checked-color-background);
    border-color: var(--wsf-field-checkbox-checked-color-background);
}

.wsf-form input[type=checkbox].wsf-field:checked::after {
    background: none;
    border-color: var(--wsf-field-checkbox-checkmark-color);
    border-style: solid;
    border-width: 0 var(--wsf-field-checkbox-check-size) var(--wsf-field-checkbox-check-size) 0;
    content: "";
    display: block;
    height: var(--wsf-field-checkbox-check-height);
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-transform: translate(calc( (var(--wsf-field-checkbox-size) / 2) - (var(--wsf-field-checkbox-check-width) / 2) - var(--wsf-field-border-width)), calc( (var(--wsf-field-checkbox-size) / 2) - (var(--wsf-field-checkbox-check-height) / 2) - (var(--wsf-field-border-width) + 1px))) rotate(45deg);
    transform: translate(calc( (var(--wsf-field-checkbox-size) / 2) - (var(--wsf-field-checkbox-check-width) / 2) - var(--wsf-field-border-width)), calc( (var(--wsf-field-checkbox-size) / 2) - (var(--wsf-field-checkbox-check-height) / 2) - (var(--wsf-field-border-width) + 1px))) rotate(45deg);
    transition: none;
    width: var(--wsf-field-checkbox-check-width)
}

.wsf-form input[type=checkbox].wsf-field::before {
    display: none !important
}

.wsf-form input[type=checkbox].wsf-field+label.wsf-label {
    display: inline-block;
    margin-left: calc(var(--wsf-field-checkbox-size) + var(--wsf-field-checkbox-gap-horizontal));
    margin-top: 0;
    line-height: var(--wsf-field-checkbox-size);
    font-weight: 400 !important;
}

.wsf-form input[type=checkbox].wsf-field:hover:enabled:not(:checked):not(:focus) {
    background-color: var(--wsf-field-color-background-hover);
    border-color: var(--wsf-field-border-color-hover)
}

.wsf-form input[type=checkbox].wsf-field:focus {
    border-color: var(--wsf-field-border-color-focus);
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field:disabled {
    cursor: not-allowed;
    opacity: .5
}

.wsf-form input[type=checkbox].wsf-field:disabled+label.wsf-label {
    cursor: not-allowed;
    opacity: .5
}

.wsf-form input[type=checkbox].wsf-field.wsf-button,.wsf-form input[type=checkbox].wsf-field.wsf-switch,.wsf-form input[type=checkbox].wsf-field.wsf-swatch {
    background: none;
    border: none;
    bottom: auto;
    left: auto;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: auto;
    top: auto
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label,.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label,.wsf-form input[type=checkbox].wsf-field.wsf-swatch+label.wsf-label {
    margin: 0;
    padding: 0
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-swatch+label.wsf-label::before {
    background-color: var(--wsf-field-color-background);
    border: var(--wsf-field-border);
    border-radius: var(--wsf-field-border-radius);
    box-sizing: border-box;
    content: '';
    cursor: pointer;
    display: inline-block;
    height: var(--wsf-field-checkbox-size);
    left: 0;
    position: absolute;
    vertical-align: top;
    width: var(--wsf-field-checkbox-size)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label::after,.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label::after,.wsf-form input[type=checkbox].wsf-field.wsf-swatch+label.wsf-label::after {
    box-sizing: border-box;
    content: '';
    cursor: pointer;
    display: inline-block;
    height: var(--wsf-field-checkbox-size);
    left: 0;
    position: absolute;
    top: 0;
    vertical-align: top;
    width: var(--wsf-field-checkbox-size)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label+.wsf-invalid-feedback,.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label+.wsf-invalid-feedback,.wsf-form input[type=checkbox].wsf-field.wsf-swatch+label.wsf-label+.wsf-invalid-feedback {
    margin-bottom: var(--wsf-field-invalid-feedback-gap);
    margin-top: calc(-1 * var(--wsf-field-invalid-feedback-gap))
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:hover:not(:focus):not(:checked)+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-switch:hover:not(:focus):not(:checked)+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-swatch:hover:not(:focus):not(:checked)+label.wsf-label::before {
    background-color: var(--wsf-field-color-background-hover);
    border-color: var(--wsf-field-border-color-hover)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:focus+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-switch:focus+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-swatch:focus+label.wsf-label::before {
    border-color: var(--wsf-field-border-color-focus);
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:disabled+label.wsf-label,.wsf-form input[type=checkbox].wsf-field.wsf-switch:disabled+label.wsf-label,.wsf-form input[type=checkbox].wsf-field.wsf-swatch:disabled+label.wsf-label {
    color: var(--wsf-field-checkbox-button-color)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:disabled+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-switch:disabled+label.wsf-label::before,.wsf-form input[type=checkbox].wsf-field.wsf-swatch:disabled+label.wsf-label::before {
    background-color: var(--wsf-field-color-background-disabled);
    border-color: var(--wsf-field-border-color-disabled);
    cursor: not-allowed;
    opacity: .5
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:disabled+label.wsf-label::after,.wsf-form input[type=checkbox].wsf-field.wsf-switch:disabled+label.wsf-label::after,.wsf-form input[type=checkbox].wsf-field.wsf-swatch:disabled+label.wsf-label::after {
    cursor: not-allowed
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label {
    background-color: var(--wsf-field-checkbox-button-color-background);
    border-color: var(--wsf-field-checkbox-button-color-background);
    border-radius: var(--wsf-field-border-radius);
    color: var(--wsf-field-checkbox-button-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--wsf-field-font-family);
    font-size: var(--wsf-field-font-size);
    font-weight: var(--wsf-field-font-weight);
    line-height: var(--wsf-field-line-height);
    padding: var(--wsf-field-padding);
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label::before {
    display: none
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label::after {
    display: none
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:focus+label.wsf-label {
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:disabled+label.wsf-label {
    cursor: not-allowed;
    opacity: .5
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:checked+label.wsf-label {
    background-color: var(--wsf-field-checkbox-checked-button-color-background);
    border-color: var(--wsf-field-checkbox-checked-button-color-background);
    color: var(--wsf-field-checkbox-checked-button-color)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button:checked:focus+label.wsf-label {
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button.wsf-button-full+label.wsf-label {
    display: block
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch {
    width: var(--wsf-field-checkbox-switch-width)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label {
    position: relative;
    -webkit-padding-start: calc(var(--wsf-field-checkbox-switch-width) + var(--wsf-field-checkbox-gap-horizontal));
    padding-inline-start:calc(var(--wsf-field-checkbox-switch-width) + var(--wsf-field-checkbox-gap-horizontal))}

.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label::before {
    border-radius:calc(var(--wsf-field-checkbox-size) / 2);
    width: var(--wsf-field-checkbox-switch-width)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label::after {
    background-color: var(--wsf-field-checkbox-switch-color);
    border: none;
    border-radius: 50%;
    height: var(--wsf-field-checkbox-switch-size);
    left: calc((var(--wsf-field-checkbox-size) - var(--wsf-field-checkbox-switch-size)) / 2);
    top: calc((var(--wsf-field-checkbox-size) - var(--wsf-field-checkbox-switch-size)) / 2);
    width: var(--wsf-field-checkbox-switch-size)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch:hover:enabled:not(:checked):not(:focus)+label.wsf-label::after {
    border-color: var(--wsf-field-border-color-hover)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch:focus+label.wsf-label::after {
    border-color: var(--wsf-field-border-color-focus)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch:disabled+label.wsf-label::after {
    border-color: var(--wsf-field-border-color-disabled)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch:checked+label.wsf-label::before {
    background-color: var(--wsf-field-checkbox-checked-switch-color-background);
    border-color: var(--wsf-field-checkbox-checked-switch-color-background)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch:checked+label.wsf-label::after {
    background-color: var(--wsf-field-checkbox-checked-switch-color);
    left: calc(var(--wsf-field-checkbox-switch-width) - var(--wsf-field-checkbox-switch-size) - ((var(--wsf-field-checkbox-size) - var(--wsf-field-checkbox-switch-size)) / 2))
}

.wsf-form input[type=checkbox].wsf-field.wsf-color {
    display: none
}

.wsf-form input[type=checkbox].wsf-field.wsf-color+label.wsf-label {
    margin-left: 0;
    padding-left: 0;
    position: relative
}

.wsf-form input[type=checkbox].wsf-field.wsf-color+label.wsf-label::before {
    display: none
}

.wsf-form input[type=checkbox].wsf-field.wsf-color+label.wsf-label::after {
    display: none
}

.wsf-form input[type=checkbox].wsf-field.wsf-color+label.wsf-label>span {
    border: var(--wsf-field-border);
    border-radius: var(--wsf-field-border-radius);
    cursor: pointer;
    display: inline-block;
    height: var(--wsf-field-height);
    vertical-align: middle;
    width: var(--wsf-field-height)
}

.wsf-form input[type=checkbox].wsf-field.wsf-color.wsf-circle+label.wsf-label>span {
    border-radius: 50%
}

.wsf-form input[type=checkbox].wsf-field.wsf-color:hover:enabled:not(:checked):not(:focus)+label.wsf-label>span {
    background-color: var(--wsf-field-color-background-hover);
    border-color: var(--wsf-field-border-color-hover)
}

.wsf-form input[type=checkbox].wsf-field.wsf-color:focus+label.wsf-label>span {
    background-color: var(--wsf-field-color-background-focus);
    border-color: var(--wsf-field-border-color-focus);
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field.wsf-color:disabled+label.wsf-label>span {
    cursor: not-allowed;
    opacity: .5
}

.wsf-form input[type=checkbox].wsf-field.wsf-color:checked+label.wsf-label>span {
    border-color: var(--wsf-field-checkbox-checked-swatch-border-color);
    box-shadow: inset 0 0 0 2px var(--wsf-field-checkbox-checked-swatch-box-shadow-color)
}

.wsf-form input[type=checkbox].wsf-field.wsf-image {
    display: none
}

.wsf-form input[type=checkbox].wsf-field.wsf-image+label.wsf-label {
    margin-left: 0;
    padding-left: 0;
    position: relative
}

.wsf-form input[type=checkbox].wsf-field.wsf-image+label.wsf-label>img {
    background-color: var(--wsf-field-color-background);
    border: var(--wsf-field-border);
    border-radius: var(--wsf-field-border-radius);
    cursor: pointer;
    display: inline-block;
    height: auto;
    max-width: 100%;
    padding: 2px;
    vertical-align: middle
}

.wsf-form input[type=checkbox].wsf-field.wsf-image+label.wsf-label .wsf-image-caption {
    color: var(--wsf-field-help-color);
    display: block;
    font-size: var(--wsf-field-font-size-small);
    line-height: var(--wsf-field-line-height);
    margin-top: var(--wsf-form-caption-gap)
}

.wsf-form input[type=checkbox].wsf-field.wsf-image.wsf-circle+label.wsf-label>img {
    border-radius: 50%
}

.wsf-form input[type=checkbox].wsf-field.wsf-image.wsf-responsive+label.wsf-label>img {
    height: auto;
    max-width: 100%;
    width: 100%
}

.wsf-form input[type=checkbox].wsf-field.wsf-image.wsf-image-full+label.wsf-label {
    width: 100%
}

.wsf-form input[type=checkbox].wsf-field.wsf-image:hover:enabled:not(:checked):not(:focus)+label.wsf-label>img {
    background-color: var(--wsf-field-color-background-hover);
    border-color: var(--wsf-field-border-color-hover)
}

.wsf-form input[type=checkbox].wsf-field.wsf-image:focus+label.wsf-label>img {
    border-color: var(--wsf-field-border-color-focus);
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field.wsf-image:disabled+label.wsf-label>img {
    cursor: not-allowed;
    opacity: .5
}

.wsf-form input[type=checkbox].wsf-field.wsf-image:checked+label.wsf-label>img {
    background-color: var(--wsf-field-checkbox-checked-image-border-color);
    border-color: var(--wsf-field-checkbox-checked-image-border-color)
}

.wsf-form [data-type="checkbox"] .wsf-grid.wsf-fields .wsf-label-wrapper label.wsf-label {
    padding: 0
}

.wsf-form [data-row-checkbox] {
    margin-bottom: var(--wsf-field-checkbox-gap-vertical)
}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='1'] {
    -webkit-margin-start: var(--wsf-field-checkbox-size);
    margin-inline-start:var(--wsf-field-checkbox-size)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='2'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 2);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 2)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='3'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 3);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 3)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='4'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 4);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 4)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='5'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 5);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 5)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='6'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 6);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 6)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='7'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 7);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 7)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='8'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 8);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 8)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='9'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 9);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 9)}

.wsf-form [data-row-checkbox][data-wsf-hierarchy='10'] {
    -webkit-margin-start: calc(var(--wsf-field-checkbox-size) * 10);
    margin-inline-start:calc(var(--wsf-field-checkbox-size) * 10)}

.wsf-form.wsf-validated input[type=checkbox].wsf-field:invalid,.wsf-form .wsf-validated input[type=checkbox].wsf-field:invalid {
    border-color:var(--wsf-field-border-color-invalid)
}

.wsf-form.wsf-validated input[type=checkbox].wsf-field:invalid:focus,.wsf-form .wsf-validated input[type=checkbox].wsf-field:invalid:focus {
    box-shadow: var(--wsf-field-box-shadow)
}

.wsf-form input[type=checkbox].wsf-field+label.wsf-label {
    transition: color var(--wsf-form-transition)
}

.wsf-form input[type=checkbox].wsf-field+label.wsf-label::before {
    transition: background-color var(--wsf-form-transition),border-color var(--wsf-form-transition),box-shadow var(--wsf-form-transition)
}

.wsf-form input[type=checkbox].wsf-field.wsf-button+label.wsf-label {
    transition: background-color var(--wsf-form-transition),border-color var(--wsf-form-transition),box-shadow var(--wsf-form-transition),color var(--wsf-form-transition)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label::before {
    transition: background-color var(--wsf-form-transition),border-color var(--wsf-form-transition)
}

.wsf-form input[type=checkbox].wsf-field.wsf-switch+label.wsf-label::after {
    transition: background-color var(--wsf-form-transition),border-color var(--wsf-form-transition),left var(--wsf-form-transition)
}

.wsf-form input[type=checkbox].wsf-field.wsf-color+label.wsf-label>span {
    transition: border-color var(--wsf-form-transition),box-shadow var(--wsf-form-transition)
}

.wsf-form input[type=checkbox].wsf-field.wsf-image+label.wsf-label>img {
    transition: background-color var(--wsf-form-transition),border-color var(--wsf-form-transition),box-shadow var(--wsf-form-transition)
}