@charset "utf-8";
/* CSS Document */
*:focus
{
    outline: none;
}

#app-cover
{
    display: block;
    position: absolute;
    top: 50%;
    left: calc(100% - 440px);
    width: 430px;
    height: 100px;
    margin: -4px auto;
}

#app-cover.off
{
    display: none;
    left: -9999;
}

#player
{
    position: relative;
    height: 100%;
    z-index: 3;
}

#player-track
{
    position: absolute;
    top: 0;
    right: 15px;
    left: 15px;
    padding: 13px 22px 10px 184px;
    background-color: #fff7f7;
    border-radius: 15px 15px 0 0;
    transition: 0.3s ease top;
    z-index: 1;
}

#player-track.active
{
    top: -92px;
}

#album-name
{
    color: #54576f;
    font-size: 17px;
    font-weight: bold;
}

#track-name
{
    color: #acaebd;
    font-size: 13px;
    margin: 2px 0 13px 0;
}

#track-time
{
    height: 12px;
    margin-bottom: 3px;
    overflow: hidden;
}

#current-time
{
    float: left;
}

#track-length
{
    float: right;
}

#current-time, #track-length
{
    color: transparent;
    font-size: 11px;
    background-color: #ffe8ee;
    border-radius: 10px;
    transition: 0.3s ease all;
}

#track-time.active #current-time, #track-time.active #track-length
{
    color: #f86d92;
    background-color: transparent;
}

#s-area, #seek-bar
{
    position: relative;
    height: 4px;
    border-radius: 4px;
}

#s-area
{
    background-color:#ffe8ee;
    cursor: pointer;
}

#ins-time
{
    position: absolute;
    top: -29px;
    color: #fff;
    font-size: 12px;
    white-space: pre;
    padding: 5px 6px;
    border-radius: 4px;
	display:none;
}

#s-hover
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    z-index: 2;
}

#ins-time, #s-hover
{
    background-color: #3b3d50;
}

#seek-bar
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #fd6d94;
    transition: 0.2s ease width;
    z-index: 1;
}

#player-content
{
    position: relative;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 30px 80px #656565;
    border-radius: 15px;
    z-index: 2;
}

#album-art
{
    position: absolute;
    top: -40px;
    width: 115px;
    height: 115px;
    margin-left: 40px;
    transform: rotateZ(0);
    transition: 0.3s ease all;
    box-shadow: 0 0 0 10px #fff;
    border-radius: 50%;
    overflow: hidden;
}

#album-art.active
{
    top: -60px;
    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before
{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px auto 0 auto;
    background-color: #d6dee7;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    z-index: 2;
}

#album-art img
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

#album-art img.active
{
    opacity: 1;
    z-index: 1;
}

#album-art.active img.active
{
    z-index: 1;
    animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@keyframes rotateAlbumArt
{
    0%{ transform: rotateZ(0); }
    100%{ transform: rotateZ(360deg); }
}

#buffer-box
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 13px;
    color: #1f1f1f;
    font-size: 13px;
    font-family: Helvetica;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    padding: 6px;
    margin: -12px auto 0 auto;
    background-color: rgba(255, 255, 255, 0.19);
    opacity: 0;
    z-index: 2;
}

#album-art img, #buffer-box
{
    transition: 0.1s linear all;
}

#album-art.buffering img
{
    opacity: 0.25;
}

#album-art.buffering img.active
{
    opacity: 0.8;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box
{
    opacity: 1;
}

#player-controls
{
    width: 250px;
    height: 100%;
    margin: 0 5px 0 141px;
    float: right;
    overflow: hidden;
}

.control
{
    width: 33.333%;
    float: left;
    padding: 12px 0;
}

.button
{
    width: 26px;
    height: 26px;
    padding: 25px;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.button i
{
    display: block;
    color: #d6dee7;
    font-size: 26px;
    text-align: center;
    line-height: 1;
}

.button, .button i
{
    transition: 0.2s ease all;
}

.button:hover
{
    background-color: #d6d6de;
}

.button:hover i
{
    color: #fff;
}

#ytd-url {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  margin: 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  background-color: #ae5f87;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(174, 95, 135, 0.86);
  z-index: 125;
}

#volume_up_open{
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  position: absolute;
  color:#bababa;
  display:block;
  text-align:left;
  left: 15px;
  top: 70px;
  margin:0px;
  font-size:18px;
  cursor: pointer;
}
#volume_up_open:hover{
  color:#f0690b;
}















.class_player{
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  position:absolute;
  width:auto;
  height:auto;
  margin:80px auto;
  top: -210px;
  left: -15px;
  opacity: 0;
}

.class_player.on{
    opacity: 1;
}

.class_player > .top-pane{
  position:absolute;
  right:65px;
  top:5px;
  z-index:10;
}

.top-pane > a{
  display:inline-block;
  text-decoration:none;
  color:#000;
  -webkit-font-smoothing:subpixel-antialiased;
  transition:color 420ms;
  margin:5px;
  /* Err i am a lil bit too sleepy i guess */
}

.top-pane > a:hover{
  color:#f0690b;
}

.class_player > .volume{
  width:70px;
  height:210px;
  top:20px;
  z-index:0;
  left:-40px;
  position:absolute;
  background:#fff;
  box-shadow:0px 4px 10px -4px rgba(0,0,0,0.6);
  border-top-left-radius:8px;
  border-top-right-radius: 50px;
  border-bottom-left-radius:8px;
  clip-path: polygon(0 0, 0 0, 0 0, 85% 0%, 85% 53%, 100% 53%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);
}

.volume > h2{
  color:#bababa;
  display:block;
  text-align:left;
  margin:0px;
  font-size:18px;
  padding:5px 0px 5px 36px;
  transform:scaleX(-1.0);
}
.volume > h2:hover{
  color:#f0690b;
}
.volume > ul{
  padding:0px 10px 0px 32px;
  margin:0px;
  height:114px;
  list-style:none;
  display:block;
  transform:scaleX(-1.0);
}
.listvol{
  position:relative;
  display:display;
  margin:5px 0px;
  height:4px;
  border-radius:3px;
  background:#ccc;
}

.listvol::before,.listvol::after{
  content:' ';
  position:absolute;
  top:-5px;
  height:5px;
  width: calc(100% - 30px);
  display:block;  
}
.listvol::after{
  top:10px;
}
.listvol > .filler{
  display:block;
  background:#f0690b;
  border-radius:3px;
  height:100%;
  width:0%;
  transition:width 100ms;
}

.listvol:hover > .filler,.listvol:hover ~ .listvol > .filler{
  width:100%;
}

.listvol:nth-of-type(1){
  width:80%;
}
.listvol:nth-of-type(2){
  width:74%;  
}
.listvol:nth-of-type(3){
  width:68%;  
}
.listvol:nth-of-type(4){
  width:62%;
}
.listvol:nth-of-type(5){
  width:56%;
}
.listvol:nth-of-type(6){
  width:51%;
}
.listvol:nth-of-type(7){
  width:45%;
}
.listvol:nth-of-type(8){
  width:39%;  
}
.listvol:nth-of-type(9){
  width:33%;
}
.listvol:nth-of-type(10){
  width:27%;
}
.listvol:nth-of-type(11){
  width:21%;
}
.listvol:nth-of-type(12){
  width:15%;  
}
.listvol:nth-of-type(13){
  width:9%;
}



div.lower{
  border-top:1px solid #eee;
}

.volume > input{
  position:absolute;
  clip:rect(0,0,0,0);
}

#mute{
  line-height:24px;
  user-select:none;
  text-align:left;
  font-size:12px;
  display:block;
  cursor:pointer;
  color:#ccc;
  padding-top: 3px;
  padding-left: 15px;
}

#mute:hover{
  color:#f0690b;
}

input:checked ~ #mute{
  color:#f0690b;
}


.listvol.level .filler,.listvol.level ~ .listvol .filler{
  width:100%;
}

input:checked ~ ul .listvol > .filler,input:checked ~ ul .listvol.level ~ .listvol > .filler{
  width:0%;
}

h2{
  font-weight:400;
}

/* PS ... > is less exhaustive then " " */
.lower > .crazy-line{
  margin:-1px;
  border-top:1px solid #f0690b;
  width:0%;
  transition:800ms;

}
.loaded .lower > .crazy-line{
  width:100%;
}

.meter{
    overflow:hidden;
    position:relative;
    background:#eee;
    width:52px;
    height:52px;
    margin:-26px auto;
    border-radius:50px;
}

.meter > .filler{
  transition:200ms;
  transition-delay:160ms;
  position:absolute;
  border-radius:40px;
  height:52px;
  background:#f0690b;
}

.loaded .meter > .filler{
  width:52px;
}