:root {

  --sliderC1: #c933cc;
  --sliderC2: #c933cc;
  --sliderC3: #c933cc;
  --sliderC4: #c933cc;
  --sliderC5: #c933cc;
}


.audio-left {
    display: inline-block;
    vertical-align: top;
}

.audio-left img {
    max-width: 120px;
    image-rendering: pixelated;
}

.audio-right {
    display: inline-block;
    max-width: 265px;
}

.audio-bottom {
    display: block;
}

.audio-bottom .controls {
    display: inline-block;
}

.audio-bottom .controls button {
    min-width: 25px;
}

.song-name p {
    font-family: "pixelifysans";
    font-size: 18pt;
    margin: 5px;
}

.song-artist p {
    font-size: 14pt;
    margin: 5px;
    font-family: "pixelifysans";
}

#volume-output {
    margin-left: 10px;
}

#volume-slider {
    margin: 10px 2.5%;
    width: 90%;
}
#volume-slider::-webkit-slider-runnable-track {
    background: #aa47d8d0
}
#volume-slider::-moz-range-track {
    background: #aa47d8d0
}
#volume-slider::-ms-fill-upper {
    background: #aa47d8d0
}
#volume-slider::before {
    width: var(--volume-before-width);
}

/*  Stylinf the input slider (hiding it to customise */

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/*  Stylinf the input slider (customising dragging thing) */

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #370080;
  height: 26px;
  width: 26px;
  border-radius: 20px;
  background: url(/icon/paw_slider_back.png);
  background-size: 100%;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid hsl(266, 100%, 25%);
  height: 26px;
  width: 26px;
  border-radius: 20px;
  background: url(/icon/paw_slider_back.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #370080;
  height: 26px;
  width: 26px;
  border-radius: 20px;
  background: url(/icon/paw_slider_back.png);
  background-size: 10%;
}

/* For the slider bar track itself */

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: linear-gradient(to right, #aa47d8af var(--buffered-width), #aa47d842 var(--buffered-width));
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type="range"]::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: var(--seek-before-width);
    height: 3px;
    background-color: #007db5;
    cursor: pointer;
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #007db5;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #aa47d8;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: 
  linear-gradient(to right, #aa47d8af var(--buffered-width), #aa47d842 var(--buffered-width));
  /*#aa47d8;*/
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #aa47d8;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #aa47d8;
}
input[type=range]::-ms-fill-upper {
  background: linear-gradient(to right, #aa47d8af var(--buffered-width), #aa47d842 var(--buffered-width));
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #aa47d8;
}

.audio-play-icon {
  background-color: white;
  -webkit-mask: url(/icon/play-fill.svg) no-repeat center;
  mask: url(/icon/play-fill.svg) no-repeat center;
  min-width: 20px;
}

.audio-pause-icon {
  background-color: white;
  -webkit-mask: url(/icon/pause-fill.svg) no-repeat center;
  mask: url(/icon/pause-fill.svg) no-repeat center;
  min-width: 20px;
}

.audio-skip-icon {
  background-color: white;
  -webkit-mask: url(/icon/skip-end-fill.svg) no-repeat center;
  mask: url(/icon/skip-end-fill.svg) no-repeat center;
  min-width: 20px;
}

.audio-mute-icon {
  background-color: white;
  -webkit-mask: url(/icon/volume-mute-fill.svg) no-repeat center;
  mask: url(/icon/volume-mute-fill.svg) no-repeat center;
  min-width: 20px;
}
.audio-sound-icon {
  background-color: white;
  -webkit-mask: url(/icon/sound-on-solid.svg) no-repeat center;
  mask: url(/icon/sound-on-solid.svg) no-repeat center;
  min-width: 20px;
}

.currently-playing {
  /*color: rgb(43, 213, 255) !important;*/
  font-weight: 600;
  text-decoration: underline;
}

.playlist-name {
  font-size: 20pt;
  font-weight: 700;
  text-align: center;
}

.playlist-selector {
  text-align: center;
  display: flex;
}

.playlist-box {
  width: 45%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  border: 3px rgb(248, 160, 241) solid;
  border-radius: 7px;
  margin: 5px;
  display: inline-flex;
  background-size: cover;
  vertical-align: middle;
}

.playlist-box:hover {
  scale: 1.1;
}

.playlist-box-text {
  text-align: center;
  align-self: flex-end;
  width: 100%;
  text-shadow: black 1px 2px 2px;
}

/* For Smaller Screens */
@media screen and (max-width: 1650px) {
  .playlist-box {
  max-width: 100px;
}
}

.songIcon {
  display: inline-block;
  max-width: 40px;
  border-radius: 2px;
}
.songSelect {
  padding: 5px;
  display: flex;
  align-items: center;
}
.songSelectText {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  color: inherit;
}
.songSelect:nth-child(odd)
{
  background-color: rgb(160, 37, 231);
}

.songSelect:nth-child(even)
{
  background-color: rgb(123, 19, 184);
}


/* Amp Slider */

.amp-slider {
  display: inline-block;
  width: fit-content;
  margin: 2px 3px 2px 3px;
  text-align: center;
}
.amp-text {
  font-size: 10pt;
}
.amp-range {
    -webkit-appearance: none;
    min-height: 160px !important;
    border-radius: 15px;
    background: #ccc;
    outline: none;
    writing-mode: vertical-lr;
    -webkit-appearance: slider-vertical; /* WebKit */
    direction: rtl;
    width: unset !important;
    
  }

  .amp-range::-webkit-slider-runnable-track {
    border-radius: 40px !important;
    max-width: 20px;
  }

.amp-range::-moz-range-track {
    -webkit-appearance: none;
    min-height: 160px !important;
    border-radius: 5px;
    background: #ccc;
    outline: none;
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical; /* WebKit */
    
  }

.amp-range::-webkit-slider-thumb {
  border-radius: 2px !important;
  margin: -4px;
}

/* All the same stuff for Firefox */
.amp-range::-moz-range-thumb {
  border-radius: 2px !important;
}

/* All the same stuff for IE */
.amp-range::-ms-thumb {
  border-radius: 2px !important;
  margin: 0;
}

.amp-range::-moz-range-track {
  border-radius: 7px !important;
}


.sliderC1 {
    background: var(--sliderC1) !important;
}

.sliderC2 {
    background: var(--sliderC2) !important;
}

.sliderC3 {
    background: var(--sliderC3) !important;
}

.sliderC4 {
    background: var(--sliderC4) !important;
}

.sliderC5 {
    background: var(--sliderC5) !important;
}


/* Lines for eq graph */
.line {
    position: absolute; /* allows to position it anywhere */
    width: 3px; /* your chosen line width */
    background-color: #06a; /* line color */
    z-index: 1000; /* make sure this is above your other elements */
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}