.player {
  width: 395px;
  height: 150px;

  position: fixed;
  right: 10px;
  bottom: 10px;

  background: #00000085;
  backdrop-filter: blur(6px);

  border-radius: 25px;
  z-index: 9998;
  animation: MPslideRightOut 1s ease 2s forwards;
  transition: all 0.45s ease;
}

.player:hover {
  right: 10px;
  transform: translateX(-235px);
}

@keyframes MPslideRightOut {
  from {
    right: 10px;
  }
  to {
    right: -225px;
  }
}

.player-body {
  position: relative;
}

img.player-img {
  margin-top: -75px;

  width: 145px;
  height: 145px;

  object-fit: cover;
  border-radius: 15px;
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  padding-left: 0%;
  animation: scroll 16s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(-100%);
  }
}

#progress {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;

  background: linear-gradient(
    to right,
    #1c73df 0%,
    #1c73df 0%,
    #ddd 0%,
    #ddd 100%
  );

  outline: none;
}

#progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #1c73df;
  border-radius: 50%;
  cursor: pointer;
}

#progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #1c73df;
  border-radius: 50%;
  cursor: pointer;
}

.player-prev,
.player-next,
.player-toggle {
  cursor: pointer;
}