@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;
    }
}

/* The container flexes inside #mainContent (like #schedulerContainer does), so the grid always ends
   exactly at the bottom of the viewport. With a fixed grid height (the old calc(100vh - 210px)) the
   grid stuck out below the viewport whenever the ribbon above it was taller than assumed, and the
   grid's horizontal scrollbar (an overlay at the very bottom of the grid) fell out of sight. */
#planningOverviewContainer {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#planningOverviewContainer .planning-overview-toolbar {
    flex: 0 0 auto;
}

/* The wrapper takes the remaining height; the grid itself is 100% of the wrapper. */
#planningOverviewContainer .planning-overview-grid-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

#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;
}