@capgeminiuk/dcx-react-library/dist/design-system/formcheckbox.css

[](https://circleci.com/gh/Capgemini/dcx-react-library)

.dcx-checkbox{align-items:center;column-gap:var(--dcx-spacing-y-formcontrol,15px);display:flex;flex-wrap:wrap}.dcx-checkbox .dcx-hint{color:var(--dcx-color-text-formcontrol_hint,#666);flex-basis:100%;font-size:var(--dcx-font-formcontrol_hint-size,13px);line-height:var(--dcx-font-formcontrol_hint-line-height,18px);padding-left:calc(var(--dcx-font-formcontrol_label-line-height, 20px) + var(--dcx-spacing-y-formcontrol, 15px))}.dcx-checkbox label{background:var(--dcx-color-background-formcontrol_label,transparent);color:var(--dcx-color-text-formcontrol_label,#000);font-size:var(--dcx-font-size-formcontrol_label,16px);font-weight:var(--dcx-font-weight-formcontrol_label,normal)}.dcx-checkbox input[type=checkbox]{appearance:none;background-color:var(--dcx-color-background-formcontrol,transparent);border-color:var(--dcx-border-color-formcontrol,#000);border-radius:var(--dcx-border-radius-formcontrol,4px);border-style:solid;border-width:var(--dcx-border-width-formcontrol,1px);color:currentColor;cursor:pointer;display:grid;height:var(--dcx-font-formcontrol_label-line-height,20px);margin:0;place-content:center;width:var(--dcx-font-formcontrol_label-line-height,20px)}.dcx-checkbox input[type=checkbox]:focus{border-color:var(--dcx-color-outline-formcontrol,#3f51b5);border-width:calc(var(--dcx-border-width-formcontrol, 1px)*2)}.dcx-checkbox input[type=checkbox]:checked{background-color:var(--dcx-color-outline-formcontrol,#3f51b5);border-color:var(--dcx-color-outline-formcontrol,#3f51b5)}.dcx-checkbox input[type=checkbox]:hover{border-color:var(--dcx-color-outline-formcontrol,#3f51b5);border-width:calc(var(--dcx-border-width-formcontrol, 1px)*2);opacity:.8}.dcx-checkbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.dcx-checkbox input[type=checkbox]:disabled:hover{border-color:var(--dcx-border-color-formcontrol,#000);border-radius:var(--dcx-border-radius-formcontrol,4px);border-style:solid;border-width:var(--dcx-border-width-formcontrol,1px);cursor:not-allowed;opacity:.5}.dcx-checkbox input[type=checkbox]:before{box-shadow:inset 1em 1em var(--dcx-color-background-formcontrol_checkmark,#fff);clip-path:var(--dcx-clip-path-formcontrol_checkmark,polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%));content:"";height:.8em;transform:scale(0);transform-origin:bottom left;transition:transform .12s ease-in-out;width:.8em}.dcx-checkbox input[type=checkbox]:checked:before{transform:scale(1)}.dcx-checkbox.dcx-checkbox--error label{color:var(--dcx-color-text-formcontrol_label-error,#f44336)}.dcx-checkbox.dcx-checkbox--error input,.dcx-checkbox.dcx-checkbox--error input:checked,.dcx-checkbox.dcx-checkbox--error input:focus{border-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-checkbox.dcx-checkbox--error input:checked{background-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-checkbox.dcx-checkbox--error input:hover{border-color:var(--dcx-color-text-formcontrol_error,#f44336)}.dcx-checkbox:has(input:disabled){cursor:not-allowed;opacity:.5}.dcx-checkbox .dcx-conditional-input{flex-basis:100%}.dcx-checkbox .dcx-conditional-input div{display:flex;flex-direction:column;padding-left:calc(var(--dcx-font-formcontrol_label-line-height, 20px) + var(--dcx-spacing-y-formcontrol, 15px)*2)}.dcx-checkbox .dcx-conditional-input div label{background:var(--dcx-color-background-formcontrol_label,transparent);color:var(--dcx-color-text-formcontrol_label,#000);font-size:var(--dcx-font-size-formcontrol_label,16px);line-height:var(--dcx-font-formcontrol_label-line-height,20px)}.dcx-checkbox .dcx-conditional-input div input{background:var(--dcx-color-background-formcontrol,transparent);border-radius:var(--dcx-border-radius-formcontrol,4px);box-sizing:border-box;color:var(--dcx-color-text-formcontrol,#000);font-size:var(--dcx-font-formcontrol-size,16px);line-height:var(--dcx-font-formcontrol-line-height,20px);margin:var(--dcx-color-outline-formcontrol,#3f51b5);max-width:400px;padding-left:var(--dcx-spacing-x-formcontrol,15px);padding-right:var(--dcx-spacing-x-formcontrol,15px)}