*, ::after, ::before {
    box-sizing: border-box;
    margin:0; padding:0;
}
.flex, .flex-colum { display: flex; align-items:center; justify-content: space-between; gap:.5rem }
.fill { align-items: normal; }
.flex-colum {flex-direction: column; align-items: normal; justify-content: space-between;}

.grow { flex-grow:1 }
.wrap { flex-wrap: wrap}
img { max-width: 100% }
a { text-decoration:none; display:inline-block; }
html { height: 100%; }
body { font-family: sans-serif; font-size:13pt; max-width:1000px; margin:auto;}
header {padding:0.5rem; border-bottom: 1px solid #000}
header.top { background:#5385d4 }
.cards {gap:1rem}

.card { padding-top:0.8rem; text-align:center; }
.card > div {border:1px solid #ddd; padding:0.5rem}
.block { height: 300px }
.data { padding: 0.5rem}
.message { padding: 0.5rem; color:#333; display:flex; border:1px solid #ddd; border-radius:5px; margin-top:1rem; color:#333}    
.message svg { height: 1em; width: 1em; fill:#aaa}
.alarm .message { background:red; color:#fff; }
.alarm .message svg { fill:#fff } 



.red-block {background:#d07285}
.blue-block {background:#7c9ed5}

.checks > label { flex-grow:1; padding:0.5rem}
.checks input { display:none }
.checkvalue { display:flex; border-radius:5px; width:100%; height:30px; gap:1px }
.checkvalue > * {  flex: 0 0 46%; text-align:center }
.checkvalue b {  height: calc(100% - 4px); margin: 1px; background: #eee; border: 1px solid #aaa; border-radius: inherit;}
.check:not(:checked)+.checkvalue, .checkvalue.off { background:#ccc; color:#333 }
.check:not(:checked)+.checkvalue::before, .checkvalue.off::before{ content:'OFF'; display:block; padding:0 7px; width:50%; text-align:center }
.check:checked+.checkvalue, .checkvalue.on { background:#5385d4; color:#fff }
.check:checked+.checkvalue::after, .checkvalue.on::after{ content:'ON'; display:block; padding:0 7px; width:50%; text-align:center }

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type='number'],input[type="number"]:hover,input[type="number"]:focus { appearance: none; -moz-appearance: textfield; border:none; outline:none }

.form-group { border: 1px solid #ccc; border-radius:5px; gap:0;height:30px; overflow:hidden }
.form-group input { flex-grow: 1; border-radius:5px; width:50px; padding: 0 7px}
.form-group button { flex: 0 0 30px; border:none; border-left:1px solid #ddd; background:#eee; font-size:110% }