@font-face {
    font-family: 'Play';
    src: url('Play-Regular.ttf');
}

body {
    display: flex;
    flex-direction: column;
    margin: 0vw;
    background-color: var(--disconnectedBodyBackgroudColor);
    /*background-color: var(--bodyBackgroundColor);*/
    /*background-image: url("../static/asterix_logo_darker_dot.png");*/
    /*background-repeat: no-repeat;*/
    /*background-position: right 2.9vw bottom 4.5vh; /* this understand chrome and firefox */
    /*background-size: 8vw, 8vh;*/
    opacity: 1;
    font-family: Play;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-touch-callout: none;
 /* iOS Safari */
    -webkit-user-select: none;
 /* Safari */
    -khtml-user-select: none;
 /* Konqueror HTML */
    -moz-user-select: none;
 /* Old versions of Firefox */
    -ms-user-select: none;
 /* Internet Explorer/Edge */
    user-select: none;
 /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.middleMessages.indicatorOn {
    background-image: url("../static/asterix_logo_dark_dot.png");
}

.f10enabled {
    background-color: var(--f10bodyBackgroudColor) !important;
}

.f10disabled {
    background-color: var(--bodyBackgroundColor) !important;
}

.pcNotActive {
    background-color: var(--pcNotActiveBodyBackgroundColor) !important;
}

.disconnected {
    background-color: var(--disconnectedBodyBackgroudColor) !important;
}

.scroller {
    overflow-y: scroll;
    scrollbar-color: red var(--bodyBackgroundColor);
}

.scroller::-webkit-scrollbar {
    width: 0.7vw;
    height: 8px;
}

.scroller::-webkit-scrollbar-track-piece {
    background-color: var(--bodyBackgroundColor);
}

.scroller::-webkit-scrollbar-thumb:vertical {
    background-color: red;
}

.plantId {
    position: absolute;
    float: left;
    left: 10px;
    bottom: 10px;
    color: var(--colorElementBodies);
}

.header {
    display: flex;
    justify-content: center;
    height: 5vh;
}

.plant {
    display: flex;
    height: 90vh;
}

.plantLeft {
    /*background-color: yellow;*/
    display: flex;
    flex-direction: column;
    height: 90vh;
    width: 81.2vw;
}

.plantRight {
    display: flex;
    flex-direction: column;
    height: 90vh;
    width: 18.7vw;
}

.top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 43vh;
}

.topSilos {
    display: flex;
    justify-content: flex-start;
    height: 43vh;
    width: 81.2vw;
}

.topQueue {
    /*background-color: pink;*/
    display: flex;
    flex-direction: column;
    height: 60vh;
    width: 18.7vw;
    justify-content: flex-end;
}

.topContinuousSettings {
    display: flex;
    height: 9vh;
    width: 17.3vw;
    justify-content: flex-end;
    padding-top: 0.25vh;
    padding-bottom: 0.25vh;
    background-color: var(--colorElementBodies) !important;
    border-radius: 0.25vw;
    box-shadow: var(--shadows);
}

.topQueueContinuous {
    display: flex;
    padding-top: 0.5vh;
    height: 51vh;
    width: 18.7vw;
    justify-content: flex-end;
}

.topBatchModeSettings {
    display: flex;
    height: 3vh;
    width: 18.7vw;
    justify-content: flex-end;
    padding-bottom: 0.5vh;
}

.topQueueBatchMode {
    display: flex;
    height: 60vh;
    width: 18.7vw;
    justify-content: flex-end;
}

/*
.horizontalSpacer {
    height: 0.5vh;
    width: 100vw;
}
*/

.middle {
    /*background-color: cyan;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 47vh;
}

.middleSilosAndEtc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 47vh;
    width: 80vw;
}

.middleLeft {
    display: flex;
    flex-direction: column;
    height: 47vh;
}

.middleLeftSilos {
    display: flex;
    justify-content: flex-start;
}

.middleLeftConveyers {
    display: flex;
}

.middleMiddle {
    display: flex;
    flex-direction: column;
    height: 47vh;
    /*width: 45.8vw;*/
}

.middleMiddleTop {
    display: flex;
    /*flex-direction: row-reverse;*/
    height: 4vh;
    justify-content: center;
    /*width: 45.8vw;*/
}

.middleMiddleCenter {
    display: flex;
    flex-direction: row;
    height: 42vh;
    /*width: 45.8vw;*/
}

.middleMiddleCenterLeft {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    height: 42vh;
    /*width: 18vw;*/
}

.middleMiddleCenterLeftHalf {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    /*background-color: blue;*/
    height: 42vh;
    width: 6vw;
}

.middleMiddleCenterCenter {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    /*background-color: yellow;*/
    height: 42vh;
    /*width: 20.5vw;*/
}

.middleMiddleCenterRight {
    display: flex;
    align-items: flex-end;
    /*background-color: yellow;*/
    height: 42vh;
    margin-left: 1vw;
    /*width: 7.3vw;*/
}

.middleMessages {
    display: flex;
    flex-direction: column;
    z-index: 999;
    /*background-color: pink;*/
    height: 30vh;
    width: 18.7vw;
    background-image: url("../static/asterix_logo_darker_dot.png");
    background-repeat: no-repeat;
    background-position: right 4vw bottom 0vh;
    /* this understand chrome and firefox */
    background-size: 16vh, 8vh;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: yellow;*/
    height: 5vh;
}

.managerQueueIframe {
    border: none;
}

.hidden {
    display: none;
    float: left;
}

.main {
    margin-top: 1080px;
    font-size: 12px;
}

.m01vh {
    margin-top: 0.1vh;
}

.fontColorButtonText {
    color: var(--colorButtonText);
}

.red {
    color: var(--colorRed) !important;
}

.green {
    color: var(--colorGreen) !important;
}

.redDark {
    color: var(--colorRedDark) !important;
}

.greenDark {
    color: var(--colorGreenDark) !important;
}

.left {
    float: left;
    margin-left: 0px;
}

.signalActive {
    color: var(--colorVisualButtonTrue) !important;
}

/* TODO: what is this? .day should not be here */
.day .signalActive {
    text-shadow: 0px 0px 3px #000000 !important;
}

.signalActiveAnother {
    color: var(--colorGreen) !important;
}

.Aggregate {
    background-color: var(--colorAggregate) !important;
}

.AggregateDimmed {
    background-color: var(--colorWeightAggregate) !important;
}

.Admixture {
    background-color: var(--colorAdmixture) !important;
}

.AdmixtureDimmed {
    background-color: var(--colorWeightAdmixture) !important;
}

.Cement {
    background-color: var(--colorCement) !important;
}

.CementDimmed {
    background-color: var(--colorWeightCement) !important;
}

.Water {
    background-color: var(--colorWater) !important;
}

.WaterDimmed {
    background-color: var(--colorWeightWater) !important;
}

.Mixer {
    background-color: var(--colorGreen) !important;
}

.Error {
    background-color: var(--colorError) !important;
}

.isControl {
    cursor: pointer;
}

.isControl.needsCTRL {
    cursor: not-allowed;
}

.isControl.hasCTRL, .isControl.isFrozen {
    cursor: pointer;
}

.isControl.hasCTRL.needsCTRL {
    cursor: pointer;
}

.isButton:hover {
    background-color: var(--colorButtonBackgroundHover);
}

.isButton.isOnDark:hover {
    background-color: var(--bodyBackgroundColor);
}

.isButton.hasCTRL {
    background-color: var(--colorCanControlActive);
}

.isButton.hasCTRL.needsCTRL {
    background-color: var(--colorCanControlActiveNeedsCTRL);
}

.isButton:active {
    background-color: var(--colorButtonBackgroundActive) !important;
	/*text-shadow: 1px 1px black;*/
}

.isButton.reasonManual {
    background-color: var(--colorManual) !important;
}

.isButton.reasonAutomat {
    background-color: var(--colorAutomat) !important;
}

.isArrow:hover {
    color: var(--colorElementBodies);
}

.isArrow.hasCTRL {
    color: var(--colorCanControlActive);
}

.isArrow.hasCTRL.needsCTRL {
    color: var(--colorCanControlActiveNeedsCTRL);
}

/*
.content-cement {
    border-bottom: 1px solid #4c5b6b;
    border-radius: 0vw 0vw 0vw 0.5vw;
}
.content-admixture {
    border-bottom: 1px solid #4c5b6b;
}
.content-water {
    border-bottom: 1px solid #4c5b6b;
    border-radius: 0vw 0vw 0.5vw 0vw;
}
.content-spacer {
    border-bottom: 1px solid #4c5b6b;
}
*/

/*
.arrowToMixer {
    display: flex;
    justify-content: flex-end;
    color: #4c5b6b;
    font-size: 2.50vh;
    margin-right: 10%;
}
*/

.recycledWaterDisabled {
    width: 0.1vw;
    height: 100%;
    text-orientation: upright;
    writing-mode: vertical-lr;
    color: var(--colorRecycledWater);
    text-shadow: 1px 1px black;
    padding-top: 1.5vh;
    padding-left: 0.2vh;
    font-size: 1.53vh;
}

/**************************************************** Silos ******************************************************/
.content-aggregates {
    display: flex;
}

.silo-content {
    margin-left: 0.5vw;
    width: 100px;
    float: left;
}

.silo-top {
    background-color: var(--colorElementBodies);
    display: flex;
    align-items: center;
    justify-content: space-between;
	/*border: none 1px var(--colorBorder);*/
    border-top: var(--borderShow) 1px var(--colorBorder);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    border-top-left-radius: 30%;
    border-top-right-radius: 30%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: var(--shadows);
}

.silo-body {
    background-color: var(--colorElementBodies);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    display: flex;
    flex-direction: row;
    box-shadow: var(--shadows);
}

.silo-level-content {
    display: flex;
    height: 100%;
}

.silo-level-box {
    border: 1px solid #1C2833;
    margin-left: 0.4vw;
    width: 0.25vw;
    height: 90%;
}

.silo-level-box.red {
    background-color: var(--colorRed);
}

.silo-level-box.green {
    background-color: var(--colorSiloLevelGreen);
}

.level {
    background-color: var(--colorSiloLevelEmpty);
}

.silo-display-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    padding-bottom: 0.3vh;
    padding-right: 0.4vw;
    width: 100%;
}

.silo-bottom {
    background-color: var(--colorElementBodies);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    border-bottom: var(--borderShow) 1px var(--colorBorder);
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: none 1px var(--colorBorder);*/
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: var(--shadows);
}

.silo-content .silo-sensor {
    background-color: var(--colorSiloAndBinSensor);
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
    height: 5px;
    width: 80%;
    box-shadow: var(--shadowSensor);
}

.silo-sensor-opened {
    background-color: var(--colorRed) !important;
}

.silo-content .silo-arrows {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    color: var(--colorArrow);
    font-size: 4.44vh;
}

.silo-arrows-sub {
    display: flex;
    flex-direction: column;
}

.silo-arrow-triad {
    display: flex;
    position: relative;
    justify-content: center;
}

/* TODO: obsolete? -> we now have needsCTRL and stuff
.silo-signal-canControl {
    color: var(--colorCanControlActive) !important;
}
*/

.silo-signal-open {
    color: var(--colorAggregate) !important;
}

.number {
    display: flex;
    justify-content: center;
    width: 30%;
    margin-top: 0.2%;
    /*color: var(--colorNumber);*/
    color: yellow;
    text-align: center;
    font-size: 2.22vh;
    text-shadow: 2px 2px var(--colorTextShadow);
}

.numberPosition {
    display: flex;
    justify-content: center;
    width: 30%;
    margin-top: 0.2%;
    color: var(--colorNumber);
    font-weight: var(--fontWeight);
    /*color: green;*/
    text-align: center;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.recipePosition {
    display: flex;
    justify-content: center;
    width: 30%;
    margin-top: 0.2%;
    color: var(--colorMoistureUserDefined);  /* TODO: moisture? */
    text-align: center;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.nameShort {
    display: flex;
    justify-content: center;
    width: 95%;
    color: var(--colorSiloName);
    text-align: center;
    font-size: 1.67vh;
    /*text-shadow: 1px 1px var(--colorTextShadow);*/
    text-shadow: 1px 1px black;
    overflow: hidden;
    white-space: nowrap;
    cursor: help;
}

.silo-moisture-probe {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    color: var(--colorMoisture);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.silo-moisture {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    color: var(--colorMoistureUserDefined);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.silo-density-probe {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    /*color: var(--colorDensity);*/
    color: var(--colorMoisture); /* TODO */
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.silo-density {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    /*color: var(--colorDensityUserDefined);*/
    color: var(--colorMoistureUserDefined); /* TODO */
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.silo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.39vh;
    margin-left: 0.4vw;
    color: var(--colorMoistureUserDefined);  /* TODO: moisture? */
    cursor: pointer;
}

.silo-link.unlink {
    color: var(--colorLinkUnlink);
}

.silo-link.link {
    color: var(--colorLinkLink);
}

.silo-temperature-probe {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    color: var(--colorTemperature);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.silo-temperature {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    color: var(--colorTemperatureUserDefined);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

/* TODO: is this unused? */
.warm {
    color: var(--colorRed) !important;
}

.silo-delta {
    display: flex;
    justify-content: center;
    padding-right: 0.1vw;
    font-size: 0.89vh;
    margin-bottom: 0.1vw;
}

.silo-requestDisplay {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    color: var(--colorRequestDisplay);
    font-weight: var(--fontWeight);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.siloRequestAltered {
    color: var(--colorRequestDisplayAltered);
    cursor: help;
}

.silo-display {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    color: var(--colorDisplay);
    font-weight: var(--fontWeight);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.silo-control-content {
    margin-top: 0.1vw;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    color: var(--colorElementBodies);
    gap: 0.2vw;
}

.siloControl {
    color: var(--colorButtonText);
    font-size: 1.6vh;
    padding: 0.1vw;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
}

/**************************************************  FLOWMETERS ******************************************/
.content-flowmetersAndBins {
    display: flex;
}

.flowmeterContent {
    float: left;
    margin-top: 0.1vw;
}

.flowmeter-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flowmeterOLD {
    display: flex;
    align-self: center;
    align-items: center;
    background-color: var(--colorElementBodies);
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    box-shadow: 0.3vw 0.2vw 5px 0px rgba(0, 0, 0, 0.35);
}

.flowmeter {
    display: flex;
    flex-direction: column-reverse;
}

.flowmeter-top {
    background-color: var(--colorElementBodies);
    box-shadow: var(--shadows);
    z-index: 1;
}

.flowmeter-top-displays {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--colorElementBodies);
}

.flowmeter-countdown {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--colorDuration);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.94vh;
    width: 100%;
}

.flowmeter-bottom-spacer {
    height: 1vh;
}

.flowmeter-batches {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--colorBatchSequence);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.94vh;
    width: 100%;
}

.flowmeter-display-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colorElementBodies);
    color: var(--colorDisplay);
    box-shadow: var(--shadows);
    z-index: 2;
}

.flowmeter-bottom-content {
    display: flex;
    justify-content: space-between;
}

.flowmeter-bottom-left {
    display: flex;
    justify-content: flex-start;
    background-color: var(--colorElementBodies);
    border-bottom-left-radius: 0.5vw;
    width: 25%;
    box-shadow: var(--shadows);
    z-index: 3;
}

.flowmeter-bottom-right {
    display: flex;
    justify-content: flex-end;
    background-color: var(--colorElementBodies);
    border-bottom-right-radius: 0.5vw;
    width: 25%;
    box-shadow: var(--shadows);
    z-index: 4;
}

.flowmeter-display {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: -0.2vw;
    margin-left: 0.01vw;
    text-align: left;
    font-size: 1.67vh;
    font-weight: var(--fontWeight);
    text-shadow: 1px 1px var(--colorTextShadow);
}

.flowmeter-delta {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: -0.1vw;
    margin-left: 0.01vw;
    padding-right: 0.1vw;
    text-align: right;
    font-size: 1.07vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

/**************************************************  SCALES AND BINS ******************************************/

.bins-content {
    float: left;
    width: 100%;
}

.bin-content {
    float: left;
}

.bin-top-flush {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--colorElementBodies);
}

.bin-top-flush-button {
    color: var(--colorButtonText);
    font-size: 1.6vh;
    min-width: 1.2vw;
    min-height: 2vh;
    display: flex;
    justify-content: center;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    align-items: center;
}

.bin-top-batches {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--colorBatchSequence);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.94vh;
    width: 100%;
}

.bin-top-countdown {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--colorDuration);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.94vh;
    width: 100%;
}

.bin-top-request {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--colorGreen);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.11vh;
    width: 100%;
}

.bin-top-request-accepted {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--colorGreen);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.11vh;
    width: 100%;
}

.bin-top {
    background-color: var(--colorElementBodies);
    width: 520px;
    height: 10px;
    border: none 1px var(--colorBorder);
    border-bottom: solid 1px var(--colorElementBodies);
    box-shadow: inset 2px 0px 2px -2px var(--colorElementBodies), inset -2px 0px 2px -2px var(--colorElementBodies);
}

.bin-topScale {
    background-color: var(--colorElementBodies);
    width: 520px;
    height: 10px;
    border-top: var(--borderShow) 1px var(--colorBorder);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    box-shadow: inset 2px 0px 2px -2px var(--colorElementBodies), inset -2px 0px 2px -2px var(--colorElementBodies);
}

.bin-content .bin {
    background-color: var(--colorElementBodies);
    width: 520px;
    height: 50px;
    border-bottom: var(--borderShow) 1px var(--colorBorder);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 3vw 0.8vw;
    border-bottom-right-radius: 3vw 0.8vw;
    box-shadow: var(--shadows);
}

.bin-displays-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.bin-display-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.bin-display-content .request {
    color: var(--colorRequestDisplay);
    font-weight: var(--fontWeight);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    margin-top: 0.05vw;
    justify-content: center;
    z-index: 99;
}

.bin-display-content .value {
    color: var(--colorDisplay);
    font-weight: var(--fontWeight);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    margin-top: -0.2vw;
    justify-content: center;
    z-index: 99;
}

.bin-display-content .bin-temperature-probe {
    color: var(--colorTemperature);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    margin-top: 0.05vw;
    justify-content: center;
    z-index: 99;
}

.bin-display-content .bin-density-probe {
    color: var(--colorDensity);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    margin-top: 0.05vw;
    justify-content: center;
    z-index: 99;
}

.bin-delta {
    display: flex;
    align-self: center;
    padding-right: 0.1vw;
    font-size: 0.89vh;
    margin-bottom: 0.15vw;
}

.bin-sensor-content {
    display: flex;
    justify-content: center;
}

.bin-sensor {
    background-color: var(--colorSiloAndBinSensor);
    margin-right: auto;
    margin-left: auto;
    width: 50px;
    height: 5px;
    box-shadow: var(--shadowSensor);
}

.bin-sensor-opened {
    background-color: var(--colorRed)  !important;
    box-shadow: var(--shadowSensor);
}

.bin-content .bin-arrow-and-screw-content {
    margin-right: auto;
    margin-left: auto;
    float: left;
}

.bin-arrow-and-screw-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bin-arrow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: var(--colorArrow);
    font-size: 4.44vh;
    height: 40px;
    margin-top: 0.25vw;
}

.bin-arrow-reservoir {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: var(--colorArrow);
    font-size: 3.44vh;
    height: 40px;
    margin-top: 0.25vw;
}

.bin-opening-arrow-content {
    position: absolute;
    transform: rotate(180deg);
    font-size: 1.39vh;
    /*margin-left: 0.7vw;
    margin-top: -1vh;*/
    /* for pyside6:*/
    margin-left: 1.4vw;
    margin-top: -2vh;
}

/* TODO: unify with bin */
.silo-closing-arrow-content {
    position: absolute;
    font-size: 1.39vh;
    /*margin-left: -0.7vw;
    margin-top: 0.3vh;*/
    left: 0;
    /* for pyside6: */
    margin-left: -1.4vw;
    margin-top: -2vh;
}

/* TODO: unify with bin */
.silo-opening-arrow-content {
    position: absolute;
    font-size: 1.39vh;
    margin-top: 0.3vh;
    right: 0;
    /* for pyside6: */
    margin-left: 1.4vw;
    /*margin-top: -2vh;*/
}

.bin-closing-arrow-content {
    position: absolute;
    transform: rotate(180deg);
    font-size: 1.39vh;
    /*margin-left: -0.7vw;
    margin-top: -1vh;*/
	/* for pyside6: */
    margin-left: -1.4vw;
    margin-top: -2vh;
}

.bin-control-content {
    margin-top: 0.1vw;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    color: var(--colorElementBodies);
}

.binControl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorButtonText);
    font-size: 1.6vh;
    padding: 0.1vw;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    cursor: pointer;
    margin-top: 0.2vw;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

.binControlPump {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorButtonText);
    font-size: 1.78vh;
    padding-bottom: 0.15vw;
    padding-top: 0.05vw;
    padding-right: 0.18vw;
    padding-left: 0.18vw;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    cursor: pointer;
    margin-top: 0.2vw;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

.cart {
    width: 20vw;
}

/* TODO: cut-n-pasted from liftRail and modified - unite! */
.cartRail {
    width: 100%;
    height: 0.5vw;
    background-color: var(--colorElementBodies);
    align-self: center;
    z-index: -10;
    /*border: none 1px var(--colorBorder);*/
    border: var(--borderShow) 1px var(--colorBorder);
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    box-shadow: var(--shadowLift1);
}

/* TODO: this is (modified) duplicity of mixerControlStop and liftControlStop - unite */
.cartControlStop {
    /*padding-top: 25%;
    padding-bottom: 25%;*/
    color: var(--colorRed);
}

/*********************************** SBM Scale Screw ************************************************/

.scale-screw-content {
    margin-left: 1vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-self: baseline;
    height: 100%;
}

.scale-screw-content.noMargin {
    margin-left: 0vw;
}

.scale-screw-button-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.scale-screw-button {
    display: flex;
    background-color: var(--colorButtonBackground);
    justify-content: center;
    color: var(--bodyBackgroundColor);
    font-size: 1.42vh;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding-top: 0.2vw;
    padding-bottom: 0.2vw;
    text-shadow: 1px 1px var(--colorTextShadow);
    align-items: center;
}

.scale-screw-button:hover {
    background-color: var(--colorElementBodies);
}

/* TODO: obsolete? -> we now have needsCTRL and stuff */
.scale-screw-button.canControl {
    background-color: var(--colorCanControlActive);
    cursor: pointer;
}

.scale-screw-button:active {
    background-color: black;
}

.scale-screw-rotation {
    display: flex;
    justify-content: center;
    color: var(--colorElementBodies);
    font-size: 1.78vh;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

.scale-screw-rotation.active {
    color: var(--colorGreen) !important;
}

.scale-screw-scale {
    display: flex;
    justify-content: center;
    color: var(--colorDisplay);
    text-shadow: 1px 1px var(--colorTextShadow);
    font-size: 1.78vh;
    margin-left: 0.2vw;
    width: 2.2vw;
    background-color: var(--colorConveyerDisplayContentBackground);
    padding: 0.1vw;
    box-shadow: inset 0px 0px 0px 1px var(--colorElementBodies);
}

.scaleScrewControl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorButtonText);
    font-size: 1.6vh;
    padding: 0.1vw;
    padding-left: 0.3vw;
    padding-right: 0.3vw;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    cursor: pointer;
    min-width: 1.2vw;
    min-height: 1.2vw;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

.scaleScrew {
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    display: flex;
    border: 1px solid var(--colorButtonBackground);
    width: 100%;
    height: 0.3vw;
    /*box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);*/
    box-shadow: var(--shadowsConveyer1);
}

.scaleScrewRotationBackground {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--colorElementBodies);
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.scaleScrew-idle {
    display: block;
    width: 200%;
    height: 100%;
    transform: translateX(-0.5vw);
    background-image: var(--conveyerIdle);
}

.scaleScrew-run {
    display: block;
    width: 200%;
    height: 100%;
    transform: translateX(-0.5vw);
    background-image: repeating-linear-gradient(to right, var(--colorMixerRotationDark), var(--colorMixerRotationDark) 0.5vw, var(--colorMixerRotationLight) 0.5vw, var(--colorMixerRotationLight) 1vw);
    animation: mixerRun 1.5s infinite steps(3);
    will-change: transform;
    animation-direction: reverse;
}

/**************************************************  MIXER ******************************************/

.content-mixer-global {
    padding-bottom: 4vh;
}

.orderOnHold {
    position: absolute;
    display: flex;
    justify-content: center;
    color: #bf1604;
    font-size: 2.22vh;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.mixer-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mixer-batch-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    flex-direction: row-reverse;
    height: 2.5vh;
    /*align-items: flex-end;*/
}

.mixer-top {
    justify-content: center;
    display: flex;
    background-color: var(--colorElementBodies);
    width: 100%;
    border-top: var(--borderShow) 1px var(--colorBorder);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    border-top-left-radius: 80%;
    border-top-right-radius: 80%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: var(--shadows);
}

.mixer-top2 {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    background-color: var(--colorElementBodies);
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    border-bottom: 1px solid black;
    padding-bottom: 0.2vw;
    box-shadow: var(--shadows);
}

.mixer-cover {
    width: 25%;
    height: 50%;
    background-color: var(--colorRed);
}

.close {
    background-color: var(--colorGreen) !important;
}

.mixer-body {
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    display: flex;
    background-color: var(--colorElementBodies);
    width: 100%;
    box-shadow: var(--shadows);
}

.mixer-body-tools {
    border-top: solid 1px var(--colorBorder);
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--colorElementBodies);
    width: 100%;
    box-shadow: var(--shadows);
}

.mixer-body2 {
    border-top: 1px solid black;
 /* for debugging */
    /*border-bottom: var(--borderShow) 1px var(--colorBorder);*/
    border-left: var(--borderShow) 1px var(--colorBorder);
    border-right: var(--borderShow) 1px var(--colorBorder);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mixer-body3 {
 /* test */
    border-top: 1px solid black;
 /* for debugging */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--colorElementBodies);
    width: 100%;
    box-shadow: var(--shadows);
}

.mixer-bay-content {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.mixer-bay-leftSide-empty {
    width: 49%;
    height: 100%;
    background-color: var(--colorElementBodies);
    border: none 1px var(--colorBorder);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 0px;
    box-shadow: var(--shadows);
}

.mixer-bay-leftSide {
    display: flex;
    width: 49%;
    height: 100%;
    justify-content: flex-end;
}

.mixer-bay-middleSide {
    width: 2%;
    height: 100%;
    background-color: var(--colorElementBodies);
    border: none 1px var(--colorBorder);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 0px;
    box-shadow: var(--shadows);
}

.mixer-bay {
    display: flex;
}

.mixer-bay-side {
    width: 3%;
    background-color: var(--colorElementBodies);
    box-shadow: var(--shadows);
    border-bottom: var(--borderShow) 1px var(--colorBorder);
}

.mixer-bay-middle {
    flex-grow: 1;
}

.mixer-bay-opening {
    height: 100%;
    border: none 1px var(--colorBorder);
    box-shadow: var(--shadows);
}

.mixer-bay-rightSide {
    display: flex;
    justify-content: flex-end;
    width: 49%;
    height: 100%;
}

.mixer-close {
    background-color: var(--colorElementBodies);
    width: 100%;
    height: 100%;
    border: none 1px var(--colorBorder);
    box-shadow: var(--shadows);
}

.mixer-between-closeSemi {
    background-color: var(--colorVisualButtonTrue) !important;
    width: 70%;
    height: 100%;
    border: none 1px var(--colorBorder);
    box-shadow: var(--shadows);
}

.mixer-semi {
    background-color: var(--colorVisualButtonTrue) !important;
    width: 50%;
    height: 100%;
    border: none 1px var(--colorBorder);
    box-shadow: var(--shadows);
}

.mixer-between-openSemi {
    background-color: var(--colorVisualButtonTrue) !important;
    width: 35%;
    height: 100%;
    border: none 1px var(--colorBorder);
    box-shadow: var(--shadows);
}

.mixer-open {
    background-color: var(--colorRed) !important;
    width: 20%;
    height: 100%;
    border: none 1px var(--colorBorder);
    box-shadow: var(--shadows);
}

.mixerDisplay-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    font-size: 1.94vh;
    height: 95%;
    width: 38%;
}

.mixerConsistencyDisplay-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90%;
    width: 24%;
}

.mixerBay {
    width: 49%;
}

.mixerBayControl-empty-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 80%;
}

.mixerBayControl-leftSide-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 49%;
    height: 100%;
}

.mixerBayControl-middleSide-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 2%;
    height: 100%;
}

.mixerBayControl-rightSide-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 49%;
    height: 100%;
}

.mixerBayControl {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    background-color: var(--colorElementBodies);
    /*** the padding is cut-n-pasted from conveyerControl - unite! */
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.05vw;
    padding-bottom: 0.1vw;
    box-shadow: var(--shadows);
    min-height: 2.4vh;
}

.mixerControl-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50%;
    height: 60%;
}

.mixerToolsControl-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.mixerControlButtons-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.mixerButton {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    color: var(--bodyBackgroundColor);
    font-weight: bold;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorMixerButtonBackground);
    border: var(--borderShow) 1px var(--colorBorder);
}

.mixerIcons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    color: var(--bodyBackgroundColor);
    font-weight: bold;
    font-size: 1.24vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.mixerEmptyingDurationLeft {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 100%;
    color: var(--colorDuration);
    text-align: right;
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

/* TODO: basically just cut-n-pasted and modified from mixerEmptyingDurationLeft - unite! */
.mixerAutostopDurationLeft {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    width: 10%;
    height: 100%;
    color: var(--colorDuration);
    text-align: right;
    font-size: 1.7vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.mixerClosingOpening {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 100%;
    color: var(--colorButtonText);
    text-align: right;
    font-size: 1.39vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorMixerButtonBackground);
    /*** the padding is cut-n-pasted from conveyerControl - and edited - unite! */
    padding-left: 0.2vw;
    padding-right: 0.2vw;
    padding-top: 0.05vw;
    padding-bottom: 0.05vw;
    border: var(--borderShow) 1px var(--colorBorder);
}

.mixerSensors {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--bodyBackgroundColor);
    text-align: right;
    font-size: 1.39vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorElementBodies);
    box-shadow: var(--shadows);
}

.mixerSensor {
    /*border: 1px solid white; /* for debugging */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorButtonText);
    text-align: right;
    font-size: 1.39vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorMixerButtonBackground);
    margin-left: 0.05vw;
    margin-right: 0.05vw;
    /*** the padding is cut-n-pasted from conveyerControl - and edited - unite! */
    /*padding-left: 0.42vw;
    padding-right: 0.42vw;*/
    padding-top: 0.2vw;
    padding-bottom: 0.2vw;
}

.mixer-bay-spacer {
    flex-grow: 1;
    height: 100%;
    background-color: var(--colorElementBodies);
    box-shadow: var(--shadows);
    /*border-bottom: var(--borderShow) 1px var(--colorBorder);*/
}

.mixerBlockUnlock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 100%;
    color: var(--colorGreen);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
}

.mixerBlockHand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 100%;
    color: var(--colorVisualButtonTrue);
    text-align: right;
    font-size: 1.67vh;
    /*text-shadow: 1px 1px var(--colorTextShadow);*/
    text-shadow: 0px 0px 3px #000000 !important;
    /* TODO: make same as sensors active */
    background-color: var(--colorButtonBackground);
}

.mixerBlockLock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    height: 100%;
    color: var(--colorMixerBayBlocked);
    text-align: right;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorMixerButtonBackground);
    /*** the padding is cut-n-pasted from conveyerControl - and edited - unite! */
    padding-left: 0.2vw;
    padding-right: 0.2vw;
    padding-top: 0.05vw;
    padding-bottom: 0.1vw;
}

/* not used anymore?
.mixerConsistency {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--colorConsistency);
    font-size: 2.84vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    padding-top: 2vh;
}

.mixerConsistencyDisplay {
    cursor: pointer;
}
*/

/* not used yet?
.mixerConsistencyHyperDisplay {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.78vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}
*/

.mixerMoistureProbeDisplay {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--colorMoisture);
    font-size: 1.78vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.mixerConsistencyProgressBar {
    display: flex;
    align-items: flex-end;
    width: 2%;
    height: 60%;
    background-color: WHITE !important;
    border-width: 1px solid none;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.35);
}

.mixerBatchSize {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
    color: var(--colorBatchSize);
    text-align: right;
    /*direction: rtl;*/
    white-space: nowrap;
    text-shadow: 1px 1px black;
    height: 30%;
}

.mixerBatch {
    display: flex;
    /*justify-content: flex-end;*/
    color: var(--colorBatchSequence);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    /*margin-right: 1vw;*/
}

.mixerMixingDurationLeft {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
    color: var(--colorDuration);
    text-align: right;
    text-shadow: 1px 1px var(--colorTextShadow);
    height: 40%;
    font-size: 2.22vh;
}

.mixerSpz {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
    color: var(--colorSPZ);
    font-weight: var(--fontWeight);
    text-align: right;
    text-shadow: 1px 1px var(--colorTextShadow);
    height: 30%;
}

.mixerConsistencyGraph-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 38%;
}

.mixerConsistencyPrints {
    display: flex;
    justify-content: center;
    color: var(--colorSPZ);  /* TODO: i don't like abusing spz color for this */
    font-weight: var(--fontWeight);
    text-shadow: 1px 1px var(--colorTextShadow);
    /*font-size: 1.2vh;*/
    font-size: 1.4vh;
    white-space: nowrap;
    padding-left: 0.25vw;
    padding-top: 0.45vh;
}

.mixer-exhaust-button {
    display: flex;
    align-items: center;
    color: var(--colorButtonText);
    padding: 0vw 0.2vw;
    font-size: 1.67vh;
    background-color: var(--colorMixerButtonBackground);
    cursor: pointer;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.mixerRotationHole {
    display: flex;
    border-left: 1px solid var(--colorButtonBackground);
    border-right: 1px solid var(--colorButtonBackground);
    align-items: center;
    justify-content: space-around;
    width: 20%;
}

.mixerRotationBackground {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--colorElementBodies);
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.mixer-idle {
    display: block;
    width: 200%;
    height: 100%;
    transform: translateX(-0.5vw);
    background-image: var(--mixerIdle);
}

.mixer-run {
    display: block;
    width: 200%;
    height: 100%;
    transform: translateX(-0.5vw);
    background-image: repeating-linear-gradient(to right, var(--colorMixerRotationLight), var(--colorMixerRotationLight) 0.5vw, var(--colorMixerRotationDark) 0.5vw, var(--colorMixerRotationDark) 1vw);
    animation: mixerRun 1.5s infinite steps(3);
    will-change: transform;
}

.mixer-idle.reasonAutomat {
    /* TODO: this is cut-n-pasted from button */
    background-color: var(--colorAutomat) !important;
}

@keyframes mixerRun {
    from {
        transform: translateX(-1.5vw) translateZ(0);
    }

    to {
        transform: translateX(-0.5vw) translateZ(0);
    }
}

/**************************************************  MIXER IS LIFTED ******************************************/

.mixer-lift-content {
    /*border: 1px solid white; /* for debugging */
    margin-left: 2%;
    margin-bottom: 11vh;
    display: flex;
    align-self: flex-end;
}

.mixerLiftControl-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    margin-left: 7%;
    align-self: flex-end;
    flex-direction: column;
    width: 37%;
}

.mixerLiftDurationLeft-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-self: flex-end;
    flex-direction: column;
    width: 25%;
}

.mixerLiftDurationLeft {
    display: flex;
    width: 100%;
    height: 12%;
    color: var(--colorDuration);
    align-self: flex-end;
    justify-content: flex-end;
    font-size: 1.6vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.mixerLiftControl {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 50%;
    margin-top: 10%;
    margin-bottom: 10%;
    padding-left: 10%;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-right: 10%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--bodyBackgroundColor);
    text-align: right;
    font-size: 1.11vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
}

.mixer-rail-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 6%;
    align-items: flex-end;
    align-content: space-between;
    height: 100%;
    justify-content: flex-end;
}

.mixerRail {
    width: 100%;
    height: 100%;
    background-color: var(--colorElementBodies);
    align-self: flex-end;
    border: none 1px var(--colorBorder);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: 0.3vw 0.4vw 5px 0px rgba(0,0,0,0.35);
}

.mixer-positions-content {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.mixerLiftControl.mixerLiftSensorTop {
    color: var(--colorRed);
}

.mixerLiftControl.mixerLiftSensorSemiTop {
    color: var(--colorMoisture);  /* TODO: moisture? wtf? */
}

.mixerLiftControl.mixerLiftSensorWait {
    color: var(--colorVisualButtonTrue);
}

.mixerLiftControl.mixerLiftSensorDown {
    color: var(--colorGreen);
}

.mixerLiftControlStop {
    padding-top: 20%;
    padding-bottom: 20%;
    color: var(--colorRed);
}

.mixerTop {
    /*border: 1px solid white; /* for debugging */
    margin-top: -120%;
    margin-right: -25%;
    width: 100%;
    height: 15%;
    align-self: flex-end;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    border: none 1px var(--colorBorder);
    z-index: 1;
}

.mixerSemiTop {
    /*border: 1px solid white; /* for debugging */
    margin-top: -120%;
    width: 100%;
    height: 14%;
    align-self: flex-end;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    border: none 1px var(--colorBorder);
    z-index: 1;
}

.mixerWait {
    /*border: 1px solid white; /* for debugging */
    margin-top: -80%;
    width: 100%;
    height: 14%;
    align-self: flex-end;
    z-index: 1;
}

.mixerMiddle {
    /*border: 1px solid white; /* for debugging */
    width: 100%;
    height: 14%;
    align-self: flex-end;
    z-index: 1;
}

.mixerDown {
    /*border: 1px solid white; /* for debugging */
    width: 100%;
    height: 14%;
    align-self: flex-end;
    z-index: 1;
}

.mixerCurrent {
    display: flex;
    background-color: var(--colorElementBodies);
    border-bottom: solid 1px #515D69;
    border-left: solid 1px #515D69;
    border-right: solid 1px #515D69;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    z-index: 1;
    box-shadow: 0.3vw 0.4vw 5px 0px rgba(0,0,0,0.35);
}

.mixerCurrentSemiTop {
    background-color: var(--colorElementBodies);
    border-bottom: solid 1px gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    z-index: 1;
    box-shadow: 0.3vw 0.4vw 5px 0px rgba(0,0,0,0.35);
}

.mixerCurrentTop {
    background-color: var(--colorElementBodies);
    border-bottom: solid 1px gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    z-index: 1;
    box-shadow: 0.3vw 0.4vw 5px 0px rgba(0,0,0,0.35);
}

.mixerLiftFailState {
    display: flex;
    justify-content: center;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--colorRed);
    text-shadow: 1px 1px var(--colorTextShadow);
}

.mixerLiftLock-content {
	/*border: 1px solid white; /* for debugging */
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    align-content: flex-end;
    align-self: flex-end;
    flex-direction: row;
}

.mixerLiftLock {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: flex-end;
    align-self: flex-end;
    width: 100%;
    height: 2.5vw;
    cursor: pointer;
    text-align: right;
    font-size: 1.24vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
}

.mixerLiftLock:hover {
    background-color: var(--colorElementBodies);
    cursor: pointer;
}

.mixerLiftLock:active {
    background-color: black;
    cursor: pointer;
}


/* TODO: use this for mixer and lift sensors as well */
.sensorButton {
    height: 20px;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    justify-content: center;
    background-color: var(--colorButtonBackground);
    border: var(--borderShow) 1px var(--colorBorder);
}

.sensorLed {
    color: var(--colorButtonText);
    font-size: 1.39vh;
}

.sensorAngle {
    color: var(--colorButtonText);
    font-size: 1.94vh;
}

/********************************************* LIFT *******************************/

.lift-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    margin-right: 2%;
    position: relative;
}

.liftRail-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 20%;
    margin-right: 20%;
    align-items: center;
    align-content: space-between;
    height: 100%;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
}

.liftControl-content {
    display: flex;
    align-self: center;
    flex-direction: column;
    margin-left: 15%;
    /*height: 80%;*/
    width: 100%;
}

.liftControl {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 50%;
    margin-top: 9%;
    margin-bottom: 9%;
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 12%;
    padding-bottom: 12%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: var(--colorButtonText);
    text-align: right;
    font-size: 1.39vh;
    /*text-shadow: 1px 1px var(--colorTextShadow);*/
    background-color: var(--colorButtonBackground);
    border: var(--borderShow) 1px var(--colorBorder);
}

.liftLockRotated {
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
}

.liftControl.liftSensorTop {
    color: var(--colorRed);
}

.liftControl.liftSensorSemiTop {
    color: var(--colorMoisture);  /* TODO: moisture? wtf! */
}

.liftControl.liftSensorWait {
    color: var(--colorVisualButtonTrue);  /* TODO: visualbuttontrue? wtf! */
}

.liftControl.liftSensorDown {
    color: var(--colorGreen);
    text-shadow: 0px 0px 3px #000000 !important;
}

.liftControlStop {
    padding-top: 25%;
    padding-bottom: 25%;
    color: var(--colorRed);
}

.liftTopDuration {
    position: absolute;
    padding-left: 1vw;
    margin-top: -2vw;
    color: var(--colorDuration);
    font-size: 1.6vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.liftDisplay {
    display: flex;
    justify-content: center;
    width: 4.5vw;
    position: absolute;
    color: var(--colorDisplay);
    font-size: 1.94vh;
    font-weight: var(--fontWeight);
    text-shadow: 1px 1px var(--colorTextShadow);
    z-index: 99;
}

.liftBottomContent {
    position: absolute;
    color: #85c1e9;
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    justify-content: space-between;
    width: 4.5vw;
    flex-direction: column;
}

.liftBottomDuration {
    color: var(--colorDuration);
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    justify-content: center;
}

.liftBottomSequence {
    color: var(--colorBatchSequence);
    text-shadow: 1px 1px var(--colorTextShadow);
    display: flex;
    justify-content: center;
}

.liftLock-content {
    position: absolute;
}

.liftControlLock {
    padding: 0.5vw;
    font-size: 1.24vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liftRail {
    width: 25%;
    height: 100%;
    background-color: var(--colorElementBodies);
    align-self: center;
    z-index: -10;
    /*border: none 1px var(--colorBorder);*/
    border: var(--borderShow) 1px var(--colorBorder);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: var(--shadowLift1);
}

.liftTop {
    /*border: 1px solid white; /* for debugging */
    width: 25%;
    height: 20%;
    margin-bottom: 10%;
    margin-right: -48%;
    margin-top: -20%;
    align-self: flex-start;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    border: none 1px var(--colorBorder);
    z-index: 1;
}

.liftSemiTop {
    /*border: 1px solid white; /* for debugging */
    width: 25%;
    height: 20%;
    margin-bottom: 10%;
    margin-right: -16%;
    margin-top: -20%;
    align-self: flex-start;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border: none 1px var(--colorBorder);
    z-index: 1;
}

.liftWait {
    /*border: 1px solid white; /* for debugging */
    width: 25%;
    height: 18%;
    margin-bottom: 10%;
    margin-right: -6%;
    align-self: flex-start;
    z-index: 1;
}

.liftMiddle {
    /*border: 1px solid white; /* for debugging */
    width: 25%;
    height: 18%;
    margin-bottom: 10%;
    margin-right: 2%;
    align-self: center;
    z-index: 1;
}

.liftDown {
    /*border: 1px solid white; /* for debugging */
    width: 25%;
    height: 18%;
    margin-bottom: 15%;
    margin-right: -1%;
    align-self: flex-end;
    z-index: 1;
}

.liftCurrent {
    display: flex;
    background-color: var(--colorElementBodies);
    border-bottom: solid 1px #515D69;
    border-left: solid 1px #515D69;
    border-right: solid 1px #515D69;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    z-index: 1;
    box-shadow: var(--shadowLift1);
}

.liftNonEmpty {
    background: -webkit-linear-gradient(var(--colorElementBodies) 0% 80%, var(--colorWeightAggregate) 81% 100%) !important;
}

.liftFailState {
    display: flex;
    justify-content: flex-end;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--colorRed);
    text-shadow: 1px 1px var(--colorTextShadow);
}

.liftCurrentSemiTop {
    background-color: var(--colorElementBodies);
    border-bottom: solid 1px gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    z-index: 1;
    box-shadow: var(--shadowLift2);
}

.liftCurrentTop {
    background-color: var(--colorElementBodies);
    border-bottom: solid 1px gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    z-index: 1;
    box-shadow: var(--shadowLift3);
}

/********************************************************* CONVEYERS *********************************/
.content-conveyers {
    display: flex;
    /*width: 100%;*/
}

.content-weighing-conveyer {
    justify-content: left;
}

.weighing-conveyer-content {
    /*border: 1px solid white; /* for debugging */
    width: 520px;
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.conveyer-weighing {
    width: 100%;
    height: 15%;
    background-color: var(--colorElementBodies);
    align-self: center;
    z-index: -1;
    border: 1px solid var(--colorButtonBackground);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);
}

.conveyerDisplayContent-inclined {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 1.5vh;
    font-size: 1.78vh;
    width: 90%;
    color: var(--colorNonButtonIcons);
}

.conveyerDisplayContent-horizontal {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 2.7vh;
    font-size: 1.78vh;
    width: 90%;
    color: var(--colorNonButtonIcons);
}

.conveyerControl-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-self: center;
    flex-direction: row;
    align-items: center;
    margin-top: 3%;
    height: 30%;
    width: 25%;
}

.conveyerIcon {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    padding-left: 0.2vw;
    padding-right: 0.2vw;
    margin-left: 2%;
    margin-right: 2%;
    padding-top: 0.05vw;
    padding-bottom: 0.05vw;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.13vh;
    color: var(--colorNonButtonIcons);
    text-align: right;
}

.conveyerControl {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.05vw;
    padding-bottom: 0.05vw;
    margin-left: 2%;
    margin-right: 2%;
    align-items: center;
    justify-content: center;
    height: 80%;
    color: var(--colorButtonText);
    text-align: right;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
}

.conveyerBottomControl-content {
    border-top: 1px solid var(--colorButtonBackground);
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    background-color: var(--colorElementBodies);
}

.conveyerBottomControl-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 100%;
    text-align: right;
    font-size: 1.07vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
}

.conveyerBottomControl-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    height: 100%;
    color: var(--colorRed);
    text-align: right;
    font-size: 1.42vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.conveyerRotationBackground {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--colorElementBodies);
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.conveyer-idle {
    display: block;
    width: 110%;
    height: 100%;
    transform: translateX(-0.5vw);
    background-image: var(--conveyerIdle);
}

.conveyer-run {
    display: block;
    width: 110%;
    height: 100%;
    transform: translateX(-0.5vw);
    background-image: repeating-linear-gradient(to right, var(--colorMixerRotationDark), var(--colorMixerRotationDark) 0.5vw, var(--colorMixerRotationLight) 0.5vw, var(--colorMixerRotationLight) 1vw);
    animation: mixerRun 1.5s infinite steps(3);
    will-change: transform;
}

.conveyer-run .slow {
    width: 200%;
    background-image: repeating-linear-gradient(to right, #AF5500, #AF5500 0.5vw, var(--colorMixerRotationLight) 0.5vw, var(--colorMixerRotationLight) 1vw);
    animation: mixerRun 2s infinite steps(3);
    will-change: transform;
}

.conveyer-content {
    /*border: 1px solid white; /* for debugging */
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.conveyer-inclined-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 120%;
    margin-right: -18%;
    margin-top: -45%;
    align-items: flex-end;
    align-content: space-between;
    flex-direction: column;
    height: 4vw;
    -webkit-transform: rotate(-36deg);
    -moz-transform: rotate(-36deg);
}

.conveyer-horizontal-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 100%;
    align-items: flex-end;
    align-content: space-between;
    flex-direction: column;
    height: 100%;
    margin-left: 0.25vw;
    /* hack for lovinobana */
}

.conveyer-inclined {
    /*display: flex;
    justify-content: flex-end;*/
    width: 100%;
    height: 0.5vw;
    background-color: var(--colorElementBodies);
    align-self: center;
    z-index: -1;
    border: 1px solid var(--colorButtonBackground);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    /*box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);*/
    box-shadow: var(--shadowsConveyer1);
}

.conveyer-horizontal {
    width: 100%;
    height: 0.9vh;
    background-color: var(--colorElementBodies);
    align-self: center;
    border: 1px solid var(--colorButtonBackground);
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: var(--shadowsConveyer1);
}

.conveyer-scale-bar {
    margin-top: 0.2vh;
    width: 100%;
    height: 0.92vh;
}

.conveyerFlaps {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 19.5vw;
    margin-bottom: 12.8vw;
    margin-top: -1vw;
    width: 12vw;
    height: 1vw;
    align-items: flex-end;
}

.conveyerFlap {
    display: flex;
    justify-content: flex-start;
    background-color: var(--colorRed);
    height: 0.4vw;
    width: 3.7vw;
    box-shadow: var(--shadowFlap);
}

.conveyerFlapOpened {
    display: flex;
    justify-content: flex-start;
    background-color: var(--colorElementBodies);
    height: 0.4vw;
    width: 0.8vw;
    box-shadow: var(--shadowFlap);
}

.conveyerFlapL {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
}

.conveyerFlapR {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
}

.conveyerFlapButtons {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9vw;
    height: 1vw;
    color: var(--colorButtonText);
    text-align: center;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    margin-left: 0.1vw;
    margin-right: 0.1vw;
    padding: 0.1vw 0.1vh;
}

.conveyer-inclined-control-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-self: center;
    flex-direction: row;
    align-items: center;
    margin-top: 3%;
    height: 1.4vw;
    justify-content: center;
}

.conveyer-horizontal-control-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-self: center;
    flex-direction: row;
    align-items: center;
    margin-top: 3%;
    justify-content: center;
}

.conveyer-horizontal-control-content-righttoleft {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-self: center;
    flex-direction: row-reverse;
    align-items: center;
    margin-top: 3%;
    justify-content: center;
}

.conveyerDisplaysContent {
    width: 6vw;
    height: 80%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: var(--colorConveyerDisplayContentBackground);
    padding: 0.1vh 0.1vw;
    box-shadow: inset 0px 0px 0px 1px var(--colorElementBodies);
}

.conveyerFlowDisplaysContent {
    width: 2.6vw;
    height: 80%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: var(--colorConveyerDisplayContentBackground);
    padding: 0.1vh 0.1vw;
    box-shadow: inset 0px 0px 0px 1px var(--colorElementBodies);
    color: var(--colorDisplay);
}

.conveyer-delta {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 0.2vw;
    margin-left: 0.01vw;
    padding-right: 0.1vw;
    text-align: right;
    font-size: 1.07vh;
    text-shadow: 1px 1px var(--colorTextShadow);
}

.conveyerFlowDisplay {
    padding-right: 0.2vw;
    display: flex;
    justify-content: flex-end;
    color: var(--colorDisplay);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    margin-top: -0.4vh;
}

.conveyerDisplay {
    padding-right: 0.2vw;
    width: 3vw;
    display: flex;
    justify-content: flex-end;
    color: var(--colorDisplay);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    margin-top: -0.22vh;
    font-weight: var(--fontWeight);
}

.conveyerRequestDisplay {
    padding-right: 0.2vw;
    width: 3vw;
    display: flex;
    justify-content: flex-end;
    color: var(--colorRequestDisplay);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    margin-top: -0.22vh;
    font-weight: var(--fontWeight);
}

.conveyerBatchStateDisplay {
    padding-left: 0.2vw;
    width: 6.5vw;
    display: flex;
    justify-content: flex-end;
    color: var(--colorBatchSequence);
    font-size: 1.94vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    margin-top: -0.22vh;
}

.conveyerMaterial {
    background-color: var(--colorConveyerMaterial);
    height: 1px;
}

/********************************************************* FUNCTIONS KEY *********************************/

.functionsKey-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 70%;
}

.functionKeys-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    height: 4vh;
    flex-direction: row;
    justify-content: space-around;
    width: 60vw;
}

.functionsKey-button {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 2vw;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    color: var(--colorTopBottomMenuButtonText);
    text-align: right;
    font-size: 1.39vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    background-color: var(--colorButtonBackground);
    border: var(--borderShow) 1px var(--colorBorder);
}

.functionKey-hint {
    display: flex;
    font-size: 1.11vh;
    height: 1.3vh;
}

.functionsKey-button.wider {
    width: 4vw;
}

.semaphore-font {
    font-size: 1.67vh;
}

.semaphore-red {
    color: var(--colorSemaphoreRedDeactive);
}

.semaphore-red-active {
    color: var(--colorRed) !important;
}

.semaphore-green {
    color: var(--colorSemaphoreGreenDeactive);
}

.semaphore-green-active {
    color: var(--colorGreen) !important;
}

.horn-hint {
    display: flex;
    font-size: 0.83vh;
    height: 1vh;
}

.additionalWaterIconArea {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    width: 2vw;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    /*color: var(--colorTopBottomMenuButtonText);*/
    text-align: right;
    font-size: 1.39vh;
}

.additionalWaterDisplay {
    display: flex;
    color: var(--colorAdditionalWater);
    font-size: 1.81vh;
    padding-right: 0.4vw;
}

/********************************************************* FREE PATH *********************************/

.freePaths-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    justify-content: flex-end;
    height: 3vh;
    align-items: center;
}

.content-free-path {
    height: 1.2vw;
    display: flex;
    width: 100%;
    text-shadow: 1px 1px var(--colorTextShadow);
    justify-content: center;
    color: var(--colorElementBodies);
    font-size: 1.94vh;
}

/******************************************************* TOP MENU *********************************************/

.top-menu {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-self: center;
}

.top-menu-button {
    background-color: var(--colorElementBodies);
    border: var(--borderShow) 1px var(--colorBorder);
    color: var(--colorTopBottomMenuButtonText);
    display: flex;
    justify-content: center;
    align-self: center;
    padding: 0.9vh 0.5vw;
    white-space: nowrap;
    height: 1.7vh;
    font-size: 1.67vh;
    margin: 0px 1px;
}

.top-menu-button:hover {
    background-color: var(--colorButtonBackgroundHover);
    cursor: pointer;
}

.top-menu-button:active {
    background-color: black;
    cursor: pointer;
    color: var(--colorVisualButtonTrue)
}

.debug {
    /*border: 1px solid white; /* for debugging */
    position: absolute;
    width: 300px;
    top: 0;
    left: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
}

.modal-content {
    position: fixed;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--colorModalText);
    font-size: 1.67vh;
    z-index: 1001;
}

.modalBasic {
    margin-top: 5vh;
    width: fit-content;
    height: fit-content;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bodyBackgroundColor);
}

.modalHeader {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 3vh;
    background-color: var(--bodyBackgroundColor);
}

.modalTitle {
    margin-left: 0.5vw;
    height: 2vh;
    font-size: 1.94vh;
}

.modalClose {
    align-items: center;
    color: var(--colorRed);
    margin-right: 0.5vw;
    height: 2vh;
    cursor: pointer;
}

.modalBodyMain {
    padding: 0.5vw;
    background-color: var(--colorElementBodies);
    height: 100%;
}

.modalBody {
    /*padding: 0.5vw;*/
    height: 100%;
    max-height: 85vh;
}

.modalBodyOrderDialog {
    background-color: var(--colorElementBodies);
    height: 100%;
}

.modalFooter {
    background-color: var(--colorElementBodies);
    flex-direction: row;
    justify-content: flex-end;
    padding-bottom: 0.5vw;
    padding-right: 0.5vw;
}

.modalButton {
    padding-left: 0.2vw;
    padding-right: 0.2vw;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
    background-color: var(--bodyBackgroundColor);
    cursor: pointer;
}

.modalDispatch {
    width: 90vw;
    height: 85vh;
    /* this can't be bigger than .modalBody's max-height */
}

.modalParam {
    width: 40vw;
}

.modalParamQuick {
    width: 20vw;
}

.modalPlace {
    width: 35vw;
}

.modalAuth {
    width: 80vw;
}

.modalExit {
    margin-top: 5vh;
}

.modalOrder {
    width: 86vw;
    height: 90vh;
    /* this can't be bigger than .modalBody's max-height */
}

.clock {
    color: var(--colorClock);
    font-weight: var(--fontWeight);
    font-size: 2.22vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    height: 3vh;
    position: absolute;
    width: 17vw;
    right: 0;
    bottom: 1vh;
    display: flex;
    justify-content: center;
}

.leftMenuClosed {
    /*border: 1px solid white; /* for debugging */
    position: absolute;
    width: 6.5vw;
    height: 3vh;
    top: 0;
    left: 0;
    color: white;
    /*background-color: rgba(0, 0, 0, .2);*/
    display: flex;
}

.left-menuClosed-button {
    /*border: 1px solid white; /* for debugging */
    background-color: var(--colorElementBodies);
    border: var(--borderShow) 1px var(--colorBorder);
    color: var(--colorTopBottomMenuButtonText);
    display: flex;
    justify-content: space-around;
    align-self: center;
    padding: 0.5vh 0.5vw;
    white-space: nowrap;
    font-size: 1.39vh;
    width: 6.5vw;
    cursor: pointer;
}

.leftMenuOpened {
    /*border: 1px solid white; /* for debugging */
    position: absolute;
    width: 6.5vw;
    height: 100vh;
    top: 0;
    left: 0;
    color: white;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999;
}

.left-menu-button {
    /*border: 1px solid white; /* for debugging */
    background-color: var(--colorElementBodies);
    border: 1px solid var(--bodyBackgroudColor);
    color: var(--colorTopBottomMenuButtonText);
    display: flex;
    justify-content: space-around;
    align-self: center;
    padding: 0.5vh 0.5vw;
    white-space: nowrap;
    font-size: 1.39vh;
    margin: 0.1vw;
    cursor: pointer;
}

.left-menu-icon {
    /*border: 1px solid white; /* for debugging */
    background-color: var(--colorElementBodies);
    /*border: 1px solid #566D7E;*/
    color: var(--colorTopBottomMenuButtonText);
    display: flex;
    justify-content: center;
    align-self: center;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    white-space: nowrap;
    font-size: 1.42vh;
}

.left-menu-title {
    /*border: 1px solid white; /* for debugging */
    color: var(--colorLeftMenuTitle);
    display: flex;
    justify-content: center;
    align-self: center;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    white-space: nowrap;
    font-size: 1.42vh;
}

.left-menu-button:hover {
    background-color: var(--colorLeftMenuHover);
    cursor: pointer;
}

.left-menu-button:active {
    background-color: black;
    cursor: pointer;
    color: var(--colorVisualButtonTrue)
}

.left-menuClose-button:hover {
    background-color: #3c4c58;
    cursor: pointer;
}

.left-menuClose-button:active {
    background-color: black;
    cursor: pointer;
    color: var(--colorVisualButtonTrue)
}


/*********************************************************** FUNNEL *********************************/
.content-funnel {
    width: 100%;
    height: 4.5vh;
    padding-top: 1vw;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
}

.funnel-displays {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 2vh;
    order: 1;
    font-size: 1.81vh;
    padding-top: 0.25vw;
}

.funnel-display-truck-counter {
    display: flex;
    justify-content: center;
    height: 100%;
    text-shadow: 1px 1px var(--colorTextShadow2);
    color: var(--colorBatchSequence);
    width: 33%;
}

.funnel-display-truck-fill {
    display: flex;
    justify-content: center;
    height: 100%;
    text-shadow: 1px 1px var(--colorTextShadow2);
    color: var(--colorFunnelDisplay);
    width: 33%;
}

.funnel-display-countdown {
    display: flex;
    justify-content: center;
    height: 100%;
    text-shadow: 1px 1px var(--colorTextShadow2);
    color: var(--colorFunnelDuration);
    width: 33%;
}

.funnel-flaps {
    display: flex;
    align-self: center;
    align-content: center;
    justify-content: center;
    align-items: flex-end;
    height: 2vh;
    width: 80%;
    order: 0;
}

.funnel-flap-left {
    display: flex;
    height: 60%;
    width: 34%;
}

.funnel-flap-right {
    display: flex;
    height: 60%;
    width: 34%;
    align-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    flex-direction: row-reverse;
}

.funnel-flapL {
    display: flex;
    background-color: var(--colorElementBodies);
    height: 100%;
    width: 15%;
    box-shadow: var(--shadowFlap);
}

.funnel-flapR {
    display: flex;
    background-color: var(--colorElementBodies);
    height: 100%;
    width: 15%;
    box-shadow: var(--shadowFlap);
}

.funnel-flap {
    display: flex;
    background-color: var(--colorElementBodies);
    height: 100%;
    width: 15%;
    box-shadow: var(--shadowFlap);
    border-top-right-radius: 100%;
}

.funnelButtons {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    height: 100%;
    color: var(--colorButtonText);
    text-align: center;
    font-size: 1.39vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    margin-left: 0.1vw;
    margin-right: 0.1vw;
    background-color: var(--colorButtonBackground);
}

/********************************************************* CHUTES *********************************/

/* TODO: unused? */
.chutes-content {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
    /*height: 3vh;*/
    align-items: center;
}

/*.content-chute-half {
    height: 1.2vw;
    display: flex;
    width: 50%;
    justify-content: center;
}*/

.hflex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.sb {
    justify-content: space-between;
}

.sa {
    justify-content: space-around;
}

.vflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reverse {
    animation-direction: reverse;
}

.chuteButtons {
    /*border: 1px solid white; /* for debugging */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorButtonText);
    text-align: center;
    font-size: 1.67vh;
    text-shadow: 1px 1px var(--colorTextShadow);
    margin-left: 0.1vw;
    margin-right: 0.1vw;
    background-color: var(--colorButtonBackground);
    z-index: 999;
    min-width: 1.2vw;
    min-height: 2vh;
}

.content-chute-extend {
    display: flex;
    justify-content: space-between;
}

.chute {
    flex-direction: column;
    height: 3vh;
    width: 3vw;
}

.hidden {
    visibility: hidden;
}

/* TODO: clean this up */
.buttonFontSize {
    /*font-size: 0.9vw;*/
    font-size: 1.6vh;
}

/* TODO: clean this up */
.buttonFontSizeSmaller {
    font-size: 0.8vw;
}

/* TODO: clean this up */
.buttonFontSize13vw {
    font-size: 1.3vw;
}

/* TODO: clean this up */
.buttonFontSize1vw {
    font-size: 1vw;
}

/* TODO: clean this up */
.buttonFontSizeCalc06 {
    /*font-size: calc(0.6vw + 0.6vh);*/
    font-size: 1.67vh;
}

/* TODO: clean this up */
.buttonFontSizeCalc07 {
    /*font-size: calc(0.7vw + 0.7vh);*/
    font-size: 1.94vh;
}

/* TODO: clean this up */
.buttonFontSizeCalc08 {
    font-size: 2.22vh;
}

.chute-top {
    background-color: var(--colorElementBodies);
    box-shadow: var(--shadows);
    z-index: 1;
    height: 50%;
}

.chute-bottom-content {
    display: flex;
    justify-content: space-between;
    height: 50%;
}

.chute-bottom {
    display: flex;
    background-color: var(--colorElementBodies);
    width: 25%;
    height: 50%;
    box-shadow: var(--shadows);
}

.chute-bottom-left {
    justify-content: flex-start;
    border-bottom-left-radius: 0.5vw;
    z-index: 3;
}

.chute-bottom-right {
    justify-content: flex-end;
    border-bottom-right-radius: 0.5vw;
    z-index: 4;
}

/* TODO: why is this here? what does it do? */
.fa-gradient {
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#333333));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*  SPEEED OF FILLING ARROW */
.arrow-signal-open-100 {
    background: var(--colorActiveFillingArrow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-1 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 99%, var(--colorActiveFillingArrow) 100% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-2 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 98%, var(--colorActiveFillingArrow) 99% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-3 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 97%, var(--colorActiveFillingArrow) 98% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-4 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 96%, var(--colorActiveFillingArrow) 97% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-5 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 95%, var(--colorActiveFillingArrow) 96% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-6 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 94%, var(--colorActiveFillingArrow) 95% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-7 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 93%, var(--colorActiveFillingArrow) 94% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-8 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 92%, var(--colorActiveFillingArrow) 93% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-9 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 91%, var(--colorActiveFillingArrow) 92% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-10 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 90%, var(--colorActiveFillingArrow) 91% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-11 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 89%, var(--colorActiveFillingArrow) 90% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-12 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 88%, var(--colorActiveFillingArrow) 89% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-13 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 87%, var(--colorActiveFillingArrow) 88% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-14 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 86%, var(--colorActiveFillingArrow) 87% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-15 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 85%, var(--colorActiveFillingArrow) 86% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-16 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 84%, var(--colorActiveFillingArrow) 85% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-17 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 83%, var(--colorActiveFillingArrow) 84% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-18 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 82%, var(--colorActiveFillingArrow) 83% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-19 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 81%, var(--colorActiveFillingArrow) 82% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-20 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 80%, var(--colorActiveFillingArrow) 81% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-21 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 79%, var(--colorActiveFillingArrow) 80% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-22 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 78%, var(--colorActiveFillingArrow) 79% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-23 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 77%, var(--colorActiveFillingArrow) 78% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-24 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 76%, var(--colorActiveFillingArrow) 77% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-25 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 75%, var(--colorActiveFillingArrow) 76% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-26 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 74%, var(--colorActiveFillingArrow) 75% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-27 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 73%, var(--colorActiveFillingArrow) 74% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-28 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 72%, var(--colorActiveFillingArrow) 73% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-29 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 71%, var(--colorActiveFillingArrow) 72% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-30 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 70%, var(--colorActiveFillingArrow) 71% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-31 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 69%, var(--colorActiveFillingArrow) 70% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-32 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 68%, var(--colorActiveFillingArrow) 69% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-33 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 67%, var(--colorActiveFillingArrow) 68% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-34 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 66%, var(--colorActiveFillingArrow) 67% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-35 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 65%, var(--colorActiveFillingArrow) 66% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-36 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 64%, var(--colorActiveFillingArrow) 65% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-37 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 63%, var(--colorActiveFillingArrow) 64% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-38 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 62%, var(--colorActiveFillingArrow) 63% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-39 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 61%, var(--colorActiveFillingArrow) 62% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-40 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 60%, var(--colorActiveFillingArrow) 61% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-41 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 59%, var(--colorActiveFillingArrow) 60% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-42 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 58%, var(--colorActiveFillingArrow) 59% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-43 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 57%, var(--colorActiveFillingArrow) 58% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-44 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 56%, var(--colorActiveFillingArrow) 57% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-45 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 55%, var(--colorActiveFillingArrow) 56% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-46 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 54%, var(--colorActiveFillingArrow) 55% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-47 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 53%, var(--colorActiveFillingArrow) 54% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-48 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 52%, var(--colorActiveFillingArrow) 53% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-49 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 51%, var(--colorActiveFillingArrow) 52% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-50 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 50%, var(--colorActiveFillingArrow) 51% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-51 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 49%, var(--colorActiveFillingArrow) 50% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-52 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 48%, var(--colorActiveFillingArrow) 49% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-53 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 47%, var(--colorActiveFillingArrow) 48% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-54 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 46%, var(--colorActiveFillingArrow) 47% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-55 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 45%, var(--colorActiveFillingArrow) 46% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-56 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 44%, var(--colorActiveFillingArrow) 45% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-57 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 43%, var(--colorActiveFillingArrow) 44% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-58 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 42%, var(--colorActiveFillingArrow) 43% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-59 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 41%, var(--colorActiveFillingArrow) 42% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-60 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 40%, var(--colorActiveFillingArrow) 41% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-61 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 39%, var(--colorActiveFillingArrow) 40% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-62 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 38%, var(--colorActiveFillingArrow) 39% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-63 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 37%, var(--colorActiveFillingArrow) 38% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-64 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 36%, var(--colorActiveFillingArrow) 37% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-65 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 35%, var(--colorActiveFillingArrow) 36% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-66 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 34%, var(--colorActiveFillingArrow) 35% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-67 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 33%, var(--colorActiveFillingArrow) 34% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-68 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 32%, var(--colorActiveFillingArrow) 33% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-69 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 31%, var(--colorActiveFillingArrow) 32% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-70 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 30%, var(--colorActiveFillingArrow) 31% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-71 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 29%, var(--colorActiveFillingArrow) 30% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-72 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 28%, var(--colorActiveFillingArrow) 29% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-73 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 27%, var(--colorActiveFillingArrow) 28% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-74 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 26%, var(--colorActiveFillingArrow) 27% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-75 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 25%, var(--colorActiveFillingArrow) 26% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-76 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 24%, var(--colorActiveFillingArrow) 25% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-77 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 23%, var(--colorActiveFillingArrow) 24% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-78 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 22%, var(--colorActiveFillingArrow) 23% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-79 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 21%, var(--colorActiveFillingArrow) 22% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-80 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 20%, var(--colorActiveFillingArrow) 21% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-81 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 19%, var(--colorActiveFillingArrow) 20% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-82 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 18%, var(--colorActiveFillingArrow) 19% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-83 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 17%, var(--colorActiveFillingArrow) 18% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-84 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 16%, var(--colorActiveFillingArrow) 17% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-85 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 15%, var(--colorActiveFillingArrow) 16% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-86 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 14%, var(--colorActiveFillingArrow) 15% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-87 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 13%, var(--colorActiveFillingArrow) 14% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-88 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 12%, var(--colorActiveFillingArrow) 13% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-89 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 11%, var(--colorActiveFillingArrow) 12% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-90 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 10%, var(--colorActiveFillingArrow) 11% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-91 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 9%, var(--colorActiveFillingArrow) 10% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-92 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 8%, var(--colorActiveFillingArrow) 9% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-93 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 7%, var(--colorActiveFillingArrow) 8% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-94 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 6%, var(--colorActiveFillingArrow) 7% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-95 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 5%, var(--colorActiveFillingArrow) 6% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-96 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 4%, var(--colorActiveFillingArrow) 5% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-97 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 3%, var(--colorActiveFillingArrow) 4% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-98 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 2%, var(--colorActiveFillingArrow) 3% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-99 {
    background: linear-gradient(var(--colorArrowSpeedDark) 0% 1%, var(--colorActiveFillingArrow) 2% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*  SPEEED OF FILLING ARROW WARNING */
.arrow-signal-open-warning-100 {
    background: var(--colorArrowSpeedLightWarning);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-1 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 99%, var(--colorArrowSpeedLightWarning) 100% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-2 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 98%, var(--colorArrowSpeedLightWarning) 99% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-3 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 97%, var(--colorArrowSpeedLightWarning) 98% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-4 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 96%, var(--colorArrowSpeedLightWarning) 97% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-5 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 95%, var(--colorArrowSpeedLightWarning) 96% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-6 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 94%, var(--colorArrowSpeedLightWarning) 95% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-7 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 93%, var(--colorArrowSpeedLightWarning) 94% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-8 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 92%, var(--colorArrowSpeedLightWarning) 93% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-9 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 91%, var(--colorArrowSpeedLightWarning) 92% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-10 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 90%, var(--colorArrowSpeedLightWarning) 91% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-11 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 89%, var(--colorArrowSpeedLightWarning) 90% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-12 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 88%, var(--colorArrowSpeedLightWarning) 89% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-13 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 87%, var(--colorArrowSpeedLightWarning) 88% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-14 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 86%, var(--colorArrowSpeedLightWarning) 87% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-15 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 85%, var(--colorArrowSpeedLightWarning) 86% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-16 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 84%, var(--colorArrowSpeedLightWarning) 85% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-17 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 83%, var(--colorArrowSpeedLightWarning) 84% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-18 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 82%, var(--colorArrowSpeedLightWarning) 83% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-19 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 81%, var(--colorArrowSpeedLightWarning) 82% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-20 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 80%, var(--colorArrowSpeedLightWarning) 81% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-21 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 79%, var(--colorArrowSpeedLightWarning) 80% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-22 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 78%, var(--colorArrowSpeedLightWarning) 79% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-23 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 77%, var(--colorArrowSpeedLightWarning) 78% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-24 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 76%, var(--colorArrowSpeedLightWarning) 77% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-25 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 75%, var(--colorArrowSpeedLightWarning) 76% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-26 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 74%, var(--colorArrowSpeedLightWarning) 75% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-27 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 73%, var(--colorArrowSpeedLightWarning) 74% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-28 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 72%, var(--colorArrowSpeedLightWarning) 73% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-29 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 71%, var(--colorArrowSpeedLightWarning) 72% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-30 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 70%, var(--colorArrowSpeedLightWarning) 71% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-31 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 69%, var(--colorArrowSpeedLightWarning) 70% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-32 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 68%, var(--colorArrowSpeedLightWarning) 69% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-33 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 67%, var(--colorArrowSpeedLightWarning) 68% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-34 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 66%, var(--colorArrowSpeedLightWarning) 67% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-35 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 65%, var(--colorArrowSpeedLightWarning) 66% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-36 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 64%, var(--colorArrowSpeedLightWarning) 65% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-37 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 63%, var(--colorArrowSpeedLightWarning) 64% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-38 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 62%, var(--colorArrowSpeedLightWarning) 63% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-39 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 61%, var(--colorArrowSpeedLightWarning) 62% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-40 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 60%, var(--colorArrowSpeedLightWarning) 61% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-41 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 59%, var(--colorArrowSpeedLightWarning) 60% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-42 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 58%, var(--colorArrowSpeedLightWarning) 59% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-43 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 57%, var(--colorArrowSpeedLightWarning) 58% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-44 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 56%, var(--colorArrowSpeedLightWarning) 57% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-45 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 55%, var(--colorArrowSpeedLightWarning) 56% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-46 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 54%, var(--colorArrowSpeedLightWarning) 55% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-47 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 53%, var(--colorArrowSpeedLightWarning) 54% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-48 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 52%, var(--colorArrowSpeedLightWarning) 53% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-49 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 51%, var(--colorArrowSpeedLightWarning) 52% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-50 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 50%, var(--colorArrowSpeedLightWarning) 51% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-51 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 49%, var(--colorArrowSpeedLightWarning) 50% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-52 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 48%, var(--colorArrowSpeedLightWarning) 49% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-53 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 47%, var(--colorArrowSpeedLightWarning) 48% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-54 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 46%, var(--colorArrowSpeedLightWarning) 47% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-55 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 45%, var(--colorArrowSpeedLightWarning) 46% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-56 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 44%, var(--colorArrowSpeedLightWarning) 45% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-57 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 43%, var(--colorArrowSpeedLightWarning) 44% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-58 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 42%, var(--colorArrowSpeedLightWarning) 43% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-59 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 41%, var(--colorArrowSpeedLightWarning) 42% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-60 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 40%, var(--colorArrowSpeedLightWarning) 41% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-61 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 39%, var(--colorArrowSpeedLightWarning) 40% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-62 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 38%, var(--colorArrowSpeedLightWarning) 39% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-63 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 37%, var(--colorArrowSpeedLightWarning) 38% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-64 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 36%, var(--colorArrowSpeedLightWarning) 37% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-65 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 35%, var(--colorArrowSpeedLightWarning) 36% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-66 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 34%, var(--colorArrowSpeedLightWarning) 35% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-67 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 33%, var(--colorArrowSpeedLightWarning) 34% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-68 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 32%, var(--colorArrowSpeedLightWarning) 33% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-69 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 31%, var(--colorArrowSpeedLightWarning) 32% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-70 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 30%, var(--colorArrowSpeedLightWarning) 31% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-71 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 29%, var(--colorArrowSpeedLightWarning) 30% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-72 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 28%, var(--colorArrowSpeedLightWarning) 29% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-73 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 27%, var(--colorArrowSpeedLightWarning) 28% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-74 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 26%, var(--colorArrowSpeedLightWarning) 27% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-75 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 25%, var(--colorArrowSpeedLightWarning) 26% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-76 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 24%, var(--colorArrowSpeedLightWarning) 25% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-77 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 23%, var(--colorArrowSpeedLightWarning) 24% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-78 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 22%, var(--colorArrowSpeedLightWarning) 23% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-79 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 21%, var(--colorArrowSpeedLightWarning) 22% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-80 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 20%, var(--colorArrowSpeedLightWarning) 21% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-81 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 19%, var(--colorArrowSpeedLightWarning) 20% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-82 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 18%, var(--colorArrowSpeedLightWarning) 19% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-83 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 17%, var(--colorArrowSpeedLightWarning) 18% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-84 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 16%, var(--colorArrowSpeedLightWarning) 17% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-85 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 15%, var(--colorArrowSpeedLightWarning) 16% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-86 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 14%, var(--colorArrowSpeedLightWarning) 15% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-87 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 13%, var(--colorArrowSpeedLightWarning) 14% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-88 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 12%, var(--colorArrowSpeedLightWarning) 13% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-89 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 11%, var(--colorArrowSpeedLightWarning) 12% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-90 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 10%, var(--colorArrowSpeedLightWarning) 11% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-91 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 9%, var(--colorArrowSpeedLightWarning) 10% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-92 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 8%, var(--colorArrowSpeedLightWarning) 9% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-93 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 7%, var(--colorArrowSpeedLightWarning) 8% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-94 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 6%, var(--colorArrowSpeedLightWarning) 7% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-95 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 5%, var(--colorArrowSpeedLightWarning) 6% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-96 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 4%, var(--colorArrowSpeedLightWarning) 5% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-97 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 3%, var(--colorArrowSpeedLightWarning) 4% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-98 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 2%, var(--colorArrowSpeedLightWarning) 3% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.arrow-signal-open-warning-99 {
    background: linear-gradient(var(--colorArrowSpeedDarkWarning) 0% 1%, var(--colorArrowSpeedLightWarning) 2% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/****************************** new messages *******************************************/

.message {
    margin-bottom: 0.1vw;
    display: flex;
    justify-content: space-between;
    border: solid 1px #ddd;
    border-radius: 2px;
    width: 17.5vw;
    color: black;
    flex-direction: column;
    opacity: 0.9;
}

.message.inactive {
    opacity: 0.6;
}

.message.error {
    color: white;
    background: rgba(217, 92, 92, 0.95);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

.message.warning {
    background: rgba(252, 248, 215, 0.95);
}

.message.success {
    color: white;
    background: rgba(91, 189, 114, 0.95);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

.message.info {
    color: white;
    background: var(--colorDarkGreen);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

.message.undefined {
    background: #bbbb55;
}

.message-text {
    display: flex;
    justify-content: flex-start;
    font-size: 1.81vh;
    padding: 0.2vw;
}

.message-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.2vw;
    margin-bottom: 0.2vw;
    margin-right: 0.5vw;
    font-size: 1.94vh;
    /* TODO: this gap doesn't seem to be working in webengine - investigate and fix (enable gap and remove all the margin shit) */
    /*gap: 1wv;*/
}

.message-button {
    font-size: 2.08vh;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    display: flex;
    margin-left: 0.5vw;
    /*margin-right: 0.5vw;*/
    margin-top: 0.5vw;
    color: #adb6bd;
    text-shadow: 1px 1px var(--colorTextShadow);
    justify-content: space-between;
    align-items: center;
    background-color: #253443;
    border: solid 1px #000000;
}

.message-button:hover {
    background-color: #3c4c58;
    cursor: pointer;
}

.message-button.ready-for-enter {
    background-color: black;
    cursor: pointer;
    /*color:  #f1c40f*/
    color: #aaff44
}

.message-button.ready-for-esc {
    background-color: black;
    cursor: pointer;
    color: #ff5544
}

.message-button.ready-for-num {
    background-color: black;
    cursor: pointer;
    color:  #f1e41f
}

.message-button.selectedAnswer {
    background-color: #555555 !important;
}


/****************************** Continuous Concrete Settings ***************************/
.topContinuousSettingsContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.3vw;
    color: var(--colorMoistureUserDefined);  /* TODO: moisture? */
    text-shadow: 1px 1px var(--colorTextShadow);
}

.topContinuousSettingsContentLine {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
}

.topContinuousSettingsContentFlags {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.topContinuousSettingsContentFlagsButton {
    /*border:1px solid #e3e1e1;*/
    display: flex;
    font-size: 1.6vh;
    align-items: center;
    justify-content: space-around;
    padding: 0.3vh 0.4vw;
    background-color: var(--colorButtonBackground);
    cursor: pointer;
    color: var(--bodyBackgroundColor);
    width: 3vw;
}

.topContinuousSettingsContentButton {
    /*border:1px solid #e3e1e1;*/
    display: flex;
    font-size: 1.6vh;
    align-items: center;
    justify-content: center;
    padding: 0.3vh 0.4vw;
    background-color: var(--colorButtonBackground);
    cursor: pointer;
    color: var(--bodyBackgroundColor);
}

.topContinuousSettingsContentText {
    padding-right: 0.5vw;
    font-size: 1.6vh;
}

.topContinuousSettingsContentInput {
    display: flex;
    width: 2vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    font-size: 1.6vh;
    font-weight: bold;
    text-align: right;
    justify-content: center;
    align-items: center;
}

/****************************** Batch mode settings ***************************/
.topBatchModeSettingsContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 1vw;
}

.topBatchModeSettingsContentLine {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.topBatchModeSettingsContentText {
    padding-right: 0.5vw;
    font-size: 2.22vh;
    color: #bf1604;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}


/*************************** reservoir ********************************/
.reservoir {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 11vh;
    /*background-color: green;*/
}

/************************* consistency gauge ********************/
.gauge {
    position: relative;
    border-radius: 50%/100% 100% 0 0;
    background-color: var(--colorConsistency);
    overflow: hidden;
    color: var(--colorConsistency);
}

.gauge:before{
    content: "";
    display: block;
    padding-top: 50%;   /* ratio of 2:1*/
}

.gauge .gauge-mask {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    top: 10%;
    background-color: var(--colorElementBodies);
    border-radius: 50%/100% 100% 0 0;
}

.gauge .gauge-percentage {
    position:  absolute;
    top: -1px;
    left: -1px;
    bottom: 0;
    right: -1px;
    background-color: var(--bodyBackgroundColor);
    transform-origin: bottom center;
    transition-duration: 600;
}


.gauge .gauge-value {
    position:absolute; bottom:-15%; left:0;
    width:100%;
    text-align: center;
    font-size: 2.84vh;
}

.gaugeContent {
    padding-top: 2vh;
    display: flex;
    flex-direction: column;
}

.gauge_target {
    position:absolute; bottom:50%; left:0;
    width:100%;
    text-align: center;
    font-size: 1.5vh;
    color: var(--colorConsistency);
}

.gauge_hint {
    padding-top: 0.4vh;
    display: flex;
    justify-content: center;
    z-index: 99;
    font-size: 1.2vh;
}

.gauge_hint_item1 {
    display: flex;
    justify-content: flex-start;
    width: 33%;
    color: var(--bodyBackgroundColor);
}

.gauge_hint_item2 {
    display: flex;
    justify-content: center;
    width: 33%;
    color: var(--colorConsistency);
}

.gauge_hint_item3 {
    display: flex;
    justify-content: flex-end;
    width: 33%;
    color: var(--bodyBackgroundColor);
}
