.gauge-container {
    width: calc((100vw - 6px) - 12px);
    height: calc((100vw - 6px) - 12px);
    display: block;
    float: left;
    padding: 3px;
    background-color: #222;
    margin: 3px;
    border-radius: 4px;
    position: relative;
    /* font-size: 0.5vw; */
}
.gauge-container.c1 {
    width: calc((100vw - 6px) - 12px);
    height: calc((100vw - 6px) - 12px);
}
.gauge-container.c2 {
    width: calc((100vw - 6px) / 2 - 12px);
    height: calc((100vw - 6px) / 2 - 12px);
}
.gauge-container.c3 {
    width: calc((100vw - 6px) / 3 - 12px);
    height: calc((100vw - 6px) / 3 - 12px);
}
.gauge-container.c4 {
    width: calc((100vw - 6px) / 4 - 12px);
    height: calc((100vw - 6px) / 4 - 12px);
}
.gauge-container.c5 {
    width: calc((100vw - 6px) / 5 - 12px);
    height: calc((100vw - 6px) / 5 - 12px);
}
.gauge-container.c6 {
    width: calc((100vw - 6px) / 6 - 12px);
    height: calc((100vw - 6px) / 6 - 12px);
}
.gauge-container.c7 {
    width: calc((100vw - 6px) / 7 - 12px);
    height: calc((100vw - 6px) / 7 - 12px);
}
.gauge-container.c8 {
    width: calc((100vw - 6px) / 8 - 12px);
    height: calc((100vw - 6px) / 8 - 12px);
}
.gauge-container.c9 {
    width: calc((100vw - 6px) / 9 - 12px);
    height: calc((100vw - 6px) / 9 - 12px);
}
.gauge-container.c10 {
    width: calc((100vw - 6px) / 10 - 12px);
    height: calc((100vw - 6px) / 10 - 12px);
}
.gauge-container.r1 {
    width: calc((100vh - 6px) - 12px);
    height: calc((100vh - 6px) - 12px);
}
.gauge-container.r2 {
    width: calc((100vh - 6px) / 2 - 12px);
    height: calc((100vh - 6px) / 2 - 12px);
}
.gauge-container.r3 {
    width: calc((100vh - 6px) / 3 - 12px);
    height: calc((100vh - 6px) / 3 - 12px);
}
.gauge-container.r4 {
    width: calc((100vh - 6px) / 4 - 12px);
    height: calc((100vh - 6px) / 4 - 12px);
}
.gauge-container.r5 {
    width: calc((100vh - 6px) / 5 - 12px);
    height: calc((100vh - 6px) / 5 - 12px);
}
.button {
    cursor: pointer;
}

.gauge-container.text {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.txt {
    /* height: 100%; */
    width: 100%;
    /* display: inline-block; */
    /* vertical-align: middle; */
    /* cursor: pointer; */
    text-align:center;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.gauge-container > .label {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    /* font-family: monospace; */
    /* font-size: 8vw; */
    padding: 2px 4px;
}
.gauge-container.c1 .label {
    font-size: 8vw;
    padding: 2px 4px;
}
.gauge-container.c2 .label {
    font-size: 4vw;
    padding: 2px 4px;
}
.gauge-container.c3 .label {
    font-size: 3vw;
    padding: 2px 4px;
}
.gauge-container.c4 .label {
    font-size: 2.5vw;
    padding: 1px 2px;
}
.gauge-container.c5 .label {
    font-size: 2vw;
    padding: 1px 2px;
}
.gauge-container.c6 .label {
    font-size: 1.6vw;
    padding: 1px 2px;
}
.gauge-container.c7 .label {
    font-size: 1.4vw;
    padding: 1px 2px;
}
.gauge-container.c8 .label {
    font-size: 1.2vw;
    padding: 1px 2px;
}
.gauge-container.c9 .label {
    font-size: 1vw;
    padding: 1px 2px;
}
.gauge-container.c10 .label {
    font-size: 0.8vw;
    padding: 1px 2px;
}
.gauge-container.r1 .label {
    font-size: 8vh;
    padding: 3px 6px;
}
.gauge-container.r2 .label {
    font-size: 4vh;
    padding: 2px 4px;
}
.gauge-container.r3 .label {
    font-size: 3vh;
    padding: 2px 4px;
}
.gauge-container.r4 .label {
    font-size: 2.5vh;
    padding: 1px 2px;
}
.gauge-container.r5 .label {
    font-size: 2vh;
    padding: 1px 2px;
}

.gauge-container > .time {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    /* font-family: monospace; */
    font-size: 12px;
    padding: 1px 2px;
}


.gauge-container > .gauge .dial {
    stroke: #334455;
    stroke-width: 3;
}
.gauge-container > .gauge .value {
    stroke: #5ee432;
    stroke-dasharray: none;
    stroke-width: 10;
}
.gauge-container > .gauge .value-text {
    fill: #f7aa38;
    transform: translate3d(30%, 15%, 0);
    display: inline-block;
}
.gauge-container.big > .gauge .value-text {
    fill: white;
    transform: translate3d(5%, 7%, 0);
    display: inline-block;
    font-size: 3vw;
}
.gauge-container .value-text {
    color: #f7aa38;
    position: absolute;
    bottom: 15%;
    right: 10%;
    display: inline-block;
}
.gauge-container .unit {
    color: #f7aa38;
    position: absolute;
    bottom: 15%;
    right: 5%;
    display: inline-block;
    text-align: right;
    /* font-size: 10vw; */
}
.gauge-container.c1 .unit {
    font-size: 10vw;
}
.gauge-container.c2 .unit {
    font-size: 8vw;
}
.gauge-container.c2 .unit {
    font-size: 5vw;
}
.gauge-container.c3 .unit {
    font-size: 3vw;
    padding: 2px 4px;
}
.gauge-container.c4 .unit {
    font-size: 2.5vw;
    padding: 1px 2px;
}
.gauge-container.c5 .unit {
    font-size: 2vw;
    padding: 1px 2px;
}
.gauge-container.c6 .unit {
    font-size: 1.6vw;
    padding: 1px 2px;
}
.gauge-container.c7 .unit {
    font-size: 1.4vw;
    padding: 1px 2px;
}
.gauge-container.c8 .unit {
    font-size: 1.2vw;
    padding: 1px 2px;
}
.gauge-container.c9 .unit {
    font-size: 1vw;
    padding: 1px 2px;
}
.gauge-container.c10 .unit {
    font-size: 0.8vw;
    padding: 1px 2px;
}
.gauge-container.r1 .unit {
    font-size: 10vw;
}
.gauge-container.r2 .unit {
    font-size: 5vh;
}
.gauge-container.r3 .unit {
    font-size: 3.8vh;
    padding: 2px 4px;
}
.gauge-container.r4 .unit {
    font-size: 2.6vh;
    padding: 1px 2px;
}
.gauge-container.r5 .unit {
    font-size: 2.2vh;
    padding: 1px 2px;
}

.gauge-container.p2 > .gauge .value {
    stroke-dasharray: 93.6 1;
}
.gauge-container.p3 > .gauge .value {
    stroke-dasharray: 62 1;
}
.gauge-container.p4 > .gauge .value {
    stroke-dasharray: 46.1 1;
}
.gauge-container.p5 > .gauge .value {
    stroke-dasharray: 36.7 1;
}
.gauge-container.p6 > .gauge .value {
    stroke-dasharray: 30.4 1;
}
.gauge-container.p7 > .gauge .value {
    stroke-dasharray: 25.9 1;
}
.gauge-container.p8 > .gauge .value {
    stroke-dasharray: 22.7 1;
}
.gauge-container.p9 > .gauge .value {
    stroke-dasharray: 20 1;
}
.gauge-container.p10 > .gauge .value {
    stroke-dasharray: 17.9 1;
}
.gauge-container.p11 > .gauge .value {
    stroke-dasharray: 16.2 1;
}
.gauge-container.p12 > .gauge .value {
    stroke-dasharray: 14.8 1;
}
.gauge-container.p13 > .gauge .value {
    stroke-dasharray: 13.6 1;
}
.gauge-container.p14 > .gauge .value {
    stroke-dasharray: 12.6 1;
}
.gauge-container.p15 > .gauge .value {
    stroke-dasharray: 11.7 1;
}


.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.text-container {
    width: 370px;
    min-height: 24px;
    display: block;
    float: left;
    padding: 4px;
    background-color: #222;
    margin: 4px;
    border-radius: 4px;
    position: relative;
}
.text-container.med {
    width: 178px;
}
.text-container.small {
    width: 81px;
}
.slider-container {
    width: calc((100vw - 6px) - 12px);
    height: 10vw;
    /* display: block; */
    /* float: left; */
    padding: 3px;
    background-color: #222;
    margin: 3px;
    border-radius: 4px;
    position: relative;
    font-size: 10vw;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.slider-container > .label {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    /* font-family: monospace; */
    font-size: 2vw;
    padding: 3px 6px;
}
input[type="range"] {
    width: 100%;
}
.empty-row {
    width: calc((100vw - 6px) - 12px);
    height: 2vw;
    padding: 3px;
    background-color: #222;
    margin: 3px;
    border-radius: 4px;
    display: block;
    float: left;
    position: relative;
}