.phasesChart {

}

    .phasesChart .leftPhasesSection {

    }

        .phasesChart .leftPhasesSection .projectPhasesContainer {

        }

            .phasesChart .leftPhasesSection .projectPhasesContainer text.projectPhases {
                font-family: GlowRegular;
                font-size: 14px;
            }

                .phasesChart .leftPhasesSection .projectPhasesContainer text.projectPhases tspan.projectPhasesLabel {
                    fill: #808080;
                }

                .phasesChart .leftPhasesSection .projectPhasesContainer text.projectPhases tspan.projectPhasesTypes {
                    fill: #4a4a4a;
                }

            .phasesChart .leftPhasesSection .projectPhasesContainer .phaseRemoveFilterButton {
                cursor: pointer;
            }

    .phasesChart .rightPhasesSection {

    }

        .phasesChart .rightPhasesSection .phase {
            cursor: pointer;
        }

            .phasesChart .rightPhasesSection .phase.withDraggingCursor {
                cursor: ew-resize;
            }

            .phasesChart .rightPhasesSection .phase rect.gExpander {
                fill: none;
                pointer-events: all;
            }

            .phasesChart .rightPhasesSection .phase line.startLine {
                stroke-width: 2px;
                shape-rendering: crispEdges;
            }

            .phasesChart .rightPhasesSection .phase line.mainLine {
                stroke-width: 2px;
                shape-rendering: crispEdges;
            }

            .phasesChart .rightPhasesSection .phase.hovered line.mainLine {
                stroke-width: 4px;
            }
            .phasesChart .rightPhasesSection .phase.selectedForFiltering line.mainLine {
                stroke-width: 6px;
            }

            .phasesChart .rightPhasesSection .phase polygon.rightArrow {
                shape-rendering: crispEdges;
                stroke: none;
            }

            .phasesChart .rightPhasesSection .phase.highlightedForHoveredItem .mainLine,
            .phasesChart .rightPhasesSection .phase.highlightedForHoveredItem .startLine {
                stroke: #6EBC2C !important;
            }

            .phasesChart .rightPhasesSection .phase.highlightedForHoveredItem .rightArrow,
            .phasesChart .rightPhasesSection .phase.highlightedForHoveredItem .phaseName {
                fill: #6EBC2C !important;
            }

            .phasesChart .rightPhasesSection .phase.highlightedForHoveredItem .rightArrow {
                stroke: #6EBC2C !important;
            }

            .phasesChart .rightPhasesSection .phase.hasWrondDates line.startLine,
            .phasesChart .rightPhasesSection .phase.hasWrondDates line.mainLine {
                stroke: #6e6e6e !important;
            }

            .phasesChart .rightPhasesSection .phase.hasWrondDates polygon.rightArrow,
            .phasesChart .rightPhasesSection .phase.hasWrondDates .textAndButtonContainer text.phaseName {
                fill: #6e6e6e !important;
            }

            .phasesChart .rightPhasesSection .phase .textAndButtonContainer {
                cursor: pointer;
            }

                .phasesChart .rightPhasesSection .phase .textAndButtonContainer .phaseName-background {
                    fill: white;
                }

                .phasesChart .rightPhasesSection .phase .textAndButtonContainer text {
                    font-family: GlowSemiBold;
                    font-size: 10px;
                    /* It's easier to calculate the middle position between phase start and phase end */
                    text-anchor: middle;
                }

                    .phasesChart .rightPhasesSection .phase .textAndButtonContainer text.filterButtonText {
                        fill: #5774e7;
                        text-anchor: start;
                     }

                .phasesChart .rightPhasesSection .phase .textAndButtonContainer .phaseThreeDotsButton {
                    fill: #5774e7;
                }

            .phasesChart .rightPhasesSection .phase .threeDotsMenu {

            }