:root {
  --pb-height: 18px;
  --pb-width: 100%; 

  /* Radii */
  --pb-track-radius: 12px;
  --pb-fill-radius: 12px;

  /* Colors */
  --pb-track: #e5e7eb;
  --pb-left: #3b82f6;
  --pb-right: #b9299a;

  /* Optional gradients (set to 'none' to disable) */
  --pb-track-gradient: none;
  --pb-left-gradient: none;
  --pb-right-gradient: none;

  /* Optional shadows (set to 'none' to disable) */
  --pb-track-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
  --pb-fill-shadow: 0px 4px 12px 0px rgba(59, 130, 246, 0.4);

  /* Animation */
  --pb-transition-time: 220ms;
}

/* ---- Component ---- */
#pb_container {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  height: var(--pb-height);
  width: var(--pb-width); 
  position: relative;
  isolation: isolate;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
}

/* Track */
#pb_track {
  position: absolute;
  inset: 0;
  border-radius: var(--pb-track-radius);
  background: var(--pb-track);
  background-image: var(--pb-track-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: var(--pb-track-shadow);
}

/* Fill */
.pb_fill {
  position: absolute;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: var(--pb-fill-radius);
  transition: width var(--pb-transition-time) cubic-bezier(.2, .8, .2, 1);
  background: var(--pb-fill);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--pb-fill-shadow);
}

.pb_onlyright {
  border-radius: var(--pb-fill-radius);
  background-image: var(--pb-right-gradient);
  left: 0;
}

#pb_left {
  border-radius: var(--pb-fill-radius) 0 0 var(--pb-fill-radius);
  background-image: var(--pb-left-gradient);
  right: 50%;
}

#pb_right {
  border-radius: 0 var(--pb-fill-radius) var(--pb-fill-radius) 0;
  background-image: var(--pb-right-gradient);
}

#pb_right.pb_dual {
  left: 50%;
}

#pb_right:not(.pb_dual) {
  left: 0;
}

#pb_zeroline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  top: -30%;
  bottom: -30%;
  background: #888;
  z-index: 2;
}