$colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1;

@import '~highcharts/css/highcharts.scss';
@import '~superdesk-ui-framework/app/styles/_reboot.scss';
@import '~superdesk-ui-framework/app/styles/variables/_colors.scss';

.sda-chart__container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;

    .panel-info {
        width: 100%;
    }

    .sda-chart__loader-container {
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 0;
        left: 0;

        .sda-chart__loader {
            position: relative;
            width: 100%;
            height: 100%;

            .sd-loader {
                background-color: rgba(248, 248, 248, 0.85);
            }
        }
    }
}

.open-filters {
    .sda-chart__loader-container {
        left: 36rem;
    }
}

.sda-chart__chart {
    width: 100%;

    &--full-height {
        height: 100%;

        .sda-chart__highchart {
            height: 100%;
        }
    }

    &--margin-bottom {
        margin-bottom: 3rem;
        .sda-chart__table {
            margin-bottom: 3rem;
        }
    }

    &--multi-chart {
        width: 50%;
        height: 85%;
    }

    .sda-chart__highchart {
        width: 100%;
    }
}

.sda-chart__table {
    display: block;
    background-color: white;

    .clickable {
        cursor: pointer;
    }

    td.clickable:hover {
        border: 1px solid #9bb3ff;
    }

    .sda-chart__table-header {
        z-index: 1000;
        text-align: center;
        padding: 1rem 0 2rem 0;

        position: sticky;
        top: 0;
        background-color: $white;

        &--no-padding-bottom {
            padding-bottom: 0;
        }

        .pagination-box {
            display: block;
            position: absolute;
            right: 0;
            top: 1rem;
        }

        .sd-pagination {
            padding: 0;
        }
    }

    .sda-chart__table-header-options {
        position: absolute !important;
        right: 1rem;
        top: 1rem;
    }

    .sda-chart__table-content {
        display: block;

        table {
            border-top: none;
        }

        th {
            text-transform: uppercase;
            position: sticky;
            background-color: $white;
            z-index: 1000;
        }

        thead {
            tr:first-child {
                th {
                    top: 58px;
                    border-top: 1px solid $sd-tableBorderColor;
                }
            }

            tr:nth-child(2) {
                th {
                    top: 102px;
                }
            }
        }

        tr:nth-child(odd) {
            background-color: $grayLighter;
        }

        tr:hover {
            background-color: #cee6fa;
        }

        td {
            vertical-align: middle;
        }

        .no-vert-padding {
            padding-top: 0;
            padding-bottom: 0;
        }

        .panel-info {
            border-top: 1px solid rgba(0, 0, 0, 0.15);
            padding-bottom: 10rem;
        }
    }
}

.highcharts-container {
    font-family: $baseFontFamily;
    font-size: $baseFontSize;
    line-height: $baseLineHeight;
}

.highcharts-background {
    fill: $white;
}

.highcharts-plot-background {
    fill: none;
}

.highcharts-plot-border {
    border-width: 0;
}

.highcharts-title, .sda-chart__table-header-title {
    text-transform: uppercase;
    font-size: 2.0rem;
    letter-spacing: 0.04em;
    color: $grayDark;
}

.sda-chart__table-header-title {
    margin-bottom: 1rem;
}

.highcharts-subtitle, .sda-chart__table-header-subtitle {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    color: $gray;
    fill: $gray;
}

.highcharts-legend-item text {
    font-weight: normal;
}

.highcharts-axis-title, .highcharts-axis-labels {
    font-size: 1.4rem;
    letter-spacing: 0.04rem;
}

.highcharts-contextbutton {
    fill: none;
}

.highcharts-stack-labels text {
    font-weight: 100;
}

.highcharts-legend-item text {
    font-weight: 100;
    fill: $gray;

    &:hover {
        font-weight: 400;
        fill: $grayDark;
    }
}

.highcharts-data-label text {
    font-weight: 100;
    fill: $gray;
}

.highcharts-point {
    cursor: pointer;
}

.highcharts-data-label-color-0 .highcharts-data-label-box {@extend .highcharts-color-0;}
.highcharts-data-label-color-0.highcharts-data-label text {fill: white;}

.highcharts-data-label-color-1 .highcharts-data-label-box {@extend .highcharts-color-1;}
.highcharts-data-label-color-1.highcharts-data-label text {fill: white;}

.highcharts-data-label-color-2 .highcharts-data-label-box {@extend .highcharts-color-2;}
.highcharts-data-label-color-2.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-3 .highcharts-data-label-box {@extend .highcharts-color-3;}
.highcharts-data-label-color-3.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-4 .highcharts-data-label-box {@extend .highcharts-color-4;}
.highcharts-data-label-color-4.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-5 .highcharts-data-label-box {@extend .highcharts-color-5;}
.highcharts-data-label-color-5.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-6 .highcharts-data-label-box {@extend .highcharts-color-6;}
.highcharts-data-label-color-6.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-7 .highcharts-data-label-box {@extend .highcharts-color-7;}
.highcharts-data-label-color-7.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-8 .highcharts-data-label-box {@extend .highcharts-color-8;}
.highcharts-data-label-color-8.highcharts-data-label text {fill: $gray;}

.highcharts-data-label-color-9 .highcharts-data-label-box {@extend .highcharts-color-9;}
.highcharts-data-label-color-9.highcharts-data-label text {fill: $gray;}

.sda-black {
    fill: $black;
    stroke: $black;
    background-color: $black !important;
}

.sda-gray-darker {
    fill: $grayDarker;
    stroke: $grayDarker;
    background-color: $grayDarker !important;
}

.sda-gray-dark {
    fill: $grayDark;
    stroke: $grayDark;
    background-color: $grayDark !important;
}

.sda-gray-medium {
    fill: $grayMedium;
    stroke: $grayMedium;
    background-color: $grayMedium !important;
}

.sda-gray {
    fill: $gray;
    stroke: $gray;
    background-color: $gray !important;
}

.sda-gray-neutral {
    fill: $grayNeutral;
    stroke: $grayNeutral;
    background-color: $grayNeutral !important;
}

.sda-gray-text {
    fill: $grayText;
    stroke: $grayText;
    background-color: $grayText !important;
}

.sda-gray-light {
    fill: $grayLight;
    stroke: $grayLight;
    background-color: $grayLight !important;
}

.sda-gray-lighter {
    fill: $grayLighter;
    stroke: $grayLighter;
    background-color: $grayLighter !important;
}

.sda-white {
    fill: $white;
    stroke: $white;
    background-color: $white !important;
}

.sda-blue {
    fill: $sd-blue;
    stroke: $sd-blue;
    background-color: $sd-blue !important;
}

.sda-blue-medium {
    fill: $sd-blueMedium;
    stroke: $sd-blueMedium;
    background-color: $sd-blueMedium !important;
}

.sda-blue-dark {
    fill: $sd-blueDark;
    stroke: $sd-blueDark;
    background-color: $sd-blueDark !important;
}

.sda-green {
    fill: $green;
    stroke: $green;
    background-color: $green !important;
}

.sda-red {
    fill: $red;
    stroke: $red;
    background-color: $red !important;
}

.sda-yellow {
    fill: $yellow;
    stroke: $yellow;
    background-color: $yellow !important;
}

.sda-orange {
    fill: $orange;
    stroke: $orange;
    background-color: $orange !important;
}

.sda-purple {
    fill: $purple;
    stroke: $purple;
    background-color: $purple !important;
}

.sda-fern-green {
    fill: $fernGreen;
    stroke: $fernGreen;
    background-color: $fernGreen !important;
}

.sda-old-gold {
    fill: $oldGold;
    stroke: $oldGold;
    background-color: $oldGold !important;
}

.sda-dark-orange {
    fill: $darkOrange;
    stroke: $darkOrange;
    background-color: $darkOrange !important;
}

.sda-fire-brick {
    fill: $fireBrick;
    stroke: $fireBrick;
    background-color: $fireBrick !important;
}

.sda-deep-pink {
    fill: $deepPink;
    stroke: $deepPink;
    background-color: $deepPink !important;
}

.sda-dark-magenta {
    fill: $darkMagenta;
    stroke: $darkMagenta;
    background-color: $darkMagenta !important;
}

.sda-dark-violet {
    fill: $darkViolet;
    stroke: $darkViolet;
    background-color: $darkViolet !important;
}

.sda-navy {
    fill: $navy;
    stroke: $navy;
    background-color: $navy !important;
}

.sda-chart__dropdown-menu {
    margin-left: 4rem;
}