.form{
	background-color: lightgrey;
  	border: 1px solid black;
}

.form input[type=number]{
	float:right;
}

#map{
	/* border: 1px solid black; */
}

.hide{
	display: none;
}

.line{
	height: 5px;
}

.case{
	display: inline-block;
	width: 5px;
	height: 5px;
}

canvas{
	background-color: black;
}

.height0{
	background-color: #42C6FF;	
}
.height1{
	background-color: #62FF42;	
}
.height2{
	background-color: #44D627;	
}
.height3{
	background-color: #36B51D;	
}
.height4{
	background-color: #31961D;	
}
.height5{
	background-color: #267317;	
}
.height6{
	background-color: #1D4F13;	
}
.height7{
	background-color: #57382B;	
}
.height8{
	background-color: #4A342A;	
}
.height9{
	background-color: #999999;	
}
.height10{
	background-color: white;	
}
.blue{
	background-color: #42C6FF;
}
.player{
	background-color: red;
}

.active{
	background-color: lightgrey;
}

#tracker {
	list-style-type: none;
}

#tracker li {
	display: inline-block;
	min-width: 150px;
}

.ui>div>div.percent {
	background-color: lightgrey;
	width: 100px;
}

.ui>div>div.percent>span {
	display: inline-block;
	background-color:green;
}

.ui.dead {
	background-color: grey;
}

audio {
	display: none;
}

.heart-rate {
  width: 150px;
  height: 73px;
  position: relative;
  margin: 20px auto;
}

.fade-in {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  top: 0;
  right: 0;
  animation: heartRateIn 2.5s linear infinite;
}

.fade-out {
  position: absolute;
  width: 120%;
  height: 100%;
  top: 0;
  left: -120%;
  animation: heartRateOut 2.5s linear infinite;
  background: rgba(255, 255, 255, 1);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}

@keyframes heartRateIn {
  0% {
    width: 100%;
  }
  50% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

@keyframes heartRateOut {
  0% {
    left: -120%;
  }
  30% {
    left: -120%;
  }
  100% {
    left: 0;
  }
}