/* Styles généraux pour le tableau */
table {
    width: 100%; /* Prend toute la largeur disponible */
    border-collapse: collapse; /* Fusionne les bordures */
    font-size: 20px; /* Taille de police */
    margin: 20px 0; /* Marges autour du tableau */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre portée pour le tableau */
    border-radius: 8px; /* Coins arrondis */
    overflow: hidden; /* Pour masquer les coins arrondis */
}

/* Styles pour les cellules */
td {
    border: 1px solid #ddd; /* Bordure légère */
    padding: 5px; /* Padding à l'intérieur des cellules */
    text-align: left; /* Alignement du texte à gauche */
    background-color: #ffffff; /* Couleur de fond des cellules */
    transition: background-color 0.3s; /* Animation pour le changement de couleur */
}

/* Styles pour l'en-tête du tableau */
thead {
    background-color: #4CAF50; /* Couleur de fond pour l'en-tête */
    color: white; /* Couleur du texte */
}

thead th {
    padding: 15px; /* Padding pour les en-têtes */
    text-align: left; /* Alignement à gauche */
}

/* Changement de couleur au survol des lignes */
tbody tr:hover {
    background-color: #f9f9f9; /* Couleur de fond au survol des lignes */
}

/* Styles pour les lignes impaires */
tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Couleur de fond pour les lignes impaires */
}

/* Styles pour les paragraphes */
p {
    font-size: 20px; /* Taille de police pour les paragraphes */
    margin: 20px 0; /* Marges autour des paragraphes */
}

/* Responsive design pour les petits écrans */
@media screen and (max-width: 600px) {
    table {
        font-size: 20px; /* Ajuster la taille de la police pour les petits écrans */
    }
}

/* Responsive design pour les écrans plus grands */
@media screen and (min-width: 601px) {
    table {
        font-size: 20px; /* Taille de police par défaut pour les écrans plus grands */
    }
}

.form-container {
    display: flex;
    flex-direction: row; /* Met les éléments en colonne pour les empiler */
    gap: 10px; /* Ajoute un espace entre l'input et le bouton */
    align-items: center; /* Aligne les éléments verticalement */
    width: 100%; /* Assure que le conteneur prend toute la largeur */
    box-sizing: border-box;
}

/* Formulaire et bouton qui doivent avoir la même largeur */
.form-element {
    font-size: 20px;
    padding: 10px;
    height: 100%;
}

#barcodeInput {
    flex: 1; /* L'input prend tout l'espace disponible */
    width: 0; /* Pour éviter les conflits de largeur */
}

/* Styles pour le bouton */
#openCameraButton {
    font-size: 20px;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#openCameraButton:hover {
    background-color: #0056b3;
}

#video {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 10px;
        }
        #result {
            font-size: 1.5em;
            color: green;
        }
        #debug {
            font-size: 1em;
            color: blue;
            white-space: pre-wrap;
        }
        #cameraSelectMenu {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            border-radius: 5px;
            z-index: 1000;
        }
        #cameraSelectMenu button {
            margin: 5px;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #cameraSelectMenu button:hover {
            background-color: #0056b3;
        }