/* Impostazioni di base per la pagina */

body {

    font-family: Arial, sans-serif;

    background-image: url("../ACCESSORI/sfondo_login.jpg"); /* Sostituisci con il tuo URL dell'immagine */

    background-size: cover; /* L'immagine copre l'intera pagina */

    background-position: center; /* Centra l'immagine */

    display: flex;

    justify-content: center; /* Centra orizzontalmente */

    align-items: center; /* Centra verticalmente */

    height: 100vh; /* Altezza della pagina */

    margin: 0;

}



/* Contenitore principale che racchiude tutto il contenuto della pagina (incluso il titolo, il modulo, ecc.) */

body > * {

    background-color: rgba(255, 255, 255, 0.8); /* Sfondo bianco semi-trasparente */

    padding: 30px;

    border-radius: 10px; /* Angoli arrotondati */

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombra per creare profondità */

    width: 350px; /* Larghezza del contenitore principale */

    text-align: center; /* Centra il contenuto all'interno */

}



/* Blocca di login con sfondo bianco */

.login-box {

    background-color: #fff; /* Colore di sfondo del blocco di login */

    padding: 20px;

    border-radius: 8px; /* Angoli arrotondati */

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombra per il blocco */

    width: 100%; /* Larghezza piena all'interno del contenitore */

}



/* Titolo del blocco di login */

h2 {

    margin-bottom: 20px; /* Spazio sotto il titolo */

}



/* Gruppo di ogni campo del modulo */

.form-group {

    margin-bottom: 15px; /* Spazio tra i campi del modulo */

}



/* Etichette dei campi */

label {

    display: block; /* Fa sì che l'etichetta occupi tutta la larghezza */

    margin-bottom: 5px; /* Spazio sotto l'etichetta */

}



/* Stile dei campi di input */

input {

    width: 100%; /* Campo di input a larghezza piena */

    padding: 10px; /* Spazio interno */

    border: 1px solid #ccc; /* Bordo del campo di input */

    border-radius: 4px; /* Angoli arrotondati per il campo di input */

    box-sizing: border-box; /* Per includere il padding nel calcolo della larghezza */

}



/* Pulsante di login */

button {

    width: 100%; /* Pulsante a larghezza piena */

    padding: 10px; /* Spazio interno */

    background-color: #28a745; /* Colore di sfondo del pulsante */

    color: white; /* Colore del testo */

    border: none; /* Rimuove il bordo */

    border-radius: 4px; /* Angoli arrotondati per il pulsante */

    cursor: pointer; /* Cambia il cursore quando si passa sopra */

}



/* Cambia colore del pulsante al passaggio del mouse */

button:hover {

    background-color: #218838; /* Colore di sfondo al passaggio del mouse */

}