.gantt-page {
    --gantt-bg: #f5f7fb;
    --gantt-border: #dce3ed;
    --gantt-muted: #667085;
    --gantt-text: #182230;
    --gantt-viewport-offset: 13.5rem;
    background: var(--gantt-bg);
    box-sizing: border-box;
    color: var(--gantt-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 1.25rem;
    width: 100%;
}

.gantt-page.embedded {
    --gantt-viewport-offset: 21rem;
    border: 1px solid var(--gantt-border);
    border-radius: .8rem;
    min-height: 38rem;
    padding: 1rem;
}

.gantt-header,
.gantt-toolbar,
.gantt-message,
.gantt-dependency-editor,
.gantt-dependency-list,
.gantt-dependency-legend,
.gantt-workspace,
.gantt-help {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
}

.gantt-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gantt-header h1 {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing: -.035em;
    margin: .12rem 0;
}

.gantt-header p,
.gantt-eyebrow {
    color: var(--gantt-muted);
    margin: 0;
}

.gantt-eyebrow {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gantt-header-actions,
.gantt-toolbar,
.gantt-dependency-editor {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.gantt-button,
.gantt-refresh,
.gantt-search button {
    align-items: center;
    background: #fff;
    border: 1px solid var(--gantt-border);
    border-radius: .5rem;
    color: #344054;
    cursor: pointer;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 700;
    justify-content: center;
    min-height: 2.3rem;
    padding: .42rem .72rem;
}

.gantt-button:hover:not(:disabled),
.gantt-refresh:hover,
.gantt-search button:hover {
    border-color: #7f56d9;
    color: #6941c6;
}

.gantt-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.gantt-button.primary {
    background: #6941c6;
    border-color: #6941c6;
    color: #fff;
}

.gantt-button.sync {
    gap: .35rem;
    margin-top: 1rem;
}

.gantt-button.sync strong {
    background: #f04438;
    border-radius: 1rem;
    color: #fff;
    font-size: .68rem;
    min-width: 1.15rem;
    padding: .08rem .3rem;
}

.gantt-toolbar {
    background: #fff;
    border: 1px solid var(--gantt-border);
    border-radius: .75rem;
    box-shadow: 0 .15rem .5rem rgba(16, 24, 40, .04);
    margin-bottom: .8rem;
    padding: .7rem;
}

.gantt-toolbar label,
.gantt-dependency-editor label {
    display: grid;
    gap: .2rem;
}

.gantt-toolbar label > span,
.gantt-pane-switch > span,
.gantt-dependency-editor label > span {
    color: var(--gantt-muted);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gantt-toolbar select,
.gantt-toolbar input,
.gantt-dependency-editor select,
.gantt-dependency-editor input {
    background: #fff;
    border: 1px solid #cfd6df;
    border-radius: .45rem;
    color: #182230;
    font-size: .8rem;
    min-height: 2.3rem;
    padding: .38rem .55rem;
}

.gantt-search {
    flex: 1 1 17rem;
}

.gantt-search > div {
    display: flex;
}

.gantt-search input {
    border-radius: .45rem 0 0 .45rem;
    flex: 1;
    min-width: 9rem;
}

.gantt-search button {
    border-radius: 0 .45rem .45rem 0;
}

.gantt-toggle {
    align-items: center;
    display: flex !important;
    gap: .4rem !important;
    margin: 1rem .25rem 0;
}

.gantt-toggle input {
    min-height: auto;
}

.gantt-toggle span {
    text-transform: none !important;
}

.gantt-dependency-toggle span {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
}

.gantt-dependency-toggle strong {
    align-items: center;
    background: #f4f3ff;
    border: 1px solid #d9d6fe;
    border-radius: 1rem;
    color: #5925dc;
    display: inline-flex;
    font-size: .65rem;
    height: 1.15rem;
    justify-content: center;
    min-width: 1.15rem;
    padding: 0 .24rem;
}

.gantt-pane-switch {
    display: grid;
    gap: .2rem;
}

.gantt-pane-switch > div {
    border: 1px solid #cfd6df;
    border-radius: .45rem;
    display: inline-flex;
    overflow: hidden;
}

.gantt-pane-switch button {
    background: #fff;
    border: 0;
    border-right: 1px solid #cfd6df;
    color: #475467;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    min-height: 2.2rem;
    padding: .38rem .55rem;
}

.gantt-pane-switch button:last-child {
    border-right: 0;
}

.gantt-pane-switch button:hover,
.gantt-pane-switch button:focus-visible {
    background: #f4f3ff;
    color: #5925dc;
    outline: none;
}

.gantt-pane-switch button:focus-visible {
    box-shadow: inset 0 0 0 2px #7f56d9;
}

.gantt-pane-switch button.active {
    background: #6941c6;
    color: #fff;
}

.gantt-refresh {
    font-size: 1.05rem;
    margin-top: 1rem;
    min-width: 2.3rem;
    padding: .3rem;
}

.gantt-message {
    border-radius: .55rem;
    margin-bottom: .8rem;
    padding: .62rem .78rem;
}

.gantt-message.success {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #067647;
}

.gantt-message.error {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
}
.gantt-message.warning {
    background: #fff8e6;
    border: 1px solid #e7c96d;
    color: #725207;
}

.gantt-dependency-editor {
    background: #fff;
    border: 1px solid #c7d7fe;
    border-radius: .75rem;
    box-shadow: 0 .55rem 1.5rem rgba(16, 24, 40, .08);
    margin-bottom: .8rem;
    padding: .75rem;
}

.gantt-dependency-editor > div {
    display: grid;
    margin-right: auto;
}

.gantt-dependency-editor > div span {
    color: var(--gantt-muted);
    font-size: .7rem;
}

.gantt-dependency-editor select {
    max-width: 18rem;
}

.gantt-dependency-editor .gantt-lag input {
    width: 5.5rem;
}

.gantt-dependency-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .7rem;
}

.gantt-dependency-list > span {
    align-items: center;
    background: #f4f3ff;
    border: 1px solid #d9d6fe;
    border-radius: 1rem;
    color: #5925dc;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 750;
    gap: .3rem;
    padding: .22rem .28rem .22rem .55rem;
}

.gantt-dependency-list > span.start-to-start {
    background: #eff8ff;
    border-color: #b2ddff;
    color: #175cd3;
}

.gantt-dependency-list > span.finish-to-finish {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.gantt-dependency-list > span.start-to-finish {
    background: #fff6ed;
    border-color: #fed7aa;
    color: #b93815;
}

.gantt-dependency-list small {
    color: #7f56d9;
    font-weight: 500;
}

.gantt-dependency-list button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #6941c6;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 1.2rem;
    justify-content: center;
    padding: 0;
    width: 1.2rem;
}

.gantt-dependency-list button:hover {
    background: #e9e5ff;
}

.gantt-workspace {
    background: #fff;
    border: 1px solid #cfd7e3;
    border-radius: .72rem;
    box-shadow: 0 .25rem .9rem rgba(16, 24, 40, .06);
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(58rem, 62rem) minmax(0, 1fr);
    min-height: max(22rem, calc(100vh - var(--gantt-viewport-offset)));
    min-height: max(22rem, calc(100dvh - var(--gantt-viewport-offset)));
    overflow: hidden;
}

.gantt-workspace.table-maximized,
.gantt-workspace.timeline-maximized {
    grid-template-columns: minmax(0, 1fr);
}

.gantt-workspace.table-maximized .gantt-timeline-scroll,
.gantt-workspace.timeline-maximized .gantt-table {
    display: none;
}

.gantt-workspace.table-maximized .gantt-table {
    border-right: 0;
}

.gantt-workspace.table-maximized .gantt-table-header,
.gantt-workspace.table-maximized .gantt-table-row {
    grid-template-columns: 4.8rem minmax(18rem, 1fr) 4.5rem 6rem 6rem minmax(8rem, 12rem) 4.3rem minmax(8rem, 12rem) 5.5rem;
}

.gantt-table {
    background: #fff;
    border-right: 1px solid #cfd7e3;
    min-width: 0;
    position: relative;
    z-index: 5;
}

.gantt-table-header,
.gantt-table-row {
    align-items: center;
    display: grid;
    grid-template-columns: 4.8rem minmax(11rem, 1fr) 4.5rem 6rem 6rem 8rem 4.3rem minmax(7rem, 9rem) 5.5rem;
}

.gantt-table-header {
    background: #f8fafc;
    border-bottom: 1px solid #d7dee8;
    color: #475467;
    font-size: .68rem;
    font-weight: 800;
    height: 58px;
    letter-spacing: .05em;
    padding: 0 .65rem;
    text-transform: uppercase;
}

.gantt-table-header > span {
    overflow: hidden;
    padding-right: .35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-table-row {
    border-bottom: 1px solid #e7ebf1;
    height: 48px;
    padding: 0 .65rem;
    position: relative;
}

.gantt-table-row:nth-child(odd) {
    background: #fbfcfe;
}

.gantt-table-row.resolved {
    color: #98a2b3;
}

.gantt-row-order {
    align-items: center;
    display: grid;
    gap: 1px;
    grid-template-columns: .8rem minmax(1rem, 1fr) 1rem;
    min-width: 0;
}

.gantt-row-drag-handle {
    color: #98a2b3;
    cursor: grab;
    font-size: .95rem;
    line-height: 1;
    text-align: center;
    touch-action: none;
    user-select: none;
}

.gantt-row-drag-handle:active {
    cursor: grabbing;
}

.gantt-table-row[data-gantt-reorder-enabled="false"] .gantt-row-drag-handle {
    cursor: default;
    opacity: .28;
}

.gantt-table-row.gantt-row-dragging {
    opacity: .48;
}

.gantt-table-row.gantt-drop-before::before,
.gantt-table-row.gantt-drop-after::after {
    background: #2563eb;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 85%);
    content: "";
    height: 3px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 9;
}

.gantt-table-row.gantt-drop-before::before {
    top: -2px;
}

.gantt-table-row.gantt-drop-after::after {
    bottom: -2px;
}

.gantt-row-number {
    color: #667085;
    display: flex;
    flex-direction: column;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    text-align: center;
}

.gantt-row-number strong {
    color: #344054;
    font-size: .7rem;
    font-weight: 800;
}

.gantt-row-number small {
    color: #98a2b3;
    font-size: .56rem;
}

.gantt-row-order-actions {
    display: grid;
    gap: 1px;
}

.gantt-row-order-actions button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    padding: 2px;
    width: 16px;
}

.gantt-row-order-actions button:hover:not(:disabled),
.gantt-row-order-actions button:focus-visible {
    background: #e7eef8;
    outline: none;
}

.gantt-row-order-actions button:focus-visible {
    box-shadow: 0 0 0 2px #84adff;
}

.gantt-row-order-actions button:disabled {
    cursor: default;
    opacity: .28;
}

.gantt-row-order-actions img {
    display: block;
    height: 10px;
    width: 10px;
}

.gantt-issue {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: .45rem;
    min-width: 0;
    padding: 0 0 0 calc(var(--depth, 0) * .8rem);
    text-align: left;
}

.gantt-issue:disabled {
    cursor: default;
}

.gantt-issue > i {
    background: var(--item-color);
    border-radius: .2rem;
    flex: 0 0 auto;
    height: 1.5rem;
    width: .22rem;
}

.gantt-issue > span {
    display: grid;
    min-width: 0;
}

.gantt-issue strong {
    color: #5925dc;
    font-size: .7rem;
}

.gantt-issue small {
    color: #344054;
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-table-row.resolved .gantt-issue small {
    color: #98a2b3;
    text-decoration: line-through;
}

.gantt-assignee {
    color: #667085;
    font-size: .72rem;
    overflow: hidden;
    padding-right: .3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-duration,
.gantt-date {
    color: #475467;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gantt-predecessors {
    background: #fff;
    border: 1px solid transparent;
    border-radius: .16rem;
    box-sizing: border-box;
    color: #344054;
    font-family: Consolas, "Courier New", monospace;
    font-size: .72rem;
    height: 1.75rem;
    min-width: 0;
    padding: 0 .3rem;
    width: calc(100% - .35rem);
}

.gantt-predecessors:hover {
    border-color: #98a2b3;
}

.gantt-predecessors:focus {
    border-color: #2e90fa;
    box-shadow: 0 0 0 2px rgba(46, 144, 250, .16);
    outline: none;
}

.gantt-predecessors:disabled {
    background: #f2f4f7;
    cursor: wait;
}

.gantt-predecessor-type,
.gantt-resource,
.gantt-progress {
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: .35rem;
    color: #344054;
    font-size: .7rem;
    height: 1.75rem;
    padding: 0 .25rem;
    width: 4.8rem;
}

.gantt-predecessor-type {
    width: 4rem;
}

.gantt-resource {
    min-width: 0;
    width: calc(100% - .35rem);
}

.gantt-predecessor-type:disabled {
    background: #f2f4f7;
    color: #98a2b3;
}

.gantt-timeline-scroll {
    contain: inline-size;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.gantt-timeline {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    position: relative;
    width: var(--timeline-width);
}

.gantt-month-header,
.gantt-day-header {
    display: flex;
    width: var(--timeline-width);
}

.gantt-month-header {
    background: #f0f3f8;
    border-bottom: 1px solid #d4dce7;
    height: 30px;
}

.gantt-month-header span {
    border-right: 1px solid #c9d2df;
    box-sizing: border-box;
    color: #344054;
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 800;
    overflow: hidden;
    padding: .42rem .5rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gantt-day-header {
    background: #f8fafc;
    border-bottom: 1px solid #d7dee8;
    height: 28px;
}

.gantt-day-header span {
    align-items: center;
    border-right: 1px solid #edf0f4;
    box-sizing: border-box;
    color: #667085;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .58rem;
    justify-content: center;
    overflow: visible;
    white-space: nowrap;
}

.gantt-day-header span.weekend {
    background: #f2f4f7;
}

.gantt-day-header span.today {
    background: #fff1f0;
    color: #d92d20;
    font-weight: 800;
}

.gantt-timeline-body {
    background-color: #fff;
    background-image:
        linear-gradient(to right, rgba(102, 112, 133, .11) 1px, transparent 1px),
        linear-gradient(to bottom, transparent 47px, #e7ebf1 47px, #e7ebf1 48px);
    background-size: var(--day-width) 100%, 100% 48px;
    min-height: calc(100% - 58px);
    position: relative;
    width: var(--timeline-width);
}

.gantt-timeline-row {
    left: 0;
    position: absolute;
    width: var(--timeline-width);
}

.gantt-timeline-row:nth-of-type(even) {
    background: rgba(248, 250, 252, .55);
}

.gantt-bar {
    align-items: center;
    background: var(--item-color);
    border: 0;
    border-radius: .28rem;
    box-shadow: 0 .12rem .28rem rgba(16, 24, 40, .18);
    color: #fff;
    cursor: grab;
    display: flex;
    height: 24px;
    justify-content: center;
    min-width: var(--day-width);
    overflow: hidden;
    padding: 0 .35rem;
    position: absolute;
    top: 12px;
    touch-action: none;
    user-select: none;
    z-index: 4;
}

.gantt-bar:hover {
    box-shadow: 0 0 0 2px rgba(127, 86, 217, .2), 0 .2rem .5rem rgba(16, 24, 40, .2);
}

.gantt-bar:focus-visible {
    box-shadow: 0 0 0 3px rgba(127, 86, 217, .3), 0 .2rem .5rem rgba(16, 24, 40, .2);
    outline: none;
}

.gantt-bar:active,
.gantt-bar.dragging {
    cursor: grabbing;
    opacity: .82;
    z-index: 8;
}

.gantt-bar strong {
    font-size: .64rem;
    overflow: hidden;
    pointer-events: none;
    position: relative;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    white-space: nowrap;
    z-index: 2;
}

.gantt-bar-progress {
    background: rgba(16, 24, 40, .25);
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
}

.gantt-resize {
    bottom: 0;
    cursor: ew-resize;
    position: absolute;
    top: 0;
    width: 7px;
    z-index: 5;
}

.gantt-resize.start {
    left: 0;
}

.gantt-resize.end {
    right: 0;
}

.gantt-resize:hover {
    background: rgba(255, 255, 255, .45);
}

.gantt-bar.milestone {
    background: transparent;
    box-shadow: none;
    height: 28px;
    min-width: 28px;
    overflow: visible;
    padding: 0;
    top: 10px;
    width: 28px;
}

.gantt-bar.milestone > span {
    background: var(--item-color);
    border-radius: .12rem;
    box-shadow: 0 .12rem .28rem rgba(16, 24, 40, .2);
    height: 17px;
    transform: rotate(45deg);
    width: 17px;
}

.gantt-today {
    background: #f04438;
    bottom: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 2;
}

.gantt-today span {
    background: #f04438;
    border-radius: .2rem;
    color: #fff;
    font-size: .55rem;
    left: -1.1rem;
    padding: .1rem .22rem;
    position: absolute;
    top: 2px;
}

.gantt-dependencies {
    inset: 0;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.gantt-dependency-line {
    fill: none;
    stroke: #5b6b7c;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.gantt-dependency-hit {
    fill: none;
    pointer-events: stroke;
    stroke: transparent;
    stroke-width: 12;
}

.gantt-dependency:hover .gantt-dependency-line {
    filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .25));
    stroke-width: 3;
}

.gantt-dependency.start-to-start .gantt-dependency-line {
    stroke: #5b6b7c;
    stroke-dasharray: none;
}

.gantt-dependency.finish-to-finish .gantt-dependency-line {
    stroke: #5b6b7c;
}

.gantt-dependency.start-to-finish .gantt-dependency-line {
    stroke: #5b6b7c;
    stroke-dasharray: none;
}

.gantt-dependency-marker path {
    fill: #5b6b7c;
    stroke: none;
}

.gantt-dependency-marker.start-to-start path {
    fill: #5b6b7c;
}

.gantt-dependency-marker.finish-to-finish path {
    fill: #5b6b7c;
}

.gantt-dependency-marker.start-to-finish path {
    fill: #5b6b7c;
}

.gantt-dependency-origin {
    fill: #fff;
    stroke: #5b6b7c;
    stroke-width: 2;
}

.gantt-dependency.start-to-start .gantt-dependency-origin {
    stroke: #5b6b7c;
}

.gantt-dependency.finish-to-finish .gantt-dependency-origin {
    stroke: #5b6b7c;
}

.gantt-dependency.start-to-finish .gantt-dependency-origin {
    stroke: #5b6b7c;
}

.gantt-dependency-lag {
    background: rgba(255, 255, 255, .9);
    border: 1px solid #d0d5dd;
    border-radius: .25rem;
    color: #475467;
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    padding: 0 3px;
    white-space: nowrap;
}

.gantt-dependency-legend {
    align-items: center;
    color: #667085;
    display: flex;
    flex-wrap: wrap;
    font-size: .67rem;
    gap: .75rem;
    margin-top: .45rem;
}

.gantt-dependency-legend span {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
}

.gantt-dependency-legend i {
    background: #7f56d9;
    display: inline-block;
    height: 2px;
    width: 1.5rem;
}

.gantt-dependency-legend .start-to-start i {
    background: repeating-linear-gradient(to right, #2e90fa 0 6px, transparent 6px 9px);
}

.gantt-dependency-legend .finish-to-finish i {
    background: #12b76a;
}

.gantt-dependency-legend .start-to-finish i {
    background: repeating-linear-gradient(to right, #f79009 0 3px, transparent 3px 6px);
}

.gantt-help {
    color: var(--gantt-muted);
    font-size: .7rem;
    margin-bottom: 0;
    margin-top: .45rem;
}

.gantt-state {
    align-items: center;
    color: #667085;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 22rem;
    padding: 2rem;
    text-align: center;
}

.gantt-state.embedded {
    border: 1px dashed #cfd7e3;
    border-radius: .75rem;
}

.gantt-state.compact {
    background: #fff;
    border: 1px dashed #cfd7e3;
    border-radius: .75rem;
    gap: .25rem;
    min-height: 10rem;
}

.gantt-state h1 {
    color: #344054;
    margin: 0 0 .3rem;
}

.gantt-state p {
    margin: 0;
}

@media (max-width: 900px) {
    .gantt-page {
        padding: .65rem;
    }

    .gantt-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .gantt-workspace {
        grid-template-columns: 54rem minmax(35rem, 1fr);
        overflow-x: auto;
    }

    .gantt-workspace.table-maximized,
    .gantt-workspace.timeline-maximized {
        grid-template-columns: minmax(0, 1fr);
        overflow-x: hidden;
    }

    .gantt-workspace.table-maximized .gantt-table-header,
    .gantt-workspace.table-maximized .gantt-table-row {
        grid-template-columns: 4.8rem minmax(12rem, 1fr) 4.5rem 6rem 6rem minmax(8rem, 12rem) 4.3rem minmax(7rem, 10rem) 5.5rem;
    }

    .gantt-table-header,
    .gantt-table-row {
        grid-template-columns: 4.8rem minmax(11rem, 1fr) 4.5rem 6rem 6rem 8rem 4.3rem minmax(7rem, 9rem) 5.5rem;
    }
}

/* DevExpress Fluent Mint light mode --------------------------------------- */
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-page {
    --gantt-bg: #edf9f4;
    --gantt-border: #b7d8cc;
    --gantt-muted: #52736b;
    --gantt-text: #13352f;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .gantt-button,
    .gantt-refresh,
    .gantt-search button,
    .gantt-toolbar,
    .gantt-dependency-editor,
    .gantt-pane-switch button
) {
    background: #e3f4ed;
    border-color: var(--gantt-border);
    color: #13352f;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .gantt-toolbar select,
    .gantt-toolbar input,
    .gantt-dependency-editor select,
    .gantt-dependency-editor input,
    .gantt-predecessors,
    .gantt-predecessor-type,
    .gantt-resource,
    .gantt-progress
) {
    background: #f5fbf8;
    border-color: #92c5b5;
    color: #13352f;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .gantt-workspace,
    .gantt-table,
    .gantt-state.compact
) {
    background: #e3f4ed;
    border-color: var(--gantt-border);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .gantt-table-header,
    .gantt-month-header
) {
    background: #d7eee5;
    border-color: #92c5b5;
    color: #385e55;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-table-row {
    border-bottom-color: #b7d8cc;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-table-row:nth-child(odd),
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-timeline-row:nth-of-type(even) {
    background: rgba(238, 249, 245, .78);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-day-header {
    background: #e3f4ed;
    border-bottom-color: #92c5b5;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .gantt-month-header span,
    .gantt-day-header span
) {
    border-right-color: #b7d8cc;
    color: #52736b;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-day-header span.weekend {
    background: #d9eee6;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-timeline-body {
    background-color: #eef9f5;
    background-image:
        linear-gradient(to right, rgba(82, 115, 107, .16) 1px, transparent 1px),
        linear-gradient(to bottom, transparent 47px, #b7d8cc 47px, #b7d8cc 48px);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-dependency-origin {
    fill: #eef9f5;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .gantt-dependency-lag {
    background: rgba(238, 249, 245, .96);
    border-color: #92c5b5;
    color: #385e55;
}

/* DevExpress Fluent dark mode --------------------------------------------- */
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-page {
    --gantt-bg: #101820;
    --gantt-border: #3b4a58;
    --gantt-muted: #a9b7c4;
    --gantt-text: #edf4f1;
    color-scheme: dark;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-button,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-refresh,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-search button,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-toolbar,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-editor,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-pane-switch button {
    background: #1b2732;
    border-color: var(--gantt-border);
    color: #e2ebe7;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-toolbar select,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-toolbar input,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-editor select,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-editor input,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-predecessors,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-predecessor-type,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-resource,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-progress {
    background: #111c25;
    border-color: #4a5a68;
    color: #edf4f1;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-pane-switch > div {
    border-color: var(--gantt-border);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-pane-switch button:hover,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-pane-switch button:focus-visible {
    background: #2b3744;
    color: #d8cbff;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-toggle strong,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-list > span {
    background: #302947;
    border-color: #625487;
    color: #ddd6fe;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-message.success,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-list > span.finish-to-finish {
    background: #123b30;
    border-color: #2d745d;
    color: #a7f3d0;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-message.error {
    background: #442027;
    border-color: #8d3d49;
    color: #fecaca;
}
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-message.warning {
    background: #2b291e;
    border-color: #74663c;
    color: #ffe08a;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-list > span.start-to-start {
    background: #17354b;
    border-color: #356a91;
    color: #a9d4ff;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-list > span.start-to-finish {
    background: #49301d;
    border-color: #8c5c31;
    color: #fed7aa;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-list button:hover {
    background: #473b68;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-workspace,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-table,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-state.compact {
    background: #17232d;
    border-color: var(--gantt-border);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-table {
    border-right-color: var(--gantt-border);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-table-header,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-month-header {
    background: #24313d;
    border-color: #465562;
    color: #c4cfd7;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-table-row {
    border-bottom-color: #34434f;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-table-row:nth-child(odd),
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-timeline-row:nth-of-type(even) {
    background: rgba(38, 51, 63, .55);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-issue strong {
    color: #c4b5fd;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-issue small,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-duration,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-date,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-assignee,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-row-number {
    color: #b8c4ce;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-predecessors:disabled,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-predecessor-type:disabled {
    background: #26333f;
    color: #8494a1;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-day-header {
    background: #1c2833;
    border-bottom-color: #465562;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-month-header span,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-day-header span {
    border-right-color: #3a4956;
    color: #b8c4ce;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-day-header span.weekend {
    background: #26333f;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-day-header span.today {
    background: #4a2527;
    color: #fda29b;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-timeline-body {
    background-color: #121d26;
    background-image:
        linear-gradient(to right, rgba(174, 189, 200, .13) 1px, transparent 1px),
        linear-gradient(to bottom, transparent 47px, #34434f 47px, #34434f 48px);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-line,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency.start-to-start .gantt-dependency-line,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency.finish-to-finish .gantt-dependency-line,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency.start-to-finish .gantt-dependency-line {
    stroke: #a9b7c4;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-marker path,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-marker.start-to-start path,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-marker.finish-to-finish path,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-marker.start-to-finish path {
    fill: #a9b7c4;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-origin {
    fill: #17232d;
    stroke: #a9b7c4;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-lag {
    background: rgba(28, 40, 51, .95);
    border-color: #52616e;
    color: #d2dbe1;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-state,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-state h1,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-dependency-legend {
    color: #b8c4ce;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-row-order-actions button:hover:not(:disabled),
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-row-order-actions button:focus-visible {
    background: #2c3e4d;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .gantt-row-order-actions img {
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%);
    opacity: .96;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .gantt-row-order-actions img {
    filter:
        drop-shadow(0 0 .35px rgba(14, 116, 94, .88))
        drop-shadow(0 0 1.2px rgba(45, 212, 191, .34));
}