/**
 * Ninja Forms — ported from the previous child style.css.
 *
 * Checkbox geometry is the previous drawing. It is not on the 12px scale,
 * so the lengths live once as tokens in global-variables.css.
 * font-weight and the right-label padding stay !important because Ninja
 * Forms and Uncode set those with equal or higher weight.
 * Selectors stay under .nf-form-cont so .html-wrap elsewhere is left alone.
 */

.nf-form-cont .nf-field-label .nf-label-span,
.nf-form-cont .nf-field-label label,
.nf-form-cont .html-wrap p {
    font-weight: var(--graniteandgreen-font-weight-normal) !important;
    font-size: inherit;
    line-height: inherit;
}

.nf-form-cont .nf-field-container.text-small .nf-field-label label,
.nf-form-cont .nf-field-container.text-small .nf-field-label .nf-label-span {
    font-size: inherit;
    line-height: inherit;
}

.nf-form-cont .nf-before-form-content {
    display: none;
}

.nf-form-cont .nf-field-container {
    margin-bottom: var(--graniteandgreen-spacing-md);
}

.nf-form-cont .ninja-forms-field.nf-element[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    height: var(--graniteandgreen-form-checkbox-size);
    width: var(--graniteandgreen-form-checkbox-size);
    background-color: rgba(var(--graniteandgreen-color-white), 1);
    border: var(--graniteandgreen-border-width) solid rgba(var(--graniteandgreen-color-form-border), 1);
    border-radius: var(--graniteandgreen-form-checkbox-radius);
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.nf-form-cont .ninja-forms-field.nf-element[type="checkbox"]:checked {
    background-color: rgba(var(--graniteandgreen-color-form-checked), 1);
}

.nf-form-cont .ninja-forms-field.nf-element[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: var(--graniteandgreen-form-tick-x);
    top: var(--graniteandgreen-form-tick-y);
    width: var(--graniteandgreen-form-tick-width);
    height: var(--graniteandgreen-form-tick-height);
    border: solid rgba(var(--graniteandgreen-color-white), 1);
    border-width: 0 var(--graniteandgreen-form-tick-stroke) var(--graniteandgreen-form-tick-stroke) 0;
    transform: rotate(45deg);
}

.nf-form-cont .nf-field-container.checkbox-container .nf-field-label label {
    cursor: pointer;
    vertical-align: middle;
    padding-left: var(--graniteandgreen-form-label-gap);
}

.nf-form-cont .label-right .nf-field-label {
    padding-left: 0 !important;
}

.nf-form-cont .nf-form-content textarea.ninja-forms-field {
    height: var(--graniteandgreen-spacing-4xl);
}

.nf-form-cont .ninja-forms-field::placeholder {
    color: rgba(var(--graniteandgreen-color-gray-mid), 1);
    font-size: smaller;
    opacity: 1;
}

.nf-form-cont .ninja-forms-field::-webkit-input-placeholder {
    color: rgba(var(--graniteandgreen-color-gray-mid), 1);
    font-size: smaller;
    opacity: 1;
}

.nf-form-cont .ninja-forms-field::-moz-placeholder {
    color: rgba(var(--graniteandgreen-color-gray-mid), 1);
    font-size: smaller;
    opacity: 1;
}