.b-grid-base.b-gantt.b-bryntum {
    --b-tree-parent-font-weight      : 600;
    --b-tree-expander-color          : var(--b-grid-cell-color);
    --b-gantt-parent-task-max-height : 1.4em;
    --b-column-lines-major-color     : var(--b-neutral-85);
    --b-gantt-task-box-shadow        : var(--b-elevation-1);
    --b-grid-splitter-width          : 2px;
    --b-gantt-task-border-radius     : 5px;

    --b-avatar-size                  : 0;

    --faded-color                    : color-mix(in oklab, currentColor, transparent 90%);
}

.b-child-count {
    display             : grid;
    place-items         : center;
    width               : 1.8em;
    height              : 1.8em;
    background          : var(--b-primary);
    color               : #fff;
    border-radius       : 0.5em;
    font-size           : .8em;
    margin-inline-start : 2em;
}

.b-icon-tree-leaf {
    visibility          : hidden;
    margin-inline-start : -1.1em;
}

.b-resource-avatar {
    background-color : var(--b-primary-40);
    box-shadow       : 0 0 2px #00000090;
}

.b-scroll-button {
    background : #fff;
    color      : #777;
    box-shadow : var(--b-elevation-2);

    &:hover {
        color : #333;
    }
}

.b-gantt-task-tooltip {
    &, .b-panel-body-wrap {
        background-color : #fff;
    }
}

.b-gantt-task-wrap:not(.b-gantt-task-parent) .b-gantt-task:not(.b-milestone) {
    align-items : flex-start;

    .b-avatar-container {
        display     : flex;
        align-items : flex-end;
        height      : var(--b-avatar-size);

        img {
            margin-inline-end : -.5em;
            transition        : scale .4s;

            &:hover {
                scale   : 1.75;
                z-index : 1;
            }
        }
    }

    .b-gantt-task-content {
        overflow        : visible;
        height          : 100%;
        display         : flex;
        flex-direction  : column;
        justify-content : space-evenly;
    }
}

.b-sch-header-time-axis-cell {
    .b-sch-header-row-0 & {
        font-size   : .7em;
        padding-top : .5em;
        align-items : flex-start;
    }

    .b-sch-header-row-1 & {
        font-size : 1.1em;
    }

    .b-sch-header-row-2 & {
        font-size   : .7em;
        font-weight : normal;
    }

    .b-sch-header-row-0 &,
    &.b-sch-day-header-cell-0 {
        border-inline-start : 1px solid var(--b-grid-header-border-color);
    }
}

.b-horizontal-time-axis {
    /* Top header, W2 Jan 2023 */
    .b-sch-header-row-0 {
        flex                  : 1 0 3em;

        --b-grid-header-color : var(--b-primary);
    }

    /* Bottom headers, 08 & Sun */
    .b-sch-header-row-1,
    .b-sch-header-row-2 {
        flex : 1 0 1.5em;

        &.b-sticky-header .b-sch-header-text {
            position : static; /* Override sticky */
        }
    }
}

.b-show-avatars-in-task {

    .b-avatar-container {
        flex            : 1;
        padding-bottom  : 0.5em;

        --b-avatar-size : 2em;
    }

    .task-name {
        padding-top : .5em;
    }
}

.task-name {
    flex        : 1;
    display     : flex;
    font-size   : .9em;
    padding     : 0.5em 0;
    font-weight : 500;
}

div.b-sch-line {
    .b-grid-header &.b-sch-time-range {
        background-color    : var(--b-color-deep-orange);
        height              : 0.7em !important;
        width               : 0.7em !important;
        border-radius       : 50%;
        margin-inline-start : -0.38em;
        bottom              : 0;
        padding             : 0;
    }

    .b-timeline-subgrid & {
        border-inline-start : 1px solid var(--b-color-deep-orange);
    }
}

.b-gantt-task-tooltip {
    max-width         : none;
    --b-popup-padding : 5em;

    .b-panel-content {
        display               : grid;
        grid-template-columns : 15em auto;
        grid-column-gap       : 2em;
        grid-row-gap          : 2em;
        margin                : 0 !important;
    }

    .field {
        display        : flex;
        flex-direction : column;
        font-weight    : 500;
        gap            : 0.5em;

        label {
            color : #888;
        }
    }

    .b-avatar-container {
        display : flex;
        gap     : 0.3em;
    }
}

.b-sidebar {
    --b-panel-gap          : 2em;
    --b-checkbox-inner-gap : 1em;

    border-inline-start    : 2px solid var(--b-grid-splitter-color);

    h2 {
        font-weight : 600;
        font-size   : 1.3em;
        margin      : 0;
    }
}

.b-gantt.b-animating {
    .b-grid-row,
    .b-avatar-container,
    .b-percent-done-circle {
        transition : all .4s;
    }

    .b-grid-row,
    .b-gantt-task-wrap,
    .b-avatar-container {
        transition-duration : .4s !important;
    }
}

.b-toolbar .fa-bars {
    font-size : 1.3em;
}

.b-percent-done-circle::after {
    color : inherit;
}

.b-scroll-button {
    display         : flex;
    align-items     : center;
    justify-content : center;
    position        : absolute;
    top             : 50%;
    margin-top      : -1em;
    padding         : 1em;
    border-radius   : 50%;

    width           : 2.5em;
    height          : 2.5em;
    z-index         : 2;
    pointer-events  : none;
    opacity         : 0;
    transition      : opacity .4s;
    cursor          : pointer;

    .b-grid-header-scroller:hover & {
        opacity        : 1;
        pointer-events : all;
    }
}

.b-scroll-button-previous {
    inset-inline-start : 0.5em;
}

.b-scroll-button-next {
    inset-inline-end : 0.5em;
}

.b-rtl {
    .b-scroll-button {
        rotate : 180deg;
    }

    .b-grid-header &.b-sch-timerange {
        margin-inline-end : 0.30em;
    }
}

.b-prio {
    display       : flex;
    align-items   : center;
    padding       : .3em 0.75em;
    font-size     : 0.8em;
    border-radius : .5em;
    font-weight   : 400;
    color         : var(--b-color-green);
    background    : var(--faded-color);

    i {
        font-size         : .7em;
        margin-inline-end : 1em;
    }

    &.high {
        color : var(--b-color-red);
    }
}