:root {
    --text-color: #800c;
    --bttn-brdr1: #333e;
    --bttn-brdr2: #4474;
    --speed: 18s;
    --main-clr: #1d1d1d;
    --bg: radial-gradient(#700,#000);
    --animDuration: 0s;
    --thumb-height: 50px;
    --moz-thumb-height: 38px;
    --thumb-margin: -44px;
    --moz-thumb-margin: -20px;
 }
 /* * {
   box-sizing: border-box !important;
 }
 html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
}
body {
    background-color: var(--main-clr);
    background-image: var(--bg);
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: sans-serif;
    color: var(--text-color);
} */
.input-labels label{
    font-size: 16px;
    font-weight: 600;
    color:#fff;
}
.wrapper-player {
  width: 100%;
  height: auto;
  /*position: absolute;*/
  display: flex;
  /*flex-direction: column;*/
  justify-content: center;
  /*align-items: center;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  background-color:#000;
}
.player-wrapper {
    position: relative;
    transform: scale(0.8);
  }
.player-wrapper, .player {
    width: 340px;
    height: 580px;
    border-radius: 12px;
}
.player {
    position: absolute;
    background-color: rgba(0, 0, 0, 1);
    padding: 20px;
    border: 6px solid #fff;
    z-index: 2;
}
.ctrl-bttns-wrapper {
	position: relative;
    width: 500px;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 1500;
 }
 .load-bttn, 
 .ctrl-bttn {
  	width: 140px;
	height: 100px;
    line-height: 5.5rem;
    font-size: 1.4rem;
    text-align: center;
   color: var(--text-color);
   border-style: solid;
   border-width: 2px 2px 2px 2px;
   border-color: var(--bttn-brdr1) var(--bttn-brdr2) var(--bttn-brdr2) var(--bttn-brdr1);
   border-radius: 50%;
   cursor: pointer;
   background-color: #0006;
   box-shadow: 0 0 6px 1px #4402;
  }
 .load-bttn {box-shadow: 3px 3px 8px #9999;}
 .ctrl-bttn {box-shadow: -3px 3px 8px #9999;}
 .load-bttn {font-size: 1.5rem;}
 #playBtn {font-size: 1.6rem;}
 #pauseBtn {font-size: 1.1rem;}
 .load-bttn:hover, 
 .ctrl-bttn:hover {
   color: #9997;
 }
 .hidden {
     display: none;
     width: 0;
     height: 0;
     opacity: 0;
 }
 .top-ctrls-bttns {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
 }
   
 .bttn-load {
    width: 100%;
    cursor: pointer;
 }
 .song-details {
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 2.5px;
    text-align: center;
    overflow: hidden;
    background-color: rgba(20,0,0,1);
    border-style: solid;
    border-width: 3px;
    border-color: #6009 #6507 #6506 #6009;
    border-radius: 8px;
    box-shadow: inset 4px 2px 12px #6006, inset -4px -2px 12px #6508;
    z-index: -1;
}
  #clickHere, #artist{
    color: #a00;
    line-height: 1.6rem;
  }
  #artist{
      width: 100%;
      font-weight: 100;
      text-align: center;
      text-wrap: nowrap;
      margin-left: var(--scroll-margin);
      animation: titleScroll 14s linear infinite;
  }
  @keyframes titleScroll {
      from {
          margin-right: calc(var(--scroll-margin) * -1);
      }
      to {
          margin-left: calc(var(--scroll-margin) * -1);
      }
  }
.canvas-wrapper {
   margin: 0 auto -20px -5px;
   width: 300px;
   height: 300px;
   position: relative;
   border-radius: 50%;
 }
 #canvas {
     border-radius: 50%;
     position: absolute;
     margin: 2.5px;
     z-index: -5;
     overflow: hidden;
     background-color: #fff;
 }

 .svg-wrapper {
     width: 300px;
     height: 300px;
     border-radius: 50%;
 }
 .svg-flower, .svg-flower2 {
   position: absolute;
   width: 300px;
   height: 300px;
   z-index: 2;
   overflow: hidden;
}
 .flower {
     width: 100%;
     height: 100%; 
 }
 .flowerSpinner {
    animation: flowerSpinner 4s linear infinite;
 }
 
 @keyframes flowerSpinner {
    to {
        transform: rotate(1turn);      
    }
 }
 .new-petal2 {
     fill: url(#rg1);
     fill-opacity: 0.7;
     stroke: none;
     transform-origin: 50%;
     transform: rotate(22.5deg);
     animation: flowerRotate2 4s linear infinite;
 }
 @keyframes flowerRotate2 {
     0% {
         transform: rotate(22.5deg);
     }
     100% {
         transform: rotate(382.5deg);
     }
 }
 
 .new-petal {
     fill: #000;
     fill-opacity: 1;
     transform-origin: 50%;
     animation: flowerRotate 4s linear infinite;
 }
 
 .bg-crcl {
     fill: #fff;
     stroke: none;
 }
 .bg-crcl2 {
     fill: none;
     stroke: none;
 }
 
 @keyframes flowerRotate {
     100% {
         transform: rotate(1turn);        
     }
 }
#scrn {
	position: absolute;
    top: 20%;
    left: 5%;
    font-size: 1.4rem;
    color: #fff;
    border: 1px solid pink;
    width: 200px;
    z-index: 5000;
}
#change_color {
    font-size: 1.2rem;
    padding: 5px 15px;
    z-index: 1000;
}
#change_color:hover {
    color: red;
    background-color: #cc0;
}    

.rad-ten-wavey {
  fill: url(#radTen);
  stroke: #ff08;
  stroke-width: 0.5;
  filter: drop-shadow(0 0 4px #d0f);
}
.dlion-tint {
  fill: url(#topPetalsX);
  fill-opacity: 0.8;
  stroke: none;
  filter: drop-shadow(0 0 1px #909);
}
.test-xrxl {
  fill: none;
  stroke: red;
  stroke-width: .5;
}
.stalk {
   fill: url(#btmPetals);
   fill-opacity: 0;
}

.stalk-inner {
   transform-origin: 50%;
   transform: rotate(45deg);
}
 .mid-leaves {
    fill: none;
    stroke: #fff7;
    stroke-width: 0.7;
    transform-origin: 50%;
    transform: scale(0.87);
    filter: drop-shadow(0 0 4px #f004);
 }
 /*
    stroke-dashoffset: 240;
    stroke-dasharray: 50;
    animation: midLeaves 8s linear infinite reverse;
}
*/
.mid-leaves-lrg {    
   fill: url(#midPetalsLrg);
   fill-opacity: 0.8;
   stroke: #fff;
   stroke-width: 2;
/*   transform-origin: 50%;
   transform: scale(1);*/
}
.lrg-leaves, .lrg-petals {
   stroke: #fff;
   stroke-width: 0.3;
}
.lrg-leaves { fill: url(#btmPetals);}
.lrg-petals { fill: url(#topPetals);}
.leafdividers {
    fill: url(#leafDividers);
    stroke: #000;
    stroke-width: 0.2;
}
.dandylion {
  fill: url(#crcls-pattern);
  stroke: #f8d;
  stroke-width: 0.3;
  filter: drop-shadow(0 0 4px #8f8b);
}
.patterned-crcls {
  fill: #333;
  stroke: #fff;
  stroke-width: 0.3;
}
.mid-leaves-bling {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5;
    filter: drop-shadow(2px 2px 18px #fff);
 }
 
 .player-ctrls {
      position: absolute;
      display: flex;
      justify-content: center;
      vertical-align: middle;
      width: 290px;
      height: 70px;
      bottom: -5px;
      border: 0 solid;
  }
  .bttn-frame {
      position: absolute;
  }
  .bttn-frame path {
      fill: url(#bttnGradient);
      stroke: none;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 1px #000);
  }
  .bttn-play {
      width: 220px;
      height: 50px;
      text-align: center;
      color: var(--text-color);
      cursor: pointer;
      z-index: 5555;
  }
  .bttn-play:hover {
      color: var(--text-color-hover);
  }
  .bttn-frame:active {
      fill: #f00;
  }
  .svg-bttns {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
.svg-bttns line, .svg-bttns path, .svg-bttns circle {
    stroke: #300;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: #111;
  }
.svg-bttns:hover line, .svg-bttns:hover path, .svg-bttns:hover circle {
    stroke: #500;
    fill: #300;
}
  
.input-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
  
#volume, .seekbar{
    width: 300px;
    z-index: 2;
}
.input-range-wrapper {
    position: relative;
    width: 100%;
    height: 9px;
    margin-top: 5px;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #333 #444 #444 #333;
    box-shadow: 2px 2px 8px #2229;
    background-color: #8006;
    z-index: 1000;
  }
  
  .input-range-wrapper input {
    -webkit-appearance: none;
    width: 100%;
    height: 0;
    position: absolute;
  }
  
  .input-range-wrapper input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;  
    background-color: var(--text-color);
    background-image: radial-gradient(#900 1%, #111);
    box-shadow: 0 0 4px #999;
    cursor: pointer;
  }
  
  .input-range-wrapper input::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;  
    background-color: var(--text-color);
    background-image: radial-gradient(#900 1%, #111);
    box-shadow: 0 0 4px #999;
    cursor: pointer;
  }
  /*      /volume         */


.radio-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

 

.radio-table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

.radio-table th,
.radio-table td {
  padding: .625em;
  text-align: center;
}

.radio-table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  .radio-table {
    border: 0;
  }

  
  .radio-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .radio-table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  .radio-table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  .radio-table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .radio-table td:last-child {
    border-bottom: 0;
  }
}