* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  color: #6b6b6b;
}

html {
    scroll-behavior: smooth;
}

body {
    margin-top: 60px; /* Aggiungi spazio per evitare che il contenuto sia nascosto dall'header */
	background: linear-gradient(to bottom, #EFEFEF 60px, #FFFFFF 300px) no-repeat; /* Sfumatura fino al 70%, poi bianco */

	background-size: 100% 100vh;  /* Fa sì che la sfumatura copra solo l'altezza della viewport */
	/*text-align: center;*/
	
}
/*
@media (max-width: 768px) {
    
	body {
		margin-top: 40px;
	}

}
*/
/*  ---------------------------------------------------------------------------  Titolo Grande  ---------------------------------------------------------------------------  */

h1 {
    font-family: 'Amatic SC', handwriting;
	font-size: 50px;
	font-weight: 700;
	margin: 30px;
	color: #BEBEBE;
}

/*  -------------------------------------------------------------------------------  Header  -------------------------------------------------------------------------------  */

header {
	
	position: fixed; /* Fissa l'header in alto */
    top: 0; /* Posiziona l'header all'inizio della pagina */
    left: 0;
    width: 100%; /* Assicura che l'header occupi tutta la larghezza della finestra */
    z-index: 1000; /* Mantieni l'header sopra gli altri elementi */
	
	display: flex;
    justify-content: space-between;
    align-items: center;
	height: 60px;
    padding: 0px 100px;
    background-color: white;
	border-bottom: 1px solid #b3b3b3;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera nella parte bassa */
    /*position: relative;*/
}

/*  --------------------------------------------------------------------------------  Logo  --------------------------------------------------------------------------------  */

.logo a {
	text-decoration: none;
}

.logo-vivo {
    color: #41CB41;
    font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 600;
}

.logo-wellness {
    color: black;
    font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 600;
}

/*  ----------------------------------------------------------------------------  Menu Desktop  ----------------------------------------------------------------------------  */

nav {
    display: flex;
    align-items: center;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px; /* Spaziatura tra gli elementi del menu */
    margin: 0;
    padding: 0;

}

nav ul li a {
    text-decoration: none;
	font-weight: 500;
    color: #8F8F8F;
}

nav ul li a:hover {
    color: #41CB41;
}

/* Stile per selettore classe active */

nav a.active {
  color: #41CB41;
}

/*  --------------------------------------------------------------------------  Pulsante Hamburger  --------------------------------------------------------------------------  */

/* Nascondi il checkbox */

#hamburger-toggle {
    display: none;
}

/* Stile per il pulsante hamburger */

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.hamburger div {
    width: 20px;
    height: 2px;
    background-color: black;
    margin: 2px 0px;
    transition: all 0.3s ease;
}

/*  -----------------------------------------------------------------------  Stile per schermi piccoli  -----------------------------------------------------------------------  */

@media (max-width: 768px) {
    
	header {
		padding: 0px 15px;
	}
	
	nav {
        position: fixed;
        top: 60px;
        left: -100%; /* Inizia fuori schermo */
        width: 100%;
		max-width: 100%;
        height: 100%;
        background-color: white;
		/*border-right: 1px solid #9b9b9b;*/
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 0px;
        transition: left 0.3s ease-in-out;
    }

    nav ul {
        display: flex;
        flex-direction: column;
		width: 100%;
		max-width: 100%;
        gap: 0; /* Rimuove la spaziatura tra gli elementi del menu */
    }

    nav ul li {
        margin: 0px 0px;
		border-bottom: 1px dashed #ccc;
		/*width: 250px;*/
    }

    nav ul li a {
        color: #8F8F8F;
        font-size: 16px;
        padding: 15px;
        display: block;
    }

    nav ul li a:hover {
		color: white;
        background-color: #ccc;
    }

    /* Mostra il pulsante hamburger */
	
    .hamburger {
        display: flex;
    }

    /* Mostra il menu quando il checkbox è selezionato */
	
    #hamburger-toggle:checked ~ nav {
        left: 0;
    }
}

main {
    max-width:100%;    /* Imposta la larghezza massima */
    width: 100%;          /* Imposta la larghezza al 100% per schermi più piccoli */
    margin: 0 auto;       /* Centra il div orizzontalmente */
    padding: 0px 0px 60px 0px;        /* Aggiungi un po' di padding per gli spazi interni */
	background: none;
}


/*  -------------------------------------------------------------------------  Pagine Generiche  -------------------------------------------------------------------------  */

.pagina_generica {
	display:flex;
	align-items: center;
	justify-content: center;
	font-size: 100px;
	color: #8F8F8F;
	height: 500px;
	
}

/*  ------------------------------------------------------------------------------  Footer  ------------------------------------------------------------------------------  */

.footer {
    display: flex;
    align-items: center;
	height: 100px;
    /*background-color: #EFEFEF;*/
	border-top: 1px solid #b3b3b3;
	align-items: center;
	justify-content: center;
}




#quantita {
    margin: 0px;
    padding: 10px;
    font-size: 16px;
	font-weight: 500;
	border: 1px solid #8F8F8F; /*#6B6B6B;/*#ccc;*/
	border-radius: 5px;
	color: black; /*#6B6B6B;*/
}

.immagine_pagina_alimento {

	margin: 20px 0px 0px 0px;
	width: 180px; /* Riduce l'immagine al 50% della sua larghezza originale */
    height: auto; /* Mantiene le proporzioni automaticamente */
	border-radius: 50%;
	border: 3px solid red;

}

.titolo_pagina_alimento {
    font-family: 'Amatic SC', handwriting;
	font-size: 50px;
	font-weight: 700;
	margin: 15px 0px 15px 0px;
	padding:0px;
	color: red;
	/*background-color:green;*/
}

/* Stili specifici per il form #filtraPartiAlimento nella pagina dell'alimento con tagli */
#filtraPartiAlimento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
	flex-wrap: wrap;
}

/* Stili per gli input e i pulsanti all'interno di #filtraAlimenti */
#filtraPartiAlimento select,
#filtraPartiAlimento button,
#filtraPartiAlimento input {
    margin: 0px;
    padding: 10px;
    font-size: 16px;
	font-weight: 500;
	border: 1px solid #8F8F8F; /*#6B6B6B;/*#ccc;*/
	border-radius: 5px;
	color: black; /*#6B6B6B;*/
}

#filtraPartiAlimento select {
    background-color: #EFEFEF;
}

#filtraPartiAlimento button {
    background-color: #6B6B6B;
    border-radius: 5px;
    border: none;
    padding: 12px;
    cursor: pointer;
    color: white;
    font-weight: 500;
}

#filtraPartiAlimento label {
    font-size: 18px;
	font-weight: 600;
	color: black; /*#6B6B6B;*/
}

@media (max-width: 768px) {
	
	#filtraPartiAlimento {
		flex-direction: column;
		align-items: stretch;
	}

	#filtraPartiAlimento input[type="text"] {
		width: 100%;
		margin-bottom: 10px;
	}
	
	#filtraPartiAlimento label {
	font-size: 18px;
	font-weight: 600;
	color: black; /*#6B6B6B;*/
	text-align: center;
	margin-bottom: 10px;
	}
}

.form_calcolo label {
	font-size: 18px;
	font-weight: 600;
	color: black; /*#6B6B6B;*/
	margin-bottom: 5px;
}

/*  ALIMENTI.PHP  */

/*#alimenti-list {
    display: grid; /* Imposta il layout come griglia
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Colonne flessibili
    row-gap: 30px; /* Spazio verticale tra le righe
    column-gap: 20px; /* Nessun spazio orizzontale tra le colonne
    max-width: 1300px; /* Larghezza massima del contenitore
    margin: 0 auto; /* Centra il contenitore
    width: 100%; /* Assicura che la griglia occupi tutta la larghezza della pagina
}

.alimento-item {
    box-sizing: border-box; /* Include padding e bordo nella dimensione totale
    text-align: center; /* Centra il contenuto all'interno
    /*background-color: yellow; /* Sfondo per evidenziare i blocchi
    padding: 0px; /* Spazio interno */
    /*border: 1px solid #e0e0e0; /* Bordo leggero
    min-width: 150px; /* Larghezza minima
}

.alimento-item img { /* ICONA ALIMENTO
    max-width: 140px;
    height: auto;
    margin-bottom: 20px;
	/*background-color: white;*/
	/*padding: 3px;
	border-radius: 50%;
	border: 2px solid #8F8F8F;
}

.alimento-item img:hover {
	border: 2px solid #41CB41;
}

.alimento-item h4 { /* TESTO ICONA ALIMENTO
    font-size: 18px;
    margin-bottom: 10px;
	font-weight: 500;
	color: #6B6B6B;
}

.alimento-item h4:hover {
	color: #41CB41;
}

.alimento-item p { /* TESTO VALORE ALIMENTO
    font-size: 15px;
	color: #6B6B6B;
}

.alimento-item a {
    text-decoration: none;
	color: inherit;
	
}*/







#alimenti-list {
    display: grid; /* Imposta il layout come griglia */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Colonne flessibili */
    row-gap: 30px; /* Spazio verticale tra le righe */
    column-gap: 20px; /* Spazio orizzontale tra le colonne */
    max-width: 1300px; /* Larghezza massima del contenitore */
    margin: 0 auto; /* Centra il contenitore */
    width: 100%; /* Assicura che la griglia occupi tutta la larghezza della pagina */
}

.alimento-item {
    box-sizing: border-box; /* Include padding e bordo nella dimensione totale */
    text-align: center; /* Centra il contenuto all'interno */
    padding: 0px; /* Spazio interno */
    min-width: 150px; /* Larghezza minima */
    display: flex; /* Abilita layout flessibile per mobile */
    flex-direction: column; /* Disposizione verticale per desktop */
    align-items: center; /* Centra contenuto orizzontalmente */
    gap: 10px; /* Spaziatura tra immagine, titolo e testo */
}

.alimento-item img { /* ICONA ALIMENTO */
    max-width: 140px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 50%;
    border: 2px solid #8F8F8F;
}

.alimento-item img:hover {
    border: 2px solid #41CB41;
}

.alimento-item h4 { /* TESTO ICONA ALIMENTO */
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #6B6B6B;
}

.alimento-item h4:hover {
    color: #41CB41;
}

.alimento-item p { /* TESTO VALORE ALIMENTO */
    font-size: 15px;
    color: #6B6B6B;
    margin: 0; /* Rimuove il margine extra */
}

.alimento-item a {
    text-decoration: none;
    color: inherit;
}

/* Stile responsivo per dispositivi mobili */
@media (max-width: 768px) {
	
	.immagine_pagina_alimento {

	margin: 20px 0px 0px 0px;
	width: 140px; /* Riduce l'immagine al 50% della sua larghezza originale */
    height: auto; /* Mantiene le proporzioni automaticamente */
	border-radius: 50%;
	border: 3px solid red;
	background-color: white;
	padding: 1px;

	}

	.titolo_pagina_alimento {
		font-family: 'Amatic SC', handwriting;
		font-size: 45px;
		font-weight: 800 !important;
		margin: 10px 0px 10px 0px;
		padding:0px;
		color: red;
		/*background-color:green;*/
	}
	
	#alimenti-list {
        grid-template-columns: 1fr; /* Una sola colonna */
		row-gap: 20px; /* Spazio verticale tra le righe */
    }
	
    .alimento-item {
        flex-direction: row; /* Disposizione orizzontale */
        align-items: center; /* Centra verticalmente immagine e testo */
        text-align: left; /* Allinea il testo a sinistra */
        gap: 20px; /* Spaziatura tra immagine e testo */
    }

    .alimento-item img {
        margin-bottom: 0; /* Rimuove margine inferiore */
        margin-right: 0px; /* Aggiunge margine destro per separazione */
        max-width: 70px; /* Riduce dimensione immagine */
		background-color:white;
		padding: 1px;
    }

    .alimento-item h4 {
        font-size: 16px; /* Riduce dimensione font */
    }

    .alimento-item p {
        font-size: 14px; /* Riduce dimensione font */
		padding-bottom: 10px;
		/*background-color:red;*/
    }
	
	.alimento-info {
		display:flex;
		flex-direction: column;
        border-bottom: 1px solid #ccc;
		width: 100%;
		max-width: 100%;
		height: 70px;
		justify-content: center;
    }
}










/* Media query per schermi piccoli */
@media (max-width: 768px) {
	
	h1 {
    font-family: 'Amatic SC', handwriting;
	font-size: 50px;
	font-weight: 700;
	margin: 6px 0px 4px 0px;
	color: #BEBEBE;

	}

    form {
		display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
		font-size: 18px;
    }
	
	    select, button, input {
        width: 100%;
        margin: 10px auto !important;
        padding: 10px;
        font-size: 18px;
        box-sizing: border-box; /* Per evitare overflow */
    }
	
	select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: 1px solid #ccc;
		padding: 10px;
		background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
		background-size: 16px;
		font-size: 18px;
		border-radius: 5px;
		width: 100%;
		cursor: pointer;
	}
	
    input[type="search"] {
        -webkit-appearance: none; /* Rimuove lo stile nativo di Safari */
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #ccc;
        padding: 10px;
        font-size: 18px;
        border-radius: 5px;
        box-sizing: border-box;
        width: 100%;
    }
	
		/* Stile specifico per il campo search su iOS */
	input[type="search"]::-webkit-search-cancel-button {
		-webkit-appearance: none; /* Rimuove il pulsante "x" */
		display: none; /* Nasconde il pulsante "x" */
	}

	input[type="search"]::-webkit-search-decoration {
		-webkit-appearance: none; /* Rimuove lo stile decorativo nativo */
		display: none;
	}

	/* Focus e hover per iOS */
	select:hover, input[type="search"]:hover,
	select:focus, input[type="search"]:focus {
		border-color: #007BFF; /* Cambia il colore del bordo al focus o hover */
		outline: none; /* Rimuove il bordo di focus predefinito */
	}

	select optgroup {
		font-size: 18px; /* Dimensione maggiore per le macro-categorie */
		font-weight: bold; /* Rende il testo delle macro-categorie più evidente */
		color: #333; /* Cambia colore per distinguerle */
	}
	
}


    /*#alimenti-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }*/

    /*.alimento-item {
		
    }

    .alimento-item img {
        max-width: 140px;
        margin: 0 auto 10px auto;
		border-radius: 50%;
		border: 2px solid #8F8F8F;
    }
}*/

/*  ----------------------------------------------------------------------------  CSS Parti Alimento  -------------------------------------------------------------------------  */

#parti_alimento-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    width: 100%;
}

#parti_alimento-list .alimento-item h4 {
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: 500;
    color: red;
}

/*PAGINE ALIMENTI*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Stile base per il contenitore */
.contenitore-griglia {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 30px 50px; /* 30 50 */
    max-width: 90%;
    margin: 0 auto; /* Centra il contenitore */
    padding-top: 40px; /* 60 */
    box-sizing: border-box;
	background-color: none;
}

@media (max-width: 768px) {
    
	.contenitore-griglia {
		padding-top: 30px;
	}

}

/* Stile per le colonne */
.colonna {
    padding: 0px 12px;
	text-align: center;
}

/* Stile specifico per le colonne */
.laterale-sinistra, .centrale, .laterale-destra {
	max-width: 100%;
	width: 100%;
    display: flex;
    flex-direction: column;
	align-items: center;
    gap: 20px; /* 30 */
	/*background-color:yellow;*/
}

@media (max-width: 768px) {
    .contenitore-griglia {
        grid-template-columns: 1fr;
		max-width: 100%;
		gap: 20px;
		
    }
    
    /* Imposta l'ordine delle colonne */
    .laterale-sinistra {
        order: 1;
    }

    .centrale {
        order: 2;
    }

    .laterale-destra {
        order: 3;
    }
	
	.laterale-sinistra, .centrale, .laterale-destra {
		gap: 15px;

	}
}

.indice_dei_contenuti {
	display:flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	background-color:white;
	border: 2px dashed #ccc;
	padding:0 0 15px 0;
}

.indice_dei_contenuti h4 {
	text-align: center;
	font-weight: 600;
	color: black;
	margin: 30px 30px 20px 30px;
}

.indice_dei_contenuti a {
	text-decoration: none;
	font-weight: 600;
	color: #44BA00;
	display: block;
	margin: 0 0 15px 0;
}

.form_calcolo {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    max-width: 100%; /* Assicura che non superi la larghezza del contenitore */
    box-sizing: border-box; /* Include padding e bordo nella larghezza */
	margin: 0px !important;
}

.form_calcolo select {
	margin-top: 10px;
    padding: 10px;
    font-size: 16px;
	width: 100%;
    box-sizing: border-box; /* Per includere padding e bordi nella larghezza totale */
}

.form_calcolo input[type="text"] {
	margin-top: 10px;
    padding: 10px;
    font-size: 16px;
	width: 100%;
    box-sizing: border-box; /* Per includere padding e bordi nella larghezza totale */
}

.contenitore-input {
    display: flex; /* Imposta il contenitore come flex */
    justify-content: space-between; /* Spazio tra gli elementi */
    align-items: center; /* Allinea verticalmente al centro */
    gap: 10px; /* Spazio tra l'input e il pulsante */
    width: 100%; /* Larghezza totale disponibile */
    max-width: 100%; /* Assicura che non superi la larghezza del contenitore */
    margin: 0px !important;
}

@media (max-width: 768px) {
    
	.contenitore-input {
        margin: 0px !important;
    }
	
	.form_calcolo {
	margin: 0px !important;
	}
	
	.contenitore-input input[type="text"] {
	margin: 0px !important;
	}
	
	.contenitore-input button {
	margin: 0px !important;
	}
}

.contenitore-input input[type="text"] {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    max-width: 100%; /* Assicura che non superi la larghezza del contenitore */
    padding: 10px; /* Aggiunge spazio interno */
    box-sizing: border-box; /* Include il padding nella larghezza */
    font-size: 16px;
    border: 3px solid red !important;
    border-radius: 10px !important;
    outline: none;
    margin: 0px !important;
}

.contenitore-input_verde input[type="text"] {
    width: 100%; /* Occupa tutta la larghezza disponibile */
    max-width: 100%; /* Assicura che non superi la larghezza del contenitore */
    padding: 10px; /* Aggiunge spazio interno */
    box-sizing: border-box; /* Include il padding nella larghezza */
    font-size: 16px;
    border: 3px solid #44BA00 !important;
    border-radius: 10px !important;
    outline: none;
    margin: 0px !important;
}

.contenitore-input button {
    flex: 0; /* Il pulsante mantiene la sua dimensione naturale */
    padding: 10px 20px; /* Aggiunge spazio interno al pulsante */
    box-sizing: border-box; /* Include il padding nella larghezza */
	
	background-color: #6b6b6b;
	border: 1px solid #6b6b6b;
	border-radius: 5px;
	padding: 10px 20px; /* Aggiunge spazio interno al pulsante */
	cursor: pointer;
	color: white;
	font-weight: 500;
	font-size: 16px;
	margin: 0px !important;
}


#img_grande {
	width: 220px; /* Riduce l'immagine al 50% della sua larghezza originale */
    height: auto; /* Mantiene le proporzioni automaticamente */
	border-radius: 50%;
	border: 3px solid red;
}

.img_grande_verde {
	width: 220px; /* Riduce l'immagine al 50% della sua larghezza originale */
    height: auto; /* Mantiene le proporzioni automaticamente */
	border-radius: 50%;
	border: 3px solid #44BA00;
	background-color: white;
	padding: 5px;
}

#titolo_pagina {
    font-family: 'Amatic SC', handwriting;
	font-size: 50px; /* 60 */
	font-weight: 700;
	margin: 0px;
	padding:0px;
	color: red;
	/*background-color:green;*/
}

.titolo_pagina_verde {
    font-family: 'Amatic SC', handwriting;
	font-size: 50px; /* 60 */
	font-weight: 700;
	margin: 0px;
	padding:0px;
	color: #44BA00;
	/*background-color:green;*/
}

.contenitore_tabelle {
    width: 100%; /* Si estende per tutta la larghezza della colonna */
    max-width: 100%; /* Assicura che non superi la larghezza della colonna */
    background-color: white;
	/*margin-top: 30px;*/
    padding: 15px;
    border: 2px solid #ccc;/*#dbdbdb;*/
    border-radius: 10px;
    text-align: left;
    box-sizing: border-box; /* Include il padding nella larghezza totale */
	overflow: hidden;
}

.contenitore_tabelle h4 {
	text-align: center;
	font-weight: 600;
	/*margin-bottom: 10px;*/
	color: black;
}

.contenitore_tabelle table {
	text-align: left;
	width: 100%;
    border-collapse: collapse;
    margin-bottom: 0px;
}

.contenitore_tabelle td {
	border-bottom: 1px dashed #ccc;
	font-weight: 500;
	font-size: 16px;
	color: black;
	padding: 8px 0px;
}

/*  APRI CHIUDI PAGINA ALIMENTO  */

.contenitore_toggle_titolo_testo {
    width: 100%; /* Si estende per tutta la larghezza della colonna */
    max-width: 100%; /* Assicura che non superi la larghezza della colonna */
    background-color: white;
	/*margin-top: 30px;*/
    padding: 15px 5px 15px 0px;
	border-bottom: 1px solid #ccc;
    text-align: left;
    box-sizing: border-box; /* Include il padding nella larghezza totale */
	overflow: hidden;
}

.contenitore_toggle_titolo_testo h4 {
	text-align: left;
	font-weight: 600;
	/*margin-bottom: 10px;*/
	color: black;
}

.titolo_toggle_titolo_testo {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px;
    /*background-color: #f4f4f4;*/
    /*margin-bottom: 10px;*/
}

.contenuto_toggle_titolo_testo {
    overflow: visible;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.contenuto_toggle_titolo_testo.attivo {
    max-height: 1000px; /* Altezza massima */
    transition: max-height 0.3s ease-in;
}

/* Rotazione della freccia
.titolo_toggle .icona_toggle.attivo {
    transform: rotate(90deg); /* Ruota la freccia
}*/

.icona_toggle {
    display: inline-block;
    transition: transform 0.3s ease;
}

.icona_toggle.attivo {
    transform: rotate(90deg); /* Ruota di 90 gradi per aprire */
}


.sinonimo_vitamina {
	display: inline-block;
    /*width: 100%; /* Larghezza del quadratino */
    /*height: 15px; /* Altezza del quadratino */
	margin: 0px 0px 3px 5px !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: black !important;
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
}

.contenitore-grafico {
	padding: 15px 0px; 
}

 .quadratino {
        display: inline-block;
        width: 12px; /* Larghezza del quadratino */
        height: 12px; /* Altezza del quadratino */
        margin: 0px 8px 3px 0px; /* Spaziatura tra il quadratino e il testo */
        vertical-align: middle; /* Allinea il quadratino al centro del testo */
    }

#graficoValoriNutrizionali {
        display: block;
        margin: auto;
        /*width: 140px;
        height: 140px;*/
    }
	
/* ------------------------------------------------------------------------ TOGGLE TABELLE ----------------------------------------------------------------- */

/* Stile per il toggle */
.titolo_toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px;
    /*background-color: #f4f4f4;*/
    /*margin-bottom: 10px;*/
}

.contenuto_toggle {
    overflow: visible;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.contenuto_toggle.attivo {
    max-height: 1000px; /* Altezza massima */
    transition: max-height 0.3s ease-in;
}

/* Rotazione della freccia
.titolo_toggle .icona_toggle.attivo {
    transform: rotate(90deg); /* Ruota la freccia
}*/

.icona_toggle {
    display: inline-block;
    transition: transform 0.3s ease;
}

.icona_toggle.attivo {
    transform: rotate(90deg); /* Ruota di 90 gradi per aprire */
}


/* ---------------------------------------------------------------------- FINE TOGGLE TABELLE --------------------------------------------------------------- */
.margine_top_tabelle {
	height:10px;
	max-width:100%;
	width:100%;
	/*background-color: yellow;*/
}

.quantita_tab {
	text-align: right !important;
	font-weight: 500 !important;
}

.quantita_tab.senza-riga {
	border:none;
}

.senza-riga {
	border:none !important;
	padding-bottom: 0px !important;
}

.legenda_tabella {
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#idrosolubili {
	font-weight: 600 !important;
	font-size: 16px;
	color: #36A2EB;
	margin: 12px 8px 0px 8px;
}

#banda_idrosolubili {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #36A2EB;
	margin: 15px 0px 0px 0px;
}

#liposolubili {
	font-weight: 600 !important;
	font-size: 16px;
	color: #FFA500;
	margin: 6px 8px 0px 8px;
}

#banda_liposolubili {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #FFA500;
	margin: 8px 0px 0px 0px;
}

#macroelementi {
	font-weight: 600 !important;
	font-size: 16px;
	color: #8A2BE2;
	margin: 12px 8px 0px 8px;
}

#banda_macroelementi {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #8A2BE2;
	margin: 15px 0px 0px 0px;
}

#oligoelementi {
	font-weight: 600 !important;
	font-size: 16px;
	color: #FF1493;
	margin: 6px 8px 0px 8px;
}

#banda_oligoelementi {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #FF1493;
	margin: 8px 0px 0px 0px;
}

/* 1 AMMINOACIDI ------------------------------------------------------- */

#essenziali {
	font-weight: 600 !important;
	font-size: 16px;
	color: #900006;
	margin: 12px 8px 0px 8px;
}

#banda_essenziali {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #900006;
	margin: 15px 0px 0px 0px;
}

/* 2 AMMINOACIDI ------------------------------------------------------- */

#cond_essenziali {
	white-space: nowrap; /* Impedisce la rottura del testo su più righe */
	font-weight: 600 !important;
	font-size: 16px;
	color: #FF0000;
	margin: 6px 8px 0px 8px;
}

#banda_cond_essenziali {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #FF0000;
	margin: 8px 0px 0px 0px;
}

/* 3 AMMINOACIDI ------------------------------------------------------- */

#non_essenziali {
	white-space: nowrap; /* Impedisce la rottura del testo su più righe */
	font-weight: 600 !important;
	font-size: 16px;
	color: #FFBEC3;
	margin: 6px 8px 0px 8px;
}

#banda_non_essenziali {
	display: inline-block;
	width: 100%; /* Larghezza del quadratino */
	max-width: 100%;
	height: 6px; /* Altezza del quadratino */
	vertical-align: middle; /* Allinea il quadratino al centro del testo */
	background-color: #FFBEC3;
	margin: 8px 0px 0px 0px;
}

.unita_misura {
	font-weight: 500 !important;
	color: black;
}
	
.colonna.centrale .sezione {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: center;
}

	
.sezione img {
	display:block;
    }

.titolo_sezione {
	font-family: 'Amatic SC', cursive;
	font-size: 38px;
	font-weight: 700;
	text-align: left;
	margin-bottom: 6px;
	color: red;
    }
	
.titolo_sezione_verde {
	font-family: 'Amatic SC', cursive;
	font-size: 38px;
	font-weight: 700;
	text-align: left;
	margin-bottom: 6px;
	color: #44BA00;
    }
	
.titolo_sezione_pagina {
font-family: 'Amatic SC', cursive;
font-size: 40px;
font-weight: 700;
text-align: left;
margin: 0px;
padding:0px;
color: red;
}
	
.titolo_sezione_grigio {
	font-family: 'Amatic SC', cursive;
	font-size: 38px;
	font-weight: 700;
	text-align: center;
	margin: 20px 0px;
	color: #6b6b6b;
}
	
.dashed-line {
    border: none;              /* Rimuove il bordo predefinito */
    border-top: 2px dashed #ccc;/*#D6D6D6;  /* Linea orizzontale tratteggiata */
    margin: 0px 0 0px 0;            /* Spaziatura superiore e inferiore */
    width: 100%;               /* Larghezza della linea */
}

.testo_sezione {
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	color: #6b6b6b;
	line-height: 1.6;
    }
	
.sezione ol {
    margin-left: 2em; /* Aggiungi il margine sinistro per spostare l'elenco avanti */
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.search-container {
    display: flex;
    justify-content: center;
    max-width: 100%;               /* Massima larghezza disponibile */
    width: 100%;
}

.search-container form {
    display: grid;                 
    grid-template-columns: 1fr auto; /* input riempie lo spazio disponibile, button è fisso */
    gap: 0;                        /* Nessun gap per tenere input e button uniti */
    width: 100%;                   /* Fa sì che il form riempia l'intera larghezza */
    margin: 0;
}

.search-container input[type="search"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-right: none;             /* Rimuove il bordo destro per unire il button */
    border-radius: 4px 0 0 4px;
    box-sizing: border-box;
}

.search-container button {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-left: none;              /* Unisce button all'input */
    border-radius: 0 4px 4px 0;
    background-color: #6b6b6b;
    color: white;
    cursor: pointer;
    font-weight: 500;
    width: 80px;                    /* Larghezza fissa del pulsante */
    box-sizing: border-box;
}

input[type="search"].input_cerca {
  margin: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: white;
  color: #6B6B6B;
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.esempi_amazon {
	width:100%;
	max-width:100%;
}

.sezione_marketing {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* spazio tra gli elementi, ad esempio tra il titolo e le immagini */
  padding: 10px; /* eventuale padding per non far attaccare il contenuto ai bordi */
}


.sezione_marketing img {
width: 100%;       /* Occupa tutta la larghezza del contenitore */
height: auto;      /* Mantiene le proporzioni */
display: block;    /* Elimina eventuali spazi extra */
}





@media (min-width: 1024px) {
    .search-container {
        justify-content: flex-start; /* Allinea la barra a sinistra, se preferisci */
    }

    .search-container input[type="search"] {
        max-width: 180px; /* Limita la larghezza del campo di ricerca su desktop */
    }
}

.search-container input[type="search"]:focus,
.search-container button:focus {
    outline: none; /* Rimuove il contorno di default */
    /*border: 1px solid #6b6b6b; /* Aggiunge un bordo personalizzato al focus */
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*  RICETTE  */

.contenitore-griglia-ricette {
    display: grid;
    grid-template-columns: 1.2fr 2fr auto;
    gap: 30px 50px; /* 30 50 */
    max-width: 90%;
    margin: 0 auto; /* Centra il contenitore */
    padding-top: 40px; /* 60 */
    box-sizing: border-box;
	background-color: none;
}

@media (max-width: 768px) {
    .contenitore-griglia-ricette {
        grid-template-columns: 1fr;
		max-width: 100%;
		gap: 20px;
		
    }
}

.elenco_ingredienti {
	display:  flex;
	flex-direction: column;
	margin:10px;
	/*background-color: red;*/
	border-collapse: collapse;
	width:100%;
	max-width:100%;
}
	
.ingrediente_ricetta {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Assicura che tutte le colonne abbiano la stessa altezza */
    text-align: left;
	margin-top:15px;
    /*border: 1px solid black;*/
    border-collapse: collapse;
    /*background-color: grey;*/
}

.immagine_ingrediente {
    display: flex;
    justify-content: left; /* Centra l'immagine nella colonna */
    /*align-items: center;*/
    width: 70px;
    height: 60px;
    padding-right: 10px;
    /*background-color: yellow;*/
}

.immagine_ingrediente img {
	border-radius: 50%;
	border: 2px solid #b3b3b3;
}

.valori_ingrediente {
    display: flex;
    flex-direction: column;
	align-items: stretch; /* Assicura che tutte le colonne abbiano la stessa altezza */
    flex-grow: 1; /* Fa adattare questa colonna alla larghezza disponibile */
    justify-content: center; /* Centra verticalmente i valori nutrizionali */
    text-align: center;
    /*background-color: blue;*/
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    height: 100%; /* Fa adattare l'altezza a quella dell'intera riga */
}

.nome_ingrediente {
	display: flex;
	/*background-color: orange;*/
	border-collapse: collapse;
	font-weight: 700;
	color: black;
	padding: 0px;
	margin-bottom: 5px;
	
}

.valori_nutrizionali {
    display: flex;
    flex-direction: row;
    align-items: center; /* Centra verticalmente i valori all'interno */
    justify-content: space-between; /* Aggiungi spazio tra gli elementi per migliorare la disposizione */
    text-align: center !important;
    /*background-color: pink;*/
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    width: 100%; /* Occupa tutta la larghezza della pagina */
}

.valore {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra il contenuto orizzontalmente al centro */
	
    justify-content: flex-start; /* Centra verticalmente il contenuto */
    /*border-left: 1px solid black;*/
    /*background-color: brown;*/
    border-collapse: collapse;
	height: 100%;
    margin: 0px;
    flex: 1; /* Dividi in parti uguali tra tutti i div .valore */
    min-width: 0; /* Assicura che ogni elemento possa ridimensionarsi senza andare fuori dal contenitore */
	padding-bottom: 10px;
	border-bottom: 1px solid #b3b3b3;
}

.numero_valore {
	display: flex;
    justify-content: center; /* Allinea il contenuto orizzontalmente al centro */
    align-items: stretch;
	font-size: 16px;
	/*background-color: violet;*/
	border-collapse: collapse;
	border-left: 1px solid #b3b3b3;
	padding-bottom: 4px;
	height:100%;
	width:100%;
	
}

.g_grammi {
	font-size: 10px;
}

.nome_valore {
	display: flex;
    justify-content: center; /* Allinea il contenuto orizzontalmente al centro */
    align-items: center;
	font-size: 10px;
	color: black;
	/*background-color: light blue;*/
	border-collapse: collapse;
	width:100%;
	margin: 0px;
	border-left: 1px solid #b3b3b3;
	
}

.input_quantita {
    display: flex;
    /*align-items: flex-start;*/
    /*background-color: blue;*/
	max-width:60px;
	flex-grow: 1; /* Permette alla colonna di riempire la sua porzione disponibile */
	border-bottom: 1px solid #b3b3b3;
	padding-left: 10px;
	/*border-left: 1px solid black;*/
}

/*.input_quantita {
    display: flex;
    align-items: stretch; /* Assicura che il contenuto si estenda
    height: 100%;
    background-color: red;
    border-bottom: 1px solid black;
    flex-grow: 1; /* Permette alla colonna di riempire la sua porzione disponibile 
}*/

/*.input_quantita input[type="text"] {
    width: 50px; /* Larghezza del campo input per la quantità
    padding: 5px;
    text-align: center;
	margin-top: 0px;
}*/

.input_quantita input[type="text"] {
    width: 50px; /* Larghezza completa della colonna */
	max-width: 50px;
	height: 30px;
    padding: 5px;
    text-align: center;
    box-sizing: border-box; /* Include padding e bordo nelle dimensioni */
}

/* INDICE GLICEMICO */

/* Contenitore principale */
#indice-glicemico-container {
  position: relative;
  width: 100%; /* Assicura che occupi tutta la larghezza del contenitore padre */
  margin: 0 auto; /* Centra il contenitore */
  height: 70px; /* Altezza del contenitore */
  top:15px;
  overflow: visible; /* Permette agli elementi che escono di essere visibili */
  /*background-color:red;*/
}

/* Barra glicemica */
#barra-glicemica {
  position: relative;
  width: 100%; /* Adatta la barra alla larghezza del contenitore */
  height: 8px;
  margin: 0 auto;
  top:25px;
  background: linear-gradient(to right, green 55%, yellow 69%, red);
  border: 1px solid #ccc;
}

/* Posizionatore freccia e valore */
#posizionatore-ig {
  position: absolute;
  top: -40px; /* Posiziona sotto la barra */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* Valore sopra la freccia */
#valore-ig {
  position: relative; /* Mantieni relativa la posizione per regolare top */
  top: 11px;
  font-size: 16px;
  font-weight: 500;
  color: black;
  margin-bottom: 0px;
  text-align: center;
}

#freccia-ig {
  position: relative; /* Mantieni relativa la posizione per regolare top */
  top: 6px; /* Abbassa la freccia di 10px */
  font-size: 11px;
  color: black;
}

#freccia-ig::after {
  content: "▼";
}

/* Classificazione */
#classificazione-ig {
  position: absolute;
  top: 43px; /* Posiziona sotto la barra */
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* Colore dinamico per la classificazione */
#classificazione-ig.green {
  color: green;
}

#classificazione-ig.yellow {
  color: orange;
}

#classificazione-ig.red {
  color: red;
}

/* CARICO GLICEMICO */

#carico-glicemico-container {
  position: relative;
  width: 100%;
  margin: 0px auto;
  height: 70px;
  top: 15px;
  /*background-color: red;*/
}

#barra-carico-glicemico {
  position: relative;
  width: 100%;
  height: 8px;
  margin: 0 auto;
  top: 25px;
  background: linear-gradient(to right, green 10%, yellow 19%, red);
  border: 1px solid #ccc;
}

#posizionatore-cg {
  position: absolute;
  top: -40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#valore-cg {
  position: relative; /* Mantieni relativa la posizione per regolare top */
  top: 11px;
  font-size: 16px;
  font-weight: 500;
  color: black;
  margin-bottom: 0px;
  text-align: center;
}

#freccia-cg {
  position: relative; /* Mantieni relativa la posizione per regolare top */
  top: 6px; /* Abbassa la freccia di 10px */
  font-size: 11px;
  color: black;
}

#freccia-cg::after {
  content: "▼";
}

#classificazione-cg {
  position: absolute;
  top: 43px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

#classificazione-cg.green {
  color: green;
}

#classificazione-cg.yellow {
  color: orange;
}

#classificazione-cg.red {
  color: red;
}


/*	INDICE DEI CONTENUTI	*/

 /*   .indice {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .indice a {
        text-decoration: none;
        color: #007BFF;
        display: block;
        margin-bottom: 5px;
    }

    .indice a:hover {
        text-decoration: underline;
    }

    section {
        padding: 50px;
        margin-top: 20px;
        border-bottom: 1px solid #ddd;
    }*/

    .sezione h3 {
        position: relative;
    }

    .freccia {
        font-size: 0.8em;
        margin-left: 10px;
        color: #007BFF;
        cursor: pointer;
        text-decoration: none;
    }

    .freccia:hover {
        text-decoration: underline;
    }

    .freccia::before {
        content: '↩ ';
    }
	
	/* Imposta un margine superiore per tutte le sezioni con id */
[id] {
    scroll-margin-top: 100px; /* Sposta la sezione verso il basso quando raggiunta tramite ancora */
}

.testata_sezione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
	/*background-color: red;*/
}

.testata_top {
  transform: translateY(-5px);
}


.freccia_top {
	font-size: 12px;
	transform: rotate(-90deg);
	margin: 0 0 8px 0;
	padding: 5px;
	border: 2px solid #ccc;
	background-color: white;
	border-radius: 50%;
	cursor: pointer;
}

/*  ----------  PAGINA ALIMENTI  ----------  */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    margin: 0 auto;
	padding: 0px 20px;
	background: none;
}

/* Stili specifici per il form #filtraAlimenti */
#filtraAlimenti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
	flex-wrap: wrap;
}

/* Stili per gli input e i pulsanti all'interno di #filtraAlimenti */
#filtraAlimenti select,
#filtraAlimenti button,
#filtraAlimenti input {
    margin: 0px;
	width: 300px;
    padding: 10px;
    font-size: 16px;
	font-weight: 500;
	border: 1px solid #b3b3b3; /*#6B6B6B;/*#ccc;*/
	border-radius: 5px;
	color: black; /*#6B6B6B;*/
}

#filtraAlimenti select {
    background-color: #EFEFEF;
}

#filtraAlimenti button {
    background-color: #6B6B6B;
    border-radius: 5px;
    border: none;
    padding: 12px;
    cursor: pointer;
    color: white;
    font-weight: 500;
}

label {
	font-size: 18px;
	font-weight: 600;
	color: black; /*#6B6B6B;*/
	
}

/* DROPDOWN PERSONALIZZATI */

.custom-dropdown { /* pulsante tendina */
	position: relative;
	width: 300px;
	/*margin-bottom: 15px;*/
}

.custom-dropdown .selected-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	font-size: 16px;
	background-color: #EFEFEF;/*#fff;*/
	border: 1px solid #b3b3b3; /*#ccc;*/
	border-radius: 5px;
	cursor: pointer;
}

#selected-sottocategoria-text , #selected-ordinamento-text {
	color:black;
	font-weight: 500;
}

.dropdown-options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #fff;
	border: 1px solid #b3b3b3; /*#ccc;*/
	border-radius: 5px;
	z-index: 1000;
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 400px; /* altezza tendina */
	overflow-y: auto;
}

.dropdown-options .macro-label > span { /* Macrocategorie */
	font-weight: 700;
	padding: 8px;
	display: block;
	cursor: default;
	color:black;
}

.dropdown-options .subcategory-item { /* Sottocategorie */
	font-weight: 500;
	padding: 8px;
	color: black;
	padding-left: 20px;
	background-color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dropdown-options .subcategory-item:hover {
	background-color: #f0f0f0;
}

.dropdown-options .subcategory-item.selected {
	background-color: #f0f0f0;
}


@media (max-width: 768px) {
	#filtraAlimenti {
		flex-direction: column;
		align-items: stretch;
	}

	.custom-dropdown {
		width: 100%; /* Occupare tutta la larghezza */
		margin-bottom: 10px;
	}

	.custom-dropdown .selected-option {
		width: 100%;
	}

	#filtraAlimenti input[type="text"] {
		width: 100%;
		margin-bottom: 10px;
	}
	
	#filtraAlimenti label {
	font-size: 18px;
	font-weight: 600;
	color: black; /*#6B6B6B;*/
	text-align: center;
	margin-bottom: 10px;
	}
}

/* LINEA TRATTEGGIATA */
	
.dashed-line {
    border: none;              /* Rimuove il bordo predefinito */
    border-top: 2px dashed #D6D6D6;  /* Linea orizzontale tratteggiata */
    margin: 0px 0px 30px 0px;            /* Spaziatura superiore e inferiore */
    width: 100%;               /* Larghezza della linea */
}

.dashed-line_toggle_titolo_testo {
    border: none;              /* Rimuove il bordo predefinito */
    border-top: 2px dashed #D6D6D6;  /* Linea orizzontale tratteggiata */
    margin: 0px 0px 10px 0px;            /* Spaziatura superiore e inferiore */
    width: 100%;	/* Larghezza della linea */
}

/* BREADCRUMB */

/* Contenitore del breadcrumb */
.breadcrumb-container {
    display: flex;
    align-items: left;
    padding: 12px 0 0 0;
    margin: 0;
    width: 100%;
}

/* Lista dei breadcrumb */
.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
    margin: 0;
    gap: 3px;
}

/* Elementi del breadcrumb */
.breadcrumb-item {
    font-size: 14px;
    white-space: nowrap;
}

/* Colore del testo del breadcrumb */
.breadcrumb-item span {
	color:#6B6B6B;
	font-weight: 500;
}

/* Link nei breadcrumb */
.breadcrumb-item a {
    text-decoration: none;
}

.breadcrumb-item a:hover {
	text-decoration: none;
}

/* Colore del testo del breadcrumb che hanno un link */
.breadcrumb-item a span {
	text-decoration: none;
	color: #6B6B6B;
}

/* Colore del testo del breadcrumb che hanno un link :hover */
.breadcrumb-item a:hover span {
    color: black;
	text-decoration: none;
}

/* Separatore tra gli elementi
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    margin: 0 5px;
    color: #666;
}*/

/* Separatore tra gli elementi freccia chevron_right di Google */
.breadcrumb-item + .breadcrumb-item::before {
    content: "\e5e1"; /* Unicode di chevron_right in Material Icons */
    font-family: 'Material Icons'; /* Specifica il font */
    margin: 0 3px;
    color: #6B6B6B; /* Colore del separatore */
    font-size: 12px; /* Regola la dimensione se necessario */
	font-weight: 500;
}

/* Puntini di ellissi su mobile */
.breadcrumb-ellipsis {
    cursor: pointer;
    display: none;
}

/* Stile attivo al clic */
.breadcrumb-expanded .breadcrumb-item {
    display: inline-block;
}

.breadcrumb-expanded .breadcrumb-ellipsis {
    display: none;
}

/* Visibilità su mobile */
@media (max-width: 768px) {
    .breadcrumb {
        overflow: hidden;
    }

    .breadcrumb-item {
        display: none; /* Nasconde tutti gli elementi tranne gli ultimi 2 */
    }

    .breadcrumb-item:nth-last-child(-n+2) {
        display: inline-block;
    }

    .breadcrumb-ellipsis {
        display: inline-block;
        color: #007bff;
        margin-right: 0px;
    }
}