@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;

	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 {
	font-family: "TitilliumWeb", sans-serif;
	font-size: 14px !important;
}

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

.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;
	}
}

.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;
}

.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;
}

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

input[type="checkbox"] {
	width: 24px;
	height: 24px;
	accent-color: #3796C2;
	cursor: pointer;
}

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;
}

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

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

.search-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	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: auto;

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

.search-company {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	background-color: white;
	border: 1px solid #C0C0C0;

	&.selected {
		border: 2px solid #3796C2;
	}
}

.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;
	}
}

.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;
}

#informativa {
	position: relative;
	background-color: #ffffff;
	padding: 24px 16px 38px;
	z-index: 10;

	&::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;
	}
}

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

	&.open {
		height: auto;
	}

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

.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;
}

.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: 36px;
	right: 32px;
	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);
}

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

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