/* VITTAMAP EXPERIMENT PAGE */

.gauge-name {
    display: block;
    border-radius: 256px;
    border: 1px solid var(--bg-3);
    width: 250px;
    margin: 0.5em auto;
    font-weight: 600;
    font-size: 1.2rem;
}

.lora-gauge {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    position: relative;

    user-select: none;
    user-drag: none;
}

.lora-gauge .lora-gauge__outline {
    width: 100%;
    z-index: 10;
    position: relative;
}

.lora-gauge .lora-gauge__bg,
.lora-gauge .lora-gauge__bg-alt {
    position: absolute;
    z-index: 5;
}

.lora-gauge .lora-gauge__bg {
    width: 87%;
    top: 17px;
    left: 16px;
}

.lora-gauge .lora-gauge__min,
.lora-gauge .lora-gauge__max,
.lora-gauge .lora-gauge__2\/5,
.lora-gauge .lora-gauge__3\/5,
.lora-gauge .lora-gauge__4\/5,
.lora-gauge .lora-gauge__2\/6,
.lora-gauge .lora-gauge__3\/6,
.lora-gauge .lora-gauge__4\/6,
.lora-gauge .lora-gauge__5\/6 {
    position: absolute;
    z-index: 7;
    width: 2.5em;
    font-weight: 800;
    font-size: 0.8em;
}

.lora-gauge .lora-gauge__min {
    text-align: left;
    top: 70%;
    left: 29%;
}

.lora-gauge .lora-gauge__max {
    text-align: right;
    top: 70%;
    left: 58%;
}

.lora-gauge .lora-gauge__2\/5 {
    text-align: left;
    top: 33%;
    left: 21%;
}

.lora-gauge .lora-gauge__3\/5 {
    text-align: center;
    top: 21%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lora-gauge .lora-gauge__4\/5 {
    text-align: right;
    top: 33%;
    left: 66%;
}

.lora-gauge .lora-gauge__2\/6 {
    text-align: left;
    top: 41%;
    left: 19%;
}

.lora-gauge .lora-gauge__3\/6 {
    text-align: left;
    top: 20%;
    left: 35%;
}

.lora-gauge .lora-gauge__4\/6 {
    text-align: right;
    top: 20%;
    left: 52%;
}

.lora-gauge .lora-gauge__5\/6 {
    text-align: right;
    top: 41%;
    left: 68%;
}

.lora-gauge .lora-gauge__pin {
    z-index: 10;
    height: 70px;
    position: absolute;
    left: 64px;
    top: 127px;
    transform-origin: top right;
}

.lora-value span {
    display: block;
    font-size: 2em;
    font-weight: bold;
    width: 100%;
}


#chart-container {
    min-height: 400px;
}

#error-chart {
    display: grid;
    align-items: center;
    text-align: center;
    font-size: 1.5em;
    color: var(--vitta-red-light);
    font-style: italic;
    height: 300px;
    border: 4px dotted var(--bg-3);
}