.map {
		width: 100%;
		height: 100vh; /* VH = vertical height, se fai 80 vh ti fa l'80% dell'altezza della pagina nel dispositivo.*/
	}

/*----- da qui POPUP POI -----*/
.leaflet-popup-content-wrapper {
  padding: 0 !important;
  overflow: hidden !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Stile del POI */
.poi {
  width: 350px;
  display: block;
}

.popup-header {
  background-color: #4a89dc;
  color: white;
  padding: 10px;
  text-align: center;
  display: block;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
}

.popup-content {
  display: table;
  width: 100%;
  table-layout: fixed; /* Forza colonne di uguale larghezza */
  border-collapse: collapse;}

.column {
  display: table-cell;
  width: 50%; /* Esattamente metà */
  padding: 10px;
  vertical-align: middle;
}

.left-column {
  border-right: 1px solid #ddd;
}

.column h4 {
  color: #4a89dc;
  margin: 0 0 10px 0;
  padding: 0;
}

.column p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.poi .popup-footer {
  background-color: #A7DAFC;
  padding: 2px!important;
  text-align: center;
  color: #777;
  font-size: 14px;
  line-height: 0.8;
	  font-weight: normal;

}
/* Selettore alternativo ancora più aggressivo che non si basa sulla classe poi */
.leaflet-container .leaflet-popup-close-button {
  position: absolute !important;
  top: 15px !important;
  right: 10px !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: bold !important;
  background: transparent !important;
  border: none !important;
  z-index: 1000 !important;
  text-decoration: none !important;
  text-align: center !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 !important;
}

.leaflet-container .leaflet-popup-close-button:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
}
/*----- fine POPUP POI -----*/


/*----- da qui POPUP GHIACCIAI -----*/

        /* Stile base per il popup personalizzato */
        .ghiacciai-popup .leaflet-popup-content-wrapper {
            padding: 0;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
            border: none;
            width: 250px;
        }
        
        /* Reset del margine interno del contenuto del popup */
        .ghiacciai-popup .leaflet-popup-content {
            margin: 0;
            width: 100% !important;
        }
        
        /* Rimuoviamo la freccia predefinita di Leaflet */
        .ghiacciai-popup .leaflet-popup-tip-container {
            display: none;
        }
        
        /* Struttura del contenuto del popup */
        .popup-container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        
        /* Stile dell'header */
        .popup-header {
            background-color: #08389A;
            color: black !important;
            padding: 10px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Stile del contenuto principale */
        .popup-content {
            background-color: white;
            padding: 15px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }
        
        /* Stile del footer */
        .popup-footer {
            background-color: #08389A;
            color: black !important;
            padding: 8px;
            font-size: 12px;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
        }

	/* Personalizzazione del pulsante di chiusura */
	.ghiacciai-popup .leaflet-popup-close-button {
		position: absolute !important;
		top: 7px !important;
		right: 10px !important;
		color: white !important;
		font-size: 16px !important;
		font-weight: bold !important;
		background: transparent !important;
		border: none !important;
		z-index: 1000 !important;
		text-decoration: none !important;
		text-align: center !important;
		width: 24px !important;
		height: 24px !important;
		line-height: 24px !important;
		padding: 0 !important;
	}

	.ghiacciai-popup .leaflet-popup-close-button:hover {
		background-color: rgba(255, 255, 255, 0.2) !important;
		border-radius: 50% !important;
	}

/*----- fine POPUP GHIACCIAI -----*/


/*----- da qui TESTO SPOSTATO PER POPUP FELLARIA -----*/
	.route-header {
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
		border-bottom: 1px solid #ddd;
	}
	.route-details {
		margin-left: 10px;
	}
/*----- fine TESTO SPOSTATO PER POPUP FELLARIA -----*/


/*----- da qui COLORE TESTO INGLESE POPUP INFO SENTIERI -----*/

	.english-text {
		color: #0066cc; /* Puoi cambiare questo colore con quello che preferisci */
	}
/*----- fine COLORE TESTO INGLESE POPUP INFO SENTIERI -----*/


/*----- da qui STILE POPUP SENTIERI -----*/

	/* Stile base per il popup */
	.custom-popup-window .leaflet-popup-content-wrapper {
		background: white;
		box-shadow: 0 3px 14px rgba(0,0,0,0.4);
		border-radius: 8px;
		padding: 0;
		overflow: hidden;
	}

	.custom-popup-window .leaflet-popup-content {
		margin: 0;
		width: 100%;
	}

	.custom-popup-window .leaflet-popup-tip {
		background: white;
		box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}

	/* Stile per l'intestazione */
	.popup-header {
		background-color: #A7DAFC;
		color: black;
		padding: 10px 15px;
		border-bottom: 1px solid #ddd;
	}

	.popup-header h2 {
		margin: 0;
		padding: 0;
		font-size: 18px;
	}

	.popup-header a {
		color: #000000 !important;
		text-decoration: none;
	}

	.popup-header a:hover {
		text-decoration: underline;
	}

	/* Stile per il corpo del popup */
	.popup-body {
		padding: 15px;
	}

	/* Stile per il footer del popup */
	.popup-footer {
		background-color: #A7DAFC;
		border-top: 1px solid #ddd;
		padding: 10px;
		text-align: center;
		font-size: 14px;
		color: #000000;
	}

	/* Personalizzazione del pulsante di chiusura */
	.custom-popup-window .leaflet-popup-close-button {
		position: absolute !important;
		top: 10px !important;
		right: 10px !important;
		color: white !important;
		font-size: 16px !important;
		font-weight: bold !important;
		background: transparent !important;
		border: none !important;
		z-index: 1000 !important;
		text-decoration: none !important;
		text-align: center !important;
		width: 24px !important;
		height: 24px !important;
		line-height: 24px !important;
		padding: 0 !important;
	}

	.custom-popup-window .leaflet-popup-close-button:hover {
		background-color: rgba(255, 255, 255, 0.2) !important;
		border-radius: 50% !important;
	}
/*----- fine STILE POPUP SENTIERI -----*/


/*----- da qui BOTTONE SCARICA TRACCIA -----*/
	.btn-Scarica{
		display: block;
		margin: 0 auto;
		background-color: #0078d4;
		color: white;
		border: 1px;
		border-radius: 5px;
		cursor: pointer;
		font-weight: bold;
		transition: background-color 0.3s;
		/* Dimensioni del pulsante */
    	width: 140px;           /* Larghezza fissa */
    	height: 35px;           /* Altezza fissa */
    	padding: 5px 5px;     /* Spaziatura interna (top/bottom left/right) */
		font-size: 13px;        /* Dimensione del testo */
	}

	.btn-Scarica a {
		color: white !important;
		text-decoration: none;
	}

	.btn-Scarica:hover{
		background-color: #3C5DA8;
	}
/*----- fine BOTTONE SCARICA TRACCIA -----*/


/*----- da qui LEGENDA -----*/
	#legend {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		background: white;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		z-index: 1000;
		font-family: Arial, sans-serif;
		font-size: 14px;
		color: #333;
		display: flex; /* Disposizione orizzontale */
		align-items: center; /* Allinea gli elementi verticalmente al centro */
		gap: 10px; /* Spazio tra gli elementi */
	}
	.legend-item {
		display: flex;
		align-items: center;
		gap: 5px; /* Spazio tra l'icona e il testo */
	}
	.legend-color {
		width: 10px;
		height: 10px;
		display: inline-block;
	}
/*----- fine LEGENDA -----*/


/*----- da qui MENU LATERALE -----*/
	#sidebar {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 270px;
		height: 100%; /* Occupa tutta l'altezza disponibile */
		max-height: 100vh; /* Imposta un'altezza massima pari all'altezza della finestra */
		background: #E0E0E0;
		box-shadow: 6px 0 15px rgba(0, 0, 0, 0.7);
		transition: left 0.3s ease;
		z-index: 1000;
		padding: 10px;
		overflow-y: auto; /* Abilita lo scrolling verticale */
		overflow-x: hidden; /* Nasconde la barra di scorrimento orizzontale */
		scrollbar-color: #0078d4 #f8f9fa;
	}

	#sidebar.closed {
		left: -270px; /* Nasconde il menù */
	}
	#toggleButton {
		position: absolute;
		top: 50px;
		left: 272px; /* Posiziona il pulsante accanto al menù aperto */
		z-index: 1001;
		padding: 10px;
		background: #E0E0E0;
		border: none;
		cursor: pointer;
		transition: left 0.3s ease; /* Aggiungi una transizione fluida */
		box-shadow: 6px 0 10px rgba(0, 0, 0, 0.5);
	}

	#sidebar.closed + #toggleButton {
    	left: 10px; /* Sposta il pulsante quando il menù è chiuso */
	}

	#toggleButton:hover img {
		opacity: 0.5; /* Riduce leggermente l'opacità al passaggio del mouse */
	}

/* Stili per il tooltip */
	.tooltip {
		visibility: hidden;
		width: 120px;
		background-color: #333;
		color: #fff;
		text-align: center;
		border-radius: 4px;
		padding: 5px;
		position: absolute;
		z-index: 1002;
		top: 10px;
		left: 105px;
		margin-left: -60px;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	#toggleButton:hover .tooltip {
		visibility: visible;
		opacity: 1;
	}

/* Stili di base per tutti i bottoni del menù */
	#sidebar .menu-button {
   		display: flex;
		align-items: center;
    	cursor: pointer;
    	white-space: nowrap;
    	text-align: left;
		color: #000000; /* Colore del testo */
		font-size: 14px;
    	width: 95%;
    	margin-bottom: 5px;
    	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	}

/* Evidenziazione al passaggio del mouse */
	#sidebar .menu-button:hover {
    	background-color: #0078d4; /* Colore di sfondo */
    	color: #fff; /* Colore del testo */
    	border-color: #0078d4; /* Colore del bordo */
	}


/* Stile per il contenitore del gruppo di pulsanti */
	.button-group {
		margin-bottom: 8px;
		margin-left: 8px;
    	width: 95%;
	}
/* Stile per l'intestazione del gruppo */
	.group-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #f8f9fa;
		border: 1px solid #000CF0;
		cursor: pointer;
		border-radius: 5px;
		font-size:16px;
		height: 32px;
		box-shadow: 6px 0 10px rgba(0, 0, 0, 0.5);
	}
/* Stile per il contenuto del gruppo (pulsanti) */
	.group-content {
		max-height: 0; /* Nasconde il contenuto inizialmente */
		overflow: hidden;
		transition: max-height 0.3s ease, padding 0.3s ease;
	}
/* Stile per il contenuto del gruppo quando è aperto */
	.group-content.open {
		max-height: 500px; /* Altezza massima (regola in base al contenuto) */
		padding: 10px 0; /* Aggiunge spazio interno */
	}
/* Stile per la freccia */
	.arrow {
		transition: transform 0.3s ease;
	}
/* Ruota la freccia quando il gruppo è aperto */
	.group-header.active .arrow {
		transform: rotate(180deg);
	}

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  font-weight: bold;
  font-size: 14px;
  }

/* 
*/
button.btn.btn-outline-primary {
    margin-bottom: 5px;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}

.wp-block-table td, .wp-block-table th {
    padding: 0.5em;
    border: 0px solid;
    word-break: normal;
}

button.legenda-button {
	position: absolute;
	top: 700px;
	left: 20px;
    border: 0;
    color: #005B9D;
    font-weight: 700;
    text-decoration: underline;
}

@keyframes fade { 
  from { opacity: 0.2; } 
}

.blinking {
  animation: fade 1s infinite alternate;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
	
button.btn.btn-outline-primary {
    margin-bottom: 5px;
}

.bottoni{
	margin-top: 10px;
	margin-bottom: 20px;
}

}