/* SUPERSEAL PLAYBACK SCRUBBER */

.superseal-scrubber {
  position: absolute !important;

  left: 17px !important;
  right: 17px !important;

  bottom: 10px !important;

  z-index: 10000 !important;

  display: grid !important;
  grid-template-columns: 38px 1fr 42px;
  align-items: center;

  gap: 6px;

  height: 18px;

  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;

  color: #58ff72;

  font-family: monospace;
  font-size: 8px;
  font-weight: 800;

  user-select: none;
  -webkit-user-select: none;
}


.superseal-scrubber-time {
  line-height: 1;

  white-space: nowrap;

  text-shadow:
    0 0 5px
    rgba(73, 255, 102, .9);
}


.superseal-scrubber-elapsed {
  text-align: right;
}


.superseal-scrubber-remaining {
  text-align: left;
}


.superseal-scrubber-track {
  position: relative;

  height: 8px;

  border:
    1px solid
    #54ff6c;

  border-radius: 999px;

  background:
    rgba(0, 15, 4, .96);

  box-shadow:
    inset 0 0 5px
    rgba(0, 0, 0, .9),
    0 0 5px
    rgba(55, 255, 80, .4);

  cursor: ew-resize;

  touch-action: none;

  outline: none;
}


.superseal-scrubber-track:hover,
.superseal-scrubber-track:focus-visible,
.superseal-scrubber-track.is-scrubbing {
  box-shadow:
    inset 0 0 5px
    rgba(0, 0, 0, .9),
    0 0 9px
    rgba(70, 255, 90, .9);
}


.superseal-scrubber-fill {
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 0%;

  border-radius: inherit;

  background:
    #54ff6c;

  box-shadow:
    0 0 6px
    rgba(62, 255, 86, .8);

  pointer-events: none;
}


.superseal-scrubber-thumb {
  position: absolute;

  top: 50%;
  left: 0%;

  width: 11px;
  height: 11px;

  border:
    1px solid
    #a5ffad;

  border-radius: 50%;

  background:
    #7cff8b;

  box-shadow:
    0 0 7px
    rgba(70, 255, 96, 1);

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events: none;
}


/* ==================================================
   FINAL SCRUBBER PLACEMENT
   Tuck into bottom of black status display
   ================================================== */

.superseal-scrubber {
  left: 18.5% !important;
  right: 18.5% !important;

  bottom: 3.9% !important;

  height: 15px !important;

  grid-template-columns:
    38px 1fr 42px !important;

  gap: 6px !important;
}

.superseal-scrubber-track {
  height: 7px !important;
}

.superseal-scrubber-thumb {
  width: 10px !important;
  height: 10px !important;
}


/* FINAL SCRUBBER VERTICAL TUNE */
.superseal-scrubber {
  bottom: 4.8% !important;
}