body {
            font-family: 'Roboto', sans-serif; 
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .time-picker {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 300px;
            margin: 0 auto;
        }
        .time-input {
            display: flex;
            flex-direction: column;
        }
        label {
            font-size: 1.2em;
            margin-bottom: 5px;
            color: #333;
        }
        input[type="time"] {
            font-size: 1.2em;
            padding: 10px;
            border: 2px solid #007bff;
            
            background-color: #ffffff;
            color: #333;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
        input[type="time"]::-webkit-calendar-picker-indicator {
            font-size: 1.2em;
            cursor: pointer;
        }
		
		
	#tasto {
		background-color: #535353; 
		color: white;              
		padding: 15px 32px;   
		
		text-align: center;        
		text-decoration: none;     
		display: inline-block;     
		font-size: 16px;           
		border: none;              
		cursor: pointer;           
		transition: background-color 0.3s ease, transform 0.2s ease;
	}


	#tasto:hover {
		background-color: #e65b52; 
		transform: translateY(-2px);   
	}

	#tasto p {
		font-family: 'Roboto', sans-serif; 
		font-size: 16px;                   
		font-weight: 500;                  
		margin: 0;                        
		padding: 0;    
		color: #f4f4f4;
	}
	
	/*#toggle-months {
        margin-bottom: 20px;
        padding: 10px 20px;
        background-color: #ff6f613;
        color: white;
        border: none;
        
        cursor: pointer;
        
        transition: background-color 0.3s ease;
    }*/

    #toggle-months:hover {
        background-color: #ff6f61;
    }
	

.month-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px;
    background-color: #fff;
    margin-top:-40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: none;
    font-size: 18px;
    
}


	
	button {
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        
        margin-top:-10px;
        background-color: #f0f0f0;
        color: #333;
        transition: background-color 0.3s ease, transform 0.2s ease;
		border: 2px solid #007bff;
       
        width: 100%;
    }

    button.selected {
        background-color: #007bff;
        color: white;
        transform: translateY(-3px);
    }

    button:hover {
            background-color: #007bff;
            transform: translateY(-2px);
			color:white;
        }

    button.selected:hover {
        background-color: #007bff;
        }


    #toggle-months {
        margin-bottom: 20px;
        padding: 10px 20px;
        background-color: #007bff;
        color: #333;
        border: 2px solid #007bff;
        cursor: pointer;
        
        transition: background-color 0.3s ease;
    }

    #toggle-months:hover {
        background-color: #007bffb8;
		color:white;
    }
	
#myDiv {
    width: 100px; /* Larghezza del div */
    height: 100px; /* Altezza del div */
    background-image: url('../on-off.png'); /* Percorso relativo all'immagine */
    background-size: 200% 100%; /* Adatta l'immagine per coprire entrambe le sezioni */
    background-position: 0 0; /* Mostra lo stato "spento" */
    transition: background-position 0s ease; /* Transizione fluida dello sfondo */
    text-align: center; /* Centra il testo */
    line-height: 100px; /* Allinea verticalmente il testo */
    color: white; /* Colore del testo per la leggibilità */
    font-weight: bold;
	margin:auto;
}


.numeroMese{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	float: left;
	border: 2px solid #007bff;
	background-color: white;
	margin-right: 2px;
	color: #333;
	padding: 3px;
	font-weight: bold;
	font-size: 10px;
	text-align: center;
}

.pippo{
	background-color:#007bff;
	color:white;
	padding:3px;
	border: 2px solid #007bff;
}

#stop{
	background-color:white;
	color: #b7b6b6;
	padding: 5px;
	border: 2px solid #007bff;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	}
    #stop:hover {
        background-color: #007bff; /* Cambia lo sfondo quando ci passi sopra */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra */
		transform: translateY(-2px);
    }
	#numeri{
		margin-bottom:10px;
	}
	.active{
		background-color: #007bff;
		
	}
	#AVVISO{
		 
  margin-bottom: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #333;
  border: 2px solid #007bff;
  cursor: pointer;
  transition: background-color 0.3s ease;

	}