:root {
	    --currentRPM: 0;
		--RPMscale: 1000;
	    --currentAMP: 0;
		--AMPscale: 200;
	}



body {
  margin: 0.5rem;
  background-color: white;
}

#text{
    display:inline-block;
    vertical-align: top;
}


.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}


.range-wrap {
  position: relative;
  margin:  0.4rem 0.4em 0rem 0.4rem;
}

.range {
    -webkit-appearance: none;
     width:100%;
	 height:25px
     border:2px solid green;
     border-radius:5px;
     /* transform: rotate(270deg); */
}

.range::-webkit-slider-thumb {
   -webkit-appearance: none;
    height: 20px;
    width: 70px;
    border-radius: 10%;
    background: grey;
	opacity: 0.8;
    box-shadow: 2px 2px 1px #000000;
	z-index: 150;
}
	
.bubble {
  font-size: 1.4em;
  background: red;
  color: white;
  padding: 4px 12px;
  position: absolute;
  border-radius: 4px;
  left: 80%;
  transform: translate(-180%,-100%);
}


.button-wrap {
  position: relative;
  text-align: left;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.status-wrap {
  position: relative;
  text-align: left;
  top: 50%;
  margin-top: 0.5rem;
  margin-right: 0rem;

}



.button-label {
  display: inline-block;
  padding: 0.5em 0.5em;
  margin: 0.1em;
  cursor: pointer;
  color: #292929;
  border-radius: 0.25em;
  background: #efefef;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  transition: 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button-label {
  font-size: 1.2em;
  font-weight: bold;
  font-family: "Lato", sans-serif;
}
.button-label:hover {
  background: #d6d6d6;
  color: #101010;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.32);
}
.button-label:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
@media (max-width: 40em) {
  .button-label {
    padding: 0em 0.5em 3px;
    margin: 0.1em;
  }
}


#Pilot-button:checked + .button-label {
  background: #2ECC71;
  color: #efefef;
}
#Pilot-button:checked + .button-label:hover {
  background: #29b765;
  color: #e2e2e2;
}
#Winch-button:checked + .button-label {
  background: #2ECC71;
  color: #efefef;
}
#Winch-button:checked + .button-label:hover {
  background: #29b765;
  color: #e2e2e2;
}

#PIRC-button:checked + .button-label {
  background: #2ECC71;
  color: #efefef;
}
#PIRC-button:checked + .button-label:hover {
  background: #29b765;
  color: #e2e2e2;
}

#PIPR-button:checked + .button-label {
  background: #2ECC71;
  color: #efefef;
}
#PIPR-button:checked + .button-label:hover {
  background: #29b765;
  color: #e2e2e2;
}

#STOP-button:checked + .button-label {
  background: #D91E18;
  color: #efefef;
}
#STOP-button:checked + .button-label:hover {
  background: #c21b15;
  color: #e2e2e2;
}

#PAYO-button:checked + .button-label {
  background: #4183D7;
  color: #efefef;
}
#PAYO-button:checked + .button-label:hover {
  background: #2c75d2;
  color: #e2e2e2;
}

.parent {
position: relative;
top: 0;
left: 0;
}
.imgback {
position: relative;
top: 0;
left: 0;
}
.rpmpointer {
position: absolute;
bottom: 19px;
left: 22px;
transform: translateY(calc(-1*400px*min(var(--currentRPM),var(--RPMscale))/var(--RPMscale)));
border: 1px solid #000000;
}
.amppointer {
position: absolute;
bottom: 19px;
left: 122px;
transform: translateY(calc(-1*400px*min(var(--currentAMP),var(--AMPscale))/var(--AMPscale)));
border: 1px solid #000000;
}

.label {
  color: white;
  padding: 3px;
  margin: 0px;
  text-align: left;
}

.power {background-color: green;} /* Green */
.powerslider::-webkit-slider-runnable-track {background-color: green;}
.regen {background-color: blue;} /* Blue */
.regenslider::-webkit-slider-runnable-track {background-color: blue;}
.reqtension {background-color: #ff9800;} /* Orange */
.reqtensionslider::-webkit-slider-runnable-track {background-color: #ff9800;}
.tension {background-color: red;} /* Red */
.itsdisabled {background-color: #000000;}
.itsdown {background-color: red;} /* Red */
.itsup {background-color: green;}
.tensionslider::-webkit-slider-runnable-track {background-color: red;}
.tensionslider::-webkit-slider-thumb {
   -webkit-appearance: none;
    background: transparent;
	box-shadow: none;
}


.gauge-wrap {
	display: flex;
	flex-wrap: nowrap;
	text-align: center;
	justify-content: center;
}

.gauge-wrap:after {
	box-sizing: border-box;
}

.gauge-wrap>div {
	height: 280px;
	background-color: #ffffff;
	min-width: 65px;
	margin: 3px;
	text-align: left;
	line-height: 25px;
	font-size: 14px;
}
.gauge-title {
	font-weight: bold;
	font-size: 22px;
}

.gauge {
    position: relative;
    min-width: 65px;
    min-height: 80%;
    font-weight: bold;
    font-size: 20px;
}

.gauge .ticks {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.gauge .ticks .mid {
    background: black;
    position: relative;
    left: 5%;
    top: 50%;
    width: 25%;
    height: 0.2em;
    margin-bottom: -1%;
}

.gauge .ticks .tithe {
    background: black;
    position: relative;
    left: 5%;
    top: calc(95% - (var(--gauge-value) * 90% / var(--gauge-range)));
    width: 15%;
    height: 0.15em;
    margin-bottom: -1%;
}

.gauge .needle {
    background: red;
    position: relative;
    left: 5%;
    top: calc(90% - (var(--gauge-value) * 90% / var(--gauge-range)));
    width: 35%;
    height: 0.50em;
}

#AMPNeedle {
    top: calc(90% - (min(var(--currentAMP),var(--rangeAMP)) * 90% / var(--rangeAMP)));
}
#RPMNeedle {
    top: calc(90% - (min(var(--currentRPM),var(--rangeRPM)) * 90% / var(--rangeRPM)));
}

.gauge .tick-rectangle {
    position: absolute;
    top: 5%;
    left: 5%;
    width: calc(20% - 0.1em);
    height: calc(90% - 0.1em);
    border-left: 0.2em solid;
    border-top: 0.2em solid;
    border-bottom: 0.2em solid;
    border-right: 0.2em solid transparent;
}

.gauge .labels {
    position: absolute;
    width: 100%;
    height: 100%;
}

.gauge .labels .value-label {
    position: relative;
	text-align: center;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
}

.gauge .labels .tick-label {
    position: absolute;
	text-align: right;
    top: calc(93% - (var(--gauge-value) * 90% / var(--gauge-range)));
    left: 50%;
    transform: translateX(-40%);
	font-size: 12px;
	color: green;
}
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
  visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
  visibility: hidden;
}
}

.hidden {
  display: none;
}