#stm-audio-player {
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 5px;
  z-index: 999;
  background-color: var(--gp-misc-bg-color);
  border-top: 1px solid var(--gp-misc-border-color);
}
#stm-audio-player .stm-audio-player-container {
  text-align: center;
  margin: 0 auto;
  position: relative;
}
#stm-audio-player #stm-song-controls {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
#stm-audio-player #stm-song-controls .stm-audio-player-action-button,
#stm-audio-player #stm-song-controls .stm-audio-player-volume-button {
  font-size: 18px;
  min-width: 25px;
  padding: 8px;
  margin: 0;
  background-color: transparent;
  color: var(--gp-quarternary-color);
}
#stm-audio-player #stm-song-controls .stm-audio-player-action-button:hover, #stm-audio-player #stm-song-controls .stm-audio-player-action-button.active,
#stm-audio-player #stm-song-controls .stm-audio-player-volume-button:hover,
#stm-audio-player #stm-song-controls .stm-audio-player-volume-button.active {
  color: var(--gp-primary-color);
}
#stm-audio-player #stm-song-controls .stm-audio-player-action-button.repeat-one,
#stm-audio-player #stm-song-controls .stm-audio-player-volume-button.repeat-one {
  background-color: lightgray;
}
#stm-audio-player #stm-volume-container {
  position: absolute;
  bottom: 50%;
  right: 0;
}
#stm-audio-player #stm-volume-container .stm-audio-player-volume-button {
  min-width: 25px;
  margin: 0;
  background-color: transparent;
  color: var(--gp-quarternary-color);
}
#stm-audio-player #stm-volume-container .stm-audio-player-volume-button:hover {
  color: var(--gp-quarternary-color);
}
#stm-audio-player #stm-volume-container #stm-volume-control {
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  outline: none;
  background-color: var(--gp-misc-bg-color);
  height: 8px;
  margin-bottom: 4px;
  cursor: pointer;
}
#stm-audio-player #stm-volume-container #stm-volume-control::-webkit-slider-runnable-track {
  background-color: var(--gp-primary-color);
  height: 8px;
  border-radius: 4px;
}
#stm-audio-player #stm-volume-container #stm-volume-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: var(--gp-misc-border-color);
  border: 1px solid var(--gp-quarternary-color);
  border-radius: 50%;
  margin-top: -6px;
}
#stm-audio-player #stm-volume-container #stm-volume-control::-moz-range-track {
  background-color: var(--gp-primary-color);
  height: 20px;
  border-radius: 4px;
}
#stm-audio-player #stm-volume-container #stm-volume-control::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--gp-misc-border-color);
  border-radius: 50%;
  cursor: pointer;
}
#stm-audio-player #stm-progress-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}
#stm-audio-player #stm-progress-container #stm-current-time,
#stm-audio-player #stm-progress-container #stm-total-time {
  font-size: 0.875rem;
  width: 60px;
}
#stm-audio-player #stm-progress-container #stm-current-time {
  margin-right: 8px;
}
#stm-audio-player #stm-progress-container #stm-total-time {
  margin-left: 8px;
}
#stm-audio-player #stm-progress-container #stm-progress-bar {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  outline: none;
  background: transparent; /* Let us style track manually */
  width: 100%;
  height: 8px;
  cursor: pointer;
  flex: 1;
}
#stm-audio-player #stm-progress-container #stm-progress-bar::-webkit-slider-runnable-track {
  background-color: var(--gp-primary-color);
  height: 8px;
  border-radius: 4px;
}
#stm-audio-player #stm-progress-container #stm-progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: var(--gp-misc-border-color);
  border: 1px solid var(--gp-quarternary-color);
  border-radius: 50%;
  margin-top: -6px;
}
#stm-audio-player #stm-progress-container #stm-progress-bar::-moz-range-track {
  background-color: var(--gp-primary-color);
  height: 20px;
  border-radius: 4px;
}
#stm-audio-player #stm-progress-container #stm-progress-bar::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--gp-misc-border-color);
  border-radius: 50%;
  cursor: pointer;
}

#stm-jukebox-ui {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  bottom: -100vh;
  padding: 30px 0 180px;
  box-shadow: 0 50px 150px black;
  z-index: 999;
  transform: translateY(100%);
}
#stm-jukebox-ui.inline {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0 !important;
  padding: 0;
  box-shadow: none !important;
  z-index: 1;
  transform: translateY(0) !important;
}
#stm-jukebox-ui.inline.show {
  top: 0;
  left: 0;
  animation: none;
}
#stm-jukebox-ui.inline .stm-jukebox-sidebar {
  width: 25%;
}
#stm-jukebox-ui.inline .stm-jukebox-wrapper {
  width: 75%;
}
#stm-jukebox-ui.show {
  top: 50%;
  left: 50%;
  animation: slideUp 0.4s ease-out forwards;
}
@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}
#stm-jukebox-ui .stm-jukebox-sidebar {
  width: 15%;
  padding-top: 20px;
  background-color: var(--gp-page-bg-color);
}
#stm-jukebox-ui .stm-jukebox-sidebar .stm-sticky-top {
  position: sticky;
  top: 50px;
}
#stm-jukebox-ui .stm-jukebox-sidebar #stm-jukebox-sidebar-menu {
  overflow: auto;
  height: 85vh;
}
#stm-jukebox-ui .stm-jukebox-sidebar #stm-jukebox-sidebar-menu .gp-menu-header-link {
  cursor: pointer;
  font-weight: bold;
}
#stm-jukebox-ui .stm-jukebox-sidebar #stm-jukebox-sidebar-menu .gp-menu-header-link .gp-menu-link {
  font-weight: bold;
  cursor: pointer;
}
#stm-jukebox-ui .stm-jukebox-sidebar #stm-jukebox-sidebar-menu .gp-menu-header-link svg.chevron {
  margin-left: 6px;
}
#stm-jukebox-ui .stm-jukebox-sidebar .gp-menu-link {
  min-height: 24px !important;
}
#stm-jukebox-ui .stm-jukebox-sidebar .stm-menu-item {
  margin: 2px;
}
#stm-jukebox-ui .stm-jukebox-sidebar .stm-menu-item.current-menu-item a {
  background: var(--gp-misc-bg-color) !important;
}
#stm-jukebox-ui .stm-jukebox-sidebar .stm-get-playlist {
  padding: 5px 10px;
  min-height: 24px !important;
}
#stm-jukebox-ui .stm-jukebox-wrapper {
  width: 85%;
  padding: 20px 20px 60px 20px;
  background-color: var(--gp-page-bg-color);
  overflow: auto;
}
#stm-jukebox-ui .stm-jukebox-wrapper .btn-close.inline {
  display: none;
}
#stm-jukebox-ui .stm-jukebox-wrapper h1 {
  margin: 0 0 5px 0;
  font-weight: bold;
}
#stm-jukebox-ui .stm-jukebox-wrapper #stm-jukebox-follower-dropdown .dropdown-menu li .btn {
  font-weight: 500;
  letter-spacing: 1px;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry {
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid var(--gp-misc-border-color);
  cursor: pointer;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry.hide {
  display: none;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry:hover, #stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry.active {
  background-color: var(--gp-misc-bg-color);
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry .item-avatar {
  width: 20px;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry .item {
  width: 100%;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry .item .stm-track-actions {
  float: right;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry .item .stm-track-actions .drag-handle {
  cursor: grab;
}
#stm-jukebox-ui #stm-jukebox-playlist-container #stm-jukebox-playlist-queue .item-entry .item .stm-track-actions .drag-handle:active {
  cursor: grabbing;
}

#stm-toast {
  position: fixed;
  top: 1%;
  right: 1%;
  z-index: 1050;
}

/** BUTTONS **/
.gp-theme .stm-action-button {
  padding: 4px 4px 2px 4px;
  position: relative;
  bottom: -6px;
}
.gp-theme button.no-styles {
  padding: 0;
  background: none;
}

/* BOOTSTRAP BUTTONS */
.gp-theme .btn {
  transition: all 0.4s !important;
  padding: 10px 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.gp-theme .btn:first-child:active, .gp-theme .btn:focus-visible, .gp-theme .btn:not(.btn-check) + .btn:active, .gp-theme .btn.show {
  background: var(--gp-button-bg-color-hover, var(--gp-secondary-color));
  color: var(--gp-button-text-color);
  border: 1px solid var(--gp-button-bg-color-hover, var(--gp-secondary-color));
}
.gp-theme .btn-primary.btn {
  background-color: var(--gp-primary-color);
  color: var(--gp-misc-bg-color);
  border: 1px solid var(--gp-primary-color);
}
.gp-theme .btn-primary.btn:hover, .gp-theme .btn-primary.btn:active {
  background: var(--gp-button-bg-color-hover, var(--gp-secondary-color));
  color: var(--gp-button-text-color);
  border: 1px solid var(--gp-button-bg-color-hover, var(--gp-secondary-color));
}
.gp-theme .btn-secondary.btn:hover, .gp-theme .btn-secondary.btn:focus, .gp-theme .btn-secondary.btn:active, .gp-theme .btn-secondary.btn.active {
  color: var(--gp-misc-bg-color);
}
.gp-theme .btn-secondary.btn:active,
.gp-theme .btn-secondary.btn .active {
  background-color: var(--gp-misc-border-color);
  color: var(--gp-misc-bg-color);
  border: 1px solid var(--gp-misc-border-color);
}
.gp-theme .btn-close:hover {
  background-color: transparent;
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
}

/* BOOTSTRAP DROPDOWNS */
.gp-theme .dropdown-item:active {
  background-color: var(--gp-primary-color);
  border: 0 !important;
}

/** TRACK LISTINGS **/
.tracks-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}
.tracks-list .list-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  padding: 0 10px 10px 10px;
}
.tracks-list .list-title {
  justify-content: flex-start;
  margin: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--gp-strong-font-weight);
}
.tracks-list .item-avatar {
  margin-bottom: 15px;
}
.tracks-list .gp-bp-loop-meta {
  justify-content: flex-start;
}

/** BUDDYPRESS PROFILE **/
/* Hide BuddyPress secondary nav on custom tab */
body.bp-user.jukebox-activity .bp-subnavs,
body.bp-user.custom-playlists .bp-subnavs {
  display: none !important;
}

@media only screen and (min-width: 768px) {
  .tracks-list > li {
    position: relative;
    width: 25%;
  }
}/*# sourceMappingURL=stm-jukebox-public.css.map */