foreignObject > div {
	width: 100px;
	text-align: right;
}
foreignObject span {
	padding: 1px 4px;
	white-space: nowrap;
	background-color: rgba(255, 255, 255, 0);
}

.ganttChart rect.gExpander {
    /* These two styles are used to catch mouse */
    fill: none;
    pointer-events: all;
}

    .ganttChart rect.gExpander.notLeveled {
        fill: #FFC2CC;
        fill-opacity: 0.2;
    }

/* Disable any mouse interactions inside "inactive" Gantts (they are inactive because user is adding relation in some Gantt). */
.ganttChart.inactiveForEditing,
.ganttChart.inactiveForEditing rect.gExpander,
.ganttChart.inactiveForEditing .rightSection .relationsHoverAreas path {
    pointer-events: none !important;
}

/* Disable any mouse interactions inside "inactive" Gantts (they are inactive because user is dragging Mss). */
.ganttChart.inactiveForEditingWhileDrag .rightSection .relationsHoverAreas path,
.ganttChart.inactiveForEditingWhileDrag .rightSection .relations path {
    pointer-events: none !important;
}

.ganttChart .rightSection .relationsHoverAreas path.activeForClick,
.ganttChart .rightSection .relations path.activeForClick {
    cursor: pointer;
}

/* Left section should have pointer cursor during "Add relation", because clicking on it will create relation */
.ganttChart.addRelationInProgress .leftSection .nodeInfoWrapper {
    cursor: pointer;
}

.ganttChart .leftSection .nodeInfoWrapper.fadedOutWhileDragging {
    opacity: 0.2;
    pointer-events: none;
}
.ganttChart .leftSection .nodeInfoWrapper .nodeInfo.isDeleted .nodeName {
    opacity: 0.4;
    pointer-events: none;
}

.ganttChart rect.rowHighlight {
    fill: #EEF1FE;
}

.ganttChart rect.rowExceeded {
    fill: #FDF1F3;
}

.ganttChart rect.rowHighlightSelected {
    fill: #EEF1FE;
}

.ganttChart rect.nodePositionHighlightWhileDrag {
    fill: #ABB8F8;
    stroke: #5774E7;
    stroke-width: 1px;
    shape-rendering: crispEdges;
    opacity: 0.4;
    cursor: url('../../../../images/shared/cursor-grabbing.png'), default;
}
/* When "Add relation" is in progress, show cursor pointer for summary, since it's possible to click on summary to add relation */
.ganttChart.addRelationInProgress .rightSection .visual rect.summary {
    cursor: pointer;
}

    .ganttChart .leftSection .lineForDropping {
        stroke: #5774e7;
        stroke-width: 1px;
        shape-rendering: crispEdges;
    }

    .ganttChart .leftSection .nodeInfo .expandCollapseArrow {
        cursor: pointer;
        pointer-events: auto;
    }

    .ganttChart .leftSection .nodeInfo .nodePriority text {
        font-family: GlowSemibold;
        font-size: 14px;
    }

        .ganttChart .leftSection .nodeInfo .nodePriority text.blue {
            fill: #0090FF;
        }

        .ganttChart .leftSection .nodeInfo .nodePriority text.green {
            fill: #0ac200;
        }

        .ganttChart .leftSection .nodeInfo .nodePriority text.yellow {
            fill: #ffb400;
        }

        .ganttChart .leftSection .nodeInfo .nodePriority text.red {
            fill: #ff002b;
        }

        .ganttChart .leftSection .nodeInfo .nodePriority text.isCompleted {
            fill: #B6B6B6;
        }

    .ganttChart .leftSection .nodeInfo .nodeName text {
        font-family: GlowRegular;
        font-size: 14px;
        fill: #4a4a4a;
    }

        .ganttChart .leftSection .nodeInfo .nodeName.isCompleted text {
            fill: #B6B6B6;
        }

        .ganttChart .leftSection .nodeInfo .nodeName.selectableForOpeningPopup:hover text {
            fill: #5774e7;
            cursor: pointer;
        }

.ganttChart .rightSection .visual {
    shape-rendering: crispEdges;
}

    .ganttChart .rightSection .visual.fadedOutWhileDragging,
    .ganttChart .rightSection .visual.isDeleted {
        opacity: 0.2;
        pointer-events: none;
    }

    .ganttChart .rightSection .visual rect {
        stroke-width: 1px;
    }


/* Colors for Gantt rect-s inside the .visual */
/* Regular rects */
/* Summary is always default blue */
.ganttChart .rightSection .visual rect.summary {
    stroke: #5774E7;
    fill: #F4F5FC;
}
.ganttChart .rightSection .visual:hover rect.summary,
.ganttChart .rightSection .visual:hover polygon.leftSummaryTriangle,
.ganttChart .rightSection .visual:hover polygon.rightSummaryTriangle,
.ganttChart .rightSection .visual.highlighted rect.summary,
.ganttChart .rightSection .visual.highlighted polygon.leftSummaryTriangle,
.ganttChart .rightSection .visual.highlighted polygon.rightSummaryTriangle,
.ganttChart .rightSection .visual.highlighted .unplannedWork,
.ganttChart .rightSection .visual:hover .unplannedWork,
.ganttChart .rightSection .visual.highlighted rect.unplannedWorkSmallBorder,
.ganttChart .rightSection .visual:hover rect.unplannedWorkSmallBorder,
.ganttChart .rightSection .visual.highlighted polygon.rightSummaryTriangle.withUnplannedWork,
.ganttChart .rightSection .visual:hover polygon.rightSummaryTriangle.withUnplannedWork {
    fill: #ABB8F8;
}

.ganttChart .rightSection .visual polygon.leftSummaryTriangle {
    stroke: #5774E7;
    fill: #F4F5FC;
    stroke-dasharray: 0, 7, 8;
    shape-rendering: optimizeSpeed;
}

    .ganttChart .rightSection .visual polygon.leftSummaryTriangle.withPassedWork {
        fill: #DCDCDC;
        stroke: #808080;
    }

.ganttChart .rightSection .visual polygon.rightSummaryTriangle {
    stroke: #5774E7;
    fill: #F4F5FC;
    stroke-dasharray: 0, 7, 8;
    shape-rendering: optimizeSpeed;
}

    .ganttChart .rightSection .visual polygon.rightSummaryTriangle.withUnplannedWork {
        fill: #CFD7FA;
    }

.ganttChart .rightSection .visual polygon.leftSummaryTriangle.completed,
.ganttChart .rightSection .visual polygon.rightSummaryTriangle.completed {
    stroke: #808080;
    fill: #dcdcdc;
}
.ganttChart .rightSection .visual:hover rect.summary.completed,
.ganttChart .rightSection .visual.highlighted rect.summary.completed,
.ganttChart .rightSection .visual:hover polygon.leftSummaryTriangle.completed,
.ganttChart .rightSection .visual:hover polygon.rightSummaryTriangle.completed,
.ganttChart .rightSection .visual.highlighted polygon.leftSummaryTriangle.completed,
.ganttChart .rightSection .visual.highlighted polygon.rightSummaryTriangle.completed {
    fill: #B6B6B6;
}

/*Default blue without prio color*/
.ganttChart .rightSection .visual rect.mainNode.task.defaultBlue {
    stroke: #5774E7;
    fill: #F4F5FC;
}

    .ganttChart .rightSection .visual rect.mainNode.task.defaultBlue:hover,
    .ganttChart .rightSection .visual.highlighted rect.mainNode.task.defaultBlue {
        fill: #ABB8F8;
    }

/*============Task color depends on constrainingPriority ============*/
.ganttChart .rightSection .visual rect.mainNode.task.blue {
    stroke: #99D3FF;
    fill: #E7F4FF;
}
.ganttChart .rightSection .visual rect.mainNode.task.green {
    stroke: #9DE799;
    fill: #E7F9E7;
}
.ganttChart .rightSection .visual rect.mainNode.task.yellow {
    stroke: #FFE199;
    fill: #FFF8E7;
}
.ganttChart .rightSection .visual rect.mainNode.task.red {
    fill: #FFE7EB;
    stroke: #FF99AA;
}

.ganttChart .rightSection .visual rect.mainNode.completed {
    stroke: #808080;
    fill: #F1F1F1;
}

.ganttChart .rightSection .visual rect.durationRect.task.blue {
    fill: #C2E4FF;
    stroke: #0090FF;
}
.ganttChart .rightSection .visual rect.durationRect.task.green {
    fill: #C4F0C2;
    stroke: #0AC200;
}
.ganttChart .rightSection .visual rect.durationRect.task.yellow {
    fill: #FFEDC2;
    stroke: #FFB400;
}
.ganttChart .rightSection .visual rect.durationRect.task.red {
    fill: #FFC2CC;
    stroke: #FF002B;
}
.ganttChart .rightSection .visual rect.durationRect.completed {
    fill: #dcdcdc;
}

    /* Task hovered rects */
    .ganttChart .rightSection .visual:hover rect.mainNode.task.blue,
    .ganttChart .rightSection .visual.highlighted rect.mainNode.task.blue {
        fill: #CEE9FF;
    }
    .ganttChart .rightSection .visual:hover rect.mainNode.task.green,
    .ganttChart .rightSection .visual.highlighted rect.mainNode.task.green {
        fill: #D0F3CE;
    }
    .ganttChart .rightSection .visual:hover rect.mainNode.task.yellow,
    .ganttChart .rightSection .visual.highlighted rect.mainNode.task.yellow {
        fill: #FFF1CE;
    }
    .ganttChart .rightSection .visual:hover rect.mainNode.task.red,
    .ganttChart .rightSection .visual.highlighted rect.mainNode.task.red {
        fill: #FFCED6;
    }
    .ganttChart .rightSection .visual:hover rect.mainNode.task.completed,
    .ganttChart .rightSection .visual.highlighted rect.mainNode.task.completed {
        fill: #E3E3E3;
    }

    /*Duration*/
    .ganttChart .rightSection .visual:hover rect.durationRect.task.blue,
    .ganttChart .rightSection .visual.highlighted rect.durationRect.task.blue {
        fill: #66BCFF;
    }
    .ganttChart .rightSection .visual:hover rect.durationRect.task.green,
    .ganttChart .rightSection .visual.highlighted rect.durationRect.task.green {
        fill: #6CDA66;
    }
    .ganttChart .rightSection .visual:hover rect.durationRect.task.yellow,
    .ganttChart .rightSection .visual.highlighted rect.durationRect.task.yellow {
        fill: #FFD266;
    }
    .ganttChart .rightSection .visual:hover rect.durationRect.task.red,
    .ganttChart .rightSection .visual.highlighted rect.durationRect.task.red {
        fill: #FF667F;
    }
    .ganttChart .rightSection .visual:hover rect.durationRect.task.completed,
    .ganttChart .rightSection .visual.highlighted rect.durationRect.task.completed {
        fill: #B6B6B6;
    }
/*=======================================*/

.ganttChart .rightSection .visual rect.unplannedWorkSmallBorder {
    fill: #CFD7FA;
}
.ganttChart .rightSection .visual rect.unplannedWork {
    stroke: #5774E7;
    fill: #CFD7FA;
}
    .ganttChart .rightSection .visual rect.unplannedWork:hover,
    .ganttChart .rightSection .visual.highlighted  rect.unplannedWork {
        fill: #ABB8F8;
    }

.ganttChart .rightSection .visual rect.passedWorkSmallBorder {
    fill: #DCDCDC;
}
.ganttChart .rightSection .visual rect.passedWork {
    stroke: #808080;
    fill: #DCDCDC;
}
    .ganttChart .rightSection .visual rect.passedWork:hover,
    .ganttChart .rightSection .visual:hover rect.passedWork,
    .ganttChart .rightSection .visual.highlighted  rect.passedWork,
    .ganttChart .rightSection .visual:hover rect.passedWorkSmallBorder,
    .ganttChart .rightSection .visual.highlighted rect.passedWorkSmallBorder,
    .ganttChart .rightSection .visual:hover polygon.leftSummaryTriangle.withPassedWork,
    .ganttChart .rightSection .visual.highlighted polygon.leftSummaryTriangle.withPassedWork {
        fill: #B6B6B6;
    }

    .ganttChart .rightSection .visual rect.activeForClick {
        cursor: pointer;
    }

    .ganttChart .rightSection .visual rect.withDraggingCursor {
        cursor: move;
    }

.ganttChart .rightSection .visual .withDraggingToResizeCursor {
    cursor: ew-resize;
}

/*Constraints color*/
.ganttChart .rightSection .visual g.rightConstraint polygon,
.ganttChart .rightSection .visual g.rightConstraint rect,
.ganttChart .rightSection .visual g.leftConstraint polygon,
.ganttChart .rightSection .visual g.leftConstraint rect {
    fill: #5774E7;
}

.ganttChart .rightSection .visual g.rightConstraint.red polygon,
.ganttChart .rightSection .visual g.rightConstraint.red rect,
.ganttChart .rightSection .visual g.leftConstraint.red polygon,
.ganttChart .rightSection .visual g.leftConstraint.red rect {
    fill: #FF002B;
}

.ganttChart .rightSection .visual g.rightConstraintForDragging rect.resizingRectButton,
.ganttChart .rightSection .visual g.leftConstraintForDragging rect.resizingRectButton {
    fill: #FFFFFF;
    filter: url(#filter0_d);
}

.ganttChart .rightSection .visual g.rightConstraintForDragging polygon,
.ganttChart .rightSection .visual g.rightConstraintForDragging rect:not(.resizingRectButton):not(.gExpander),
.ganttChart .rightSection .visual g.leftConstraintForDragging polygon,
.ganttChart .rightSection .visual g.leftConstraintForDragging rect:not(.resizingRectButton):not(.gExpander) {
    fill: #4a4a4a;
}

.ganttChart .rightSection .visual g.rightConstraintForDragging:hover polygon,
.ganttChart .rightSection .visual g.rightConstraintForDragging:hover rect:not(.resizingRectButton):not(.gExpander),
.ganttChart .rightSection .visual g.leftConstraintForDragging:hover polygon,
.ganttChart .rightSection .visual g.leftConstraintForDragging:hover rect:not(.resizingRectButton):not(.gExpander) {
    fill: #5774E7;
}

.ganttChart .rightSection .visual rect.dashedConstraintSection {
    stroke: #ABB8F8;
    fill: #ffffff;
    fill-opacity: 0.8;
    stroke-dasharray: 6.5;
}

.ganttChart .rightSection .visual rect.initialNodePosition {
    fill: #ABB8F8;
}

.ganttChart .rightSection .visual rect.possibleNodePosition {
    mask: url(#mask-stripe);
    fill: #ABB8F8;
}

.ganttChart .rightSection .visual .ganttTitles-background {
    fill: #FFFFFF;
    /*fill: red;*/
    opacity: 0.7;
}

.ganttChart .rightSection .visual text.ganttTitles {
    font-family: 'glowregular';
    font-size: 12px;
    line-height: 16px;
    fill: #B6B6B6;
    /*opacity: 0.4;*/
}

.ganttChart .rightSection .visual text.ganttTitles.ganttTitlesAboveNode {
    fill: #808080;
}

.ganttChart .rightSection .visual rect.buffer {
    stroke: #ABB8F8;
    fill: none;
}

/* Milestone Diamond */
.ganttChart .rightSection .visual g.milestoneContainer {
    shape-rendering: auto;
    cursor: pointer;
}

    .ganttChart .rightSection .visual g.milestoneContainer.withDraggingCursor {
        cursor: ew-resize;
    }

    .ganttChart.addRelationInProgress .visual g.milestoneContainer {
        cursor: pointer !important;
    }

    .ganttChart .rightSection .visual g.milestoneContainer polygon {
        stroke: none;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.black {
        fill: #4a4a4a;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.gray {
        fill: #b6b6b6;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.blue {
        fill: #0090ff;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.redAfterToday {
        fill: #ff002b;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.redBeforeToday {
        /*fill: #FFC2CC;*/
        fill: #ff002b;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.greenAfterToday {
        fill: #0ac200;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.greenBeforeToday {
        fill: #C4F0C2;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.yellowAfterToday {
        fill: #ffb400;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.yellowBeforeToday {
        fill: #FFEDC2;
    }
    .ganttChart .rightSection .visual g.milestoneContainer polygon.defaultBlue {
        fill: #5774E7;
    }
    .ganttChart .rightSection .visual g.milestoneContainer .milestoneTypeText {
        font-family: GlowBold;
        font-size: 9px;
        fill: #4a4a4a;
    }

    .ganttChart .visual g.milestoneContainer .changedMilestoneMark {
        fill: #ff7c10;
        stroke-width: 2px;
    }

.ganttChart .rightSection .visual g.collapseExpandArrowContainer {
    cursor: pointer;
}

.ganttChart .rightSection .visual g.constraintsBtnContainer {
    cursor: pointer;
}

    .ganttChart .rightSection .visual g.constraintsBtnContainer rect.gExpander {
        fill: none;
        pointer-events: all;
    }

    .ganttChart .rightSection .visual g.constraintsBtnContainer polygon,
    .ganttChart .rightSection .visual g.constraintsBtnContainer rect.vertical {
        fill: #b6b6b6;
        stroke: none;
    }

    .ganttChart .rightSection .visual g.constraintsBtnContainer:hover polygon,
    .ganttChart .rightSection .visual g.constraintsBtnContainer:hover rect.vertical {
        fill: #5774E7;
    }

/* Create Successor/Predecessor circles for Task */
.ganttChart .rightSection .visual g.createRelationCircleContainer {
    cursor: pointer;
}

    .ganttChart .rightSection .visual g.createRelationCircleContainer rect.gExpander {
        fill: none;
        pointer-events: all;
    }

    .ganttChart .rightSection .visual g.createRelationCircleContainer circle.createRelationCircle {
        fill: #b6b6b6;
        stroke: none;
    }
    .ganttChart .rightSection .visual g.createRelationCircleContainer:hover circle.createRelationCircle {
        fill: #5774E7;
    }

/* Create Successor/Predecessor circles for Milestone */
.ganttChart .rightSection .visual g.milestoneContainer g.createRelationCircleContainer {
    cursor: pointer;
}

    .ganttChart .rightSection .visual g.milestoneContainer  g.createRelationCircleContainer rect.gExpander {
        /*fill: orange;*/
        pointer-events: all;
    }

    .ganttChart .rightSection .visual g.milestoneContainer g.createRelationCircleContainer circle.createRelationCircle {
        fill: #b6b6b6;
        stroke: none;
    }
    .ganttChart .rightSection .visual g.milestoneContainer g.createRelationCircleContainer:hover circle.createRelationCircle {
        fill: #5774E7;
    }

/* Resizing area for tasks */
.ganttChart .rightSection .visual g.rectResizingContainer {
    cursor: ew-resize;
}

.ganttChart .rightSection .visual g.rectResizingContainer rect.gExpander {
    fill: none;
    pointer-events: all;
}

.ganttChart .rightSection .visual g.rectResizingContainer rect.resizingRect {
    fill: #5774E7;
    transform: translate(0, 9px);
}

.ganttChart .rightSection .visual g.rectResizingContainer:hover rect.resizingRect {
    fill: #5774E7;
}

.ganttChart .rightSection .visual g.rectResizingContainer rect.resizingRectButton {
    fill: #FFFFFF;
    filter: url(#filter0_d);
}

/* Relations */
.ganttChart .rightSection .relations path,
.ganttChart .rightSection .relationsHighlighted path,
.ganttChart .rightSection .relationInProgress path {
    shape-rendering: crispEdges;
    stroke: #B6B6B6;
    fill: none;
}
.ganttChart .rightSection .relationsHoverAreas path {
    shape-rendering: crispEdges;
    stroke: none;
    /* Give user area of 11px to click/hover on */
    stroke-width: 11px;
    fill: none;
    /* Let user click on/hover over 5px area, even though it's invisible */
    pointer-events: stroke;
}
.ganttChart .rightSection .relations path.red {
    stroke: #FF667F;
}
.ganttChart .rightSection .relationsHighlighted path.blue {
    stroke: #5774e7;
    /* Blue appended Relation Arrows should not catch any mouse events,
       otherwise it will conflict with regular Relation Arrows and Relation Hover Areas */
    pointer-events: none;
}
.ganttChart .rightSection .relationInProgress path {
    stroke: #5774e7;
    /* Relation In Progress Arrows should not catch any mouse events,
       otherwise it will conflict with regular Relation Arrows and Relation Hover Areas */
    pointer-events: none;
}


/* Triangular arrow header, all relations paths end with it. */
.ganttChart .rightSection .relations defs marker#relationArrow polygon {
    shape-rendering: crispEdges;
    stroke: none;
    fill: #b6b6b6;
}
.ganttChart .rightSection .relations defs marker#relationArrowBlue polygon {
    shape-rendering: crispEdges;
    stroke: none;
    fill: #5774e7;
}
.ganttChart .rightSection .relations defs marker#relationArrowRed polygon {
    shape-rendering: crispEdges;
    stroke: none;
    fill: #ff002b;
}