/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Style for all Gravity Forms labels */
body .gform_wrapper .gfield_label {
    color: white; /* Change label text to white */
}

/* Style for text fields */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper textarea {
    color: white; /* Change input text to white */
    background-color: #333; /* Optional: Change background color for better contrast */
}

/* Style for checkboxes */
body .gform_wrapper input[type="checkbox"] + label,
body .gform_wrapper input[type="radio"] + label {
    color: white; /* Change checkbox and radio button labels to white */
}

/* Style for dropdowns */
body .gform_wrapper select {
    color: white; /* Change dropdown text to white */
    background-color: #333; /* Optional: Change background color for better contrast */
}

/* Style for the checkbox container */
body .gform_wrapper .gfield_checkbox label {
    color: white; /* Change checkbox label text to white */
}

/* Style for the radio button container */
body .gform_wrapper .gfield_radio label {
    color: white; /* Change radio button label text to white */
}

/* Normal state for Gravity Forms submit button */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button {
    background-color: var(--e-global-color-accent) !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    color: var(--e-global-color-1da2a16) !important;
    border: none; /* Optional: Adjust border if needed */
    padding: 10px 20px; /* Optional: Add padding for better appearance */
    cursor: pointer; /* Change cursor to pointer */
}

/* Hover state for Gravity Forms submit button */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer input[type="submit"]:focus,
body .gform_wrapper .gform_footer button:hover,
body .gform_wrapper .gform_footer button:focus {
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-1da2a16) !important;
    border: none; /* Optional: Adjust border if needed */
}

/* Veld aanpassingen */
#field_1_9 > legend.gfield_label {
    visibility: hidden;
}

#field_1_9 > legend.gfield_label > .gfield_required {
	display: none;
}	

div#field_1_10, div#field_2_11 {
    text-align: center;
}

/* Center the Gravity Forms submit button */
body .gform_wrapper .gform_footer {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
}

/* Normal state for Gravity Forms submit button */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button {
    background-color: var(--e-global-color-accent) !important;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    color: var(--e-global-color-1da2a16) !important;
    border: none; /* Optional: Adjust border if needed */
    padding: 10px 20px; /* Optional: Add padding for better appearance */
    cursor: pointer; /* Change cursor to pointer */
}

/* Hover state for Gravity Forms submit button */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer input[type="submit"]:focus,
body .gform_wrapper .gform_footer button:hover,
body .gform_wrapper .gform_footer button:focus {
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-1da2a16) !important;
}


span.gfield_required.gfield_required_text {
    color: var(--e-global-color-primary);
}

/* Style error messages in Gravity Forms */
body .gform_wrapper .validation_message {
    background-color: rgba(255, 255, 255, 0.8); /* Light white background with slight transparency */
    color: #d9534f; /* Red color for error text */
    padding: 10px; /* Add some padding for better readability */
    border: 1px solid #d9534f; /* Optional: Red border to emphasize the error */
    border-radius: 4px; /* Optional: Rounded corners for a modern look */
    font-size: 14px; /* Adjust the font size as needed */
}

/* Style the top validation container */
body .gform_wrapper .gform_validation_errors {
    background-color: rgba(255, 255, 255, 0.8); /* Light white background with slight transparency */
    color: #d9534f; /* Red color for the text */
    border: 1px solid #d9534f; /* Optional: Red border to emphasize the error */
    padding: 15px; /* Add padding for better readability */
    border-radius: 4px; /* Optional: Rounded corners for a modern look */
    margin-bottom: 20px; /* Add space below the message */
    font-size: 16px; /* Adjust the font size for better visibility */
    text-align: left; /* Ensure text alignment looks good */
    display: flex;
    align-items: center;
    gap: 10px; /* Add spacing between the icon and text */
}

/* Style the icon inside the validation container */
body .gform_wrapper .gform_validation_errors .gform-icon--circle-error {
    font-size: 20px; /* Ensure the icon is appropriately sized */
    color: #d9534f; /* Match icon color to the text */
}

/* Style the error message heading */
body .gform_wrapper .gform_validation_errors h2 {
    margin: 0; /* Remove default margins for consistent spacing */
    font-weight: bold; /* Make the message stand out */
}