:root {
    --max-content-width: 960px;
    --content-padding: .1em;

    --text-color: #000;
    --text-color--lighter-1: #333;
    --text-color--lighter-2: #444;

    --bg-color: #fff;
    --bg-color--lighter-1: #bbb;
    --bg-color--lighter-2: #ccc;

    --level-ok-bg-color: PaleGreen;
    --level-ok-text-color: rgb(31, 45, 61);
    --level-failed-bg-color: FireBrick;
    --level-failed-text-color: rgb(255, 255, 255);
    --level-warning-bg-color: LemonChiffon;
    --level-warning-text-color: rgb(31, 45, 61);
    --level-neutral-bg-color: transparent;
    --level-neutral-text-color: var(--text-color);

    --table-odd-row-bg-color: #f7f7f7;
    --table-even-row-bg-color: #eaeaea;

    --progress-bar-bg-color: black;
    --progress-bar-indicator-color: white;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* @todo: create a dark mode color pallet */
    }
}

* {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
}

body {
    padding: 0;
    margin: 0;

    /* https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

header {
    background: yellow;
    box-shadow: 0 0 .3em var(--text-color);
    margin: 0 0 .6em;
    padding: .1em 0 0;
    background: var(--bg-color--lighter-1);
}

header > * {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* Page logo */
.page_logo {
    line-height: .8em;
    padding-left: var(--content-padding);
}

.page_logo__link {
    text-decoration: none;
    color: var(--text-color);
    font-style: italic;
}

.page_logo__current {
    font-size: .4em;
    padding-left: .1em;
    font-weight: normal;
}

/* Menu */
.menu {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    list-style: none;
    justify-content: space-evenly;

    background: var(--text-color);
}

.menu__item {
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

.menu__item__link {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;

    background: transparent;
    color: var(--bg-color);
    text-decoration: none;
    line-height: 2em;
}

.menu__item__link--selected {
    background: var(--text-color--lighter-1);
    color: var(--bg-color--lighter-1);
}

.menu__item__link:hover,
.menu__item__link:active,
.menu__item__link--selected:active,
.menu__item__link--selected:hover {
    background: var(--text-color--lighter-2);
    color: var(--bg-color--lighter-2);
}

.content {
    width: 100%;
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
}

/* Level labels */
.level-label {
    font-family: monospace;
}

.level-label.level-label--OK {
    background-color: var(--level-ok-bg-color);
    color: var(--level-ok-text-color);
}

.level-label.level-label--FAILED {
    background-color: var(--level-failed-bg-color);
    color: var(--level-failed-text-color);
}

.level-label.level-label--WARNING {
    background-color: var(--level-warning-bg-color);
    color: var(--level-warning-text-color);
}

.level-label.level-label--NEUTRAL {
    background-color: var(--level-neutral-bg-color);
    color: var(--level-neutral-text-color);
    font-weight: bold;
    font-style: italic;
    font-family: serif;
}

/* Status table */
.monitor-block {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
    margin-bottom: 1em;
}

.status {
    border-spacing: 1px;
    width: 100%;
}

.status thead {
    background: var(--table-odd-row-bg-color);
}

.status td {
    padding: .2em .5em;
}

.status__row--odd {
    background-color: var(--table-odd-row-bg-color);
}

.status__row--even {
    background-color: var(--table-even-row-bg-color);
}

.status__level_col {
    text-align: center;
    width: 5em;
}

.status__level_col.status__level_col--OK {
    background-color: var(--level-ok-bg-color);
}

.status__level_col.status__level_col--FAILED {
    background-color: var(--level-failed-bg-color);
}

.status__level_col.status__level_col--WARNING {
    background-color: var(--level-warning-bg-color);
}

.status__level_col.status__level_col--NEUTRAL {
    background-color: var(--level-neutral-bg-color);
}

.status__value_col {
    font-family: monospace;
}

/* progress bar*/
.progress-bar {
    display: block;
    background-color: var(--progress-bar-bg-color);
    border: 1px solid var(--progress-bar-bg-color);
    width: auto;
    height: .2em;
}

.progress-bar--indicator {
    background-color: var(--progress-bar-indicator-color);
    height: 100%;
    width: var(--percentage);
}

/* Footer */
footer {
    margin-top: 1em;
    text-align: center;
    background: var(--text-color);
    color: var(--bg-color--lighter-1);
}

footer > * {
    max-width: var(--max-content-width);
    margin-left: auto;
    margin-right: auto;
}

.small {
    font-size: 0.75em;
}

.small__separator {
    font-weight: bolder;
    padding-left: 1em;
    padding-right: 1em;
}

.text-align-left {
    text-align: left;
}
.text-align-center {
    text-align: center;
}
.text-align-right {
    text-align: right;
}

.monitoring-blocks-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: stretch;
}

.monitoring-block {
    width: 100%;
    background: #fcfcfc;
    padding: 0.5em;
    border-radius: .25em;
}

.monitoring-block__header {
    font-size: 0.87em;
}
.monitoring-block__header--range {
    font-weight: normal;
    font-family: monospace;
    font-size: 0.8em;
}

@media screen and (min-width: 768px) {
    .monitoring-block {
        width: 49%;
        margin-bottom: 1em;
    }
}

/* Service list */
.services_list {
    --service-list-spacing: 1em;

    list-style: none;
    padding: .2em;
    max-width: 100%;
}
.services_list__item {
    vertical-align: middle;
    margin-bottom: calc(4 * var(--service-list-spacing));
}
.services_list__item__anchor {
    text-decoration: none;
    color: var(--text-color--lighter-1);
}
.services_list__item__anchor:hover {
    color: var(--text-color);
}
.services_list__item__anchor > svg {
    max-width: 100px;
    max-height: 100px;
    height: auto;
    vertical-align: middle;
}
.services_list__item__anchor__text {
    padding-left: var(--service-list-spacing);
}