/*
Theme Name: Flächenmakler
Theme Slug: sp_flaechenmakler
Theme URI: http://gravitystylespro.com/themes/
Author: Warp Lord
Author URI: http://gravitystylespro.com/author/
Version: 1.0
Description: Material theme takes its visual style from the guidebook of Material design by Google.
Font: 16px/Roboto/#808080/Google
Font Label: 14px/Roboto/#293d4a
Field Margin: 1em
*/


/* ###### GENERAL ###### */

.gf_stylespro_wrapper .gf_stylespro legend.gfield_label,
#top .gf_stylespro_wrapper .gf_stylespro label.gfield_label{
	text-align: center;
	font-weight: 700;
	font-size: 24px;
}


.gform_wrapper.gravity-theme .gform_validation_errors{
	margin: 8px auto;
	width: 90%;
}

.gform_wrapper.gravity-theme .field_description_above .gfield_description{
	padding: 16px 8px;
}


/* ###### OPTIONS ###### */

.gf_stylespro .gfield_radio .gfsp_choice_img input+label{
	background-color: #F3FAF7;
	border: 1px solid #E2EAE7;
	box-shadow: 0 0 0 0 rgb(0 0 0 / 00%);
	border-radius: 7px;
}


.gf_stylespro .gfield_radio .gfsp_choice_img input+label:hover,
.gf_stylespro .gfield_radio .gfsp_choice_img input:checked+label{
	background-color: #15A066;
	color: #ffffff;
}



.gf_stylespro .gfield_radio .gfsp_choice_img input+label:hover .o_img_wr img,
.gf_stylespro .gfield_radio .gfsp_choice_img input:checked+label .o_img_wr img{
	filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(346deg) brightness(170%) contrast(100%);
}


/* ###### BUTTONS ###### */


.gm_lead_generation_form .gform_button {
	color: #ffffff !important;
	padding: 12px 22px !important;
	font-weight: 600 !important;
}

.gf_stylespro_wrapper .gf_stylespro .button{
	color: #ffffff;
	border-radius: 7px;
	font-weight: 600;
}

.gform_previous_button{
	color: #ffffff !important;
	padding: 12px 22px 12px 52px !important;
}

.gform_next_button {
	color: #ffffff !important;
	padding: 12px 52px 12px 22px !important;
}

.gform_wrapper.gravity-theme .gform_previous_button.button {
	background-image: url(https://www.flaechenmakler.de/wp-content/uploads/2023/01/btn-prev-arrow.png) !important;
	background-size: 19% !important;
	background-repeat: no-repeat !important;
	background-position: 19% 45.7% !important;
	background-color: #15A066;
}

.gform_next_button {
	background-image: url(https://www.flaechenmakler.de/wp-content/uploads/2023/01/btn-next-arrow.png) !important;
	background-size: 19% !important;
	background-repeat: no-repeat !important;
	background-position: 82% 45.7% !important;
	background-color: #15A066;
}




.gm_lead_generation_form {
	margin-bottom: 0px !important;
}

.gm_lead_generation_form .gform_page {
	padding: 50px 50px !important;
}

.gm_lead_generation_form fieldset {
	margin-bottom: 0px !important;
}

.o_img_wr {
	padding: 1.5em 1.5em 0.75em 1.5em !important;
}

#top .gf_stylespro_wrapper .gf_stylespro legend.gfield_label,
#top .gf_stylespro_wrapper .gf_stylespro label.gfield_label {
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 0px;
}

.o_text {
	margin-bottom: 12px;
}

.ginput_container_slider {
	margin: 65px 0px !important;
}

.slider-display {
    background-color: #15a066 !important;
    height: 10px !important;
    border: 0px !important;
    border-radius: 5px !important;
}

.min-val-relation,
.max-val-relation {
    margin-top: -40px !important;
    color: #5F5F5F !important;
}

.noUi-horizontal .noUi-handle {
    height: 20px !important;
    top: -5px !important;
    background-color: #ffffff !important;
    border: 2px solid #15A066 !important;
    border-radius: 10px !important;
}
.noUi-handle:after, .noUi-handle:before{
    display: none !important;
}
.noUi-tooltip {
    background-color: #1A1A1A !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    padding: 4px 20px 2px 20px !important;
    bottom: -50px !important;
}
.noUi-tooltip:before {
    content: "" !important;
    position: absolute !important;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid black !important;
    top: -28% !important;
    left: 32.5% !important;
}

.step-area-size, .step-area-leased-year {
    max-width: 700px;
    margin: 0 auto;
}

.gform_page_footer {
    margin-top: 20px !important;
    padding-bottom: 0px !important;
}

.gm-lead-final-message-container {
    max-width: 685px;
    margin: 0 auto;
    padding: 36px 10px;
}
.gm_lead_generation_form .gform_confirmation_message {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.gm_lead_generation_form .gform_confirmation_message:before {
    content: "";
    position: absolute;
    height: 240px;
    width: 255px;
    background-image: url(https://www.flaechenmakler.de/wp-content/uploads/2023/01/your-lease-calculations.png);
    bottom: -4%;
    left: 0%;
    background-repeat: no-repeat;
    background-size: cover;
}
.gm_lead_generation_form .gform_confirmation_message:after {
    content: "";
    position: absolute;
    height: 256px;
    width: 211px;
    background-image: url(https://www.flaechenmakler.de/wp-content/uploads/2023/01/your-area-makes-differences.png);
    bottom: -7%;
    right: 0%;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (min-width:768px)
{
	.gm-step-area-category, .gm-step-owner, .gm-step-area-contiguous, .gm-step-area-leased, .gm-step-infrastructure {
   		 width: 400px;
    		margin: 0 auto !important;
	}
	.gm-step-area-type-roof, .gm-step-compensation, .gm-step-power-station, .gm-step-infrastructure-detail {
    		/*width: 600px;*/
		width: 625px;
		margin: 0 auto !important;
	}
	.step-area-location-form {
    		max-width: 650px;
    		margin: 0 auto !important;
	}
	.gm-lead-form-inputs {
    		max-width: 955px;
    		margin: 0 auto;
	}
	.gm-step-area-number {
    		width: 810px;
    		margin: 0px auto !important;
	}
}

.gm-step-area-number .o_img_wr {
    	/*padding: 51.7px 0px !important;*/
	padding: 46px 0px !important;
}

.gm-step-area-number .o_text {
    	display: none;
}

@media only screen and (max-width:767px)
{
	.gm_lead_generation_form .gform_page {
    		padding: 0px 0px 22px 0px !important;
	}
	.gm-quote-calculator-row {
    		padding: 35px 15px 0px 15px !important;
	}
	.gm-quote-calculator-row .o_text {
		font-size: 13px !important;
	}
	.gfield_radio {
   		 -ms-grid-columns: (1fr) [ 2 ] !important;
    		grid-template-columns: repeat(2,1fr) !important;
	}
	.gm-step-area-type-land .gfsp_choice_img,
	.gm-step-owner .gfsp_choice_img,
	.gm-step-area-contiguous .gfsp_choice_img,
	.gm-step-area-leased .gfsp_choice_img,
	.gm-step-compensation .gfsp_choice_img,
	.gm-step-infrastructure .gfsp_choice_img,
	.gm-step-power-station .gfsp_choice_img,
	.gm-step-area-contiguous .gchoice,
	.gm-step-area-number .gchoice,
	.gm-step-infrastructure-detail .gchoice {
    		width: 49%;
    		display: inline-block !important;
    		padding: 4px;
    		margin-bottom: 4px !important;
	}
	.gm-step-area-number .gchoice label {
    		padding: 48px 10px !important;
	}
	.gm-step-area-number .o_img_wr {
    		padding: 0px 0px !important;
	}
	.gm-lead-final-message-container {
   		 max-width: 685px;
    		margin: 0 auto;
    		padding: 0px 10px 90px 10px;
	}
	.gform_confirmation_message:before {
    		height: 150px;
    		width: 149px;
   		bottom: -4%;
	}
	.gform_confirmation_message:after {
    		height: 153px;
    		width: 128px;
    		bottom: -7%;
	}
}

.gform_fields select,
.gform_fields input[type="text"],
.gform_fields input[type="text"],
.gform_fields input[type="tel"], 
.gform_fields input[type="email"],
.gform_fields input[type="tel"],
.gform_fields input[type="email"],
.gform_fields textarea {
	text-align: left !important;
	background-color: #ffffff !important;
	border: 1px solid #E2EAE7 !important;
	padding: 15px 15px !important;
	margin-bottom: 0px !important;
	border-radius: 5px !important;
	color: #5F5F5F !important;
}

.gform_fields input[type="tel"]{
	padding-left: 90px !important;
}

.iti__country-list li{
	list-style: none;
}

.gform_fields ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #5F5F5F !important;
	opacity: 1 !important; /* Firefox */
}
.gform_fields :-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #5F5F5F !important;
}
.gform_fields ::-ms-input-placeholder { /* Microsoft Edge */
	color: #5F5F5F !important;
}
.gform_fields fieldset {
	margin-bottom: 0px !important;
}




/* ###### STEPS ###### */

/* step-area-category */
.gf_stylespro .step-area-category {}

/* step-area-type */
.gf_stylespro .step-area-type {}

/* step-owner */
.gf_stylespro .step-owner {}

/* step-area-size */
.gf_stylespro .step-area-size {}

/* step-area-contiguous */
.gf_stylespro .step-area-contiguous {}

/* step-area-number */
.gf_stylespro .step-area-number {}

/* step-area-leased */
.gf_stylespro .step-area-leased {}

/* step-area-leased-year */
.gf_stylespro .step-area-leased-year {}

/* step-compensation */
.gf_stylespro .step-compensation {}

/* step-infrastructure */
.gf_stylespro .step-infrastructure {}

/* step-infrastructure-detail */
.gf_stylespro .sstep-infrastructure-detail {}

/* step-power-station */
.gf_stylespro .step-power-station {}

/* step-area-location */
.gf_stylespro .step-area-location {}

/* step-contact */
.gf_stylespro .step-contact {}



/* ###### DATACONFIRMATION FORM ###### */

#top #confirm-data-wrapper .gf_stylespro_wrapper .gf_stylespro label.gfield_label{
	text-align: left;
	margin-bottom: 0;
}

#confirm-data-wrapper .gform_wrapper.gravity-theme .field_description_above .gfield_description{
	padding: 0px 8px 16px 8px;
}

#confirm-data-wrapper .gf_stylespro_wrapper .gf_stylespro .gfield.gfield--type-phone,
#confirm-data-wrapper .gf_stylespro_wrapper .gf_stylespro .gfield.gfield--type-select{
	margin: 0 0 20px 0;
}

#confirm-data-wrapper .gf_stylespro_wrapper .gf_stylespro.sp_flaechenmakler .button{
	color: #ffffff !important;
	padding: 12px 52px 12px 22px !important;
	background-image: url(https://www.flaechenmakler.de/wp-content/uploads/2023/01/btn-next-arrow.png) !important;
	background-size: 13% !important;
	background-repeat: no-repeat !important;
	background-position: 90% 45.7% !important;
	background-color: #15A066;
}




/* ###### DPROJECT DEVELOPER FORM ###### */

.gm-project-developer-lead-form.gf_stylespro .ginput_container .gfield-choice-input{
	position: relative;
	opacity: 1;
}

#top .gf_stylespro_wrapper .gm-project-developer-lead-form.gf_stylespro legend.gfield_label,
#top .gf_stylespro_wrapper .gm-project-developer-lead-form.gf_stylespro label.gfield_label {
    text-align: left;
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 0px;
}

.gm-project-developer-lead-form.gf_stylespro .field_description_above .gfield_description {
	text-align: left;
	padding: 0px;
}