#nd-progress {
  position: fixed;
  bottom: 8%;
  right: 3%;
  z-index: 2147483647;
  border-style: none;
  text-align: center;
  vertical-align: baseline;
  background-color: rgba(210, 210, 210, 0.2);
  padding: 6px;
  border-radius: 12px;
}

#chapter-progress {
  --color: green;
  --position: 0%;
  width: 200px;
  height: 10px;
  border-radius: 30px;
  background-color: #ccc;
  background-image: radial-gradient(
      closest-side circle at var(--position),
      var(--color),
      var(--color) 100%,
      transparent
    ),
    linear-gradient(var(--color), var(--color));
  background-image: -webkit-radial-gradient(
      var(--position),
      circle closest-side,
      var(--color),
      var(--color) 100%,
      transparent
    ),
    -webkit-linear-gradient(var(--color), var(--color));
  background-size: 100%, var(--position);
  background-repeat: no-repeat;
}

#zip-progress {
  --color: yellow;
  --position: 0%;
  width: 200px;
  height: 10px;
  border-radius: 30px;
  background-color: #ccc;
  background-image: radial-gradient(
      closest-side circle at var(--position),
      var(--color),
      var(--color) 100%,
      transparent
    ),
    linear-gradient(var(--color), var(--color));
  background-image: -webkit-radial-gradient(
      var(--position),
      circle closest-side,
      var(--color),
      var(--color) 100%,
      transparent
    ),
    -webkit-linear-gradient(var(--color), var(--color));
  background-size: 100%, var(--position);
  background-repeat: no-repeat;
  margin-top: 5px;
}
