:root {
    --border-radius: 24px;
    --input-border-radius: 8px;
    --border-color: #E7E9DE;
}
@font-face {
    font-family: 'Dax Pro';
    src: url('../fonts/daxoffcpro-webfont.eot');
    src: url('../fonts/daxoffcpro-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/daxoffcpro-webfont.woff') format('woff'),
    url('../fonts/daxoffcpro-webfont.ttf') format('truetype'),
    url('../fonts/daxoffcpro-webfont.svg#dax_offc_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* INPUT FIELDS BEGIN */

.form-title {
    background: #F4F4F5;
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    padding: 32px 32px 14px 32px;
    margin: 0;
    font-family: 'Dax Pro', sans-serif;
    font-size: 32px;
    font-weight: 700;
}

.frm_forms {
    background: #F4F4F5;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

#headerimage + #content-container .frm_forms {
    background: none;
}

.hero-form-container .frm_forms,
.footer-form-container .frm_forms {
    padding: 0 32px 32px;
}

.small-form .frm_forms {
    background-color: #e6e6cc;
    padding: 10px;
}

.frm_form_field {
    vertical-align: top;
    padding: 16px 0;

    &:has(> .frm_error) {
        .chosen-container-single .chosen-single {
            border: 1px solid #FF0000;
        }
        .frm_radio label::before,
        .frm_checkbox label::before {
            border: 1px solid #FF0000;
        }
    }
}

input[aria-describedby*="frm_error"] {
    border: 1px solid #FF0000 !important;
}

.frm_error {
    color: red;
    text-transform: uppercase;
    font-family: 'Dax Pro', sans-serif;
    font-size: 14px;
}

.frm_html_container {
    padding: 0;
}

.frm_form_fields .frm_left_half, .frm_form_fields .frm_first_half,
.frm_form_fields .frm_right_half, .frm_form_fields .frm_last_half {
    display: inline-block;
    width: 100%;

    @media screen and (min-width: 576px) {
        width: calc(50% - 5px);
    }
}

.frm_form_fields .frm_left_half.border,
.frm_form_fields .frm_first_half.border,
.frm_form_fields .frm_right_half.border,
.frm_form_fields .frm_last_half.border {
    border: 1px solid #8eb52a;
    padding: 10px 20px 20px 20px;
}

.frm_two_col {
    .frm_opt_container {
        display: flex;
        gap: 32px;
    }
}

.frm_section_heading h3.frm_pos_top {
    display: none;
}

.frm_section_heading.show h3.frm_pos_top {
    display: block;
}

@media screen and (max-width: 768px) {
    .frm_section_heading.frm_first_half, .frm_section_heading.frm_last_half {
        clear: both;
        width: 100%;
    }
}


select {
    -webkit-appearance: none;
}

select[class*="ui-datepicker"] {
    text-align: center;
}

input[type="text"], input[type="number"], input[type="password"], input[type="tel"], input[type="email"],
textarea,
select:not([class*="ui-datepicker"]) {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 12px;
    font-size: 18px;
    font-family: 'Dax Pro', sans-serif;
    color: #121212;
    vertical-align: middle;
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);

    &:focus {
        box-shadow: none;
        border: 1px solid #B5EC88;
        outline: none;
    }

    &::placeholder {
        color: #9CA0A3;
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

textarea {
    height: 134px;
    max-width: 100%;
}

label,
.form-label {
    text-transform: uppercase;
    font-family: 'Dax Pro', sans-serif;
    font-weight: 500;
}


.input-with-right-label {
    /*&:first-of-type {*/
    /*    padding-right: 5px;*/
    /*}*/
    /*&:last-of-type {*/
    /*    padding-left: 5px;*/
    /*}*/

    .frm_input_group {
        position: relative;
        height: 52px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #E7E9DE;
        border-radius: var(--input-border-radius);

        input {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            display: inline-block;
            border: none;
            border-right: 1px solid var(--border-color);
            padding-right: 0;
            height: 100%;
            min-width: 60px;
            flex: 1 1 auto;
        }

        span {
            background: none;
            border: none;
            color: #000000;
            display: flex;
            align-items: center;
            text-align: center;
            text-transform: uppercase;
            font-family: 'Dax Pro', sans-serif;
            font-size: 14px;
            font-weight: 500;
            height: 100%;
            padding: 12px;
        }
    }
}

label.frm_primary_label {
    white-space: nowrap;
}

input.frm_date {
    background-image: url("../images/svg/calendar.svg") !important;
    background-repeat: no-repeat;
    background-position: right 15px center;

    @media screen and (max-width: 768px) {
        background-size: 14px;
        background-position: right 8px center;
        padding-right: 25px;
        font-size: 14px;
    }
}

.frm_checkbox {
    float: left;
    width: 50%;

    label {
        text-transform: initial;
    }
}

.frm_checkbox:nth-child(even) {
    padding-left: 10px;
}

.frm_forms input[type="checkbox"], .frm_forms input[type="radio"] {
    display: none;
}

.frm_forms .frm_checkbox label {
    color: #263a56;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;

    &::before {
        content: "";
        border: 1px solid #F2F2F4;
        border-radius: 8px;
        box-shadow: 0 0 10px 0 #DCDCDC40 inset;
        display: inline-block;
        height: 24px;
        width: 24px;
    }
}

.frm_forms .frm_checkbox label.checked {
    &::before {
        background: url("../images/svg/check-icon.svg") no-repeat center;
        background-size: 16px;
    }
}

.frm_forms .frm_radio label {
    color: #263a56;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    text-transform: initial;
    width: 100%;

    &::before {
        content: "";
        border: 1px solid #F2F2F4;
        border-radius: 50%;
        box-shadow: 0 0 10px 0 #DCDCDC40 inset;
        display: inline-block;
        height: 24px;
        width: 24px;
    }
}

.frm_forms .frm_radio label.checked {
    &::before {
        background: url("../images/svg/radio-icon.svg") no-repeat center;
        background-size: 12px;
    }
}


input[type="submit"],
button[type="submit"] {
    background-color: #79C33E;
    border-radius: 32px;
    border: 0;
    color: #FFF;
    display: inline-block;
    font-size: 18px;
    padding: 8px 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all .3s ease-in-out;
    height: 60px;
    width: 100%;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(225deg, #B5E832 0%, #7FB952 100%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    &:hover,
    &:focus {
        &::before {
            opacity: 1;
        }
    }

    span {
        z-index: 1;
    }

    &::after {
        content: '';
        background: linear-gradient(225deg, #B5E832 0%, #7FB952 100%);
        display: block;
        position: absolute;
        height: 100%;
        width: 60px;

    }
}

input[type="submit"]:hover {
    background-color: #fff;
    color: #79C33E;
}

button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    span {
        margin-left: auto;
        color: #FFF;
    }

    svg {
        margin-left: auto;
        z-index: 2;
    }

    &::after {
        position: absolute;
        border-radius: 48px;
        top: 0;
        right: 0;
    }
}


.small-form input[type="submit"] {
    margin-top: 10px;
    margin-right: -10px;
}

.frm_verify {
    display: none;
}

/* INPUT FIELDS END */

/* CHOSEN.JS */

.chosen-container-single .chosen-single, select:not([class*="ui-datepicker"]) {
    background: #FFF;
    box-shadow: none;
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);
    height: 52px;
    padding: 14px 12px;
    font-family: 'Dax Pro', sans-serif;
}

.chosen-single span {
    font-size: 18px;
}

.chosen-container-active.chosen-with-drop .chosen-single {
    background-image: none;
}

.form-group:has(.frm_submit) {
    position: relative;
    width: 100%;

    &:hover,
    &:focus {
        .frm_submit {
            &::before {
                opacity: 1;
            }
        }
    }

    .frm_submit {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius);
        background: #7FB952;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(225deg, #B5E832 0%, #7FB952 100%);
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none;
            z-index: 3;
        }

        &::after {
            content: '';
            background: linear-gradient(225deg, #B5E832 0%, #7FB952 100%);
            border-radius: var(--radius);
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 60px;
            z-index: 4;
        }

        input {
            background-color: rgba(0,0,0,0) !important;
            position: relative;
            z-index: 4;
            color: white !important;
            padding-right: 75px;
        }
    }

    svg {
        position: absolute;
        right: 19px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
    }

    img {
        display: none;
    }
}

/* FORM */
.frm_required {
    color: #FF0000;
}

#frm_form_6_container {

    .amount-container {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
}

.frm_primary_label {
    padding: 7px 0;
}

/* CUSTOM FORM (offerte aanvragen + stage aanvragen) */
#frm_form_8_container,
#frm_form_10_container {

    .frm_fields_container {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;

        &:not(.frm_first_half, frm_last_half).frm_form_field.form-field.form-group {
            flex-grow: 1;
        }
    }

    .frm_section_heading.frm_first_half,
    .frm_section_heading.frm_last_half {
        background: #FFF;
        border-radius: var(--border-radius);
        padding: 48px 32px 32px 32px;
        width: calc(50% - 10px);
    }

    .frm_section_heading.frm_last_half {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 0;

        .cloned-button {
            display: flex;
            flex-direction: column;
            position: relative;
            font-family: 'Dax Pro', sans-serif;
            flex: 1;
            padding: 72px 0 0 0;
            width: 100%;

            &::before {
                content: "";
                background: #79C33E;
                display: block;
                position: absolute;
                width: calc(100% + 64px);
                height: calc(100% + 46px);
                left: -32px;
                top: 46px;
                z-index: -1;
            }

            .cloned-button__text {
                color: #FFF;
                margin-bottom: 24px;
            }

            .frm_submit {
                margin-top: auto;

                input {
                    background-color: #FFF !important;
                    color: #121212 !important;
                    padding: 12px;
                }

                &::after {
                    display: none;
                }

                .frm_ajax_loading {
                    visibility: hidden;
                    position: absolute;
                }
            }

            svg {
                display: none;
            }
        }
    }

    .frm_opt_container {
        display: flow-root;
    }

    .frm_form_field.frm_first_half,
    .frm_form_field.frm_last_half {
        width: 100%;
    }

    .frm_form_field.frm_first_half {
        &:not(.frm_section_heading) {
            margin-right: 24px;
        }

        @media screen and (min-width: 992px) {
            width: calc(65% - 24px);
        }
    }

    .frm_form_field.frm_last_half {
        @media screen and (min-width: 992px) {
            width: calc(35% - 24px);
        }
    }
}

#frm_form_10_container {
    margin-top: 16px;

    .frm_form_field.frm_last_half {
        height: 100%;
    }

    .frm_checkbox {
        float: none;
        width: 100%;
        padding-left: 0;
    }

    .frm_dropzone {
        svg.frm-svg-icon {
            width: 18px;
        }

        button {
            margin-bottom: 12px;
        }
    }

}