@import url("https://code.highcharts.com/css/highcharts.css");

body {
    margin: 0;
}

/* Styles for all branded charts */

.chart-container .thick {
    stroke-width: 1;
    stroke: white;
    color: white;
    transition: all 2s;
}

.chart-container .thin {
    stroke-width: 1;
    stroke: white;
    color: white;
    transition: all 2s;
}

.chart-container .transparent {
    opacity: 1;
    stroke-width: 1;
    stroke: white;
    color: white;
    transition: all 2s;
}

.chart-container .highcharts-area,
.chart-container .highcharts-arearange {
    fill-opacity: 1;
    stroke: transparent;
}

.line {
    color: #fff;
    stroke: #fff;
    stroke-width: 1px;
}

.chart-container .highcharts-container {
    position: relative;
    overflow: hidden;
    text-align: left;
    line-height: normal;
    z-index: 0;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    fill: #2f2b38;
    font-size: 12px;
    user-select: none;
    touch-action: manipulation;
    outline: none;
}

.chart-container .highcharts-grid-line {
    fill: none;
    stroke: transparent;
    z-index: 40;
}

.chart-container .highcharts-xaxis-grid .highcharts-grid-line {
    stroke-width: 1px;
}

.chart-container .highcharts-plot-band,
.highcharts-pane {
    fill: #30426b;
    fill-opacity: 1;
    z-index: 30;
}

.chart-container .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.chart-container .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),
.chart-container .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),
.chart-container .highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
    opacity: 1;
}

.chart-container .highcharts-series-inactive {
    opacity: 1;
    transition: opacity 50ms;
}

.chart-container .highcharts-tooltip-0 {
    filter: drop-shadow(5px 7px 13px rgb(0 0 0 / 14%)) !important;
    box-shadow: 5px 7px 13px 1px rgb(0 0 0 / 14%);
}

.chart-container .highcharts-tooltip-box {
    stroke-width: 0;
    border: none;
    stroke: #ebebeb;
    fill: #fff;
    fill-opacity: 1;
}

.chart-container .highcharts-tooltip text {
    fill: #333;
    font-family: "IBM Plex Sans", sans-serif;
}

.chart-container .highcharts-tooltip {
    z-index: 100;
}

.chart-container .highcharts-graph {
    fill: unset;
    stroke-width: unset;
    stroke: unset;
    stroke-linecap: butt;
    stroke-linejoin: round;
}

/* Styles for Stock */

#stock {
    width: 250px;
    height: 250px;
    border-radius: 4px;
    background-color: #2f2b38;
    border: 1px solid #46465c;
}

#stock .transparent {
    fill: transparent;
    stroke: transparent;
}

#stock .highcharts-background {
    fill: #201836;
    stroke: transparent;
}

#stock .highcharts-title,
#stock .highcharts-subtitle,
#stock .highcharts-axis-title,
#stock .highcharts-axis-labels,
#stock .highcharts-range-input text {
    fill: #f0f0f0;
}

#stock .highcharts-range-selector-group {
    opacity: 0;
}

#stock .highcharts-range-selector-group.fade-in {
    opacity: 1;
    transition: opacity 1s;
    transform: translate(-20px, 30px);
}

#stock .highcharts-title {
    font-weight: 700;
    font-size: 1.1em;
    opacity: 0;
    transition: opacity 1s;
}

#stock .highcharts-subtitle {
    font-weight: 400;
    font-size: 0.9em;
    opacity: 0;
    transition: opacity 1s;
}

#stock .highcharts-range-input text {
    font-size: 0.9em;
}

#stock .highcharts-range-label text {
    fill: #fff;
}

#stock .highcharts-button text {
    fill: #f0f0f0;
}

#stock .highcharts-button {
    fill: #505053;
    stroke: #999;
    cursor: default;
    stroke-width: 1px;
    transition: fill 250ms;
}

#stock .highcharts-button-pressed {
    font-weight: bold;
    fill: #000;
    stroke: #999;
}

#stock .highcharts-tooltip-box .highcharts-label-box {
    fill: #fff;
    fill-opacity: 1;
}

#stock .highcharts-range-input {
    stroke-width: 1px;
    stroke: #999;
    fill: #000;
}

#stock .highcharts-range-input rect {
    fill: #000;
}

#stock .highcharts-axis-resizer {
    cursor: ns-resize;
    stroke: #f0f0f0;
    stroke-width: 3px;
}

#stock .green {
    fill: #8bf2b6;
    stroke: transparent;
    opacity: 0;
    transform: translate(150px, 70px) scale(0.1);
    transition: transform 2s;
}

#stock .green-line .highcharts-graph {
    fill: transparent;
    stroke-width: 18px;
    stroke: #8bf2b6;
}

#stock .stick .highcharts-point {
    stroke: #8087e8;
    fill: #8087e8;
}

#stock .column .highcharts-point {
    fill: #8bf2b6;
    stroke: transparent;
    opacity: 1;
}

#stock .column .highcharts-pointshow {
    opacity: 1;
}

#stock .green-line .highcharts-point:nth-of-type(3) {
    clip-path: polygon(12.14% 16.43%, 82.86% 17.14%, 82.86% 89.29%);
    fill: #8bf2b6;
    fill: transparent;
    transform: translate(50px, -50px) scale(0.1);
    transform-origin: center;
    transition: all 1s;
}

#stock .purple-line .highcharts-graph {
    fill: transparent;
    stroke-width: 18px;
    stroke: #8087e8;
}

#stock .white-line .highcharts-graph {
    fill: transparent;
    stroke-width: 18px;
    stroke: #fff;
}

#stock .green-line.hide .highcharts-point,
#stock .green-line.hide .highcharts-graph {
    opacity: 0;
    transition: none;
}

#stock .purple-line.hide .highcharts-point,
#stock .purple-line.hide .highcharts-graph {
    opacity: 0;
    transition: none;
}

#stock .purple {
    fill: #8087e8;
    stroke: transparent;
    transform: translate(40px, 45px) scale(0.1);
    transform-origin: center;
    transition: transform 2s;
    opacity: 0;
}

/* line */

#stock .purple-line.fade-out .highcharts-graph {
    opacity: 0;
    transition: 1s;
}

/* arrow */
#stock .purple-line .highcharts-point:nth-of-type(3) {
    clip-path: polygon(14.29% 84.28%, 85.73% 11.45%, 88.58% 85%);
    fill: transparent;
    stroke: transparent;
    transform: translate(50px, 50px) scale(0.1);
    transform-origin: center;
    transition: all 1s;
}

#stock .purple-line.static .highcharts-point:nth-of-type(1),
#stock .purple-line.static .highcharts-point:nth-of-type(2) {
    fill: transparent;
    stroke: transparent;
    transform: none;
    transition: none;
}

.highcharts-color-3 {
    stroke: transparent;
    fill: transparent;
}

/* static arrow */
#stock .purple-line.static .highcharts-point:nth-of-type(3) {
    fill: #8087e8;
    transform: none;
    transition: none;
}

#stock .purple-line.grow .highcharts-point:nth-of-type(3) {
    fill: #8087e8;
    transform: none;
}

/* line */

#stock .green-line.fade-out .highcharts-graph {
    opacity: 0;
    transition: opacity 1s;
}

/* arrow */

#stock .green-line.static .highcharts-point:nth-of-type(3) {
    fill: #8bf2b6;
    transform: none;
    transition: none;
}

#stock .green-line.grow .highcharts-point:nth-of-type(3) {
    fill: #8bf2b6;
    transform: none;
}

#stock .stick {
    opacity: 0;
}

#stock .stick.fade-in {
    opacity: 1;
    transition: opacity 1s;
}

#stock .stick .highcharts-point-down {
    fill: #ea6484;
    stroke: #ea6484;
}

#stock .highcharts-navigator-series {
    fill: transparent;
    stroke: #6f9ccd;
}

#stock .stock-top,
#stock .stock-bottom {
    fill: #46445d;
    stroke: transparent;
}

#stock .stock-top.hide,
#stock .stock-bottom.hide {
    opacity: 0;
}

#stock .stock-top.fade-out,
#stock .stock-bottom.fade-out {
    opacity: 0;
    transition: 300ms;
}

#stock .particles image {
    transition: transform 3s;
}

#stock .particle-1,
#stock .particle-2,
#stock .particle-3,
#stock .particle-4,
#stock .particle-5,
#stock .particle-6 {
    opacity: 0;
}

#stock .particle-1.move,
#stock .particle-2.move,
#stock .particle-3.move,
#stock .particle-4.move,
#stock .particle-5.move,
#stock .particle-6.move {
    opacity: 1;
}

#stock .particle-1.move {
    transform: translate(500px, -50px);
}

#stock .particle-2.move {
    transform: translate(500px, -150px);
}

#stock .particle-3.move {
    transform: translate(500px, -250px);
}

#stock .particle-4.move {
    transform: translate(500px, 30px);
}

#stock .particle-5.move {
    transform: translate(500px, 230px);
}

#stock .particle-6.move {
    transform: translate(500px, 100px);
}

#stock .particle-1.static,
#stock .particle-2.static,
#stock .particle-3.static,
#stock .particle-4.static,
#stock .particle-5.static,
#stock .particle-6.static {
    opacity: 1;
    transition: none;
}

#stock .particle-1.static.fade,
#stock .particle-2.static.fade,
#stock .particle-3.static.fade,
#stock .particle-4.static.fade,
#stock .particle-5.static.fade,
#stock .particle-6.static.fade {
    opacity: 0;
    transition: opacity 500ms;
}

#stock .particle-1.static {
    transform: translate(70px, -30px);
}

#stock .particle-2.static {
    transform: translate(130px, 0);
}

#stock .particle-3.static {
    transform: translate(180px, -20px);
}

#stock .particle-4.static {
    transform: translate(130px, -40px);
}

#stock .particle-5.static {
    transform: translate(180px, -80px);
}

#stock .particle-6.static {
    transform: translate(180px, 30px);
}

@media screen  and (min-width: 300px) {
    #stock {
        width: 300px;
        height: 300px;
    }
}

@media screen  and (min-width: 400px) {
    #stock {
        width: 400px;
        height: 400px;
    }

    #stock .highcharts-subtitle {
        font-weight: 400;
        font-size: 0.9em;
        opacity: 0;
        transition: opacity 1s;
    }

    #stock .purple-line .highcharts-graph,
    #stock .green-line .highcharts-graph {
        stroke-width: 24px;
    }
}

/* at least 500px wide */
@media screen  and (min-width: 500px) {
    #stock {
        width: 500px;
        height: 500px;
    }

    #stock .purple-line .highcharts-graph {
        fill: transparent;
        stroke-width: 28px;
        stroke: #8087e8;
    }

    #stock .green-line .highcharts-graph {
        fill: transparent;
        stroke-width: 28px;
        stroke: #8bf2b6;
    }

    #stock .white-line .highcharts-graph {
        fill: transparent;
        stroke-width: 28px;
        stroke: #fff;
    }

    #stock .green {
        fill: #8bf2b6;
        stroke: transparent;
        opacity: 0;
        transform: translate(150px, 70px) scale(0.1);
        transition: transform 2s;
    }

    #stock .purple {
        fill: #8087e8;
        stroke: transparent;
        transform: translate(40px, 45px) scale(0.1);
        transform-origin: center;
        transition: transform 2s;
        opacity: 0;
    }

    #stock .highcharts-title {
        font-size: 1.4em;
    }

    #stock .highcharts-subtitle {
        font-size: 1em;
    }
}
