.bubbleGraphMainContainer {
    position: relative;
    height: 100%;
    overflow: hidden;
    min-width: 670px;
}

    /*#region Bubble Graph Header */
    .bubbleGraphMainContainer .bubbleGraphHeader {
        height: 40px;
        padding: 10px 20px 0 35px;
        background-color: white;
        text-align: left;
        font-family: GlowRegular;
        font-size: 13px;
        color: #4a4a4a;
        line-height: 30px;
        position: absolute;
        z-index: 2;
        width: 100%;
    }

        /* Container with DatePicker and sliders inside */
        .bubbleGraphMainContainer .bubbleGraphHeader .leftSection {
        }

            .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .datePickerContainer {
                float: left;
                margin-left: 5px;
            }

                /* currentDate DatePicker */
                .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .datePickerContainer input.currentDate {
                    width: 110px;
                    height: 28px;
                    -ms-border-radius: 4px;
                    border-radius: 4px;
                    background-color: #ffffff;
                    border: solid 1px #dcdcdc;
                    outline: none;
                    font-family: GlowRegular;
                    font-size: 13px;
                    line-height: 13px;
                    color: #4a4a4a;
                    background: url(/images/shared/small-calendar.png) no-repeat;
                    background-position: 86px 6px;
                    padding: 0 30px 0 9px;
                    cursor: pointer;
                }
                    .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .datePickerContainer input.currentDate:focus {
                        border-color: var(--link-blue);
                    }

            /* TODO: Implement correct sliders */
            .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .totalExpectedSlider {
                float: left;
                position: relative;
                width: 32px;
                margin-left: 19px;
                margin-top: 1px;
                border-radius: 5px;
                border: 1px solid #91A4EF;
                background-color: #ffffff;
                z-index: 30;
            }

            .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .prioritySlider {
                float: left;
                position: relative;
                width: 32px;
                margin-left: 8px;
                margin-top: 1px;
                border-radius: 5px;
                border: 1px solid #91A4EF;
                background-color: #ffffff;
                z-index: 30;
            }

            .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .budgetViewToggle {
                float: left;
                font-family: GlowRegular;
                font-size: 13px;
                color: #4a4a4a;
                margin-left: 20px;
            }

                /* Toggle span itself */
                .bubbleGraphMainContainer .bubbleGraphHeader .leftSection .budgetViewToggle span.ui-toggle {
                    top: -2px;
                }

        /* Container with DatePicker and sliders inside */
        .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer {
            display: none;
            float: right;
        }


            .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer.selectedBubblesTotalLegend .totalSelectedLabel {
                float: left;
                font-size: 13px;
                font-family: GlowSemiBold;
                color: #808080;
                margin-left: 5px;
            }

            .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem {
                float: left;
            }

            .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer.selectedBubblesTotalLegend .legendItem {
                margin-left: 27px;
            }

            .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle {
                float: left;
                width: 7px;
                height: 7px;
                border-radius: 7px;
                margin-top: 12px;
                margin-left: 20px;
            }

                .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle.totalExpected {
                    background: white;
                    border: 1px solid #ffffff;
                }

                .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle.remaining {
                }

                .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle.burned {
                }

                .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle.totalBudget {
                    background: white;
                    border: 1px solid #ffffff;
                }

                    /* These vertical and horizontal lines are used to make circle border dashed, since we can't control how dashed lines look via CSS */
                    .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle.totalBudget .whiteLineVertical {
                        position: absolute;
                        background-color: white;
                        width: 1px;
                        height: 7px;
                        margin-left: 2px;
                        margin-top: -1px;
                    }

                    .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendCircle.totalBudget .whiteLineHorizontal {
                        position: absolute;
                        background-color: white;
                        width: 7px;
                        height: 1px;
                        margin-left: -1px;
                        margin-top: 2px;
                    }



            .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendTextLabel {
                float: left;
                margin-left: 5px;
                color: #808080;
            }

            .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem .legendTextValue {
                float: left;
                margin-left: 4px;
                color: #4a4a4a;
            }
    /*#endregion */

    /*#region Bubble Graph Body */
    .bubbleGraphMainContainer .bubbleGraphContainer {
        /* Force .bubbleGraphContainer to occupy all remaning height and width */
        position: absolute;
        /* 40px is the height of the header */
        top: 40px;
        z-index: 1;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
    }

        .bubbleGraphMainContainer .bubbleGraphContainer svg.bubbleGraph {
            width: 100%;
            height: 100%;
        }

        /* Focus <g>, which contains bubble chart, X and Y axes */
        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus {
        }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus line.dottedLine {
                stroke: #dcdcdc;
                stroke-dasharray: 5, 5;
            }

            /* Focus X Axis */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis {
            }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis .tick {
                }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis .tick line {
                        shape-rendering: crispEdges;
                        stroke: #f5f5f5;
                    }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus.isSomeBubbleHovered .x.axis .tick line {
                stroke: #d0d0d0;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis .tick.dark line {
                stroke: #dcdcdc;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis .tick text {
                font-family: GlowRegular;
                font-size: 12px;
                fill: #b6b6b6;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis .tick.dark text {
                fill: #4a4a4a;
            }

            /* We use this .hidden class to hide those ticks texts, which overlap Dashed Lines <text> element */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis .tick text.hidden {
                display: none;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis path.domain {
                shape-rendering: crispEdges;
                fill: none;
                stroke: #dcdcdc;
                stroke-width: 1px;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .x.axis text.dashedLineValue {
                font-family: GlowRegular;
                font-size: 12px;
                fill: #4a4a4a;
                text-anchor: middle;
                alignment-baseline: top;
            }


            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .xAxisLegend {
                font-family: GlowRegular;
                font-size: 13px;
                text-anchor: middle;
                fill: #808080;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .hoveredProjectInfoContainer {
                text-anchor: middle;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .hoveredProjectInfoContainer .projectName {
                font-family: GlowRegular;
                font-size: 13px;
                fill: #4a4a4a;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .hoveredProjectInfoContainer .daysCount {
                font-family: GlowRegular;
                font-size: 13px;
                fill: #808080;
            }

            /* Focus Y Axis */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis {
            }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .redRectangle {
                    fill: #EC4A43;
                    fill-opacity: 0.06;
                }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .yellowRectangle {
                    fill: #FFB400;
                    fill-opacity: 0.06;
                }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .greenRectangle {
                    fill: #10C406;
                    fill-opacity: 0.06;
                }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .blueRectangle {
                    fill: #0090FF;
                    fill-opacity: 0.02;
                }
            /* When some bubble is hovered, white rect.bubblesFadeRect will be shown on top of everything.
                   We want to change redRectangle color to more intense, so that visually it will still be #fef8f8 even with white overlay */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus.isSomeBubbleHovered .y.axis .redRectangle,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus.isSomeBubbleHovered .y.axis .yellowRectangle,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus.isSomeBubbleHovered .y.axis .greenRectangle {
                fill-opacity: 0.30;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus.isSomeBubbleHovered .y.axis .blueRectangle {
                fill-opacity: 0.12;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .tick {
            }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .tick line {
                    shape-rendering: crispEdges;
                    stroke: #f5f5f5;
                }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus.isSomeBubbleHovered .y.axis .tick line {
                stroke: #d0d0d0;
            }

            /* Used for Y tick line with 0 value */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .tick.dark line {
                stroke: #dcdcdc;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .tick text {
                font-family: GlowRegular;
                font-size: 12px;
                fill: #b6b6b6;
            }

            /* Used for Y tick line with 0 value */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .tick.dark text {
                /* According to design, we shouldn't show 0 for Y axis, only for X axis */
                display: none;
            }

            /* We use this .hidden class to hide those ticks texts, which overlap Dashed Lines <text> element */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis .tick text.hidden {
                display: none;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis path.domain {
                shape-rendering: crispEdges;
                fill: none;
                stroke: #dcdcdc;
                stroke-width: 1px;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .y.axis text.dashedLineValue {
                font-family: GlowRegular;
                font-size: 12px;
                fill: #4a4a4a;
                text-anchor: end;
                alignment-baseline: middle;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .yAxisLegendContainer {
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .yAxisLegendContainer.clickable {
                cursor: pointer;
            }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .yAxisLegendContainer text.yAxisName {
                    font-family: GlowRegular;
                    font-size: 13px;
                    text-anchor: middle;
                    fill: #808080;
                }
                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .yAxisLegendContainer.clickable text.yAxisName {
                    fill: #5774e7;
                }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .yAxisLegendContainer image.yAxisTriangle {
                    display: none;
                }
                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus .yAxisLegendContainer.clickable image.yAxisTriangle {
                    display: block;
                }

            /* Main container for chart bubbles and "No data to display" message. */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph 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) */
                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus g.main rect.gExpander {
                    fill: none;
                    pointer-events: all;
                }

            /* Contains Outside Borders <rect> and Colored Y Priority Axis */
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus g.outsideBordersAndPrioAxis {
            }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus g.outsideBordersAndPrioAxis rect.outsideBorders {
                    fill: none;
                    stroke: #dcdcdc;
                    shape-rendering: crispedges;
                    stroke-width: 1;
                }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus g.outsideBordersAndPrioAxis g.coloredPriorityAxis {
                    shape-rendering: crispEdges;
                }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.focus g.outsideBordersAndPrioAxis g.coloredPriorityAxis line.coloredPriority {
                        stroke-width: 2px;
                    }

        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles {
        }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble {
                cursor: pointer;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .whiteBackgroundCircle {
                fill: white;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .burnedCircle,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .remainingCircle {
                stroke-width: 1px;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .approvedDashedCircle {
                stroke-width: 2px;
                stroke-dasharray: 5, 5;
                fill: none;
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .approvedDashedCircle.hidden {
                display: none;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble line.remainingCircleTopStroke {
                stroke-width: 1px;
                shape-rendering: crispEdges;
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble line.remainingCircleTopStroke.hidden {
                display: none;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble line.approvedDashedCircleTopStroke {
                stroke-width: 2px;
                stroke-dasharray: 5, 5;
                shape-rendering: crispEdges;
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble line.approvedDashedCircleTopStroke.hidden {
                display: none;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .redTasks-path,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .redTasks-text {
                fill: #ec4a43;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .yellowTasks-path,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .yellowTasks-text {
                fill: #FFB400;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .greenTasks-path,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .greenTasks-text {
                fill: #0AC200;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .blueTasks-path,
            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer .blueTasks-text {
                fill: #0693FF;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .projectBubble .informationRingContainer text {
                font-family: GlowSemibold;
                font-size: 13px;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .bubblesFadeRect {
                fill: #ffffff;
                opacity: 0.8;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.projectsBubbles .dashedLines {
                shape-rendering: crispEdges;
                fill: none;
                stroke: #dcdcdc;
                stroke-dasharray: 5, 5;
            }


        /*#region Playback Section, which contains gray background, separator line and Context Slider */
        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection {
        }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection rect.grayBackground {
                fill: #fdfdfd;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection line.horizontalSeparatorLine {
                shape-rendering: crispEdges;
                stroke: #f5f5f5;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection image.playPauseButton {
                cursor: pointer;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context {
            }

                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context .x.axis {
                }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context .x.axis .tick {
                    }
                        /* TODO: ticks don't have lines, check. Remove style if possible */
                        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context .x.axis .tick line {
                        }

                        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context .x.axis .tick text {
                            font-family: GlowRegular;
                            font-size: 11px;
                            fill: #abb8f8;
                        }

                        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context .x.axis .tick.dark text {
                            fill: #5774e7;
                        }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context .x.axis path.domain {
                        fill: none;
                    }


                .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context g.slider {
                }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context g.slider .track {
                        stroke-linecap: round;
                        stroke: #f4f5fc;
                        stroke-width: 8px;
                    }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context g.slider g.handle {
                    }

                        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context g.slider g.handle .outsideCircle {
                            fill: #fff;
                            stroke: #5774e7;
                            stroke-width: 1px;
                        }

                        .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context g.slider g.handle .insideCircle {
                            fill: #5774E7;
                        }

                    .bubbleGraphMainContainer .bubbleGraphContainer .bubbleGraph g.playbackSection g.context g.slider .trackOverlay {
                        stroke-linecap: round;
                        pointer-events: stroke;
                        stroke-width: 55px;
                        stroke: transparent;
                        cursor: pointer;
                    }

        .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown {
            display: none;
            position: absolute;
            left: 34px;
            width: 200px;
            z-index: 9999;
            background-color: white;
            box-shadow: 0 2px 10px 2px rgba(0, 17, 40, 0.2);
            border-radius: 4px;
            font-family: GlowRegular;
            font-size: 14px;
        }
        .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown.visible {
            display: block;
        }

            .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown .header {
                color: #808080;
                padding-left: 10px;
                padding-top: 10px;
                padding-bottom: 4px;
            }

            .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown .listItem {
                color: #4a4a4a;
                cursor: pointer;
                padding-left: 10px;
                padding-top: 4px;
                padding-bottom: 4px;
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown .listItem:hover {
                background-color: #f6f7fe
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown .listItem.selected {
                font-family: GlowSemibold;
                cursor: default;
            }
            .bubbleGraphMainContainer .bubbleGraphContainer .yAxisDropdown .listItem:last-child {
                margin-bottom: 5px;
            }


/*#endregion */

/*#region Sliders*/
.slider-body-top-icon-container-svg {
    pointer-events: none;
    /* By default svg size is 300x150, so let's set correct width and height */
    width: 100%;
    height: 100%;
}

.bubbleGraphMainContainer .bubbleGraphHeader .slider-body-bottom {
    width: 8px;
    height: 102px;
    margin-left: 11px;
    /* margin-top: 0; */
    margin-bottom: 8px;
}

.bubbleGraphMainContainer .bubbleGraphHeader .slider-body-top {
    height: 26px;
    cursor: pointer;
    padding-top: 3px;
}

.bubbleGraphMainContainer .bubbleGraphHeader .prioritySlider .slider-body-top {
    padding-top: 8px;
    padding-left: 2px;
}

    .bubbleGraphMainContainer .bubbleGraphHeader .circles {
        width: 25px;
        height: 10px;
    }

    .bubbleGraphMainContainer .bubbleGraphHeader .circles.red {
        background: url('../../images/shared/colorSlider-red.png');
    }

    .bubbleGraphMainContainer .bubbleGraphHeader .circles.yellow {
        background: url('../../images/shared/colorSlider-yellow.png');
    }

    .bubbleGraphMainContainer .bubbleGraphHeader .circles.green {
        background: url('../../images/shared/colorSlider-green.png');
    }

    .bubbleGraphMainContainer .bubbleGraphHeader .circles.blue {
        background: url('../../images/shared/colorSlider-blue.png');
    }

.bubbleGraphMainContainer .bubbleGraphHeader circle.slider-body-top-icon-circle-blue {
    fill: #5774e7;
    stroke-width: 2px;
    stroke: #ffffff;
}

.bubbleGraphMainContainer .bubbleGraphHeader circle.slider-body-top-icon-circle {
    stroke: #ffffff;
    stroke-width: 1.5px;
}

    .bubbleGraphMainContainer .bubbleGraphHeader circle.slider-body-top-icon-circle.red {
        fill: #ff002b;
    }

    .bubbleGraphMainContainer .bubbleGraphHeader circle.slider-body-top-icon-circle.yellow {
        fill: #ffb400;
    }

    .bubbleGraphMainContainer .bubbleGraphHeader circle.slider-body-top-icon-circle.green {
        fill: #0ac200;
    }

.bubbleGraphMainContainer vertical-slider {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}

    .bubbleGraphMainContainer vertical-slider .simple-vertical-slider.slider-empty-line {
        width: 8px;
        height: 100%;
        border-radius: 4px;
        background-color: #e5eafb;
        position: relative;
    }

    .bubbleGraphMainContainer vertical-slider .simple-vertical-slider .slider-value-line {
        width: 8px;
        border-radius: 4px;
        background-color: #b3c0f4;
        bottom: 0;
        position: absolute;
    }


    .bubbleGraphMainContainer vertical-slider .simple-vertical-slider .slider-circle-inner-container {
        height: 10px;
        width: 10px;
        margin-left: 1px;
        margin-top: 1px;
    }

    .bubbleGraphMainContainer vertical-slider .simple-vertical-slider .slider-circle {
        z-index: 9;
        background-color: #b3c0f4;
        border: solid 1px #ffffff;
        position: absolute;
        border-radius: 9px;
        left: -3px !important;
        cursor: pointer;
        width: 14px;
        height: 14px;
    }

    .bubbleGraphMainContainer vertical-slider .simple-vertical-slider .slider-circle-inner {
        z-index: 9;
        background-color: #5774e7;
        border: solid 2px #ffffff;
        position: absolute;
        border-radius: 7px;
        width: 10px;
        height: 10px;
    }

.bubbleGraphMainContainer vertical-selection-slider {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}

    .bubbleGraphMainContainer vertical-selection-slider .selection-slider.slider-empty-line {
        width: 8px;
        height: 100%;
        border-radius: 4px;
        position: relative;
    }

    .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-colored-value {
        border-bottom: 2px solid transparent;
        background-clip: content-box;
        cursor: pointer;
    }

        .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-colored-value.notSelected {
            opacity: 0.4;
        }

        .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-colored-value .selection-slider-transparent-value {
            position: absolute;
            width: 200vw;
            height: 100%;
            left: -100vw;
            background-color: transparent;
        }

        .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-colored-value:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-colored-value:last-child {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-bottom: none;
        }

    .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-circle-inner-container {
        height: 10px;
        width: 10px;
        margin-left: 1px;
        margin-top: 1px;
    }

    .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-circle {
        top: 50%;
        bottom: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
        padding: 0;
        position: absolute;
        border-radius: 14px;
        cursor: pointer;
        z-index: 9;
        border: solid 1px #ffffff;
        left: 4px !important;
        width: 14px;
        height: 14px;
    }

    .bubbleGraphMainContainer vertical-selection-slider .selection-slider .slider-circle-inner {
        z-index: 9;
        border: solid 2px #ffffff;
        position: absolute;
        border-radius: 7px;
        height: 10px;
        width: 10px;
    }

/*#endregion */


/* Styles for resizing bubbleGraph graph*/
@media (max-width: 1500px ) {
    /* Wrap right legend container to the next line */
    .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer {
        float: none;
        clear: both;
        position: absolute;
        margin-top: 34px;
    }

        .bubbleGraphMainContainer .bubbleGraphHeader .legendsContainer .legendItem:first-child .legendCircle {
            margin-left: 5px;
        }

    /* Move bubbleGraph itself to the bottom, because header height has increased */
    .bubbleGraphMainContainer .bubbleGraphContainer {
        top: 70px;
    }
}