/* global */
hundefined {
    display: block;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0 0 0.5rem 0;
}

.ninja-form-section div:empty,
.nf-form-fields-required {
    display: none !important;
}

.nf-form-content {
    padding: 0 !important;
    margin: 0;

    & .nf-row .nf-cell:first-child {
        padding-left: 0;
    }

    & .nf-row .nf-cell:last-child {
        padding-right: 0;
    }

    & .nf-field-label {
        margin-bottom: 0 !important;
    }

    & .nf-field-label label {
        font-weight: 200;
        font-size: 14px;
    }


}

/* labels */
/* .nf-field-container.label-above:has([placeholder]) {

    & .nf-field-label {
        position: absolute;
        top: -2px;
        margin-left: 17px;
        z-index: 99;
        transition: all .2s;

        & label {
            font-size: 12px;
            font-weight: 400;
            color: var(--spryg--preset--color--grey);
        }
    }

    & .nf-field-element input[placeholder] {
        padding-top: 2em;
        color: var(--spryg--preset--color--black);
    }

}

.nf-field-container.label-above:has(input[placeholder]:placeholder-shown) {

    & .nf-field-label {
        top: 12px;

        & label {
            font-size: 16px;
        }
    }

    & .nf-field-element input[placeholder] {
        padding-top: 1em;
    }
} */

/* entry feedback */
.nf-error.field-wrap .nf-field-element:after {
    content: "\2715" !important;
}

.nf-pass.field-wrap .nf-field-element:after {
    content: "\2713" !important;
}

/* input fields */
.nf-form-content input,
.nf-form-content textarea {
    height: 3em;
    margin-bottom: 0 !important;
    background-color: #ffffff !important;
    border-color: var(--spryg--preset--color--grey) !important;
}

.nf-form-content input:focus,
.nf-form-content textarea:focus {
    border-color: var(--spryg--preset--color--yellow) !important;
}

/* buttons */
.nf-form-content:has(input[aria-invalid="true"]) .nf-next,
.nf-form-content:has(input[aria-invalid="true"]) [type="submit"] {
    opacity: 0.3;
    filter: grayscale(1);
    position: relative;
    pointer-events: none;
}

.nf-form-content [type="submit"],
.nf-form-content [type="button"] {
    display: block;
    position: relative;
    font-size: 18px !important;
    font-weight: 700;
    background: var(--spryg--preset--color--black);
    color: var(--spryg--preset--color--white);
    padding: .65em 1.7em .65em 1em !important;
    text-decoration: none;
    text-transform: uppercase;
    filter: contrast(1.2);
    border: none;
    cursor: pointer;

    & .icon {
        display: none;
    }
}

.nf-form-content [type="submit"]:hover,
.nf-form-content [type="button"]:hover {
    filter: brightness(1.2);
    background: var(--spryg--preset--color--black);
    color: var(--spryg--preset--color--white);
}

.nf-form-content [type="submit"]:after,
.nf-form-content [type="button"]:after {
    position: absolute;
    right: 1em;
    top: 50%;
    content: " ";
    width: .4em;
    height: .4em;
    border-bottom: 2px solid var(--spryg--preset--color--white);
    border-right: 2px solid var(--spryg--preset--color--white);
    transform: rotate(-45deg) translateY(-35%) translateX(40%);
    transition: .4s;
}

.nf-form-content [type="submit"]:hover:after,
.nf-form-content [type="button"]:hover:after {
    right: .8em;
}

.nf-next-previous .nf-next-item.float-none {
    float: none;
}

.newsletter-action-up-to-date {
    & nf-rows-wrap {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    & .nf-row,
    label,
    .nf-error .nf-field-element:after,
    .nf-error-msg.nf-error-field-errors {
        display: none;
    }

    & .nf-row:has(input, button) {
        display: block;
    }

    & input {
        height: 44px !important;
    }
}

.newsletter-action-footer {
    & nf-rows-wrap {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    & .nf-row,
    label,
    .nf-error .nf-field-element:after,
    .nf-error-msg.nf-error-field-errors {
        display: none;
    }

    & .nf-row:has(input, button) {
        display: block;
    }

    & input {
        height: 44px !important;
    }

    & button {
        background: var(--spryg--preset--color--green) !important;
    }
}


/*** timetable thumb up form **/
.nf-form-cont.thumb-up {

    max-height: 70px;
    &:not(:has(.nf-previous-item)){
        max-height: 30px;
    }

    &:not(:has(.nf-form-wrap)) {
        opacity: 0;
        height: 20px;
        overflow: hidden;
    }

    & #ninja_forms_required_items,
    .nf-field-container {
        margin-bottom: 0;
    }

    & .nf-form-content>div {
        display: flex;
        align-items: center;
        flex-direction: row;
        height: 50px;
    }

    & nf-rows-wrap {
        display: flex;
        align-items: center;
    }

    & [type="button"] {
        height: 50px;
        margin-top: -5px;
    }

    & [type="submit"] {
        height: 50px;
    }

    & .nf-next-previous:not(:has(.nf-previous-item)) {

        margin: 0 !important;

        & .nf-form-content>div {
            height: 30px;
        }

        [type="button"] {
            position: relative;
            background: none !important;
            font-size: 14px !important;
            padding: 0 !important;
            color: transparent;

            height: 50px;
            margin-top: -5px;

            &:after {
                display: flex;
                position: absolute;
                content: " goed topic";
                align-items: center;
                color: var(--spryg--preset--color--black);
                left: 0;
                top: 0;
                background: url('https://static.spryg.com/wp-content/themes/spryg/v2024/images/thumbs-up-regular.svg') left center / 20px no-repeat;
                width: 150px;
                height: 20px;
                text-align: left;
                padding-left: 28px;
                border: 0;
                transform: rotate(-0) scale(1);
                transition: background .1s ease-in;
            }

            &:hover {
                &:after {
                    background: url('https://static.spryg.com/wp-content/themes/spryg/v2024/images/thumbs-up-regular.svg') left center / 24px no-repeat;
                }
            }

            & span.icon {
                display: none;
            }
        }

        [type="text"] {
            height: 50px;
        }

    }

    .nf-previous-item,
    .nf-error-msg {
        display: none !important;
    }
}