html, body {
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
}

header {
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid black;
    padding: 16px 0px;
}

header > .wrapper {
    display: block;
    position: relative;
    margin: auto;
}

main, .flex {
    display: flex;
    flex-wrap: wrap;
}

main {
    flex-wrap: nowrap;
}

main > *, .flex > * {
    flex-basis: 100%;
    flex-grow: 1;
    margin: 0px 8px;
    flex-shrink: 1;
}

main > aside, .flex > .aside{
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 25%;
}

.group {
    display: block;
    border: 1px solid #ccc;
    padding: 8px;
}
.group > fieldset {
    border: none;
}

h2 {
    border-bottom: 1px solid black;
}

button, span {
    display: inline-block;
    font-size: 1rem;
    font-style: normal;
    text-decoration: none;
}
button.selected {
    color: #10E010;
}
button.true {
    color: #10E010;
}
button.false {
    color: #B0B0B0;
}

fieldset {
    position: relative;
    display: flex;
}

fieldset > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10%;
}

fieldset > label, fieldset > .label {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 5%;
    text-align: right;
    padding-right: 12px;
    padding-left: 12px;
}

/*
fieldset > :first-child {
    flex-grow: 1;
    flex-basis: 25%;
}
fieldset > :nth-child(2) {
    flex-grow: 1;
    flex-basis: 40%;
}
fieldset > :last-child {
    flex-grow: 1;
    flex-basis: 25%;
}
fieldset.equal > * {
    flex-basis: 25%;
    margin: 4px;
    flex-shrink: 1;
}
*/

.flex {
    display: flex;
}
.panel {
    padding: 6px;
}

.left > .panel {
    padding-right: 24px;
    border-right: 1px solid #B0B0B0;
}
.right > .panel {
    padding-left: 24px;
    border-left: 1px solid #B0B0B0;
}

.panel > article {
    border-bottom: 1px solid #cccccc;
    padding: 8px 0px;
}


.value {
    text-align: right;
    font-weight: bold;
}

.state {
    width: 160px;
    padding: 8px 16px;
    margin: 2px 8px;
    border-radius: 8px;;
    background-color: #808080;
    text-align: center;
}
.state.large {
    width: 240px;
}

.state.READY {
    color: #108010;
}
.state.OPERATIONAL {
    color: #10E010;
}
.state.ERROR, .state.FAULT {
    color: white;
    background-color: #C04040;
}
.state.BOOT, .state.INIT {
    color: #000080;
}


.state.active {
    background-color: #10E010;
}

.state.active.silver {
    background-color: #B0B0B0;
}

.state.active.green {
    background-color: #10E010;
}

.state.active.orange {
    background-color: #e0a810;
}
.state.SAFE_OP {
    background-color: #e0a810;
}
.state.PRE_OP {
    background-color: #B0B0B0;
}