/*Player*/

#musicplayer{ 
    height: 20px;
    width:100%;
    font-family: var(--terminal);
    font-size: x-small;
    display:flex;
    color: var(--redtext);

}
 
.songtitle{ 
    display:block;
    width: 360px;
    max-width: 1000px;

    padding:1px; /* padding around song title */

    margin-top:3px;
    margin-right: 20px; 
    margin-left: 10px;
    
    font-family: var(--terminal);
    color:var(--redmain);

    text-shadow: none;
    background: none;/* background of song title */
    
    box-shadow: inset 0px 2px var(--shadow);
    
    border: 1px solid var(--redmain);
    border-radius:10px;
}
 
.controls{
      text-align:center;
      width:100px;
      text-decoration:none;

        filter:

        drop-shadow(0px 1px var(--redmain))
        drop-shadow(1px 0px var(--redmain))
        drop-shadow(0px -1px var(--redmain))
        drop-shadow(-1px 0px var(--redmain));

}
 
.controls td{
       padding-top:0px; /* padding around controls */
}
 
.seeking{
      width: 1000px;
      max-width:1000px;
      margin-right: 20px;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:0px; /* padding around seeking bar */
       
}
 
.current-time{  
        padding-right:5px;
        margin-top: 2px;
        font-size: medium;
        
       
}
 
.total-duration{
      padding-left:5px;
      margin-top: 2px;
      font-size: medium;
}

.ctrlimg {
   height:10px;
   width:10px;
   
}

.ctrlimg:hover{
        cursor:help;
}
    
input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
}

.slider_container i{
            filter:

        drop-shadow(0px 1px var(--s-main))
        drop-shadow(1px 0px var(--s-main))
        drop-shadow(0px -1px var(--s-main))
        drop-shadow(-1px 0px var(--s-main));
}
    
input[type=range]:focus {
        outline: none;
}
    
input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        border: 1px var(--redmain) solid;
        
}

input[type=range]::-moz-range-track {
        width: 100%;
        height: 3px; /* thickness of seeking track */
        cursor: help;
        border-width: 1px;
        border-style: solid;
        border-color: var(--redmain);
        border-radius: 10px;
        background: var(--white); /* color of seeking track */

}

input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: 0px;
        
}

input[type=range]::-moz-range-thumb {
        height: 15px; /* height of seeking square */
        width: 15px; /* width of seeking square */
        background: var(--redmain);
        appearance: none;
        margin-top: 0px;
        border: none;
        border-radius: 100px;
}

    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: var(--white); /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
}

input[type=range].volume_slider::-moz-range-track { 
    width: 90%;
}
    
input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
}
   
input[type=range].volume_slider::-moz-range-thumb {
        height: 15px; /* height of seeking square */
        width: 15px; /* width of seeking square */
        background: var(--redmain);
        appearance: none;
        margin-top: 0px;
        border: none;
        border-radius: 100px;
}
 
.slider_container {  
  width: 20%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}