ground-size: cover;
  border-radius: 15%;
}

.now-playing {
  font-size: 1rem;
}

.track-name {
  font-size: 3rem;
}

.track-artist {
  font-size: 1.5rem;
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.playpause-track, .prev-track, .next-track {
  padding: 25px;
  opacity: 0.8;
      padding: 0px 25px 15px 25px;

  /* Smoothly transition the opacity */
  transition: opacity .2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover {
  opacity: 1.0;
}

.slider_container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100% !important;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: #fff;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

.seek_slider:hover, .volume_slider:hover {
  opacity: 1.0;
}

.seek_slider {
  width: 60%;
}

.volume_slider {
  width: 30%;
}

.current-time, .total-duration {
  padding: 20px 10px 10px 30px;
  color: #fff;
}
.total-duration {
    padding: 20px 10px 10px 10px;
}
.slider_container input{
	margin-top: 10px;
}
.slider_container .afp-group-right input{
	margin-top: 30px;
}
i.fa-volume-down, i.fa-volume-up {
  padding: 10px;
  color: #fff;
}
 i.fa-volume-up {
    padding: 10px 10px 10px 0px;
    color: #fff;
}
i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
  cursor: pointer;
  color: #fff;
}
.afp-group-left {
  position: relative;
  width: 20%;
  height: 100px;
  float: left;
}
.afp-group-center {
  position: relative;
  height: auto;
  float: left;
  width: 40%;
  padding-top: 5px;
  display: flex;
  justify-content: center;
}
.afp-group-right {
  position: relative;
  width: 30%;
  height: 100px;
  float: right;
}
.volume-up{
	position: relative;
    width: 10%;
    float: left;
    height: 100px;
    padding-top: 12px;
    padding-left: 20px;
}
.loader-container {
  position: relative;
  height: 10px;
  width: 160px;
  margin-top: 25px;
  margin-left: 25px;
  
}

.loader-container > div {
  position: relative;
  display: inline-block;
  background: #fff;
  height: 100%;
  width: 10px;
  margin: 0;
  -webkit-animation: load 3s ease-in-out infinite;
  animation: load 3s ease-in-out infinite;
  opacity: 0.7;
}

.loader-container .rectangle-2 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.loader-container .rectangle-3 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.loader-container .rectangle-4 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.loader-container .rectangle-5 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.loader-container .rectangle-6 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@-moz-keyframes load {
  0%,
  100% {
    -moz-transform: scaleY(1);
    background: #fff;
  }
  16.67% {
    -moz-transform: scaleY(3);
    background: #fff;
  }
  33.33% {
    -moz-transform: scaleY(1);
    background: #fff;
  }
  50% {
    -moz-transform: scaleY(3);
    background: #fff;
  }
  66.67% {
    -moz-transform: scaleY(1);
    background: #fff;
  }
  83.34% {
    -moz-transform: scaleY(3);
    background: #fff;
  }
} 

@-webkit-keyframes load {
  0%,
  100% {
    -webkit-transform: scaleY(1);
    background: #fff;
  }
  16.67% {
    -webkit-transform: scaleY(3);
    background: #fff;
  }
  33.33% {
    -webkit-transform: scaleY(1);
    background: #fff;
  }
  50% {
    -webkit-transform: scaleY(3);
    background: #fff;
  }
  66.67% {
    -webkit-transform: scaleY(1);
    background: #fff;
  }
  83.34% {
    -webkit-transform: scaleY(3);
    background: #fff;
  }
} 

@keyframes load {
  0%,
  100% {
    transform: scaleY(1);
    background: #fff;
  }
  16.67% {
    transform: scaleY(3);
    background: #fff;
  }
  33.33% {
    transform: scaleY(1);
    background: #fff;
  }
  50% {
    transform: scaleY(3);
    background: #fff;
  }
  66.67% {
    transform: scaleY(1);
    background: #fff;
  }
  83.34% {
    transform: scaleY(3);
    background: #fff;
  }
}