/******************/
/*** html reset ***/
/******************/
html.dashboard
html.dashboard body,
html.dashboard div,
html.dashboard span,
html.dashboard applet,
html.dashboard object,
html.dashboard iframe,
html.dashboard h1,
html.dashboard h2,
html.dashboard h3,
html.dashboard h4,
html.dashboard h5,
html.dashboard h6,
html.dashboard p,
html.dashboard blockquote,
html.dashboard pre,
html.dashboard a,
html.dashboard abbr,
html.dashboard acronym,
html.dashboard address,
html.dashboard big,
html.dashboard cite,
html.dashboard code,
html.dashboard del,
html.dashboard dfn,
html.dashboard em,
html.dashboard img,
html.dashboard ins,
html.dashboard kbd,
html.dashboard q,
html.dashboard s,
html.dashboard samp,
html.dashboard small,
html.dashboard strike,
html.dashboard strong,
html.dashboard sub,
html.dashboard sup,
html.dashboard tt,
html.dashboard var,
html.dashboard b,
html.dashboard u,
html.dashboard i,
html.dashboard center,
html.dashboard dl,
html.dashboard dt,
html.dashboard dd,
html.dashboard ol,
html.dashboard ul,
html.dashboard li,
html.dashboard fieldset,
html.dashboard form,
html.dashboard label,
html.dashboard legend,
html.dashboard table,
html.dashboard caption,
html.dashboard tbody,
html.dashboard tfoot,
html.dashboard thead,
html.dashboard tr,
html.dashboard th,
html.dashboard td,
html.dashboard article,
html.dashboard aside,
html.dashboard canvas,
html.dashboard details,
html.dashboard embed,
html.dashboard figure,
html.dashboard figcaption,
html.dashboard footer,
html.dashboard header,
html.dashboard hgroup,
html.dashboard menu,
html.dashboard nav,
html.dashboard output,
html.dashboard ruby,
html.dashboard section,
html.dashboard summary,
html.dashboard time,
html.dashboard mark,
html.dashboard audio,
html.dashboard video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
html.dashboard article,
html.dashboard aside,
html.dashboard details,
html.dashboard figcaption,
html.dashboard figure,
html.dashboard footer,
html.dashboard header,
html.dashboard hgroup,
html.dashboard menu,
html.dashboard nav,
html.dashboard section {
    display: block;
}

html.dashboard {
    height: unset;
}

html.dashboard body {
    height: unset;
    color: #a2a3b7;
}

html.dashboard {
    background-color: black;
    color: white;
    line-height: 1;
}

html.dashboard ol,
html.dashboard ul {
    list-style: none;
}

html.dashboard blockquote,
html.dashboard q {
    quotes: none;
}

html.dashboard blockquote:before,
html.dashboard blockquote:after,
html.dashboard q:before,
html.dashboard q:after {
    content: '';
    content: none;
}

html.dashboard table {
    border-collapse: collapse;
    border-spacing: 0;
}

html.dashboard,
html.dashboard body {
    font-family: Poppins, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

html.dashboard {
    overflow: hidden;
}

@media (orientation: portrait) {
    html.dashboard {
        overflow-y: auto;
    }
}

html.dashboard * {
    box-sizing: border-box;
}

/****************/
/*** overlays ***/
/****************/
html.dashboard .overlay {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transition: visibility 2s step-start, opacity 2s linear;
}

html.dashboard .overlay.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 2s step-end, opacity 2s linear;
}

html.dashboard .overlay.coming-soon {
    z-index: 97;
    background-color: rgba(0,0,0,.4);
}

html.dashboard .overlay.coming-soon .message {
    width: 100vw;
    color: #666;
    text-shadow: .15rem .15rem .15rem #333;
}

html.dashboard #overlay-logo {
    z-index: 100;
    background-color: #000;
}

html.dashboard #overlay-logo .logo {
    width: 100vw;
}

html.dashboard #overlay-logo .logo img {
    height: 15vmin;
}

html.dashboard #overlay-logo .message {
    display: none;
    margin-top: 2rem;
}

html.dashboard #overlay-comm-status {
    z-index: 99;
}

html.dashboard #overlay-comm-status .message {
    margin-top: 10rem;
    min-height: 3rem;
    flex: 1;
    background-color: rgba(0,0,0,.7);
    padding: 1rem 0;
}

/**********************/
/*** main container ***/
/**********************/
html.dashboard main {
    background-color: rgb(30, 30, 45);
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/img/backgrounds/sg-blueish-huge-m-48opacity.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
}

@media (orientation: portrait) {
    html.dashboard main {
        max-width: 100%;
    }
}

@media (orientation: landscape) {
    html.dashboard main {
        width: 100vw;
        height: 56.25vw;
        max-height: 100vh;
        max-width: 177.78vh;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/***************/
/*** layouts ***/
/***************/
html.dashboard .layout-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100vh;
    border-width: 0.067rem;
    border-style: solid;
    border-color: #003856;
}

html.dashboard .layout-grid {
    display: grid;
    height: 100%;
    border-width: 0.067rem;
    border-style: solid;
    border-color: #003856;
}

html.dashboard .flex-row {
    flex: 1;
    display: flex;
    flex-direction: row;
}

html.dashboard .flex-row.reverse {
    flex-flow: row-reverse;
}

html.dashboard .flex-row.vertical-center {
    justify-content: center;
    align-items: center;
}

html.dashboard .flex-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

html.dashboard .flex-item {
    flex: 1;
    flex-direction: column;
}

html.dashboard main.trouble {
    transition-duration: 30s;
}

html.dashboard .trouble {
    filter: grayscale(70%) blur(0.067rem);
    transition: filter 30s linear;
}

html.dashboard .panel {
    background-color: rgba(30, 30, 45, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    transition-duration: 5s;
    transition-property: filter;
    box-shadow: none;
    flex: 1 1 0%;
    border-width: 0.067rem;
    border-style: solid;
    border-color: #003856;
    border-image: initial;
    border-radius: 0px;
}

html.dashboard .panel img {
    align-self: center;
}

html.dashboard .panel .panel-title {
    font-size: 1rem;
    margin-top: 0.75rem;
    margin-bottom: auto;
    width: 100%;
    text-align: center;
    line-height: 1.2rem;
}

html.dashboard .panel .panel-body {
    margin-bottom: auto;
}

/*****************/
/*** helpers *****/
/*****************/
.d-none {
    display: none !important;
}
.d-flex {
    display: flex !important;
}
.d-block {
    display: block !important;
}

/******************/
/*** components ***/
/******************/

/*** tag reading display ***/
html.dashboard .channel-update-numeric-display .value-slot.hidden,
html.dashboard .channel-update-numeric-display .no-value-slot.hidden,
html.dashboard .tank-with-level-indicator .value-slot.hidden,
html.dashboard .tank-with-level-indicator .no-value-slot.hidden,
html.dashboard .tag-reading-display .value-slot.hidden,
html.dashboard .tag-reading-display .no-value-slot.hidden {
    display: none !important;
}

/*** tank with level indicator ***/
html.dashboard .tank-container {
    display: flex;
    width: 100%;
    margin-bottom: auto;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}

html.dashboard .tank-with-level-indicator {
    display: inline-block;
}

html.dashboard .tank-with-level-indicator .tank {
    height: 10rem;
    width: 7rem;
    background-color: rgba(15,15,22,.5);
    position: relative;
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

html.dashboard .tank-with-level-indicator .label {
    margin-bottom: .25rem;
    font-size: .6rem;
    margin-right: 0.25rem;
    margin-left: 0.25rem;
    width: calc(100% - 0.5rem);
    line-height: .8rem;
}

html.dashboard .tank-with-level-indicator .percent {
    margin-bottom: .25rem;
    font-size: .8rem;
}

html.dashboard .tank-with-level-indicator .footer {
    margin-top: .25rem;
    font-size: .6rem;
    color: #4193db;
}

html.dashboard .tank-with-level-indicator .tank .value-slot,
html.dashboard .tank-with-level-indicator .tank .no-value-slot {
    background-color: #234e72;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    height: 0%;
    min-height: 1rem;
    font-size: .6rem;
    padding-top: .15rem;
    color: #222;
    transition: height 2s linear;
}

html.dashboard .tank-with-level-indicator.grain .tank .value-slot {
    background-color: #ddbd1f;
}
html.dashboard .tank-with-level-indicator.grain .percent {
    color: #ddbd1f;
}

html.dashboard .tank-with-level-indicator.ethanol .tank .value-slot {
    background-color: #4193db;
}
html.dashboard .tank-with-level-indicator.ethanol .percent {
    color: #4193db;
}

html.dashboard .tank-with-level-indicator.tank-200p .tank .value-slot {
    background-color: #4193db;
}
html.dashboard .tank-with-level-indicator.tank-200p .percent {
    color: #4193db;
}

html.dashboard .tank-with-level-indicator.tank-190p .tank .value-slot {
    background-color: #748eab;
}
html.dashboard .tank-with-level-indicator.tank-190p .percent {
    color: #748eab;
}

html.dashboard .tank-with-level-indicator.usp .tank .value-slot {
    background-color: #34b0b0;
}
html.dashboard .tank-with-level-indicator.usp .percent {
    color: #34b0b0;
}

html.dashboard .tank-with-level-indicator.usp-denaturant .tank .value-slot {
    background-color: #3bab35;
}
html.dashboard .tank-with-level-indicator.usp-denaturant .percent {
    color: #3bab35;
}

html.dashboard .tank-with-level-indicator.corn-oil .tank .value-slot {
    background-color: #efd588;
}
html.dashboard .tank-with-level-indicator.corn-oil .percent {
    color: #efd588;
}

html.dashboard .tank-with-level-indicator .percent .value-slot .odometer-inside::after {
    content: "%";
}


/*** channel update latest messages list ***/
html.dashboard .channel-update-latest-messages-list {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

html.dashboard .channel-update-latest-messages-list .message {
    flex: 1;
    display: flex;
    padding: .4rem .2rem;
}

html.dashboard .channel-update-latest-messages-list .message:nth-child(even) {
    background-color: rgba(255,255,255,0.08);
}

html.dashboard .channel-update-latest-messages-list .message .key {
    flex: 1;
}

html.dashboard .channel-update-latest-messages-list .message .value {
    flex: 1;
    color: #5AB6D0
}

/******************/
/** Panel Slides **/
/******************/

html.dashboard .panel-component
{
    perspective: 1000px;
    display: flex;
}

html.dashboard .panel-component .panel-component-inner
{
    background-color: rgba(30, 30, 45, 0.85);
    
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2.5s;
    transform-style: preserve-3d;
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-shadow: none;
    flex: 1 1 0%;
    border-width: 0.067rem;
    border-style: solid;
    border-color: #003856;
    border-image: initial;
    border-radius: 0px;
}

html.dashboard .panel-slide-component {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1 1 0%;
}

html.dashboard .panel-component .panel-component-inner > div:not(.panel-slide-front):not(.panel-slide-back):not(.panel-body-component) {
    display:none;
}

html.dashboard .panel-component.flipped .panel-component-inner {
    transform: rotateY(180deg);
}

html.dashboard .panel-body-component {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

html.dashboard .panel-slide-front, html.dashboard .panel-slide-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
}

html.dashboard .panel-slide-front {
    position: absolute;
    height: 100%;
    width: 100%;
}

html.dashboard .panel-slide-back {
    transform: rotateY(180deg);
}

html.dashboard .panel-component .panel-body-component .panel-body-title {
    margin-top: 0.75rem;
    margin-bottom: auto;
}

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

/*****************/
/*** Utilities ***/
/*****************/
html.dashboard .mb-0 {
    margin-bottom: 0px !important;
}
html.dashboard .mb-1 {
    margin-bottom: 0.25rem !important;
}
html.dashboard .mb-2 {
    margin-bottom: 0.5rem !important;
}
html.dashboard .mb-3 {
    margin-bottom: 0.75rem !important;
}
html.dashboard .mb-4 {
    margin-bottom: 1rem !important;
}
html.dashboard .mb-5 {
    margin-bottom: 1.25rem !important;
}