#custom-player {
      text-align: center;
      margin-top: 20px;
  }

  #control button, .control2 button {
      padding: 10px 1px;
      font-size: 16px;
      margin: 10px;
      cursor: pointer;
  }

#current-time, #total-time, #title-music, .playlist-item span{
    font-family: "Orbitron", sans-serif;
    text-transform: uppercase;
}

.playlist-item span{
    cursor: pointer;
    letter-spacing: 3px;
    font-size: 9px;
}


.hidden {
  display: none;
}



/* PLAYER */
#custom-player{
  position: absolute;
  z-index: 999;
  bottom: 0;
  width: 100%;
  background-color: #00000042;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-display {
  display: flex;
  justify-content: center;
  align-items: center;
}

#progress-bar {
  height: 2px;
  color: #ffff;
  width: 225px;
  margin: 0 15px;
}

#control {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 42px;
}

button {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 10px;
}


.control2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 42px;
}

.control2 img {
  width: 20px;
  cursor: pointer;
}
#volume-slider {
  transform: rotate(-90deg);
  position: absolute;
  bottom: 5.4rem;
  left: -3.4rem;
  height: 2px;
}


.playlist-image {
  pointer: cursor;
}

.row-play-list {
  position: absolute;
  bottom: 28px;
  left: 4.85rem;
  background: #42424285;
  border-radius: 5px;
  font-size: 13px;
  padding: 10px 20px;
}

#title-music {
  position: absolute;
  font-size: 7px;
  bottom: -11px;
  display: block;
  letter-spacing: 2px;
}


#current-time, #total-time {
    width: 60px !important;
}


#progress-bar {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 2px; /* 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 */
#progress-bar:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: #7e7d7d; /* Green background */
  border-radius: 50%;
  cursor: pointer; /* Cursor on hover */
}

#progress-bar::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}



#volume-slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  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 */
#volume-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) */
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 15px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: #7e7d7d; /* Green background */
  border-radius: 50%;
  cursor: pointer; /* Cursor on hover */
}

#volume-slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}


@media (max-width: 500px) {
  #progress-bar {
    width: 60px;
  }

  #title-music {
    display: none;
  }

  #current-time, #total-time {
    font-size: 15px;
    width: 41px;
  }

  .row-play-list {
    right: 0;
    left: initial;
  }

  #control {
    padding-right: 25px;
  }
  .control2 {
    padding-left: 25px;
  }
}