/* Top Info */
#title {
  position: absolute;
  width: 100%;
  top: 3%;
  line-height: 34px;
  height: 34px;
  text-align: center;
  opacity: 0.9;
  font-size: 34px;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

#track {
  font-weight : 300;
  position    : absolute;
  font-family : var(--player-font);
  font-size   : var(--player-font-size);
  text-shadow : 2px 2px 1px #0008;
  left        : 8px;
  bottom      : 4px;
}

#timer {
  position: absolute;
  font-family: 'digital';
  top: 0px;
  left: 8px;
  text-align: left;
  font-size: 26px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.33);
}

#duration {
  position: absolute;
  font-family: 'digital';
  top: 0;
  right: 8px;
  text-align: right;
  font-size: 26px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.33);
}

/* Controls */

.btn {
  position            : absolute;
  cursor              : pointer;
  -webkit-filter      : drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  filter              : drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  -webkit-user-select : none;
  user-select         : none;
  background-size     : contain;
  background-repeat   : no-repeat;
  background-position : center;
}

#shufBtn,
#repBtn,
#prevBtn,
#nextBtn,
#playBtn,
#pauseBtn {
  font-size       : 32px;
  display         : flex;
  justify-content : center;
  align-items     : center;
  border-radius   : 100% ;
  width           : 32px;
  height          : 32px;
  pointer-events  : all;
  position        : absolute;
  top             : 3px;
}

#shufBtn,
#repBtn{
  font-size       : 16px;
}

#playBtn,
#pauseBtn {
  left            : calc( 50% - 16px);
}

#pauseBtn {
  display: none;
}

#repBtn[data-mode="REPEAT-ONE"]::after{
  content       : '1';
  font-size     : 8px;
  line-height   : 8px;
  vertical-align: bottom;
  position      : absolute;
  top           : 41%;
}
#repBtn[data-mode="NO-REPEAT"]{
  opacity       : 0.3;
}
#shufBtn[data-mode="NO-SHUFFLE"]{
  opacity       : 0.3;
}


.btn[data-enabled="false"]{
  opacity: 0.3;
  user-select: none;
  pointer-events: none !important;
}

#shufBtn { left : calc( calc(50% - 16px) - 244px ); }
#prevBtn { left : calc( calc(50% - 16px) - 144px ); }
#nextBtn { right: calc( calc(50% - 16px) - 144px ); }
#repBtn  { right: calc( calc(50% - 16px) - 244px ); }

.btn:active * {
  color: var(--accent-color) !important;
}

#volumeBtn:hover {
  opacity: 1;
}

#volumeBtn {
  opacity: 0;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVBQzMwNzBDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVBQzMwNzFDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRUFDMzA2RUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRUFDMzA2RkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtAZ+FgAAAHRSURBVHja7FjRbYMwEIWqC7CCO4IzgjMCHYEV6AjuCHSEMAKMkIwAI5ARXFt9rox1phDA5KMnPSGwOZ4fx/mOVCmVPIu9JE9ke5GRGpejyeQanUapkXlj5lzEIMM1GqjRAyG1eNCLCeAVyDQq9WOdRoHrDeDP7YCM8reGiNQYQER6D6DIGHDc02xFJsfqjF00GDEnRCaBegp+RmMp8oyYERcmAAvMvWl8aLSBuQ2O58D4Ff7eqJiZa4MTF1OYUsZAwF9BKaOw0tsf6pjx+wwVXWU41Pwk1DF2opQRK7+skDIyECMlrv8GfoztwMaW9K7XTqKMujeZV8SQma31eO0iNpkW8L/a3t02Yu7aITL8CDL2S2VE/jqsnnHJ3I8urnpKldhkOEFmdB6TTO7kFveVRScjoExLqBWVTIbsax765RFh7n74GoFMiQefCLXcbWFEhs/MFfeFZGon9fsx1I78PVDPyA3qmXyqnhEzV1lgRT124/rBSq+Dj/Pa7sDUPVesrEGRvUSZMlQ/rSmgCqc7qBZ0B7aQ37RVsb2QJOIp1DcNUDXbg4wFw2qV06j5ZCqQYSE/yYZ1LxVPvjJ86v50p/8ztr96X3JT+v+zKGDfAgwAZkMcn0x+AsMAAAAASUVORK5CYII=');
  width: 35px;
  height: 35px;
  top: 50%;
  right: 3%;
  margin: -17.5px auto;

}

/* Progress */
#waveform {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: transparent;
  margin: 0px !important;
  /* margin: -15% auto; */
  /* display: none; */
  cursor: col-resize;
  opacity: 0.8;
  -webkit-user-select: none;
  user-select: none;
}

#waveform:hover {
  opacity: 1;
}

#bar {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: transparent;
  /* box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); */
  opacity: 0.8;
}

#progress-wrapper {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#waveform-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#progress {
  position: absolute;
  top: 4px;
  left: 0;
  width: 0%;
  height: calc(100% - 8px);
  background-color: var(--accent-color);
  z-index: -1;
}

/* Playlist */
#list {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.list-song {
  width: 100%;
  height: 64px;
  max-height: 64px;
  font-size: 16px;
  line-height: 16px;
  text-align: left;
  font-weight: bold;
  color: var(--text-color);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  border-radius: 8px;
}

.list-song:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

/* Volume */
#volume {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: none;
}

.bar {
  position: absolute;
  top: 50%;
  left: 5%;
  margin: -5px auto;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

#barEmpty {
  width: 90%;
  opacity: 0.5;
  box-shadow: none;
  cursor: pointer;
}

#barFull {
  width: 90%;
}

#sliderBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 93.25%;
  margin: -25px auto;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
  border-radius: 25px;
  cursor: pointer;
}

/* Fade-In */
.fadeout {
  webkit-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
  animation: fadeout 0.5s;
}

.fadein {
  webkit-animation: fadein 0.5s;
  -ms-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-ms-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

a#track {
  z-index: 1000;
  color: var(--text-color) !important;
}

a#track:hover {
  color: var(--link-color) !important;
}

#analyzer {
  position        : absolute;
  display         : flex;
  justify-content : center;
  align-items     : self-end;
  width           : 100%;
  top             : 3px;
  left            : 0px;
  height          : calc(100% - 7px);
  pointer-events  : none;
  
}
.analyzer-bar {
  width: calc( 100% / 32 );
  margin-right: 2px;
  bottom: 0px;
  box-sizing: border-box;
}

.playbar[renderer="fire"],
.playbar[renderer="themed"],
.playbar[renderer="themed-reverse"],
.playbar[renderer="scanlines"] {
  background: repeating-linear-gradient(
    to top,
    var(--bg-content-blend) 0px,
    var(--bg-content-blend) 1px,   /* Color 1 for 1px */
    #000 1px,   /* Color 2 starts immediately */
    #000 2px    /* Color 2 ends at 2px, then repeats */
  );
}
.playbar[renderer="scanlines"] #analyzer {
  mix-blend-mode  : soft-light;
  background: repeating-linear-gradient(
    to top,
    var(--accent-color) 0px,
    var(--accent-color) 1px,   /* Color 1 for 1px */
    #000 1px,   /* Color 2 starts immediately */
    #000 2px    /* Color 2 ends at 2px, then repeats */
  );
}
.playbar[renderer="scanlines"] #analyzer .analyzer-bar {
  background: var(--link-color);
  mix-blend-mode  : screen;
}
.playbar[renderer="fire"] #analyzer .analyzer-bar {
  mix-blend-mode  : multiply;
  margin-right    : 0px;
  background      : linear-gradient(
    to top, 
    var(--text-color  )  0px, var(--text-color  )  5px, #0008 5px, #0000  8px,
    var(--text-color  )  8px, var(--text-color  ) 13px, #0008 13px,#0000 16px,
    var(--link-color  ) 16px, var(--link-color  ) 21px, #0008 21px,#0000 24px,
    var(--link-color  ) 24px, var(--link-color  ) 29px, #0008 20px,#0000 32px,
    var(--accent-color) 32px, var(--accent-color) 37px, #0008 37px,#0000 40px,
    var(--accent-color) 40px, var(--accent-color) 45px, #0008 45px,#0000 48px,
    var(--bg-sidebar  ) 48px, var(--bg-sidebar  ) 53px, #0008 53px,#0000 56px,
    var(--bg-content  ) 56px, var(--bg-content  ) 61px, #0008 61px,#0000 64px,
    #000 64px
  );
  border-left     : 3px #0000 solid;
  margin-left     : 3px;
  /* background      : linear-gradient(180deg, #00f, #f00, #800, #f80, #ff0, #fff); */
}
.playbar[renderer="themed"] #analyzer .analyzer-bar {
  background      : linear-gradient(180deg, var(--link-color), var(--accent-color, var(--text-color), var(--bg-sidebar)));
  mix-blend-mode  : overlay;
}
.playbar[renderer="themed-reverse"] #analyzer .analyzer-bar {
  background      : linear-gradient(0deg, var(--link-color), var(--accent-color, var(--text-color), var(--bg-sidebar)));
  mix-blend-mode  : multiply;
}
.playbar[renderer="vumeter"] #analyzer .analyzer-bar {
  background      : linear-gradient(
    to top, 
    #084  0px, #084  5px, #0008 5px, #0000  8px,
    #0f8  8px, #0f8 13px, #0008 13px,#0000 16px,
    #0f0 16px, #0f0 21px, #0008 21px,#0000 24px,
    #8f0 24px, #8f0 29px, #0008 20px,#0000 32px,
    #ff0 32px, #ff0 37px, #0008 37px,#0000 40px,
    #f80 40px, #f80 45px, #0008 45px,#0000 48px,
    #f40 48px, #f40 53px, #0008 53px,#0000 56px,
    #f00 56px, #f00 61px, #0008 61px,#0000 64px,
    #000 64px
  );
  border-left     : 3px #0000 solid;
  margin-left     : 3px;
  mix-blend-mode  : lighten;
  margin-right    : 0px;
}