/************************/
/*** status dashboard ***/
/************************/
html.dashboard.status.illinois {
    font-size: 2.75vmin;
    font-weight: 300;
}

@media only screen and (min-aspect-ratio: 90/90) and (max-aspect-ratio: 95/90) {
    html.dashboard.status.illinois {
        font-size: 1.5vmin;
    }
}

@media only screen and (min-aspect-ratio: 95/90) and (max-aspect-ratio: 100/90) {
    html.dashboard.status.illinois {
        font-size: 1.55vmin;
    }
}

@media only screen and (min-aspect-ratio: 100/90) and (max-aspect-ratio: 105/90) {
    html.dashboard.status.illinois {
        font-size: 1.65vmin;
    }
}

@media only screen and (min-aspect-ratio: 105/90) and (max-aspect-ratio: 110/90) {
    html.dashboard.status.illinois {
        font-size: 1.7vmin;
    }
}

@media only screen and (min-aspect-ratio: 110/90) and (max-aspect-ratio: 115/90) {
    html.dashboard.status.illinois {
        font-size: 1.8vmin;
    }
}

@media only screen and (min-aspect-ratio: 115/90) and (max-aspect-ratio: 120/90) {
    html.dashboard.status.illinois {
        font-size: 1.9vmin;
    }
}

@media only screen and (min-aspect-ratio: 120/90) and (max-aspect-ratio: 125/90) {
    html.dashboard.status.illinois {
        font-size: 2vmin;
    }
}

@media only screen and (min-aspect-ratio: 125/90) and (max-aspect-ratio: 130/90) {
    html.dashboard.status.illinois {
        font-size: 2.1vmin;
    }
}

@media only screen and (min-aspect-ratio: 130/90) and (max-aspect-ratio: 140/90) {
    html.dashboard.status.illinois {
        font-size: 2.2vmin;
    }
}

@media only screen and (min-aspect-ratio: 140/90) and (max-aspect-ratio: 145/90) {
    html.dashboard.status.illinois {
        font-size: 2.3vmin;
    }
}

@media only screen and (min-aspect-ratio: 145/90) and (max-aspect-ratio: 150/90) {
    html.dashboard.status.illinois {
        font-size: 2.4vmin;
    }
}

@media only screen and (min-aspect-ratio: 150/90) and (max-aspect-ratio: 155/90) {
    html.dashboard.status.illinois {
        font-size: 2.5vmin;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .layout-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(9, 1fr);
    }
}
/*
html.dashboard.status .panel.logo {
    text-align: center;
}

@media (orientation: portrait) {
    html.dashboard.status .panel.logo {
        height: 4rem;
    }
}

    @media (orientation: landscape) {
    html.dashboard.status.illinois .panel.logo {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 2;
    }
}
*/


@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.equipment {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 10;
    }
}

@media (orientation: portrait) {
    html.dashboard.status.illinois .panel.equipment {
        height: 33rem;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.north-front-end {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.north-distillation {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 4;
        grid-row-end: 7;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.north-energy-center {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 7;
        grid-row-end: 10;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.south-front-end {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.south-distillation {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 4;
        grid-row-end: 7;
    }
}

@media (orientation: landscape) {
    html.dashboard.status.illinois .panel.south-energy-center {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 7;
        grid-row-end: 10;
    }
}
/*
    html.dashboard.status .panel.logo .panel-body {
    margin-bottom: 0;
}


html.dashboard.status .panel.logo img {
    width: 14rem;
}
*/

html.dashboard.status .panel.equipment .panel-body {
    padding-top: 0.5rem;
    -webkit-box-pack: start;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    height: 100%;
}

html.dashboard.status .panel.equipment .equipment-container {
    display: flex;
    height: 2.2rem;
    line-height: 1rem;
    -webkit-box-align: center;
    align-items: center;
}

html.dashboard.status .panel.equipment .equipment-container .equipment-name {
    font-size: 0.777rem;
    margin: 0;
}

html.dashboard.status.illinois .panel.equipment .equipment-container .equipment-name {
    text-align: center;
    flex: 0 0 5rem;
}

html.dashboard.status .panel.equipment .equipment-label {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex: 1 1 0%;
}

html.dashboard.status .panel.equipment .equipment-label.north {
    padding-left: 1.5rem;
}

@media (orientation: portrait) {
    html.dashboard.status .panel.equipment .equipment-label.north {
        padding-left: 8.5rem;
    }
}

html.dashboard.status .panel.equipment .equipment-label.spacer {
    flex: 0 0 4rem;
}

html.dashboard.status .panel.equipment .equipment-label.south {
    padding-right: 1.5rem;
}

@media (orientation: portrait) {
    html.dashboard.status .panel.equipment .equipment-label.south {
        padding-right: 8.5rem;
    }
}

html.dashboard.status .panel.equipment .indicator-container {
    display: flex;
    flex: 1 1 0%;
}

html.dashboard.status .panel.equipment .indicator-container.north {
    flex-direction: row-reverse;
}

html.dashboard.status .panel.equipment .indicator-container.south {
    flex-direction: row;
}

html.dashboard.status .panel.equipment .indicator-container .indicator {
    cursor: help;
    display: inline-block;
    background-color: rgb(67, 67, 67);
    box-shadow: black 0.05rem 0.05rem 0.1rem;
    color: rgb(255, 255, 255);
    font-size: 0.5rem;
    text-align: center;
    text-shadow: black 0.05rem 0.05rem 0.05rem;
    font-weight: bold;
    height: 0.95rem;
    width: 0.95rem;
    border-radius: 50%;
    transition: color 2s linear 0s, background-color 1s linear 0s;
    margin: 0px 0.09rem;
    -webkit-text-stroke-width: 0.02rem;
    -webkit-text-stroke-color: black;
}

html.dashboard.status .panel.equipment .indicator-container .indicator .label {
    position: relative;
    top: -0.02rem;
}

html.dashboard.status .panel.equipment .indicator-sample-container .indicator-sample.full,
html.dashboard.status .panel.equipment .indicator-container .indicator.full {
    background-color: #5ac954;
    color: rgba(255, 255, 255, 0);
    text-shadow: none;
    -webkit-text-stroke-color: unset;
}

html.dashboard.status .panel.equipment .indicator-sample-container .indicator-sample.reduced,
html.dashboard.status .panel.equipment .indicator-container .indicator.reduced {
    background-color: #dd9e1f;
}

html.dashboard.status .panel.equipment .indicator-sample-container .indicator-sample.off,
html.dashboard.status .panel.equipment .indicator-container .indicator.off {
    background-color: #d64b33;
}

html.dashboard.status .panel .annualized-rate-container {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 1rem;
}

html.dashboard.status .panel .annualized-rate-container .annualized-rate-figure {
    z-index: 10;
    flex: 0 0 8rem;
}

html.dashboard.status .panel .annualized-rate-container .annualized-rate-figure .title {
    font-size: 0.75rem;
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    height: 1.75rem;
    line-height: 0.95rem;
}

html.dashboard.status .panel .annualized-rate-container .annualized-rate-figure .rate {
    position: relative;
    text-align: center;
    line-height: 2;
    margin: 0;
    color: #59A8D3;
    font-size: 1.25rem;
}

html.dashboard.status .panel .annualized-rate-container .annualized-rate-figure .unit {
    text-align: center;
    font-size: 0.5rem;
}

html.dashboard.status .panel .annualized-rate-container .center {
    flex: 0 0 2.5rem;
}

html.dashboard.status .panel .ci-score-container {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 1rem;
}

    html.dashboard.status .panel .ci-score-container .ci-score-figure {
        z-index: 10;
        flex: 0 0 8rem;
    }

        html.dashboard.status .panel .ci-score-container .ci-score-figure .title {
            font-size: 0.75rem;
            display: flex;
            align-items: flex-end;
            -webkit-box-pack: center;
            justify-content: center;
            text-align: center;
            height: 1.75rem;
            line-height: 0.95rem;
        }

        html.dashboard.status .panel .ci-score-container .ci-score-figure .rate {
            position: relative;
            text-align: center;
            line-height: 2;
            margin: 0;
            color: #59A8D3;
            font-size: 1.25rem;
        }

    html.dashboard.status .panel .ci-score-container .center {
        flex: 0 0 2.5rem;
        text-align: center;
    }

    html.dashboard.status .panel .ci-score-container .tool-tip-text {
        opacity: 0;
        transition: opacity 0.5s;
        width: 120px;
        color: #59A8D3;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        font-size: 0.5rem;
        margin: 0;
    }

    html.dashboard.status .panel .ci-score-container:hover .tool-tip-text {
        opacity: 1;
    }
html.dashboard.status .panel .tool-tip-text:hover .tool-tip-text {
    opacity: 1;
}


img#CI-Score-Pop-Up {
    height: auto;
    left: 0px;
    position: absolute;
    top: 350px;
    width: 100%;
    z-index: 10;
}

#hide {
    display: none;
}

#hide:hover {
    display: block;
}

#hover-zone:hover + #hide {
    display: block;
}



html.dashboard.status .panel .rolling-30-day-figure {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 0.1rem;
}

html.dashboard.status .panel .rolling-30-day-figure .title {
    font-size: 0.75rem;
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    height: 1.75rem;
    line-height: 0.95rem;
}

html.dashboard.status .panel .rolling-30-day-figure .value-container {
    display: flex;
    flex-direction: row;
}

html.dashboard.status .panel .rolling-30-day-figure .value-container .value {
    position: relative;
    text-align: center;
    font-size: 1.25rem;
    color: #59A8D3;
    text-shadow: black 0.05rem 0.05rem 0.05rem;
    margin: 0px;
    line-height: 2.25rem;
}

html.dashboard.status .panel .rolling-30-day-figure .value-container .unit {
    font-size: 0.5rem;
    display: flex;
    align-items: flex-end;
    margin: 0rem 0rem 0.6rem 0.25rem;
}

html.dashboard.status .panel .prod-breakdown-container {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

html.dashboard.status .panel .prod-breakdown-container .prod-breakdown {
    font-size: 0.45rem;
    display: flex;
    flex-direction: row;
    margin-bottom: 0.15rem;
    line-height: 0.6rem;
}

html.dashboard.status .panel .prod-breakdown-container .prod-breakdown .value {
    position: relative;
    color: #59A8D3;
    text-shadow: black 0.05rem 0.05rem 0.05rem;
    margin: 0px 0.25rem;
}

html.dashboard.status .panel .prod-breakdown-container .prod-breakdown.denatured .title {
    margin-left: 0.2rem;
}

html.dashboard.status .panel .indicator-legend-container {
    display: flex;
    flex-direction: row;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: 0.25rem;
}

html.dashboard.status .panel .indicator-sample-container {
    font-size: 0.5rem;
    display: flex;
    flex-direction: row;
    margin: 0px 1rem;
}

html.dashboard.status .panel .indicator-sample-container .indicator-sample {
    display: inline-block;
    background-color: rgb(67, 67, 67);
    box-shadow: black 0.05rem 0.05rem 0.1rem;
    color: rgb(255, 255, 255);
    font-size: 0.4rem;
    text-align: center;
    text-shadow: black 0.05rem 0.05rem 0.05rem;
    font-weight: bold;
    height: 0.9rem;
    width: 0.9rem;
    border-radius: 50%;
    transition: color 2s linear 0s, background-color 1s linear 0s;
    margin: 0px 0.09rem;
}

html.dashboard.status .panel .indicator-sample-container .indicator-sample-label {
    margin-top: 0.18rem;
    margin-left: 0.5rem;
}

html.dashboard.status .panel .figure-container {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
}

html.dashboard.status .figure {
    z-index: 10;
    flex: 0 0 8rem;
}

html.dashboard.status.illinois .figure {
    z-index: 10;
    flex: 0 0 6rem;
}

html.dashboard.status .figure .title {
    font-size: 0.65rem;
    display: flex;
    align-items: flex-end;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    height: 1.75rem;
    line-height: 1.7rem;
}

html.dashboard.status .figure .rate {
    position: relative;
    font-size: 1.25rem;
    text-align: center;
    text-shadow: black 0.05rem 0.05rem 0.05rem;
    color: #59A8D3;
}

html.dashboard.status .figure .unit {
    font-size: 0.4rem;
    text-align: center;
    line-height: 1.3rem;
}

html.dashboard.status .panel.north-front-end .figure,
html.dashboard.status .panel.south-front-end .figure {
    flex: 0 0 6rem;
}

html.dashboard.status .tag-reading-display {
    cursor: help;
}

html.dashboard.status .channel-update-numeric-display .value-slot,
html.dashboard.status .tag-reading-display .value-slot {
    font-family: "Helvetica Neue", sans-serif;
    line-height: 1.1em;
}

html.dashboard.status .channel-update-numeric-display .no-value-slot,
html.dashboard.status .tag-reading-display .no-value-slot {
    font-family: "Helvetica Neue", sans-serif;
    line-height: 1.1em;
}