body {
	background-color: #f0f2f5;
	font-family: 'Arial', sans-serif;
	padding: 0;
	/* Evita padding indesiderato */
	margin: 0;
	/* Evita margini indesiderati */
}

.container-fluid {
	padding: 0 20px;
	/* Uniforma il padding ai lati */
}

.header {
	background-color: #2d2d2d; /*#080808;*/
	color: white;
	padding: 30px 40px;
	/* Padding uniforme su tutti i lati */
	text-align: center;
	margin-bottom: 30px;
	border-radius: 10px;
	max-width: 100%;
	/* Impedisce che si allarghi troppo su schermi grandi */
	margin-left: 20px;
	margin-right: 20px;
}

.header h1 {
	font-size: 2.5rem;
	margin-bottom: 10px;
}

.header p {
	font-size: 1.2rem;
}

.header bold {
	font-weight: bold;
}

.logo {
	width: 100px;
}

.controls {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

#map {
	height: 100vh;
	/* Altezza pari all'intero viewport */
	width: 97%;
	/* Larghezza pari all'intero viewport */
	position: absolute;
	/* Occupa tutto lo schermo */
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.card {
	border: none;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
	height: 100%;
}

.card-header {
	background-color: #1e90ff;
	color: white;
	font-size: 1.2rem;
	border-radius: 10px 10px 0 0;
	padding: 15px;
}

.list-localita-group-item {
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	list-style-type: none;
}

.list-localita-group-item.active {
	background-color: #f0ad4e !important;
	color: white;
}

.list-localita-group-item:hover {
	background-color: #f1f1f1;
}

.list-attivita-group-item {
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	list-style-type: none;
}

.list-attivita-group-item.active {
	background-color: #f0ad4e !important;
	color: white;
}

.list-attivita-group-item:hover {
	background-color: #f1f1f1;
}

.list-categorie-group-item {
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	list-style-type: none;
}

.list-categorie-group-item.active {
	background-color: #f0ad4e !important;
	color: white;
}

.list-categorie-group-item:hover {
	background-color: #f1f1f1;
}

.btn-primary {
	background-color: #1e90ff;
	border: none;
	padding: 12px 20px;
	font-size: 1rem;
	border-radius: 5px;
	transition: background-color 0.3s ease;
	width: 150px ! important;
}

.btn-primary:hover {
	background-color: #0056b3;
}

.map-container {
	width: 100%;
	margin-bottom: 30px;
}

/* Aggiungi la griglia di Bootstrap per affiancare mappa e lista */
.row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Per schermi piccoli la mappa prende tutta la larghezza e la lista si incolonna */
.col-12 {
	flex: 1 1 100%;
}

/* Su dispositivi più larghi la mappa e la lista sono affiancate */
@media (min-width: 800px) {

	.col-md-8,
	.col-md-4 {
		flex: 1;
	}
}

/* Overlay che copre tutta la pagina con una patina */
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	/* Patina semi-trasparente */
	justify-content: center;
	align-items: center;
	z-index: 9999;
	/* Inizialmente non impedisce l'interazione */
}

/* Visibile quando è in caricamento */
#loading-overlay.d-block {
	pointer-events: auto;
	/* Disabilita i clic durante il caricamento */
}

/* Spinner rotante */
.spinner {
	border: 4px solid rgba(255, 255, 255, 0.3);
	/* Bordo bianco trasparente */
	border-top: 4px solid #1e90ff;
	/* Colore blu per la parte superiore */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
	/* Animazione di rotazione */
}

/* Animazione di rotazione */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

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

/* Posizione delle icone delle impostazioni */
.settings-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #fff;
	padding: 10px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 1000;
	width: 50px;
	text-align: center;
}

.settings-icon i {
	font-size: 24px;
	color: #333;
}

.search-item,
.login-item,
.settings-item {
	gap: 10px;
	width: 98%;
}

.settings-item input,
.settings-item button {
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
}

.settings-item input[type="number"] {
	margin: 10px 0;
}

.settings-item button {
	background-color: #007bff;
	color: white;
	cursor: pointer;
}

.settings-item button:hover {
	background-color: #0056b3;
}

/* Stile per il div delle impostazioni per la popolazione */
.settings-popup {
	position: absolute;
	top: 10px;
	right: 65px;
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	max-width: 30%;
	min-width: 400px;
	height: 70%;
}

.settings-popup.d-none {
	display: none;
}

.settings-container {
	height: 100%;
}


/* Posizione dell'icona delle attivita */
.attivita-icon {
	position: absolute;
	top: 70px;
	right: 10px;
	background-color: #fff;
	padding: 10px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 1000;
	width: 50px;
	text-align: center;
}

.attivita-icon i {
	font-size: 24px;
	color: #333;
}

/* Stile per il div delle impostazioni per la attivita */
.attivita-popup {
	position: absolute;
	top: 10px;
	right: 65px;
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	max-width: 30%;
	min-width: 400px;
	height: 70%;
}

.attivita-container {
	height: 100%;
}

#ateco-checkbox-list {
	max-height: 250px;
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}

.form-check {
	display: flex;
	min-height: 1.5rem;
	padding-left: 1.5em;
	margin-bottom: .125rem;
}

.form-check-input[type=checkbox] {
	border-radius: .25em;
	width: 5px;
}

/* Stile per il primo livello */
.ateco-primo-livello {
	font-size: 16px;
	/* Dimensione del font per il primo livello */
	font-weight: bold;
	/* Rende il testo più evidente */
	margin-left: 0;
	/* Nessun rientro */
}

/* Stile per il secondo livello */
.ateco-secondo-livello {
	font-size: 14px;
	/* Dimensione del font più piccola per il secondo livello */
	margin-left: 20px;
	/* Rientro a destra */
	color: #666;
	/* Colore più tenue per distinguerlo */
}

/* Su dispositivi più larghi la mappa e la lista sono affiancate */
@media (min-width: 800px) {
	.attivita-popup {
		width: 21%;
	}
}

.attivita-popup.d-none {
	display: none;
}

input[type="file"] {
	margin: 10px 0;
	padding: 5px;
}

/* Posizione dell'icona delle attivita */
.localita-icon {
	position: absolute;
	top: 190px;
	right: 10px;
	background-color: #fff;
	padding: 10px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 1000;
	width: 50px;
	text-align: center;
}

.localita-icon i {
	font-size: 24px;
	color: #333;
}

/* Posizione dell'icona delle attivita */
.tab-search-icon {
	position: absolute;
	top: 250px;
	right: 10px;
	background-color: #fff;
	padding: 10px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 1000;
	width: 50px;
	text-align: center;
}

.tab-search-icon i {
	font-size: 24px;
	color: #333;
}

/* Stile per il div delle impostazioni per la categorie */
.categorie-popup {
	position: absolute;
	top: 10px;
	right: 65px;
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	max-width: 30%;
	min-width: 400px;
	height: 70%;
}

.categorie-popup.d-none {
	display: none;
}

.categorie-container {
	height: 100%;
}

/* Posizione dell'icona delle attivita */
.categorie-icon {
	position: absolute;
	top: 130px;
	right: 10px;
	background-color: #fff;
	padding: 10px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 1000;
	width: 50px;
	text-align: center;
}

.categorie-icon i {
	font-size: 24px;
	color: #333;
}

/* Stile per il div delle impostazioni per la localita */
.localita-popup {
	position: absolute;
	top: 10px;
	right: 65px;
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	max-width: 30%;
	min-width: 400px;
	height: 70%;
}

.localita-popup.d-none {
	display: none;
}

.localita-container {
	height: 100%;
}

/* Stile per il div delle impostazioni per la tab-search */
.tab-search-popup {
	position: absolute;
	top: 10px;
	right: 65px;
	background-color: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	max-width: 30%;
	min-width: 400px;
	/*height: 70%;*/
}

.tab-search-popup.d-none {
	display: none;
}

.tab-search-container {
	height: 100%;
}

/* Impostazioni della lista */
.list-container {
	width: 100%;
	max-height: 500px;
	overflow-y: auto;
}

.mt-2 {
	margin-top: .5rem !important;
	margin-bottom: 10px;

	@media (max-width: 666px) {
		#map {
			height: 100vh;
			width: 89%;
			position: absolute;
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
		}

	}

	/* Modifica per posizionare le icone sotto la mappa nei dispositivi con schermo più piccolo */
	@media (min-width: 667px) and (max-width: 900px) {
		#map {
			height: 100vh;
			width: 94%;
			position: absolute;
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
		}
	}

	@media (max-width: 900px) {
		.icons-container {
			display: flex;
			justify-content: center;
			/* Centra le icone sotto la mappa */
			gap: 20px;
			/* Distanza tra le icone */
			position: relative;
			top: 100vh;
			/* Le sposta sotto la mappa */
			width: 100%;
			padding: 10px 0;
		}

		.attivita-icon,
		.categorie-icon,
		.tab-search-icon,
		.localita-icon {
			position: static !important;
			/* Evita il posizionamento assoluto */
			width: 60px;
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			cursor: pointer;
		}

		.attivita-icon i,
		.categorie-icon i,
		.tab-search-icon i,
		.localita-icon i {
			font-size: 24px;
			color: #333;
		}

		/* Le sezioni delle attività e delle località devono avere un margine sufficiente per evitare sovrapposizioni */
		.attivita-popup,
		.categorie-popup,
		.localita-popup {
			position: relative !important;
			/* Assicura che la posizione sia relativa */
			width: 90%;
			/* Occupa quasi tutta la larghezza disponibile */
			min-width: 94%;
			margin: 10px auto;
			/* Centra la finestra popup sotto l'icona */
			left: 0;
			right: 0;
			top: calc(100vh + 1px) !important;
			/* Mette le icone appena sotto la mappa */
		}

		.settings-popup {
			position: absolute;
			top: 10px;
			right: 65px;
			background-color: white;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			z-index: 1000;
			max-width: 30%;
			min-width: 295px;
		}

		.attivita-popup,
		.categorie-popup,
		.localita-popup,
		.settings-popup {
			height: 48%;
		}

		/* Impostazioni della lista */
		.list-container {
			max-height: 300px;
			/* Limita l'altezza per evitare che diventi troppo lunga */
		}



}