/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* BASE */
.tooltipster-base {
	display: none!important;
}

.header-button .button {
	padding: 5px 32px;
}

.blk-btn {
	color: #000 !important;
}

.link-b a {
    text-decoration: underline;
}

.nav>li>a {
    color: hsl(0deg 0% 0%);
}

.mfp-bg {
    background: rgb(27 27 27 / 25%);
}

.chevronn ul li {
    list-style: none;
    margin-bottom: 20px;
    padding-left: 50px;
    padding-top: 0px;
    position: relative;
    display: flex;
    align-items: center;
	margin-left: 0px;
}

.chevronn ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: url(https://energieenzo.nl/wp-content/uploads/2025/01/check_vy.svg) no-repeat;
    background-size: contain;
}

.chevronn2 ul li {
    list-style: none;
    padding-left: 25px;
    margin-bottom: 0px;
	margin-left: 5px;
    background: url(https://energieenzo.nl/wp-content/uploads/2025/01/checked__svgorg.svg) no-repeat;
    background-size: 15px 15px;
    background-position: left calc(0% - -4px);
}

/* accordion */
.acc-css .accordion .toggle {
    left: unset!important;
    right: -20px!important;
	font-size: 50px !important;
	margin-top: -35px !important;
	opacity: 1!important;
}

.acc-css .accordion-title {
    border: 1px solid #f3f5f9 !important;
    display: block;
    padding: 1.6em 3.8em 1.6em 1.3em !important;
    position: relative;
    transition: border .2s ease-out, background-color .3s;
    margin-bottom: 15px;
	    background-color: #fff;
	border-radius: 8px;
}

.icon-angle-down:before {
    content: "\e5c5" !important;
    font-family: 'Material Icons' !important;
    text-shadow: 
        1px 1px 0 #27aa65,
        -1px -1px 0 #27aa65,
        -1px 1px 0 #27aa65,
        1px -1px 0 #27aa65,
        1px 0 0 #27aa65,
        -1px 0 0 #27aa65,
        0 1px 0 #27aa65,
        0 -1px 0 #27aa65;
}

.acc-css .toggle i {
    font-size: 1.8em;
    transition: all .3s;
    color: #27aa65;	
}

.nav-line-bottom>li>a:before {
    height: 1px;
    margin-bottom: 3px;
    background-color: #27aa65;
}

.absolute-footer {
	color: #000;
    padding-bottom: 40px;
    padding-top: 40px;
}

.lees_meer {
    overflow: hidden;
    max-height: 300px;
    transition: max-height 1s ease-in-out;
    position: relative;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}

.lees_meer.show_full {
    max-height: 2000px;
    transition: max-height 1s ease-in-out; 
    mask-image: none;
    -webkit-mask-image: none;
}

.read-more,
.read-less {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    font-size: small;
    opacity: 1;
    transition: opacity 0.5s ease-in-out; 
}

.read-more .material-icons,
.read-less .material-icons {
    vertical-align: middle;
    transition: transform 0.5s ease-in-out; 
	font-size: medium;
	margin-top: -2px	
}

.read-less {
    display: none;
    opacity: 1;
    color: gray;
}

.lees_meer.show_full + .read-more {
    display: none;
}

.lees_meer.show_full + .read-more + .read-less {
    display: inline-block;
    opacity: 1;
}

[data-animate] {
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    opacity: 1 !important;
    transition: filter 0.0s, transform 0.5s, opacity 0.0s ease-in;
    will-change: filter, transform, opacity;
}

.col+.col [data-animate],
.nav-anim>li,
[data-animate-delay="200"],
[data-animate]+[data-animate] {
    transition-delay: 0s !important;
}

.has-dropdown .icon-angle-down:before {
    background-color: #fff !important;
    padding: 0px 3px 0px 3px;
    border-radius: 100px;
    margin-left: 5px;
    color: #000000;
}

.has-dropdown .icon-angle-down {
    opacity: 1.0;
}

.header-shadow .header-wrapper,
.header-wrapper.stuck,
.layout-shadow #wrapper {
    box-shadow: 1px 1px 10px rgb(0 0 0 / 0%);
}

.button:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .05);
    color: #fff;
    opacity: 1;
    outline: none;
}

.nav>li.header-divider {
    border-left: 0px solid rgb(0 0 0 / 0%);
    margin: 0px 7.5px;
}

.mfp-close {
    background: #074c38;
    margin-top: 5px !important;
    margin-right: 5px !important;
    border-radius: 50px !important;
}

.mfp-ready .mfp-close {
    opacity: 1;
}

.off-canvas-right .mfp-content, .off-canvas-left .mfp-content {
	box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 0%);	
}

.nav-dark .nav>li>a, .nav-dark .nav>li>button, .nav-dropdown.dark .nav-column>li>a, .nav-dropdown.dark>li>a {
    color: hsla(0, 0%, 100%, 1.0);
}

.row-box-shadow-4 .col-inner,
.row-box-shadow-4-hover .col-inner:hover,
.box-shadow-4,
.box-shadow-4-hover:hover {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.soc__ico.social-icons .button.is-outline {
    border-color: hsl(131.3deg 62.6% 51.76%);
}

.soc__ico .button.icon i {
    font-size: 1.1em;
}

/* Individual items to align icon and text */
.contact-item {
  display: flex;
  align-items: center; /* Ensures vertical alignment */
  gap: 5px; /* Spacing between icon and text */
	font-size: 16px;
}

/* Icon styling for consistent size */
.contact-icon {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-size: 35px; /* Adjust the size of the icon */
  line-height: 1.2; /* Prevent vertical misalignment */
}

/* Link styling */
.contact-link {
  text-decoration: none; /* Remove underline */
  color: inherit; /* Inherit color from the context */
  font-size: 16px; /* Optional: Adjust text size */
}

.css_gradient {
	background: rgb(39,170,101);
background: linear-gradient(132deg, rgba(39,170,101,1) 17%, rgba(7,76,56,1) 100%);
}

.header .icon-menu:before {
            content: "\e5d2";
            font-family: 'Material Symbols Outlined' !important;
            font-size: xxx-large;
}

.cust-radius .fill {
	border-radius: 30px !important;
}

.home-img .box-image {
	border-radius: 20px 0px 0px 20px !important;
}

.home-img .box-text.text-left {
    border-radius: 0px 20px 20px 0px !important;
}

.home-img2 .box-image {
	border-radius: 20px 20px 0px 0px !important;
}

/* gform */
#gform_1_validation_container {
	display: none !important;
}

.gform_wrapper.gravity-theme .gform_page_footer {
    margin: 2px 0 0;
    padding: 0px 0;
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice input {
    display: block;
    margin: 0 auto;
	margin-bottom: 4px;
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice label {
    display: inline;
    font-size: x-small;
}

.gform_wrapper.gravity-theme .gfield-choice-input {
    vertical-align: bottom;
    margin-bottom: 6px;
}

#label_1_69_1, #label_1_71_1, #label_1_70_1, #label_1_74_1 {
	font-weight: normal;
}

.gfield-choice-image {
    width: 60% !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .gfield-choice-image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;		
    }
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gfield-choice-image-wrapper {
    margin-block-end: -30px !important;
}

.select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection, input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    background-color: #fff;
    border: 2px solid #e3e3e3 !important;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0%);
	font-size: 16px !important;
}

.gform_wrapper .button {
	border-radius: 4px !important;
	background-color: #27aa65 !important;
	width: 100% !important;
	padding: 4px !important;
	font-size: 16px !important;
	text-transform: unset;
	margin-top: 10px;
	border-radius: 4px !important;
}

.gform_previous_button {
    display: none !important;
}

.gform-theme--foundation .gform_fields {
  grid-row-gap: 15px !important;
}

.gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 5px;
}

/* Highlight input and textarea fields when they are focused */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    background-color: #f0f8ff;
    border-color: #77c844 !important;
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice:where(:has(input:checked))::after {
    background-color: #27aa65;
    block-size: 26px;
    color: #fff;
    inline-size: 26px;
    inset-inline-end: -2px;
}

/* Styling label when the input is checked */
input:checked + .gform-field-label {
    background-color: #27aa65;
    color: #ffffff;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ginput_container_image_choice  input:focus-visible {
    outline: 0px solid currentColor;
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gfield-choice-image-wrapper::before {
    border: 0px solid;
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice {
    display: block;
    inline-size: 75px !important;
    min-inline-size: 75px !important;
    text-align: center !important;
}

.gform_wrapper.gravity-theme .ginput_container_image_choice .gfield_radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

/* Container Styles */
.gf-tab {
    background: #27aa65;
    border-radius: 5px;
	color: #fff;
}

/* Tab Content Styling */
.tab-content {
    padding: 5px 20px 20px 20px;
	margin-bottom: 5px;
	margin-top: 5px;
}

/* Optional styling for H4 titles above the benefits */
.gf-tab h4 {
    margin-top: 20px;
	margin-left: 10px;
    font-size: large;
    text-align: left;
	color: #fff;
}

/* Benefits List Styling */
.tab-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-benefits li {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 10px;
	font-weight: bold;
}

/* Icon Styling */
.tab-benefits .material-icons {
    font-size: 1.0rem;
    color: #fff ;
    margin-right: 8px;
}

/* Optional: Add a soft background for icons */
.tab-benefits .material-icons {
    background-color: #ffba4f;
    border-radius: 50%;
    padding: 5px;
	color: #074c38;
	font-weight: bold;
}

/* tabs */
.tabs__css .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Adjust the gap between items */
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: space-between; /* Ensure items are spaced out */
}

.tabs__css .nav > li {
    flex: 1 1 150px; /* Allow items to shrink below 488px on small screens */
    box-sizing: border-box;
}

.tabs__css .nav > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    text-align: center;
    background-color: #ffffff;
    border: 0px solid #ccc;
    text-decoration: none;
    border-radius: 10px;
	
}

.tabs__css .nav > li > a .eael-tab-title {
    display: block;
}

/* Media query for smaller screens to allow further shrinking */
@media (max-width: 767px) {
    .tabs__css .nav > li {
        flex: 1 1 calc(50% - 10px); /* Allow two items per row */
    }
}

@media (max-width: 480px) {
    .tabs__css .nav > li {
        flex: 1 1 100%; /* Allow one item per row */
    }
}

.nav-tabs+.tab-panels {
    border: 0px solid #ddd;
}

.tabs__css .nav-tabs>li.active>a {
    background-color: #37d154 !important;
    color: white;
    font-weight: bold;
	
}

.tabs__css .entry-content {
    text-align: -webkit-center;
}

.nav-tabs+.tab-panels {
    background-color: unset;
    border: 0px solid #ddd;
}

/* //tabs */

.gform_wrapper.gravity-theme .gfield_checkbox label, .gform_wrapper.gravity-theme .gfield_radio label {
    font-size: 12px;
}

#input_1_66, #input_1_67, #input_1_68,#input_1_73 {
    background-color: #f2f2f2 !important;
	border-radius: 6px;
	padding: 10px 10px;
	margin-bottom: 5px;
}

/* Styling voor de invoervelden */
#gform_wrapper_2 .gfield input[type="text"],
#gform_wrapper_2 .gfield input[type="email"],
#gform_wrapper_2 .gfield input[type="tel"], /* Voeg telefoonnummer toe */
#gform_wrapper_2 .gfield textarea {
    background-color: #f8f6f2;
    border: none;
    border-radius: 30px;
    padding: 30px 30px;
    border: 0px !important;
}

/* Ruimte tussen velden */
#gform_wrapper_2 .gfield {
    margin-bottom: 10px;
}

/* Styling voor de submit-knop specifiek voor formulier ID 2 */
#gform_wrapper_2 .gform_footer .button {
    border-radius: 30px !important;
    background-color: #37d154 !important;
    width: unset !important;
    padding: 10px 40px !important;
}
/* gform-end */


/* Only ipad: */
@media (min-width: 850px) {
    .header-main .header-nav, .header-bottom .header-nav {
        font-size: small;
    }
}

/* Only desktop: */
@media (min-width: 1180px) {
    .header-main .header-nav, .header-bottom .header-nav {
        font-size: unset;
    }
}





@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    #logo {
        max-width: 210px;
    }

    #masthead {
        height: 80px !important;
    }
	
	#main-menu {
		font-size: larger;
		color: green !important;
	}
	
		    .nav-sidebar {
        padding-top: 30px;
}
	

	.gform_wrapper.gravity-theme .ginput_container_image_choice .gfield_radio {
    justify-content: center;
    gap: 3px;
}
	
	/* Styling label when the input is checked */
input:checked + .gform-field-label {
    padding: 2px 4px;
    border-radius: 3px;
}

	.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
    background-color: hsl(0deg 0% 100%);
}

    .off-canvas-right .mfp-content,
    .off-canvas-left .mfp-content {
        width: 80% !important;
        box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 0%);
        padding: 15px !important;
    }

    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content {
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 0%);
        transition: transform 100ms ease 0ms;
    }
	
    .off-canvas .nav-vertical>li>a {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .nav-sidebar.nav-vertical>li+li {
        border-top: 0px solid #ececec;
    }

    .absolute-footer {
        font-size: xx-small;
    }
	
	.home-img .box-image {
	border-radius: 20px 20px 0px 0px !important;
}

.home-img .box-text.text-left {
    border-radius: 0px 0px 20px 20px !important;
}

}