@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-ExtraLight.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 100;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-ExtraLightItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-ExtraLight.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 200;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-ExtraLightItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-Light.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-LightItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-Black.woff2') format('woff2');
}

@font-face {
	font-family: 'TitilliumWeb';
	font-style: italic;
	font-weight: 900;
	font-display: swap;
	src: url('res/fonts/TitilliumWeb-BoldItalic.woff2') format('woff2');
}

:root {
	--topbar-height: 80px;
	--navbar-height: 80px;
	--footer-height: 353px;
	--container-px: 32px;
	--text-dark: #4E4D4E;
	--text-light: white;
	--color-error: #D53581;
	--tux_input_height: 40px;
	--tux_input_color: #4E4D4E !important;
	--tux_input_border: #C0C0C0;
	--tux_input_font_size: 14px;

	--tux_input_weight: 400 !important;

	interpolate-size: allow-keywords;
}

body {
	background-color: #F4F4F4;
	min-width: 1200px;
	font-family: "TitilliumWeb", sans-serif;
	color: var(--text-dark);
}

input[type="text"], input[type="number"], .select-wrapper, .tux_datepicker, .tux_select_wrapper, .tux_datalist_wrapper {
	font-family: "TitilliumWeb", sans-serif;
	font-size: 14px !important;
	color: var(--text-dark) !important;
	border: 1px solid #C0C0C0 !important;
	border-radius: 4px;
	height: 40px;
}

.tux_datalist {
	font-family: "TitilliumWeb", sans-serif !important;
}

.select-wrapper {
	background-color: white;
	padding: 0 8px;

	select {
		height: 100%;
		font-size: 14px;
		font-family: "TitilliumWeb", sans-serif;
	}

	select:focus {
		outline: none !important;
		box-shadow: none !important;
	}

	&:has(select:focus) {
		border-color: #007BFF;
		box-shadow: 0 0 0 2px #007bff33;
	}

	select {
		color: #999;
		-webkit-appearance: none;
		appearance: none;
		background: white url(res/images/arrow.svg) no-repeat right 0px center;
		background-size: 24px;
	}

	select:valid {
		color: var(--text-dark);
	}
}

.tux_select_wrapper {
	padding-bottom: 41px;
}

.tux_select {
	font-family: "TitilliumWeb", sans-serif !important;
	font-size: 14px !important;
}

button {
	font-family: "TitilliumWeb", sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.tux_datepicker span {
	color: var(--text-dark) !important;
}

a {
	color: inherit;
	text-decoration: underline;
}

b {
	font-weight: 600;
}

.topbar {
	height: var(--topbar-height);
	background-color: white;
	display: flex;
	align-items: center;
}

.navbar {
	height: var(--navbar-height);
	color: white;
	background-color: var(--assicurami_lit);
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer {
	height: var(--footer-height);
	background-color: #4F5050;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	line-height: 18px;
	gap: 32px;
	padding-top: 34px;
	padding-bottom: 94px;
	min-width: 944px;
	font-size: 11px;
	color: #ffffff;
}

.footer a {
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
}

.fill-white {
	path {
		fill: white;
	}
}

.stroke-error {
	path {
		stroke: var(--color-error);
	}
}

.opacity-05 {
	opacity: 0.5;
}

.opacity-06 {
	opacity: 0.6;
}

.opacity-08 {
	opacity: 0.8;
}

.min-page-h {
	min-height: calc(100vh - var(--topbar-height) - var(--navbar-height) - var(--footer-height));
}

.shadow-base {
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.16);
}

.shadow-lg {
	box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.16);
}

.shadow-xl {
	box-shadow: 0 4px 64px 0 rgba(0, 0, 0, 0.10);
}

.btn-light,
.btn-dark,
.btn-blue,
.btn-blue-outline {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 16px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;

	&:disabled {
		pointer-events: none;
		background-color: #F7F7F7;
		color: #C0C0C0;
		border: 2px solid #E7E7E7;
	}
}

.block-email input[type="text"] {
	pointer-events: none;
}

.input-text-bold input[type="text"] {
	font-weight: 600;
}

.btn-light {
	background-color: white;
	color: var(--text-dark);
	border: 1px solid #C0C0C0;
}

.btn-dark {
	background-color: #9C9C9C;
	color: var(--text-light);
}

.btn-blue {
	background-color: #3796C2;
	color: var(--text-light);

	&:disabled {
		pointer-events: none;
		background-color: transparent;
		color: #DFDFDF;
		border: 1px solid #DFDFDF;
	}

	circle {
		stroke: #DFDFDF;
	}

	path {
		fill: #DFDFDF;
	}
}

.btn-blue-outline {
	background-color: #F8FDFF;
	border: 2px solid #3796C2;
	color: #3796C2;
	font-size: 14px;
}

.text-light {
	color: var(--text-light);
}

.text-dark {
	color: var(--text-dark);
}

.text-error {
	color: var(--color-error);
}

.no-bullets {
	list-style-type: none;
}

.m-auto {
	margin: auto;
}

.border-base {
	border: 1px solid #B5B5B5;
}

.container {
	width: 100%;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
	margin: auto;
}

input[type="text"] {
	height: 40px !important;
	border: 1px solid #C0C0C0 !important;
	border-radius: 4px !important;
	padding: 0px 8px !important;
}

input[type="text"].err~.err-msg {
	visibility: visible;
	pointer-events: auto;
}

input[type="text"].err {
	border: 1px solid var(--color-error) !important;
}

.err-msg {
	position: absolute;
	bottom: -20px;
	left: 0px;
	height: 22px;
	font-size: 12px;
	color: var(--color-error);
	visibility: hidden;
	pointer-events: none;
}

.step-circle {
	width: 32px;
	height: 32px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #E7E7E7;
	padding-right: 1px;
	cursor: pointer;
	opacity: 0.6;
	color: #CFCFCF;
}

.step-circle.visited {
	background-color: white;
	color: var(--text-dark);
	font-weight: 400;
	border: 1px solid #3796C2;
	cursor: pointer !important;
	opacity: 1;
}

.step-circle.active {
	background-color: #3796C2;
	color: var(--text-light);
	font-weight: 700;
	border: none;
	pointer-events: none !important;
	cursor: auto !important;
	opacity: 1;
}

input[type="checkbox"] {
	width: 24px;
	height: 24px;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid var(--Cornice-B, #C0C0C0);
	appearance: none;
	background: #fff;

	&:checked {
		border-color: transparent;
		background-color: #3796C2;
 		 background-image: url('res/images/check_white.svg');
		 background-size: 14px 14px;
		 background-repeat: no-repeat;
		 background-position: center;
	}
}

.lightgray {
	width: 12px;
	height: 10px;

	path {
		fill: #CFCFCF;
	}
}

input[type="radio"] {
	appearance: none;
	min-width: 24px;
	min-height: 24px;
	cursor: pointer;
	border: 1px solid #C0C0C0;
	background-color: #ffffff;
	border-radius: 4px;
}

.accent-color {
	color: #3796C2;
}

label {
	cursor: pointer;
	font-weight: 600;
}

.fake-link {
	color: #3796C2;
	text-decoration: underline;
	cursor: pointer;
}

.pointer-events-none {
	pointer-events: none;
}

.user-menu-wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	display: inline-block;
}

/* box menu */
.user-menu {
	position: absolute;
	top: 48px;
	/* distanza sotto al bottone */
	left: 50%;
	transform: translateX(-50%);
	min-width: 260px;
	background: #ffffff;
	border: 2px solid #DFDFDF;
	/* bordo grigio */
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
	padding: 20px 24px 18px;
	z-index: 1000;
}

/* triangolino in alto */
.user-menu::before {
	content: "";
	position: absolute;
	top: -12px;
	/* alzato di 2px per compensare il bordo */
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 12px solid #ffffff;
	filter: drop-shadow(0 0 0 #DFDFDF);
	/* serve per “simulare” il bordo */
}

/* pseudo-elemento per il bordo del triangolino */
.user-menu::after {
	content: "";
	position: absolute;
	top: -14px;
	/* leggermente più alto */
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 14px solid #DFDFDF;
	/* bordo grigio */
	z-index: -1;
}

/* righe del menu */
.user-menu__email {
	font-size: 12px;
	margin-bottom: 18px;
	color: var(--text-dark);
	font-weight: 400;
}

.user-menu__item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 6px 0;
	cursor: pointer;
	font-size: 14px;
}

.user-menu__item.disabled {
	color: #DFDFDF;
	cursor: default;
	font-weight: 400;
}

.user-menu__item+.user-menu__item {
	margin-top: 4px;
}

.search-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 119px;
	max-height: 376px;
	background-color: #F7F7F7;
	background-image: url("./res/images/building.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	border: 1px dashed #C0C0C0;
	border-radius: 8px;
	padding: 16px 112px 32px 16px;
	overflow-y: auto;
	overflow-x: hidden;

	&.bg-image-none {
		background-image: none;
	}
}

.search-company {
	width: 640px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	background-color: white;
	box-shadow: inset 0 0 0 1px #C0C0C0;
	border-radius: 8px;
	transition: box-shadow 150ms linear;
	cursor: pointer;

	&.selected {
		box-shadow: inset 0 0 0 2px #3796C2;
	}

	.btn-blue-outline {
		transition: opacity 150ms linear;
		opacity: 0;
	}
}

.search-company:hover {
	box-shadow: inset 0 0 0 2px #3796C2;

	.btn-blue-outline {
		opacity: 1;
	}
}

.check-circle-blue {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #3796C2;
	border-radius: 100%;
	background-color: #F2F8FB;

	svg {
		width: 14px;
		height: 10px;
	}

	path {
		fill: #3796C2;
	}
}

.info-icon {
	circle {
		fill: white;
		transition: fill 150ms linear;
	}

	&:hover circle {
		fill: #F2F8FB;
	}
}

.check-blue {
	svg {
		width: 16px;
		height: 13px;
	}

	path {
		fill: #3796C2;
	}
}

.check-accent {
	svg {
		width: 16px;
		height: 13px;
	}

	path {
		fill: #6DD5FF;
	}
}

.check-white {
	svg {
		width: 16px;
		height: 13px;
	}

	path {
		fill: white;
	}
}

.clearable {
	position: absolute;
	top: 55%;
	right: 6px;
	transform: translateY(-50%) scale(0.7);
	cursor: pointer;

	&~input[type="text"] {
		padding-right: 40px !important;
	}
}

.box {
	background-color: #F7F7F7;
	border: 1px solid #CFCFCF;
	border-radius: 8px;
}

.policy-info-content-h {
	height: 0px;
	transition: height 150ms linear;
	overflow: hidden;
}

#informativa {
	height: 88px;
	position: relative;
	background-color: #ffffff;
	padding: 24px 16px 38px;
	z-index: 10;
	transition: height 150ms linear;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: scaleX(2);
		border-top: 1px solid #CFCFCF;
		border-bottom: 1px solid #CFCFCF;
		background-color: #ffffff;
		z-index: -5;
	}

	&.open {
		height: auto;

		.arrow {
			transform: rotate(0deg);
		}

		.policy-info-content-h {
			height: auto;
		}
	}

	& .hide {
		display: none;
	}

	&.open .hide {
		display: flex;
	}
}

.section {
	transition: height 200ms linear;
	height: 32px;
	overflow: hidden;

	&.open {
		height: auto;
		overflow: visible;
	}

	.visible-when-opened {
		opacity: 0;
		transition: opacity 100ms linear;
	}

	&.open .visible-when-opened {
		opacity: 1;
	}

	.cursor-pointer-section-closed:has(&:not(.open)) {
		cursor: pointer;
	}
}

.max-modal-height {
	max-height: 100svh;
	overflow: auto;
}

.path-fill-none path {
	fill: none;
}

.property-tab {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: 500;
	width: 100px;
	height: 42px;
	padding: 12px;
	background-color: #F8FDFF;
	color: #466580;
	border-top: 1px solid #E7E7E7;
	border-left: 1px solid #E7E7E7;
	border-right: 1px solid #E7E7E7;
}

.selected-property-tab {
	background-color: #648AAA;
	color: #ffffff;
	cursor: auto;
	border-top: 1px solid #648AAA;
	border-left: 1px solid #648AAA;
	border-right: 1px solid #648AAA;
}

.add-property-tab {
	justify-content: center;
	background-color: #ffffff;
	color: #ffffff;
	border-top: 1px dashed #C0C0C0;
	border-left: 1px dashed #C0C0C0;
	border-right: 1px dashed #C0C0C0;
}

.arrow {
	transform: rotate(180deg);
	transition: transform 150ms linear;
}

.section.open .arrow {
	transform: rotate(0deg);
}

.required {
	display: none;
}

.section.open .required {
	display: block;
}

.status {
	display: block;
}

.section.open .status {
	display: none;
}

.white-shield path {
	stroke: white;
}

button:enabled {
	path {
		fill: white;
	}

	circle {
		stroke: white;
	}
}

.tooltip-top {
	width: 260px;
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translate(-50%, -100%) scale(0.9);
	background-color: #466580;
	color: white;
	padding: 16px;
	border-radius: 8px;
	opacity: 0;
	transition: all 150ms linear;
	font-size: 12px;
	pointer-events: none;
	z-index: 10;

	.tooltip-triangle {
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #466580;
	}

	&.visible {
		opacity: 1;
		transform: translate(-50%, -100%) scale(1);
	}
}

.tooltip-bottom {
	width: 260px;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translate(-50%, 100%) scale(0.9);
	background-color: #466580;
	color: white;
	padding: 16px;
	border-radius: 8px;
	opacity: 0;
	transition: all 150ms linear;
	font-size: 12px;
	pointer-events: none;
	z-index: 10;

	.tooltip-triangle {
		position: absolute;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #466580;
	}

	&.visible {
		opacity: 1;
		transform: translate(-50%, 100%) scale(1);
	}
}

.tooltip-left {
	margin-top: -2px;
	width: 260px;
	position: absolute;
	top: 50%;
	left: -12px;
	transform: translate(-100%, -50%) scale(0.9);
	background-color: #466580;
	color: white;
	padding: 16px;
	border-radius: 8px;
	opacity: 0;
	transition: all 150ms linear;
	font-size: 12px;
	pointer-events: none;
	z-index: 10;

	.tooltip-triangle {
		position: absolute;
		top: 50%;
		right: -10px;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid #466580;
	}

	&.visible {
		opacity: 1;
		transform: translate(-100%, -50%) scale(1);
	}
}

.tooltip-right {
	margin-top: -2px;
	width: 260px;
	position: absolute;
	top: 50%;
	right: -12px;
	transform: translate(100%, -50%) scale(0.9);
	background-color: #466580;
	color: white;
	padding: 16px;
	border-radius: 8px;
	opacity: 0;
	transition: all 150ms linear;
	font-size: 12px;
	pointer-events: none;
	z-index: 10;

	.tooltip-triangle {
		position: absolute;
		top: 50%;
		left: -10px;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-right: 10px solid #466580;
	}

	&.visible {
		opacity: 1;
		transform: translate(100%, -50%) scale(1);
	}
}

.delete-building {
	position: absolute;
	top: 50%;
	right: 32px;
	transform: translateY(-50%);
	font-size: 12px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.svg-stroke-err path {
	stroke: var(--color-error);
}

.company-magnifying-glass {
	margin-top: 8px;

	svg {
		width: 16px;
		height: 16px;
	}

	path {
		stroke: var(--text-dark);
	}
}

.readonly {
	pointer-events: none;
	opacity: 0.6;
	color: color-mix(in srgb, var(--text-dark) 60%, transparent);

	.accent-color {
		color: color-mix(in srgb, var(--text-dark) 60%, transparent);
	}
}

.following-summary {
	position: sticky;
	top: 0px;
}

.step-title-text {
	color: #3796C2;
	font-weight: 600;
	opacity: 1;
}

.readonly .step-title-text {
	color: var(--text-dark);
	font-weight: 400;
	opacity: 0.8;
}

.emit-spinner-overlay {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 4000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--tux_screen_color, #00000080);
	backdrop-filter: var(--tux_screen_filter, none);
}

.emit-spinner {
	width: var(--tux_spinner_size, 100px);
	height: var(--tux_spinner_size, 100px);
	border: var(--tux_spinner, 6px solid #e0e0e0);
	border-top-color: transparent;
	border-radius: 50%;
	animation: emit-spinner-spin 2s linear infinite;
}

.emit-spinner-text {
	font-size: 24px;
	padding-top: 64px;
	color: white;
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


@keyframes emit-spinner-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@media screen and (min-width: 1280px) {
	.container {
		max-width: 1200px;
	}
}