.flowGraphMainContainer {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
    min-width: 50px;
    background-color: white;
}

/* body.minimized {
    overflow-x: scroll;
} */
    .flowGraphMainContainer .flowGraphHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 40px;
        background-color: white;
        font-family: GlowRegular;
        font-size: 13px;
        color: #4a4a4a;
        row-gap: 8px;
    }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__container {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            width: 100%;
            row-gap: 8px;
        }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__container.large-screen {
            flex-direction: row;
            justify-content: space-between;
        }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__row {
            display: flex;
            justify-content: space-between;
        }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__row.minimized .historicalLoadChartHeader__group {
            overflow: hidden;
        }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__container.large-screen .historicalLoadChartHeader__row{
            column-gap: 20px;
        }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__group {
            display: flex;
            align-items: center;
            white-space: nowrap;
            gap: 20px;
        }

        .legend-items-container {
            display: flex;
            margin-right: 20px;
        }

        .historicalLoadChartHeader .historicalLoadChartHeader__container.minimized .legend-items-container {
            margin: initial;
        }

        .futureLoadChartHeader.flowGraphHeader.minimized:not(.capacityViewEnabled),
        .burnupChartHeader.flowGraphHeader.minimized {
            flex-wrap: wrap;
        }
        
        .futureLoadChartHeader.flowGraphHeader.minimized .flowGraphHeaderRight,
        .futureLoadChartHeader.flowGraphHeader.minimized .flex--align-center,
        .futureLoadChartHeader.flowGraphHeader.minimized .futureLoad-toggle {
            overflow: hidden;
        }
     
        .futureLoadChartHeader.flowGraphHeader.minimized.capacityViewEnabled .futureLoad-toggle{
            min-width: 24px;/* toggle width + border */
        }

        .futureLoadChartHeader.flowGraphHeader .futureLoad-toggle.minimized .futureLoad-toggleText{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .futureLoadChartHeader.flowGraphHeader.minimized .flowGraphHeaderRight,
        .burnupChartHeader.flowGraphHeader.minimized .burnupChartHeader__container{
            justify-content: initial;
        }

        .flowGraphMainContainer .flowGraphHeader .historicalLoadChartHeader__container.minimized {
            flex-direction: column;
        }

        .historicalLoadChartHeader .legend-items-container legend-item:nth-child(1) .legend-item__rect {
            background: #FF667F;
        }

        .historicalLoadChartHeader .legend-items-container legend-item:nth-child(2) .legend-item__rect {
            background: #FF667F;
        }

        .historicalLoadChartHeader .legend-items-container legend-item:nth-child(3) .legend-item__rect {
            background: #4659BF;
        }

        .historicalLoadChartHeader .legend-items-container legend-item:nth-child(4) .legend-item__rect {
            background: #0090FF;
        }

        .burnupChartHeader .approved-item .legend-item__rect {
            background: #FF667F;
        }
        .burnupChartHeader .total-expected-item .legend-item__rect {
            background: #882BDE;
        }
        .burnupChartHeader .burned-item .legend-item__rect {
            background: #4A4A4A;
        }

        .burnupChartHeader .remainingSection__legends-container {
            display: flex;
        }

        .burnupChartHeader__container {
            display: flex;
            align-items: center;
            white-space: nowrap;
            flex-grow: 1;
            justify-content: space-between;
        }

        .burnupChartHeader__lines-container {
            display: flex;
        }

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

        .futureLoadChartHeader .flex--align-center {
            column-gap: 20px;
        }

        body.minimized {
            overflow: auto;
        }

        .futureLoadChartHeader .flowGraphHeaderRight capacity-view-color-selector {
            margin-right: 20px;
        }

        .burnupChartHeader .remainingSection__legends-container legend-item:nth-child(1) .legend-item__circle {
            background: #E3DEFC;
        }
        .burnupChartHeader .remainingSection__legends-container legend-item:nth-child(2) .legend-item__circle {
            background: #C5BCF7;
        }

        .rm-container .flowGraphMainContainer .flowGraphHeader{
            margin-top: 12px;
        }
        
        .flowGraphMainContainer .flowGraphHeader .flowGraphHeaderLeft {
            display: flex;
            align-items: center;
        }

        #futureLoadContainer.futureLoadContainer-Pipeline .flowGraphMainContainer .flowGraphHeader .flowGraphHeaderLeft {
            align-items: flex-start;
        }

        .flowGraphMainContainer .flowGraphHeader .flowGraph-label {
            display: inline-block;
            margin-right: 20px;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
        }

        .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader {
            overflow: visible;
        }

        .mt-container.mt-container_ae .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0 20px;
            margin-top: 12px;         
        }

        #futureLoadContainer.futureLoadContainer-Pipeline .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0 40px;
            margin-top: 12px;
            row-gap: 8px;
        }

            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader planning-type-dropdown .customDropdown .ui-input-bordered {
                line-height: 27px;
            }
           
            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .globalPlanningsContainer,
            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .future-load-dropdown-container {
                width: 100%;
                margin-right: 20px;
            }

        .flowGraphMainContainer .flowGraphHeader .flowGraph-daterange {
            display: flex;
            align-items: center;
            margin-right: 20px;
            flex-shrink: 0;
        }

            .flowGraphMainContainer .flowGraphHeader .flowGraph-daterange .daterange {
                width: 94px;
                height: 28px;
                -ms-border-radius: 4px;
                border-radius: 4px;
                background-color: #ffffff;
                border: solid 1px #dcdcdc;
                outline: none;
                font-family: GlowRegular;
                font-size: 13px;
                color: #4a4a4a;
                background: url('../../../images/shared/small-calendar.png') no-repeat;
                background-position: right 10px center;
                padding: 0 30px 0 10px;
                cursor: pointer;
                line-height: 28px;
            }

            .flowGraphMainContainer .flowGraphHeader .flowGraph-daterange .daterange:focus {
                border-color: var(--link-blue);
            }

            #futureLoadContainer.futureLoadContainer-Pipeline .flowGraphMainContainer .flowGraphHeader.flowGraphHeaderMinWidth .flowGraph-daterange {
                display: flex;
                flex-wrap: nowrap;
            }


            .flowGraphMainContainer .flowGraphHeader.flowGraphHeaderMinWidth .legendItem.total {
                margin-right: 10px;
            }

            .flowGraphMainContainer .flowGraphHeader .flowGraph-daterange .dateSeparator {
                display: inline-block;
                font-family: GlowRegular;
                font-size: 13px;
                color: #b6b6b6;
                width: 15px;
                margin-left: -4px;
                margin-right: -4px;
                text-align: center;
            }

        .flowGraphMainContainer .flowGraphHeader .chartDescription {
            display: inline-block;
            color: #4a4a4a;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 20px;
        }

        .flowGraphMainContainer .flowGraphHeader .chartDescription.new-capacity-view {
            display: none;
        }

      

            .flowGraphMainContainer .flowGraphHeader .chartDescription .chartDescriptionValues {
                font-family: GlowSemiBold;
                padding-left: 2px;
                padding-right: 2px;
            }

        .flowGraphMainContainer .flowGraphHeader .futureLoadTotal {
            display: inline-block;
        }

            .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer {
                display: inline-block;
                cursor: pointer;
            }   
                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer .crossedEye {
                    margin-bottom: 3px;
                }

                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer.lineIsVisible .crossedEye {
                    display: none;
                }
                /* If line is visible, then on hover we want to show opaque crossed eye button */
                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer.lineIsVisible:hover .crossedEye {
                    display: inline-block;
                    opacity: 0.4;
                }
                /* Colored Line rectangle */
                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer .legendRect {
                    display: none;
                    margin-left: 7px;
                }
                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer.lineIsVisible .legendRect {
                    display: inline-block;
                }
                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer.lineIsVisible:hover .legendRect {
                    /* If line is visible, then on hover we want to show opaque crossed eye button */
                    display: none;
                }
                .flowGraphMainContainer .flowGraphHeader .futureLoadTotal .lineOrEyeContainer .legendRect {
                    height: 3px;
                    width: 7px;
                    top: -3px;
                    margin-right: 5px;
                    position: relative;
                    background-color: #000;
                }
        
        #futureLoadContainer.futureLoadContainer-Pipeline .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader.flowGraphHidden {
            visibility: hidden;
            height: 0;
            margin: 0;
        }
                
        .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .futureLoad-toggle {
            display: inline-flex;
            column-gap: 6px;
            font-family: GlowRegular;
            font-size: 13px;
            color: #4a4a4a;
            white-space: nowrap;
        }
        .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .futureLoad-toggle.new-capacity-view {
            margin-right: 20px;
        }

        .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .desicionPointButtons {
            width: 290px;
            height: 18px;
        }

            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .desicionPointButtons .inlineBlock {
                display: inline-block;
            }

            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .desicionPointButtons .showChangesBtn {
                margin-right: 20px;
            }

            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .desicionPointButtons .plusIcon {
                cursor: pointer;
                background: url(../../../images/shared/plus-hovered.png) no-repeat;
                height: 8px;
                width: 8px;
            }

            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .desicionPointButtons .addingPointHint {
                margin-right: 20px;
                font-family: GlowRegular;
                font-size: 13px;
                color: #b6b6b6;
            }

            .flowGraphMainContainer .flowGraphHeader.futureLoadChartHeader .futureLoadScope {
                display: inline-block;
                width: 100%;
            }

        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader {
        }

            .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .burnup-toggle {
                display: inline-block;
                font-family: GlowRegular;
                font-size: 13px;
                color: #4a4a4a;
                margin-left: 6px;
                margin-right: 20px;
            }

            .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend {
                display: flex;
            }

                /* Legend item(container for whole item) */
                .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem {
                    display: inline-block;
                    user-select: none;
                    line-height: 20px;
                }

                    /* Approved legend item */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.approved {
                        margin-left: 0;
                    }
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.approved span {
                        margin-left: -4px;
                    }
                    /* Total Expected legend item */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.totalExpected {
                        margin-left: 17px;
                    }
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.budgetedItem {
                        margin-left: 10px;
                    }
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.scheduledItem {
                        margin-left: 7px;
                    }
                    /* Burned */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.burnedItem {
                        margin-left: 18px;
                    }

                    /* Colored circle to the left of the label */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .legendCircle {
                        height: 7px;
                        width: 7px;
                        border-radius: 6px;
                        display: inline-block;
                        margin-right: 6px;
                        margin-bottom: 1px;
                    }
                    /* Budgeted Circle */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .legendCircle.budgetedWork {
                        background-color: #e3defc;
                    }
                    /* Scheduled Circle */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .legendCircle.scheduledWorkRound {
                        background-color: #c5bcf7;
                    }

                    /* Line rect container(which doesn't change to crossed eye button) */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .legendRect {
                        display: inline-block;
                        height: 3px;
                        width: 7px;
                        top: -3px;
                        margin-right: 5px;
                        position: relative;
                    }
                    /* Total Expected */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .legendRect.totalPlannedRect {
                        background-color: #882bde;
                    }
                    /* Burned */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .legendRect.finishedWorkRect {
                        background-color: #1e1e1e;
                    }

                    /* Container for either line rect or crossed eye */
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                        /* Margin for crossed eye button */
                        margin-right: 5px;
                    }
                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible {
                        margin-top: 0;
                    }

                        /* Crossed eye button */
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer .crossedEye {
                            background: url('../../../images/graphs/crossedGrayEye.png') no-repeat;
                            width: 16px;
                            height: 16px;
                            margin-top: 4px;
                        }
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible .crossedEye {
                            display: none;
                        }
                        /* If line is visible, then on hover we want to show opaque crossed eye button */
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible:hover .crossedEye {
                            display: block;
                            opacity: 0.4;
                        }
                        /* Colored Line rectangle */
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer .legendRect {
                            display: none;
                            margin-left: 7px;
                        }
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible .legendRect {
                            display: inline-block;
                        }
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible:hover .legendRect {
                            /* If line is visible, then on hover we want to show opaque crossed eye button */
                            display: none;
                        }
                        .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .legendItem.approved .lineOrEyeContainer .legendRect {
                            background-color: #ff667e;
                        }

                /* Remaining section */
                .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .remainingSection {
                    display: flex;
                    border-radius: 4px;
                    border: solid 1px #dcdcdc;
                    height: 28px;
                    padding-right: 10px;
                    padding-left: 9px;
                    line-height: 26px;
                }

                    .flowGraphMainContainer .flowGraphHeader.burnupChartHeader .outputLegend .remainingSection .remainingWord {
                        color: #808080;
                        display: inline-block;
                    }


        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader {
            padding-right: 24px;
        }

            .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputSpent-toggle {
                display: flex;
                align-items: center;
                gap: 6px;
                font-family: GlowRegular;
                font-size: 13px;
                color: #4a4a4a;
            }

            .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend {
                float: right;
            }

                /* Legend item(container for whole item) */
                .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem {
                    display: inline-block;
                    user-select: none;
                    line-height: 20px;
                    margin-left: 10px;
                }

                    /* Colored circle to the left of the label */
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .legendCircle {
                        width: 7px;
                        height: 7px;
                        opacity: 0.9;
                        border-radius: 100%;
                        display: inline-block;
                        margin-right: 6px;
                    }

                        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.onSchedule .legendCircle {
                            background-color: #96d5f9;
                        }
                        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.attention .legendCircle {
                            background-color: #a5edbd;
                        }
                        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.urgent .legendCircle {
                            background-color: #ffe798;
                        }
                        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.overdue .legendCircle {
                            background-color: #ff9bab;
                        }

                    /* Line rect container(which doesn't change to crossed eye button) */
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .legendRect {
                        display: inline-block;
                        height: 3px;
                        width: 7px;
                        top: -3px;
                        margin-right: 5px;
                        position: relative;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.readyToStartLoad .legendRect,
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.spentOnOutput .legendRect {
                        width: 8px;
                    }
                    /* Container for either line rect or crossed eye */
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible {
                        margin-top: 0;
                    }

                    /* Crossed eye button */
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer .crossedEye {
                        background: url('../../../images/graphs/crossedGrayEye.png') no-repeat;
                        width: 16px;
                        height: 16px;
                        margin-top: 4px;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible .crossedEye {
                        display: none;
                    }
                    /* If line is visible, then on hover we want to show opaque crossed eye button */
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible:hover .crossedEye {
                        display: block;
                        opacity: 0.4;
                    }
                    /* Colored Line rectangle */
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer .legendRect {
                        display: none;
                        margin-left: 7px;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible .legendRect {
                        display: inline-block;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem .lineOrEyeContainer.lineIsVisible:hover .legendRect {
                        /* If line is visible, then on hover we want to show opaque crossed eye button */
                        display: none;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.load .lineOrEyeContainer .legendRect,
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.readyToStartLoad .lineOrEyeContainer .legendRect {
                        background-color: #ff667f;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.capacity .lineOrEyeContainer .legendRect {
                        background-color: #485abd;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.output .lineOrEyeContainer .legendRect {
                        background-color: #0197f5;
                    }
                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.spentOnOutput .lineOrEyeContainer .legendRect {
                        background-color: #0098f5;
                    }

                        /* Dashed line for "Ready to start" */
                        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.readyToStartLoad .lineOrEyeContainer .legendRect .emptyGap,
                        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem.spentOnOutput .lineOrEyeContainer .legendRect .emptyGap {
                            position: relative;
                            width: 2px;
                            height: 3px;
                            background-color: white;
                            left: 3px;
                        }

                /* Output section */
                .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .labelsGroup {
                    color: #9A9A9A;
                    display: inline-block;
                    margin-left: 10px;
                    border: 1px solid #dcdcdc;
                    border-radius: 5px;
                    line-height: 26px;
                    cursor: pointer;
                }

                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .labelsGroup .legendItem:last-child{
                        margin-right: 16px;
                    }

                    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .labelsGroup .legendItem.output {
                        min-width: 63px;
                    }

    .flowGraphHeaderRight {
        display: flex;
        flex-grow: 1;
        justify-content: space-between;
        align-items: center;
        height: 28px;
    }

    .flowGraphHeaderRight .totalLineButton {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        border-radius: 4px;
        cursor: pointer;
        row-gap: 4px;
        column-gap: 8px;
        -webkit-user-select: none;
        user-select: none;
    }

    .flowGraphHeaderRight .totalLineButton span {
        line-height: 16px;
    }

    .flowGraphHeaderRight .totalLineButton:hover {
        background: #F5F5F5;
    }

    .flowGraphHeaderRight .totalLineButton__container .totalLineIcon .legendRect {
        height: 2px;
        width: 8px;
        position: relative;
        display: flex;
        justify-content: space-evenly;
        background-color: #4A4A4A;
    }

    .flowGraphHeaderRight .totalLineButton__container .closeIcon .closeIcon__img {
        height: 16px;
        width: 16px;
        background: url('../../../images/shared/hide-eye.svg') no-repeat;
    }

    .flowGraphHeaderRight .totalLineButton__container.isTotalLineHidden .closeIcon {
        display: block;
    }

    .flowGraphHeaderRight .totalLineButton__container.isTotalLineHidden .closeIcon .closeIcon__img {
        background: url('../../../images/shared/hide-eye.svg') no-repeat;
    }

    .flowGraphHeaderRight .totalLineButton__container.isTotalLineShown .closeIcon {
        display: none;
    }
    .flowGraphHeaderRight .totalLineButton__container .totalLineIcon {
        justify-content: center;
        align-items: center;
        width: 16px;
    }

    .flowGraphHeaderRight .totalLineButton__container .totalLineIcon span{
        line-height: 16px;
    }

    .flowGraphHeaderRight .totalLineButton__container.isTotalLineHidden .totalLineIcon {
        display: none;
    }

    .flowGraphHeaderRight .totalLineButton__container.isTotalLineShown .totalLineIcon {
        display: flex;
    }

    .flowGraphHeaderRight .totalLineButton:hover .totalLineButton__container.isTotalLineHidden .totalLineIcon .legendRect {
        background-color: #B6B6B6;
    }

    .flowGraphHeaderRight .totalLineButton__container .totalLineIcon .legendRect .emptyGap {
        position: relative;
        width: 2px;
        height: 2px;
        background-color: white;
    }

    .flowGraphMainContainer .flowGraphContainer {
        /* Force .flowGraphContainer to occupy all remaning height and width */
        /* position: absolute; */
        /* 40px is the height of the header */
        position: relative;
        flex-grow: 1;
        background-color: white;
    }
    .flowGraphContainer__current-plan {
        position: absolute;
        right: 60px;
        top: 31px;
        font-family: 'GlowSemibold';
        font-size: 14px;
        color: #4B5478;
        opacity: 0.2;
        cursor: default;
    }
    .ppln_container.editingProjectMode .flowGraphMainContainer .flowGraphContainer {
        background-color: #FDFDFD;
    }

        .flowGraphMainContainer .flowGraphContainer.minimized {
            top: 0;
        }

        .flowGraphMainContainer .flowGraphContainer svg.flowGraph {
            width: 100%;
            height: 100%;
        }
        .flowGraphMainContainer .flowGraphContainer svg.flowGraph .measureUnit {
            font-family: GlowRegular;
            font-size: 12px;
        }

        /* Focus <g>, which contains chart, X and Y axes. */
        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus {
        }

            /* Focus X Axis */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .x.axis {
            }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .x.axis .tick {
                }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .x.axis .tick line {
                        shape-rendering: crispEdges;
                        stroke: #f5f5f5;
                        stroke-width: 1;
                    }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .x.axis .tick text {
                        font-family: GlowRegular;
                        font-size: 12px;
                        fill: #b6b6b6;
                        text-anchor: start !important;
                    }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .x.axis .tick.dark text {
                        fill: #808080;
                    }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .x.axis path.domain {
                    shape-rendering: crispEdges;
                    fill: none;
                    stroke: #dcdcdc;
                    stroke-width: 1px;
                    display: none;
                }

            /* Focus Y Axis */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis {
            }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis .tick {
                }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis .tick line {
                        shape-rendering: crispEdges;
                        stroke: #f5f5f5;
                    }

                    /* Used for Y tick line with 0 value */
                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis .tick.dark line {
                        stroke: #dcdcdc;
                    }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis .tick text {
                        font-family: GlowRegular;
                        font-size: 12px;
                        fill: #b6b6b6;
                    }

                    /* Used for Y tick line with 0 value */
                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis .tick.dark text {
                        fill: #4a4a4a;
                    }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus .y.axis path.domain {
                    shape-rendering: crispEdges;
                    fill: none;
                    stroke: #dcdcdc;
                    stroke-width: 1px;
                    display: none;
                }

            /* Main container for chart lines, areas, gray "nearest midnight" line. */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main {
                pointer-events: all;
            }
                /* Rectangle, which is used to set the width and height of <g>(so that <g> catches mouse events) */
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main rect.gExpander {
                    fill: none;
                    pointer-events: all;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main rect.dayOffRect {
                    fill: #dcdcdc;
                    fill-opacity: 0.2;
                    pointer-events: none;
                }

                /* Today line, which is displayed only if displayTodayLine option is true */
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main line.todayLine {
                    shape-rendering: optimizeSpeed;
                    stroke: #5774e7;
                    stroke-width: 1px;
                }

                /* Gray line, which is shown on hover */
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main line.nearestMidnightTopLine,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main line.nearestMidnightBottomLine,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g g.main line.bottleneckAnalysisStartPointLine,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g g.main line.bottleneckAnalysisEndPointLine,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main line.fteLine {
                    shape-rendering: crispEdges;
                    stroke: #dcdcdc;
                    stroke-width: 1px;
                    stroke-dasharray: 6, 6;
                }
                
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main line.nearestMidnightCenterLine {
                    shape-rendering: crispEdges;
                    stroke-width: 1px;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus circle.nearestMidnightBottomCircle:hover {
                    cursor: grab;
                }
                
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus circle.nearestMidnightTopCircle,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus circle.nearestMidnightBottomCircle,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus circle.endDateRangeBottomCircle,
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus circle.endDateRangeTopCircle {
                    fill: #3664F7;
                    stroke: rgba(54, 100, 247, 0.2);
                    stroke-width: 5px;
                }

                /* Resources lines and areas */
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources {
                    shape-rendering: geometricPrecision;
                }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea {
                        display: none;
                        cursor: pointer;
                    }

                    .futureLoadContainer-Pipeline .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea {
                        cursor: default;
                    }
    /* Historical Load doesn't need to show cursor pointer on resourceArea-s, because they are not selectable for HL. */
    .flowGraphMainContainer.processedflow .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea {
        cursor: default;
    }

    .flowGraphMainContainer.burnup .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea {
        cursor: default;
    }

    /* Future Load view, resource line is hovered or resource area is frozen */
    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea.isResourceSelected.frozen,
    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea.isResourceSelected.resourceLineIsHovered {
        display: block;
        opacity: 0.2;
    }

    /* If Historical Load resourceArea is .isResourceSelected, it should be shown */
    .flowGraphMainContainer.processedflow .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea.isResourceSelected {
        display: block;
        opacity: 1;
    }

    .flowGraphMainContainer.burnup .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceArea.isResourceSelected {
        display: block;
        opacity: 1;
    }

    /* Capacity view, resource is selected */
    .flowGraphMainContainer .flowGraphContainer .flowGraph.capacityView g.focus g.main g.resources .resourceArea.isResourceSelected {
        display: block;
        opacity: 0.2;
    }
    /* Capacity view, resource line is hovered, resource area is frozen or hovered */
    .flowGraphMainContainer .flowGraphContainer .flowGraph.capacityView g.focus g.main g.resources .resourceArea.frozen,
    .flowGraphMainContainer .flowGraphContainer .flowGraph.capacityView g.focus g.main g.resources .resourceArea.resourceLineIsHovered,
    .flowGraphMainContainer .flowGraphContainer .flowGraph.capacityView g.focus g.main g.resources .resourceArea:hover {
        opacity: 1;
    }

    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceLine {
        /* By default, line is hidden. Only selected resources should display lines */
        display: none;
        pointer-events: stroke;
        cursor: pointer;
        fill: none;
        stroke-width: 2px;
    }
    /* Historical Load doesn't need to show cursor pointer on resourceLine-s, because they are not selectable for HL. */
    .flowGraphMainContainer.processedflow .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceLine {
        cursor: default;
    }

    .flowGraphMainContainer.burnup .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceLine {
        cursor: default;
    }

    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .resourceLine.isResourceSelected {
        display: block;
    }

    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .inactiveLine {
        /* By default, line is hidden. Only selected resources should display lines */
        display: block;
        pointer-events: stroke;
        cursor: pointer;
        fill: none;
        stroke-width: 2px;
        stroke-dasharray: 3 3;
    }

    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.resources .totalInactiveLine {
        /* By default, line is hidden. Only selected resources should display lines */
        display: block;
        pointer-events: stroke;
        cursor: pointer;
        stroke: black;
        fill: none;
        stroke-width: 2px;
        stroke-dasharray: 3 3;
    }

    /* Total Line */
    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.resources .totalLine {
        display: none;
        fill: none;
        stroke: black;
        stroke-width: 2px;
        stroke-dasharray: 6 6;
        cursor: pointer;
        pointer-events: stroke;
    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.resources .totalLine.isTotalLineSelected {
            display: block;
        }

    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.borderLines {
    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.borderLines line {
            stroke-width: 1px;
            stroke: #dcdcdc;
            shape-rendering: crispEdges;
        }

    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer {
    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.existingDecisionPoints {
        }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.existingDecisionPoints g.existingDecisionPoint {
            }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.setDecisionPoint {
        }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.hoverDecisionPoint {
        }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.hoverDecisionPoint line.decisionPointCirclePin {
                shape-rendering: crispEdges;
                stroke: #b6b6b6;
                stroke-width: 1px;
            }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.hoverDecisionPoint line.decisionPointLine {
                shape-rendering: crispEdges;
                stroke: #dcdcdc;
                stroke-width: 1px;
            }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.setDecisionPoint line.decisionPointLine {
            shape-rendering: crispEdges;
            stroke: #b6b6b6;
            stroke-width: 1px;
        }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.setDecisionPoint .decisionPointOuterCircle,
        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.hoverDecisionPoint .decisionPointOuterCircle {
            stroke: #b6b6b6;
            stroke-width: 1px;
            fill: #ffffff;
        }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.setDecisionPoint .decisionPointInnerCircle,
        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.decisionPointsContainer g.hoverDecisionPoint .decisionPointInnerCircle {
            fill: #b6b6b6;
        }

    /* "No data to display" <g>, which contains <rect> for background and <text>. */
    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.noDataToDisplay {
        /* By default, don't show message */
        display: none;
    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.noDataToDisplay.visible {
            display: block;
        }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.noDataToDisplay rect.background {
            fill: white;
        }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.noDataToDisplay text.message {
            alignment-baseline: middle;
            text-anchor: middle;
            font-size: 14px;
            line-height: 20px;
        }
        /* Path, which goes from bottom left to bottom right, to top right.
               Top and left borders are there because of X&Y axes, but bottom and right ones we need to add when "There is no data to display". */
        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main g.noDataToDisplay path.bottomRightBorder {
            stroke: #dcdcdc;
            stroke-width: 2px;
            fill: none;
        }
    /* Contains Outside Borders <rect>*/
    .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.outsideBordersGroup {
    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.outsideBordersGroup rect.outsideBorders {
            fill: none;
            stroke: #dcdcdc;
            shape-rendering: crispedges;
            stroke-width: 1;
        }

    /* Focus <g>, which contains small chart, X axis, brush */
    .flowGraphMainContainer .flowGraphContainer .flowGraph g.context {
    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.context .x.axis {
        }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context .x.axis .tick {
            }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context .x.axis .tick line {
                    shape-rendering: crispEdges;
                    stroke: #b6b6b6;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode .x.axis .tick line {
                    shape-rendering: crispEdges;
                    stroke: #ABB8F8;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context .x.axis .tick text {
                    font-family: GlowRegular;
                    font-size: 12px;
                    fill: #b6b6b6;
                    text-anchor: start !important;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context .x.axis .tick.dark text {
                    fill: #808080;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode .x.axis .tick text {
                    font-family: GlowRegular;
                    font-size: 11px;
                    fill: #ABB8F8;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode .x.axis .tick.dark text {
                    fill: #5774E7;
                }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context .x.axis path.domain {
                shape-rendering: crispEdges;
                fill: none;
                stroke: #dcdcdc;
                stroke-width: 1px;
            }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode .x.axis path.domain {
                stroke: none;
            }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main {
            pointer-events: all;
        }
            /* Rectangle, which is used to catch mousemove(hover) event */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main rect.gExpander {
                fill: none;
                pointer-events: all;
            }

            /* Today line, which is displayed only if displayTodayLine option is true */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main line.todayLine {
                shape-rendering: crispEdges;
                stroke: #5873E6;
                stroke-width: 1px;
            }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode g.main line.todayLine {
                stroke-width: 2px;
            }

            /* Gray line, which is shown on hover */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main line.nearestMidnightTopLine,
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main line.nearestMidnightBottomLine,
            .flowGraphMainContainer .flowGraphContainer .flowGraph g g.main line.bottleneckAnalysisStartPointLine,
            .flowGraphMainContainer .flowGraphContainer .flowGraph g g.main line.bottleneckAnalysisEndPointLine,
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.focus g.main line.fteLine {
                shape-rendering: crispEdges;
                stroke: #dcdcdc;
                stroke-width: 1px;
                stroke-dasharray: 6, 6;
            }
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main line.nearestMidnightCenterLine {
                shape-rendering: crispEdges;
                stroke: #3664F7;
                stroke-width: 1px;
            }

            /* Resources lines and areas */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.resources {
                shape-rendering: geometricPrecision;
            }

                /* Styles for Resource Areas in Context Chart. Currently used only for Historical Load graph */
                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.resources .resourceArea {
                    display: none;
                    cursor: default;
                }

                    .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.resources .resourceArea.isResourceSelected {
                        display: block;
                    }

        .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.resources .resourceLine {
            /* By default, line is hidden. Only selected resources should display lines */
            display: none;
            fill: none;
            stroke-width: 1px;
        }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.resources .resourceLine.isResourceSelected {
                display: block;
            }

        /* Brush visual elements */
        .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush {
        }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush rect.background {
                visibility: visible !important;
                fill: white;
            }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode g.main g.x.brush rect.background {
                fill: #F4F5FC;
            }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush rect.extent {
                stroke: #ABB8F8;
                fill: #abb8f8;
                shape-rendering: crispedges;
                fill-opacity: 0.1;
            }

            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context.isCompactRangeMode g.main g.x.brush rect.extent {
                stroke: none;
                fill-opacity: 0.6;
            }

            /* <g> which handles extent resize on the right side */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush g.resize.e {
            }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush g.resize.e rect {
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush g.resize.e .extentHandle {
                    height: 16px;
                    width: 9px;
                    visibility: hidden;
                }

            /* <g> which handles extent resize on the left side */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush g.resize.w {
            }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush g.resize.w rect {
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush g.resize.w .extentHandle {
                    height: 16px;
                    width: 9px;
                    visibility: hidden;
                }

            /* Mask, which makes everything outside brush extent slightly transparent. */
            .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush mask {
            }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush mask rect.slightlyTransparent {
                    fill: white;
                    opacity: 0.4;
                }

                .flowGraphMainContainer .flowGraphContainer .flowGraph g.context g.main g.x.brush mask rect.notTransparent {
                    opacity: 1;
                }

.projectsTooltip-container {
    position: absolute;
    z-index: 9999;
    /* width: 540px; */
    width: 440px;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 41, 199, 0.2);
    border-radius: 4px;
}

    /* .projectsTooltip-container::after {
        content:"";
        position: absolute;
        top: 46px;
        right: 133px;
        width: 1px;
        height: calc(100% - 85px);
        background-color: #D8D7D7;
    } */

    .projectsTooltip-container .projectsTooltip-headerTitle {
        display: flex;
        padding: 8px 16px;
        border-bottom: 1px solid #D8D7D7;
        justify-content: space-between;
    }

        .projectsTooltip-container .projectsTooltip-headerTitle .projectsTooltip-headerLeft {
            display: flex;
            align-items: center;
        }

        .projectsTooltip-container .projectsTooltip-headerTitle .projectsTooltip-closeButton {
            cursor: pointer;
        }

        .projectsTooltip-container .projectsTooltip-headerTitle .projectsTooltip-title {
            font-family: GlowSemiBold;
            color: #4A4A4A;
            margin-right: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 130px;
        }

    .projectsTooltip-container .projectsTooltip-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 16px;
        padding-top: 4px;
    }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-date {
            font-family: GlowSemiBold;
            color: #4A4A4A;
            width: 145px;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-button {
            width: 130px;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-button .projectsTooltip-infoImg {
            margin-left: 5px;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-button .projectTooltip-changeTooltipValue {
            display: none;
            color: #5774E7;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-buttonText__hover .projectsTooltip-dateText {
            padding-left: 4px;
            padding-right: 4px;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-buttonText__hover {
            width: 140px;
            height: 28px;
            display: flex;
            align-items: center;
            margin-left: -4px;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-buttonText__hover:hover {
            background-color: #F8F8F8;
            border-radius: 4px;
            cursor: pointer;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-buttonText__hover:hover .projectTooltip-changeTooltipValue {
            display: inline;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-titles {
            width: 230px;
            display: flex;
            justify-content: space-around;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-titles .projectsTooltip-title {
            width: 55px;
            color: #808080;
            text-align: right;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-titles .projectsTooltip-title.projectsTooltip-titleAvgFTE {
            width: 65px;
        }

        .projectsTooltip-container .projectsTooltip-header .projectsTooltip-title.projectsTooltip-averageTitle {
            font-size: 12px;
            width: 112px;
            color: #808080;
            text-align: right;
        }

    .projectsTooltip-container .projectsTooltip-project {
        display: flex;
        justify-content: space-between;
        padding: 0px 16px;
        padding-top: 4px;
        padding-bottom: 6px;
        color: #4A4A4A;
    }

        .projectsTooltip-container .projectsTooltip-project .legendRect {
            height: 3px;
            width: 10px;
            top: 8px;
            margin-right: 5px;
            position: relative;
            display: flex;
            justify-content: space-evenly;
        }

            .projectsTooltip-container .projectsTooltip-project .legendRect .emptyGap {
                position: relative;
                width: 2px;
                height: 3px;
                background-color: white;
            }

        .projectsTooltip-container .projectsTooltip-project .projectsTooltip-values {
            width: 230px;
            display: flex;
            justify-content: space-around;
        }

        .projectsTooltip-container .projectsTooltip-project .projectsTooltip-values .projectsTooltip-value {
            width: 55px;
            text-align: right;
        }

        .projectsTooltip-container .projectsTooltip-project .projectsTooltip-values .projectsTooltip-value.projectsTooltip-valueAvgFTE {
            width: 65px;
            text-align: right;
        }

        .projectsTooltip-container .projectsTooltip-project .projectsTooltip-groupName {
            width: 145px;
            display: flex;
        }

            .projectsTooltip-container .projectsTooltip-project.projectsTooltip-project__inactive .projectsTooltip-groupName {
                padding-left: 15px;
            }

            .projectsTooltip-container .projectsTooltip-project .projectsTooltip-groupName .projectsTooltip-inactiveIcon {
                margin-bottom: 1px;
            }

            .projectsTooltip-container .projectsTooltip-project .projectsTooltip-value.projectsTooltip-averageValue {
                width: 112px;
                text-align: right;
            }

        .projectsTooltip-container .projectsTooltip-project .projectsTooltip-value.projectsTooltip-value__overload {
            color: red;
        }

    .projectsTooltip-container .projectsTooltip-footer {
        height: 40px;
        border-top: 1px solid #D8D7D7;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

        .projectsTooltip-container .projectsTooltip-footer .projectsTooltip-button {
            color: #5774E7;
            cursor: pointer;
        }

            .projectsTooltip-container .projectsTooltip-footer .projectsTooltip-button.disabled {
                opacity: 0.4;
                cursor: default;
            }

        .projectsTooltip-container .projectsTooltip-footer .projectsTooltip-button .projectsTooltip-infoImg {
            margin-bottom: 2px;
        }

        .projectsTooltip-container .projectsTooltip-footer .projectsTooltip-button .projectsTooltip-epicaImg {
            margin-bottom: 4px;
            height: 16px;
            width: 16px;
        }

.dynamicTooltipForGraph,
.dynamicFTETooltipForGraph {
    position: absolute;
    top: calc(100% - 98px);
    z-index: 1000;
    padding: 5px 5px;
    color: #4A4A4A;
    white-space: nowrap;
    font-family: GlowSemiBold;
    font-size: 12px;
    text-align: center;
    box-shadow: none;
    background-color: #F5F5F5;
    border-radius: 0;
}

.future-load-praph-container .dynamicTooltipForGraph,
.future-load-praph-container .dynamicFTETooltipForGraph {
    top: calc(100% - 41px);
}

.dynamicFTETooltipForGraph {
    width: 35px;
    left: 2px;
    pointer-events: none;
}

.dynamicFTETooltipForGraph.right {
    left: calc(100% - 40px);
}

.flowGraphMainContainer .flowGraphHeader .flowGraph-daterange.minimized .daterange {
    background: initial;
    width: 74px;
    padding: 0 10px;
}

/* Styles for resizing historical graph*/
@media (max-width: 1920px ) {

    .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend {
        float: none;
        display: block;
        text-align: left;
        /* Without this style, second line in IE starts only after datepickers */
        clear: both;
    }

        .flowGraphMainContainer .flowGraphHeader.historicalLoadChartHeader .outputLegend .legendItem:first-child {
            margin-left: 0;
        }

 
}