#box {
  width: 100px;
  height: 100px;
  background: red;
}

.icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.progress-bar {
  height: 9px;
  position: relative;
  background: #555;
  border-radius: 25px;
  padding: 3px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.progress-bar > span {
  display: block;
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.title {
  cursor: pointer;
}

.title:hover {
  color: rgb(0, 0, 238);
}

.disabled {
  opacity: 0.5;
}

.playback-speed {
  user-select: none;
  cursor: pointer;
}