body {
    font-family: Arial, sans-serif; /* Setează fontul pentru text */
    text-align: center; /* Centrează textul pe orizontală */
    display: flex; /* Folosește layout de tip flexbox */
    flex-direction: column; /* Aliniază elementele pe verticală */
    align-items: center; /* Centrează elementele pe orizontală */
    padding: 30px; /* Adaugă spațiu interior de 30px */
    background-color: #000000; /* Setează culoarea de fundal */
    margin: 0; /* Elimină marginile implicite */
    height: 100%; /* Setează înălțimea body-ului la 100% */
    overflow-y: auto; /* Activează scroll-ul vertical când e necesar */
    flex-wrap: nowrap;
    justify-content: center;

}

body1 {
    font-family: Arial, sans-serif; /* Setează fontul pentru text */
    text-align: center; /* Centrează textul pe orizontală */
    display: flex; /* Folosește layout de tip flexbox */
    flex-direction: column; /* Aliniază elementele pe verticală */
    align-items: center; /* Centrează elementele pe orizontală */
    padding: 30px; /* Adaugă spațiu interior de 30px */
    background-color: #f4f4f4; /* Setează culoarea de fundal #f4f4f4 */
    margin: 0; /* Elimină marginile implicite */
    height: 100%; /* Setează înălțimea body-ului la 100% */
    overflow-y: visible; /* Activează scroll-ul vertical când e necesar */
    justify-content: center;
    flex-wrap: nowrap;

}
#html5-qrcode-button-camera-stop {
    display: none !important;
}

html {
    height: 100%; /* Setează înălțimea documentului HTML la 100% */
}
html1 {
    height: auto; /* Setează înălțimea documentului HTML la 100% */
}

h1, h2 {
    margin-top: 0px; /* Elimină spațiul de sus */
    color: #ffffff; /* Setează culoarea textului 333 */
    margin-bottom: 1px; /* Reduce spațiul de jos între titluri */
}

#qr-code-file-scan {
    display: none; /* Ascunde butonul de încărcare a fișierelor */
}

#qr-reader {
    width: 90%; /* Setează lățimea la 90% din container */
    max-width: 900px; /* Lățime maximă de 500px */
    margin: 0 auto; /* Centrează div-ul pe orizontală */
}

table {
    width: 130%; /* Setează lățimea mesei la 90% din container */
    max-width: 600px; /* Lățime maximă de 600px */
    border-collapse: collapse; /* Elimină spațiile între celule */
    margin-bottom: 0px; /* Adaugă un spațiu de 40px sub tabel */
}

th, td {
    padding: 12px 15px; /* Adaugă spațiu în interiorul celulelor */
    border: 2px solid black; /* Adaugă o bordură neagră de 2px */
    text-align: left; /* Aliniază textul la stânga */
}
thead {
    background-color: #333;
    color: white;
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

tbody tr:hover {
    background-color: #ddd;
}

.btn-submit.disabled {
    background: #ababab; /* Culoare de fundal gri */
    color: #fff; /* Culoare text alb */
    pointer-events: none; /* Dezactivează interacțiunile cu butonul */
}

.hidden {
    display: none; /* Ascunde elementele cu această clasă */
}

.container {
    background-color: white; /* Culoare de fundal albă */
    padding: 0px; /* Adaugă spațiu interior de 20px */
    border-radius: 8px; /* Colțuri rotunjite de 8px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adaugă o umbră subtire */
    text-align: center; /* Centrează textul pe orizontală */
    max-width: 400px; /* Lățime maximă de 400px */
    width: 100%; /* Setează lățimea containerului la 100% */
    margin: auto; /* Adaugă spațiu sus și jos de 20px */
}

button {
    width: 90%; /* Setează lățimea butonului la 90% */
    padding: 20px; /* Adaugă spațiu interior de 20px */
    background-color: #4CAF50; /* Setează o culoare verde de fundal */
    color: white; /* Setează textul alb */
    border: none; /* Elimină bordura */
    border-radius: 4px; /* Colțuri rotunjite de 4px */
    cursor: pointer; /* Setează cursorul ca pointer la hover */
    font-size: 30px; /* Setează dimensiunea fontului la 30px */
    transition: background-color 0.3s; /* Adaugă tranziție la schimbarea culorii fundalului */
    margin: 10px 0; /* Adaugă spațiu sus și jos de 10px */
}

button:hover {
    background-color: #45a049; /* Culoarea de fundal când butonul este apăsat (hover) */
}

button.cancel {
    background-color: #f44336; /* Culoarea de fundal roșie pentru butonul de anulare */
}

button.cancel:hover {
    background-color: #d32f2f; /* Culoarea de fundal mai închisă la hover pentru butonul de anulare */
}

label {
    display: block; /* Afișează etichetele ca blocuri */
    margin-bottom: 8px; /* Adaugă spațiu de 8px sub etichetă */
    color: #555; /* Setează culoarea textului la un gri închis */
    font-size: 1em; /* Setează dimensiunea fontului */
}

input[type="text"], input[type="password"], select {
    width: 90%; /* Setează lățimea la 90% din container */
    padding: 12px; /* Adaugă spațiu interior de 12px */
    margin-bottom: 15px; /* Adaugă spațiu de 15px sub element */
    border: 1px solid #ddd; /* Bordură gri deschisă de 1px */
    border-radius: 4px; /* Colțuri rotunjite de 4px */
    box-sizing: border-box; /* Include padding-ul și bordura în dimensiunile totale */
    font-size: 16px; /* Setează dimensiunea fontului la 16px */
    transition: border-color 0.3s ease; /* Tranziție pentru schimbarea culorii bordurii */
}

select {
    text-align: center; /* Centrează textul în select */
}

.error-message {
    color: red; /* Setează culoarea textului la roșu pentru mesajele de eroare */
    margin-bottom: 15px; /* Adaugă spațiu de 15px sub mesaj */
    font-size: 18px; /* Setează dimensiunea fontului la 18px */
}
span {

    margin-right: auto;
}

p {
    margin: 0 0 1px 0; /* Elimină spațiul de sus și adaugă 1px de spațiu sub paragraf */
}

/* Stiluri pentru mobil */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Reduce padding-ul la 10px pentru ecrane mici */
    }
 body1 {
    font-family: Arial, sans-serif; /* Setează fontul pentru text */
    text-align: center; /* Centrează textul pe orizontală */
    display: flex; /* Folosește layout de tip flexbox */
    flex-direction: column; /* Aliniază elementele pe verticală */
    align-items: center; /* Centrează elementele pe orizontală */
    /*padding: 50px; /* Adaugă spațiu interior de 30px */
    background-color: #f4f4f4; /* Setează culoarea de fundal */
    height:105%;
    /*max-height: 1280px;/* Setează înălțimea body-ului la 100% */
    overflow-y: visible; /* Activează scroll-ul vertical când e necesar */
    justify-content: flex-end;
    }

    #qr-reader {
        width: 95%; /* Setează lățimea la 100% din container pe mobil */
        max-width: 600px; /* Setează lățimea maximă la 450px pe mobil */
    }

    h1, h2 {
        font-size: 1.5em; /* Reduce dimensiunea fontului titlurilor la 1.5em */
        margin-bottom: 5px; /* Adaugă spațiu de 5px sub titluri */
    }

    th, td {
        padding: 10px; /* Reduce padding-ul din celule la 10px pe mobil */
    }

    button {
        padding: 10px; /* Reduce padding-ul butoanelor la 10px pe mobil */
        font-size: 30px; /* Menține dimensiunea fontului la 30px pe mobil */
        margin: 15px 0; /* Menține spațiul de 10px între butoane pe mobil */
    }
}