.checkbox-wrapper{
    grid-column:1;
    grid-row:1;
}
.checkbox-wrapper > input[type=checkbox]{
    display:none;
}

.checkmark{
    align-self: start;
    box-sizing: border-box;
    border: solid 1px var(--default-empty-component-border-color);
    border-radius: 4px;
    width: var(--checkbox-content-size);
    height: var(--checkbox-content-size);
    background-color: transparent;
    margin: var(--checkbox-margin);
    display:block;

}
.checkbox-wrapper:has(input[aria-invalid="true"]) .checkmark{
    border-color: var(--default-negative-color);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Style the checkmark/indicator */
.checkbox-wrapper .checkmark:after {
    font-family: tck-icons !important;
    font-size: calc(var(--checkbox-content-size) - 2px);
    content: "\e907";
    background: none;
    color: inherit;
    line-height:1;
    top:3px;
    left:3px;

    @media (max-width: 450px) {
        top:5px;
        left:5px;
    }
}
/* Show the checkmark when checked */
.checkbox-wrapper input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-wrapper{
    display: flex;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* When the checkbox is checked, add a blue background */
.checkbox-wrapper input:checked ~ .checkmark  {
    border: solid 2px var(--default-primary-color);
}

.checkbox-field{
    gap: 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
}
.checkbox-field > div:has(span.pf-c-form__helper-text){
    grid-column:2;
    grid-row:2;
    padding:0;
}
.checkbox-field > label:not(.checkmark){
 grid-column:2;
 grid-row:1;
}
.checkbox-field:has(input:not([aria-invalid="true"])) > div:has(span.pf-m-error){
    display:none;
}
.checkbox-field *[for="termsAccepted"]{
    cursor:pointer;
}