.player-body > wave {
	-webkit-mask-image: linear-gradient(to left, transparent, black, black, black, black, black, black, black, transparent);
}

.player-centre-line {
	width: 100%; 
	display: none; 
	height: 0px;
	position: absolute;
	border-bottom: 2px solid #ac49ef;
	-webkit-mask-image: linear-gradient(to left, transparent, black, black, transparent);
}

.player-image{
    position: relative;
    float: left;
    cursor: pointer;
}

.player-loader {
	display: none;
	border: 5px solid #f3f3f3; /* Light grey */
	border-top: 5px solid #8a3abf; /* Blue */
	border-radius: 50%;
	animation: playerspin 2s linear infinite;
	position: absolute;
	bottom: 5px;
	width: 10%;
	height: 10%;
	right: 5px;
}

.player-image .player-image-btn{
	opacity: 0;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}

.player-image:hover .player-image-btn{
	opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}

.player-image-btn{
	pointer-events: none;
	position: absolute;
	left: calc(50% - 25px);
    top: calc(50% - 25px);
    width: 50px;
    height: 50px;
}

.player-image-btn-pause{
	display: none;
}

.player-image-btn > .fill {
  fill: #fff;
  opacity: 0.3;
}

.player-image-btn > .outline {
  stroke: #fff;
  stroke-width: 3;
  opacity: 0.5;
}
.player-image-btn > .triangle {
  fill: #fff;
}

@keyframes playerspin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slidecontainer > .slider {
  position: absolute;
  top: 2px;
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 4px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #8a3abf; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20px;
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #8a3abf; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 20px;
}
.player-button{
	cursor: pointer;
}

.player-button circle{
	fill: rgb(0,255,0);
}

.player-button:hover .button-circle{
	fill: #8a3abf !important;
}

.player-button:hover .hover-fill{
	fill: #ffffffA0 !important;
}
.player-button:hover .hover-stroke{
	stroke: #ffffffA0 !important;
}