:root {
    --kolom-breedte: 100px;
}

.table-container {
    padding-right: 0px;
}

.evenementen-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 52px;
    gap: 8px;
}

.evenement-container {
    width: calc(100% - 8px);
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 16px 0px 16px 16px;
    align-items: start;
    }
    
.evenement-informatie { 
    grid-area: 1 / 1 / 3 / 2; 
    align-self: start;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin-right: 16px;
    align-items: start;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.evenement-informatie p {
    margin: 0;
}

.evenement-instructeurs,
.evenement-instructeurs-reserve,
.evenement-doorwissel {
    grid-area: 1 / 2 / 2 / 6;
    min-width: 0;
}

.evenement-instructeurs-reserve,
.evenement-doorwissel {
    grid-area: 2 / 2 / 3 / 6;
}

.table th {
    padding-top: 12px;
}

.table td:last-child {
    padding-bottom: 12px;
}

.evenement-instructeurs-zomerweek,
.evenement-instructeurs-reserve-zomerweek {
    grid-area: 1 / 2 / 2 / 6;
    min-width: 0;
}

.evenement-instructeurs-reserve-zomerweek {
    grid-area: 2 / 2 / 3 / 6;
}

table.evenement-instructeurs th:first-child,
table.evenement-instructeurs td:first-child,
table.evenement-doorwissel th:first-child,
table.evenement-doorwissel td:first-child {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

table.evenement-instructeurs-zomerweek th:first-child,
table.evenement-instructeurs-zomerweek td:first-child,
table.evenement-instructeurs-reserve-zomerweek th:first-child,
table.evenement-instructeurs-reserve-zomerweek td:first-child {
    position: static !important;
    left: auto !important;
    width: var(--kolom-breedte);
    min-width: var(--kolom-breedte);
    max-width: 200px;
}

table.evenement-instructeurs-zomerweek,
table.evenement-instructeurs-reserve-zomerweek {
    margin-left: 8px;
    margin-right: 0px;
    width: auto;
    table-layout: fixed;
    display: block;
    overflow-x: auto;
}

table.evenement-instructeurs-zomerweek thead,
table.evenement-instructeurs-zomerweek tbody,
table.evenement-instructeurs-reserve-zomerweek thead,
table.evenement-instructeurs-reserve-zomerweek tbody {
    display: table;
    width: auto;
}

table.evenement-instructeurs-zomerweek th,
table.evenement-instructeurs-zomerweek td,
table.evenement-instructeurs-reserve-zomerweek th,
table.evenement-instructeurs-reserve-zomerweek td {
    width: var(--kolom-breedte);
    min-width: var(--kolom-breedte);
    max-width: 200px;
    box-sizing: border-box;
}

table.evenement-instructeurs,
table.evenement-instructeurs-reserve,
table.evenement-doorwissel {
    margin-left: 8px;
    margin-right: 0px;
    width: auto;
    table-layout: fixed;
    display: block;
    overflow-x: auto;
}

table.evenement-instructeurs thead,
table.evenement-instructeurs tbody,
table.evenement-instructeurs-reserve thead,
table.evenement-instructeurs-reserve tbody,
table.evenement-doorwissel thead,
table.evenement-doorwissel tbody {
    display: table;
    width: auto;
}

table.evenement-instructeurs th,
table.evenement-instructeurs td,
table.evenement-instructeurs-reserve th,
table.evenement-instructeurs-reserve td,
table.evenement-doorwissel th,
table.evenement-doorwissel td {
    width: var(--kolom-breedte);
    min-width: var(--kolom-breedte);
    max-width: 200px;
    box-sizing: border-box;
}

.informatie-titel {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    color: var(--color-primair);
    grid-column: 1 / -1;
}

.informatie-titel {
    grid-column: 1 / -1;
}

.evenement-dropdown-separator {
    grid-column: 1 / -1;
    position: relative;
    height: 1px;
    background: var(--border-color);
    margin: 4px 0px 4px 8px;
    width: calc(100% - 8px);
    left: -16px;
}

.informatie-row {
    display: contents;
}

.informatie-row-onder {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: 4px;
}

.informatie-row-onder .informatie-label {
    grid-column: auto;
}

.informatie-row-onder .informatie-tekst {
    grid-column: auto;
}

.informatie-label {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--color-primair);
    white-space: nowrap;
    grid-column: 1;
    align-self: start;
}

.informatie-tekst {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-base);
    color: var(--color-primair);
    grid-column: 2;
    min-width: 0;
    word-wrap: break-word;
    white-space: normal;
    align-self: start;
}

.datum-container-zeilschool {
    display: flex;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-zeilschool);
    border-radius: var(--border-radius-small);
}

.datum-tekst-zeilschool {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-small);
    letter-spacing: 0.5px;
}

.datum-container-schoolkamp {
    display: flex;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-schoolkamp);
    border-radius: var(--border-radius-small);
}

.datum-tekst-schoolkamp {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-small);
    letter-spacing: 0.5px;
}

@media screen and (max-width: 1100px) {
    .evenementen-wrapper {
        flex-direction: column;
        margin: 44px 0px 8px 0px;
    }
    .evenement-container {
        margin-left: 4px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 16px;
        gap: 16px;
    }
    .evenement-informatie {
        grid-area: 1 / 1 / 2 / 2;
        grid-template-columns: auto 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .evenement-instructeurs {
        grid-area: 2 / 1 / 3 / 2;
        min-width: 0;
        overflow-x: auto;
    }
    .evenement-instructeurs-reserve {
        grid-area: 3 / 1 / 4 / 2;
        min-width: 0;
        overflow-x: auto;
    }
    .evenement-instructeurs-zomerweek {
        grid-area: 2 / 1 / 3 / 2;
        min-width: 0;
        overflow-x: auto;
    }
    .evenement-instructeurs-reserve-zomerweek {
        grid-area: 3 / 1 / 4 / 2;
        min-width: 0;
        overflow-x: auto;
    }
    .evenement-doorwissel {
        grid-area: 3 / 1 / 4 / 2;
        min-width: 0;
        overflow-x: auto;
    }

    .evenement-dropdown-separator {
        margin: 4px 0px;
        width: 100%;
        left: 0;
    }

    .table th {
        margin-top: 0px;
        padding-top: 12px;
    }
    
    .table td:last-child {
        padding-bottom: 12px;
    }
    
    table.evenement-instructeurs,
    table.evenement-instructeurs-reserve,
    table.evenement-doorwissel {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        width: auto;
        table-layout: fixed;
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    table.evenement-instructeurs thead,
    table.evenement-instructeurs tbody,
    table.evenement-instructeurs-reserve thead,
    table.evenement-instructeurs-reserve tbody,
    table.evenement-doorwissel thead,
    table.evenement-doorwissel tbody {
        display: table;
        width: 100%;
    }
    
    table.evenement-instructeurs th,
    table.evenement-instructeurs td,
    table.evenement-instructeurs-reserve th,
    table.evenement-instructeurs-reserve td,
    table.evenement-doorwissel th,
    table.evenement-doorwissel td {
        width: var(--kolom-breedte);
        min-width: var(--kolom-breedte);
        max-width: 200px;
        box-sizing: border-box;
    }

    table.evenement-instructeurs-zomerweek,
    table.evenement-instructeurs-reserve-zomerweek {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        width: auto;
        table-layout: fixed;
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    table.evenement-instructeurs-zomerweek thead,
    table.evenement-instructeurs-zomerweek tbody,
    table.evenement-instructeurs-reserve-zomerweek thead,
    table.evenement-instructeurs-reserve-zomerweek tbody {
        display: table;
        width: 100%;
    }
    
    table.evenement-instructeurs-zomerweek th,
    table.evenement-instructeurs-zomerweek td,
    table.evenement-instructeurs-reserve-zomerweek th,
    table.evenement-instructeurs-reserve-zomerweek td {
        width: var(--kolom-breedte);
        min-width: var(--kolom-breedte);
        max-width: 200px;
        box-sizing: border-box;
    }

    .datum-container-zeilschool {
        margin-left: 0px;
    }

    .datum-container-schoolkamp {
        margin-left: 0px;
    }
}