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

/* Colors */
:root {
    --highcharts-dashboards-green: #20d17e;
    --highcharts-dashboards-orange: #feaa61;
}

/* General */
.highcharts-dashboards,
.highcharts-dashboards-wrapper {
    background-color: var(--highcharts-neutral-color-3);
}

.highcharts-background {
    fill: var(--highcharts-neutral-color-0);
}

.highcharts-color-0 {
    stroke: var(--highcharts-dashboards-green);
    fill: var(--highcharts-dashboards-green);
}

.highcharts-color-1 {
    stroke: var(--highcharts-dashboards-orange);
    fill: var(--highcharts-dashboards-orange);
}

/* Rows and cells */
.highcharts-dashboards-row#row-1 {
    background-color: var(--highcharts-neutral-color-5);
    border-radius: 20px;
    padding: 10px;
}

.highcharts-dashboards-cell > .highcharts-dashboards-component {
    background-color: var(--highcharts-neutral-color-0);
    border-radius: 20px;
    padding: 10px;
    text-align: left;
}

/* Components general */
.highcharts-dashboards-component-title {
    padding-left: 10px;
    font-size: 0.8rem;
    font-weight: 100;
}

.highcharts-dashboards-component-subtitle {
    font-size: 0.8rem;
    font-weight: 100;
    padding-left: 20px;
    color: var(--highcharts-dashboards-green);
}

.highcharts-dashboards-component-kpi-value {
    padding-left: 20px;
    font-weight: bold;
}

/* Components specific */
#dashboard-row-1-cell-2 .highcharts-dashboards-component-subtitle {
    color: var(--highcharts-dashboards-orange);
}

#dashboard-row-1-cell-2 .highcharts-color-0 {
    stroke: var(--highcharts-dashboards-orange);
    fill: var(--highcharts-dashboards-orange);
}

#dashboard-row-1-cell-3 .highcharts-dashboards-component-content {
    text-align: center;
}

#dashboard-row-2-cell-1 .highcharts-color-0 .highcharts-area {
    fill-opacity: 1;
    fill: url(#gradient-0);
}

#dashboard-row-3-cell-1 .highcharts-color-0 {
    stroke: var(--highcharts-dashboards-orange);
    fill: var(--highcharts-dashboards-orange);
}

#dashboard-row-3-cell-3 .highcharts-dashboards-component-content {
    padding: 10px 0 !important;
    height: 165px !important;
}

#dashboard-row-3-cell-3 .highcharts-datagrid-container {
    border: none;
    font-weight: 100;
}

#dashboard-row-3-cell-3 .highcharts-datagrid-column-header {
    background-color: var(--highcharts-neutral-color-0);
}

#dashboard-row-3-cell-3 .highcharts-datagrid-row {
    background-color: var(--highcharts-neutral-color-0);
}

/* Custom classes and ids */
#saving-button {
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    background-color: var(--highcharts-dashboards-orange);
    cursor: pointer;
}

/* Gradient  */
#gradient-0 stop {
    stop-color: var(--highcharts-dashboards-green);
}

#gradient-0 stop[offset="0"] {
    stop-opacity: 0.75;
}

#gradient-0 stop[offset="1"] {
    stop-opacity: 0;
}

#dashboard-row-1-cell-1,
#dashboard-row-1-cell-2,
#dashboard-row-1-cell-3 {
    height: 160px;
}

#dashboard-row-3-cell-1,
#dashboard-row-3-cell-2,
#dashboard-row-3-cell-3 {
    height: 260px;
}

#dashboard-row-3-cell-1,
#dashboard-row-3-cell-2 {
    flex: 1 1 20%;
}

#dashboard-row-3-cell-3 {
    flex: 1 1 60%;
}

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-row-1-cell-1,
    #dashboard-row-1-cell-2,
    #dashboard-row-1-cell-3 {
        flex: 1 1 33.333%;
    }

    #dashboard-row-3-cell-1,
    #dashboard-row-3-cell-2 {
        flex: 1 1 20%;
    }

    #dashboard-row-3-cell-3 {
        flex: 1 1 60%;
    }
}

/* MEDIUM */
@media (max-width: 992px) {
    #dashboard-row-1-cell-1,
    #dashboard-row-1-cell-2,
    #dashboard-row-1-cell-3 {
        flex: 1 1 50%;
    }

    #dashboard-row-3-cell-1,
    #dashboard-row-3-cell-2 {
        flex: 1 1 50%;
    }

    #dashboard-row-3-cell-3 {
        flex: 1 1 100%;
    }
}

/* SMALL */
@media (max-width: 576px) {
    #dashboard-row-1-cell-1,
    #dashboard-row-1-cell-2,
    #dashboard-row-1-cell-3 {
        flex: 1 1 50%;
    }

    #dashboard-row-3-cell-1,
    #dashboard-row-3-cell-2,
    #dashboard-row-3-cell-3 {
        flex: 1 1 100%;
    }
}