div.player-status{
  background-color: #1e1c2b;
  color: #fff;
  height: 4em;
  display: flex;
  transition: all 250ms ease;
  div.player-track {
    // height: 3em;
    display: inline-block;
    flex-grow: 100;
    margin-left: 2em;
  }
  div.player-controls  {
    transition: all 250ms ease;
    height: 4em;
    display: inline-block;
    /* vertical-align: middle; */
    line-height: 4em;
    margin: 0 1em;
    padding-left: 1em;
  }

  div.player-controls > span {
    vertical-align: middle;
    color: #8188a1;
    &.enabled {
      color: #f5f7fb;
      cursor: pointer;
    }
  }

  span.pt-icon-step-backward.play-previous {
      font-size: 20px;
  }

  span.toggle-playback {
    font-size: 32px;
    margin-left: 3px;
  }

  span.pt-icon-step-forward.play-previous {
      font-size: 20px;
  }
  span.right-controls {
    display: inline-block;
    float: right;
    margin-right: 28px;
    &> span {
      vertical-align: text-top;
      &.fav-track {
        
        font-size: 20px;
        margin-right: 5px;
        margin-top: -4px;

      }
      &.track-duration {
        width: 90px;
        display: inline-block;
      }
    }
  }
  .player-name {
    transition: all 250ms ease;
      margin-top: 1.1em;
  }

  .player-audio {
      margin-top: 0.3em;
      margin-right: 2em;
  }
  .player-actions {
    margin-top:  3px;
  } 
  div.player-actions > div {
    display: inline-block;
    vertical-align: middle;
  }
  span.artist-name::before {
      content: "–";
      margin: 0 0.5em;
  }
  .logout-button {

    span.pt-icon {
      margin: 0.8em 1.6em 0.8em 0.8em;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .pt-slider {
    width: 96px;
    min-width: 21px;
    height: 10px;

  }

  .pt-slider-track {
      max-width: 75px;
      top: 3px;
      height: 5px;
  }

  .pt-slider-progress {
    top: 3px;
    height: 5px;
  }

  span.pt-slider-handle {border-radius: 420px;height: 10px;width: 10px;/* top: 2px; */}

  div.toggle-expand {
    position: absolute;
    top: 42px;
    right: 16%;
    z-index: 20;
    color: black;
    background-color: white;
    padding: 6px 7px 4px 7px;
    border-radius: 50px;
    box-shadow: 0 0 3px black;
    cursor: pointer;
    opacity: 0.6;
    transition: all ease 200ms;
    &:hover {
      opacity: 1;
      transition: all ease 200ms;
    }
  }
  
  .fav-track {
    display: inline-block;
  }
}

div.player-status.expanded {
  transition: all 250ms ease;
  height: 8em;
  display: flex;
  div.player-track {
  }
  div.player-controls  {
    transition: all 250ms ease;
    height: 8em;
    display: inline-block;
    /* vertical-align: middle; */
    line-height: 8em;
    margin: 0 1em;
  }

  div.player-controls > span {
  }

  .player-name {
    transition: all 250ms ease;
    margin-top: 1.5em;
  }

  .player-audio {
      margin-top: 0.3em;
      transition: all 250ms ease;
  }
  .player-actions {
    margin-top:  3px;
    transition: all 250ms ease;
  } 
  div.player-actions > div {
    vertical-align: middle;
  }
  .logout-button {

  }
  
  span.pt-slider-handle {border-radius: 420px;height: 10px;width: 10px;/* top: 2px; */}
  div.toggle-expand {
    top: 98px;
    transform: rotateZ(180deg);
    transition: all 200ms ease;
  }
}