/* #region Custom Checkboxes rendered before the label */

div.checkbox:not(.after) label {
    user-select: none;
    cursor: pointer;
}

div.checkbox:not(.after) > input[type=checkbox] {
    display: none;
}

div.checkbox:not(.after) > input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    font-weight: 400;
    content: "\f096";
    letter-spacing: 10px;
    font-size: large;
    position: relative;
    top: 2px;
    width: 24px;
}

div.checkbox:not(.after) > input[type=checkbox]:checked + label:before {
    content: "\f046";
}

div.checkbox:not(.after) > input[type=checkbox]:checked + label:before {
    letter-spacing: 7px;
    font-size: large;
    position: relative;
    top: 2px;
}

div.checkbox:not(.after).disabled > input[type=checkbox] + label,
div.checkbox:not(.after) > input[type=checkbox]:disabled + label {
    cursor: not-allowed;
    color: var(--checkbox-disabled);
}

div.checkbox:not(.after).disabled > input[type=checkbox] + label:before,
div.checkbox:not(.after) > input[type=checkbox]:disabled + label:before {
    color: var(--checkbox-disabled);
}

div.checkbox:not(.after).inline {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 5px;
}

div.checkbox:not(.after).inline label {
    padding-left: 0;
}

div.checkbox:not(.after).inline > input[type="checkbox"] + label::before {
    width: 20px;
}

/* #endregion */

/* #region Custom Checkboxes rendered AFTER the label */

div.checkbox.after label {
    user-select: none;
    cursor: pointer;
    padding-left: 0;
}

div.checkbox.after > input[type=checkbox] {
    display: none;
}

div.checkbox.after > label:after {
    font-family: FontAwesome;
    display: inline-block;
    font-weight: 400;
    content: "\f096"; /* unchecked icon */
    letter-spacing: 10px;
    font-size: large;
    position: relative;
    top: 2px;
    width: 24px;
    margin-left: 8px; /* adds spacing between label and icon */
}

div.checkbox.after > input[type=checkbox]:checked + label:after {
    content: "\f046"; /* checked icon */
}

div.checkbox.after.disabled > input[type=checkbox] + label,
div.checkbox.after > input[type=checkbox]:disabled + label {
    cursor: not-allowed;
    color: var(--checkbox-disabled);
}

div.checkbox.after.disabled > label:after,
div.checkbox.after > input[type=checkbox]:disabled + label:after {
    color: var(--checkbox-disabled);
}

div.checkbox.after.inline {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 5px;
}

div.checkbox.after.inline label {
    padding-left: 0;
}

div.checkbox.after.inline > label:after {
    width: 20px;
}


/* #endregion */

/** MULTICHECKBOX */

.multi-checkbox {
    margin-bottom: 15px;
}

.multi-checkbox legend {
    font-size: 1em;
    margin-bottom: 0px;
    line-height: 3rem;
    font-weight: bold;
    border-bottom: 0;
}

.multi-checkbox label {
    display: block;
    padding-left: 20px;
    line-height: 3rem;
    cursor: pointer;
    font-weight: normal;
}

.multi-checkbox input[type=checkbox],
.multi-checkbox input[type=radio] {
    margin-left: -3rem;
    margin-right: 2rem;
    position: relative;
    top: 2px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
}

.multi-checkbox label {
    user-select: none;
}

.multi-checkbox label:has(input[type=checkbox]):before,
.multi-checkbox label:has(input[type=radio]):before {
    font-size: 2rem;
    font-family: FontAwesome;
    margin-right: 15px;
    position: relative;
    top: 1px;
    display: inline-block;
    width: 15px;
}


.multi-checkbox label:has(input[type=checkbox]):before {
    content: '\f096';
}

.multi-checkbox label:has(input[type=checkbox]:checked):before {
    content: "\f046";
}

.multi-checkbox label:has(input[type=radio]):before {
    content: '\f096';
}

.multi-checkbox label:has(input[type=radio]:checked):before {
    content: "\f046";
}