/* Carica il font 'Inter' da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,600,0..1,-50..200&display=swap');

/* Nascondiamo anagrafica inizialmente */
#pf-block,
#pg-block {
	display: none;
}

/* Impostazioni Globali del Font */
body, button, input, textarea, .btn, h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
}

/* Classe base */
.bubble-title {
	font-size: 2.5rem;
	padding-left: 10px;
	margin-top: 10px;
	margin-left: 10px;
	border-left: 5px solid #4106FF;
}

/* Sottoclasse per i rifiuti */
.bubble-title-refuse {
	border-left: 5px solid #ff0505;
	padding-left: 10px;
}

/* Stile per dispositivi smartphone e mobile (max-width: 576px) */
@media (max-width: 576px) {
	.bubble-title {
		font-size: 2rem; /* Riduciamo la dimensione del font per dispositivi mobili */
	}

	/* Riduzione della dimensione del font anche per la sottoclasse */
	.bubble-title-refuse {
		font-size: 2rem;
	}
}
/* Container principale della pagina */
.generic-page-container {
	display: flex;
	flex-direction: column;
	min-height: 10vh;
}

/* Container del form di login */
.generic-element-container {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
}

/* Card del form di login */
.generic-card {
	position: relative;
	padding: 2rem;
	padding-bottom: 50px; /* Spazio extra per il link "forgot password" */
	background: #FFFFFF;
	box-shadow: 0px 0px 24px 4px rgba(65, 6, 255, 0.25);
	border-radius: 20px;
	width: 100%;
	max-width: 400px;
	margin: auto;
	transition: box-shadow 0.5s ease, padding-bottom 0.3s ease;
}


.mando-add-button {
	padding: 6px 12px;
	background-color: #05FFA0; /* Colore verde */
	color: white;
	border: 2px solid #05FFA0;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1em; /* Dimensione del font */
	font-family: 'Inter', sans-serif; /* Usa il font 'Inter' */
	font-weight: 600;
}

	.mando-add-button .material-symbols-outlined {
		margin-right: 8px;
		font-size: 1.2em; /* Dimensione dell'icona */
		font-variation-settings: 'wght' 700, 'GRAD' 200, 'opsz' 20;
		color: white; /* Colore dell'icona */
	}

	.mando-add-button:hover {
		background-color: white;
		color: #05FFA0;
		border-color: #05FFA0;
	}

		.mando-add-button:hover .material-symbols-outlined {
			color: #05FFA0;
		}


.mando-delete-button {
	padding: 6px 12px;
	background-color: #ff0505; /* Colore verde */
	color: white;
	border: 2px solid #ff0505;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1em; /* Dimensione del font */
	font-family: 'Inter', sans-serif; /* Usa il font 'Inter' */
	font-weight: 600;
}

	.mando-delete-button .material-symbols-outlined {
		margin-right: 8px;
		font-size: 1.2em; /* Dimensione dell'icona */
		font-variation-settings: 'wght' 700, 'GRAD' 200, 'opsz' 20;
		color: white; /* Colore dell'icona */
	}

	.mando-delete-button:hover {
		background-color: white;
		color: #ff0505;
		border-color: #ff0505;
	}

		.mando-delete-button:hover .material-symbols-outlined {
			color: #ff0505;
		}

/* Nuovo stile per il bottone Export */
.mando-export-button {
	padding: 6px 12px;
	background-color: transparent;
	color: #4106FF;
	border: 2px solid #4106FF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.15s ease-in, color 0.15s ease-in, opacity 0.15s ease-in;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1em;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	opacity: 0.8; /* Opacità ridotta all'80% */
}

	.mando-export-button .material-symbols-outlined {
		margin-right: 8px;
		font-size: 1.2em;
		font-variation-settings: 'wght' 700, 'GRAD' 200, 'opsz' 20;
		color: #4106FF;
	}

	.mando-export-button:hover {
		background-color: #4106FF;
		color: white;
		border-color: #4106FF;
		opacity: 1; /* Opacità al 100% quando in hover */
	}

		.mando-export-button:hover .material-symbols-outlined {
			color: white;
		}


.me-2 {
	margin-right: 6px;
}

@media (min-width: 768px) {
	.me-2 {
		margin-right: 20px;
	}
}

.button-group-responsive {
	display: flex;
	gap: 0.5rem; /* Spazio tra i bottoni */
	justify-content: flex-end; /* Allinea a destra di default */
}

@media (max-width: 576px) {
	.button-group-responsive {
		justify-content: center; /* Su mobile, centrameli */
	}
}

.title-with-border {
	border-left: 5px solid #4106FF;
	padding-left: 10px; /* Aggiungi un po' di spazio tra il bordo e il testo */
	font-size: 2rem; /* Dimensione base del testo */
}

/* Media query per tablet */
@media (max-width: 768px) {
	.title-with-border {
		font-size: 1.5rem; /* Riduci la dimensione del testo per tablet */
	}
}

/* Media query per dispositivi mobili */
@media (max-width: 576px) {
	.title-with-border {
		font-size: 1.4rem; /* Riduci ulteriormente la dimensione del testo per dispositivi mobili */
	}
}

.mando-grid {
	font-family: 'Inter', sans-serif;
	font-size: 15px !important;
	border-radius: 20px;
	overflow: hidden;
	/* Un bordo molto sottile e di un grigio neutro */
	border: 1px solid #EAECEF !important; /* Colore grigio chiaro, non invadente */
	/* Un'ombra più delicata per dare un senso di "sollevamento" */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/*Inizio Nuovo cod*/

/* =================================================================== */
/* TWEAKS DI DESIGN PER TABULATOR - V3 ()       */
/* =================================================================== */

/* Rimuoviamo i bordi verticali */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-row .tabulator-cell {
	border-right: none;
}

/* Sfondo bianco di base per le righe (necessario per l'hover) */
.tabulator .tabulator-row {
	background-color: #ffffff !important;
	border-bottom: 1px solid #EAECEF; /* Separatore orizzontale */
	transition: background-color 0.2s ease-in-out; /* Transizione per l'hover */
}

	/* Effetto hover per migliorare il focus */
	.tabulator .tabulator-row:hover {
		background-color: #F8F9FA !important;
	}


/* --- HEADER --- */
.tabulator .tabulator-header {
	background-color: #ffffff; /* Header bianco per un look più pulito */
	border-bottom: 1.5px solid #DEE2E6; /* Linea più spessa per separare l'header */
	font-weight: 500;
	color: #495057;
}


/* --- CELLE E TIPOGRAFIA --- */
.tabulator .tabulator-row .tabulator-cell {
	padding: 14px 16px; /* Aumenta ancora un po' lo spazio verticale */
	color: #495057; /* Grigio scuro per una buona leggibilità */
}

	/* Gerarchia visiva sulla prima colonna */
	.tabulator .tabulator-row .tabulator-cell:first-child {
		font-weight: 500;
		color: #212529;
	}


/* --- FILTRI (già presenti, ma li teniamo per coerenza) --- */
.tabulator .tabulator-header-filter input {
	border: 1px solid #DEE2E6;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 14px;
}

/*Fine nuovo cod*/

.tabulator .tabulator-header {
	border-top: none !important;
	border-bottom: none !important;
}

/* Cambiare il colore delle righe alternate nella Tabulator */
.tabulator-row:nth-child(even) {
	background-color: #ffffff !important; /* Colore grigio chiaro */
}

/* Mantenere il colore di evidenziazione al passaggio del mouse */
.tabulator-row:hover {
	background-color: #e0e0e0 !important; /* Colore di evidenziazione al passaggio del mouse */
}

/* CSS per l'animazione della cella */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(65, 6, 255, 1);
	}

	70% {
		box-shadow: 0 0 5px 5px rgba(65, 6, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(65, 6, 255, 0);
	}
}

.cell-hover-wrapper {
	position: absolute;
	top: 6px; /* Aumenta il margine superiore */
	left: 6px; /* Aumenta il margine sinistro */
	right: 6px; /* Aumenta il margine destro */
	bottom: 6px; /* Aumenta il margine inferiore */
	z-index: 10; /* Assicurarsi che sia sopra gli altri elementi */
	border-radius: 15px; /* Angoli arrotondati */
	pointer-events: none; /* Permette l'interazione con l'icona */
	background-color: #FFFFFF; /* Colore viola con trasparenza */
}

.cell-hover {
	animation: pulse 1.5s infinite; /* Rallenta l'animazione */
	box-shadow: 0 0 0 3px #4106FF; /* Bordo viola */
	border-radius: 15px; /* Angoli arrotondati */
	background-color: transparent !important; /* Nessuno sfondo */
	width: 100%;
	height: 100%;
}

.svg-icon-incarichi {
	opacity: 1; /* Assicurarsi che l'icona sia visibile */
	filter: brightness(0) saturate(100%) invert(9%) sepia(98%) saturate(6829%) hue-rotate(259deg) brightness(104%) contrast(124%);
}

.svg-icon-top {
	position: relative; /* Assicurarsi che l'icona sia posizionata rispetto alla cella */
	z-index: 20; /* Assicurarsi che l'icona sia sopra il cell-hover */
}


.tabulator .tabulator-footer .tabulator-page.active {
	border-color: #4106ffcc !important;
	background-color: #4106FF !important;
}

/* Centra orizzontalmente il titolo della colonna "Tipo" */
.tabulator-col[tabulator-field="tipoImmagine"] .tabulator-col-title-holder .tabulator-col-title {
	text-align: center !important;
}

/* Centra orizzontalmente il titolo della colonna "Stato" */
.tabulator-col[tabulator-field="sNomeImmagine"] .tabulator-col-title-holder .tabulator-col-title {
	text-align: center !important;
}

/* Centra orizzontalmente il titolo della colonna "Sollecito" */
.tabulator-col[tabulator-field="sollecito"] .tabulator-col-title-holder .tabulator-col-title {
	text-align: center !important;
}

/* Centra orizzontalmente il titolo della colonna "Incarico" */
.tabulator-col[tabulator-field="contrattoIcon"] .tabulator-col-title-holder .tabulator-col-title {
	text-align: center !important;
}


.general-body {
	padding-top: 2rem;
	padding-bottom: 10rem;
}

.general-body-custom {
	padding-top: 3rem;
	padding-bottom: 10rem;
	padding-left: clamp(2.5%, 20px, 5%);
	padding-right: clamp(2.5%, 20px, 5%);
}


.bubble-deny-link {
	border-left: 5px solid red;
}

.bubble-confirm-link {
	border-left: 5px solid #4106FF;
}

.outside-bubble {
	width: 80%; /* Larghezza relativa alla dimensione dello schermo */
	max-width: 80rem; /* Larghezza massima in rem (~1280px) per schermi grandi */
	min-width: 27rem; /* Larghezza minima in rem (~480px) per schermi pi� piccoli */
	height: auto; /* Permette all'altezza di adattarsi al contenuto */
	position: absolute;
	top: 7%;
	left: 50%;
	transform: translateX(-50%); /* Centra la bubble orizzontalmente */
	z-index: 100;
	border-radius: 25px;
	background-color: white;
	padding: 1rem; /* Padding ridotto per contenuto più compatto */
	overflow: auto; /* Permette lo scrolling all'interno della bubble */
}

	.outside-bubble:after {
		position: absolute;
		color: white;
		top: -25px;
		width: 100%;
		text-align: center;
		z-index: -1;
	}

@media screen and (max-width: 768px) {
	.outside-bubble {
		width: 100vw; /* occuperà tutta la larghezza dello schermo */
		margin: 0; /* rimuovi margini orizzontali */
	}
}


.inside-bubble {
	width: 100%;
	margin: auto;
	padding: 2rem;
	position: relative;
	display: flex;
	flex-direction: column; /* This ALWAYS stays column */
	align-items: center;
	gap: 1.5rem; /* Space between title and button container */
	text-align: center;
}

@media screen and (max-width: 767px) {
	.inside-bubble {
		padding: 0.5rem; /* padding ridotto su mobile */
	}
}

.button-container {
	display: flex;
	flex-direction: column; /* Stacked on mobile */
	align-items: center; /* Center the stacked buttons */
	gap: 1rem; /* Space between the buttons */
	width: 100%; /* Ensures it fills the space */
}

@media screen and (min-width: 768px) {
	.button-container {
		flex-direction: row; /* Buttons go side-by-side */
		justify-content: center; /* Center the buttons horizontally in their row */
	}
}

/* Optional: You might want to adjust the button width on larger screens */
.bubble-button-violet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: #6a0dad;
	color: white;
	padding: 12px 24px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
	width: 220px; /* Give them a fixed width so they look uniform */
}

@media screen and (max-width: 767px) {
	.bubble-button-violet {
		width: 80%; /* On mobile, let them be wider */
	}
}

.hidden {
	display: none;
	margin: 0 !important;
	padding: 0 !important;
}

.bubble-option {
	height: 250px;
	width: 250px;
	background-size: 200px;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 5px;
}

.big-abort {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: rgba(111, 110, 110, 0.42);
}

	.big-abort:hover .tooltiptextbubble {
		visibility: visible;
	}

.side-by-side {
	float: left !important;
}

form {
	display: table;
}

label {
	display: table-cell;
}

input {
	display: table-cell;
}

.bubble-modelli {
	width: 500px;
	height: 150px;
	border-radius: 25px;
	padding-left: 50px;
	padding-right: 50px;
}

	.bubble-modelli:hover {
		width: 500px;
		height: 150px;
		border-radius: 25px;
		padding-left: 50px;
		padding-right: 50px;
		color: white;
		background-color: #4106FF;
	}

/*Inizio descrizione classi bottone bubble*/

.bubble-button-violet {
	padding: 10px 15px;
	background-color: rgb(255, 255, 255);
	color: rgb(65, 6, 255);
	border: 2px solid rgb(249, 249, 249);
	/* Ombra leggera per lo stato normale */
	box-shadow: 0px 4px 6px rgba(65, 6, 255, 0.3);
	text-align: center;
	border-radius: 20px;
	cursor: pointer;
	/* Transizione sia per ombra che per trasformazione */
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1em;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	width: 260px;
	height: 160px;
	margin: 15px;
}

	.bubble-button-violet .material-symbols-outlined {
		font-size: 3rem; /* Dimensione dell'icona */
		color: #4106FF; /* Colore dell'icona */
		transition: color 0.3s ease, transform 0.3s ease;
	}

	.bubble-button-violet:hover {
		background-color: rgb(65, 6, 255);
		color: #fff;
		transform: translateY(-5px); /* Effetto sollevamento */
		/* Ombra pi� profonda per l'hover */
		box-shadow: 0px 12px 14px rgba(65, 6, 255, 0.4);
	}

		.bubble-button-violet:hover .material-symbols-outlined {
			color: white;
			transform: scale(1.1); /* Leggero ingrandimento dell'icona all'hover */
		}


	.bubble-button-violet span {
		font-size: 1.1rem; /* Dimensione del testo leggermente aumentata */
		font-weight: bold;
		margin-top: 10px;
		text-align: center;
		letter-spacing: 0.5px; /* Leggero aumento dello spazio tra le lettere per una migliore leggibilit� */
		color: inherit; /* Si adatta al colore attuale (bianco o viola) */
	}

.button-modelli-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	justify-items: stretch;
	align-items: stretch;
	width: 100%;
	max-width: 1100px;
}

.bubble-button-models-violet {
	position: relative; /* Per l'uso di pseudo-elementi */
	background-color: #4106FF; /* Colore di base solido */
	color: white;
	border-radius: 20px;
	padding: 0.8rem;
	width: 100%; /* Assicura che il bottone riempia tutta la colonna */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
	justify-content: space-between;
	box-sizing: border-box; /* Include padding e bordo nella larghezza totale */
	box-shadow: 0px 4px 6px rgba(65, 6, 255, 0.3); /* Ombra leggera */
	transition: all 0.4s ease-in-out; /* Transizione generale per tutti gli effetti */
	cursor: pointer; /* Cambia il cursore in pointer quando si passa sopra */
}

	.bubble-button-models-violet::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(140deg, #5125DF, #8763FB 50%, #5A33D7);
		border-radius: 20px; /* Raggi dei bordi del gradiente */
		opacity: 1; /* Gradiente visibile all'inizio */
		transition: opacity 0.4s ease-in-out; /* Transizione fluida dell'opacit� */
		z-index: 0; /* Posiziona il gradiente dietro il contenuto */
	}

	.bubble-button-models-violet:hover::before {
		opacity: 0; /* Nasconde il gradiente durante l'hover, lasciando il colore solido */
	}

	.bubble-button-models-violet:hover {
		box-shadow: 0px 10px 12px rgba(65, 6, 255, 0.4); /* Ombra pi� profonda all'hover */
		transform: translateY(-4px); /* Solleva il bottone leggermente all'hover */
	}

	/* Effetto cliccato (active) per simulare pressione */
	.bubble-button-models-violet:active {
		transform: translateY(2px); /* Simula abbassamento quando cliccato */
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Ombra meno intensa quando cliccato */
	}

	/* Assicura che il contenuto del bottone rimanga sopra il gradiente */
	.bubble-button-models-violet h2,
	.bubble-button-models-violet .content-box {
		position: relative;
		z-index: 1; /* Porta il contenuto sopra il gradiente */
	}

	/* Stile del titolo del bottone */
	.bubble-button-models-violet h2 {
		display: flex;
		align-items: center; /* Mantiene l'allineamento verticale centrato tra l'icona e il titolo */
		justify-content: center; /* Centra l'icona e il titolo orizzontalmente */
		font-size: 1.5rem; /* Dimensione del titolo */
		font-weight: bold;
		color: white;
		margin: 0;
		text-align: center; /* Assicura che il testo sia centrato */
		width: 100%; /* Larghezza completa per il titolo */
	}

		/* Stile dell'icona all'interno del titolo */
		.bubble-button-models-violet h2 i {
			font-size: 2.0rem; /* Dimensione dell'icona */
			margin-right: 8px; /* Spazio a destra dell'icona */
		}

	/* Content-box */
	.bubble-button-models-violet .content-box {
		background-color: #fff;
		box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2), 0px 0px 8px rgba(0, 0, 0, 0.4);
		border-radius: 15px;
		color: black;
		padding: 20px;
		width: 100%;
		margin-top: 10px;
		transition: background-color 0.3s ease;
		/* --- THIS IS THE FIX --- */
		text-align: left; /* Override inherited center alignment */
		flex-grow: 1; /* Tells this box to grow and fill available vertical space */
	}

		/* Allinea l'icona check_circle alla prima riga del testo */
		.bubble-button-models-violet .content-box p {
			display: flex; /* Usa flexbox per allineare l'icona con il testo */
			align-items: flex-start; /* Allinea l'icona alla prima riga del testo */
			margin: 10px 0;
			font-family: 'Inter', sans-serif; /* Font personalizzato per il testo */
			font-size: 15.5px; /* Dimensione del font del testo */
			color: black; /* Colore del testo */
		}

		/* Stile dell'icona check_circle */
		.bubble-button-models-violet .content-box i {
			font-size: 1.1rem; /* Dimensione del checkmark */
			font-variation-settings: 'FILL' 0, 'wght' 600; /* Peso e riempimento */
			color: #05FFA0; /* Colore del checkmark */
			margin-right: 10px; /* Spazio tra l'icona e il testo */
			margin-top: 0.18rem; /* Aggiungi margine superiore per allineare meglio l'icona con il testo */
		}


/*#modello-aiba{
    background-image: url('../Assets/modello-aiba.svg') !important;
}
#modello-aiba:hover{
    background-image: url('../Assets/modello-aiba-hover.svg') !important;
}

#carica-pdf{
    background-image: url('../Assets/carica-pdf.svg') !important;
}
#carica-pdf:hover{
    background-image: url('../Assets/carica-pdf-hover.svg') !important;
}
*/

/*
#pdf-caricato {
	background-image: url('../Assets/pdf-caricato.svg') !important;
}

	#pdf-caricato:hover {
		background-image: url('../Assets/pdf-caricato-hover.svg') !important;
	}*/
/*
#persona-fisica {
	background-image: url('../Assets/persona-fisica.svg') !important;
}

	#persona-fisica:hover {
		background-image: url('../Assets/persona-fisica-hover.svg') !important;
	}

#persona-giuridica {
	background-image: url('../Assets/persona-giuridica.svg') !important;
}

	#persona-giuridica:hover {
		background-image: url('../Assets/persona-giuridica-hover.svg') !important;
	}
	
#carica-lista-clienti {
	background-image: url('../Assets/carica-lista-clienti.svg') !important;
}

	#carica-lista-clienti:hover {
		background-image: url('../Assets/carica-lista-clienti-hover.png') !important;
	}

#incarico-inviato2 {
	background-image: url('../Assets/incarico-inviato.svg') !important;
}

	#incarico-inviato2:hover {
		background-image: url('../Assets/incarico-inviato-hover.svg') !important;
	}
/*
#carica-fotografia {
	background-image: url('../Assets/carica-fotografia.svg') !important;
}

	#carica-fotografia:hover {
		background-image: url('../Assets/carica-fotografia-hover.svg') !important;
	}

#webcam {
	background-image: url('../Assets/webcam.svg') !important;
}

	#webcam:hover {
		background-image: url('../Assets/webcam-hover.svg') !important;
	}


#identita-confermata {
	background-image: url('../Assets/identita-confermata.svg') !important;
}

	#identita-confermata:hover {
		background-image: url('../Assets/identita-confermata-hover.svg') !important;
	}
	*/


/* Input Card */
.input-card {
	position: relative;
	padding: 2rem;
	background: #FFFFFF;
	box-shadow: 0px 0px 14px 4px rgba(65, 6, 255, 0.25);
	border-radius: 20px;
	width: 100%;
	max-width: 400px;
	margin: auto;
	transition: box-shadow 0.5s ease, padding-bottom 0.3s ease; /* Transizione aggiornata */
	font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
}

	/* Stile per il titolo h2 all'interno della card */
	.input-card h2 {
		font-weight: bold;
		text-align: left; /* Allinea a sinistra */
		margin-bottom: 20px; /* Aggiunge spazio sotto il titolo */
		font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
	}

/* Input Bubble Container */
.input-bubble-container {
	margin-bottom: 15px; /* Aggiunge uno spazio tra gli input */
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* Allinea gli input a sinistra */
	width: 100%; /* Assicura che il contenitore dell'input occupi tutta la larghezza della card */
	font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
}

	/* Stilizzazione dell'input */
	.input-bubble-container input[type="text"],
	.input-bubble-container input[type="email"] {
		padding-left: 10px !important; /* Riduce il padding */
		border: 2px solid #4106FF;
		border-radius: 20px; /* Riduce il border-radius */
		padding: 8px; /* Riduce il padding interno */
		width: 100%; /* Imposta la larghezza al 100% */
		text-align: left; /* Allinea il testo a sinistra */
		font-size: 14px; /* Riduce la dimensione del font */
		font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
	}

		.input-bubble-container input[type="text"]:focus,
		.input-bubble-container input[type="email"]:focus {
			outline: none;
			box-shadow: 0px 0px 4px 1px rgba(65, 6, 255, 0.65); /* Riduce l'ombra */
			border: 2px solid #4106FF; /* Mantiene il border durante il focus */
		}

		.input-bubble-container input[type="text"]::placeholder,
		.input-bubble-container input[type="email"]::placeholder {
			color: #aaa;
			font-size: 14px; /* Riduce la dimensione del placeholder */
			text-align: left; /* Allinea il placeholder a sinistra */
			font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
		}

#pf-block,
#pg-block {
	width: 100%;
}

/* Stile base per i pulsanti */
.input-bubble-container-button {
	border-radius: 25px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
	width: auto; /* Auto width */
	max-width: 200px; /* Limita la larghezza massima */
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	background-color: #4106FF;
	color: white;
	border: 2px solid #4106FF;
	box-shadow: 0px 0px 10px 0px rgba(65, 6, 255, 0.35);
	font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
	display: block; /* Assicura che il bottone sia un blocco per centrarlo */
	margin-left: auto;
	margin-right: auto; /* Centra il bottone */
}

	.input-bubble-container-button:hover {
		background-color: white;
		color: #4106FF;
		box-shadow: none;
		border: 2px solid #4106FF;
	}

/* Stile per il pulsante rosso */
.red-button {
	background-color: #FF0000; /* Sfondo rosso */
	color: white;
	border: 2px solid #FF0000; /* Bordo rosso */
}

	/* Effetto hover per il pulsante rosso */
	.red-button:hover {
		background-color: white;
		color: #FF0000; /* Testo rosso in hover */
		border: 2px solid #FF0000;
	}

.button-anagrafica {
	min-width: 120px;
}

.no-margin-bottom {
	margin-bottom: 0;
}

.document-divider {
	margin: 20px 0 20px 0;
	border: none;
	border-top: 1px solid #ddd;
}

/* Wrapper della sezione documenti */
.document-buttons-section {
	width: 100%;
}

.input-bubble-container.no-margin-bottom {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center; /* centra i pulsanti all’interno */
	width: 100%;
	font-family: 'Inter', sans-serif;
}

/* Pulsanti di download documenti */
.document-download {
	padding: 6px 12px;
	background-color: white;
	color: #4106FF;
	border: 2px solid #4106FF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	white-space: nowrap;
	font-weight: 500;
	min-width: 140px;
}

	/* Icone dentro i pulsanti */
	.document-download i.material-icons {
		margin-right: 8px;
		font-size: 1em;
		color: #4106FF;
	}

	/* Hover */
	.document-download:hover {
		background-color: #4106FF;
		color: white;
	}

		.document-download:hover i.material-icons {
			color: white;
		}


/* Stile per le etichette */
.input-bubble-container label {
	display: block;
	margin-bottom: 5px;
	font-size: 1rem;
	font-weight: bold; /* Metti in bold i campi */
	line-height: 1.5;
	text-align: left;
	color: #333;
	font-family: 'Inter', sans-serif; /* Specifica il font 'Inter' */
}

.button-row-wrapper {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center; /* ➕ Questa riga centra i figli verticalmente */
	width: 100%;
	min-height: 70px;
}

/* Pulsanti di hard reset password */
.hard-reset-password {
	padding: 6px 12px;
	background-color: white;
	color: #4106FF;
	border: 2px solid #4106FF;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	white-space: nowrap;
	font-weight: 500;
	min-width: 140px;
}

	.hard-reset-password i.material-icons {
		margin-right: 8px;
		font-size: 1em;
		color: #4106FF;
	}

	.hard-reset-password:hover {
		background-color: #4106FF;
		color: white;
	}

		.hard-reset-password:hover i.material-icons {
			color: white;
		}


/* Stile delle icone "Close" e "Back" per desktop */
.close-icon-container, .back-icon-container {
	position: absolute;
	background: rgba(255, 255, 255, 0.31);
	border-radius: 1rem;
	box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
	border: 0.0625rem solid rgba(255, 255, 255, 0.25);
	padding: 0.5rem;
	z-index: 101;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center; /* Centra l'icona all'interno del contenitore */
	width: 3rem; /* Dimensione uniforme per evitare allungamenti */
	height: 3rem; /* Stessa altezza per evitare stretching */
}

.close-icon, .back-icon {
	width: 2rem;
	height: 2rem;
}

.close-icon-container:hover, .back-icon-container:hover {
	box-shadow: 0 0 0 0.25rem rgba(65, 6, 255, 0.5), 0 0 0 0.45rem rgba(65, 6, 255, 0.3), 0 0 0 0.55rem rgba(65, 6, 255, 0.1);
	animation: pulse 1.5s infinite;
}



@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(65, 6, 255, 0.5);
	}

	70% {
		box-shadow: 0 0 0 0.75rem rgba(65, 6, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(65, 6, 255, 0);
	}
}

/* Posizione specifica per desktop */
.close-icon-container {
	top: 0.5rem;
	right: 0.5rem;
}

.back-icon-container {
	top: 0.5rem;
	right: 5rem;
}

/* Stile per tablet e dispositivi più piccoli (max-width: 768px) */
@media (max-width: 768px) {
	/* Ridisposizione verticale delle icone */
	.close-icon-container, .back-icon-container {
		position: absolute;
		width: 2.7rem; /* Dimensione leggermente più piccola per tablet */
		height: 2.7rem;
		padding: 0.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-icon, .back-icon {
		width: 2rem; /* Dimensione dell'icona leggermente più piccola su tablet */
		height: 1.8rem;
	}

	.close-icon-container {
		top: 0.5rem;
		right: 0.5rem;
	}

	.back-icon-container {
		top: 4.2rem; /* Aumentiamo lo spazio verticale tra le icone */
		right: 0.5rem;
	}
}


.title-with-border-bottom {
	margin-top: 75px;
}

.signer-spaced-buttons {
	margin-top: 10px;
	margin-bottom: 10px;
}

/*loading spinner*/

/* Spinner Container */
#loading-spinner {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
	width: 100vw;
	height: 100vh;
}

.spinner {
	width: 48px;
	height: 48px;
	border: 5px solid #FFF;
	border-bottom-color: #4106FF;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation-spinner 1s linear infinite;
}

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

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



.cell-disabled {
	background-color: #D9CDFF;
	opacity: 0.5;
}

.cell-disabled-text {
	color: red;
}