/**
Development only - Remove for production
*/
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap');

.lp-configuratore {
	font-family: 'Montserrat', sans-serif;
}

.lp-configuratore h2, .lp-configuratore h3, .lp-configuratore h4, .lp-configuratore h5, .lp-configuratore h6 {
	font-family: 'Ubuntu', sans-serif;
} */


/* html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

.wp-block-post-title {
	display: none;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1200px;
} */

/**
End Development only - Remove for production
*/

.lp-configuratore {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 48px auto;
}

.lp-configuratore .step {
	max-width: 40.625rem; /* 650px */
	width: 95%;
	margin: 0 auto;
}

.lp-configuratore-only-step-0 .step .step-title,
.lp-configuratore-only-step-0 .step .step-description {
	display: none;
}

.lp-configuratore .step-title {
	font-size: 3.0625rem; /* 49px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--e-global-color-secondary);
	margin-top: 0;
}

.lp-configuratore .step-description {
	font-size: 1.25rem; /* 20px */
	font-weight: 400;
	line-height: 1.5;
	color: var(--e-global-color-text);
}

.lp-configuratore .search-form,
.lp-configuratore-only-step-0 .search-form {
	position: relative;
	width: 100%;
}

.lp-configuratore .search-form__icon,
.lp-configuratore .search-form button,
.lp-configuratore-only-step-0 .search-form__icon,
.lp-configuratore-only-step-0 .search-form button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.lp-configuratore .search-form__icon,
.lp-configuratore-only-step-0 .search-form__icon {
	left: 1rem;
	color: var(--e-global-color-secondary);
	line-height: 0;
}

.lp-configuratore .search-form__icon svg,
.lp-configuratore-only-step-0 .search-form__icon svg {
	width: 1.5rem; /* 24px */
}

.lp-configuratore .search-form button,
.lp-configuratore-only-step-0 .search-form button {
	right: 1rem;
	appearance: none;
	border: none;
	background: var(--e-global-color-secondary);
	padding: 0;
	cursor: pointer;
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.lp-configuratore .search-form button span,
.lp-configuratore-only-step-0 .search-form button span {
	display: none;
}

.lp-configuratore .search-form button svg,
.lp-configuratore-only-step-0 .search-form button svg {
	width: 1.5rem; /* 24px */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--e-global-color-7ee6919);
}

.lp-configuratore .search-form input,
.lp-configuratore-only-step-0 .search-form input {
	width: 100%;
	padding: 1rem 1.5rem 1rem 3rem !important;
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 0.625rem; /* 10px */
	font-size: inherit !important;
	font-family: inherit !important;
	text-transform: uppercase;
	font-weight: 400 !important;
	line-height: 1.5;
	color: var(--e-global-color-text);
}

@media (min-width: 768px) {

	.lp-configuratore .search-form button,
	.lp-configuratore-only-step-0 .search-form button {
		right: 1.5rem;
	}
	.lp-configuratore .search-form__icon,
	.lp-configuratore-only-step-0 .search-form__icon {
		left: 1.5rem;
	}
	.lp-configuratore .search-form input,
	.lp-configuratore-only-step-0 .search-form input {
		padding: 1rem 1.5rem 1rem 4.25rem !important;
	}
}

.lp-configuratore .search-form input::placeholder,
.lp-configuratore-only-step-0 .search-form input::placeholder {
	color: var(--e-global-color-secondary);
}

.lp-configuratore .search-form input:focus,
.lp-configuratore-only-step-0 .search-form input:focus {
	outline: none;
}

.building-type,
.skip-to-form {
	background: hsl(76 100% 40% / 0.222);
	padding: 1rem;
	margin-bottom: 24px;
}

.building-type p,
.skip-to-form p {
	margin-bottom: 0 !important;
}

.lp-configuratore .btn,
.lp-configuratore .next-step:not([data-next="1"]),
.lp-configuratore input[type="submit"] {
	appearance: none;
	border: 2px solid var(--e-global-color-secondary);
	background: var(--e-global-color-secondary) !important;
	padding: 1rem 0.8rem !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	color: var(--e-global-color-7ee6919) !important;
	display: inline-block;
	margin-top: 1rem;
	font-family: inherit !important;
	font-weight: bold !important;
	font-size: 1rem !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

.next-step.skip-question,
.btn.skip-question,
.btn.prev-step {
	background: transparent !important;
	color: var(--e-global-color-secondary) !important;
	margin-right: 1rem;
}

label.btn {
	font-size: 0.875rem;
	padding: 0.5rem 1rem;
}

.next-step:not([data-next="1"]) {
	float: right;
}

.container::before,
.container::after {
	content: "";
	display: table;
	clear: both;
}

.confirm-roof {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 1000%;
	width: auto;
	height: 600px;
}

@media (min-width: 1024px) {
	.confirm-roof {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: auto;
	}
}

.choices > p,
.upload-area > p:not(.assistive-text){
	font-weight: 900;
}

.results {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
}

@media (min-width: 1024px) {
	.results {
		grid-template-columns: repeat(2, 1fr);
	}
}

.choices ul:not(.extra){
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	padding: 0;
	margin: 0 0 24px 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.choices ul:not(.extra){
		grid-template-columns: repeat(auto-fill, 9.375rem);
	}
}

#step-2 .choices ul {
	grid-template-columns: repeat(2, 1fr);
}

#step-2 .choices ul li:first-child {
	grid-column: 1 / 3;
}

.choices ul:not(.extra) li {
	display: grid;
}

.choices ul:not(.extra) li label {
	width: 100%; /* 150px */
	height: 9.375rem; /* 150px */
}

@media (min-width: 1024px) {
	.choices ul:not(.extra) li label {
		width: 9.375rem; /* 150px */
	}

	#step-2 .choices ul:not(.extra) li:first-child label {
		width: 9.375rem; /* 300px */
	}
}

.choices ul:not(.extra) li label,
.results > div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 10px;
	box-shadow:
      1px 2px 2px hsl(72deg 71% 93% / 0.333),
      2px 4px 4px hsl(72deg 71% 93% / 0.333),
      3px 6px 6px hsl(72deg 71% 93% / 0.333);
	border: 2px solid var(--e-global-color-primary);
	transition: all 0.3s ease;
	font-size: 0.875rem; /* 14px */
	padding: 0.5rem;
	cursor: pointer;
}

.choices ul:not(.extra) li label:has(input:checked) {
	background: hsl(76 100% 40% / 0.222);
}

.choices ul:not(.extra) li label img,
.results > div img {
	width: 3.125rem; /* 50px */
	height: 3.125rem; /* 50px */
	margin-bottom: 0.5rem;
}

.choices ul:not(.extra) li label span {
	text-align: center;
}

.choices ul:not(.extra) li label input {
	display: none;
}

.choices ul:not(.extra) li:first-child label {
	justify-self: center;
}

.choices ul:not(.extra) li:last-child label {
	justify-self: start
}

.choices ul:not(.extra) li:not(:first-child, :last-child) label {
	justify-self: end;
}

/**
Styling autocomplete
@see https://developers.google.com/maps/documentation/javascript/place-autocomplete#style_autocomplete
*/
.pac-icon {
	display: none;
}

.pac-container {
	background-color: var(--e-global-color-7ee6919);
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 0.625rem; /* 10px */
}

.pac-container .pac-item {
	padding: 1rem 1.5rem;
	font-size: 1rem; /* 20px */
	font-weight: 400;
	line-height: 1.5;
	color: var(--e-global-color-text);
	font-family: 'Montserrat', sans-serif;
}

@media (min-width: 1024px) {
	.pac-container .pac-item {
		font-size: 1.25rem; /* 24px */
	}
}

.pac-container .pac-item-query,
.pac-container .pac-item-query + span {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	font-family: inherit;
}

.pac-logo::after {
	display: none;
}






.step:not(.active) {
	display: none;
}

#drop-area {
  border: 2px dashed var(--e-global-color-secondary);
  border-radius: 20px;
  width: 100%;
  margin: 24px auto;
  padding: 24px;
}
#drop-area.highlight {
  border-color: var(--e-global-color-primary);
}
.lp-configuratore  #drop-area p {
	font-size: 0.875rem; /* 14px */
  margin-top: 0;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery img {
  width: 150px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: middle;
}
#fileElem {
  display: none;
}

progress {
	width: 100%;
	height: 20px;
}

progress::-moz-progress-bar {
	background: var(--e-global-color-secondary);
}

progress::-webkit-progress-bar {
	background: var(--e-global-color-primary);
}

.slidecontainer {
	display: flex;
	align-items: center;
	gap: 24px;
}

.slidecontainer .min,
.slidecontainer .max {
	display: block;
	width: 110px;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
	border-style: none !important;
	border-width: 0 !important;
	border-color: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: var(--e-global-color-secondary);
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--e-global-color-7ee6919);
  box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--e-global-color-secondary);
}
.range-wrap{
  width: 500px;
  position: relative;
}
.range-value{
  position: absolute;
  top: -50%;
}
.range-value span{
  width: 40px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-7ee6919);
  font-size: 12px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 6px;
}
.range-value span:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid var(--e-global-color-secondary);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}

.kwh-result {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	margin: 1.5rem 0;
}

.kwh-result .unit {
	color: var(--e-global-color-primary);
}

li.big-font,
.choices li label {
	position: relative;
	/* overflow: hidden; */
}


li.big-font label span:not(.tooltip){
	font-size: 1.5rem;
	font-weight: bold;
}

li.big-font .tooltip-icon,
.choices li .tooltip-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	color: var(--e-global-color-secondary);
}

li.big-font .tooltip-icon:hover + .tooltip,
.choices li .tooltip-icon:hover + .tooltip {
	display: block;
}

@media (hover: hover) {
	.choices ul:not(.extra) li label:hover {
		background: hsl(76 100% 40% / 0.111)
	}

	.pac-container .pac-item:hover {
		background-color: var(--e-global-color-da4548e);
		color: var(--e-global-color-text);
	}

}


li.big-font .tooltip,
.choices li .tooltip {
	display: none;
	position: absolute;
	width: 150%;
	z-index: 100;
	background-color: white;
	padding: 8px;
	border-radius: 5px;
	border: 2px solid var(--e-global-color-primary);
	top: 38px;
	font-size: 14px;
}

li.big-font .tooltip::before,
.choices li .tooltip::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid var(--e-global-color-primary);
	position: absolute;
	top: -5px;
	right: 51px;
}

@media (max-width: 768px) {
	li.big-font .tooltip,
	.choices li .tooltip {
		width: 167px;
    right: 4px;
	}

	li.big-font .tooltip::before,
	.choices li .tooltip::before {
		top: -5px;
    right: 9px;
	}
}

ul.extra {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-configuratore ul.extra li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
	gap: 0.5rem;
	line-height: 1.2;
	position: relative;
}

.lp-configuratore ul.extra li span {
	flex: 1;
	padding-right: 32px;
}

.lp-configuratore ul.extra li span:not(.tooltip){
	display: inline-block;
}

.lp-configuratore ul.extra li .tooltip-icon {
	top: 0;
  right: 0;
}

.lp-configuratore ul.extra li .tooltip {
	top: 30px;
  right: 0;
	width: 250px;
}

.lp-configuratore ul.extra li .tooltip::before {
	top: -5px;
	right: 5px;
}



.lp-configuratore input[type="checkbox"] {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: #fff;
	/* Not removed via appearance */
	margin: 0;
	font: inherit;
  color: currentColor;
  width: 1.15rem;
  height: 1.15rem;
  border: 0.15rem solid var(--e-global-color-secondary);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
	display: grid;
  place-content: center;
	padding: 0 !important;
	border-radius: 0 !important;
}

.lp-configuratore input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--e-global-color-primary);
	transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.lp-configuratore input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.lp-configuratore .big-font label:has(input.suggested)::before {
	content: "Suggerito";
	display: block;
	font-size: 0.875rem;
	font-weight: normal;
	color: var(--e-global-color-7ee6919);
	margin-bottom: 0.5rem;
	position: absolute;
	top: 31px;
	left: -26px;
	background: var(--e-global-color-primary);
	transform: rotate(270deg);
	width: max-content;
	padding: 0 10px;
	text-align: center;
}

.results > div .total {
	font-size: 1.5rem;
	font-weight: bold;
	padding: 16px 0;
}

.results > div .total-2 {
	color: var(--e-global-color-b990935);
}

.results > div .total .number span {
	font-size: 14px;
	position: relative;
	top: -3px;
}

.results > div p {
	margin: 0;
}

.input-group {
	margin-bottom: 0.875rem;
}

.input-group:not(.no-flex) {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.input-group.no-flex {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.input-group.no-flex label {
	flex: 1;
}

.input-group input:not([type="checkbox"], [type="submit"]) {
	width: 100%;
	padding: 1rem;
	margin-bottom: 0.5rem;
	font-size: 1rem !important;
	font-family: inherit !important;
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 0.625rem;
}

.input-group input:not([type="checkbox"], [type="submit"])::placeholder {
	color: var(--e-global-color-secondary);
}

.input-group input:not([type="checkbox"], [type="submit"]):focus {
	outline: none;
	border-color: var(--e-global-color-primary);
}

.input-group small a {
	font-size: inherit;
}

.alert {
	margin-top: 16px;
	padding: 10px;
	font-weight: bold;
	color: #2D3748;
}

.alert--error {
	background-color: #f5d8d8;
	border-left: 4px solid #cc4d44;
}