@media (min-width: 1300px) {
    .page-overview .container,
    .page-overview .container-sm,
    .page-overview .container-md,
    .page-overview .container-lg,
    .page-overview .container-xl {
        max-width: 100vw;
    }
}

#planningOverviewContainer {
    width: 100%;
}

#planningOverviewGrid .planning-overview-header-row {
    font-weight: 600;
    background-color: #fff3bf;
}

#planningOverviewGrid .dx-group-row td {
    font-size: 1rem;
    font-weight: 600;
}

#planningOverviewGrid .planning-overview-week-row td {
    background-color: #c9a227;
}

#planningOverviewGrid .planning-overview-day-row td {
    background-color: #ffe066;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td {
    white-space: pre-line;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.col-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.appointmentSelected > td {
    border-top: 3px solid #000 !important;
    border-bottom: 3px solid #000 !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.appointmentSelected > td:first-child {
    border-left: 3px solid #000 !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.appointmentSelected > td:last-child {
    border-right: 3px solid #000 !important;
}

.planning-overview-note-cell {
    text-align: left !important;
}

/* Blauwe range-selectie in planningoverzicht (alleen datumrijen) */
#planningOverviewGrid tr.planning-overview-day-row.planning-overview-range-selected > td {
    background-color: #cfe2ff !important;
}

#planningOverviewGrid tr.planning-overview-day-row.planning-overview-range-selected.appointmentSelected > td {
    background-color: #b6d4fe !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-blue,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-blue {
    background-color: rgb(108,177,231) !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-lightgreen,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-lightgreen {
    background-color: #90EE90 !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-green,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-green {
    background-color: #008000 !important;
    color: #fff !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-orange,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-orange {
    background-color: #ffc107 !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-purple,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-purple {
    background-color: #9370DB !important;
    color: #fff !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-red,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-red {
    background-color: #dc3545 !important;
    color: #fff !important;
}

#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row td.planning-status-color-steel,
#planningOverviewGrid .dx-datagrid-rowsview .dx-data-row.dx-row-alt > td.planning-status-color-steel {
    background-color: #71797E !important;
    color: #fff !important;
}