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

#timeline {
    font-family: Helvetica, Arial, sans-serif;
}

#timeline .highcharts-container {
    position: relative;
    overflow: visible;
    min-width: 300px;
    max-width: 2000px;
    text-align: left;
    line-height: normal;
    z-index: 0;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#turnover {
    display: none;
}

table {
    border-collapse: collapse;
}

table td,
table th {
    border: 1px solid silver;
    padding: 0.5em;
}

#timeline .highcharts-axis-title {
    font-weight: 700;
}

#timeline .highcharts-axis-labels {
    color: #46465c;
    font-size: 14px;
}

#timeline .highcharts-color-0 {
    fill: #6699a1;
    stroke: #6699a1;
}

#timeline .highcharts-color-3,
#timeline .highcharts-color-2,
#timeline .highcharts-color-5 {
    fill: #46465c;
    stroke: #46465c;
}

#timeline .highcharts-color-6,
#timeline .highcharts-color-1 {
    fill: #5749ad;
    stroke: #5749ad;
}

#timeline .highcharts-yaxis {
    visibility: hidden;
}

#timeline .highcharts-yaxis-labels text:last-of-type {
    opacity: 0;
}

#timeline .time-1 {
    fill: rgb(102 153 161 / 20%);
    fill-opacity: 1;
}

#timeline .highcharts-plot-band-label:nth-of-type(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    border: 0 solid #000;
    width: 20px;
}

#timeline .time-2 {
    fill: #d9dbf8;
    fill-opacity: 1;
}

#timeline .time-3 {
    fill: #fffaf0;
    fill-opacity: 1;
}

#timeline .time-4 {
    fill: #dff9e7;
    fill-opacity: 1;
}

#timeline .revenue,
#timeline .revenue .highcharts-area {
    fill: rgb(102 153 161);
    stroke: rgb(102 153 161);
    fill-opacity: 0.2;
    stroke-width: 1px;
}

#timeline .employees,
#timeline .employees .highcharts-area {
    fill: #5749ad;
    stroke: #5749ad;
    fill-opacity: 0.2;
    stroke-width: 1px;
}

#timeline .highcharts-legend-item.revenue,
#timeline .highcharts-legend-item.employees {
    fill-opacity: 1;
}

#timeline .award .highcharts-point .highcharts-label-box {
    fill: #534daa;
    stroke-width: 0;
}

#timeline .award .highcharts-label text {
    fill: white;
}

#timeline .product .highcharts-point .highcharts-label-box {
    fill: #2f2b38;
    stroke: #2f2b38;
}

#timeline .release .highcharts-point .highcharts-label-box {
    fill: #78768b;
    stroke: #78768b;
}

#timeline .highcharts-flags-series.cloud .highcharts-point text,
#timeline .highcharts-flags-series.product .highcharts-point text,
#timeline .highcharts-flags-series.release .highcharts-point text {
    fill: #fff;
}

#timeline .award.highcharts-flags-series .highcharts-point .highcharts-label-box {
    transition: fill 250ms;
}

#timeline .award p {
    margin-left: 50%;
}

#timeline .award p.wide {
    margin-left: 40%;
}

.tip {
    color: #f0f0f0;
    width: 100px;
    white-space: pre-wrap;
    margin: 0;
    padding: 2px 0;
}

.tipheader {
    font-size: 11px;
    padding: 0;
    margin: 0;
    color: #f0f0f0;
}

.tip .tip-box {
    fill: #46465c;
    stroke: transparent;
    color: #f0f0f0;
    max-width: 200px;
    width: 200px;
}

.highcharts-tooltip-box {
    stroke-width: 1px;
    fill: #46465c;
    stroke: #46465c;
    fill-opacity: 1;
}

.highcharts-tooltip text {
    fill: #f0f0f0 !important;
    white-space: normal;
}

@media screen  and (min-width: 530px) {
    #timeline .highcharts-yaxis {
        visibility: visible;
    }
}

@media screen  and (min-width: 1024px) {
    #timeline .highcharts-plot-band-label:nth-of-type(1) {
        overflow: visible;
        display: block;
        border: 0 solid #000;
        width: 20px;
        left: 40px !important;
    }
}

@media screen  and (min-width: 1400px) {
    #timeline .highcharts-plot-band-label:nth-of-type(1) {
        left: 60px !important;
    }

    #timeline .award p {
        margin-left: 50%;
    }

    #timeline .award p.wide {
        margin-left: 40%;
    }
}

@media screen  and (min-width: 1600px) {
    #timeline .highcharts-plot-band-label:nth-of-type(1) {
        left: 80px !important;
    }
}
