.cms-resourceplanning-add-member-buttons {
    padding-top: 15px;
    border-top: solid 1px var(--kendo-component-border);
    text-align: right;
}

.cms-resourceplanning-details {
    background-color: var(--kendo-color-surface);
    display: flex;
    flex-direction: column;
}

.cms-resourceplanning-details-numbers {
    display: flex;
    flex-direction: row;
    /* height: 90px;*/
}

.cms-resourceplanning-details-warnings {
    padding: 5px;
    display: flex;
    flex-direction: row;
}

.cms-resourceplanning-details-warnings-header {
    font-weight: var(--app-font-weight-bold);
    width: 175px;
}

.cms-resourceplanning-details-warnings-container {
    width: 100%;
    max-height: 70px;
    display: block;
    overflow-y: auto;
}

.cms-warning {
    /*padding-bottom: 5px;*/
    display: flex;
    flex-direction: row;
}

.cms-warning-icon {
    padding-right: 10px;
}

.cms-resourceplanning-details-info {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.cms-resourceplanning-details-jobtypes {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    column-gap: 20px;
}

.cms-block {
    width: 180px;
    height: 30px;
    display: flex;
    flex-direction: row;
    padding: 5px;
}

.cms-key {
    font-weight: var(--app-font-weight-bold);
}

.cms-value {
    text-align: right;
    flex: 1;
}

.cms-filter-panel-topright {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    column-gap: 40px;
}

    .cms-filter-panel-topright .cms-block {
        border-bottom: solid 1px var(--kendo-component-border);
    }

.k-toolbar.cms-resourceplanning-toolbar {
    height: 50px; /*fixes issue where the toobar keeps switching betwene multi and single line*/
}

.cms-resourceplanning-dayjoblines-splitter {
    display: flex;
    flex-direction: column;
}

.cms-resourceplanning-dayjoblines-toolbar {
    display: flex;
    flex-direction: column;
}

.cms-resourceplanning-dayjoblines-grid {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1; /*fill up remaining height*/
}

.cms-grid-row-supervisor {
    background-color: var(--kendo-color-surface);
    font-weight: 600;
}

/* Grid cells stay on one line and cut long text off. A cell with this wrapper wraps its text onto more lines
   instead, for long free text such as a remark. */
.cms-grid-cell-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Report header shown in the toolbar. Unlike .cms-block the items size to their content, so
   long values (a location name for example) do not run into the next item. */
.cms-report-header {
    display: flex;
    /* A report with more values than fit on one line wraps, rather than squeezing every item. */
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    column-gap: 24px;
    row-gap: 4px;
}

    .cms-report-header .cms-report-header-item {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        column-gap: 8px;
        min-width: 0;
        max-width: 320px;
        padding: 5px 0;
        border-bottom: solid 1px var(--kendo-component-border);
    }

    .cms-report-header .cms-report-header-key {
        font-weight: var(--app-font-weight-bold);
        white-space: nowrap;
    }

    .cms-report-header .cms-report-header-value {
        flex: 1;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Every filter item gets a label of the same height, so all filter controls line up. */
.cms-filter-label {
    display: block;
    margin-bottom: var(--kendo-form-label-margin-bottom);
    font-weight: var(--kendo-form-label-font-weight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CMSDatePicker: the date picker with the previous and next day buttons next to it. */
.cms-date-picker {
    display: flex;
}

/* A picker that opens a tree in a popup, such as LocationMultiSelect. The list is as wide as its widest
   entry: an entry that does not fit widens the list instead of being scrolled sideways. Both the picker and
   the list start at the same width, so the two line up while the list is open. */
.cms-tree-picker {
    min-width: var(--cms-tree-picker-min-width, 10em);
}

.cms-tree-popup {
    width: max-content;
    min-width: var(--cms-tree-picker-min-width, 10em);
    /* Never wider than the window, and no taller than a list that is still worth scrolling. */
    max-width: 90vw;
    max-height: 400px;
    overflow: auto;
}

/* The container is sized to the popup by Telerik and clips what sticks out, so it is widened along with it. */
.k-animation-container:has(.cms-tree-popup) {
    width: max-content !important;
    max-width: 90vw;
}

/* A treeview scrolls sideways on its own, which would hide the part of an entry that does not fit. It is the
   popup that is widened instead, so the tree only has to be as wide as its own content. */
.cms-tree-popup .k-treeview {
    overflow: visible;
}

/* Catches the click next to an open picker popup, so the popup closes again. Used by the pickers that are
   built around a TelerikPopup, such as LocationMultiSelect. */
.popup-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
}

/* Individual performance report: the group bands of the expanded report. The band colour lives on the span,
   not on the containing cell: the span is the report's own element, so it does not depend on which element
   the grid uses for a group cell. */
.cms-report-group {
    display: flex;
    align-items: baseline;
    width: 100%;
    column-gap: 24px;
    padding: 0.25rem 0.5rem;
}

.cms-report-group-label {
    flex: 1;
    font-weight: var(--app-font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-report-group-item {
    display: flex;
    align-items: baseline;
    column-gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cms-report-group-key {
    font-weight: var(--app-font-weight-bold);
}

.cms-report-group-location {
    background-color: var(--app-color-primary);
    color: var(--app-menu-color);
}

/* Individual performance report: row colours based on the deviation from the chosen benchmark */
.cms-grid-row-performance-good td {
    background-color: #c6efce;
    color: #006100;
}

.cms-grid-row-performance-warning td {
    background-color: #ffeb9c;
    color: #9c6500;
}

.cms-grid-row-performance-bad td {
    background-color: #ffc7ce;
    color: #9c0006;
}

/* Stockboards (remote stock and unsorted stock). A group band is a table of the same columns as the grid - the
   grid gives a group header a single cell spanning the row, so the band cannot be made of grid columns. */

/* The band is out of the flow, so the row would be as tall as the collapse icon alone. */
.cms-stock-board .k-grouping-row td, .cms-stock-board .k-grouping-row .k-table-td {
    position: relative;
    height: 1lh;
}

/* Laid over its cell rather than placed in it: in the flow the band starts after the collapse icon and the
   cell padding, and every column of it is that much out. */
.cms-stock-board-group {
    position: absolute;
    inset: 0;
    table-layout: fixed;
    /* Text only: the click that collapses a group belongs to the row underneath. */
    pointer-events: none;
}

    /* The padding of a cell of a small grid, so a subtotal lines up with the values it totals. */
    .cms-stock-board-group td {
        padding-inline: var(--kendo-spacing-3);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        /* Padding is the one thing that still asks for room in a table laid out to fixed widths: a board too
           narrow for its columns would shrink them all to fit padding that has nothing to show. */
        .cms-stock-board-group td:empty {
            padding-inline: 0;
        }

    .cms-stock-board-group td.cms-stock-board-group-label {
        font-weight: var(--app-font-weight-bold);
    }

    .cms-stock-board-group td.cms-stock-board-group-value {
        text-align: right;
    }

/* A column of numbers, its title right-aligned above its values. The grid aligns header cells with a selector
   of two classes, so this one needs as many; the second rule is for the flex container a header cell gets as
   soon as the column is sortable or has a menu. */
.cms-stock-board .k-grid .cms-stock-board-number {
    text-align: right;
}

    .cms-stock-board .k-grid .cms-stock-board-number .k-cell-inner,
    .cms-stock-board .k-grid .cms-stock-board-number .k-link {
        justify-content: flex-end;
    }

/* The warning of an employee band answers the mouse, so its tooltip shows: the rest of the band leaves the click
   to the row underneath. */
.cms-stock-board-group td.cms-payslip-week-closed {
    pointer-events: auto;
}

.cms-stock-board-title {
    font-size: 1.1rem;
    font-weight: var(--app-font-weight-bold);
    padding-right: 1rem;
}

/* The colour goes on the cell and is inherited by the band. Not on the band itself: that covers the whole cell,
   so its background would hide the collapse icon underneath it. Telerik renders a group cell either as a table
   cell element or as an element carrying .k-table-td, so both are matched. */
.cms-stock-board .k-grouping-row td:has(.cms-stock-board-group-producttype),
.cms-stock-board .k-grouping-row .k-table-td:has(.cms-stock-board-group-producttype) {
    background-color: #f5a623;
    color: #212529;
}

.cms-stock-board .k-grouping-row td:has(.cms-stock-board-group-date),
.cms-stock-board .k-grouping-row .k-table-td:has(.cms-stock-board-group-date) {
    background-color: #8cc63f;
    color: #212529;
}

.cms-stock-board .k-grouping-row td:has(.cms-stock-board-group-location),
.cms-stock-board .k-grouping-row .k-table-td:has(.cms-stock-board-group-location) {
    background-color: #4a90e2;
    color: #fff;
}

/* Only the band of an employee is coloured, like the groups of the crop and location bonus summary. Not its first
   column: that is the indentation the collapse icon sits in. */
/* A table does not stretch to the cell it is laid over by itself, and it puts space between and around its cells:
   both would leave white gaps in a coloured band. Kept clear of the edges of its cell, so the bands stand apart like
   the groups of the crop and location bonus summary. */
.cms-stock-board-group.cms-payslip-group-employee {
    inset: var(--kendo-spacing-2) auto var(--kendo-spacing-2) 0;
    width: calc(100% - var(--kendo-spacing-1));
    border-collapse: collapse;
}

/* The row of an employee is a bit taller than a line, so its band keeps room above and below. */
.cms-stock-board .k-grouping-row td:has(.cms-payslip-group-employee),
.cms-stock-board .k-grouping-row .k-table-td:has(.cms-payslip-group-employee) {
    height: calc(1lh + 2 * var(--kendo-spacing-2));
}

/* The warning keeps the colour of the row, like the warning of a line. */
.cms-stock-board-group.cms-payslip-group-employee td:not(:first-child):not(.cms-payslip-week-closed) {
    background-color: var(--app-color-primary);
    color: var(--app-menu-color);
}

/* Email payslips dialog: one column with even spacing, the counts lined up on the right. */
.cms-email-payslips {
    display: flex;
    flex-direction: column;
    gap: var(--kendo-spacing-3);
    width: 100%;
    padding: var(--kendo-spacing-4);
}

.cms-email-payslips-title {
    margin: 0;
    font-weight: var(--app-font-weight-bold);
}

.cms-email-payslips-summary {
    width: 100%;
    border-collapse: collapse;
}

    .cms-email-payslips-summary td {
        padding: var(--kendo-spacing-2) 0;
        border-bottom: solid 1px var(--kendo-color-border);
        vertical-align: top;
    }

    .cms-email-payslips-summary tr:last-child td {
        border-bottom: none;
    }

.cms-email-payslips-count {
    width: 60px;
    text-align: right;
    font-weight: var(--app-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.cms-email-payslips-note {
    font-size: 0.85em;
    color: var(--kendo-color-subtle);
}

.cms-email-payslips-progress-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

.cms-email-payslips-list {
    max-height: 240px;
    overflow-y: auto;
    border: solid 1px var(--kendo-color-border);
    border-radius: 4px;
}

    .cms-email-payslips-list table {
        width: 100%;
        border-collapse: collapse;
    }

    .cms-email-payslips-list th {
        position: sticky;
        top: 0;
        background-color: var(--kendo-color-surface);
        font-weight: var(--app-font-weight-bold);
    }

    .cms-email-payslips-list th,
    .cms-email-payslips-list td {
        padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
        border-bottom: solid 1px var(--kendo-color-border);
        text-align: left;
    }

    .cms-email-payslips-list tr:last-child td {
        border-bottom: none;
    }

/* The callouts (warning and error), made to fit the dialog: no margin of their own, normal text and the icon at the
   first line. */
.callout.cms-email-payslips-callout {
    align-items: flex-start;
    margin: 0;
    padding: var(--kendo-spacing-2) var(--kendo-spacing-3);
    font-size: inherit;
}

    .callout.cms-email-payslips-callout .callout-icon {
        margin-top: 2px;
    }

.cms-email-payslips-error-title {
    font-weight: var(--app-font-weight-bold);
}

.cms-email-payslips-error-message {
    font-size: 0.85em;
}

.operational-forms {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    padding: 10px;
}

    .operational-forms .of-group {
        border: 1px solid var(--kendo-component-border);
        padding: 10px15px15px15px;
        background-color: var(--kendo-color-surface);
        display: flex;
        flex-direction: column;
        min-width: 230px;
    }

    .operational-forms .of-group-title {
        font-weight: var(--app-font-weight-bold);
        margin-bottom: 8px;
    }

    .operational-forms .of-group .k-button, .operational-forms .of-group softsolbutton {
        margin-bottom: 6px;
        width: 100%;
        text-align: left;
    }

.cms-grid-row-hidden {
    visibility: hidden
}

/* Employee Time Registration Grid */
.employee-time-registration-grid {
    width: 100%;
}

    .employee-time-registration-grid .k-grid {
        border: 1px solid var(--kendo-component-border);
    }

    .employee-time-registration-grid .k-grid-header {
        background-color: var(--kendo-color-surface-alt);
    }

/* Scoring indicators */
.scoring-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: var(--app-font-weight-bold);
    color: white;
}

    .scoring-indicator.scoring-1 {
        background-color: #4caf50; /* Green */
    }

    .scoring-indicator.scoring-2 {
        background-color: #ff9800; /* Orange */
    }

    .scoring-indicator.scoring-3 {
        background-color: #f44336; /* Red */
    }

    .scoring-indicator.scoring-4 {
        background-color: #9c27b0; /* Purple */
    }

    .scoring-indicator.scoring-5 {
        background-color: #e91e63; /* Pink */
    }

.operational-forms-hourregistration-datagrid {
    height: 475px;
}

    .operational-forms-hourregistration-datagrid > .k-form-field-wrap {
        height: 100%;
    }

.cms-formitem-no-label .k-form-label {
    display: none !important;
}

.operational-forms-hourregistration-datagrid {
    height: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

    .operational-forms-hourregistration-datagrid .k-form-field-wrap {
        height: 100%;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .operational-forms-hourregistration-datagrid .k-grid {
        margin-bottom: 0 !important;
    }

.unplanned-employee-row {
    color: red !important;
}

    .unplanned-employee-row:hover {
        color: red !important;
    }

.absent-employee-row {
    background-color: lightgrey !important;
}

.selected-employee-row {
    background-color: lightgreen !important;
}


/* START - Splitter content */
.page-splitter {
    border-color: transparent;
}
/* END - Splitter content */


/* START - Callout */
/* A message with an icon, for instance in the place of the content of a page or in a dialog. The callout has a
   colour set of its own that fits the colours of Cobrey, apart from the theme, so changing it leaves the Telerik
   components alone. Per colour: the background, the border, the text and the icon, all of the same colour family. */
:root {
    /* base: neutral grey */
    --callout-base-bg: #eceeef;
    --callout-base-border: #c4c8cc;
    --callout-base-text: #343a40;
    --callout-base-icon: #6c757d;
    /* primary: the Cobrey green */
    --callout-primary-bg: #d6e5dc;
    --callout-primary-border: #8fb19d;
    --callout-primary-text: #1f3328;
    --callout-primary-icon: #40654f;
    /* secondary: the Cobrey brown */
    --callout-secondary-bg: #eadfd4;
    --callout-secondary-border: #c0a58b;
    --callout-secondary-text: #3f2e1f;
    --callout-secondary-icon: #76593f;
    /* tertiary: the Cobrey taupe */
    --callout-tertiary-bg: #e6e3df;
    --callout-tertiary-border: #b5aea6;
    --callout-tertiary-text: #3a3631;
    --callout-tertiary-icon: #6b645d;
    /* info: blue */
    --callout-info-bg: #d3e6f6;
    --callout-info-border: #82b2dd;
    --callout-info-text: #14334f;
    --callout-info-icon: #2b6da8;
    /* success: green */
    --callout-success-bg: #d5ebcc;
    --callout-success-border: #86bd72;
    --callout-success-text: #1f3f14;
    --callout-success-icon: #3b7526;
    /* warning: amber, like the warning icons of the grids */
    --callout-warning-bg: #fce6b3;
    --callout-warning-border: #e2ad3f;
    --callout-warning-text: #553806;
    --callout-warning-icon: #b86f00;
    /* error: a muted red */
    --callout-error-bg: #f6d5cf;
    --callout-error-border: #d58b7e;
    --callout-error-text: #651d15;
    --callout-error-icon: #a3321f;
    /* inverse: dark */
    --callout-inverse-bg: #343a40;
    --callout-inverse-border: #212529;
    --callout-inverse-text: #f8f9fa;
    --callout-inverse-icon: #f8f9fa;
}

.callout {
    display: flex;
    align-items: center;
    gap: var(--kendo-spacing-2, 8px);
    margin: var(--kendo-spacing-2, 8px);
    padding: var(--kendo-spacing-3, 12px) var(--kendo-spacing-4, 16px);
    border: 1px solid transparent;
    border-radius: var(--kendo-border-radius-md, 4px);
    font-size: var(--kendo-font-size-lg, 1rem);
}

    .callout-icon {
        flex-shrink: 0;
        color: var(--callout-icon-color, currentColor);
    }
    .callout-base {
        color: var(--callout-base-text);
        background-color: var(--callout-base-bg);
        border-color: var(--callout-base-border);
        --callout-icon-color: var(--callout-base-icon);
    }

    .callout-primary {
        color: var(--callout-primary-text);
        background-color: var(--callout-primary-bg);
        border-color: var(--callout-primary-border);
        --callout-icon-color: var(--callout-primary-icon);
    }

    .callout-secondary {
        color: var(--callout-secondary-text);
        background-color: var(--callout-secondary-bg);
        border-color: var(--callout-secondary-border);
        --callout-icon-color: var(--callout-secondary-icon);
    }

    .callout-tertiary {
        color: var(--callout-tertiary-text);
        background-color: var(--callout-tertiary-bg);
        border-color: var(--callout-tertiary-border);
        --callout-icon-color: var(--callout-tertiary-icon);
    }

    .callout-info {
        color: var(--callout-info-text);
        background-color: var(--callout-info-bg);
        border-color: var(--callout-info-border);
        --callout-icon-color: var(--callout-info-icon);
    }

    .callout-success {
        color: var(--callout-success-text);
        background-color: var(--callout-success-bg);
        border-color: var(--callout-success-border);
        --callout-icon-color: var(--callout-success-icon);
    }

    .callout-warning {
        color: var(--callout-warning-text);
        background-color: var(--callout-warning-bg);
        border-color: var(--callout-warning-border);
        --callout-icon-color: var(--callout-warning-icon);
    }

    .callout-error {
        color: var(--callout-error-text);
        background-color: var(--callout-error-bg);
        border-color: var(--callout-error-border);
        --callout-icon-color: var(--callout-error-icon);
    }

    .callout-inverse {
        color: var(--callout-inverse-text);
        background-color: var(--callout-inverse-bg);
        border-color: var(--callout-inverse-border);
        --callout-icon-color: var(--callout-inverse-icon);
    }
/* END - Callout */