/*
$meter-bg-color: rgb(32,32,32);
$ring-color: #eee;
$grad-color: #9affff;
*/

* {
  box-sizing: border-box;
}

.dashboard {
	min-height: 680px;
  display: flex;
  flex-direction: row;
  justify-content: center;
	background-image: url("../assets/bg-dashboard.jpg");
	background-repeat: no-repeat;
	background-position: center top;
  align-items: center;
  padding: 2rem;
  font-family: 'Coda', cursive;
  margin-top: 100px;
  width: 100%;
}

.dashboard .buttons {
	margin: 5% 0;
	padding: 2%;
  display: flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  width: 100%;
}


@media (max-width:992px){
	
	.dashboard {background-image: url("../assets/bg-dashboard-tablets.png");}
	
	}

@media (max-width:576px){
	
	.dashboard {background-image: url("../assets/bg-dashboard-mobile.png");}
	
	}


.dashboard .buttons button {
	position: relative;
	margin: 0 5px;
	padding:1% 3%;
  background-image: -webkit-linear-gradient(#162036 0%, #131a26 5%, #101829 100%);
  background-image: -o-linear-gradient(#162036 0%, #131a26 5%, #101829 100%);
  background-image: linear-gradient(#162036 0%, #131a26 5%, #101829 100%);
  border-radius: 7px;
  box-shadow: 0 0 1px 1px rgb(10,10,10);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;	
  font-size: 14px;
  line-height: 1.3;
  color: #333;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  vertical-align: bottom;
	outline: none;
  transition: color .3s ease;
}



.dashboard .buttons button:hover, .dashboard .buttons button.text-success {
    color: #bfd7ff;
}

.dashboard .buttons button:active{
    box-shadow: 0 0 1px 1px rgb(10,10,10), inset 0 2px 2px 0px black;
}

.dashboard .buttons button:before{
    position: absolute;
    content: '';
    right: 10%;
    top: 5px;
    width: 80%;
    height: 2px;
    background: #646464;
    background-image: radial-gradient(top, #616161 0%, #616161 20%, #535353 60%);
    border-radius: 5px;
    box-shadow: 0 0 4px #1C1C17;
    transition: all .3s ease;
}

.dashboard .buttons button#btnStock:hover:before, .dashboard .buttons button#btnStock.text-success:before{
    background: #ccff33;
    box-shadow: 0 0 4px #1C1C17, 0 0 5px #ccff33;
}

.dashboard .buttons button#btnEco:hover:before, .dashboard .buttons button#btnEco.text-success:before{
    background: #33ccff;
    box-shadow: 0 0 4px #1C1C17, 0 0 5px #33ccff;
}

.dashboard .buttons button#btnStage1:hover:before, .dashboard .buttons button#btnStage1.text-success:before{
    background: #ffcc00;
    box-shadow: 0 0 4px #1C1C17, 0 0 5px #ffcc00;
}

.dashboard .buttons button#btnStage2:hover:before, .dashboard .buttons button#btnStage2.text-success:before{
    background: #ff9900;
    box-shadow: 0 0 4px #1C1C17, 0 0 5px #ff9900;
}

.dashboard .buttons button#btnStage3:hover:before, .dashboard .buttons button#btnStage3.text-success:before{
    background: #ff0000;
    box-shadow: 0 0 4px #1C1C17, 0 0 5px #ff0000;
}


.dashboard .buttons button:active:before{
    box-shadow: 0 0 4px #1C1C17, inset 0 2px 2px 0px #CC0000;
}


.meter-block {display:flex;}

.meter {
  display: inline-block;
  position: relative;
  width: 20rem;
  height: 20rem;
/*  background-color: #363739;*/
	background-image: url("../assets/meter-bg.jpg");
	background-repeat: no-repeat;
	background-position: center center;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
}

.meter-block-lewy {
	display: flex;
	margin: 60px 0 0 0;
	padding: 10px;
	background-image: url("../assets/meter-bg-lewy.png");
	background-repeat: no-repeat;
	background-position: center center;
}


.meter-block-prawy {
	display: flex;
	margin: 60px 0 0 0;
	padding: 10px;
	background-image: url("../assets/meter-bg-prawy.png");
	background-repeat: no-repeat;
	background-position: center center;
}

.meter:before {
  content: "";
  display: block;
  position: absolute;
  width: 107%;
  left: -3.5%;
  top: -3.5%;
  bottom: -3.5%;
  border-radius: 50%;
  background: #333;
  z-index: -1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/*
.meter.meter-stock:before {
-webkit-box-shadow: 2px 2px 15px 10px rgba(204,255,51,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(204,255,51,1);
box-shadow: 2px 2px 15px 10px rgba(204,255,51,1);
transition: all .3s ease;	
}

.meter.meter-eco:before {
-webkit-box-shadow: 2px 2px 15px 10px rgba(51,204,255,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(51,204,255,1);
box-shadow: 2px 2px 15px 10px rgba(51,204,255,1);
transition: all .3s ease;
}

.meter.meter-stage1:before {
-webkit-box-shadow: 2px 2px 15px 10px rgba(255,204,0,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(255,204,0,1);
box-shadow: 2px 2px 15px 10px rgba(255,204,0,1);
transition: all .3s ease;	
}

.meter.meter-stage2:before {
-webkit-box-shadow: 2px 2px 15px 10px rgba(255,153,0,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(255,153,0,1);
box-shadow: 2px 2px 15px 10px rgba(255,153,0,1);
transition: all .3s ease;	
}

.meter.meter-stage3:before {
-webkit-box-shadow: 2px 2px 15px 10px rgba(255,0,0,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(255,0,0,1);
box-shadow: 2px 2px 15px 10px rgba(255,0,0,1);
transition: all .3s ease;	
}
*/


.label {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	font-size: 16px;
  text-align: center;
  color: #555;
}

.label.label-value {
  color: #eee;
}

.label span {
  text-transform: uppercase;
}

.label-unit {
  top: 82.5%;
}

.label-unit div {
  font-size: 1rem;
}

.meter--big-label .label-unit div {
  font-size: 0;
}

.label-value {
  top: 50%;
  line-height: 1.25;
}

.label-value div, .label-value span {
  font-size: 0;
}

.meter--big-label .label-value div, .meter--big-label .label-value span {
  font-size: 2.5rem;
}

.label-value div {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: normal;
	font-weight: 400;
	font-size: 2rem!important;
}

.meter--big-label .label-value span {
  font-size: 1rem;
}

.label-value span {
  display: block;
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.needle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1px;
  height: 140px;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 0;
  background: rgb(255,255,255);
  box-shadow: 0 0 1px 1px #67798c;
}

.needle:before, .needle:after {
  display: block;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.needle:before {
  left: -3px;
  border-width: 0 3px 140px 0;
  border-color: transparent #67798c transparent transparent;
}

.needle:after {
  right: -3px;
  border-width: 140px 3px 0 0;
  border-color: #67798c transparent transparent transparent;
}

.needle-axle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 15%;
  height: 15%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  background-color: #070d17;
  color: #eee;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  cursor: pointer;
}

.meter.meter-stock .needle-axle {
	-webkit-box-shadow: 2px 2px 15px 10px rgba(204,255,51,1);
	-moz-box-shadow: 2px 2px 15px 10px rgba(204,255,51,1);
	box-shadow: 2px 2px 15px 10px rgba(204,255,51,1);
	transition: all .3s ease;
}


.meter.meter-eco .needle-axle {
-webkit-box-shadow: 2px 2px 15px 10px rgba(51,204,255,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(51,204,255,1);
box-shadow: 2px 2px 15px 10px rgba(51,204,255,1);
transition: all .3s ease;
}

.meter.meter-stage1 .needle-axle {
-webkit-box-shadow: 2px 2px 15px 10px rgba(255,204,0,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(255,204,0,1);
box-shadow: 2px 2px 15px 10px rgba(255,204,0,1);
transition: all .3s ease;	
}

.meter.meter-stage2 .needle-axle {
-webkit-box-shadow: 2px 2px 15px 10px rgba(255,153,0,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(255,153,0,1);
box-shadow: 2px 2px 15px 10px rgba(255,153,0,1);
transition: all .3s ease;	
}

.meter.meter-stage3 .needle-axle {
-webkit-box-shadow: 2px 2px 15px 10px rgba(255,0,0,1);
-moz-box-shadow: 2px 2px 15px 10px rgba(255,0,0,1);
box-shadow: 2px 2px 15px 10px rgba(255,0,0,1);
transition: all .3s ease;	
}


.needle-axle:hover {
  background-color: #070d17;
}

.meter--big-label .needle-axle {
  width: 37.5%;
  height: 37.5%;
}

.grad {
  position: absolute;
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  color: #ffffff;
  transform: translate3d(-50%, -50%, 0);
  font-weight: 400;
}

.grad.redzone {
  color: #e30;
}

.grad-tick.redzone,
.grad-tick--half.redzone,
.grad-tick--quarter.redzone {
  background-color: #e30;
}

.grad-tick {
  position: absolute;
  display: block;
  width: 1px;
  height: 0.75em;
  transform-origin: 50% 0;
  background-color: #ffffff;
  box-shadow: 0 0 1px 1px #67798c;
}

.grad-tick--half {
  width: 2px;
  height: 0.5em;
}

.grad-tick--quarter {
  width: 2px;
  height: 0.25em;
}

.meter--gear {
  width: 5rem;
  height: 5rem;
  margin: 0;
  margin-left: -2rem;
  margin-right: -2rem;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
}

.meter--gear:before {
  width: 128%;
  height: 128%;
  left: -14%;
  top: -14%;
  bottom: -14%;
}

.meter--gear div {
  font-size: 2.5rem;
  text-align: center;
  line-height: 5rem;
  font-family: 'Roboto Mono', monospace;
  font-style: italic;
  font-weight: bold;
  color: #555;
}

.meter--gear div.redzone {
  color: #e30;
}