.cont-terzo {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ############################# */

.input_container {
    border: 1px solid #dadce0;
	margin: 5px 0;
}

/* ############################# */

.input-container {
    display: flex;
    align-items: center; /* Allinea verticalmente gli elementi */
    border: 1px solid #333; /* Bordo del contenitore */
    border-radius: 5px; /* Bordo arrotondato */
    padding: 5px; /* Spaziatura interna */
	margin: 0 0 15px;
    background-color: #fff;
}

/**/

.input-container input[disabled] {
    background-color: #f2f2f2;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;  /*l’utente non può cliccare/scrivere*/
}

.input-container input[readonly] {
    background-color: #f2f2f2;
    color: #999;
    border-color: #ccc;
    cursor: default;
}

/* Stile per l'immagine */
.input-container img {
    cursor: pointer; /* Cursore "mano" */
    margin-left: 10px; /* Spazio a sinistra dell'immagine */
    width: 20px;
    height: 20px;
}

/* ############################# */

form {
	margin: 0;
	padding: 0;
}

/**/

.form-container {
    /*
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 5px;
    margin: 0 0 15px;
    */

    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #fff;
}

/*###########################################*/

label {
    color: #333;
}

/**/

/* ############################# */
input[type="text"] {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    font-size: 1rem;
    height: 34px;
    margin: 0;
    padding: 5px;
    border: none; /* Rimuove il bordo */
    background-color: transparent; /* Sfondo trasparente */
    color: #333; /* Colore del testo */
}

/* Rimuove l'outline quando l'input è attivo */
input[type="text"]:focus {
    outline: none;
}

/**/

/* Stile per l'input */
input[type="email"] {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    font-size: 1rem;
    height: 34px;
    margin: 0;
    padding: 5px;
    border: none; /* Rimuove il bordo */
    background-color: transparent; /* Sfondo trasparente */
    color: #333; /* Colore del testo */
}

/* Rimuove l'outline quando l'input è attivo */
input[type="email"]:focus {
    outline: none;
}

/**/

/* Stile per l'input */
input[type="tel"] {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    font-size: 1rem;
    height: 34px;
    margin: 0;
    padding: 5px;
	border: none;/* Rimuove il bordo */
    background-color: transparent; /* Sfondo trasparente */
    color: #333; /* Colore del testo */
}

/* Rimuove l'outline quando l'input è attivo */
input[type="tel"]:focus {
    outline: none;
}

/**/

/* Stile per l'input */
input[type="password"] {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    font-size: 1rem;
    height: 34px;
    margin: 0;
    padding: 5px;
    border: none; /* Rimuove il bordo */
    background-color: transparent; /* Sfondo trasparente */
    color: #333; /* Colore del testo */
}

/* Rimuove l'outline quando l'input è attivo */
input[type="password"]:focus {
    outline: none;
}

/**/

/* 1️⃣ Stile generale del campo file */
input[type="file"] {
    width: 100%;
    height: auto;
    font-size: 1rem;           /* Imposta la dimensione del testo all’interno del campo */
    color: #333;               /* Colore del testo (es. nome del file selezionato) */
    border: 1px solid #333;    /* Aggiunge un bordo grigio chiaro attorno al campo */
    border-radius: 5px;
    background-color: #fafafa; /* Colore di sfondo leggermente grigio per il campo */
    padding: 5px;              /* Spazio interno per dare aria al contenuto */
    margin: 0 0 15px;
}

/* 2️⃣ Stile del pulsante "Scegli file" (pseudo-elemento interno del campo) */
input[type="file"]::file-selector-button {
    background-color: #eee;    /* Colore di sfondo del pulsante */
    color: #333;               /* Colore del testo del pulsante */
    border: 0;                 /* Rimuove il bordo predefinito */
    border-radius: 0;          /* Angoli non arrotondati (stile piatto) */
    padding: 10px 15px;        /* Spazio interno per rendere il pulsante più grande */
    margin-right: 20px;        /* Spazio tra il pulsante e il nome del file */
    transition: .5s;           /* Transizione fluida per effetti di hover */
    cursor: pointer;           /* Mostra la mano al passaggio del mouse */
}

/* 3️⃣ Effetto hover sul pulsante */
input[type="file"]::file-selector-button:hover {
    background-color: #eee;    /* Mantiene lo stesso colore di sfondo */
    opacity: 0.8;              /* Aggiunge una leggera trasparenza per evidenziare l’hover */
}

/* ############################# */

textarea {
    display: block;
    resize: none;
    width: 100%;
    min-height: 200px;
    max-height: 350px;
    margin: 5px 0 10px;
    /*font-family: monospace, sans-serif;*/
    font-family: 'Poppins', sans-serif;
    padding: 8px;
    font-size: 1rem;
    /*font-weight: 500;*/
    color: #333;
    border: 1px solid #111;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

textarea::-webkit-scrollbar {
    display: none;
}

/**/

textarea:focus {
    outline: none;
}

/**/

textarea::placeholder {
    /*font-family: monospace, sans-serif;*/
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #888484;
}

/**/

input::placeholder {
    /*font-family: monospace, sans-serif;*/
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #888484;
}

/* ############################# */

input[type="submit"] {
    /*font-family: monospace, sans-serif;*/
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
	font-weight: bold;
    width: 100%;
    max-width: 100%;
    height: 40px;
    margin: 20px 0 0;
    padding: 8px;
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: .2s ease;
    cursor: pointer;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

input[type="submit"]:hover {
    /*background-color: #c29a75;*/
    color: #fff;
    opacity: 0.8;
}

/* ############################# */

button[type="submit"] {
    /*font-family: monospace, sans-serif;*/
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
    height: 40px;
    margin: 0 auto 15px;
    padding: 8px;
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: .2s ease;
    cursor: pointer;
}

button[type="submit"]:hover {
    /*background-color: #c29a75;*/
    color: #fff;
    opacity: 0.8;
}

/**/

button[disabled] {
    background-color: #f2f2f2;
    color: #999;
    border: 1px solid #333;
    cursor: not-allowed;
    /*opacity: 0.7;*/
    pointer-events: none;  /* l’utente non può interagire col mouse/touch */
}

/**/

button.btn-add {
    padding: 6px 14px;
    margin: 0;
    /*border-radius: 16px;*/
    border: none;
    /*font-size: 0.85rem;*/
    /*font-family: monospace, sans-serif;*/
    /*font-family: 'Poppins', sans-serif;*/
    cursor: pointer;

    background-color: #1fa37a;
    color: #ffffff;
}

button.btn-add:hover {
    text-decoration: underline;
}

/**/

button.btn-update {
    padding: 6px 14px;
    margin: 0;
    /*border-radius: 16px;*/
    border: none;
    /*font-size: 0.85rem;*/
    /*font-family: monospace, sans-serif;*/
    /*font-family: 'Poppins', sans-serif;*/
    cursor: pointer;

    background-color: #1fa37a;
    color: #ffffff;
}

button.btn-update:hover {
    text-decoration: underline;
}

/**/

button.btn-delete {
    padding: 6px 14px;
    margin: 0;
    /*border-radius: 16px;*/
    border: none;
    /*font-size: 0.85rem;*/
    /*font-family: monospace, sans-serif;*/
    /*font-family: 'Poppins', sans-serif;*/
    cursor: pointer;

    background-color: red;
    color: #ffffff;
}

button.btn-delete:hover {
    text-decoration: underline;
}

/* ############################# */

.testo-modale {
    width: 100%;
    border: 1px solid #dadce0;
    margin: 5px 0 10px;
	/*padding: 0 12px;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;*/
}

/*.testo-modale::-webkit-scrollbar {
    display: none;
}*/

/*
.testo-modale textarea {
    outline: none;
    border: none;
    margin: 0;
    min-height: 100px;
    max-height: 155px;
}*/

/* ############################# */

.cont-msg-errore-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/**/

.cont-msg-errore-form img {
    cursor: pointer;
}

/* ############################# */

.cont-msg-top-form {
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: aliceblue;*/
}

/* ############################# */

.p-form__errore {
    color: red;
    margin: 0 6px;
}

/* ############################# */
/*stili per il message status*/

.p-form__valido {
    color: #111;
    padding: 10px 15px;
	margin-bottom: 8px;
    /*border: 1px solid green;
    border-radius: 5px;*/
    background-color: #e7f9ee;
}

/**/

.p-form__novalido {
    color: #111;
    padding: 10px 15px;
	margin-bottom: 8px;
    /*border: 1px solid red;
    border-radius: 5px;*/
    background-color: #f7e9ee;
}

/* ############################# */
/*effetto per far scomparire il message status*/

.fade-out {
    transition: opacity 1s ease-out;
    opacity: 1;
}

/**/

.fade-out-effect {
    opacity: 0;
}

/* ############################# */
/*stile x select */

select {
	/*appearance: none;*/
	/*-webkit-appearance: none;*/
	width: 100%;
    height: 34px;
	font-size: 1rem;
    margin: 0;
	padding: 5px;
	background-color: #fff;
	border: none;
	border-radius: 0.25rem;
	color: #000;
	cursor: pointer;
	overflow-x: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select:focus {
    outline: none;
}

/* ############################# */
/*stile x select dropdown, quindi ho disabilitato nel select le frecce native e ho creato altre con il codice */

.select-container {
    position: relative;
	width: 100%;
    height: auto;
	/*min-width: 300px;*/
    max-width: 100%; 
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px;
    margin: 0 0 15px;
    background-color: #fff;
}

/**/

/* Solo nelle custom tolgo l'aspetto nativo e aggiungo spazio a destra per la freccia */
.select-container select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem; /* spazio per la freccia */
    position: relative;
    z-index: 1;
}

/**/

.select-container select[disabled] {
    background-color: #f2f2f2;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;  /* l’utente non può interagire col mouse/touch */
}

/**/

.select-container::before,
.select-container::after {
	--size: 0.3rem;
	content: "";
	position: absolute;
	right: 1rem;
	pointer-events: none;
    z-index: 2;
}

.select-container::before {
	border-left: var(--size) solid transparent;
	border-right: var(--size) solid transparent;
	border-bottom: var(--size) solid #000;
	top: 40%;
}

.select-container::after {
	border-left: var(--size) solid transparent;
	border-right: var(--size) solid transparent;
	border-top: var(--size) solid #000;
	top: 55%;
}

/* ############################# */
/*stile x creare campo simile alla select*/

.fake-select {
	width: 100%;
	height: 40px;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
    padding: 0.675em;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
}

/* ############################# */
/*stile x option*/

option {
    width: 100%;
    text-align: left;
	margin: 0;
	padding: 5px;
	background-color: #fff;
}

option:hover {
	background-color: #f0f0f0;
}

/* ############################# */
/* codice per spuntare ricordami nel login */

.toggle-container {
    display: flex;
    align-items: center;
    margin: 0 0 15px; /* Spazio intorno all'interruttore */
}

.toggle-switch {
    width: 40px;
    height: 20px;
    background-color: #ccc; /* Colore di sfondo quando è spento */
    border-radius: 20px; /* Angoli completamente arrotondati */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s; /* Transizione fluida del colore */
    margin-right: 10px; /* Spazio tra lo switch e il testo */
}

.toggle-switch:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%; /* Crea il cerchio */
    top: 2px;
    left: 2px;
    transition: transform 0.3s; /* Transizione fluida per lo spostamento del cerchio */
}

.toggle-label {
    cursor: pointer; /* Indica che il testo è cliccabile */
}

/**/

input[type="checkbox"] {
    display: none; /* Nasconde la casella di spunta nativa */
}

input[type="checkbox"]:checked + .toggle-switch {
    background-color: #25d366; /* Colore quando l'interruttore è acceso (verde come TikTok) */
}

input[type="checkbox"]:checked + .toggle-switch:before {
    transform: translateX(20px); /* Sposta il cerchio verso destra quando è acceso */
}

/* fine codice per spuntare ricordami nel login */
/* ############################# */

.attuale-box {
    width: 250px; 
    height: auto; 
    min-width: 250px; 
    border: 1px solid #e5e5e5; 
    border-radius: 6px; 
    overflow: hidden; 
    background-color: #f1f1f1; 
    margin-bottom: 15px;
}

.attuale-box img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

/**/

/*css per il conteggio nel form pubblica*/
.contatore-caratteri { 
    font-size: 12px; 
    color: blue; 
    margin-top: 4px; 
}