/* Player background */
:root {
  --surface-player: #000000;
  --surface-player-binaural: #7a7979;
  --action-player: #dd2476;
  --action-player-binaural: #972b90;
  --border-player: #000000;
  --surface-player-control: rgba(255, 255, 255, 0.3);
  --surface-player-loaded: rgba(219, 78, 136, 0.075);
  --text-inverse: #ffffff;
}

@keyframes lvdp-player-bars {
  0%,
  100% {
    height: 30%;
  }

  50% {
    height: var(--bar-height, 70%);
  }
}

.my-normal-mejs-container.is-binaural .mejs-controls {
  background-image: linear-gradient(30deg, var(--surface-player-binaural), var(--action-player-binaural));
}
.my-normal-mejs-container .mejs-controls {
  background-image: linear-gradient(30deg, var(--surface-player), var(--action-player));
  border-color: var(--border-player);
  border-style: solid;
  border-radius: 20px;
  border-width: thin;
  background-color: inherit;
}

.my-normal-mejs-container {
  --normal-hover: 0%;
  --normal-progress: 0%;
  background: unset;
  overflow: visible;
  position: relative;
}

.my-normal-mejs-container.lvdp-has-player-text {
  min-height: 68px;
}

/* Progress and audio bar background */
.my-normal-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total
.my-normal-mejs-container .mejs-time {
  border-radius: 40px;
  color: var(--text-inverse);
}
.my-normal-mejs-container .mejs-button.mejs-playpause-button {
  align-items: center;
  display: flex;
  justify-content: center;
}

.my-normal-mejs-container .mejs-button.mejs-playpause-button > button {
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--surface-player-control);
  border-radius: 999px;
  box-shadow: 0 2px 8px var(--surface-player-loaded);
  color: var(--text-inverse);
  height: 28px;
  margin: 0;
  position: relative;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  width: 28px;
}

.my-normal-mejs-container .mejs-button.mejs-playpause-button > button:hover,
.my-normal-mejs-container .mejs-button.mejs-playpause-button > button:focus {
  background-color: transparent;
  box-shadow: 0 3px 10px var(--surface-player-control);
  transform: translateY(-1px);
}

.my-normal-mejs-container .mejs-button.mejs-playpause-button > button::before {
  font-family: FontAwesome;
  font-size: 12px;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.my-normal-mejs-container .mejs-button.mejs-play > button::before {
  content: "\f04b";
  margin-left: 1px;
}

.my-normal-mejs-container .mejs-button.mejs-pause > button::before {
  content: "\f04c";
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.my-normal-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: transparent !important;
  background-image: none !important;
  display: none !important;
}

.my-normal-mejs-container .mejs-controls .mejs-time-rail .mejs-time-hovered {
  display: none !important;
}

.my-normal-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: rgba(255, 255, 255, 0.16);
  background-image: none;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  z-index: 110;
}

.my-normal-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background-color: transparent !important;
  background-image: none !important;
  display: none !important;
}

.my-normal-mejs-container .lvdp-normal-player__bars {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(24, minmax(3px, 1fr));
  inset: 0;
  padding: 2px 8px;
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  z-index: 10;
}

.my-normal-mejs-container .lvdp-normal-player__seek-hitbox {
  appearance: none;
  background: transparent !important;
  border: 0;
  cursor: pointer;
  inset: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 200;
}

.my-normal-mejs-container .lvdp-normal-player__seek-hitbox:hover,
.my-normal-mejs-container .lvdp-normal-player__seek-hitbox:focus,
.my-normal-mejs-container .lvdp-normal-player__seek-hitbox:active {
  background: transparent !important;
  box-shadow: none;
  outline: none;
}

.my-normal-mejs-container .mejs-time-float,
.my-normal-mejs-container .mejs-time-float-current,
.my-normal-mejs-container .mejs-time-float-corner {
  display: none !important;
}

.my-normal-mejs-container .lvdp-normal-player__cursor {
  background: var(--text-inverse);
  border-radius: 999px;
  box-shadow: 0 0 6px var(--surface-player-control);
  display: block;
  height: 100%;
  left: clamp(1px, var(--normal-hover), calc(100% - 1px));
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  transition: opacity 0.12s ease;
  width: 2px;
  z-index: 1;
}

.my-normal-mejs-container .lvdp-normal-player__seek-hitbox:hover .lvdp-normal-player__cursor,
.my-normal-mejs-container .lvdp-normal-player__seek-hitbox:focus .lvdp-normal-player__cursor,
.my-normal-mejs-container.lvdp-is-hovering-seek .lvdp-normal-player__cursor {
  opacity: 1;
}

.my-normal-mejs-container .lvdp-normal-player__bars span {
  animation: lvdp-player-bars 0.9s ease-in-out infinite;
  animation-delay: calc(var(--bar-index) * -0.055s);
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  display: block;
  height: 35%;
  min-height: 4px;
  opacity: 0.72;
  transform-origin: center;
}

.my-normal-mejs-container .lvdp-normal-player__bars span:nth-child(-n + 6) {
  background: rgba(255, 255, 255, 0.28);
}

.my-normal-mejs-container .lvdp-normal-player__bars span.is-active {
  background: linear-gradient(180deg, var(--text-inverse), rgba(255, 255, 255, 0.72));
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.34);
  opacity: 1;
}

.my-normal-mejs-container .lvdp-normal-player__bars span:nth-child(4n + 1) {
  --bar-height: 76%;
}

.my-normal-mejs-container .lvdp-normal-player__bars span:nth-child(4n + 2) {
  --bar-height: 45%;
}

.my-normal-mejs-container .lvdp-normal-player__bars span:nth-child(4n + 3) {
  --bar-height: 92%;
}

.my-normal-mejs-container .lvdp-normal-player__bars span:nth-child(4n + 4) {
  --bar-height: 58%;
}

.my-normal-mejs-container:not(.lvdp-is-playing) .lvdp-normal-player__bars span {
  animation-play-state: paused;
}

/* Current track progress and active audio volume level bar */
.my-normal-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background-color: transparent !important;
  background-image: none !important;
  display: none !important;
}

.my-normal-mejs-container .mejs-time-handle,
.my-normal-mejs-container .mejs-time-handle-content {
  display: none !important;
}

/* Reduce height of the progress and audio bars */
.my-normal-mejs-container .mejs-time-buffering,
.my-normal-mejs-container .mejs-time-current,
.my-normal-mejs-container .mejs-time-float,
.my-normal-mejs-container .mejs-time-float-corner,
.my-normal-mejs-container .mejs-time-float-current,
.my-normal-mejs-container .mejs-time-hovered,
.my-normal-mejs-container .mejs-time-loaded,
.my-normal-mejs-container .mejs-time-marker,
.my-normal-mejs-container .mejs-time-total,
.my-normal-mejs-container .mejs-horizontal-volume-total,
.my-normal-mejs-container .mejs-time-handle-content {
  height: 18px;
}

.my-normal-mejs-container .mejs-time-handle-content {
  top: 2px;
}

.my-normal-mejs-container .mejs-horizontal-volume-total {
  top: 19px;
}

.my-normal-mejs-container .mejs-text {
  color: var(--text-inverse);
  font-size: smaller;
  left: 95px;
  line-height: 1.2;
  pointer-events: none;
  position: absolute;
  right: 12px;
  bottom: auto !important;
  top: 6px !important;
  z-index: 100;
}

.my-normal-mejs-container.lvdp-has-player-text .mejs-controls {
  bottom: 0;
  position: absolute;
}

@media (max-width: 899px) {
  .my-normal-mejs-container.lvdp-has-player-text {
    min-height: 66px;
  }

  .my-normal-mejs-container .mejs-text {
    font-size: 11px;
    left: 56px;
    right: 8px;
  }
}