/* TODO: vendor-review */
/* #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: '\f10c';
}

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

.multi-checkbox.disabled label,
.multi-checkbox.disabled legend {
    color: #aaaaaa;
}