body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }


        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 400px;
            margin: 0 auto;
            padding: 0 20px;
            height: 60px; /* Fissa un'altezza per l'header */
        }


        header {
            background-color: #333;
            color: #ffffff;
            padding: 10px 0;
            text-align: center;
        }

        header img {
            max-width: 100%;
            height: auto;
        }

        header h1 {
            margin: 0;
            font-size: 2em;
        }

        .header {
           
            background-color: #f3f3f3; /* Scegli un colore di sfondo che preferisci */
        }

        .header img {
            width: 100px; /* o qualsiasi dimensione desideri per il tuo logo */
        }

        .header button {
            padding: 10px;
            cursor: pointer;
        }

        .container {
            max-width: 400px; /* Una larghezza massima comune per i contenuti responsivi */
            margin: 30px auto; /* Centra il contenitore */
            padding: 0 20px;
        }

        input[type="text"],
        input[type="password"],
        button {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px; /* Distanza tra input e bottone */
            border-radius: 5px;
            border: 1px solid #ddd;
            box-sizing: border-box; /* Assicurati che padding e bordi non aumentino la larghezza degli elementi */
        }

        button {
            background-color: #333;
            color: #ffffff;
            cursor: pointer;
            border: none;
        }

        button:hover {
            background-color: #555;
        }

        button.secondary {
            background-color: #BBB;
            color: #333;
            cursor: pointer;
            border: none;
        }

        button[disabled] {
            background-color: #cccccc; /* Un colore di sfondo grigio per il bottone disabilitato */
            cursor: not-allowed; /* Cambia il cursore per mostrare che non è possibile fare clic */
        }
        
        #status {
            margin: 20px auto;
            padding: 10px;
            border-radius: 5px;
            color: #008000; /* Colore verde per i messaggi OK */
            text-align: center;
        }

        #error-status {
            margin: 20px auto;
            padding: 10px;
            border-radius: 5px;
            color: #dc143c; /* Colore rosso per i messaggi di errore */
            text-align: center;
        }

        /* Media query per schermi di dimensioni inferiori a 600px */
        @media only screen and (max-width: 600px) {
            header h1 {
                font-size: 1.5em; /* Riduci la dimensione del testo del titolo per schermi piccoli */
            }

            .container {
                padding: 0 10px; /* Riduci il padding del contenitore per schermi più piccoli */
            }
        }

        /* Stile del Modale (background nero con opacità) */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
            animation-name: fadeIn;
            animation-duration: 0.5s;
        }

        /* Contenuto del Modale */
        .modal-content {
            position: fixed;  /* Usa fixed invece di absolute */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); 
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            width: 50%; 
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            animation-name: modalOpen;
            animation-duration: 0.4s;
        }

        /* Riduci la dimensione del font all'interno del modale */
        .modal-content h2, .modal-content label, .modal-content input, .modal-content button {
            font-size: 0.9em; /* Riduci le dimensioni del font al 90% delle dimensioni originali */
        }

       .close {
            color: #aaa;  /* Assicurati che il colore di base sia visibile */
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;  /* Cambia colore quando il mouse è sopra */
            text-decoration: none;
            cursor: pointer;
        }
        /* Animazioni */
        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }

        @keyframes modalOpen {
            from {top: -300px; opacity: 0}
            to {top: 50%; opacity: 1}
        }

        p {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;  /* Uno sfondo leggermente grigio */
            margin-bottom: 15px;       /* Spazio tra il paragrafo e il primo pulsante */
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Un leggero effetto ombra */
            text-align: center;
            color: #333;
            font-size: small;

        }

        #device-serial {
            font-weight: bold;
            color: #333;
        }

        .modal-content button {
            width: 50%;        /* puoi modificare questa percentuale come preferisci */
            margin: 0 auto;    /* centra il pulsante orizzontalmente */
            display: block;    /* rende il pulsante un blocco, necessario per la centratura con 'margin' */
        }

        #device-status {
            font-weight: bold;
        }

        label {
            display: block;
            color: #777;
        }

        #configuration-error, #status-error, #reset-error {
            color:red;
            text-align: center;
        }

        #reset-statur {
            text-align: center;
        }

        #configuration-status {
            color:#333;
            text-align: center;
        }

        .progress-bar {
            width: 100%;
            background-color: #e0e0e0; /* Grigio chiaro come sfondo */
            border-radius: 4px;
            height: 30px; /* Personalizza in base alle tue esigenze */
            position: relative;
            display:none;
        }

        .progress {
            height: 100%;
            width: 0; /* Inizialmente a 0% */
            background-color: #4caf50; /* Colore di avanzamento, ad esempio verde */
            border-radius: 4px; /* Angoli arrotondati per la barra di avanzamento */
            transition: width 0.4s ease; /* Transizione fluida quando la barra cresce */
        }

        .logout-link {
            color: #ffffff; /* Colore bianco per il testo del logout */
            text-decoration: none; /* Rimuove il sottolineamento del link */
            cursor: pointer; /* Cambia l'aspetto del cursore al passaggio del mouse */
            padding: 3px 8px; /* Aggiungi un po' di spazio attorno al link per renderlo più facile da cliccare */
        }

        .logout-link:hover {
            text-decoration: underline; /* Sottolinea il link al passaggio del mouse per indicare che è cliccabile */
        }

        label {
            margin-bottom:10px;
            margin-top:20px;
        }

        .connected{
            color: #008000;
        }

        .connecting{
            color: goldenrod;
        }

        .not-connected{
            color: darkgray;
        }


        #connecting-device-mac{
            font-weight: bolder;
        }

        footer {
            text-align: center;
            padding: 20px 0;
            color: #bbb;
            font-size: smaller;
            font-weight: 200;
        }