/*@import url(http://fonts.googleapis.com/css?family=Play&subset=latin,latin-ext);*/

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

/*
:root {
	--bodyBackgroundColor: #566D7E;
	--f10bodyBackgroudColor: #456a8c;
	--falseBodyBackgroudColor: #330000;
	--colorRed: #cd6155;
	--colorSemaphoreRedDeactive: #522622;
	--colorGreen: #27ae60;
	--colorSemaphoreGreenDeactive: #135730;
	--colorDarkGreen: #1f8b4c;
	--colorAggregate: #b9770e;
	--colorAdmixture: #884ea0;
	--colorCement: #7f8c8d;
	--colorWater: #2471a3;

	--colorWeightAggregate: #815309;
	--colorWeightAdmixture: #5f3670;
	--colorWeightCement: #586262;
	--colorWeightWater: #194f72;
	--colorWeightProgressAggregate: #b9770e;
	--colorWeightProgressAdmixture: #884ea0;
	--colorWeightProgressCement: #7f8c8d;
	--colorWeightProgressWater: #2471a3;
	--colorWeightProgress: #145932;

	--colorError: brown;
	--colorDisplay: #ffff00;
	--colorNumber: #00ff00;
	--colorMoisture: #00EFFF;
	--colorMoistureUserDefined: #bfc5c6;
	--colorVisualButtonTrue: #f1c40f;
	--colorButtonBackground: #253443;
	--colorElementBodies: #2c3e50;
	--colorCanControlActiveNeedsCTRL: #989900;
	--colorCanControlActive: #8C8C8C;
	--colorArrowSpeedDark: #3C2705;
	--colorArrowSpeedDarkWarning: #551111;
	--colorArrowSpeedLightWarning: #bb3333;

	--colorMixerRotationLight: #2c3e50;
	--colorMixerRotationDark: #196F3E;
	--colorTopBottomMenuButtonText: #8898a4;
	--colorBatchSequence: #935fa9;
	--colorDuration: #85c1e9;
}
*/

BODY {
	display: flex;
	flex-direction: column;
	margin: 0vw;
	background-color: var(--falseBodyBackgroudColor);
	/*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-touch-callout: none;
	-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 */
}

div.node {
	display: table;
	float: left;
	/*clear: left;*/
	width: 300px;
	border-style: solid;
	border-width: 1px;
	/*position: absolute;*/
	/*width: fit-content;
	height: fit-content;*/
	max-width: 300px;
}

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

.pcNotActive {
	background-color: #6A5169 !important;
}

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

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

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

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

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

.isButton {
	cursor: pointer;
}

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

.isButton:active {
	background-color: black !important;
}

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

.middle {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 86vh;
	width: 100vw;
}

.left {
	/*border: 1px solid red; /* for debugging */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 86vh;
	width: 74vw;
}

.right {
	/*border: 1px solid blue; /* for debugging */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 86vh;
	width: 26vw;
	align-items: flex-end;
}

.topLeft {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	justify-content: flex-end;
	height: 32vh;
	width: 74vw;
}

.topRight {
	/*border: 1px solid #ccc; /* for debugging */
	display: flex;
	justify-content: flex-start;
	height: 47vh;
	width: 26vw;
}

.topRightMobileAndHopper {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 47vh;
}

.bottomLeft {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	justify-content: flex-end;
	height: 46vh;
	width: 74vw;	
}

.middleLeft {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	flex-direction: column;
	height: 43vh;
	width: 74vw;
}

.middleMiddle {
	border: 1px solid blue; /* for debugging */
	display: flex;
	justify-content: flex-end;
	height: 43vh;
	width: 11vw;
}

.middleRight {
	/*border: 1px solid blue; /* for debugging */
	display: flex;
	flex-direction: column;
	z-index: 999;
	/*background-color: pink;*/
	height: 37vh;
	width: 23vw;
	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: 8vw, 8vh;
}

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

.content-aggregate {
	/* margin-top:20px; */
	margin-left:20px;
	float:left;
}

.content-cement {
	/* margin-top:20px; */
	margin-left:40px;
	float:left;
}

.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;
}

.content-conveyers {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	align-self: flex-end;
	justify-content:flex-end;
	flex-direction:row;

}

.content-conveyer {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	align-self: flex-end;
	justify-content:flex-end;
	flex-direction:column;

}

.content-weighingMixing {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	align-self: flex-end;
	float:left;
}

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

.silo-top  {
	background-color:  var(--colorElementBodies)  ;
	display:flex;
	align-items:center;
	justify-content:center;

    border:none 1px #000000;
    border-top-left-radius:30%;
    border-top-right-radius:30%;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
	/*box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.5vw 0.4vw 5px 0px rgba(0,0,0,0.35);

}

.silo-body  {
	background-color:  var(--colorElementBodies);
	display:flex;
	flex-direction:row;
	cursor: pointer;
	/*
	align-items:center;
	justify-content:flex-end;
	*/

	/*box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.5vw 0.4vw 5px 0px rgba(0,0,0,0.35);

}

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

.silo-level-box-red {
	border: 1px solid #1C2833; /* for debugging */
	margin-left:0.4vw;
	width:0.25vw;
	height:90%;
	background-color:#731d1d;
}

.silo-level-box-green {
	border: 1px solid #1C2833; /* for debugging */
	margin-left:0.4vw;
	width:0.25vw;
	height:90%;
	background-color:#006600;
}

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

.silo-maximum {
	display:flex;
	border: 1px solid #1C2833; /* for debugging */
	width:50%;
	justify-content:flex-end;
	align-self:center;
	height:0.25vw;
	background-color:#006600;	
}

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

.silo-minimum {
	border: 1px solid #1C2833; /* for debugging */
	width:50%;
	justify-content:flex-end;
	align-self:center;
	height:0.25vw;
	background-color:#006600;	
}

.silo-display-content {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	padding-bottom:0.5vw;
	/* padding-right:0.4vw; */
	width:100%;
}

.silo-bottom  {
	background-color:  var(--colorElementBodies)  ;
	display:flex;
	align-items:center;

	justify-content:center;
	/*width:100px;
	height:30px;*/


    border:none 1px #000000;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-left-radius:20%;
    border-bottom-right-radius:20%;
	/*box-shadow: 10px 8px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.5vw 0.4vw 5px 0px rgba(0,0,0,0.35);

}

.siloControlActive {
	color:  var(--colorVisualButtonTrue) ;
}

.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;
}

.silo-content .silo-sensor {
	background-color: var(--colorElementBodies);
	margin-top:5%;
	margin-right: auto;
	margin-left: auto;
	width:50%;
	height:5px;
	/*box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.3vw 0.3vw 5px 0px rgba(0,0,0,0.35);
}

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

.silo-content .orf-position {
	background-color: var(--colorElementBodies);
	margin-bottom:0.2vw;
	margin-right: auto;
	margin-left: auto;
	width:50%;
	height:5px;
	/*box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.3vw 0.3vw 5px 0px rgba(0,0,0,0.35);
}

.orf-position-inposition {
	background-color: var(--colorVisualButtonTrue) !important;
}

.silo-content .silo-arrow {
    display:flex;
    justify-content:space-around;
    align-items:center;
    color:var(--colorElementBodies);
    /*text-shadow: 0.1vw 0.1vw 0px rgba(0,0,0,0.35);*/
    font-size: 2vw;
	/*height:40px;*/
}

.silo-arrow:hover {
	cursor: pointer;
}

.silo-signal-close {

}

.silo-signal-canControl {
    color:var(--colorCanControlActive) !important;
}

.silo-signal-open {
    color:var(--colorAggregate) !important;
	/*
    background: -webkit-linear-gradient(var(--colorElementBodies) 0% 50%, var(--colorAggregate) 51% 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	*/
}

.silo-signal-openFast {
    color:var(--colorAggregate) !important;
    text-shadow: 0.5vw 0.1vw 0px #764C09;
}

.silo-vranger {
	width:2vw;
	transform: rotate(270deg);
	-moz-transform: rotate(270deg); /*do same for other browsers if required*/	
}

/******************* RANGER ********************************/
input[type=range] {
  background-color:var(--bodyBackgroundColor);
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 0.2vw;
	cursor: pointer;
	animate: 0.1s;
	border-radius: 0px;
	border: 1px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
	border: 1px solid #000000;
	height: 0.8vw;
	width: 0.2vw;
	color: white;
	margin-top: -0.35vw;
	background-color: white;
	border-radius: 0px;
	cursor: pointer;
	-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #16334D;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 0.1vw;
	cursor: pointer;
	animate: 0.1s;
	border-radius: 0px;
	border: 1px solid #000000;
}
input[type=range]::-moz-range-thumb {
	border: 1px solid #000000;
	height: 0.8vw;
	width: 0.1vw;
	border-radius: 0px;
	cursor: pointer;
	-webkit-appearance: none;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  /*background: transparent;
  border-color: transparent;
  color: transparent;*/
}
input[type=range]::-ms-fill-lower {
  background: #16334D;
  border: 1px solid #000000;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #16334D;
  border: 1px solid #000000;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 5px;
  border-radius: 0px;
  /*background: #FFFFFF;*/
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #16334D;
}
input[type=range]:focus::-ms-fill-upper {
  background: #16334D;
}

/******************* RANGER END ****************************/

.orf-content {
	display: flex;
	justify-content:center;
	height:1.5vw;
	margin-left: 5px;
	align-items: flex-start;
}

.orf-body {
	display: flex;
	width: 3vw;
	justify-content: center;
	margin-left: 1vw;
}

.orf-arrow {
	display: flex;
	justify-content: center;
	width: 1.5vw;
	font-size: calc(1vw + 1vh);
	color:  var(--colorElementBodies);
	margin-left: 1vw;
	margin-right: 1vw;
}

.orf-arrow.active {
	color:  var(--colorVisualButtonTrue) !important;
	
}

.cementSpacer {
	height: 3vw;
}


.number{
	display:flex;
	justify-content:center;
    width: 95%;
	margin-top:0.2%;
	color: var(--colorNumber);
	text-align: center;
	font-size:1.1vw;
	text-shadow: 2px 2px black;
}

.nameShort{
	display:flex;
	justify-content:center;
    width: 95%;
	/*height: 50px;*/
	/*margin-top:0.2%;*/
	color: white;
	/*position:absolute;*/
	text-align: center;
	/*font-weight: bold;*/
	font-size: calc(0.8vw + 0.8vh);
	text-shadow: 1px 1px black;
	overflow:hidden;
	white-space: nowrap;
	cursor: help;
}

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

.silo-temperature{
	display:flex;
	justify-content:flex-end;
	align-self:flex-end;
	align-items:flex-end;
	color: var(--colorWater);
	text-align: right;
	font-size:0.8vw;
	text-shadow: 1px 1px black;
}
.warm {
	color: var(--colorRed) !important;
}

.silo-requestDisplay{
	display:flex;
	justify-content:flex-end;
	align-self:flex-end;
	align-items:flex-end;
	color: white;
	padding-right:0.2vw;
	text-align: right;
	font-size:1vw;
	text-shadow: 1px 1px black;
}

.silo-display{
	display:flex;
	justify-content:flex-end;
	align-self:flex-end;
	align-items:flex-end;
	color: var(--colorDisplay);
	text-align: right;
	font-size:0.8vw;
	text-shadow: 1px 1px black;
}

.silo-control-content {
	margin-top:0.1vw;
	display:flex;
	justify-content:space-around;
	flex-direction:row;
	/*width:100%;*/
	color:var(--colorElementBodies);
	/*cursor:pointer;*/
}

.siloControl {
	color:  #566D7E ;
	font-size:0.9vw;
	padding:0.1vw;
	text-shadow: 1px 1px black;
	background-color:var(--colorButtonBackground);
	cursor: pointer;
}

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

.siloControl.canControl {
	background-color: var(--colorCanControlActive);
}

.siloControl:active {
	background-color: black;
}

.siloControlActive {
	color:  var(--colorVisualButtonTrue) ;
}

/************************************************** USER MOD *************************************************/
.content-userMode.userModeMobileActive {
	color: #0e4a27;
}

.content-userMode.userModeMobileNotActive {
	color: #64221b;
}

.content-userMode {
	width :12vw;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	font-size: calc(6vw + 6vh);
}


/************************************************** HOPPER ***************************************************/
.content-hopper {
	width :12vw;
	display: flex;
	justify-content: flex-end;
	align-self: flex-end;
	flex-direction: column;
}

.hopper {
	width :12vw;
	height :6vh;
	background-color:  var(--colorElementBodies);
	
    border:none 1px #000000;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0.5vw;
    border-bottom-right-radius:0.5vw;
	/*box-shadow: 10px 8px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.5vw 0.4vw 5px 0px rgba(0,0,0,0.35);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-shadow: 1px 1px black;
	font-size: calc(0.9vw + 0.9vh);
}

.hopperSensors {
	width: 12vw;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-self: center;
	color: var(--colorElementBodies);
	font-size: calc(0.9vw + 0.9vh);
}

.hopperVibrators {
	width: 12vw;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-self: center;
	color: var(--colorElementBodies);
	font-size: calc(0.9vw + 0.9vh);
}

.hopperControl {
	display: flex;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	padding-top: 0.05vw;
	padding-bottom: 0.05vw;
	align-items: center;
	justify-content: center;
	height: 80%;
	color: var(--bodyBackgroundColor);
	text-align: right;
	text-shadow: 1px 1px black;
	background-color: var(--colorButtonBackground);
}

.isLockButton {
	font-size: calc(0.6vh + 0.6vw);
	width: 2vw;
	height: 2vh;
}


/************************************************** BOXES *****************************************************/
.content-boxes {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.box  {
	display:flex;
	flex-direction: column;
	padding-left:0.3vw;
}

.boxTop {
	background-color:  var(--colorElementBodies);
    border:none 1px #000000;
	display: flex;
	justify-content: center;
	width:100%;
	flex-direction: column;
	padding-bottom: 0.25vw;
}

.boxTop-active {
	background-color: #374a5e !important;
    border:none 1px #000000;
	display: flex;
	justify-content: center;
	width:100%;
	flex-direction: column;
	padding-bottom: 0.25vw;
}

.boxNumber {
	display: flex;
	justify-content: center;
	padding-left: 0.25vw;
	padding-right: 0.25vw;
	margin-top: 0.1vw;
	display: flex;
	color: var(--colorNumber);
	text-align: center;
	font-size: calc(0.7vw + 0.7vh);
	text-shadow: 1px 1px black;
}

.boxName {
	display: flex;
	justify-content: center;
	padding-left: 0.25vw;
	padding-right: 0.25vw;	
	/* margin-top: 0.1vw; */
	display: flex;
	color: white;
	font-size: calc(0.7vw + 0.7vh);
	text-shadow: 1px 1px black;
}

.boxFlaps {
	display: flex;
	flex-direction: row;
}

.boxFlap-content {
	display: flex;
	flex-direction: column;
}

.boxFlap  {
	width :3.45vw;
	height :1.1vw;
	background-color:  var(--colorWeightAggregate);
	
    border:none 1px #000000;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0.5vw;
    border-bottom-right-radius:0.5vw;
	/*box-shadow: 10px 8px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.5vw 0.4vw 5px 0px rgba(0,0,0,0.35);
}

.boxFlap-active  {
	width :3.45vw;
	height :1.1vw;
	background-color: var(--colorAggregate);
    border:none 1px #000000;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    border-bottom-left-radius:0.5vw;
    border-bottom-right-radius:0.5vw;
	/*box-shadow: 10px 8px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.5vw 0.4vw 5px 0px rgba(0,0,0,0.35);
}

.boxFlapNumber {
	display: flex;
	justify-content: center;
	padding-left: 0.25vw;
	padding-right: 0.25vw;
	display: flex;
	color: white;
	text-align: center;
	font-size: calc(0.6vw + 0.6vh);
	text-shadow: 1px 1px black;
}

.boxFlapSensor {
	display: flex;
	justify-content: center;
	background-color: var(--colorElementBodies);	
	height:0.25vw;
	margin-top: 0.2vw;
	width: 60%;
	align-self: center;
	/*box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.35);*/
	box-shadow: 0.3vw 0.3vw 5px 0px rgba(0,0,0,0.35);
}

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

.boxFlapArrow {
    display:flex;
    justify-content:space-around;
    align-items:center;
    color:var(--colorElementBodies);
    /*text-shadow: 0.1vw 0.1vw 0px rgba(0,0,0,0.35);*/
    font-size: calc(1.6vw + 1.6vh);
	cursor: pointer;
}

.boxFlapArrow.active {
	/* color:var(--colorElementBodies); */
	color:  var(--colorVisualButtonTrue) !important;
}


.boxSensor {
	display: flex;
	justify-content: flex-end;
	color: var(--colorElementBodies);
	font-size: calc(0.9vw + 0.9vh);
}

/************************************************** TOP CONVEYER **********************************************/
.topConveyer-content {
	/*border: 1px solid #fff; /* for debugging */
	display: flex;
	justify-content: flex-end;
	width: 100%;
	height: 6vh;
}

.topConveyer {
	width: 50%;
	height: 1vh;
	background-color: var(--colorElementBodies);
	align-self: flex-start;
	border: 1px solid var(--colorButtonBackground);
	border-top-left-radius: 0.5vw;
	border-top-right-radius: 0.5vw;
	border-bottom-left-radius: 0.5vw;
	border-bottom-right-radius: 0.5vw;
	box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);
}

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

.topConveyer-idle {
	display: block;
	width: 200%;
	height: 80%;
	transform: translateX(-0.5vw);
	background-image: repeating-linear-gradient(to right, black, black 0.5vw, var(--colorElementBodies) 0.5vw, var(--colorElementBodies) 1vw);
}

.topConveyer-run {
	display: block;
	width: 200%;
	height: 80%;
	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: conveyerRun 1.5s infinite linear;
	will-change: transform;
	/*animation-direction: reverse;*/
}

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

.topConveyer-control-content {
	/*border: 1px solid white; /* for debugging */
	width: 100%;
	height: 3.2vh;
	display: flex;
	align-self: center;
	flex-direction: row;
	align-items: center;
	margin-top: 3%;
	justify-content: center;
}

.topConveyerArrow {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	padding-top: 0.05vw;
	padding-bottom: 0.05vw;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: right;
	color: var(--colorElementBodies);
}

.topConveyerControl {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	margin-left: 1vw;
	margin-right: 1vw;
	padding-top: 0.05vw;
	padding-bottom: 0.05vw;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 3vw;
	color: var(--bodyBackgroundColor);
	text-align: right;
	text-shadow: 1px 1px black;
	background-color: var(--colorButtonBackground);
}


/************************************************** BOTTOM CONVEYER *******************************************/
.bottomConveyer-content {
	/*border: 1px solid #fff; /* for debugging */
	display:flex;
	justify-content:center;
	height: 5vh;
	margin-left: 5px;
	flex-direction: column;
}

.bottomConveyerSensor {
	display: flex;
	justify-content: flex-end;
	color: var(--colorElementBodies);
	width: 100%;
	margin-top: -6.5vh;
	font-size: calc(0.9vw + 0.9vh);
}

.bottomConveyer {
	width: 100%;
	height: 1vh;
	background-color: var(--colorElementBodies);
	align-self: flex-start;
	border: 1px solid var(--colorButtonBackground);
	border-top-left-radius: 0.5vw;
	border-top-right-radius: 0.5vw;
	border-bottom-left-radius: 0.5vw;
	border-bottom-right-radius: 0.5vw;
	box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);
}

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

.bottomConveyer-idle {
	display: block;
	width: 200%;
	height: 80%;
	transform: translateX(-0.5vw);
	background-image: repeating-linear-gradient(to right, black, black 0.5vw, var(--colorElementBodies) 0.5vw, var(--colorElementBodies) 1vw);
}

.bottomConveyer-run {
	display: block;
	width: 200%;
	height: 80%;
	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: conveyerRun 1.5s infinite linear;
	will-change: transform;
	animation-direction: reverse;
}

.bottomConveyer-run-slow {
	display: block;
	width: 200%;
	height: 80%;
	transform: translateX(-0.5vw);
	background-image: repeating-linear-gradient(to right, #AF5500, #AF5500 0.5vw, var(--colorMixerRotationLight) 0.5vw, var(--colorMixerRotationLight) 1vw);
	animation: conveyerRun 1.5s infinite linear;
	will-change: transform;
	animation-direction: reverse;
}

.bottomConveyer-control-content {
	/*border: 1px solid white; /* for debugging */
	width: 100%;
	height: 3.2vh;
	display: flex;
	align-self: center;
	flex-direction: row;
	align-items: center;
	margin-top: 1vh;
	justify-content: center;
}

.bottomConveyerArrow {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	padding-top: 0.05vw;
	padding-bottom: 0.05vw;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: right;
	color: var(--colorElementBodies);
}

.bottomConveyerControl {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	margin-left: 1vw;
	margin-right: 1vw;
	padding-top: 0.05vw;
	padding-bottom: 0.05vw;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 3vw;
	color: var(--bodyBackgroundColor);
	text-align: right;
	text-shadow: 1px 1px black;
	background-color: var(--colorButtonBackground);
}

/************************************************** ELEVATOR *******************************************/
.elevator-content {
	/*border: 1px solid #fff; /* for debugging */
	display:flex;
	/* justify-content:flex-start; */
	/* width: 100%; */
	/* height:1.5vw; */
	margin-left: 0.5vw;
}

.elevator {
	margin-left: 0.5vw;
	width: 0.5vw;
	height: 95%;
	background-color: var(--colorElementBodies);
	align-self: center;
	border: 1px solid var(--colorButtonBackground);
	border-top-left-radius: 0.5vw;
	border-top-right-radius: 0.5vw;
	border-bottom-left-radius: 0.5vw;
	border-bottom-right-radius: 0.5vw;
	box-shadow: 10px 12px 5px 0px rgba(0,0,0,0.35);	
}

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

.elevator-idle {
	display: block;
	width: 200%;
	height: 200%;
	/* transform: translateY(0.5vw); */
	background-image: repeating-linear-gradient(to bottom, black, black 0.5vw, var(--colorElementBodies) 0.5vw, var(--colorElementBodies) 1vw);
}

.elevator-run {
	display: block;
	width: 200%;
	height: 200%;
	transform: translateY(0.5vw);
	background-image: repeating-linear-gradient(to bottom, var(--colorMixerRotationDark), var(--colorMixerRotationDark) 0.5vw, var(--colorMixerRotationLight) 0.5vw, var(--colorMixerRotationLight) 1vw);
	animation: elevatorRun 1.5s infinite linear;
	will-change: transform;
}

@keyframes elevatorRun {
	from { transform: translateY(0.5vw) translateZ(0); }
	to { transform: translateY(-0.5vw) translateZ(0); }
}

.elevator-control-content {
	/*border: 1px solid white; /* for debugging */
	width: 3vw;
	height: 20vh;
	display: flex;
	align-self: center;
	flex-direction: column;
	align-items: center;
	margin-left: 0.3vw;
	justify-content: center;
}

.elevatorControl {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.05vw;
	padding-right: 0.05vw;
	margin-top: 2vh;
	margin-bottom: 2vh;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	align-items: center;
	justify-content: center;
	width: 1.9vw;
	height: 5vh;
	color: var(--bodyBackgroundColor);
	text-align: right;
	text-shadow: 1px 1px black;
	background-color: var(--colorButtonBackground);
}

.elevatorArrow {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.05vw;
	padding-right: 0.05vw;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	align-items: center;
	justify-content: center;
	width: 1vw;
	height: 1.5vh;
	color: var(--colorElementBodies);
	text-align: right;
}

.elevatorConsistency {
	display: flex;
	width: 5.5vw;
	height: 3vh;
	color: #bbb;
	font-size: calc(1.3vw + 1.3vh);
	align-self: center;
	justify-content: flex-end;
	text-shadow: 1px 1px black;
}

/********************************************************* 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;
}

.functionsKey-button {
	/*border: 1px solid white; /* for debugging */
	display: flex;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	align-items: center;
	flex-direction: column;
	justify-content: space-around;
	height: 100%;
	color: var(--colorTopBottomMenuButtonText);
	text-align: right;
	font-size: calc(0.8vw + 0.8vh);
	text-shadow: 1px 1px black;
	background-color: var(--colorButtonBackground);
	cursor: pointer;
}

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

.functionsKey-button:active {
	cursor: pointer;
}

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

.functionsKey-button.disabled {
	cursor: not-allowed;
	color:  var(--colorRed);
	opacity: 0.3;
}

.functionKey-hint {
	display: flex;
	font-size: calc(0.4vw + 0.4vh);
	height: 1.3vh;
}

.semaphore {
	margin-left: 2vw;
	flex-direction: row;
	justify-content:center;
	display: flex;
	height: 4vh;
}


.horn {
	margin-left: 1vw;
	flex-direction: row;
	justify-content:space-around;
	display: flex;
	height: 4vh;
}

.horn-hint {
	display: flex;
	font-size: calc(0.3vw + 0.3vh);
	height: 1vh;
}


/******************************************************* 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: 1px solid var(--bodyBackgroundColor);
	color: var(--colorTopBottomMenuButtonText);
	display: flex;
	justify-content: center;
	align-self: center;
	padding: 0.9vh 0.5vw;
	white-space: nowrap;
	height: 100%;
	font-size: calc(0.6vw + 0.6vh);
}

.top-menu-button:hover {
	background-color: #3c4c58;
	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, .1);
}

.clock {
	color: var(--colorElementBodies);
	font-size: calc(0.8vw + 0.8vh);
	text-shadow: 1px 1px black;
	height: 3vh;
	position: absolute;
	width: 14vw;
	right: 0;
	bottom: 2vh;
}


/****************************** old 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;
}

.messageContent {
	width: 19vw;
}

.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: calc(0.7vw + 0.7vh);
	padding: 0.2vw;
}

.message-buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.2vw;
	margin-bottom: 0.2vw;
	font-size: calc(0.7vw + 0.7vh);
}

.message-button {
	font-size: calc(0.9vw + 0.9vh);
	padding-left:0.5vw;
	padding-right:0.5vw;
	display:flex;
	margin-left:0.5vw;
	margin-right:0.5vw;
	color:  #adb6bd ;
	text-shadow: 1px 1px black;
	justify-content:space-between;
	align-items:center;
	background-color:#253443;
	border:solid 1px #000000;
	
}
.message-button:hover {
	background-color: #3c4c58;
	cursor: pointer;
}

.message-button:active {
	background-color: black;
	cursor: pointer;
	color:  #f1c40f
}

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

.message2 {
	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;
}

.inactive {
	opacity: 0.5;
}

.messageContent2 {
	width: 19vw;
}

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

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

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

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

.message2.undefined {
	background: #bbbb55;
}

.message2-text {
	display: flex;
	justify-content: flex-start;
	font-size: 18px;
	padding: 0.2vw;
}

.message2-buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.2vw;
	margin-bottom: 0.2vw;
	font-size: calc(0.7vw + 0.7vh);
}

.message2-button {
	font-size: calc(0.9vw + 0.9vh);
	padding-left:0.5vw;
	padding-right:0.5vw;
	display:flex;
	margin-left:0.5vw;
	margin-right:0.5vw;
	color:  #adb6bd ;
	text-shadow: 1px 1px black;
	justify-content:space-between;
	align-items:center;
	background-color:#253443;
	border:solid 1px #000000;
}
.message2-button:hover {
	background-color: #3c4c58;
	cursor: pointer;
}

.message2-button:active {
	background-color: black;
	cursor: pointer;
	color:  #f1c40f
}


/*ConreteCart section */
.c_main {
	display: flex;
	flex-direction: row;
}

.c_left {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 80vw;
	height: 100vh;
}

.c_leftLeft {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 10vw;
	height: 100vh;
}

.c_leftRight {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 70vw;
	height: 100vh;
}

.c_right {
	display: flex;
	flex-direction: column;
}

.c_rightTop {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	width: 20vw;
	height: 80vh;
	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: 8vw, 8vh;
}

.c_rightBottom {
	display: flex;
	justify-content: flex-end;
	width: 20vw;
	height: 20vh;
}

.c_concreteCart-content {
	display: flex;
	flex-direction: row;
}

.c_rail {
	background-color: var(--colorElementBodies);
	border: var(--borderShow) 1px var(--colorBorder);
	border-top-left-radius: 2vw;
	border-top-right-radius: 2vw;
	border-bottom-left-radius: 2vw;
	border-bottom-right-radius: 2vw;
	box-shadow: var(--shadows);
	width: 60vw;
	height: 5vh;
}

.c_horizontal_spacer {
	height: 5vh;
}

.c_cartArea {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 60vw;
	height: 30vh;
}

.c_cartContent {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5vw;
}

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

.c_cartContentDisplay {
	position: absolute;
	font-size: 25px;
	text-shadow: 1px 1px black;
	color: var(--colorDuration);
	/*transform: rotate(-90deg);*/
	/*margin-top: -2.5vw;*/
	margin-left: 6vw;
	z-index: 99;
	width: 2vw;
}

.c_cart {
	display: flex;
	width: 3vw;
	height: 2.5vw;
	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);
}

.c_open {
	transform: rotate(90deg);
	box-shadow: 0.3vw -0.4vw 5px 0px rgba(0,0,0,0.35);
}

.c_semi {
	transform: rotate(45deg);
}

.c_topIconsArea {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 60vw;
	height: 1vw;
}


.c_arrow {
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: var(--colorElementBodies);
	font-size: 12vh;
	width: 3vw;
}

.c_openCloseButtonsArea {
	display: flex;
	justify-content: center;
	width: 5vw;
	height: 1.5vw;
}

.c_openCloseArrow {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: var(--colorElementBodies);
	color: var(--bodyBackgroundColor);
	font-size: 7.5vh;
	width: 5vw;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	cursor: pointer;
}

.c_buttonDisable {
	/*opacity: 0.5;*/
	background-color: var(--colorButtonDisabled) !important;
	cursor: not-allowed !important;
}

.c_I {
	font-size: 7vh;
}

.c_sensorsArea {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 60vw;
	height: 1.5vw;
}

.c_sensorButtonsArea {
	display: flex;
	justify-content: center;
	width: 5vw;
	height: 1vw;
}

.c_sensorButton {
	display: flex;
	width: 2vw;
	height: 1.5vw;
	cursor: pointer;
	background-color: var(--colorElementBodies);
}

.c_reasonAutomat {
	background-color: var(--colorAutomat) !important;
	display: flex;
	width: 2vw;
	height: 1.5vw;
	cursor: pointer;
}

.c_sensor {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--bodyBackgroundColor);
	font-size: 7vh;
	width: 2vw;
}


.c_nameOfPosition {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 9vh;
	width: 5vw;
}

.c_clock {
	display: flex;
	justify-content: center;
	color: var(--colorElementBodies);
	font-size: 11vh;
	text-shadow: 1px 1px black;
	width: 16vw;
}

.c_manualMode {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	height: 100vh;
}

.c_manualModeButton {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: var(--colorElementBodies);
	color: var(--bodyBackgroundColor);
	width: 5vw;
	height: 4vw;
	font-size: 1.2vw;
	cursor: pointer;
}