.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}.lfr-layout-structure-item-0b06dcda-6996-ed2e-ec7e-84be4e737397 {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-0b06dcda-6996-ed2e-ec7e-84be4e737397) !important;
margin-bottom: -30px !important;
padding-top: var(--spacer-3,1rem) !important;
}
.lfr-layout-structure-item-5e427c71-76e1-d8b3-83fe-69d809c8952e {
padding-top: var(--spacer-8,7.5rem) !important;
}
.lfr-layout-structure-item-5e427c71-76e1-d8b3-83fe-69d809c8952e {
z-index: 9999;
}.lfr-layout-structure-item-d7704438-104c-e417-c88f-f0a0b60273af {
margin-top: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-9adf2586-7d64-e299-213b-0b8bc112581e {
margin-bottom: -8px !important;
}
.lfr-layout-structure-item-e39d6820-0ba4-1dbb-e683-e2d6e1484e0b {
padding-bottom: var(--spacer-8,7.5rem) !important;
}
/* =========================
   CONTACT FORM - BAS FENNIK
========================= */

@import url('https://fonts.googleapis.com/css2?family=Lustria&family=Work+Sans:wght@300;400;500;600;700&display=swap');

/* =========================
   VERBERG STANDAARD LIFERAY TITEL + LIJN
========================= */

/* Titel zoals "Contact formulier" verbergen */
.portlet-forms-display .portlet-title-text,
.portlet-forms-display .component-title,
.portlet-forms-display .sheet-title,
.portlet-forms-display .lfr-ddm-form-page-title,
.portlet-forms-display .ddm-form-name,
.portlet-forms-display .form-builder-layout h1,
.portlet-forms-display .form-builder-layout h2,
.portlet-forms-display .ddm-form-builder-app h1,
.portlet-forms-display .ddm-form-builder-app h2,
.portlet-forms-display .portlet-content h1,
.portlet-forms-display .portlet-content h2,
.portlet-forms-display .portlet-body h1,
.portlet-forms-display .portlet-body h2,
.lfr-ddm__default-page-header-title {
    display: none !important;
}

/* Lijn/streep onder "Contact formulier" verwijderen */
.portlet-forms-display hr,
.portlet-forms-display .sheet-header,
.portlet-forms-display .separator,
.portlet-forms-display .ddm-form-page-title + hr,
.portlet-forms-display .lfr-ddm-form-page-title + hr,
.portlet-forms-display .form-builder-layout > hr,
.portlet-forms-display .portlet-content hr,
.portlet-forms-display .portlet-body hr,
.lfr-ddm__default-page-header-line {
    display: none !important;
    border: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header ruimte verwijderen zonder formulier te slopen */
.lfr-ddm__default-page-header {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Achtergrond/wrappers transparant houden */
.portlet-forms-display,
.portlet-forms-display .portlet,
.portlet-forms-display .portlet-content,
.portlet-forms-display .portlet-body,
.portlet-forms-display .sheet,
.portlet-forms-display .panel,
.portlet-forms-display .ddm-form-page-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================
   FORM CONTAINER
========================= */

.ddm-form-container,
.lfr-ddm-form-container,
.portlet-forms-display .ddm-form-container,
.portlet-forms-display .lfr-ddm-form-container {
    width: min(520px, calc(100% - 32px)) !important;
    max-width: 520px !important;

    margin: 0 auto !important;
    padding: clamp(34px, 3vw, 42px) !important;

    background: rgba(97, 125, 157, 0.86) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20) !important;

    color: #ffffff !important;
    border: none !important;
    text-align: left !important;
}

/* =========================
   FORM HEADER IN BLOK
========================= */

.ddm-form-container::before,
.lfr-ddm-form-container::before {
    content: "Vragen? Of iets anders?";
    display: block;

    font-family: 'Lustria', serif !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #ffffff !important;
    margin: 0 0 24px 0 !important;
}

/* BELANGRIJK:
   Geen ::after meer, want die voegde "Vul het formulier in" extra toe.
*/

/* =========================
   VERBERG EXTRA FORM TEKSTEN
========================= */

/* Verwijder "Vul het formulier in" boven/onder het formulier */
.lfr-ddm-form-page-description,
.ddm-form-container .lfr-ddm-form-page-description,
.lfr-ddm-form-container .lfr-ddm-form-page-description,
.portlet-forms-display .lfr-ddm-form-page-description {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Verwijder "Indicates Required Fields" inclusief wrapper */
.ddm-form-basic-info,
.ddm-form-container .ddm-form-basic-info,
.lfr-ddm-form-container .ddm-form-basic-info,
.portlet-forms-display .ddm-form-basic-info,
.lfr-ddm-form-page > .ddm-form-basic-info {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Extra algemene required teksten verbergen */
.ddm-form-container .required-warning,
.lfr-ddm-form-container .required-warning,
.ddm-form-container .text-warning,
.lfr-ddm-form-container .text-warning,
.ddm-form-container .form-text,
.lfr-ddm-form-container .form-text,
.ddm-form-container .help-block,
.lfr-ddm-form-container .help-block,
.lfr-ddm__required-fields,
.lfr-ddm__required-mark {
    display: none !important;
}

/* Field group / legend verbergen */
.ddm-form-container legend,
.lfr-ddm-form-container legend,
.ddm-form-container .fieldset-legend,
.lfr-ddm-form-container .fieldset-legend {
    display: none !important;
}

/* Losse sterretjes boven velden verbergen */
.ddm-form-container .reference-mark,
.lfr-ddm-form-container .reference-mark,
.portlet-forms-display .reference-mark,
.ddm-form-container .c-mr-1.reference-mark,
.lfr-ddm-form-container .c-mr-1.reference-mark,
.portlet-forms-display .c-mr-1.reference-mark,
.ddm-form-container .lexicon-icon-asterisk,
.lfr-ddm-form-container .lexicon-icon-asterisk,
.portlet-forms-display .lexicon-icon-asterisk,
.ddm-form-container svg.lexicon-icon-asterisk,
.lfr-ddm-form-container svg.lexicon-icon-asterisk,
.portlet-forms-display svg.lexicon-icon-asterisk {
    display: none !important;
}

/* Labels boven input verbergen, placeholders blijven leidend */
.ddm-form-container label.control-label,
.lfr-ddm-form-container label.control-label,
.ddm-form-container .form-group label:not(.custom-control-label),
.lfr-ddm-form-container .form-group label:not(.custom-control-label) {
    display: none !important;
}

/* =========================
   FORM SPACING
========================= */

.ddm-form-container .form-group,
.lfr-ddm-form-container .form-group,
.ddm-form-container .field-wrapper,
.lfr-ddm-form-container .field-wrapper {
    margin-bottom: 14px !important;
}

/* =========================
   INPUTS / TEXTAREA
========================= */

.ddm-form-container .form-control,
.lfr-ddm-form-container .form-control,
.ddm-form-container input,
.ddm-form-container textarea,
.ddm-form-container select,
.lfr-ddm-form-container input,
.lfr-ddm-form-container textarea,
.lfr-ddm-form-container select {
    width: 100% !important;

    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 4px !important;

    color: #ffffff !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    padding: 14px 16px !important;
    min-height: 52px !important;

    box-shadow: none !important;
    outline: none !important;
}

/* Textarea lager zoals design */
.ddm-form-container textarea.form-control,
.lfr-ddm-form-container textarea.form-control,
.ddm-form-container textarea,
.lfr-ddm-form-container textarea {
    min-height: 130px !important;
    resize: none !important;
}

/* Placeholder wit */
.ddm-form-container .form-control::placeholder,
.lfr-ddm-form-container .form-control::placeholder,
.ddm-form-container input::placeholder,
.ddm-form-container textarea::placeholder,
.lfr-ddm-form-container input::placeholder,
.lfr-ddm-form-container textarea::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Browser fallback placeholders */
.ddm-form-container input::-webkit-input-placeholder,
.ddm-form-container textarea::-webkit-input-placeholder,
.lfr-ddm-form-container input::-webkit-input-placeholder,
.lfr-ddm-form-container textarea::-webkit-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

.ddm-form-container input::-ms-input-placeholder,
.ddm-form-container textarea::-ms-input-placeholder,
.lfr-ddm-form-container input::-ms-input-placeholder,
.lfr-ddm-form-container textarea::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Focus */
.ddm-form-container .form-control:focus,
.lfr-ddm-form-container .form-control:focus,
.ddm-form-container input:focus,
.ddm-form-container textarea:focus,
.lfr-ddm-form-container input:focus,
.lfr-ddm-form-container textarea:focus {
    border-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =========================
   SUBMIT BUTTON
========================= */

.ddm-form-container .btn-primary,
.lfr-ddm-form-container .btn-primary,
.portlet-forms-display .btn-primary {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-top: 18px !important;
    padding: 14px 18px !important;

    background: #ffffff !important;
    color: #617D9D !important;

    border: none !important;
    border-radius: 4px !important;

    font-family: 'Work Sans', sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
    text-decoration: none !important;

    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ddm-form-container .btn-primary:hover,
.lfr-ddm-form-container .btn-primary:hover,
.portlet-forms-display .btn-primary:hover {
    background: #f2f2f2 !important;
    color: #4a657f !important;
    transform: translateY(-1px);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {
    .ddm-form-container,
    .lfr-ddm-form-container,
    .portlet-forms-display .ddm-form-container,
    .portlet-forms-display .lfr-ddm-form-container {
        width: calc(100% - 28px) !important;
        padding: 28px 20px !important;
    }

    .ddm-form-container::before,
    .lfr-ddm-form-container::before {
        font-size: 30px !important;
    }

    .ddm-form-container .form-control,
    .lfr-ddm-form-container .form-control,
    .ddm-form-container input,
    .ddm-form-container textarea,
    .lfr-ddm-form-container input,
    .lfr-ddm-form-container textarea {
        font-size: 16px !important;
    }
}
/* =========================
   HARD FIX - "Indicates Required Fields"
========================= */

/* Verberg het icoon zelf */
.c-mr-1.reference-mark,
.reference-mark,
.reference-mark .lexicon-icon,
.reference-mark .lexicon-icon-asterisk {
    display: none !important;
    visibility: hidden !important;
}

/* Verberg de hele regel waar "Indicates Required Fields" in staat */
.portlet-forms-display div:has(> .c-mr-1.reference-mark),
.portlet-forms-display p:has(> .c-mr-1.reference-mark),
.portlet-forms-display span:has(> .c-mr-1.reference-mark),
.ddm-form-container div:has(> .c-mr-1.reference-mark),
.ddm-form-container p:has(> .c-mr-1.reference-mark),
.lfr-ddm-form-container div:has(> .c-mr-1.reference-mark),
.lfr-ddm-form-container p:has(> .c-mr-1.reference-mark) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Fallback: als Liferay de tekst in dezelfde container laat staan */
.portlet-forms-display .ddm-form-basic-info,
.portlet-forms-display .lfr-ddm-form-basic-info,
.portlet-forms-display .lfr-ddm__default-page-header-description,
.ddm-form-container .ddm-form-basic-info,
.lfr-ddm-form-container .ddm-form-basic-info {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}.lfr-layout-structure-item-b40e0f13-77e2-935d-3344-f41511ebcb7a {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-b40e0f13-77e2-935d-3344-f41511ebcb7a) !important;
padding-bottom: 15rem !important;
}
@media screen and (max-width: 991px) {.lfr-layout-structure-item-bf0db7fd-2c94-274c-262d-cdfc5915903d {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
}
}@media screen and (max-width: 767px) {.lfr-layout-structure-item-bf0db7fd-2c94-274c-262d-cdfc5915903d {
padding-left: var(--spacer-2,0.5rem) !important;
padding-right: var(--spacer-2,0.5rem) !important;
}
}