.app-components-player-animationwrapper-animationwrapper--backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  pointer-events: none;
}

.app-components-player-animationwrapper-animationwrapper--backdropExpanded {
  z-index: 8;
  pointer-events: normal;
}

.app-components-player-animationwrapper-animationwrapper--wrapper {
  position: fixed;

  /* bottom player + margin */
  top: calc(100% - 56px - 1px);
  z-index: 5;
  width: 100%;
  height: calc(100% - 8px);
  overflow: hidden;
  background-color: var(--bg);
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {

.app-components-player-animationwrapper-animationwrapper--wrapper {
    position: relative;
    top: auto;
    bottom: 0;
    z-index: 500;
    height: 74px;
    padding: 0 20px 0 0;
    overflow: visible
}
  }

@media (min-width: 1630px) {

.app-components-player-animationwrapper-animationwrapper--wrapper {
    padding-left: 30px
}
  }

.app-components-player-animationwrapper-animationwrapper--wrapper + footer {
    /* Add space for footer when player is active */
    padding-bottom: 80px;
  }

@media only screen and (max-width: 40em) {

.app-components-player-animationwrapper-animationwrapper--wrapper + footer {
      padding-bottom: 60px
  }
    }

.app-components-player-animationwrapper-animationwrapper--wrapperExpanded {
  z-index: 9;
  border-top-width: 0;
  border-radius: 8px;
}

.app-components-player-mobilebar-mobilebar--wrapper {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  -webkit-align-items: center;
          align-items: center;
  height: 56px;
}

  @media (min-width: 768px) {.app-components-player-mobilebar-mobilebar--wrapper {
    display: none
}
  }

.app-components-player-mobilebar-mobilebar--collapsed,
.app-components-player-mobilebar-mobilebar--expanded {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.app-components-player-mobilebar-mobilebar--expanded {
  position: absolute;
  top: 0;
  left: 0;
}

.app-components-player-mobilebar-mobilebar--toggleButton {
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 32px;
  overflow: hidden;
  text-align: left;
}

.app-components-player-mobilebar-mobilebar--toggleButton > div {
    width: 100%;
    padding-right: 15px;
  }

.app-components-player-mobilebar-mobilebar--toggleButton svg {
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
  }

.app-components-player-mobilebar-mobilebar--toggleButton svg path {
      stroke: var(--text);
    }

.app-components-player-mobilebar-mobilebar--toggleButtonExpanded {
  width: auto;
  padding-left: 20px;
}

.app-components-player-mobilebar-mobilebar--toggleButtonExpanded svg {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

.app-components-player-mobilebar-mobilebar--playButton {
  margin-right: 15px;
  margin-left: 12px;
}

.app-components-player-mobilebar-mobilebar--playButton path {
    fill: var(--text) !important;
  }

.app-components-player-mobilebar-mobilebar--title {
  margin-bottom: 3px;
  overflow: hidden;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-components-player-mobilebar-mobilebar--artistName {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.app-components-player-mobilebar-mobilebar--dotsButton {
  height: 100%;
  margin-left: 26px;
  padding: 19px 0 11px;
}

.app-components-player-mobilebar-mobilebar--context {
  color: var(--text);
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}

.app-components-player-mobilebar-mobilebar--context:hover,
  .app-components-player-mobilebar-mobilebar--context:focus {
    color: var(--text);
  }

.app-components-player-mobilebar-mobilebar--context span {
    display: block;
    color: inherit;
    font-weight: 500;
    text-align: center;
  }

.app-components-player-mobilebar-mobilebar--playingFrom {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
}

.app-components-player-progressbar-progressbar--progress {
  position: absolute;
  top: 53px;
  right: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 3px;
  background-color: var(--brand);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: -webkit-transform 150ms cubic-bezier(0, 0.715, 0.345, 1);
  transition: transform 150ms cubic-bezier(0, 0.715, 0.345, 1);
  transition: transform 150ms cubic-bezier(0, 0.715, 0.345, 1), -webkit-transform 150ms cubic-bezier(0, 0.715, 0.345, 1);
}

.app-components-player-player--inner {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
  max-width: var(--siteMaxWidth2);
  height: calc(100% - 56px);
  margin: 0 auto;
  padding-bottom: 30px;
}

  @media (min-height: 600px) {.app-components-player-player--inner {
    padding-top: 15%
}
  }

  @media (min-width: 768px) {.app-components-player-player--inner {
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: center;
            justify-content: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0
}
  }

.app-components-player-player--button {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  margin-left: 21px;
}

.app-components-player-player--downloadButton {
  margin-left: 30px;
}

.app-components-player-player--waveform {
  height: 70%;
}

.app-components-player-player--waveformExpanded {
  width: calc(100% - 60px);
  height: 40px;
  min-height: 40px;
  margin-bottom: 20px;
}

.app-components-player-player--goToTrackButton {
  display: -webkit-flex;
  display: flex;
  width: calc(100% - 60px);
  padding: 11px 17px 12px;
  color: var(--text);
  font-weight: 500;
  font-size: 16px;
  border-width: 1px;
  border-color: var(--border);
}

.app-components-player-player--goToTrackButton:hover,
  .app-components-player-player--goToTrackButton:focus {
    color: var(--text);
    border-color: var(--borderSelected);
  }

.app-components-player-controls-controls--wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  padding-right: 50px;
}

  .app-components-player-controls-controls--wrapper button,
  .app-components-player-controls-controls--wrapper a {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    -webkit-transform-origin: center;
            transform-origin: center;
    transition: -webkit-transform 300ms cubic-bezier(0, 0.715, 0.345, 1);
    transition: transform 300ms cubic-bezier(0, 0.715, 0.345, 1);
    transition: transform 300ms cubic-bezier(0, 0.715, 0.345, 1), -webkit-transform 300ms cubic-bezier(0, 0.715, 0.345, 1);
    will-change: transform;
  }

  .app-components-player-controls-controls--wrapper button path, .app-components-player-controls-controls--wrapper a path {
      fill: var(--text);
    }

  .app-components-player-controls-controls--wrapper button[disabled], .app-components-player-controls-controls--wrapper a[disabled] {
      opacity: 0.3;
      pointer-events: none;
    }

.app-components-player-controls-controls--expandedWrapper {
  margin-bottom: 20px;
  padding-right: 0;
}

button.app-components-player-controls-controls--playButton {
  width: 42px;
  height: 42px;
  margin: 0 20px;
}

button.app-components-player-controls-controls--playButton svg {
    display: block !important;
    width: 34px;
    height: 34px;
  }

button.app-components-player-controls-controls--playButton svg path:last-of-type {
      fill: var(--text);
    }

button.app-components-player-controls-controls--playButtonExpanded {
  width: 45px;
  height: 45px;
}

button.app-components-player-controls-controls--playButtonExpanded svg {
    width: 45px !important;
    height: 45px !important;
  }

button.app-components-player-controls-controls--prevButton,
button.app-components-player-controls-controls--nextButton {
  width: 19px;
  opacity: 1 !important;
}

button.app-components-player-controls-controls--prevButton svg, button.app-components-player-controls-controls--nextButton svg {
    width: 17px;
    height: 19px;
  }

.app-components-player-controls-controls--prevButton {
  margin-left: 27px;
}

.app-components-player-controls-controls--prevButtonExpanded {
  margin-left: 42px;
}

.app-components-player-controls-controls--nextButton {
  margin-right: 42px;
}

.app-components-player-controls-controls--toggleLoopButton {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  width: 30px;
  height: 30px;
  background-color: var(--text);
  border-radius: 50%;
}

.app-components-player-controls-controls--toggleLoopButton:active,
  .app-components-player-controls-controls--toggleLoopButton:focus,
  .app-components-player-controls-controls--toggleLoopButton:hover {
    background-color: var(--text);
  }

.app-components-player-controls-controls--toggleLoopButton svg {
    width: 14px;
  }

.app-components-player-controls-controls--toggleLoopButton svg path {
      fill: var(--bg);
    }

.app-components-player-controls-controls--loopButtonsContainer {
  position: relative;
}

.app-components-player-controls-controls--toggleLoopButtonHidden {
  opacity: 0;
  pointer-events: none;
}

.app-components-player-controls-controls--loopLoading {
  -webkit-animation: app-components-player-controls-controls--spin 1.5s cubic-bezier(0.29, 0.69, 0.44, 0.93) infinite;
          animation: app-components-player-controls-controls--spin 1.5s cubic-bezier(0.29, 0.69, 0.44, 0.93) infinite;
}

.app-components-player-controls-controls--loopButtonExpanded {
  position: absolute;
  top: 3px;
  left: 4px;
}

.app-components-player-controls-controls--loopButtonExpanded span {
    color: var(--text) !important;
  }

.app-components-player-controls-controls--loopButtonExpanded path {
    fill: var(--text) !important;
  }

.app-components-player-controls-controls--downloadButton.app-components-player-controls-controls--downloadButton button {
  width: 30px;
  height: 30px;
}

.app-components-player-controls-controls--downloadButton.app-components-player-controls-controls--downloadButton button svg {
    width: 30px;
  }

.app-components-player-loopbutton-loopbutton--wrapper {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  width: 22px;
}

  @media only screen and (max-width: 40em) {

  .app-components-player-loopbutton-loopbutton--wrapper button svg path {
      fill: var(--brand)
  }
    }

.app-components-player-loopbutton-loopbutton--iconLoop {
  width: 23px;
}

.app-components-player-loopbutton-loopbutton--iconLoopLoading {
}

.app-components-player-loopbutton-loopbutton--active {
  color: var(--brand);
}

.app-components-player-loopbutton-loopbutton--active path {
    fill: var(--brand) !important;
  }

.app-components-player-loopbutton-loopbutton--active .app-components-player-loopbutton-loopbutton--increase,
  .app-components-player-loopbutton-loopbutton--active .app-components-player-loopbutton-loopbutton--decrease {
    /* don't get overridden by global playbuttons; */
    -webkit-transform: translateY(-50%) scale(1) !important;
            transform: translateY(-50%) scale(1) !important;
    opacity: 1;
  }

.app-components-player-loopbutton-loopbutton--active .app-components-player-loopbutton-loopbutton--bars {
    color: var(--brand);
  }

.app-components-player-loopbutton-loopbutton--isLoading .app-components-player-loopbutton-loopbutton--iconLoopLoading {
    -webkit-animation: app-components-player-loopbutton-loopbutton--spin 1.5s cubic-bezier(0.29, 0.69, 0.44, 0.93) infinite;
            animation: app-components-player-loopbutton-loopbutton--spin 1.5s cubic-bezier(0.29, 0.69, 0.44, 0.93) infinite;
    pointer-events: none;
  }

@-webkit-keyframes app-components-player-loopbutton-loopbutton--spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes app-components-player-loopbutton-loopbutton--spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.app-components-player-loopbutton-loopbutton--toggle {
  -webkit-transform-origin: center;
          transform-origin: center;
}

.app-components-player-loopbutton-loopbutton--toggle path {
    transition: fill 200ms cubic-bezier(0, 0.715, 0.345, 1);
  }

.app-components-player-loopbutton-loopbutton--bars {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--text);
  font-weight: 600;
  font-size: 10px;
  -webkit-transform: translate(-46%, -54%);
          transform: translate(-46%, -54%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media only screen and (max-width: 40em) {

.app-components-player-loopbutton-loopbutton--bars {
    color: var(--brand)
}
  }

.app-components-player-loopbutton-loopbutton--increase,
.app-components-player-loopbutton-loopbutton--decrease {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  width: 15px;
  height: 15px;
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
  -webkit-transform: translateY(-50%) scale(0.2);
          transform: translateY(-50%) scale(0.2);
  opacity: 0;
  transition: all 200ms cubic-bezier(0.24, 0.58, 0.28, 1.53);
}

.app-components-player-loopbutton-loopbutton--increase:hover,
  .app-components-player-loopbutton-loopbutton--increase:focus,
  .app-components-player-loopbutton-loopbutton--decrease:hover,
  .app-components-player-loopbutton-loopbutton--decrease:focus {
    cursor: pointer;
  }

.app-components-player-loopbutton-loopbutton--increase[disabled], .app-components-player-loopbutton-loopbutton--decrease[disabled] {
    opacity: 0 !important;
  }

.no-focus-outline .app-components-player-loopbutton-loopbutton--increase,
  .no-focus-outline .app-components-player-loopbutton-loopbutton--decrease {
    outline: none;
  }

.app-components-player-loopbutton-loopbutton--decrease {
  left: -24px;
}

.app-components-player-loopbutton-loopbutton--increase {
  right: -24px;
}

.app-components-player-volumecontrol-volumecontrol--rollover {
  position: absolute;
  top: -171px;
  right: 50%;
  display: none;
  width: 45px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

  .app-components-player-volumecontrol-volumecontrol--rollover:before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    z-index: 3;
    display: block;
    margin-left: -8px;
    border: solid;
    border-width: 8px 8px 0 8px;
    border-color: var(--bg) transparent;
    content: '';
  }

  .app-components-player-volumecontrol-volumecontrol--rollover:after {
    position: absolute;
    bottom: -9px;
    left: 50%;
    z-index: 2;
    display: block;
    margin-left: -8px;
    border: solid;
    border-width: 8px 8px 0 8px;
    border-color: var(--border) transparent;
    content: '';
  }

.app-components-player-volumecontrol-volumecontrol--wrapper {
  position: relative;
  display: none;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
  margin-left: 21px;
}

@media (min-width: 768px) {

.app-components-player-volumecontrol-volumecontrol--wrapper {
    display: -webkit-flex;
    display: flex
}
  }

.app-components-player-volumecontrol-volumecontrol--wrapper button {
    display: -webkit-flex;
    display: flex;
  }

.app-components-player-volumecontrol-volumecontrol--wrapper svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.5px;
  }

.app-components-player-volumecontrol-volumecontrol--wrapper svg path {
      fill: var(--text);
    }

.app-components-player-volumecontrol-volumecontrol--wrapper svg path + path {
      fill: none;
      stroke: var(--text);
    }

.app-components-player-volumecontrol-volumecontrol--wrapper:hover,
  .app-components-player-volumecontrol-volumecontrol--wrapper:focus {
    cursor: pointer;
  }

.app-components-player-volumecontrol-volumecontrol--wrapper:hover .app-components-player-volumecontrol-volumecontrol--rollover, .app-components-player-volumecontrol-volumecontrol--wrapper:focus .app-components-player-volumecontrol-volumecontrol--rollover {
      display: block;
    }

.app-components-player-volumecontrol-volumecontrol--slider {
  position: relative;
  margin: 0;
}

.app-components-player-volumecontrol-volumecontrol--slider:after {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 200px;
    height: 200px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    content: '';
  }

.app-components-player-volumecontrol-volumecontrol--button:before {
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    left: -10px;
    content: '';
  }

.app-components-player-filtercontrol-filtercontrol--rollover {
  position: absolute;
  top: -171px;
  right: 50%;
  display: none;
  width: 45px;
  padding: 20px 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

  .app-components-player-filtercontrol-filtercontrol--rollover:before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    z-index: 3;
    display: block;
    margin-left: -8px;
    border: solid;
    border-width: 8px 8px 0 8px;
    border-color: var(--bg) transparent;
    content: '';
  }

  .app-components-player-filtercontrol-filtercontrol--rollover:after {
    position: absolute;
    bottom: -9px;
    left: 50%;
    z-index: 2;
    display: block;
    margin-left: -8px;
    border: solid;
    border-width: 8px 8px 0 8px;
    border-color: var(--border) transparent;
    content: '';
  }

.app-components-player-filtercontrol-filtercontrol--wrapper {
  position: relative;
  display: none;
  -webkit-align-items: center;
          align-items: center;
  height: 100%;
  margin-left: 21px;
}

@media (min-width: 768px) {

.app-components-player-filtercontrol-filtercontrol--wrapper {
    display: -webkit-flex;
    display: flex
}
  }

.app-components-player-filtercontrol-filtercontrol--wrapper:before {
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    left: -10px;
    content: '';
  }

.app-components-player-filtercontrol-filtercontrol--wrapper:hover,
  .app-components-player-filtercontrol-filtercontrol--wrapper:focus {
    cursor: pointer;
  }

.app-components-player-filtercontrol-filtercontrol--wrapper:hover .app-components-player-filtercontrol-filtercontrol--rollover, .app-components-player-filtercontrol-filtercontrol--wrapper:focus .app-components-player-filtercontrol-filtercontrol--rollover {
      display: block;
    }

.app-components-player-filtercontrol-filtercontrol--slider {
  margin: 0;
}

.app-components-player-filtercontrol-filtercontrol--icon {
  width: 22px;
  stroke-width: 1.5px;
}

.app-components-player-filtercontrol-filtercontrol--icon path {
    stroke: var(--text);
  }


/*# sourceMappingURL=0ffd2.css.map*/