body {
    font-size: 20px;
    font-family: sans-serif;
    text-anchor: middle;
    font-weight: bold;
    fill: rgb(127, 132, 136);
    color: rgb(127, 132, 136);
}

.valueText {
    writing-mode: tb;
    font-size: 14px;
    font-family: sans-serif;
    text-anchor: middle;
    font-weight: bold;
    fill: rgb(127, 132, 136);
    letter-spacing: 1px;
}

.pv {
    stroke: #FCE798;
    stroke-width: 1;
    fill: #ffffff;
}

.pvCircleBase {
    stroke: #FCE798;
    fill: none;
    stroke-width: 20;
}

.pvCircleCurrent {
    stroke: #ffd84d;
    fill: none;
    stroke-width: 20;
}

.inv {
    stroke: #cccccc;
    stroke-width: 1;
    fill: #ffffff;
}

.grid {
    stroke: #7f8488;
    stroke-width: 1;
    fill: #ffffff;
}

.gridCircleBase {
    stroke: #7f8488;
    fill: none;
    stroke-width: 20;
}

.gridCircleCurrent {
    stroke: #5a5e61;
    fill: none;
    stroke-width: 20;
}

.consumer {
    stroke: #C6DFEB;
    stroke-width: 1;
    fill: #ffffff;
}

.consumerCircleBase {
    stroke: #C6DFEB;
    fill: none;
    stroke-width: 20;
}

.consumerCircleCurrent {
    stroke: rgb(156, 205, 228);
    fill: none;
    stroke-width: 20;
}

.path {
    animation: run 3s linear infinite;
}

.path.pv {
    fill: rgb(247, 192, 2);
}

.path.grid {
    fill: rgb(153, 153, 153);
}

.path.consumer {
    fill: rgb(112, 175, 205);
}

.autarkCircleBase {
    stroke: #c2c2c2;
    fill: none;
    stroke-width: 20;
}

.autarkCircleCurrent {
    stroke: #008512;
    fill: none;
    stroke-width: 20;
}

.autarkText {
    font-size: 24px;
    font-family: sans-serif;
    text-anchor: middle;
    font-weight: bold;
    fill: rgb(127, 132, 136);
    letter-spacing: 1px;
}

.form-check .form-check-input {
    float: unset !important;
}

.form-range {
    width: 480px !important;
}

.dtPickerCell {
    width: 120px;
}

.tempCell {
    width: 80px;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}