svg circle.bar {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: all 0.5s ease;
}

svg circle.progress-bar {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: all 0.5s ease;
}

.click-handle {
  width: 100%;
  height: 100%;
}

.ext-player {
  position: absolute;
  padding: 15px;
  width: 500px;
  background-color: white;
  z-index: 1000;
  box-shadow: 0 0 15px 3px silver;
  transition: all 0.25s ease-in;
}

.ext-player-header__title {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 20px;
}

.ext-player-progress-bar {
  width: 100%;
}

.ext-player-close {
  position: absolute;
  padding: 5px;
  cursor: pointer;
  right: 15px;
  top: 10px;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease-in;
}

.ext-player-close:hover {
  transform: scale(1.2);
}

@media (max-width: 669px) {
  .ext-player {
    width: 250px;
  }

  .ext-player__left {
    right: auto;
  }
}