.bubbles {
    stroke-width: 10px;
    stroke-opacity: 0.2;
    stroke: white;
}

.bubbles.bubble-category-issues_and_causes {
    stroke: rgb(75, 62, 150);
}

.bubbles.bubble-category-emerging_voices {
    stroke: rgb(52, 189, 166);
}

.bubbles.bubble-category-offline_events {
    stroke: rgb(241, 105, 27);
}

.bubbles.bubble-category-news {
    stroke: #66cbe4;
}

.bubbles.bubble-category-brand_noise {
    stroke: rgb(255, 255, 255);
}

.bubbles.bubble-category-moments {
    stroke: rgba(240, 96, 153, 1);
}

/* bb legend */


.bubble-legend.bubble-category-issues_and_causes {
    background: rgb(75, 62, 150);
    box-shadow: 0px 0px 0px 5px rgba(75, 62, 150, 0.4);
}

.bubble-legend.bubble-category-emerging_voices {
    background: rgb(52, 189, 166);
    box-shadow: 0px 0px 0px 5px rgba(52, 189, 166, 0.4);
}

.bubble-legend.bubble-category-offline_events {
    background: rgb(241, 105, 27);
    box-shadow: 0px 0px 0px 5px rgba(241, 105, 27, 0.4);
}

.bubble-legend.bubble-category-brand_noise {
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 0px 5px rgba(210, 210, 210, 0.4);
}

.bubble-legend.bubble-category-moments {
    background: rgba(240, 96, 153, 1);
    box-shadow: 0px 0px 0px 5px rgba(240, 96, 153, 0.4);
}

.bubble-legend.bubble-category-covid_19 {
    background: #ffff00;
    box-shadow: 0px 0px 0px 5px rgba(255, 255, 0, 0.4);
}

.bubble-legend.bubble-category-blue, .bubble-legend.bubble-category-all {
    background: rgb(77, 151, 213);
    box-shadow: 0px 0px 0px 5px rgba(77, 151, 213, 0.4);
}

.bubble-legend.circle-dot-size-1 {
    box-shadow: 0px 0px 0px 10px rgba(77, 151, 213, 0.4);
}

.bubble-legend.circle-dot-size-2 {
    box-shadow: 0px 0px 0px 15px rgba(77, 151, 213, 0.4);
}

.bubble-legend.circle-dot-size-3 {
    box-shadow: 0px 0px 0px 25px rgba(77, 151, 213, 0.4);
}


.legend-click.legend-click-cycle_value {
    padding-bottom: 20px;
}

.legend-click.legend-click-cycle_value-3 {
    padding-bottom: 33px;
}


.bubbles:hover {

}

.active-add-mode {
    color: red;
}

.black-graph {
    background: #232438;
    position: relative;
}


.gtooltip {
    position: absolute;
    max-width: 200px;
    z-index: 111;
    font-size: 12px;
    background: white;
    color: #444444;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.gtooltip a {
    color: #9fe8d4;
    font-size: 15px;
}


.arrow1 {
    fill: #5991ce; /*#5991ce; */
}

.arrow2 {
    fill: #5991ce; /* #eb694a; */
}

.arrow3 {

    fill: #5991ce; /*#52c0ac; */
}

.arrow4 {
    fill: #5991ce; /* #f9de00; */
}

.stop-left {
    stop-color: #3f51b5; /* Indigo */
}

.stop-right {
    stop-color: #009688; /* Teal */
}

.filled {
    fill: url(#mainGradient);
}

.outlined {
    fill: none;
    stroke: url(#mainGradient);
    stroke-width: 4;
}

.text-legend {
    fill: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.axis path,
.axis line {
    fill: none;
    d: none;
}

.line {
    fill: none;
    stroke: blue;
    stroke-width: 2px;
}

.tick text {
    font-size: 20px;
    color: white;
}

.tick line {
    /* opacity: 0.2; */
    stroke: #98949d;
    stroke-width: 6px;
    stroke-linecap: round;
}

.bubbles {
    stroke: white;
    stroke-opacity: 0.4;
}

.bubble-size-1 {
    stroke-width: 16px;

}

.bubble-size-2 {
    stroke-width: 32px;
}

.bubble-size-3 {
    stroke-width: 64px;
}

.graph-moment-title {
    font-weight: bold;
}

.gtooltip {
    min-width: 100px;
}


.rd-color-first {
    border-color: #eb694a !important;
    background: #eb694a !important;
}

.rd-color-second {
    border-color: #52c0ac !important;
    background: #52c0ac !important;
}

.mm-color-first {
    border-color: #f9de00 !important;
    background: #f9de00 !important;
}

.mm-color-second {
    border-color: #5991ce !important;
    background: #5991ce !important;
}

.slider-legend-wrapper {
}

.cycle-legend-wrapper {

}

.color-legend-wrapper {
}


.graph-circle {

}


.graph-circle img.circle-legend {
    opacity: 0;
    transition-duration: 300ms;
    transition-property: opacity;

}


.circle-dot {
    padding: 16px;
    border-radius: 60px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 26px;
}

.legend-click {
    display: block;
    font-weight: bold;
    color: #f9faee;
    text-decoration: none;
    padding: 12px 8px;
}

.legend-click:hover {
    text-decoration: none;
    color: #f9faee;
}


@-webkit-keyframes pulse {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}


.graph-circle {
    position: absolute;
    right: 0px;
    top: initial;
    bottom: 30px;
}


.bubble-important, .pulsate {
    animation: pulse 3s infinite linear;
}

.modal-open .bubble-important {
    animation: none;
}

.legend-click-inactive {
    opacity: 0.4;
}

.legend-image {
    width: 36px;
    height: auto;
    margin-left: -1px;
    margin-right: 6px;
}

.color-legend {
    padding-top: 25px;
}

.graph-slider-black {
    color: white;
}

.active-moment-navi {
    font-size: 48px;
    display: block;
    color: white;
    height: 65px;
}

.active-moment-wrapper {
    color: white;
    padding-bottom: 24px;
}

.active-moment-navi:hover {
    color: #6cb2eb;
}

.active-moment-navi .material-icons {
    font-size: 48px;
}

.cycle-legend-wrapper {
    padding-top: 64px;
}

.axis--x .tick line {
    display: none;
}


@media all and (max-width: 1024px) {

    .tick text {
        font-size: 14px;
        color: white;
    }

    .text-legend {
        font-size: 17px;
    }

    .bubble-size-1 {
        stroke-width: 8px;

    }

    .bubble-size-2 {
        stroke-width: 16px;
    }

    .bubble-size-3 {
        stroke-width: 32px;
    }

    .legend-click {
        font-size: 14px;
    }

    .color-legend {
        padding-right: 0px;
        padding-left: 10px;
    }


    .bubble-legend.circle-dot-size-1 {
        box-shadow: 0px 0px 0px 6px rgba(77, 151, 213, 0.4);
    }

    .bubble-legend.circle-dot-size-2 {
        box-shadow: 0px 0px 0px 8px rgba(77, 151, 213, 0.4);
    }

    .bubble-legend.circle-dot-size-3 {
        box-shadow: 0px 0px 0px 16px rgba(77, 151, 213, 0.4);
    }

    .cycle-legend-wrapper {
        padding-top: 28px;
    }

    .color-legend {
        padding-top: 1px;
    }

    .legend-click.legend-click-cycle_value {
        padding-bottom: 12px;
    }

    .legend-click {
        font-size: 14px;
    }

    .legend-click {
        padding: 7px 8px;
    }

    .slider-legend-wrapper {
        font-size: 14px;
    }

    .legend-click.legend-click-cycle_value-3 {
        padding-bottom: 27px;
    }
}

.bubble-on-list {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
}