.deelopdracht-dsx-bronbewijs { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 12px; border-bottom: 1px solid #9fb5a8; background: #edf7f1; }
.deelopdracht-dsx-bronbewijs > div { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.deelopdracht-dsx-bronbewijs small { color: #0b5a28; font-size: 10px; font-weight: 700; }
.deelopdracht-dsx-bronbewijs strong { white-space: nowrap; }
.deelopdracht-dsx-bronbewijs span { overflow: hidden; color: #4e4e4e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.deelopdracht-dsx-bronfout { margin: 0; color: var(--fout); font-size: 11px; font-weight: 650; }

fluent-dialog.dialoog:has(.dsx-opname-dialoog)::part(control) {
    width: min(720px, calc(100vw - 32px)) !important;
}

.dsx-opname-velden { display: grid; gap: 14px; margin-top: 20px; }
.dsx-opname-velden label { min-width: 0; }
.dsx-opname-velden select,
.dsx-opname-velden input { width: 100%; }
.dsx-opname-leeg,
.dsx-opname-fout { display: grid; gap: 4px; margin: 20px 0 0; padding: 12px 14px; border-left: 3px solid #8a1c12; background: #fdf3f4; line-height: 1.45; }
.dsx-opname-leeg { border-left-color: #8a6d1d; background: #fff9e8; }
.dsx-opname-bezig { margin: 18px 0 0; color: var(--subtiel); }
.dsx-opname-voorbeeld { margin-top: 20px; }
.dsx-opname-voorbeeld h3 { margin: 0; color: #0b5a28; font-size: 15px; }
.dsx-opname-regels { display: grid; margin-top: 12px; border: 1px solid var(--lijn); }
.dsx-opname-regels > div { display: grid; grid-template-columns: 82px minmax(0,1fr) 110px; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--lijn); }
.dsx-opname-regels > div strong { color: #0b5a28; font-family: "Cascadia Mono",Consolas,monospace; }
.dsx-opname-regels > div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsx-opname-regels > div span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.dsx-opname-regels > small { padding: 8px 10px; color: var(--subtiel); }

@media (max-width: 599px) {
    .deelopdracht-dsx-bronbewijs { align-items: stretch; }
    .deelopdracht-dsx-bronbewijs > div { display: grid; flex: 1 1 auto; gap: 2px; }
    .deelopdracht-dsx-bronbewijs > div span:nth-of-type(n+2) { display: none; }
    .dsx-opname-regels > div { grid-template-columns: 70px minmax(0,1fr); }
    .dsx-opname-regels > div span:last-child { display: none; }
}