/*
  1. Base
*/
/*
  2. Components

*/

#playerSlideButton {cursor:pointer;z-index:99;background:rgba(112, 112, 112,0.9);position:absolute;top:-22px;width:40px;height:22px;text-align:center;cursor:pointer;z-index:99;border-radius: 5px 5px 0 0;} 
/* so it can be used with other buttons */
.playerListenButton {cursor:pointer;} /* so it can be used with other buttons */
#playerSlideContainer {position:fixed;bottom:-95px;width:100%;display:inline-block;z-index:99;} /*-64px matches js script */
#playerSlideContent {width:100%;height:0px;display:inline-block; } /* -webkit-transition: 2s;-moz-transition: 2s;-ms-transition: 2s;-o-transition: 2s;transition: 2s; */
#playerSlideText {padding:0;}


.currently-playing-info{margin:0 0 0 0; padding:0;font-size:12px;}
.currently-playing-info img {width:40px;height:40px;float:left;display:inline-block;padding:0;}
.currently-playing-info-text {width:100%;height:auto;float:left;display:block;vertical-align:middle;text-align:left;padding:1px;}  
/* #player-image-small img[data-amplitude-song-info="cover_art_url"] {width:100%;height:auto;} */


div.amplitude-play-pause {background-size: cover;width:40px;height:40px;cursor:pointer;z-index:15;}

/* PLAYER CONTROLS - PLAY/PAUSE */
/* WHITE */
div#play-pause-container {margin:0;}
div#play-pause {cursor:pointer;z-index:15;}
div#play-pause.amplitude-paused {background: url("/frontend/images/play-circle-line.svg");background-size:cover;}
div#play-pause.amplitude-playing {background: url("/frontend/images/pause-circle-line.svg");background-size:cover;}
/*
div#play-pause.amplitude-paused {background: url("/frontend/images/main-play-white-circle.svg");background-size:cover;}
div#play-pause.amplitude-playing {background: url("/frontend/images/main-pause-white-circle.svg");background-size:cover;}
*/

/* BLACK */
div#play-pause-black {cursor:pointer;}
div#play-pause-black.amplitude-paused {background: url("/frontend/images/play-circle-filled-black.svg");background-size:cover;}
div#play-pause-black.amplitude-playing {background: url("/frontend/images/pause-circle-filled-black.svg");background-size:cover;}

div#skipto-container-back {background: url("/frontend/images/rewind-line-30.svg");background-size:cover;}
div#skipto-container-forward {background: url("/frontend/images/forward-line-30.svg");background-size:cover;}

/* EPISODE CONTROLS - PLAY/PAUSE */
div#play-pause-container-episode {position:relative;display:inline-block;padding:3px;height:30px;width:100%;overflow:hidden;}
div#play-pause-episode {cursor:pointer;}
div#play-pause-episode.amplitude-paused {background: url("/frontend/images/play-white-circle-filled.svg");background-size:cover;}
div#play-pause-episode.amplitude-playing {background: url("/frontend/images/pause-white-circle-filled.svg");background-size:cover;}



/* ====== STOP BUTTON ====== */
div#stop-container {}
div#stop-container img.stop {width:30px;background-size:cover;}
/*
div#stop-container img.stop {width:45px;background-size:cover;}
 ====== // STOP BUTTON ====== */

/* ====== // STOP BUTTON ====== */
div#share-container {width:auto;}
div.share {width:30px;height:30px;cursor:pointer;float:right;}

/* ====== PLAYER SKIPTO ====== */
div#skipto-container {margin:0;}
div#skipto-container-rewind {margin:0;}
div#skipto-container-forward {margin:0;}
div#skipto-container-rewind img{width:25px;height:25px;}
div#skipto-container-forward img{width:25px;height:25px;}
/* ====== // PLAYER SKIPTO ====== */



/* META CONTAINER */
div.meta-container {float: left;width: calc(100% - 84px);text-align: center;color: #fff;margin-top: 10px; }
div.meta-container span[data-amplitude-song-info="name"] {color: #fff;display:inline-block; }
div.meta-container span[data-amplitude-song-info="artist"] {color: #fff;display:inline-block; }

span[data-amplitude-song-info="name"] {color:#fff;display:block;}
span[data-amplitude-song-info="artist"] {color:#fff;display:block;}


/*
  Small only
*/
@media screen and (max-width: 39.9375em) 
{
div.amplitude-play-pause {background-size: cover;width: 30px;height: 30px; }
div.meta-container {width: calc(100% - 74px); } 
}

/* PROGRESS */
div#player-progress-bar-container {width:100%;height:5px;background-color:rgb(30,30,30);position:relative;margin:0 0 0 0;}
div#player-progress-bar-container progress#song-played-progress {width:100%;-webkit-appearance: none;-moz-appearance:none;height:5px;display:inline-block;position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 9;border: none;cursor: pointer;background: transparent; }
div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-bar {background: none; }
div#player-progress-bar-container progress#song-played-progress[value]::-webkit-progress-value {background:rgb(237,195,53); }
div#player-progress-bar-container progress#song-played-progress[value]::-moz-progress-bar {background:rgb(237,195,53); }
div#player-progress-bar-container progress#song-buffered-progress {width: 100%;-webkit-appearance: none;-moz-appearance:none;height:5px;display: block;position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 2;border: none;background: rgb(112, 112, 112); }
div#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-bar {background: none; }
div#player-progress-bar-container progress#song-buffered-progress[value]::-webkit-progress-value {background-color: rgb(112, 112, 112);transition: width 0.1s ease; }
div#player-progress-bar-container progress#song-buffered-progress[value]::-moz-progress-bar {background: rgb(112, 112, 112); }
/* // PROGRESS */

/* TIME */
div#time-container {font-size: 12px;margin:0;color:rgb(112,112,112);width:100%;background-color:transparent;font-weight:normal;
/*display:inline-block;*/}
div#time-container span.amplitude-duration-time {position:relative;display:inline-block;} 
/*top:0px;float:right;right:0px; */	  
div#time-container span.amplitude-current-time {position:relative;display:inline-block;}
/*top:0px;left:0px; */

div#time-container span.current-time {display:inline-block;} /* float: left; */
div#time-container span.duration {display:inline-block;} /* float: right; */

div#time-container-small {margin:1px;float:right;color:rgb(112,112,112);font-size:12px;font-weight:normal;}
div#time-container-small span.current-time {display:inline-block;} /*  */
div#time-container-small span.duration {display:inline-block;} /*  */

/* // TIME */

/* PLAYER CONTROLS - PREVIOUS */
div#prev-container {margin:0;float:right;padding-right:1px;}
div#prev-container div#previous {background: url("/frontend/images/previous.svg");width:24px;height:24px;cursor:pointer;}
div#prev-container div#previous:hover {background: url("/frontend/images/previous-hover.svg");}

/* NEXT */
div#next-container {margin:0;}
div#next-container div#next {background: url("/frontend/images/next.svg");width:24px;height:24px;cursor:pointer;}
div#next-container div#next:hover {background: url("/frontend/images/next-hover.svg"); }

/* REPEAT */
div#repeat-container {float: left;width: 20%;height:24px;padding-top:10px; }	
div#repeat-container div#repeat {background: url("/frontend/images/repeat.svg");width: 18px;height:20px;cursor: pointer;margin: auto;opacity: 0.7; }
div#repeat-container div#repeat:hover {background: url("/frontend/images/repeat-on.svg");opacity: 0.8; }
div#repeat-container div#repeat.amplitude-repeat-on {background: url("/frontend/images/repeat-on.svg");opacity: 1; }
div#repeat-container div#repeat.amplitude-repeat-on:hover {opacity: 1; }



/* ====== PLAY SPEED ====== */
div#playspeed-container {margin:0; /*font-size:12px;*/}

.playspeed-popover-on-hover {
  text-transform: lowercase;
  background: transparent;
/*  color: #fff; */
  cursor: pointer;
  /*font-family: "manrope", sans-serif;
  font-size: 14px;
  */
  margin: 0; /* 0 10px */
  padding: 0; /* 0 10px */
  position: relative;
  text-align: left;
/*  width: 60%; */
  z-index:99; 
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.playspeed-popover-on-hover .playspeed-bar {
/*  background: transparent; */
  bottom: 97%; /* 25% */
  background:rgb(237,195,53);
  color: rgb(30,30,30);
  display: block;
  margin-bottom: 0px; /* 20px */
  opacity: 0;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  text-align: left; 
  pointer-events: none;
  position: absolute;
  color:rgb(30,30,30);
  font-weight:bold;
  width: 35px; /* 100 % */
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 0 rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 0 rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 0 rgba(0, 0, 0, 0.28);
       -o-box-shadow: 0 rgba(0, 0, 0, 0.28);
          box-shadow: 0 rgba(0, 0, 0, 0.28);
}

.playspeed-popover-on-hover .playspeed-bar a{color:rgb(30,30,30);font-weight:normal;}

/* This bridges the gap so you can mouse into the volume-bar without it disappearing */
.playspeed-popover-on-hover .playspeed-bar:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  
 
.playspeed-popover-on-hover:hover .playspeed-bar {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .playspeed-popover-on-hover .playspeed-bar {
  display: none;
}

.lte8 .playspeed-popover-on-hover:hover .playspeed-bar {
  display: block;
}
/* === // playspeed-popover-on-hover === */

/* ====== // PLAYER SPEED ====== */



/* === player-volume-popover-on-hover === */

.player-volume-popover-on-hover {
  text-transform: uppercase;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-size: 20px;
  margin: 0;
  padding: 15px 0; /* 15px 20px */
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 99;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.player-volume-popover-on-hover .volume-bar {
/*  background: transparent; */
  bottom: 97%;
  color: #fff;
  display: block;
  left: -68px;
  margin-bottom: 0px;
  opacity: 0;
  padding: 20px 20px 20px 30px;
  pointer-events: none;
  position: absolute;
  border-radius: 5px;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 0 rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 0 rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 0 rgba(0, 0, 0, 0.28);
       -o-box-shadow: 0 rgba(0, 0, 0, 0.28);
          box-shadow: 0 rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the volume-bar without it disappearing */
.player-volume-popover-on-hover .volume-bar:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}    
 
.player-volume-popover-on-hover:hover .volume-bar {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .player-volume-popover-on-hover .volume-bar {
  display: none;
}

.lte8 .player-volume-popover-on-hover:hover .volume-bar {
  display: block;
}

/* === // player-volume-popover-on-hover === */


/* === volume slider === */
.volume-slider-container {
    border: 0px solid #eee;
    margin: 0px;
    padding: 0px;
    text-align: center;
    display:inline-block;
	bottom:-50px;
	right:50px;
	z-index:99;
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    width: 50px;
    border: 0px solid rgb(112,112,112);
    background-color: rgb(112,112,112);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(112,112,112)), to(rgb(120,120,120)));
    background-image: -webkit-linear-gradient(right, rgb(112,112,112), rgb(120,120,120));
    background-image: -moz-linear-gradient(right, rgb(112,112,112), rgb(120,120,120));
    background-image: -ms-linear-gradient(right, rgb(112,112,112), rgb(120,120,120));
    background-image: -o-linear-gradient(right, rgb(112,112,112), rgb(120,120,120))
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background-color: #eee;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(235, 205, 104)), to(rgb(235, 205, 104)));
    background-image: -webkit-linear-gradient(right, rgb(235, 205, 104), rgb(235, 205, 104));
    background-image: -moz-linear-gradient(right, rgb(235, 205, 104), rgb(235, 205, 104));
    background-image: -ms-linear-gradient(right, rgb(235, 205, 104), rgb(235, 205, 104));
    background-image: -o-linear-gradient(right, rgb(235, 205, 104), rgb(235, 205, 104))
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

/* set range from 0 - 1 vertically (lowest on top) */ 
.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-highest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

/* set range from 0 - 1 horizontal as by default */ 
.horizontal-lowest-first
{
     -webkit-transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -o-transform:rotate(0deg);
     -ms-transform:rotate(0deg);
     transform:rotate(0deg);
}

 .horizontal-highest-first
{
     -webkit-transform:rotate(180deg);
     -moz-transform:rotate(180deg);
     -o-transform:rotate(180deg);
     -ms-transform:rotate(180deg);
     transform:rotate(180deg);
}

/* === volume slider === */