/*
Nero background: #111111
Nero riquadri: #212121
Verde: #d5f848
*/
button, a, i, svg, img {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.empty-message {
  color: var(--f7-text-color-gray);
  font-size: 14px;
  font-style: italic;
  opacity: 0.7;
}
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: #111111;
    overflow-x: hidden;
    transition: 0.2s;
    transform: translateX(-300px);
    z-index: 1001;
}

.sidebar.show {
    transform: translateX(0);
}

.sidebar-content {
    margin-top: 10px;
}

.sidebar a {
    padding: 3px 3px 3px 20px;
    text-decoration: none;
    font-size: 12px;
    color: #FFFFFF;
    display: block;
    transition: 0.2s;
}

.sidebar a:hover {
    background-color: #212121;
	color: #d5f848 !important;
}

.content {
    padding: 16px;
    transition: margin-left 0.3s;
}

.content.shift {
    margin-left: 250px;
}

.hotspot {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    z-index: 999;
}


#meseLabel{
	font-size: 30px;
}
#tipoProgrammazioneSelect{
	font-size: 25px;
	height: auto;

	
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.image.fit50 {
	display: block;
	margin: 2.5rem 0;
	width: 50%;
}

.image.fit50:first-child {
	margin-top: 0;
}

.image.fit50 img {
	width: 50%;
}

.fit50 {
	width: 50%;
}

.divCentrata {
 	animation: fadeIn 0.5s ease-in-out forwards;
	text-align: center; 
	display: flex; 
	justify-content: center; 
	width: auto;
	height: auto;
}
.divCentrata img {
	width: 65%;
}


.buttonSchedaAtleta {
	width: 15px;
    height: 15px;
}

.icona15 {
	width: 15px;
    height: 15px;
}

.icona20 {
	width: 20px;
    height: 20px;
}

.icona25 {
	width: 25px;
    height: 25px;
}

.icona30 {
	width: 30px;
    height: 30px;
}

.icona40 {
	width: 40px;
    height: 40px;
}

.icona50 {
	width: 50px;
    height: 50px;
}

.icona5058 {
	width: 50px;
    height: 58px;
}

.icona70 {
	width: 70px;
    height: 70px;
}

.iconaCalendario {
	width: 50px;
    height: 50px;
}



/*                           RIGA CALENDARIO                               */
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-row > * {
    margin: 0 5px; /* Aggiunge spazio tra gli elementi */
}

select {
	width: auto;
}

/*                           MODALE                               */
#modalEvento {
    display: none; /* Nascosto di default */
    position: fixed; /* Rimane in posizione anche se scorri la pagina */
    left: 0;
    top: 0;
    width: 100%; /* Larghezza a tutto schermo */
    height: 100%; /* Altezza a tutto schermo */
    overflow: auto; /* Se il contenuto è troppo, permette lo scroll */
    background-color: rgba(0,0,0,0.4); /* Colore di sfondo con opacità */
}
#modalEventoSessioni{
    display: none; /* Nascosto di default */
    position: fixed; /* Rimane in posizione anche se scorri la pagina */
    left: 0;
    top: 0;
    width: 100%; /* Larghezza a tutto schermo */
    height: 100%; /* Altezza a tutto schermo */
    overflow: auto; /* Se il contenuto è troppo, permette lo scroll */
    background-color: rgba(0,0,0,0.4); /* Colore di sfondo con opacità */
}

/* Puoi personalizzare ulteriormente lo stile interno del modal, 
come il contenitore del form, i bottoni, etc. */
.modal-contenuto {
    background-color: #fefefe;
    margin: 15% auto; /* 15% dal top e centrato orizzontalmente */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Puoi personalizzare questa larghezza */
}


/*                           SCHEDA ATLETA                               */
.container-atleti {
	display: flex;
	height: 800px;
	padding: 5px;
	/*box-shadow: 0 0 10px 0 #D4D4D4;*/
	background-color: #212121;

}

.lista-atleti {
	width: 20%;
	max-height: 100%;
	overflow-y: auto; /* Per lo scorrimento verticale */
	background-color: #212121; /* #F1F1F1 */
	padding: 5px 0px 0px 5px;
	color: aliceblue;
	
}

.dettagli-atleta {
	width: 80%;	
	overflow-y: auto;
	padding: 5px;
	
	background-color: lightgrey;
}

.atleta-selezionato {
    background-color: #d5f848; /* Colore di sfondo per l'atleta selezionato */
    color: #212121; /* Colore del testo per l'atleta selezionato */
}


.tablinks.active {
	color: #18bfef;
}

/*                           SCHEDA SESSIONI                               
.container-sessioni {
	display: flex;
	height: 500px;
	box-shadow: 0 0 10px 0 #D4D4D4;
	background-color:white;

}


.lista-sessioni {
	width: 20%;
	max-height: 100%;
	overflow-y: auto; /* Per lo scorrimento verticale 
	background-color: #D4D4D4; /* #F1F1F1 
	padding: 5px 0px 0px 5px;
	
}
*/

/* queste le configurazioni per mostrare le sessioni con di fianco la lista dei risultati degli atleti*/ 
.container-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}

.dettagli-sessioni {
	width: 70%;
	flex: 1;
	
}
.lista-risultati {
	flex: 1;
	width: 30%;
	padding-left: 10px;
}
/* queste le configurazioni per mostrare le sessioni con di fianco la lista dei risultati degli atleti*/ 




/*                           RESPONSIVE                               */
@media screen and (max-width: 736px) {
	
	#wrapper > .custom {
				background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bgAtleti.png");		
	}
	
	.image.fit50 {
		margin: 2rem 0;
	}
	
	.pulsantiAtleta {
		position: fixed; /* Fixed positioning to stick to the bottom */
		bottom: 0; /* Anchors to the bottom */
		left: 0; /* Aligns to the left side */
		width: 100%; /* Ensures it spans the full width of the screen */
		display: flex; /* Uses flexbox for layout */
		flex-direction: column; /* Stacks the flex items vertically */
		align-items: center; /* Centers the rows horizontally */
		justify-content: flex-end; /* Aligns the content to the bottom */
		z-index: 1000; /* Ensures the navbar is above other content */

	}

	.rowAtleti {
		width: 100%; /* Full width to contain the buttons */
		display: flex; /* Uses flexbox for layout */
		justify-content: space-around; /* Evenly distributes buttons with space around */
		margin-bottom: -1rem; /* Optional: space between the rows 
		
		margin-right: 5px;*/
	}
	.rowAtleti2 {
	  width: 100%; /* Full width to contain the buttons */
	  display: flex; /* Uses flexbox for layout */
	  justify-content: space-around; /* Evenly distributes buttons with space around */
	  margin-bottom: 1rem; /* Optional: space between the rows */
		margin-right: 5px;
	}
	
/*
	.clickable-div {
	  flex: 2; 
	text-align: center;
	  margin: 1rem; 
		
	*/
    
	.clickable-div {
		flex: 1; /* Flex property to allow divs to grow */
		text-align: center; /* Aligns the content of the div to the center */
		margin: 1rem; /* Optional: Padding inside the divs */
		position: relative; 
		color: #F9F9F9;
	}

	.clickable-div img {
	  /*/width: 48%; /* Width to control the size of the buttons */
	  max-width: 120px; /* Optional: to ensure they don't get too large on wider screens */
	  height: auto; /* Keeps the image aspect ratio */
	}

	.div-atleti {
		width: 97%; /* Larghezza del div */
		margin: 0 auto; /* Centra il div orizzontalmente */
		border-radius: 10px; /* Angoli arrotondati */
		background-color: rgba(255, 255, 255, 0.9); /* Sfondo bianco con opacità al 90% */
		/* Aggiungi padding, se necessario, per lo spazio interno */
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 5px;
		/* Opzionale: aggiungi una box shadow o altri stili per migliorare l'aspetto */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		vertical-align: middle;
	}
	
	.bloccoInfoAtleti {
		width: 99%; /* Larghezza del div */
		margin: 0 auto; /* Centra il div orizzontalmente */
		border-radius: 5px; /* Angoli arrotondati */
		background-color: rgba(255, 255, 255, 0.9); /* Sfondo bianco con opacità al 90% */
		/* Aggiungi padding, se necessario, per lo spazio interno */
		padding: 10px;
		/* Opzionale: aggiungi una box shadow o altri stili per migliorare l'aspetto */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	
	.containerData {
		display: flex;/* Utilizza flexbox */
		justify-content: space-between; /* Distribuisce lo spazio uniformemente */
		align-items: center; /* Allinea gli elementi verticalmente al centro */
		vertical-align: middle;
	}
	

	.data-label {

	  	flex: 1; /* Permette al label di prendere più spazio rispetto alle immagini */
	  	text-align: center; /* Centra il testo nel label */
		font-size: 1.3rem;
		align-items: center;
		vertical-align: middle;
		text-transform: none !important;
	  	
	}
	
	.datepicker {
		border: none; 
		text-align: center; 
		font-size: 1em;
		font-weight: bold;
	}
	
	
	
	
	/* CSS PER LA BARRA DI NAVIGAZIONE IN BASSO */
	.pulsantiAtletaBottom {
		position: fixed; /* Fixed positioning to stick to the bottom */
		bottom: 0; /* Anchors to the bottom */
		left: 0; /* Aligns to the left side */
		width: 100%; /* Ensures it spans the full width of the screen */
		display: flex; /* Uses flexbox for inline layout */
		justify-content: space-around; /* Distributes space around items */
		align-items: center; /* Centers items vertically */
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds shadow to the top of the navbar */
		z-index: 10000; /* Ensures the navbar is above other content */
	}

	.rowBottom {
		width: 100%; /* Full width to contain the buttons */
		display: flex; /* Uses flexbox for layout */
		justify-content: space-around; /* Evenly distributes buttons with space around */
		/*margin-bottom: -15px;  Optional: space between the rows */
		height: auto;
		background-color: #212121;	
	}

	.clickable-divBottom {
		flex: 1; /* Flex property to allow divs to grow */
		text-align: center; /* Aligns the content of the div to the center */
		width: auto;
		height:80px;
		transition: transform 0.1s ease, background-color 0.1s ease;
    	cursor: pointer;
	}

	.clickable-divBottom img {
		/*width: 80px;  Optional: to ensure they don't get too large on wider screens */
		/*height: auto;  Keeps the image aspect ratio */
		width: auto; 
		height: 80px;
	}
	
	.clickable-divBottom:active {
		transform: scale(0.95); /* Riduce leggermente le dimensioni del pulsante */
		background-color: rgba(0, 0, 0, 0.1); /* Cambia il colore di sfondo */
	}
	
	.rounded-div {
		position: relative; /* Permette il posizionamento assoluto del titolo all'interno */
		border: 1px solid black; /* Spessore e colore del bordo */
		border-radius: 20px; /* Arrotonda gli angoli */
		width: 98%; /* Larghezza del div */
		padding: 20px; /* Spazio tra bordo e contenuto */
		box-sizing: border-box; /* Includi padding e bordo nel calcolo delle dimensioni del div */
	}

	.h1 {
		font-size: 25px
	}
	
	.h2 {
		font-size: 22px
	}
	
	.h3 {
		font-size: 18px
	}

}

.inputCustomTime{
	padding-top: 1px;
	padding-bottom: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	border-radius: 5px;
	border-style: solid 1px;
	font-size: 15px;
	text-align: center;
}

.inputCustomNumber{
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	border-radius: 10px;
	border-style: solid 1px;
	font-size: 0.8em;
	text-align: center;

}

.inputCustomNumber[type="number"]::-webkit-inner-spin-button,
.inputCustomNumber[type="number"]::-webkit-outer-spin-button {
    /*-webkit-appearance: none;*/
    margin: 0;
}

.hidden-checkbox {
	    display: none; /* Nasconde la checkbox */
	}
textarea.styled {
  background-color: white; /* Imposta lo sfondo bianco */
  border: 1px solid #ccc; /* Imposta un bordo sottile grigio chiaro */
  border-radius: 8px; /* Angoli arrotondati */
  padding: 10px; /* Spaziatura interna per il testo */
  font-size: 16px; /* Dimensione del testo */
  color: #333; /* Colore del testo scuro per una migliore leggibilità */
  width: 100%; /* Larghezza completa per adattarsi al contenitore genitore */
  box-sizing: border-box; /* Include padding e bordo nella larghezza e altezza totale */
  resize: vertical; /* Permette all'utente di ridimensionare la textarea solo verticalmente */
}

/* Opzionale: stile per lo stato focus (quando l'utente clicca o tab nella textarea) */
textarea.styled:focus {
  border-color: #66afe9; /* Cambia il colore del bordo quando è in focus */
  outline: none; /* Rimuove l'outline predefinito per focus in alcuni browser */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(102, 175, 233, 0.6); /* Aggiunge un'ombra sottile */
}


.active  {
	background-color: #d5f848; /* Colore di sfondo verde pulsante */
}

.disabled  {
	background-color: 	gray; /* Colore di sfondo verde pulsante */
}


.button-style {
	-webkit-user-select: none;  /* Safari */
  	-moz-user-select: none;     /* Firefox */
  	-ms-user-select: none;      /* IE10+/Edge */
  	user-select: none;          /* Standard */
	display: 			inline-block; /* Permette la definizione di altezza e larghezza */
	background-color: 	#d5f848; /* Colore di sfondo verde pulsante */
	color: 				#020C00; /* Testo bianco */
	padding: 			5px 20px; /* Spaziatura interna: 10px sopra/sotto, 20px destra/sinistra */
	font-size: 			16px; /* Dimensione del testo */
	font-weight: 		500; /* Grassetto */
	border: 			none; /* Nessun bordo */
	border-radius: 		15px; /* Angoli arrotondati */
	cursor: 			pointer; /* Cambia il cursore in un puntatore */
	text-align: 		center; /* Testo centrato */
	text-decoration: 	none; /* Rimuove la sottolineatura del testo */
	transition: 		background-color 0.3s ease-in-out; /* Transizione fluida per hover */
	margin-top: 		5px;
	margin-bottom: 		5px;
	vertical-align: middle;
}

.button-style:hover {
  background-color: #d5f848; /* Colore di sfondo più scuro al passaggio del mouse */
}

.button-style:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Effetto premuto */
}

.button-style-skill {
	display: 			inline-block; /* Permette la definizione di altezza e larghezza */
	background-color: 	#d5f848; /* Colore di sfondo verde pulsante */
	color: 				#020C00; /* Testo bianco */
	padding: 			8px;  /*Spaziatura interna: 10px sopra/sotto, 20px destra/sinistra */
	font-size: 			16px; /* Dimensione del testo */
	font-weight: 		bold; /* Grassetto */
	border: 			none; /* Nessun bordo */
	border-radius: 		10px; /* Angoli arrotondati */
	cursor: 			pointer; /* Cambia il cursore in un puntatore */
	text-align: 		center; /* Testo centrato */
	text-decoration: 	none; /* Rimuove la sottolineatura del testo */
	transition: 		background-color 0.3s ease-in-out; /* Transizione fluida per hover */
	margin: 			5px;
	vertical-align: 	baseline;
	line-height: 		normal;
}


.button-style-skill:hover {
  background-color: #d5f848; /* Colore di sfondo più scuro al passaggio del mouse */
}

.button-style-skill:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Effetto premuto */
}


.button-style-small {
	
	display: 			inline; /* Permette la definizione di altezza e larghezza */
	background-color: 	#d5f848; /* Colore di sfondo verde pulsante */
	color: 				white !important; /* Testo bianco */
	
	font-weight: 		bold; /* Grassetto */
	border: 			none; /* Nessun bordo */
	border-radius: 		5px; /* Angoli arrotondati */
	cursor: 			pointer; /* Cambia il cursore in un puntatore */
	text-align: 		center; /* Testo centrato */
	text-decoration: 	none; /* Rimuove la sottolineatura del testo */
	transition: 		background-color 0.3s ease-in-out; /* Transizione fluida per hover */
/*	margin: 			5px;*/
	padding: 			5px;
}


.button-style-small:hover {
  background-color: #d5f848; /* Colore di sfondo più scuro al passaggio del mouse */
}

.button-style-small:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Effetto premuto */
}



.button-style-smallLogin {
	
	display: 			inline; /* Permette la definizione di altezza e larghezza */
	background-color: 	transparent !important; /* Colore di sfondo verde pulsante */
	color: 				#d5f848 !important; /* Testo bianco */
	text-transform: 	capitalize !important;
/*	font-weight: 		bold;   */
	border: 1px solid #d5f848 !important; /* Bordo verde giallo */
	border-radius: 		5px; /* Angoli arrotondati */
	cursor: 			pointer; /* Cambia il cursore in un puntatore */
	text-align: 		center; /* Testo centrato */
	text-decoration: 	none; /* Rimuove la sottolineatura del testo */
	transition: 		background-color 0.3s ease-in-out; /* Transizione fluida per hover */
/*	margin: 			5px;*/
	padding: 			5px;
	font-size: 			1em;
}


.button-style-smallLogin:hover {
  background-color: #d5f848; /* Colore di sfondo più scuro al passaggio del mouse */
}

.button-style-smallLogin:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Effetto premuto */
}



#rowMassimali{
	font-size: 	20px; /* Dimensione del testo */
}


.tablink {
	background-color: #555;
	color: white;
	padding: 10px 10px;
	border: none;
	cursor: pointer;
	transition: 0.3s;
	display: inline-block;
}

.tablink:hover {
  	background-color: #777;
}




/* Stile per il contenuto nascosto */
.tabcontent {
  display: none;
  padding: 0px;
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  margin: 10px;
  padding: 20px;
  background-color: #f9f9f9;
}

.card-atleta {
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;*/
    overflow: hidden;
    margin: 20px auto;
	width:90%;
	padding: 5px;
}

.card-header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-body {
  margin-bottom: 0px;
}

.card-footer {
  	text-align: right;
  	font-style: italic;
	border-top: 1px solid #eee;
}


/* CSS per gli smile */
.container-wod{
	display: flex;
    flex-direction: column;
}
.custom-select {
    display: flex;
    flex-wrap: nowrap; /* Impedisce il wrapping delle immagini su più righe */
    justify-content: center; /* Centra le immagini lungo l'asse principale */
    align-items: center; /* Centra le immagini lungo l'asse trasversale */
    overflow-x: auto; /* Abilita lo scrolling orizzontale se il contenuto è troppo grande */
}

.custom-select img {
    flex: 0 0 auto; /* Impedisce alle immagini di restringersi o espandersi */
    max-width: 100%; /* Limita la larghezza massima delle immagini al 100% */
    margin: 0 1px; /* Aggiunge uno spazio tra le immagini */
}

.container-select {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.custom-select .selectable {
	cursor: pointer;
	transition: transform 0.2s;
}

.custom-select .selectable:hover {
  	transform: scale(1.1);
}

.custom-select .selected {
 	border: 2px solid darkorange; /* Blu per elemento selezionato */
	background-color: darkorange;
	border-radius: 5px;
}


.selectedDB {
 	border: 0px solid #d5f848; /* Blu per elemento selezionato */
	border-radius: 5px;
	background-color: #212121;
}


.main-custom {
	width: 80%;
   
	padding-left: 10%;
	padding-right: 10%;
}



.select-custom {
	width: 100%; /* Imposta la larghezza del <select> al 100% dello spazio disponibile */
	box-sizing: border-box; /* Assicura che padding e border siano inclusi nella larghezza */
	/*padding: 8px 8px; /* Regola il padding per tentare di centrare il testo verticalmente */
	border: 1px solid #ccc; /* Colore del bordo leggero */
	border-radius: 20px; /* Arrotonda i bordi del <select> */
	height: 40px; /* Imposta un'altezza fissa per il <select> */
}


.div-dettaglioSessione {
	width: 97%; /* Larghezza del div */
	margin: 0 auto; /* Centra il div orizzontalmente */
	border-radius: 10px; /* Angoli arrotondati */
	background-color: rgba(255, 255, 255, 0.9); /* Sfondo bianco con opacità al 90% */
	/* Aggiungi padding, se necessario, per lo spazio interno */
	padding: 10px;
	/* Opzionale: aggiungi una box shadow o altri stili per migliorare l'aspetto */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.div-dettaglioSessione p {
	text-align: left;
	margin-bottom:  2px !important;
	padding: 0 !important;
	line-height: 1.4;
	font-size: 18px;
}

.div-dettaglioSessioneNote {
	width: 97%; /* Larghezza del div */
	margin: 0 auto; /* Centra il div orizzontalmente */
	border-radius: 10px; /* Angoli arrotondati */
	background-color: rgba(255, 255, 255, 0.9); /* Sfondo bianco con opacità al 90% */
	/* Aggiungi padding, se necessario, per lo spazio interno */
	padding: 20px;
	/* Opzionale: aggiungi una box shadow o altri stili per migliorare l'aspetto */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.div-dettaglioSessioneNote p {
	text-align: left;
	margin-bottom:  2px !important;
	padding: 0 !important;
	line-height: 1.2;
	font-size: 14px;
}


.h1-custom {
	color: white;
	text-transform: capitalize !important;
	
}



input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none; /* Nascondi l'icona in WebKit/Blink browsers */
    -webkit-appearance: none;
}

input[type="date"]::-ms-clear {
    display: none; /* Nascondi il pulsante di cancellazione in Internet Explorer */
}



.input-container {
    position: relative;
    /*display: inline-block;*/
}

.input-container .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}




.input-custom {
	-webkit-appearance: none;
  	-moz-appearance: none;
	color: #111111 !important;
  	appearance: none;
    background-color: white !important; /* Colore di sfondo bianco */
    border: 1px solid #ccc; /* Bordo sottile grigio chiaro */
    border-radius: 10px; /* Angoli arrotondati */
	padding-left: 10px !important;
    margin: 10px 0; /* Distanza verticale di 10px dall'elemento precedente e dal successivo */
    width: 100%; /*calc(100% - 22px);  Larghezza completa meno la larghezza del padding e del bordo */
    box-sizing: border-box; /* Assicura che padding e bordo siano inclusi nella larghezza totale */
	font-size: 18px;
	
}

/* Opzionale: Cambia lo stile al focus per migliorare l'accessibilità e l'usabilità */
.input-custom:focus {
    border-color: #d5f848; /* Colore del bordo al focus */
    outline: none; /* Rimuove l'outline di default per focus */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6); /* Aggiunge un leggero effetto di ombra */
}

.input-custom-time {
	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
    background-color: white; /* Colore di sfondo bianco */
    border: 1px solid #ccc; /* Bordo sottile grigio chiaro */
    border-radius: 15px; /* Angoli arrotondati */
	padding-left: 30px;
	margin: 10px 0; /* Distanza verticale di 10px dall'elemento precedente e dal successivo */
    /*width: 100%; calc(100% - 22px);  Larghezza completa meno la larghezza del padding e del bordo */
    box-sizing: border-box; /* Assicura che padding e bordo siano inclusi nella larghezza totale */
	font-size: 20px;

}
/* Opzionale: Cambia lo stile al focus per migliorare l'accessibilità e l'usabilità */
.input-custom-time:focus {
    border-color: #d5f848; /* Colore del bordo al focus */
    outline: none; /* Rimuove l'outline di default per focus */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6); /* Aggiunge un leggero effetto di ombra */
}

.input-custom-larghezza100 {
	-webkit-appearance: none;
  	-moz-appearance: none;
	appearance: none;
    background-color: white; /* Colore di sfondo bianco */
    border: 1px solid #ccc; /* Bordo sottile grigio chiaro */
    border-radius: 10px; /* Angoli arrotondati */
	margin: 10px 0; /* Distanza verticale di 10px dall'elemento precedente e dal successivo */
	padding-left: 10px !important;
	width: 100%; /*calc(100% - 22px);  Larghezza completa meno la larghezza del padding e del bordo */
    box-sizing: border-box; /* Assicura che padding e bordo siano inclusi nella larghezza totale */
	font-size: 18px;
	
}

/* Opzionale: Cambia lo stile al focus per migliorare l'accessibilità e l'usabilità */
.input-custom-larghezza100:focus {
    border-color: #d5f848; /* Colore del bordo al focus */
    outline: none; /* Rimuove l'outline di default per focus */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6); /* Aggiunge un leggero effetto di ombra */
}



.risultatoWod th {
	text-align: center;
}

.risultatoWod td {
	text-align: center;

}


/* CSS per coachProgrammazione.php */
.buttonAdd {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 5px; /* Spazio dal bordo inferiore destro della cella */
	background-image: url("../images/aggiungi.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	width: 25px; /* Larghezza desiderata */
	height: 25px; /* Altezza desiderata */
	border-style: hidden;
	border: 0px;
}

.giorno {
	position: absolute;
	top: 0;
	left: 0;
	margin: 5px; /* Spazio dal bordo superiore sinistro della cella */
}



.customTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Assicura che tutte le celle abbiano la stessa larghezza */
}

.customTable th, .customTable td {
    border: 1px solid #ccc; /* Bordo delle celle */
    text-align: center;
    padding: 8px;
}

.customTable td {
    height: 100px; /* Altezza delle celle. Adegua questo valore in base alle tue esigenze */
    position: relative;
}

.customTable th {
    background-color: #f2f2f2; /* Colore di sfondo per le intestazioni della tabella */
}

/* FINE CSS per coachProgrammazione.php */


/* CSS per la visualizzazione del programma */
.provaCSS p {
		text-align: left;
		margin-bottom:  2px !important;
  		padding: 0 !important;
		line-height: 1.4;
		font-size: 18px;
}



.tabellaLeaderboard {
	animation: fadeIn 0.5s ease-in-out forwards;
	margin-top: 5px;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Assicura che tutte le celle abbiano la stessa larghezza */
}

.tabellaLeaderboard .nome-level {
    width: auto; /* Assegna una larghezza minima per fare in modo che si adatti al contenuto */
    white-space: nowrap; /* Evita che il testo vada a capo */
}

.tabellaLeaderboard .risultato {
    width: auto; /* Permette alla colonna di espandersi in base al contenuto */
}

.tabellaLeaderboard th, 
.tabellaLeaderboard td {
    border: 0px; /* Bordo delle celle */
    text-align: left;
    padding: 5px;
	font-size: 1.1rem;
	font-weight: 500;
}

.tabellaLeaderboard td {
    
    position: relative;
}

.tabellaLeaderboard th {
    background-color: #f2f2f2; /* Colore di sfondo per le intestazioni della tabella */
	font-size: 1rem;
}


/* INIZIO NUOVA  LEADERBOARD */

/* CARD RISULTATO */
.card-risultato {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	margin-bottom: 12px; /* spazio tra le card */
	position: relative;
}

/* FOTO ATLETA */
.foto-atleta {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 12px;
}

/* DATI CENTRALI */
.dati-atleta {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Nome e tempo */
.nome {
	font-weight: bold;
	font-size: 16px;
	line-height: 1.2;
	margin-bottom: 4px;
}

.risultato {
	font-size: 14px;
	color: #555;
	line-height: 1;
}

/* LIVELLO + PUNTEGGIO a destra */
.livello-punteggio {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
}

/* BOX LIVELLO */
.livello {
	font-size: 13px;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 6px;
	color: #fff;
	min-width: 36px;
	text-align: center;
}

/* COLORI PER LIVELLI */
.livello.L1 { background-color: #6c757d; }  /* Grigio */
.livello.L2 { background-color: #28a745; }  /* Verde */
.livello.L3 { background-color: #f0ad4e; }  /* Arancione */
.livello.L4 { background-color: #d9534f; }  /* Rosso */

/* PUNTEGGIO */
.punteggio {
	font-size: 15px;
	font-weight: 700;
	color: #333;
}




/*
.card-containerLeaderboard {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 5px;
}

.card-risultato {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 12px;
	padding: 5px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.foto-atleta {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 12px;
}

.dati-atleta {
	flex: 1;
}

.nome {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 4px;
}

.risultato {
	font-size: 14px;
	color: #333;
	margin-bottom: 4px;
}

.livello {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 6px;
	vertical-align: middleM
}
*/


/* fine LEADERBOARD */


/* simulazione switch per selezione livello sessione */
.switch-containerCustom {
	height: 50px;
	display: flex;
	justify-content: space-around;
	vertical-align: middle;
	border: 1px solid #ccc;
	border-radius: 40px; /* Arrotondamento esterno */
	background-color: #d5f848;
	padding: 0px !important;
	margin: 0px !important;
	overflow: hidden; /* Permette agli elementi figlio di rispettare l'arrotondamento del container */
}

.switch-optionCustom {
	flex: 1; /* Distribuisce lo spazio equamente tra le opzioni */
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	/*transition: background-color 0.3s ease; /* Effetto di transizione per il cambio di colore */
	border-radius: 40px;
	padding: 0px !important;
	margin: 0px !important;
}

.switch-optionCustom.active {
  	background-color: #111111;
  	color: white;
	border-radius: 40px;
}

.selectedDB {
  	background-color: #111111;
  	color: white;
	border-radius: 40px;
}



.label-button {
display: inline-block; /* Posiziona le label una accanto all'altra */
padding: 10px 10px; /* Aggiunge spazio interno per farle apparire come pulsanti */
margin: 5px; /* Aggiunge spazio esterno tra le label */
background-color: #d5f848; /* Colore di sfondo */
color: #212121; /* Colore del testo */
text-align: center; /* Allinea il testo al centro */
border-radius: 5px; /* Bordi arrotondati */
cursor: pointer; /* Cambia il cursore in una mano per indicare che è cliccabile */
text-decoration: none; /* Rimuove il sottolineamento del testo */
}

.label-button.active {
	color: aliceblue;
	background-color: #212121; /* Colore di sfondo */
}

.label-button:hover {
/*background-color: #0056b3;  Colore di sfondo al passaggio del mouse */
}


#mainCustom {
		background-color: rgba(213, 248, 72, 0.6);
		/*background-color: #ffffff;*/
		position: relative;
		margin: 0 auto;
		width: calc(100% - 1rem);
		max-width: 100rem;
		z-index: 2;
	}



.notificheNonLette {
  position: absolute;
  top: -5px; /* Regola questi valori per posizionarlo esattamente dove vuoi */
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 12px;
  display: none; /* Nasconde il cerchietto di default */
}




.notification-icon {
    position: absolute; /* Posizionamento assoluto all'interno del parent relativo */
    top: 10px; /* Spinge leggermente l'icona sopra il bottone per maggiore visibilità */
    right: 10px; /* Distanza dall'angolo destro del bottone per allineare l'icona */
    width: 25px; /* Dimensione dell'icona */
    height: 25px; /* Dimensione dell'icona */
    background-color: transparent; /* Per immagini, lo sfondo può essere trasparente */
    border-radius: 50%; /* Rende l'icona circolare se si decide di non usare un'immagine */
    display: flex; /* Utilizzato per centrare l'immagine all'interno dell'icona */
    justify-content: center; /* Centra orizzontalmente l'immagine all'interno dell'icona */
    align-items: center; /* Centra verticalmente l'immagine all'interno dell'icona */
    z-index: 1010; /* Assicura che l'icona sia sopra gli altri elementi, incluso il navbar */
}

.notification-icon img {
    width: 100%; /* Fa in modo che l'immagine occupi completamente il contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
}

/* modale per impedire la rotazione dello schermo*/
#rotate-device-message {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,1);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 90000;
	font-size: 24px;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}




.date-input-container {
		position: relative;
		display: inline-block;
		text-align: left;
		align-content: left;

	}

.containerData input[type="date"] {
	/*padding-right: 30px;  /*Fai spazio per l'icona */
	cursor: pointer; /* Cambia il cursore in un puntatore */
	opacity: 0; /* Rendi l'input trasparente ma ancora funzionante */
	width: 0px; /*  Adegua a seconda della dimensione dell'icona per coprirlo completamente */
	height: 0px; /* Adegua a seconda della dimensione dell'icona */
}

.date-input-container img {
	position: absolute;
	right: 35PX; /* Posiziona l'icona a destra, all'interno dell'input */
	top: 0; /* Centra verticalmente l'icona */
	cursor: pointer; /* Assicura che il cursore sia un puntatore */
	width: 30px; /* Dimensione dell'icona */
	height: 30px; /* Dimensione dell'icona */
}

/* Stili aggiuntivi per nascondere elementi non desiderati */
.containerData input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0;
}

.containerData input[type="date"]::-webkit-inner-spin-button,
.containerData input[type="date"]::-webkit-clear-button {
	display: none;
}



.top-left-fixed {
    position: fixed; /* Posiziona il div in modo fisso sulla pagina */
    top: 10px; /* Spazio dal bordo superiore */
    left: 20px; /* Spazio dal bordo sinistro */
    width: 50px; /* Larghezza del div */
    height: 50px; /* Altezza del div */
    /*background-color: #f8f9fa;  Colore di sfondo del div 
    border: 1px solid #ccc;  Bordo del div 
    padding: 10px;  Spazio interno del div 
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);  Ombra esterna per un effetto 3D */
  }



table.reset-style, 
table.reset-style th, 
table.reset-style tr, 
table.reset-style td,
table.reset-style tbody tr,
table.reset-style tbody tr:nth-child(2n + 1) {
    background: none;    /* Elimina lo sfondo */
    color: inherit;        /* Imposta il colore del testo a nero, oppure 'inherit' per ereditare dal parent */
    border: none;        /* Elimina i bordi */
    padding: 0;          /* Elimina il padding */
    margin: 0;           /* Elimina i margini */
	border-color: transparent;
}

.sliderInterno {
	position: relative; 
	border-style: none; 
	background-color: #212122; 
	border-radius: 20px; 
	padding-top: 20px; 
	padding-bottom: 20px; 
	overflow: hidden; 
	border-spacing: 0px; 
	line-height: normal; 

}







/* MODALE */
.modal {
	display: none;
	position: fixed;
	/*z-index: 999;*/
	z-index: 1050 !important;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
	padding-top: 60px;
}

.modal-content {
	background-color: #fefefe;
	margin: 5% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}