.player-with-search,
#player-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
#player-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 6.25rem;
  background: #eee;
  color: black;
}

#player-container #play-pause {
  cursor: pointer;
  text-indent: -999999px;
  width: 100px;
  height: 100px;
  position: relative;
  float: left;
  padding: 12px 18px;
  z-index: 2;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
  background-repeat: no-repeat !important;
  background-position: center;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  background-color: gainsboro;
}

.play {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
}

.pause {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==) !important;
}

#timeline {
  width: 100%;
  height: 8px;
  background: #bebebe;
  float: left;
  z-index: 9;
  /* position: absolute; */
}

#scrub {
  height: 8px;
  background-color: #2986cc;
  border: none;
  color: hsl(48, 2%, 43%);
  float: left;
}

#playhead {
  width: 5px;
  height: 8px;
  background: #2986cc;
}

.item-inner {
  display: block;
  float: left;
  /* padding-left: 15px; */
  /* padding-top: 10px; */
  padding-bottom: 3px;
  -ms-flex-item-align: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
  color: #2986cc;
  min-width: max-content;
  align-content: center;
}
#time-holder {
  font-size: 12px;
  margin-top: 5px;
}
div#is-right,
div#is-left {
  display: inline;
  bottom: auto;
  padding: 3px 7px;
  padding-left: 0;
}
.progress-locator ul {
  
  list-style-type: none;
  counter-reset: css-counter 0; /* initializes counter to 0; use -1 for zero-based numbering */
}
.progress-locator li {
  counter-increment: css-counter 1; /* Increase the counter by 1. */
  display: flex;
  gap: 9px;
  
}
.progress-locator li:before {
  content: counter(css-counter) ". "; /* Apply counter before children's content. */
}


/* .time-container li{
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 6.25rem;
  background: #eee;
  color: black;
} */

.form-message { opacity: 0; transition: opacity 0.25s ease; }
.form-message.visible { opacity: 1; }