.player-wrapper {
  display: flex;
  padding: 12px 40px 9px;
}

.player-wrapper .player {
  flex-grow: 1;
  padding-left: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.player-wrapper .player-meta {
  display: flex;
  width: 350px;
  flex-direction: row;
  align-items: center;
  border-right: 2px solid #d9e4e7;
  padding-right: 30px;
}

.player-wrapper .player-name-artist {
  overflow: hidden;
}

.player-wrapper .player-name, .player-wrapper .player-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000de;
}

.player-wrapper .player-artist {
  font-size: 12px;
}

.player-wrapper .player-album-art {
  min-height: 48px;
  min-width: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  position: relative;
  justify-content: center;
}

.player-wrapper .player-album-art img {
  min-height: 48px;
  display: inline-block;
  position: absolute;
}

.player .plyr__controls {
  padding: 0;
  border: 0;
}

.player .plyr {
  position: static;
  min-width: inherit;
}

.plyr .plyr__progress {
  width: 100vw;
  position: absolute;
  top: -10px;
  left: 0;
}

.plyr--audio .plyr__controls button, .plyr--audio .plyr__controls {
  border-radius: 50%;
}

.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover {
  background: #ccdbdf;
}

progress.plyr__progress--played[value]::-webkit-progress-value {
  background-image: linear-gradient(-90deg, #F44336 0%, #FFA726 100%);

}

progress.plyr__volume--display[value]::-webkit-progress-value {
  background-image: linear-gradient(-90deg, #F44336 0%, #FFA726 100%);

}

.plyr__progress--buffer, .plyr__progress--played, .plyr__volume--display {
  height: 4px;
}

.plyr--audio .plyr__volume--display {
  height: 2px;
}

.plyr__progress--buffer, .plyr__progress--played, .plyr__volume--display {
  top: 58%;
}

.player .plyr input[type="range"]::-webkit-slider-thumb {
  /*background:#FF6E2C;*/
}

.player .plyr input[type="range"]:active::-webkit-slider-thumb {
  background: #FF6E2C;
}

.plyr .volume-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
}

/*// Change icons on state change*/
.plyr--fullscreen-active .icon--exit-fullscreen,
.plyr--muted .plyr__controls .icon--muted,
.plyr--captions-active .plyr__controls .icon--captions-on {
  display: block;
}

.plyr--fullscreen-active .icon--exit-fullscreen + img,
.plyr--muted .plyr__controls .icon--muted + img,
.plyr--captions-active .plyr__controls .icon--captions-on + img {
  display: none;
}

.player .plyr__controls [data-plyr=play] {
  margin-left: 0;
}

.player-queue.active .queue-active, .player-queue .queue-default {
  display: inline;
}

.player-queue.active .queue-default, .player-queue .queue-active {
  display: none;
}

@media only screen and (max-width: 400px) {
  .plyr .volume-wrapper {
    display: none;
  }
}

@media only screen and (max-width: 768px) {

  .player-wrapper {
    padding: 12px 28px 9px;

  }

  .player-wrapper .player-meta {
    width: 240px;
  }

  .plyr .plyr__volume {
    display: none;
  }
}

@media only screen and (max-width: 540px) {
  .plyr .volume-wrapper{
    display: none;
  }

  .player-queue{
    margin-left: auto !important;
  }
}

@media only screen and (max-width: 450px) {
  .player-wrapper .player-meta {
    width: 180px;
    padding-right: 0px;
    border-right-width: 0px;
  }
}

@media only screen and (min-width: 961px) {
  .plyr__controls button.player-queue {
    display: none;
  }
}
