:root {
    --accent-color: lightskyblue;
    --menu-back-color: #343a40;
    --content-back-color: darkslategray;
    --alternate-list-back-color: #3b5353;
    --liva-blue: #012852;
    --liva-gray: #6b6a6a;
}

html, body {
    color: silver;
    background-color: var(--content-back-color);
    font-size: var(--main-font-size);
    height: 100%;
    overflow: auto;
    cursor: default;
    user-select: none;
}

h1, h2, h3, h4 {
    color: var(--accent-color);
}

p {
    display: flex;
}

#app {
    height: 100%;
}

.navbar-brand {
    text-indent: -100em;
    background-image: url(/images/LIVA-ws.png);
    background-repeat: no-repeat;
    display: block;
    background-size: contain;
    width: 14em;
    height: 60px;
    margin-bottom: 1em;
}
.navbar-brand:hover {
    color: transparent;
}
.navbar-brand:active {
    color: transparent;
}

.navbar-toggler {
    display: none;
}

.navbar {
    display: block;
    float: left;
    flex-flow: column;
    height: 100vh;
    width: 15em;
    padding-top: 1em;
}

.navbar-nav {
    flex-direction: column !important;
}

.nav-link {
    font-size: 140%;
    filter: opacity(0.5);
}
.nav-link:hover {
    filter: opacity(1);
}
.router-link-active {
    filter: opacity(1) !important;
}

.bg-info {
    background-color: var(--menu-back-color) !important;
}

.content {
    margin: 2em;
}

.app-dialog {
    position: absolute;
    z-index: 1000;
    top: 2em;
    left: 5em;
    width: 80%;
    color: darkslategray;
    background-color: silver;
    border: 1px solid var(--accent-color);
    max-height: 90vh;
    overflow: auto;
}
.app-dlg-caption {
    color: silver;
    background-color: darkslategray;
    font-size: 130%;
    padding-left: 1.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.column-header {
    position: relative;
    padding-left: .5em;
    text-align: left;
    white-space: nowrap;
}
.column-header span {
    position: absolute;
}
.fa-sort-up {
    color: red;
}
.fa-sort-down {
    color: red;
}
.column-header input {
    z-index: 1000;
    margin-left: -2px;
    width: calc(100% - 2em);
    border: none;
    font-weight: bold;
    color: red;
}
.column-sort {
    position: absolute;
    right: .2em;
    padding-top: .2em;
    cursor: pointer;
    font-size: 150%;
}

.prop-table tr th {
    white-space: nowrap !important;
    font-weight: normal;
}


.app-login {
    color: white;
    width: 100%;
    height: 100vh;
    background-image: radial-gradient(circle at 50vw 100vh, var(--liva-lite), var(--liva-blue));
}
.app-content {
    color: white;
    width: 100%;
    height: 100vh;
    background-color: var(--content-back-color);
}

.title-bar {
    height: 5.5em;
    background-color: var(--menu-back-color);
    padding-left: 1.5em;
    padding-top: 1.5em;
}

.list-line-0 {
    background-color: transparent;
}
.list-line-1 {
    background-color: var(--alternate-list-back-color);
}

.op-state-unknown {
}
.op-state-startup {
}
.op-state-shutdown {
}
.op-state-manual {
}
.op-state-operational {
    color: white;
}
.op-state-warning {
    color: yellow;
}
.op-state-failure {
    background-color: orangered;
    color: yellow;
}
.op-state-maintenance {
}
.op-state-in-planning {
    color: dodgerblue;
}
.op-state-dismantled {
    color: black;
}
.op-state-locked {
}
.op-state-out-of-order {
}
.op-state-off {
}
.op-state-standby {
}
.op-state-not-connected {
    color: yellow;
}

.c3 path, .c3 line {
    stroke: silver;
}
text, .tick text {
    fill: silver;
}
.c3-ygrid-line {
    opacity: .5;
}
.c3-bat-full-line line {
    stroke: cornflowerblue;
}

.c3-tooltip {
    color: var(--liva-blue);
}



.sTR {
    margin: .5em;
    padding: 1em;
    background-color: var(--menu-back-color);
}

.sBR {
    margin: .5em;
    padding: 1em;
    text-align: center;
    overflow: auto;
    background-color: var(--menu-back-color);
    min-width: fit-content;
    overflow-y: visible;
}

.row-Header{
    width: 100%;
    margin-bottom: 2%;
    grid-row: 1;
    text-align: center;
}

.row-Header-centered{
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
}

.header{
    display: grid;
    grid-template-columns: 50% 50%;
}

#headline{
    grid-column: 1;
    text-align: left;
}

#time{
    grid-column: 2;
    text-align: right;
}
.table-left-border {
    border-left: 1px solid white;
}

.table-bottom-border {
    border-bottom: 1px solid white;
}

.table-general{
    margin-top: 1.5em;
    border: 1px dashed white;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

.state-ok{
    color: white;
}

.state-error{
    color: red;
}

.state-warning{
    color: orange;
}

.documentation{
    width: 100%;
    height: 65vh;
}

.log-bg{
    background-color: var(--menu-back-color);
    margin-bottom: 1em;
    padding: 1em;
}

.log-text{
    overflow: auto;
    height: 60vh;
    width: 100%;
}

.log-download-area{
    height: auto;
    width: 100%;
    border-top: 1px solid white;
    margin-top: 2em;
}

.log-bg-trace{
    background-color: var(--menu-back-color);
}

.log-bg-debug{
    background-color: var(--menu-back-color);
}

.log-bg-information{
    background-color: var(--content-back-color);
}

.log-bg-warning{
    background-color: orange;
    color: black;
}

.log-bg-error{
    background-color: red;
    color: black;
}

.log-bg-critical{
    background-color: darkred;
}