.helpdesk-organisatiewachtrij {
    margin: 20px 0 4px;
    border-top: 2px solid var(--primair);
    border-bottom: 1px solid var(--lijn);
    padding: 16px 0 20px;
}
.helpdesk-organisatiewachtrij > header,
.helpdesk-organisatieformulier > header,
.helpdesk-beoordelingspaneel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.helpdesk-organisatiewachtrij h3,
.helpdesk-organisatiewachtrij p,
.helpdesk-organisatieformulier h3,
.helpdesk-organisatieformulier p,
.helpdesk-beoordelingspaneel h4,
.helpdesk-beoordelingspaneel p { margin: 0 0 4px; }
.helpdesk-organisatiewachtrij > header p,
.helpdesk-organisatiewachtrij > header > span,
.helpdesk-organisatieformulier header span,
.organisatie-helpdeskverzoeken > p { color: var(--subtiel); }
.helpdesk-organisatieformulier header span { display: block; margin-top: 3px; }
.helpdesk-organisatiefilters {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 170px 190px auto;
    align-items: end;
    gap: 10px;
    margin: 14px 0;
}
.helpdesk-organisatieformulier,
.helpdesk-beoordelingspaneel {
    margin: 14px 0;
    border: 1px solid var(--lijn);
    border-left: 3px solid var(--primair);
    padding: 14px 16px;
    background: #f7faf8;
}
.helpdesk-organisatievelden {
    display: grid;
    grid-template-columns: minmax(210px, .7fr) minmax(210px, .7fr) minmax(300px, 1.4fr);
    align-items: end;
    gap: 12px;
    margin-top: 12px;
}
.helpdesk-organisatiereden textarea,
.helpdesk-beoordelingspaneel textarea { min-height: 70px; resize: vertical; }
.helpdesk-organisatieformulier > footer,
.helpdesk-beoordelingspaneel > footer,
.helpdesk-organisatiepaginering {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.helpdesk-organisatieformulier > footer > span { max-width: 680px; color: var(--subtiel); font-size: 12px; }
.helpdesk-organisatiepaginering > div,
.helpdesk-beoordelingspaneel > footer { display: flex; gap: 8px; }
.helpdesk-organisatietabel,
.helpdesk-beoordelingstabel { overflow-x: auto; border-top: 1px solid #a19f9d; }
.helpdesk-organisatietabel table,
.helpdesk-beoordelingstabel table { width: 100%; border-collapse: collapse; }
.helpdesk-organisatietabel th,
.helpdesk-organisatietabel td,
.helpdesk-beoordelingstabel th,
.helpdesk-beoordelingstabel td {
    border-right: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
    padding: 9px 10px;
    text-align: left;
    vertical-align: top;
}
.helpdesk-organisatietabel th:last-child,
.helpdesk-organisatietabel td:last-child,
.helpdesk-beoordelingstabel th:last-child,
.helpdesk-beoordelingstabel td:last-child { border-right: 0; }
.helpdesk-organisatietabel th,
.helpdesk-beoordelingstabel th { background: #f3f2f1; font-size: 12px; }
.helpdesk-organisatietabel td strong,
.helpdesk-organisatietabel td small,
.helpdesk-beoordelingstabel td strong,
.helpdesk-beoordelingstabel td small { display: block; overflow-wrap: anywhere; }
.helpdesk-organisatietabel td small,
.helpdesk-beoordelingstabel td small { margin-top: 3px; color: var(--subtiel); }
.helpdesk-beoordelingspaneel dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 0;
    border-block: 1px solid var(--lijn);
}
.helpdesk-beoordelingspaneel dl > div { padding: 9px 10px; border-right: 1px solid var(--lijn); }
.helpdesk-beoordelingspaneel dl > div:last-child { border-right: 0; }
.helpdesk-beoordelingspaneel dt { color: var(--subtiel); font-size: 12px; }
.helpdesk-beoordelingspaneel dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.helpdesk-uitnodigingsbewijs { margin: 12px 0; border-left: 3px solid #107c10; padding: 12px 14px; background: #f1faf1; }
.helpdesk-uitnodigingsbewijs header h4,
.helpdesk-uitnodigingsbewijs header p { margin: 0 0 4px; }
.helpdesk-uitnodigingsbewijs > div { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.helpdesk-uitnodigingsbewijs code { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.helpdesk-organisatiefout { margin: 10px 0 0; }

@media (max-width: 900px) {
    .helpdesk-organisatiefilters,
    .helpdesk-organisatievelden { grid-template-columns: 1fr; }
    .helpdesk-organisatietabel,
    .helpdesk-beoordelingstabel { overflow: visible; border: 0; }
    .helpdesk-organisatietabel table,
    .helpdesk-organisatietabel thead,
    .helpdesk-organisatietabel tbody,
    .helpdesk-organisatietabel tr,
    .helpdesk-organisatietabel th,
    .helpdesk-organisatietabel td,
    .helpdesk-beoordelingstabel table,
    .helpdesk-beoordelingstabel thead,
    .helpdesk-beoordelingstabel tbody,
    .helpdesk-beoordelingstabel tr,
    .helpdesk-beoordelingstabel th,
    .helpdesk-beoordelingstabel td { display: block; min-width: 0; }
    .helpdesk-organisatietabel thead,
    .helpdesk-beoordelingstabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .helpdesk-organisatietabel tr,
    .helpdesk-beoordelingstabel tr { margin-bottom: 10px; border: 1px solid var(--lijn); padding: 9px 11px; }
    .helpdesk-organisatietabel td,
    .helpdesk-beoordelingstabel td { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 8px; border: 0; padding: 5px 0; }
    .helpdesk-organisatietabel td::before,
    .helpdesk-beoordelingstabel td::before { content: attr(data-label); color: var(--subtiel); font-size: 12px; font-weight: 650; }
    .helpdesk-beoordelingspaneel dl { grid-template-columns: 1fr; }
    .helpdesk-beoordelingspaneel dl > div { border-right: 0; border-bottom: 1px solid var(--lijn); }
    .helpdesk-beoordelingspaneel dl > div:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
    .helpdesk-organisatiewachtrij > header,
    .helpdesk-organisatieformulier > header,
    .helpdesk-beoordelingspaneel > header,
    .helpdesk-organisatieformulier > footer,
    .helpdesk-beoordelingspaneel > footer,
    .helpdesk-organisatiepaginering,
    .helpdesk-uitnodigingsbewijs > div { align-items: stretch; flex-direction: column; }
    .helpdesk-organisatieformulier,
    .helpdesk-beoordelingspaneel { padding: 12px; }
    .helpdesk-organisatieformulier button,
    .helpdesk-beoordelingspaneel button,
    .helpdesk-organisatiefilters button { width: 100%; }
}
