/* Mijn eigen footer maken */
.custom-footer {
    width: 100%;
    padding: 8px 0 4px 0;
    text-align: center;
    margin: 20px auto 0 auto;
}

/* De inhoud */
.footer-content {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    line-height: 1.4;
    font-family: Arial, sans-serif; /* Voor consistentie */
}

/* eerste regel Bold */
.footer-content div:first-child {
    font-weight: bold;
    margin-bottom: 2px;
}

/* Password reset kleur */
.error p {
    color:#FF0000;
    font-size:20px;
    font-weight:bold;
    margin:50px;
}

/* Voor uren */
/* Basis tabelstijl */
table {
    border-collapse: collapse;
    width: auto;
    table-layout: auto; /* flexibel maken */
}

/* Celopmaak */
table td, table th {
    padding: 2px 4px;
    line-height: 1.0;
    font-size: 0.9em;
    border: 1px solid #ddd;
    white-space: normal; /* tekst mag afbreken */
}

/* Eerste kolom links uitlijnen en bovenaan */
table td:first-child,
table th:first-child {
    min-width: 10px; /* pas aan naar wens */
    text-align: left;
    vertical-align: top;
}

/* Highlight eerste kolom bij hover */
table tr:hover td:first-child {
    background-color: #ffff99; /* lichtgeel */
}

/* Highlight eerste kolom bij focus in input */
table tr:focus-within td:first-child {
    background-color: #ffff99; /* lichtgeel */
}

/* Highlight header van actieve kolom (alleen visueel via JS volledig dynamisch) */
th.highlight {
    background-color: #ffff99;
}

/* Inputvelden in de tabel wat kleiner */
table input[type="text"] {
    height: 20px;
    font-size: 0.9em;
    padding: 0 2px;
}

/* Kleinere knopjes */
.btn-small {
    padding: 2px 6px;
    font-size: 0.8rem;
}

/* Scrollbare wrapper voor tabel */
.table-wrapper {
    max-height: 500px; /* hoogte van de scrollbare zone */
    overflow-y: auto;
    border: 1px solid #ccc;
    display: inline-block; /* past zich aan breedte van tabel aan */
    padding: 0;             /* geen binnenruimte */
    margin: 0;              /* geen buitenruimte */
}

/* Sticky header */
table thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 2px solid #333;
}

/* Suggestie: lichte animatie voor highlight */
table td:first-child,
th.highlight {
    transition: background-color 0.2s ease;
}

#result {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    background: #fff;
    width: 800px;
}

#result div {
    padding: 6px;
    cursor: pointer;
}

#result div:hover {
    background: #f0f0f0;
}

#labelrechts {
    display: inline-block;
    text-align: right;
    margin-right: 2pt ;
}

#inputkees {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.file-error {
    color: red;
    margin-top: 5px;
    display: none;
}

/* de upload knop onzichtbaar maken en pas zichtbaar als bestand is uploaded */
#uploadButton {
    display: none;
}

/* Centrering en knopstijling */
.form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Zorgt dat knoppen niet uitrekken */
.btn-custom {
    padding: 4px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 3px outset #808080 !important;
    width: auto;
}