.extra-werk-paneel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.extra-werk-paneel > header span {
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #b8b8b8;
    border-radius: 50%;
    color: #424242;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
}

.extra-werk-status {
    display: inline-flex;
    margin-bottom: 8px;
    border: 1px solid #a6d5ed;
    border-radius: 3px;
    padding: 3px 6px;
    color: #075985;
    background: #e6f4fb;
    font-size: 10px;
    font-weight: 700;
}

.extra-werk-status.goedgekeurd { color: #0b5a28; border-color: #a7d8b9; background: #dff6dd; }
.extra-werk-status.afgewezen { color: #8a1c12; border-color: #e8aaa4; background: #fde7e9; }
.extra-werk-titel { display: block; margin-bottom: 8px; line-height: 1.4; }
.extra-werk-paneel dl { margin: 0; }
.extra-werk-paneel dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; }
.extra-werk-paneel dt,
.extra-werk-paneel dd { margin: 0; }
.extra-werk-paneel dt { color: var(--subtiel); font-size: 11px; }
.extra-werk-paneel dd { font-variant-numeric: tabular-nums; text-align: right; }
.extra-werk-beoordelen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; border-top: 1px solid var(--lijn); padding-top: 10px; }

.deelopdracht-raster-rij.extra-wacht { box-shadow: inset 3px 0 #0f6cbd; background: #f4f9fd; }
.deelopdracht-raster-rij.extra-afgewezen { color: #707070; background: #fafafa; }
.deelopdracht-raster-rij.extra-afgewezen .deelopdracht-cel:not(.postnummer) { text-decoration-color: #9a9a9a; }
.deelopdracht-cel.bron.toegevoegd { color: #075985; font-weight: 650; }

.extra-werk-dialoog > header p {
    margin: 8px 0 0;
    color: #525252;
    font-size: 14px;
    line-height: 1.5;
}

.extra-werk-formulier { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px 12px; margin-top: 20px; }
.extra-werk-veld { display: grid; min-width: 0; align-content: start; gap: 4px; }
.extra-werk-veld > span { color: #424242; font-size: 12px; font-weight: 650; }
.extra-werk-veld input,
.extra-werk-veld select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #8a8a8a;
    border-radius: 3px;
    padding: 5px 8px;
    color: #242424;
    background: #fff;
}

.extra-werk-veld input:focus,
.extra-werk-veld select:focus { border-color: #0f6cbd; box-shadow: inset 0 -2px #0f6cbd; outline: 0; }
.extra-werk-veld > small { min-height: 15px; color: #616161; font-size: 10px; line-height: 1.4; }
.extra-werk-veld.ongeldig input,
.extra-werk-veld.ongeldig select { border-color: #c42b1c; background: #fff8f8; }
.extra-werk-veld.ongeldig > small { color: #a4262c; font-weight: 650; }
.extra-werk-formulier > .extra-werk-veld:nth-child(2) { grid-column: 2; }

.extra-werk-formulier fieldset { grid-column: 1 / -1; margin: 0; border: 1px solid #d6d6d6; border-radius: 4px; padding: 10px 12px 12px; }
.extra-werk-formulier legend { padding: 0 5px; font-size: 12px; font-weight: 700; }
.extra-werk-formulier fieldset > p { margin: 0 0 9px; color: #616161; font-size: 11px; }
.extra-werk-formulier fieldset > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.extra-werk-formulier output { display: block; margin-top: 8px; color: #0b5a28; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; font-weight: 700; }
.extra-werk-bedragen { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.extra-werk-formulier > .extra-werk-veld:last-child { grid-column: 1 / -1; }
.dialoog-melding.waarschuwing { border-left-color: #d13438 !important; background: #fff4f4 !important; }

@media (max-width: 599px) {
    .extra-werk-formulier { grid-template-columns: 1fr; }
    .extra-werk-formulier > .extra-werk-veld:nth-child(2),
    .extra-werk-formulier fieldset,
    .extra-werk-bedragen,
    .extra-werk-formulier > .extra-werk-veld:last-child { grid-column: 1; }
    .extra-werk-formulier fieldset > div,
    .extra-werk-bedragen { grid-template-columns: 1fr; }
    .deelopdracht-mobiele-rij.extra-wacht { box-shadow: inset 3px 0 #0f6cbd; background: #f4f9fd; }
    .deelopdracht-mobiele-rij.extra-afgewezen { color: #707070; background: #fafafa; }
}