:root {
    --ci-hellblau: #99cccc;
    --ci-hellblau-light: #a9dddd;
    --ci-dunkelblau: #0069af;
    --ci-dunkelgrau: #4d4d4d;
    --ci-orange: #ff9900;
    --ci-hellgrau: #cecece;
    --ci-black: #000000;

    --fore-color: black;
    --secondary-fore-color: var(--ci-dunkelgrau);
    --back-color: white;
    --secondary-back-color: var(--ci-hellgrau);
    --blockquote-color: #f57c00;
    --pre-color: #1565c0;
    --border-color: #aaa;
    --secondary-border-color: #ddd;
    --heading-ratio: 1.19;
    --universal-margin: 0.25em;
    --universal-padding: 0.25em;
    --universal-border-radius: 0.125rem;
    --a-link-color: var(--ci-dunkelblau);
    --a-visited-color: #01579b;
    --table-head-back-color: var(--ci-dunkelblau);
    --table-head-fore-color: white;
}

.centered-header {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
}

.centering {
    margin-left: auto;
    margin-right: auto;
    max-width: 30em;
}

.loginform {
    display: grid;
    grid-template: auto auto / min-content min-content;
    column-gap: 1em;
}

div#header.container {
    display: flex;
}

table:not(.horizontal) {
    max-height: None;
}

.tableheader {
    margin-top: 6px;
    margin-bottom: 2px;
    flex-flow: row wrap;
    display: flex;
}

.tablerow {
    flex-flow: row wrap;
    display: flex;
    background-color: var(--secondary-back-color);
    padding: 1px;
}


.tableheader div {
    background-color: var(--ci-dunkelblau);
    color: white;
    padding: 3px;
    text-align: center
}

.subdetails[open] summary::after {
    content: attr(data-open);
}

.subdetails summary::after {
    content: attr(data-closed);
}

.spinner2digits {
    width: 3rem;
}

.systemstatusindicator {
    height: 6mm;
    width: 6mm;
    border-radius: 3mm;
}

/*noinspection CssReplaceWithShorthandSafely*/
.subdetails[open] {
    margin-left: 2Em;
    margin-right: 2Em;
    margin-top: 1em;
    margin-bottom: 1.6em;
}

.subdetails summary::before {
    content: "\2795";
    margin-right: 1rem;
}

.subdetails[open] summary::before {
    content: "\2796";
    margin-right: 1rem;
}

.subdetails summary {
    list-style: none;
    min-width: 16em;
    max-width: 30em;
    background-color: var(--ci-hellgrau)
}

.tablerow div {
    display: flex;
    flex-flow: row wrap;
    padding: 3px;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    background-color: white;
    justify-content: center;
    align-items: center;
}

.menuelement {
    padding: 0.25rem 1rem;
    border-radius: 5px;
    margin: 0.5rem 0;
    text-align: center;
    background-color: var(--ci-orange);
}


details > summary {
    padding: 6px;
    background-color: var(--ci-hellblau);
    border: none;
    box-shadow: 1px 1px 2px var(--ci-dunkelgrau);
    cursor: pointer;
    border-collapse: collapse;
    color: var(--color-text);
}

details {
    margin-bottom: 1em;
}

#deleteButton {
    color: red;
    margin: 0;
}

.indented {
    margin-left: 2em;
}

.delayed {
    background-color: bisque !important;
}

details {
    padding: 1px;
    margin: 3px;
    box-shadow: 1px 1px 2px #bbbbbb;
    border: 1px solid;
    border-color: var(--secondary-fore-color);
    background-color: var(--back-color);
    margin-bottom: 0.5em;
    padding-bottom: 1em;
}

.centercolumn {
    display: grid;
    grid-template-columns: 1fr minmax(0em, 80em) 1fr;
}


/* Unvollständig, daher auskommentiert
details > summary > details > summary {
   background-color:
}
*/

nav div a {
    padding: 0.2rem 1rem;
    border-radius: 5px;
    white-space: nowrap;
    text-align: center;
    background-color: var(--back-color);
    margin: 2px;
    border: 1px solid var(--fore-color);
}

/* Nav Dropdown */
.nav-item:hover ul {
    /* margin-top: 3.5rem;*/
    display: block;
}

nav div ul {
    background: var(--back-color);
    border: 1px solid var(--secondary-fore-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
    display: none;
    height: auto;
    padding: .5rem 1rem;
    position: absolute;
    right: 0;
    top: 1.7rem;
    width: auto;
    z-index: 1000; /* hacky, but works for thwe time being*/
}

nav div ul li,
nav div ul li a {
    display: block;
}

.battery-indicator {
    float: left;
    background: black;
    border-radius: 50%;
    height: 6mm;
    width: 6mm;
    margin: 0 2mm 0 0;
    background: radial-gradient(circle at 3mm 3mm, #FFFF00, #333);
}

@keyframes fadeIn {
    0% {
        background-color: var(--ci-orange);
    !important;
    }
    100% {
        background-color: var(--back-color);
    !important;
    }
}

.flashOnce {
    animation: fadeIn 1s linear !important;
}

.small_column {
    flex-shrink: 10 !important;
    flex-wrap: nowrap !important;
}

.big_column {
    flex-grow: 10 !important;
}