#Player {
  
}

#Controls {
  
}

#Controls button {
  background-image: url(/fileadmin/Template/Resources/Public/Images/player_spriteset.svg);
  background-repeat:no-repeat;
  background-color: #fff;
  
  filter: grayscale(100%);
  transition: filter .5s;
    
  border: 0px;
  padding: 0px;
  margin: 0px 4px 0px 0px;
  
  cursor:pointer;
  
  width: 48px;
  height: 48px;
  background-size: calc(48px * 5) 48px;
}

#Controls button:hover { filter: grayscale(50%); }
#Controls button.Active { filter: grayscale(0%); }

.Control-play { background-position-x: -0px; }
.Control-pause { background-position-x: -48px }
.Control-next { background-position-x: calc(-48px * 3) }
.Control-prev { background-position-x: calc(-48px * 4) }

.Control-position {
  display:block;
  width: 100%;
}

.Control-progress {
  display:block;
  width: 100%;
  height: 6px;
  cursor:pointer;
}