.range {
  z-index: 2;
  position: absolute;
  bottom: 41px;
  left: 1%;
  width: 98%;
  height: 3px;
  background: rgba(140,140,140,0.5);
  cursor: pointer;
  padding: 3px 0px;
  background-clip: content-box;
  user-select: none; /*fix selection bug in chrome*/
  -webkit-user-select: none;
}

.range:hover{
  height: 5px;
}

.range:hover .slider{
  height: 5px;
}

.range:hover .thumb{
  visibility: visible
}

.slider {
  z-index: 3;
  background: rgb(0, 122, 204);
  height: 3px;
  width: 50%;
  position: absolute;
  opacity: 1;
}

.thumb {
  visibility: hidden;
  z-index: 2;
  background: rgb(0, 122, 204);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: -5px;
  right: -7px;
  opacity:1;
}

.floating-time {
  visibility: hidden;
  position: absolute;
  bottom: 15px;
  font-size: 12px;
  font-family: 'verdana';
  color:rgb(240, 240, 240);
  text-shadow: 1px 1px 1px rgb(104,104,104);
}
