* {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol"
}

.txt-right {
    padding-right: 10px;
}

#txtSolar,
#txtGrid,
#txtInverter,
#txtBattery,
#txtHouse {
    text-align: center;
}

#txtSoc {
    float: right;
    margin-top: 25%;
}

#txtSolar,
#txtGrid,
#txtBattery,
#txtSoc,
#txtHouse,
#txtInverter {
    font-weight: bolder;
}

#solar,
#grid,
#inverter,
#battery,
#house {
    width: fit-content;
}

#grid,
#house {
    float: right;
}

#house,
#inverter {
    color: #00c
}

.hl {
    color: #f00;
}

.container {
    width: fit-content;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 160px 160px 160px;
    grid-template-rows: 160px 160px 160px;
}

.grid-item {
    place-self: center;
    align-self: center;
}

.grid-center {
    place-self: center;
}

svg>path {
    stroke-width: 15px;
}

.flow-nowt,
svg.flow-nowt path {
    stroke: #bbb;
    color: #bbb;
}

.flow-good,
svg.flow-good path {
    stroke: #0c0;
    color: #0c0;
}

.flow-bad,
svg.flow-bad path {
    stroke: #f00;
    color: #f00;
}

.flow-ok,
svg.flow-ok>path {
    stroke: #00c;
}

.flow-solar,
svg.flow-solar path {
    stroke: #fa3;
    color: #fa3;
}

svg>text {
    text-anchor: middle;
    alignment-baseline: middle;
}

svg>text.lbl {
    font-weight: 800;
}

svg>text.val {
    font-weight: 600;
}

svg#donutChart>path {
    transition: stroke-width 300ms ease;
}

svg#donutChart>path:hover,
svg#donutChart>path.selected {
    stroke-width: 20px;
}