.login-area {
	padding-top: 50px;
	padding-bottom: 120px;
}

.login-area .section-title .title {
	font-size: 60px;
	line-height: 70px;
}

@media ( max-width : 767px) {
	.login-area .section-title .title {
		font-size: 34px;
		line-height: 44px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.login-area .section-title .title {
		font-size: 52px;
		line-height: 62px;
	}
}

.login-area .section-title .title::before {
	display: none;
}

.form-area .input-box input {
	padding-left: 40px;
}
.form-area .input-box .select2.select2-container{
	border: 1px solid #ccc;
}
/* Accesso con servizi di terze parti (Google, Facebook) */
.terzeparti-separatore {
	display: flex;
	align-items: center;
	color: #888;
	margin: 20px 0 15px 0;
}

.terzeparti-separatore::before, .terzeparti-separatore::after {
	content: "";
	flex: 1;
	border-top: 1px solid #ddd;
}

.terzeparti-separatore span {
	padding: 0 12px;
	text-transform: uppercase;
	font-size: 13px;
}

.terzeparti-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 16px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fff;
	color: #3c4043;
	font-weight: 600;
	text-decoration: none;
}

.terzeparti-btn:hover {
	background: #f5f5f5;
	color: #3c4043;
}

.terzeparti-btn i {
	font-size: 18px;
	margin-right: 10px;
}

/* Il logo Google è un svg a quattro colori: va dimensionato come le icone webfont. */
.terzeparti-btn .terzeparti-icona {
	width: 18px;
	height: 18px;
	margin-right: 10px;
	flex-shrink: 0;
}

.terzeparti-facebook {
	background: #1877f2;
	border-color: #1877f2;
	color: #fff;
}

.terzeparti-facebook:hover {
	background: #166fe0;
	border-color: #166fe0;
	color: #fff;
}

/* Accesso con Apple: le linee guida vogliono il pulsante nero con testo e logo bianchi. */
.terzeparti-apple {
	background: #000;
	border-color: #000;
	color: #fff;
}

.terzeparti-apple:hover {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.terzeparti-apple i {
	color: #fff;
}

/* Nella pagina di login i pulsanti dei servizi restano incolonnati: la colonna è stretta e
   affiancarli li spremerebbe. Le colonne valgono solo nel wizard, vedi selezione/selezione.css. */
.terzeparti-elenco {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terzeparti-elenco .terzeparti-btn {
  margin-bottom: 0;
}

/* Scollegare non e' collegare, e i due pulsanti stanno uno accanto all'altro: se si somigliano
   troppo si preme quello sbagliato. Stessa forma, ma senza marchio e senza fondo pieno - solo
   il contorno, il grigio e la catena spezzata - cosi' si legge come il contrario dell'altro. */
.terzeparti-scollega {
	background: transparent;
	border-style: dashed;
	border-color: #c6c6c6;
	color: #6c757d;
	font-weight: 400;
}

.terzeparti-scollega:hover {
	background: #fdf2f2;
	border-style: solid;
	border-color: #dc3545;
	color: #dc3545;
}

.terzeparti-scollega i {
	color: inherit;
	font-size: 16px;
}

/* Nel profilo i servizi sono pochi e la colonna e' larga: affiancarli evita una pila di
   pulsanti a tutta pagina, che darebbe loro piu' peso di quello che meritano li'. */
.terzeparti-profilo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

/* Modal di conferma dell'email (profilo): una cosa sola per volta - il perche', l'indirizzo, il
   codice - cosi' chi lo apre capisce a colpo d'occhio che cosa gli si sta chiedendo. */
.valida-email p {
	margin-bottom: 15px;
}

.valida-email-indirizzo {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #e3e3e3;
	border-radius: 5px;
	background: #f7f7f7;
	font-weight: 600;
	word-break: break-all;
}

.valida-email label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

/* Sei cifre da rileggere: larghe, spaziate e non piu' larghe di quello che devono contenere. */
.valida-email-codice {
	width: 100%;
	max-width: 220px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 22px;
	letter-spacing: 6px;
	text-align: center;
}

.valida-email-codice::placeholder {
	color: #d0d0d0;
}

.valida-email-codice.is-invalid {
	border-color: #dc3545;
}

.valida-email-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
}

.valida-email-stato:not(:empty) {
	margin-top: 15px;
}

/* Modal di modifica di email, password e telefono: gli stessi campi del profilo, che qui non
   ereditano niente dal form perche' vivono fuori. */
.profilo-modifica label {
	display: block;
	margin-bottom: 6px;
	margin-top: 15px;
	font-weight: 600;
}

.profilo-modifica input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.profilo-modifica input.is-invalid {
	border-color: #dc3545;
}

/* Modifica confermata nel modal ma non ancora salvata: il campo mostra il valore nuovo e questa
   riga dice che sul server non c'e' ancora, con il modo di tornare indietro. */
.profilo-pendente {
	display: block;
	margin-top: 6px;
	color: #b8860b;
	line-height: 1.4;
}

.profilo-pendente a {
	text-decoration: underline;
}

/* Accesso e registrazione affiancati: registrarsi è un'alternativa all'accesso, non una nota a
   piè di pagina, quindi ha un pulsante suo con lo stesso peso, in versione secondaria. */
.azioni-accesso {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

.main-btn-secondario {
	background: transparent;
	border: 1px solid #ccc;
	color: #3c4043;
}

.main-btn-secondario:hover {
	background: #f5f5f5;
	color: #3c4043;
}

/* Conferma e reinvio del codice sulla stessa riga: sono le due cose che si fanno con quel campo,
   e incolonnate sembravano due passaggi in sequenza. La regola vale per la pagina /registra, che
   il foglio del wizard non lo carica. */
.otp-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.otp-reinvia-slot {
	display: flex;
	align-items: center;
	gap: 10px;
}

#otp-countdown, #registra-otp-countdown { white-space: nowrap; }
#otp-countdown:empty, #registra-otp-countdown:empty { display: none; }

/* Riga d'errore dei modali del profilo e della pagina: rossa e vicina al campo che l'ha
   provocata, al posto della finestra di sistema del browser. */
.profilo-modifica-errore {
	margin-top: 15px;
	padding: 10px 14px;
	border: 1px solid #f3c2c7;
	border-radius: 5px;
	background: #fdf2f3;
	color: #a4232f;
	line-height: 1.4;
}

.profilo-modifica-errore:empty {
	display: none !important;
}