html, body {
  margin: 0px;
  overflow: hidden;
  background: rgb(21, 21, 21);
}

/* mediaelement player overrides */

.mejs__container, .mejs__controls:not([style*="display: none"]) {
  background: transparent;
}

.mejs__container {
  width: 100%!important;
  min-width: 100%!important;
}

.mejs__controls {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.mejs__button {
  width: 100%;
}

.mejs__button>button {
  overflow: visible;
}

.mejs__button, .mejs__time, .mejs__time-rail {
  height: 0;
}

.mejs__time-rail {
  padding: 0;
  width: 100%;
  margin: 0;
}

.mejs__time {
  height: 2rem;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.mejs__play button, .mejs__pause button, .mejs__replay button {
  margin: 0;
  top: -0.5rem;
}

.mejs__currenttime, .mejs__duration {
  align-self: flex-end;
}

.mejs__play button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
}

.mejs__pause button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3C/svg%3E");
}

.mejs__replay button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='30 20 512 512'%3E%3Cpath d='M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32h128c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2l-17.6-17.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0z'/%3E%3C/svg%3E");
}

.mejs__volume-button button {
  margin: 0;
  top: -3.05rem;
  right: 3.5rem;
}

.mejs__volume-button.mejs__mute button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z'/%3E%3Cpath d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z'/%3E%3Cpath d='M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z'/%3E%3C/svg%3E");
}

.mejs__volume-button.mejs__unmute button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.mejs__horizontal-volume-slider {
  width: 100%;
  height: 0;
}

.mejs__horizontal-volume-total {
  background: rgb(255 255 255 / 30%);
  top: -2.75rem;
  right: 0;
  left: unset;
  cursor: pointer;
}

.mejs__pause svg.mejs__icon-pause, .mejs__play svg.mejs__icon-play, .mejs__replay svg.mejs__icon-replay {
  display: none;
}

/* musicplayer player styles */

.musicplayer {
  overflow: hidden;
  text-align: center;
  /* border-radius: .5rem; */
}

@media (width <= 385px) {
  .musicplayer {
    height: unset!important;
  }
}

.musicplayer.musicplayer-color {
  background-color: #020420;
}

.musicplayer .mp__box {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 80%));
}

.musicplayer .mp__controls {
  color: #fff;
  padding: 1.5rem 1rem;
}

.musicplayer .mp__music {
  width: 100%;
}

.musicplayer .mp__cover {
  overflow-y: hidden;
  flex: 1 1 0%;
  height: 100%;
  background-color: rgb(0 0 0 / 40%);
}

.musicplayer .mp__box-1 {
  overflow-y: hidden;
  height: 100%;
}

.musicplayer .mp__box-2 {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0.5rem;
}

.musicplayer .mp__box-3 {
  min-width: 80px;
  position: relative;
  height: 100%;
  width: 100%;
}

.musicplayer .mp__image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  position: relative;
  max-height: 100%;
  max-width: 100%;
  display: inline;
}