/*  Using CSS variables
    https://googlechrome.github.io/samples/css-custom-properties/
*/
@supports (--css: variables) {
    :root {
        /*************************** Page-wide variables ****************************/

        /* Pixels per hour */
        --pixels-per-hour: 6px;

        /* Number of hours per separator (on top of gantt) */
        --hours-per-separator: 2;

        /* Gantt bottom scroll bar height */
        --gantt-bottom-scrollbar-height: 10px;

        /* The height of the utilisation heatmap */
        --utilisation-row-height: 5px;

        /***************************** Calculated values ****************************/
        /* We don't use calc here because we don't want to resolve the values yet.
        You can think of these as simple textual replacements. */

        /* The size of the margin around the card grid. */
        /* --margin-size: (var(--margins) * 2); */
        /* How much internal padding each cell should have */
        /* --cell-padding: (4 * var(--spacing-unit)); */
        /* How big the space between cells should be */
        /* --grid-gutter: (var(--margins) * var(--spacing-unit)); */
        /* How big the space should be around the grid */
        /* --grid-margin: (var(--margin-size) * var(--spacing-unit)); */
        /* Calculated cell margin */
        /* --cell-margin: (var(--grid-gutter) / 2); */
    }

    .positions-normal .gantt-item,
    .positions-normal .limit-block,
    .positions-normal .unavailability-block {
        width: calc(var(--n-w) * var(--pixels-per-hour));
        left: calc(var(--n-l) * var(--pixels-per-hour));
    }

    .positions-extended .gantt-item,
    .positions-extended .nw-block,
    .positions-extended .limit-block,
    .positions-extended .unavailability-block {
        width: calc(var(--e-w) * var(--pixels-per-hour));
        left: calc(var(--e-l) * var(--pixels-per-hour));
    }

    .positions-calendar .gantt-item,
    .positions-calendar .limit-block,
    .positions-calendar .unavailability-block {
        width: calc(var(--c-w) * var(--pixels-per-hour));
        left: calc(var(--c-l) * var(--pixels-per-hour));
    }

    .positions-full .gantt-item,
    .positions-full .limit-block,
    .positions-full .unavailability-block {
        width: calc(var(--f-w) * var(--pixels-per-hour));
        left: calc(var(--f-l) * var(--pixels-per-hour));
    }

    .positions-custom .gantt-item,
    .positions-custom .limit-block,
    .positions-custom .unavailability-block {
        width: calc(var(--cu-w) * var(--pixels-per-hour));
        left: calc(var(--cu-l) * var(--pixels-per-hour));
    }

    .positions-auto .gantt-item,
    .positions-auto .limit-block,
    .positions-auto .unavailability-block {
        width: calc(var(--a-w) * var(--pixels-per-hour));
        left: calc(var(--a-l) * var(--pixels-per-hour));
    }

    .gantt ::-webkit-scrollbar {
        width: 8px;
        height: var(--gantt-bottom-scrollbar-height);
        box-sizing: content-box;
    }
}

@supports not (--css: variables) {
    /*
        THIS COMMENT PROBABLY ISN'T RELEVANT ANY MORE?

        gantt items have a pixel based fallback so they are ok
        however, utilisation blocks do not, so we use font-size as a
        pseudo variable as we can position the blocks using em units
        it's not perfect because it just gives us one value rather than two
        so we can deal with scaling but not with switching between
        normal/extended hours, but we don't have to go for a
        pixel based approach
        if you want to know more check out where/how ds.tools.dom.insertCSSRule is used
        or how we treat things in ganttTemplates.js
    */
}

.gantt-view {
    position: relative;
}

.individual-gantt {
    min-height: 350px;
}

/* Other gantt styling */
.gantt {
    width: 100%;
    line-height: 1;
    -webkit-transform: translateZ(0);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    overflow: visible;
}

/* -- suggestion create, review adn solve mode styles -- */
/* -- display suggestion mode indicator line on the left -- */
.mode-indicator {
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    z-index: 904;
    left: -4px;
    transition: left 0.3s ease-in-out;
}

.mode-indicator.hide {
    z-index: 0;
}

.suggestions-mode.create .mode-indicator,
.suggestions-mode.review .mode-indicator,
.suggestions-mode.solve .mode-indicator {
    background-color: var(--secondary-teal-d2);
    width: 4px;
    left: -4px;
}

#menu-panel #menu-inner.sub-visible + #main .mode-indicator {
    z-index: 0;
}

/* -- END of display suggestion mode indicator line on the left -- */

/* .solver-range-from in solver mode */
.suggestions-mode.solve .solver-range-from,
.suggestions-mode.solve .solver-range-to {
    border-color: #29c8d8;
}

/* -- suggestion create, review, solve mode styles -- */

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gantt-scrollable {
    overflow-y: auto;
    overflow-x: scroll;
}

.gantt-head,
.gantt-labels {
    cursor: default;
}

.gantt-labels {
    border-right: 1px solid #dddddd;
    position: sticky;
    left: 0;
    display: inline-block;
    z-index: 1000000;
    background-color: white;
}

.gantt-labels-head {
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid var(--neutral-grey);
    display: flex;
    flex-direction: column;
    height: 72px;
    background-color: white;
    width: 240px; /* Should be kept in sync with minRowLabelWidth in ganttController.js and with any 240px styles in ganttView.html */
    z-index: 1000000;
    position: absolute;
    padding-top: 5px;
}

.job-edit .gantt-labels-head {
    justify-content: flex-end;
}

.gantt-labels-resize-handle {
    width: 8px;
    display: inline-block;
    position: absolute;
    left: 240px;
    cursor: ew-resize;
    z-index: 500;
}

.GanttView-selectAllResourcesControl {
    display: flex;
    align-items: center;
}

.gantt-labels-resize-handle:hover,
.gantt-labels-resize-handle.hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.gantt-labels-resize-handle.dragging {
    background-color: rgba(0, 0, 0, 0.16);
}

.gantt-overlay {
    background-color: rgba(255, 255, 255, 0.6); /* White background with opacity */
    bottom: 0;
    cursor: not-allowed;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000001; /* 1 more than gantt-labels-head */
}

/* Overlay used to keep the correct cursor when resizing the labels or the unassigned gantt */
#drag-overlay {
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    z-index: 100000000;
    display: none;
    opacity: 0;
}

#drag-overlay.column-resizing {
    cursor: ew-resize !important;
    display: flex;
}

#drag-overlay.row-resizing {
    cursor: ns-resize !important;
    display: flex;
}

#drag-overlay.select-drag {
    cursor: crosshair !important;
    display: flex;
}

#unscheduled-gantt .gantt-labels-head {
    padding-top: 2px;
    height: 32px;
}

.unscheduled-gantt-ellipsis:last-of-type {
    max-width: 240px !important;
}

.unscheduled-gantt-ellipsis {
    width: 130px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unscheduled-gantt-ellipsis:first-of-type {
    margin-left: 5px;
}

.gantt-ellipsis-wrapper {
    position: sticky;
    left: var(--gantt-label-div-width, 300px); /* This is set in ganttController.js to account for the label width changing */
    display: flex;
    align-items: center;
}

.gantt-labels-head-row {
    display: flex;
    flex-direction: row;
    padding: 0 5px;
    margin-bottom: 5px;
    height: auto;
    overflow: visible;
}
.njeg-gantt-labels-head-row {
    align-items: center;
}

.gantt-labels-head-row .form-control {
    height: 28px;
}

.gantt-labels-head-row .form-control + .clear-selection-btn {
    /* clear selection button should be applied as an input group Lu 29-04-21 */
    color: #ccc;
    position: absolute;
    right: 15px;
}

/*style="text-align:right;color:#ccc;margin-top:7px;margin-left:-20px;z-index:500;" */

.gantt-labels-head-row .menu-button {
    min-width: 45px;
    height: 28px;
    padding: 0 6px;
}

#unscheduledGanttLabelsHead .gantt-labels-head-row .btn:not(:last-of-type) {
    margin-right: 5px;
}

#unscheduledGanttLabelsHead .gantt-labels-head-row .unscheduled-sort {
    margin-left: auto;
}

.gantt-icons > div:not(.MainGanttFiltersDropdown) {
    margin-right: 5px;
}

.gantt-icons > div:last-child {
    margin-right: 0;
}

span.gantt-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

span.gantt-label-job {
    padding-left: 19px;
}

span.gantt-label-resource {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    flex-grow: 3;
    flex-shrink: 1;
    flex-basis: 0;
}

.utilisation-slim-view-visible .gantt-label-resource {
    padding-top: 5px;
}

.gantt-labels-resource-row-hours {
    border-left: 1px solid #ddd;
}

.engagement-view span.gantt-label-job {
    padding-left: 30px;
}

.engagement-view .unassignable-separator,
.engagement-view .gantt-label-unassignable,
.engagement-view .assigned-separator {
    padding-left: 50px;
}

.engagement-view .gantt-labels-row-name {
    margin-left: 1px;
}

.gantt-labels-row-unavailability-trait {
    margin-left: 50px;
}

.unscheduled-header-row-data-label {
    display: inline-block;
    vertical-align: baseline;
    padding: 7px 5px;
}

/* -- END of devo 518 - performance issues with sticky headers */

#ganttUnscheduledRows .header-row {
    display: flex;
}

.section .dropdown-menu {
    max-height: calc(100vh - 50px);
    overflow-y: auto;
}

.section .dropdown-menu {
    max-height: 75vh;
}

/*bootstrap 4 changed the above .dropdown-menu*/
#mainGanttLabelsHead #filterButton .dropdown-menu {
    flex-direction: column;
    background-color: transparent;
}

#mainGanttLabelsHead #filterButton .dropdown-menu-content {
    background-color: white;
}

.dropdown-menu-content {
    display: flex;
    flex-direction: row;
}

#mainGanttLabelsHead #filterButton .dropdown-menu-content .dropdown-menu-first-level {
    border-top: solid thin #e9ecef;
    border-right: solid thin #e9ecef;

    margin-bottom: 0;
    padding-bottom: 1rem;
}

#savedViewsButton .dropdown-menu.show,
#settingsButton .dropdown-menu.show,
#unscheduledGanttLabelsHead .dropdown-menu.show {
    display: flex;
}

#runSolveButton .dropdown-menu.show {
    display: block;
}

#mainGanttLabelsHead .dropdown-menu-header {
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    height: auto;
    display: flex;
    align-items: center;
}

#mainGanttLabelsHead #filterButton .dropdown-menu-content .main-dropdown-secondLevel {
    border-top: solid thin #e9ecef;
    border-right: solid thin #e9ecef;
    border-left: none;
}

.gantt-labels-head-row .dropdown-menu-header #filtersOnOffToggle {
    margin-left: auto;
}

.gantt-labels-head-row .dropdown-menu-header #filtersOnOffToggle .toggle-handle {
    padding: 1px 5px;
    margin-top: 0;
}

.gantt-labels-head-row #filtersOnOffToggle .toggle-off.btn-xs {
    line-height: 17px;
    padding-left: 10px;
}

.gantt-labels-head-row #filtersOnOffToggle .toggle-on.btn-xs {
    line-height: 17px;
}

.gantt-labels-head-row .dropdown-menu-header #filtersOnOffToggle.disabled {
    border-color: #6c757d;
}

.gantt-labels-head-row .dropdown-menu-header #filtersOnOffToggle.disabled .toggle-off {
    background-color: lightgrey;
    color: #6c757d;
}

.gantt-labels-head-row .dropdown-menu-header #resetFiltersButton {
    margin-left: 5px;
}

#mainGanttLabelsHead .dropdown-menu > ul {
    flex-basis: 0;
}

#mainGanttLabelsHead #filterButton {
    margin-right: 0;
    z-index: 1;
}

#mainGanttLabelsHead #filterButton {
    margin-right: 0;
    z-index: 1;
}

#mainGanttLabelsHead #filterButton .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#mainGanttLabelsHead #filterButton .dropdown-menu {
    border-top: none;
    border-right: none;
}

#mainGanttLabelsHead #filterButton .dropdown-menu-header-content {
    display: flex;
    align-items: center;
    width: 100%;
}

#mainGanttLabelsHead #filterButton .count-label {
    font-size: smaller;
    display: inline-block;
}

#mainGanttLabelsHead #filterButton .count-label.hidden {
    display: none;
}

#mainGanttLabelsHead #savedViewsButton {
    margin-left: auto;
}

#mainGanttLabelsHead #searchTextInput {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

#mainGanttLabelsHead #settingsButton {
    margin-right: 0;
}

#mainGanttLabelsHead #engagementViewButton {
    margin-left: 5px;
}

#mainGanttLabelsHead .gantt-worker-load-wrapper {
    margin-right: 0;
}

#mainGanttLabelsHead .task-assignment-button-wrapper {
    margin-left: 5px;
}

/* fixing bootstrap4 layout of filters: saved views, workers filters, display settings */
.main-dropdown-secondLevel {
    background: white;
    line-height: 20px;
    height: auto;
    overflow: hidden; /*it's important that the parent element of the tree picker does not scroll */
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    min-width: 320px;
}

.main-dropdown-secondLevel .treepicker {
    padding: 0 10px;
}

.main-dropdown-secondLevel .treepicker span {
    line-height: 1.7em;
}

#filterButton .main-dropdown-secondLevel form tree-picker {
    min-width: 300px;
    height: 434px;
}

/* END of fixing bootstrap4* filters layout*/

/* gantt - date range picker, align the to-date dropdown to the right */
#solverRangeDatePickers .date-end .dropdown-menu {
    transform: translate3d(-179px, 35px, 0px) !important;
}

/* ENF of gantt - date range picker, align the to-date dropdown to the right */

.main-dropdown-secondLevel > form .treepicker .tree-picker-scrollable {
    max-height: 500px !important;
}

.main-dropdown-secondLevel h4 {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* saved views */
.main-dropdown-secondLevel > .saved-views-list {
    margin-bottom: 0;
    max-height: 400px;
    overflow: auto;
}

#mainGanttLabelsHead .open-saved-view-link .saved-view-name {
    margin-left: 20px;
    padding-right: 0;
}

.save-view-form .gantt-horizon-date,
#manage-saved-views .gantt-horizon-date {
    padding: 0.375rem 0.75rem;
}

.form-control-plaintext:focus-visible {
    outline: none;
}

.open-saved-view-link .fixed-relative-icon,
#manage-saved-views .date-arrow,
.save-view-form .date-arrow {
    color: #aaaaaa;
    line-height: inherit;
    padding: 0.375rem 0;
}

.open-saved-view-link .fixed-relative-icon,
#manage-saved-views .date-arrow {
    cursor: help;
    width: 20px;
    text-align: center;
}

.open-saved-view-link:hover .fixed-relative-icon {
    color: var(--white);
}

.fa.icon-rotated-45,
.fas.icon-rotated-45 {
    transform: rotate(45deg);
}

/* utilisation selection -->> this should be on a second level of the popup */
.dropdown-menu .utilisation-settings {
    padding: 0.3rem 1.5rem;
}

.utilisation-settings .radio {
    display: flex;
    align-items: center;
}

.utilisation-settings .radio label,
.utilisation-settings li label:not(.btn) {
    padding-bottom: 2px;
    padding-left: 6px;
    margin-bottom: 0;
    display: inherit;
    font-weight: var(--font-weight-regular);
}

.utilisation-settings li label.btn {
    height: 100%;
    width: 50%;
    padding: 0.375rem 0.75rem;
}

.dropdown-menu .utilisation-settings li {
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
}

.dropdown-menu .utilisation-settings li.dropdown-header {
    padding: 0.5rem 0;
}

/* dropdown on the popover to unassign worker - to style the spans acting as disabled links */
.dropdown-menu .unassigned-disabled {
    padding: 0.2rem 1.5rem;
    display: flex;
    align-items: center;
    clear: both;
    font-weight: var(--font-weight-regular);
    line-height: 1.42857143;
    color: #ddd;
    transition: all 0.05s linear;
    cursor: not-allowed;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.gantt-label-name-noskills {
    color: purple;
}

i.icon-restriction,
i.icon-incomplete {
    padding-left: 3px;
}

i.icon-restriction {
    font-size: 0.8em;
}

i.icon-incomplete {
    color: var(--warning);
}

i.icon-restriction {
    color: var(--danger);
}

.hide-button-styles {
    border: none;
    background: none;
}

.hide-button-styles:disabled {
    cursor: not-allowed;
    border: none;
    background: none;
    opacity: 0.5;
}

.partial-assign-disable {
    cursor: not-allowed;
    opacity: 0.5;
}

/* .gantt-background-row.highlight {
    background-color: rgb(212,238,212);
} */

/* suitability tooltip */

.suitability-score-tooltip {
    text-align: left;
    padding: 0 15px;
}

.suitability-score-title,
.suitability-score-fail-reason {
    display: none;
}

.suitability-score-tooltip ul {
    list-style-type: none;
    padding: 0;
}

.suitability-score-tooltip ul li {
    list-style-type: none;
    padding: 6px 0 3px 0;
    width: 100%;
    border-bottom: 1px solid #c8c8c8;
}

.suitability-score-tooltip ul li.suitability-score-group {
    border-bottom: none;
    padding-top: 18px;
}

.suitability-score-tooltip ul li.suitability-score-group:first-of-type {
    padding-top: 5px;
}

.suitability-score-subsection,
.suitability-score-subsection.suitability-score {
    text-transform: uppercase;
    font-weight: 900;
}

.suitability-score-subsection .suitability-score > span + span {
    margin-right: 0;
}

.suitability-score-tooltip .suitability-score-label {
    padding-left: 0;
    font-weight: var(--font-weight-semibold);
}

.suitability-score-tooltip .suitability-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.suitability-score-tooltip .suitability-score .label {
    margin-right: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
    font-weight: 300;
}

.suitability-score-tooltip .suitability-score .fa {
    font-size: 17px;
}

.suitability-score-tooltip .not-ran {
    color: var(--text-muted-light);
}

/* resource matcher now provides a decimal suitability score, so we need a range of highlight colours (a = best match) */
/* AR: probably want to use the new colour palette for suitability badges */

.gantt-labels-row span.badge.highlight-a,
.suggestion-row span.badge.highlight-a,
.suitability-score-subsection span.badge.highlight-a {
    background-color: hsl(120, 80%, 40%);
    min-width: 40px;
}

.gantt-labels-row span.badge.highlight-b,
.suggestion-row span.badge.highlight-b,
.suitability-score-subsection span.badge.highlight-b {
    background-color: hsl(120, 50%, 40%);
    min-width: 34px;
}

.gantt-labels-row span.badge.highlight-c,
.suggestion-row span.badge.highlight-c,
.suitability-score-subsection span.badge.highlight-c {
    background-color: hsl(120, 20%, 60%);
    min-width: 23px;
}

.gantt-labels-row span.badge.highlight-d,
.suggestion-row span.badge.highlight-d {
    background-color: hsl(120, 20%, 60%);
}

.gantt-labels-row span.badge.highlight-e,
.suggestion-row span.badge.highlight-e {
    background-color: hsl(0, 85%, 49%);
}

.gantt-labels-row span.badge,
.suggestion-row span.badge {
    background-color: hsl(120, 0%, 80%);
    color: var(--text-inverse);
    cursor: help;
}

/* end of suitability score tooltip styles */

#mainGanttHeaders,
#unscheduledGanttHeaders {
    border-bottom: 1px solid var(--neutral-grey);
}

.gantt-labels-row span.gantt-label-solver {
    display: none;
}

.gantt-labels-row.highlighted span.gantt-label-solver {
    display: inline-block;
}

.gantt-labels-row span.gantt-label-grade {
    padding-left: 12px;
    padding-right: 5px;
    color: grey;
    width: 60px;
    font-size: small;
    overflow: auto;
    cursor: default;
}

.gantt-labels-row span.gantt-label-cost {
    color: grey;
    width: 60px;
    padding-left: 5px;
    text-align: right;
    font-size: small;
    overflow: hidden;
}

.gantt-row-user {
    color: indianred;
    font-weight: var(--font-weight-bold);
}

.gantt-head {
    position: sticky;
    top: 0;
    z-index: 999999; /* 1 less than gantt-labels z-index in order to hide now dot */
    height: 72px;
    margin-bottom: -1px; /* hacky - prevents double border between this and the main Gantt */
}

#unscheduled-gantt .gantt-head {
    height: 32px;
}

.gantt-background-timelines {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
    white-space: nowrap;
    display: flex;
    position: absolute;
    border-bottom: 1px solid #e9e9e9;
}

.gantt-head-row {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 24px;
    white-space: nowrap;
    display: flex;
}

#unscheduled-gantt .gantt-head-row {
    height: 32px;
}

.month-row {
    border-bottom: 1px solid #dddddd;
}

.gantt-head.show-hours .month-row {
    display: none;
}

.gantt-head.show-hours .week-row {
    border-bottom: 1px solid #dddddd;
}

.time-column {
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    text-align: center;
    display: inline;
    padding-top: 4px;
}

.day-column {
    left: calc(var(--col-l) * var(--pixels-per-hour));
    width: calc(var(--col-w) * var(--pixels-per-hour));
    height: 100%;
}

/* day column header should be bold if it's the current day, and the time column headers are hidden */
/* day column headers in the unscheduled gantt should be bold if it's the current day (no time column headers show up here) */
/* time column headers should be bold if it's the current day and time, and time column headers are shown (at the correct zoom level) */
/* week column headers should be bold if it's the current year and week, and the day column headers are hidden*/

.day-column-is-today:not(.gantt-head.show-hours .day-column-is-today),
#unscheduledGanttHeaders .day-column-is-today,
.gantt-head.show-hours .time-column-is-currentTime,
.week-column-is-currentWeek:not(.gantt-head.show-days .week-column-is-currentWeek) {
    color: var(--deep-black);
    font-weight: var(--font-weight-bold);
}

.gantt-head.show-hours #mainGanttHeaders .day-column {
    height: 48px;
}

.hour-column-container {
    height: 24px;
    width: 100%;
    display: none;
}

.gantt-head.show-hours .hour-column-container {
    display: block;
}

.hour-column,
.time-column,
.day-column,
.week-column,
.month-column {
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    line-height: 15px;
    color: var(--deep-black);
}

.hour-column {
    width: calc(var(--col-w) * var(--pixels-per-hour));
    border-right: 1px dashed #eeeeee;
    height: 100%;
    margin: 0;
    display: inline-block;
    text-align: left;
    padding-top: 8px;
    padding-left: 1px;
    overflow-x: hidden;
}

.gantt-background-timelines .day-column {
    display: flex;
}

.gantt-background-timelines .hour-column {
    display: none;
}

.gantt-body-content.show-hours .gantt-background-timelines .hour-column {
    display: inline;
}

.gantt-head-row .time-column.variable-hours,
.variable-hours {
    background-color: rgba(218, 189, 189, 0.3);
    border-right: 1px solid rgb(223, 223, 223);
}

.defaultpop-column {
    /* border-right: 1px solid #eeeeee; */
    text-align: center;
    margin-top: -4px;
    height: 100vh;
    background-color: var(--surface-default);
    max-width: calc(100% - 1px);
    position: absolute;
}

.open > div.dropdown-menu.dropdown-div {
    display: flex;
}

.dropdown-menu .gantt-start-date-picker {
    border: 0;
    position: relative;
    top: 0;
    box-shadow: none;
    padding: 0 10px;
}

.gantt-head-row .time-column.month-column {
    border-right: 4px solid #eeeeee;
}

/* Row gets progressively taller as we add sub rows for days then weeks */

.gantt-head-row .time-column.week-column {
    border-right: 4px solid #eeeeee;
    border-bottom: 1px solid #dddddd;
    height: 47px;
}

#ganttUnscheduledWrapper .gantt-head-row .time-column.week-column {
    border-bottom: 1px solid var(--neutral-grey);
}

.gantt-head-row.show-days .time-column.week-column {
    border-bottom: none;
    height: 48px;
}

#unscheduled-gantt .gantt-head-row .time-column.week-column {
    height: 32px;
}

#unscheduled-gantt .gantt-head-row .time-column.week-column,
#unscheduled-gantt .gantt-head-row .time-column.day-column {
    padding-top: 8px;
}

#unscheduled-gantt .gantt-head .week-row {
    display: none;
}

#unscheduled-gantt .gantt-head.show-week .week-row {
    display: flex;
}

#unscheduled-gantt .gantt-head .days-row {
    display: none;
    position: absolute;
}

#unscheduled-gantt .gantt-head.show-days .days-row {
    display: flex;
}

.month-column {
    left: calc(var(--col-l) * var(--pixels-per-hour));
    width: calc(var(--col-w) * var(--pixels-per-hour));
}

.week-column {
    left: calc(var(--col-l) * var(--pixels-per-hour));
    width: calc(var(--col-w) * var(--pixels-per-hour));
    height: 100%;
    border-right: 4px solid #eeeeee;
}

.gantt-head-row .time-column span {
    width: 100%;
    height: 100%;
    border-right: none;
}

.gantt-head-row .time-column .dropdown-menu span {
    width: 23%;
}

/* Always show this row in order to show now dot */
#ganttWrapper .gantt-head .days-hours-row {
    display: flex;
    padding-bottom: 1px; /* AR: stops vertical borders from each column bleeding into the bottom border */
    position: absolute;
}

/* Hide day columns by default */
#ganttWrapper .gantt-head .days-hours-row .time-column {
    display: none;
}

/* Show days if gantt-head has class .show-days */
#ganttWrapper .gantt-head.show-days .days-hours-row .time-column {
    display: inline;
}

/* Always show this row in order to show now dot */
#ganttUnscheduledWrapper .gantt-head .days-row {
    display: flex;
    padding-bottom: 1px; /* AR: stops vertical borders from each column bleeding into the bottom border */
    position: absolute;
}

/* Hide day columns by default */
#ganttUnscheduledWrapper .gantt-head .days-row .time-column {
    display: none;
}

/* Show days if gantt-head has class .show-days */
#ganttUnscheduledWrapper .gantt-head.show-days .days-row .time-column {
    display: flex;
}

.gantt-head .week-including-prefix {
    display: none;
}

.gantt-head .week-excluding-prefix {
    display: inline;
    position: relative;
}

.gantt-head.show-week-prefix .week-including-prefix {
    display: inline;
    position: relative;
}

.gantt-head.show-week-prefix .week-excluding-prefix {
    display: none;
}

div.gantt-head.show-day-names span.date-including-day {
    display: inline;
    position: relative;
}

div.gantt-head.show-day-names span.date-excluding-day {
    display: none;
}

div.gantt-head-row span.date-including-day {
    display: none;
}

div.gantt-head-row span.date-excluding-day {
    display: inline;
    position: relative;
}

span.date .gantt-head-row span.friday {
    border-right: 1px solid #ccc;
}

.gantt-labels-row > span:not(.badge),
.gantt-head-row > span:not(.badge),
.gantt-labels-row > a:not(.badge):not(.button-select),
.engagement-view span.gantt-label-job,
.gantt-ellipsis-wrapper {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    align-items: center;
    display: flex;
    line-height: 25px;
    max-width: 100%;
    float: left;
}

.gantt-view.job-edit {
    border-top: 1px solid #ddd;
    margin-top: 10px;
    padding-right: 15px;
    max-height: var(--njeg-max-height);
}

.gantt-loader {
    min-height: 300px;
}

@media (min-height: 720px) {
    /* Media query ensures high browser zoom isn't ridiculous height-wise */
    .gantt-view.job-edit {
        min-height: var(--blank-slate-height);
    }
}

/* positioning of the zoom panel on the gantt views */
.gantt-view .ZoomButtonGroup {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 10;
}

.ojeg .GanttSidebar {
    height: auto;
}

/* Sidebar on NJEG */
.njeg .GanttSidebar {
    border-right: 1px solid #ddd;
    height: auto;
    max-height: var(--njeg-max-height);
}

.teamSkills .SkillsTable .b-sidebar-outer,
.teamSkills .SkillsTable .b-sidebar {
    min-height: 500px;
    z-index: 1000;
}

.teamSkills .picker-container {
    height: fit-content;
    min-height: 320px;
}

.job-edit .gantt-labels-row > span:not(.badge),
.job-edit .gantt-head-row > span:not(.badge),
.job-edit .gantt-labels-row > a:not(.badge):not(.button-select),
.job-edit .gantt-ellipsis-wrapper {
    max-width: calc(100% - 30px);
}

/*icon for a specialist*/
.gantt-labels-row .fa-user {
    color: #83b0ff;
}

/*row label for a coach*/
.gantt-labels-row .fa-user-plus {
    color: #5b78ab;
}

/*row label icon for a person outside coaching model*/
.gantt-labels-row .fa-user-times {
    color: #868686;
}

.gantt-labels-row {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
    font-weight: var(--font-weight-regular);
    font-size: 13px;
    color: var(--neutral-grey-d5);
}

.gantt-labels-row.selected {
    color: #212529;
    font-weight: var(--font-weight-bold);
}

/*aligning checkbox and label on the unassigned gantt for check all - provisional until proper component is used LU: 11-01-2023 */
.gantt-labels-head-row .form-check {
    display: flex;
    align-items: center;
}

.gantt-labels-head-row .form-check input[type="checkbox"] {
    margin-top: 0;
}

.gantt-labels-head-row .form-check label {
    margin-bottom: 0;
}

/* END of select all checkbox and label */

.gantt-labels-head-row .form-check .form-check-input,
.gantt-labels-row .form-check .form-check-input {
    /* this will be cleaned up once the gantt code will be updated LU:11-01-2023 and the proper component will be used */
    width: 16px;
    height: 16px;
}

.gantt-label-endCell {
    align-items: center;
    display: flex;
    float: right;
    flex: 0 0 40px;
    max-width: 40px;
    flex-direction: row-reverse;
    padding-right: 2px;
    padding-top: 2px;
}

.utilisation-slim-view-visible .gantt-label-endCell {
    padding-top: 7px;
}

.gantt-label-link,
.gantt-label-link-individual-gantt {
    color: var(--neutral-grey-d5);
    font-size: 13px;
    max-width: 100%;
    line-height: 24px;
    height: 100%;
    padding-top: 1px;
    vertical-align: top;
}

.gantt-label-link:hover,
.gantt-label-link:active,
.gantt-label-link:visited {
    color: var(--neutral-black-14);
}
.gantt-label-link-individual-gantt:active,
.gantt-label-link-individual-gantt:visited {
    color: var(--neutral-grey-d5);
}

.gantt-label-link-individual-gantt:hover {
    color: var(--neutral-black-14);
}

a:not([href]):hover {
    color: initial;
    text-decoration: underline;
}

.gantt-label-name {
    padding-left: 0;
}

.gantt-body {
    display: inline-block;
}

.gantt-body-background {
    position: absolute;
    width: 100%;
}

.gantt-body-foreground {
    position: absolute;
    height: 100%;
}

.gantt-foreground-col,
.gantt-foreground-col-weekend,
.gantt-foreground-col-nonworkhour {
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    height: 100%;
    border-right: 1px solid #dddddd;
}

.gantt-foreground-col-weekend,
.gantt-foreground-col-nonworkhour {
    background-color: rgba(200, 200, 200, 0.3);
}

.gantt-background-row-alt.row-selected,
.gantt-background-row.row-selected {
    background-color: rgba(0, 0, 0, 0.15);
}

.gantt-background-row-alt {
    background-color: rgba(197, 205, 222, 0.12); /* result is --tinted-grey-14 when overlaid on white */
}

.resource-row {
    height: 27px;
    /* background-color: rgb(219, 219, 219); */
    /* color: white; */
}

.gantt-row {
    position: absolute;
    width: 100%;
}

.gantt-row .job-details {
    left: calc(260px + var(--horizontal-scroll));
}

.gantt-row.no-rows {
    width: auto;
    position: relative;
    left: 0;
    margin-top: 1px;
    height: 28px;
}

.gantt-group {
    position: absolute;
    width: 100%;
}

.items {
    position: absolute;
    height: 100%;
    z-index: 10;
}

.non-working-blocks,
.limit-blocks,
.unavailability-blocks,
.job-details {
    position: absolute;
    height: 100%;
}

.non-working-blocks {
    z-index: 1;
}

.limit-blocks {
    z-index: 2;
    top: 0;
}

.unavailability-blocks {
    z-index: 3;
}

.utilisation-canvas {
    z-index: 4;
}

.gantt-utilisation-text-row {
    z-index: 5;
}

.job-details span {
    display: inline-block;
    height: 15px;
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #9d9d9d;
}

.nw-block {
    background-color: rgba(218, 189, 189, 0.3);
    position: absolute;
    height: 100%;
}

/* unit population */
.unit-row .nw-block {
    background-color: transparent;
}

.limit-block {
    background-color: rgba(219, 145, 145, 0.3);
    position: absolute;
    height: 100%;
}

.limit-block.final {
    background-color: rgba(217, 145, 219, 0.3);
}

.unavailability-block {
    background-color: rgba(218, 189, 189, 0.4);
    position: absolute;
    height: 100%;
}

.utilisationcanvas-visible .items {
    top: var(--utilisation-row-height);
    height: calc(100% - 3px);
}

canvas.utilisation-canvas {
    position: absolute;
    top: 0;
    width: 100%;
    height: var(--utilisation-row-height);
    display: none;
    image-rendering: pixelated;
}

.utilisationcanvas-visible canvas.utilisation-canvas {
    display: block;
}

/* In block view .gantt-utilisation-text-row stack higher than the canvas for text legibility */
.utilisationcanvas-visible:not(.utilisation-blocks) canvas.utilisation-canvas {
    z-index: 100;
}

.gantt-utilisation-text-row {
    --left: 0;
    --width: 0;
    height: var(--utilisation-row-height);
    line-height: var(--utilisation-row-height);
    position: relative;
    white-space: nowrap;
}

.gantt-utilisation-hours-text {
    display: inline-block;
    font-weight: var(--font-weight-regular);
    text-align: center;
    position: relative;
    left: calc(var(--left) * var(--pixels-per-hour));
    width: calc(var(--width) * var(--pixels-per-hour));
    border-right: 0.5px solid #ffffffba;
    border-left: 0.5px solid #ffffffba;
}

canvas.non-working-blocks {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

#utilisationTooltip {
    visibility: hidden; /* using visibility:hidden rather than display:none so that the element always has a height */
    pointer-events: none;
    z-index: 2000020;
    display: block;
}

#utilisationTooltip .arrow {
    left: 54px; /* left should be (utilisationTooltipContent.width / 2) - 6 */
}

#utilisationTooltipContent {
    width: 120px; /* if changing this, change the style above too and the left positioning code in initUtilisationTooltip in ganttController*/
}

#utilisationBlockShadow {
    transition: box-shadow 0.1s;
    position: absolute;
    height: var(--utilisation-row-height);
    z-index: 500;
    pointer-events: none;
    display: none;
}

#utilisationBlockShadow.hovered {
    box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.2);
    display: block;
}

#itemTooltip {
    opacity: 0; /* using opacity rather than display:none so that the element always has a height */
    pointer-events: none;
    z-index: 2000020;
    display: block;
}

/*  Default colours commented out
    DOT specific colours uncommented
*/

.umin {
    /* background-color: rgba(69, 117, 180, 0.8); */
    /* background-color: rgba(57, 208, 59, 0.8); */
    background-color: rgba(17, 116, 255, 0.8);
}

.u-3 {
    /* background-color: rgba(116, 173, 209, 0.8); */
    background-color: rgba(255, 252, 103, 0.8);
}

.u-2 {
    /* background-color: rgba(171, 217, 233, 0.8); */
    background-color: rgba(255, 252, 103, 0.8);
}

.u-1 {
    /* background-color: rgba(224, 243, 248, 0.8); */
    background-color: rgba(255, 252, 103, 0.8);
}

.uneutral {
    /* background-color: rgba(255, 255, 191, 0.8); */
    background-color: none;
}

.u1 {
    /* background-color: rgba(254, 224, 144, 0.8); */
    background-color: rgba(253, 174, 97, 0.8);
}

.u2 {
    /* background-color: rgba(253, 174, 97, 0.8); */
    background-color: rgba(215, 48, 39, 0.8);
}

.u3 {
    /* background-color: rgba(244, 109, 67, 0.8); */
    background-color: rgba(215, 48, 39, 0.8);
}

.umax {
    /* background-color: rgba(215, 48, 39, 0.8); */
    background-color: rgba(215, 48, 39, 0.8);
}

.gantt-row-height {
    height: 2em;
}

.row-label-selectable {
    transition: background-color 0.4s;
}

.row-label-selectable:hover {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.main-gantt-time-header-selectable:hover {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.gantt-item {
    /* These variables are set in ganttHTML, below are just fallbacks */
    --borderColor: rgb(0 0 0 / 30%);
    /* AR: a fallback bg color would be nice but there's a flash of the default when a solve completes - we'll need to stop that initial render flash first */
    /*--backgroundColor: rgba(103,185,91,1.0);*/
    --color: var(--text-white);
    position: absolute;
    height: 23px;
    min-width: 2px;
    border-radius: 3px;
    border: 1px solid var(--borderColor);
    background-color: var(--backgroundColor);
    color: var(--color);
    transition: box-shadow 0.1s;
    display: flex;
    justify-content: space-between;
}

.gantt-item .gantt-item-content .fa.error-flag {
    flex-grow: 0;
    flex-basis: 0;
}

.gantt-item .gantt-item-content .item-name {
    flex-grow: 1;
}

.task-overlay-copy {
    cursor: not-allowed;
    display: flex;
    box-shadow: none !important;
    position: fixed !important;
}

.task-overlay-copy .item-resize-handle-start {
    border-radius: 2px 0 0 2px;
    flex-shrink: 0;
    position: static;
}

.task-overlay-copy .item-name {
    cursor: default;
}

.task-overlay-copy .fas {
    cursor: not-allowed;
}

.engagement-view .gantt-item .gantt-item-content .item-name,
.individual-gantt .gantt-item .gantt-item-content .item-name {
    text-align: center;
}

.utilisation-block {
    text-align: center;
}

.gantt-item.unselected,
.job-editor-gantt-item-default.unselected {
    opacity: 0.65;
}

.gantt-item-filtered {
    opacity: 0.3 !important;
}

.gantt-item-filtered .gantt-item-content {
    font-weight: var(--font-weight-regular) !important;
}

.gantt-item:hover {
    -webkit-box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.3);
    -moz-box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.3);
    box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.3);
}

.gantt-item.unselected:hover {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(58, 58, 58, 0.2);
    -moz-box-shadow: 1px 1px 4px 1px rgba(58, 58, 58, 0.2);
    box-shadow: 1px 1px 4px 1px rgba(58, 58, 58, 0.2);
}

.gantt-item-filtered.unselected:hover {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(58, 58, 58, 0.6);
    -moz-box-shadow: 1px 1px 4px 1px rgba(58, 58, 58, 0.6);
    box-shadow: 1px 1px 4px 1px rgba(58, 58, 58, 0.6);
    opacity: 0.28;
}

.gantt-item.unavailability {
    /* default unavailability color but can be set via javascript e.g. trait colors */
    --backgroundColor: var(--neutral-brown-12);

    background-color: var(--backgroundColor);
    background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 50%);
    background-size: 10px 10px;
}

.gantt-item.placeholder {
    background-color: rgba(211, 211, 211, 0.8);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0.2) 10px);
    background-size: 1000px 1000px;
}

.gantt-item,
.gantt-item .gantt-item-content {
    cursor: pointer;
}

.gantt-item.worker-editable,
.gantt-item.worker-editable .gantt-item-content {
    cursor: ns-resize;
}

.gantt-item.time-editable,
.gantt-item.time-editable .gantt-item-content {
    cursor: ew-resize;
}

.gantt-item.worker-editable.time-editable,
.gantt-item.worker-editable.time-editable .gantt-item-content {
    cursor: move;
}

.gantt-item-time-fixed,
.gantt-item-time-fixed.selected-item {
    border-left: 2px solid black;
    border-right: 2px solid black;
}

.gantt-item-worker-fixed,
.gantt-item-worker-fixed.selected-item {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.gantt-item-resolve-fixed,
.gantt-item-resolve-fixed.selected-item,
.gantt-item-resolve-fixed.unselected {
    border: 2px solid black !important;
}

.gantt-item-worker-fixed > .gantt-item-content {
    height: 19px;
    line-height: 19px;
}

.gantt-item-drag-shadow {
    background-color: rgba(0, 0, 0, 0.15);
}

.gantt-item.gantt-item-dragging {
    z-index: 1000001; /* 1 higher than the main gantt labels so as to be above job rows in engagement view */
}

.gantt-drag-unassign-zone {
    z-index: 1000002;
    position: absolute;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out;
}

.gantt-drag-unassign-zone-uneditable:hover {
    opacity: 0.25;
}

.gantt-item-content {
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 2px;
    height: 21px;
    line-height: 22px;
    border-radius: 2px;
    position: relative;
    flex-grow: 1;
    display: flex;
}

.worker-task .gantt-item-content {
    display: block;
}

.hat-container {
    height: 100%;
    width: 20px;
}

.suggestions-mode .hat-container > .suggestion-num {
    position: absolute;
    z-index: 3;
    font-size: 10px;
    top: 0;
    right: 3px;
}

.suggestions-mode .hat-container > .suggestion-hat {
    width: 0;
    height: 0;
    border: solid 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.hat-container.with-handle > .suggestion-hat {
    margin-right: 7px;
}

.hat-container.with-handle > .suggestion-num {
    right: 9px;
}

.gantt-item:not(.selected-item) > .gantt-item-content {
    font-weight: 300;
}

.gantt-item-content.with-handle {
    margin-right: 7px; /* .item-resize-handle width */
}

.gantt-item-draft .gantt-item-content {
    color: black;
    background: white;
    margin: 1px;
    height: 19px;
    line-height: 19px;
}

.gantt-item-draft .item-resize-handle ~ .gantt-item-content {
    margin-right: 6px;
}

.gantt-item-delete-proposal {
    text-decoration: line-through;
}

.suggestions-mode .gantt-item-proposal {
    transition: background-color 0.2s;
}

.gantt-item-proposal .gantt-item-content {
    background: transparent;
    color: black;
}

.gantt-item-proposal .item-resize-handle ~ .gantt-item-content {
    margin-right: 6px;
}

.gantt-item-worker-fixed .item-resize-handle {
    height: 20px; /* Smaller height to account for border */
}

.item-resize-handle {
    z-index: 10;
    position: absolute;
    right: 0;
    height: 22px;
    text-align: center;
    width: 7px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    color: var(--text-inverse);
    cursor: col-resize;
    border-radius: 0 2px 2px 0; /*TL, TR, BR, BL*/
    line-height: 19px;
}

.handle {
    cursor: col-resize;
}

.bounds-container {
    position: absolute;
    height: 100%;
    width: 100%;
}

.gantt-item-bounds {
    --row-height: inherit;
    pointer-events: none;
    height: var(--row-height);
    position: absolute;
    border-top: 1px dotted rgb(151, 167, 151);
    border-bottom: 1px dotted rgb(151, 167, 151);
    z-index: 39;
    text-align: center;
}

.utilisationcanvas-visible .gantt-item-bounds,
.utilisationcanvas-visible .gantt-job-bounds {
    height: calc(var(--row-height) - var(--utilisation-row-height));
}

/* AR: probably want to use the new colour palette for bounds */

.gantt-item-bounds-in {
    border-color: rgba(151, 210, 151, 0.9);
    background-color: rgba(151, 210, 151, 0.4);
}

.gantt-item-bounds-out {
    border-color: rgba(255, 177, 163, 0.9);
    background-color: rgba(255, 177, 163, 0.4);
}

.gantt-item-bounds-default {
    border-color: rgba(200, 200, 200, 0.9);
    background-color: rgba(200, 200, 200, 0.4);
}

.gantt-item-bounds-selected {
    border-color: rgba(70, 172, 255, 0.9);
    background-color: rgba(70, 172, 255, 0.4);
    z-index: 50;
}

.gantt-job-bounds {
    --row-height: inherit;
    pointer-events: none;
    height: var(--row-height);
    position: absolute;
    border-top: 1px dashed rgb(151, 167, 151);
    border-bottom: 1px dashed rgb(151, 167, 151);
    z-index: 38;
    text-align: center;
}

.gantt-job-bounds-in {
    border-color: rgba(70, 172, 255, 0.9);
    /*background-color: rgba(151,210,151,0.4);*/
}

.gantt-job-bounds-out {
    border-color: rgba(255, 177, 163, 0.9);
    /*background-color: rgba(255,177,163,0.4);*/
}

.gantt-job-bounds-default {
    border-color: rgba(200, 200, 200, 0.9);
    /*background-color: rgba(200, 200, 200, 0.4);*/
}

.gantt-job-bounds-selected {
    border-color: rgba(70, 172, 255, 0.9);
    /*background-color: rgba(70, 172, 255, 0.4);*/
    z-index: 50;
}

.btn-job-bounds {
    color: white;
    border-color: rgba(70, 172, 255, 0.9);
    background-color: rgba(70, 172, 255, 0.9);
}

.btn-job-bounds:hover,
.btn-job-bounds:focus,
.btn-job-bounds:active,
.open > .dropdown-toggle.btn-job-bounds {
    color: white;
    background-color: rgba(70, 172, 255, 0.9);
}

.btn-task-bounds {
    color: white;
    border-color: rgba(151, 210, 151, 0.9);
    background-color: rgba(151, 210, 151, 0.9);
}

.btn-task-bounds:hover,
.btn-task-bounds:focus,
.btn-task-bounds:active,
.open > .dropdown-toggle.btn-task-bounds {
    color: white;
    background-color: rgba(151, 210, 151, 0.9);
}

.bounds-handle-left {
    width: 4px;
    height: 100%;
    left: -4px;
    background-color: rgba(151, 210, 151, 0.9);
    position: absolute;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 50;
}

.bounds-handle-right {
    width: 4px;
    height: 100%;
    right: -4px;
    background-color: rgba(151, 210, 151, 0.9);
    position: absolute;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 50;
}

.gantt-item-bounds.editable-bounds .bounds-handle-left {
    width: 6px;
    left: -6px;
}

.gantt-item-bounds.editable-bounds .bounds-handle-right {
    width: 6px;
    right: -6px;
}

.gantt-item-bounds.editable-bounds .bounds-handle-left,
.gantt-item-bounds.editable-bounds .bounds-handle-right,
.gantt-job-bounds.editable-bounds .bounds-handle-left,
.gantt-job-bounds.editable-bounds .bounds-handle-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gantt-item-bounds.editable-bounds .bounds-handle-left,
.gantt-item-bounds.editable-bounds .bounds-handle-right {
    cursor: col-resize;
    pointer-events: initial;
    z-index: 10000;
}

.gantt-item-bounds.editable-bounds .bounds-handle-left > span,
.gantt-item-bounds.editable-bounds .bounds-handle-right > span,
.gantt-job-bounds.editable-bounds .bounds-handle-left > span,
.gantt-job-bounds.editable-bounds .bounds-handle-right > span {
    line-height: 26px;
    color: white;
}

.gantt-item-bounds-out .bounds-handle-right,
.gantt-item-bounds-out .bounds-handle-left {
    background-color: rgba(255, 177, 163, 0.9);
}

.gantt-item-bounds-default .bounds-handle-right,
.gantt-item-bounds-default .bounds-handle-left {
    background-color: rgba(200, 200, 200, 0.9);
}

.gantt-item-bounds-selected .bounds-handle-right,
.gantt-item-bounds-selected .bounds-handle-left {
    background-color: rgba(70, 172, 255, 0.9);
}

.gantt-job-bounds-out .bounds-handle-right,
.gantt-job-bounds-out .bounds-handle-left {
    background-color: rgba(255, 177, 163, 0.9);
}

.gantt-job-bounds-default .bounds-handle-right,
.gantt-job-bounds-default .bounds-handle-left {
    background-color: rgba(200, 200, 200, 0.9);
}

.gantt-job-bounds-in .bounds-handle-right,
.gantt-job-bounds-in .bounds-handle-left {
    background-color: rgba(70, 172, 255, 0.9);
}

.request .bounds-handle-right {
    cursor: e-resize;
}

.request .bounds-handle-left {
    cursor: w-resize;
}

.gantt-item-notvalidated {
    opacity: 0.6;
}

.gantt-item-bounds:not(.editable-bounds) .bounds-inner-span,
.gantt-item-bounds:not(.editable-bounds) .bounds-inner-span {
    display: none;
}

.gantt-item-bounds.editable-bounds .bounds-inner-span,
.gantt-item-bounds.editable-bounds .bounds-inner-span {
    display: block;
}

.error-flag {
    align-items: center;
    background-color: white;
    display: none;
    flex-shrink: 0;
    margin-right: 2px;
    position: relative;
    right: 2px;
    color: var(--warning);
    width: 12px;
    border-radius: 1px;
    z-index: 1;
}

.gantt-item-error .error-flag {
    color: var(--danger);
}

.gantt-item-warning .error-flag,
.gantt-item-error .error-flag {
    display: flex;
}

.gantt-item-warning .error-flag::before,
.gantt-item-error .error-flag::before {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.gantt-item-warning .error-flag.fa-incomplete-check-icon::before,
.gantt-item-error .error-flag.fa-minus-circle::before {
    font-size: 10px;
}

.e-resize {
    cursor: e-resize !important;
}

.w-resize {
    cursor: w-resize !important;
}

body.move,
body.move *,
.move,
.move * {
    cursor: move !important;
}

body.horizontal,
body.horizontal *,
.horizontal,
.horizontal * {
    cursor: e-resize;
}

body.vertical,
body.vertical *,
.vertical,
.vertical * {
    cursor: n-resize;
}

body.resize,
body.resize *,
.resize,
.resize * {
    cursor: col-resize !important;
}

body.bounds-resize,
body.bounds-resize *,
.bounds-resize,
.bounds-resize * {
    cursor: col-resize !important;
}

body.no-drop,
body.no-drop * {
    cursor: no-drop !important;
}

.over {
    background-color: red !important;
    color: var(--text-inverse);
}

.gantt-item-review .gantt-item-content {
    font-weight: bolder;
}

.middle-task .gantt-item-content {
    font-weight: bolder;
}

.last-task .gantt-item-content {
    font-style: italic;
}

.stale .gantt-item-content span {
    text-decoration: line-through;
}

div[class^="fixed"] {
    color: var(--text-inverse);
    opacity: 0.7;
}

i.icon-continuity {
    color: gold;
}

i.suggested-star {
    padding-top: 0.5em;
    position: absolute;
    left: 6px;
    color: rgb(102, 160, 102);
}

i.preferred-skill {
    padding-top: 0.5em;
    position: absolute;
    left: 6px;
    color: rgb(102, 160, 102);
}

i.disabled-skill {
    padding-top: 0.5em;
    position: absolute;
    left: 6px;
    color: #777;
}

.timeLine {
    z-index: 50;
    pointer-events: none;
}

.nowLine {
    border-right: 2px solid var(--accent-11);
    z-index: 101; /* 1 more than utilisation z-index*/
}

.nowLine-shadow {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 2px;
    box-shadow: 0 0 5px rgba(0 0 0 / 40%);
}

.nowLine.job-edit-now-line {
    left: 0;
    background-color: rgba(0, 0, 0, 0.15);
    border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.nowDot {
    background: var(--accent-11);
    height: 10px;
    width: 10px;
    bottom: -5px;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
}

.show-hours #mainGanttHeaders .nowDot {
    bottom: -30px;
}

.show-week #unscheduledGanttHeaders .nowDot {
    bottom: 28px;
}

#dragSelectRectangle,
#unscheduledDragSelectRectangle {
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    z-index: 50;
}

.unscheduled-range-from,
.unscheduled-range-to,
.solver-range-from,
.solver-range-to {
    background-color: rgba(0, 0, 0, 0.15);
}

.unscheduled-range-from,
.solver-range-from {
    border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.unscheduled-range-to,
.solver-range-to {
    border-left: 2px solid rgba(0, 0, 0, 0.2);
}

.solver-range-resize-handle {
    width: 8px;
    height: 100%;
    display: inline-block;
    position: absolute;
    cursor: ew-resize;
    z-index: 500;
}

.solver-range-resize-handle:hover,
.solver-range-resize-handle.hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.solver-range-resize-handle.dragging {
    background-color: rgba(0, 0, 0, 0.16);
}

#fromLine {
    border-right: 2px dashed rgba(0, 0, 0, 0.5);
}

#toLine {
    border-right: 2px dashed rgba(0, 0, 0, 0.5);
}

.btn[disabled] {
    pointer-events: auto;
}

.nvd3.multiChart .axis .nv-axis line {
    stroke: #e0e0e0;
    fill: none;
}

.drag:after,
.drag:after {
    content: attr(title);
    font-size: 10px;
    background-color: var(--surface-overlay);
    color: var(--text-inverse);
    width: 100%;
    height: 100%;
    top: 0px;
    position: absolute;
}

/* removes the added x in Edge in the Search Gantt */
input::-ms-clear {
    display: none;
}

.invisible,
.hidden-common-parent,
.gantt-item-invisible,
.drag-rectangle-invisible {
    display: none !important;
}

/*
This means any event on any elements tagged with this will be pass through any mouse events.
As a consequence, no clicks or any other mouse actions will be possible while the element is tagged.
Use sparingly and only temporarily.
*/
.mouse-invisible {
    pointer-events: none;
}

.coach {
    border-top: 1px solid #b4b4b4;
}

.specialist {
    padding-left: 40px;
}

.selected-item {
    z-index: 1000;
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    animation-delay: 1s;
    font-weight: 500;
    -webkit-box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.4);
    -moz-box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.4);
    box-shadow: 1px 1px 6px 2px rgba(64, 64, 64, 0.4);
    filter: brightness(90%);
}

.selected-item .gantt-item-content {
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }
    100% {
        -moz-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
}

.gantt-left-edge {
    position: relative;
}

.btn.slim {
    padding-left: 6px;
    padding-right: 6px;
}

div.signalr-updated {
    border-radius: 0px;
}

div.signalr-updated div.gantt-item-content {
    color: red;
    border-radius: 0px;
}

div.signalr-updated .error-flag {
    background-color: blue;
}

#popover,
.tabbed-sidebar {
    border-left: 1px solid #ccc;
    width: 390px;
}

#selection div.header,
#popover div.header {
    border-bottom: 1px solid #6c757d;
    padding: 10px;
}

.popover-section-content {
    padding-left: 23px;
}

/* --- errors and warnings styles to accomodate for a button at the end of the row - will work anywhere else if the .errors-warnings class taken out of css --- */
.errors-warnings .popover-section-content {
    margin-top: 8px;
}

.errors-warnings .popover-section-content .row {
    justify-content: space-between;
    min-height: 28px;
    align-items: center;
}

.errors-warnings .popover-section-content .row .bullet-icon {
    flex-basis: 0;
    flex-grow: 0;
}

.economics .popover-section-content .row .bullet-text,
.errors-warnings .popover-section-content .row .bullet-text {
    flex-basis: 0;
    flex-grow: 1;
}

.errors-warnings .popover-section-content .row .gantt-sidebar-btn {
    flex-basis: 0;
    flex-grow: 0;
    margin-left: 10px;
}

.errors-warnings .popover-section-content .row .gantt-sidebar-btn.ng-hide {
    display: block !important;
    visibility: hidden;
}

/* end of errors-warnings styles */

.popover-section-content .row.flex-align-right {
    justify-content: flex-end !important;
}

.popover-section-content .label,
.popover-section-content .label-custom {
    margin-top: 10px;
}

.popover-section-heading {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.popover-section-heading .collapsible-header {
    width: 100%;
}

.popover-section-heading .collapsible-header,
.popover-section-heading .collapsible-header > div {
    display: flex;
    align-items: center;
}

#selection .pending-data,
#popover .pending-data {
    color: rgba(0, 0, 0, 0.3);
}

#selection div.content .section,
#popover div.content .section {
    padding: 10px;
    border-bottom: 1px solid #6c757d;
}

#selection.job-editor-team-sidebar div.content .section,
#popover.job-editor-team-sidebar div.content .section {
    padding-right: 10px;
}

#selection div.content .section-header,
#popover div.content .section-header {
    font-weight: var(--font-weight-bold);
    margin-right: 5px;
    max-width: 220px;
}

#selection div.content .job-stat-box,
#popover div.content .job-stat-box {
    width: 100%;
    margin-bottom: 10px;
}

#selection div.content .job-stat-box h3,
#popover div.content .job-stat-box h3 {
    font-size: 0.9em;
    margin-bottom: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#selection div.content .job-stat-box p,
#popover div.content .job-stat-box p {
    font-weight: var(--font-weight-bold);
    margin: 0;
}

#selection div.content .row,
#selection div.header .row,
#popover div.content .row,
#popover div.header .row {
    margin: 2px 0 0px 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: row;
    flex-wrap: wrap;
}

#selection div.content .row custom-member,
#popover div.content .row custom-member {
    width: 100%;
}

#selection div.content .row.buttons,
#selection div.header .row.buttons,
#popover div.content .row.buttons,
#popover div.header .row.buttons {
    justify-content: flex-start;
    margin-top: 8px;
}

.row.buttons > div,
.row.buttons > button {
    margin-right: 5px;
}

#selection div.header .job-name,
#popover div.header .job-name {
    margin: 0;
    max-width: 270px;
    overflow-wrap: break-word;
}

#selection div.header .task-name,
#popover div.header .task-name {
    margin-bottom: 0;
    max-width: 270px;
    overflow-wrap: break-word;
    color: #666;
    font-weight: var(--font-weight-semibold);
}

#selection div.content .row .flex,
#selection div.header .row .flex,
#popover div.content .row .flex,
#popover div.header .row .flex {
    flex-grow: 1;
}

#selection div.content .section .row .center,
#popover div.content .section .row .center {
    text-align: center;
}

#selection .section .date-input-wrapper,
#selection .section .dates-wrapper,
#popover .section .date-input-wrapper,
#popover .section .dates-wrapper {
    width: 40%;
    flex-grow: 1;
    text-align: center;
}

.suggestion-row .date-input-wrapper {
    flex-grow: 1;
}

#selection .section .dates-wrapper > span,
#popover .section .dates-wrapper > span {
    padding: 0 5px;
    text-align: center;
}

#selection div.content div.bullet-icon,
#popover div.content div.bullet-icon {
    margin-right: 10px;
    text-align: center;
    color: #444;
}

#selection div.content .section .show-priority .fal,
#popover div.content .section .show-priority .fal {
    /* the icon to show priority is smaller than the other icons - font-awesome issue; the styles are to make the icon the same size*/
    font-size: 18px;
    padding: 3px 3px 0 3px;
}

#selection div.content div.bullet-button,
#popover div.content div.bullet-button {
    width: 28px;
    margin-right: 3px;
    float: left;
    text-align: center;
}

#selection div.content div.bullet-text,
#popover div.content div.bullet-text {
    display: flex;
    flex: 1;
}

#selection .bounds-separator,
#popover .bounds-separator {
    text-align: center;
    margin: 0 3px;
}

#selection .bounds-separator.bounds-separator-editable,
#popover .bounds-separator.bounds-separator-editable {
    width: 29px;
}

.delete-suggestion {
    text-decoration: line-through;
}

/* AR: all these flex bits give us the correct heights for adding a scrollbar to child elements of the sidebar
 Test scrolling in ODA Summary screen v2 if removing
 */
.tabbed-sidebar {
    display: flex;
    flex-direction: column;
}

.tabbed-sidebar .tab-content {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 100%;
}

.tabbed-sidebar .tab-pane {
    position: relative;
}

#metrics.active,
#selection.active {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#selection .content {
    overflow-y: auto;
}

/* AR: scrollbar end */

#panelResizer:hover {
    cursor: ns-resize;
    background-color: rgba(0, 0, 0, 0.1);
}

#panelResizer.dragging {
    background-color: rgba(0, 0, 0, 0.1);
}

/* first clause lets Vue DropdownButton which lacks stable id / datatest
* assume the same size as regular .gantt-sidebar-btn (for DEVO-155859)
*/
div.gantt-sidebar-row > div.DropdownButton > button,
.gantt-sidebar-btn {
    height: 28px;
    padding: 0 8px;
}

.gantt-sidebar-btn:not(:last-of-type) {
    margin-right: 5px;
}

.gantt-sidebar-btn-slim {
    background-color: white;
    border-color: white;
    color: #6c757d;
    height: 24px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0 7px;
}

.gantt-sidebar-btn-slim:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: var(--text-inverse);
}

.btn-group > .gantt-sidebar-btn {
    margin-right: 0;
}

.progress-label {
    font-size: 22px;
    color: #999;
    margin-bottom: 5px;
}

.date-bounds button {
    margin: 0 3px;
}

.task-traits-table {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
}

.trait-category-group {
    flex-grow: 1;
}

.trait-category .edit-category-icon {
    color: #333;
    line-height: 20px;
    padding: 4px 8px;
}

.trait-category-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #ced4da;
    padding: 10px;
    align-items: center;
    border-right: transparent;
}

.task-traits-table .trait-category-group:last-of-type {
    border-right: 1px solid #ced4da;
}

.trait-category-header > div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.trait-category-header button {
    background-color: var(--surface-default);
    max-height: 35px;
}

.trait-category-header button:hover {
    background-color: #6c757d;
}

.trait-category-header-title {
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trait-category-header.badge {
    font-weight: var(--font-weight-regular);
    margin: 0 5px;
}

#selection div.content .gantt-sidebar-engagements.row,
#popover div.content .gantt-sidebar-engagements.row {
    align-items: center;

    /* reversed for the 'red on mousedown' selector trickery below */
    flex-direction: row;
    margin-top: 5px;
}

#selection div.content .gantt-sidebar-engagements.row:not(:last-child),
#popover div.content .gantt-sidebar-engagements.row:not(:last-child) {
    border-bottom: 1px dashed #ced4da;
    padding-bottom: 5px;
}

/* deselect engagement button and sibling text turns red on mousedown */
.gantt-sidebar-engagements .gantt-sidebar-btn-slim:not(:disabled):not(.disabled):active {
    background-color: var(--danger);
    color: var(--text-inverse);
}

#selection div.content .gantt-sidebar-engagements .flex-text-truncated,
#popover div.content .gantt-sidebar-engagements .flex-text-truncated {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#selection div.content .gantt-sidebar-engagements .flex-text-fixed,
#popover div.content .gantt-sidebar-engagements .flex-text-fixed {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- gantt search modal, engagement view modal --- */
.viewLoad-feedback {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem;
    position: sticky;
    width: 100%;
    justify-content: space-between;
}

.modify-report {
    margin-right: 1rem;
    display: inline;
    padding-left: 1rem;
}

.viewLoad-feedback .viewLoad-validation {
    display: flex;
    align-self: center;
    justify-content: flex-end;
    flex-grow: 1;
    margin-right: 0.3rem;
    max-width: 700px;
}

.viewLoad-feedback .search-warning,
.viewLoad-feedback .search-error {
    color: var(--warning);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.viewLoad-feedback .search-error {
    color: var(--danger);
}

.viewLoad-feedback .results-text {
    align-self: center;
    margin-right: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.viewLoad-feedback .results-n-confirm {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

/* --- END of gantt search modal, engagement view modal --- */

/* ---- Gantt Overlay and shadow item css */

.split-point-indicator {
    position: absolute;
    top: -0.8px; /* AR: This is the task border width, believe it or not */
    left: 0;
    border-right: 2px solid black;
    z-index: 10;
    height: 23px;
    pointer-events: none;
}

.gantt-item-worker-fixed .split-point-indicator {
    height: 20px; /* Smaller height to account for border */
}

.debug-snap-line {
    position: absolute;
    top: -2px;
    left: -3px;
    border-left: 2px dashed salmon;
    z-index: 10;
    height: 26px;
}

.split-popup {
    align-items: center;
    background-color: #61656c;
    border-color: #61656c;
    border-radius: 0.25rem;
    bottom: 30px;
    color: white;
    display: flex;
    height: 60px;
    justify-content: center;
    margin-left: -17px;
    padding: 15px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    width: 220px;
}

.split-popup.with-split-point {
    bottom: 31px;
    left: calc(100% - 7px); /* 7px to offset one .item-resize-handle element */
}

.split-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12px;
    border-top: 6px solid black;
    border-top-color: inherit;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.scheduled-warning-label {
    height: 28px;
}

.GanttView-closeUnscheduledGanttButton {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    right: 0;
    top: 10px;
}

.sidebar-open .GanttView-closeUnscheduledGanttButton {
    right: 15px;
}

.GanttView-loadingText {
    padding-top: 10px;
    font-size: 14px;
    color: var(--text-subtle);
}

/* AR: Party Dayshape easter egg */
.party-dayshape .gantt-item {
    animation: party-dayshape 0.8s linear infinite !important;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
    .party-dayshape .gantt-item {
        transition: none !important;
        animation: none !important;
        background-color: #ff479e;
    }
}

@keyframes party-dayshape {
    0%,
    100% {
        background-color: #3df2c2;
        transform: rotate(8deg);
    }
    25% {
        background-color: #7272e9;
        transform: rotate(0deg);
    }
    50% {
        background-color: #ff479e;
        transform: rotate(-8deg);
    }
    75% {
        background-color: #ff8c62;
        transform: rotate(0deg);
    }
}

/* Easter egg end */