:root{
   --blue-border: #4C5E84;
}

/*...........................................

	EASY PASTE	::before / ::after

..........................

#musicplayer > .centered::before, #musicplayer > .centered::after{
   --size: 2.5em;
   content: "";
   display: inline-block;
   position: absolute;
   width: var(--size);
   height: var(--size);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

#musicplayer > .centered::before, #musicplayer > .centered::after{
	background-image: url("/stickers/yummy/yellow/K02.png");
}

/*...........................................................

		music player!!! :+DDDD

..........................*/

#musicplayer{
   background:var(--white2-texture); /* background color of player */
   width: 55%;
   margin: auto;
   margin-top: -0.5em;
}

#musicplayer > .centered{
   width: 80%;
   box-shadow: var(--shadow-elevation-low-text);
}

#musicplayer table{
   background: var(--blue-texture);
   border: var(--border-level-2);
      border-style: outset;
      border-color: var(--blue);
   border-bottom: var(--border-level-3);
      border-bottom-style: solid;
      border-bottom-color: var(--blue-border);
}

.controls{
   font-size:0.8em!important; /* size of controls */
   text-align:center;
   width: 100%;
   display: flex;
      justify-content: space-evenly;
      align-items: center;
}

.controls td{
   padding:0.25em 1em; /* padding around controls */
}

.songtitle{
   padding: 0.1em; /* padding around song title */
   display:block;
   width: 100%;
   margin-top: 0.5em;
   font-size: 0.8em;
}

.seeking{
   background:var(--white-texture); /* background color of seeking bar */
   display:flex;
   justify-content: space-evenly;
   padding: 0.25em 0.4em; /* padding around seeking bar */
   border: var(--border-level-3);
      border-style: outset;
      border-color: var(--white);
   border-top: 0;
   border-left: 0;
}

.current-time{
   padding-right:0.15em;
}

.total-duration{
   padding-left:0.15em;
}

i.fas:hover{
   cursor:help;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
   color:var(--black); /* color of controls */
}

input[type=range] {
   -webkit-appearance: none;
   width: 100%;
}

input[type=range]:focus {
   outline: none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 0.08em; /* thickness of seeking track */
   cursor: help;
   background: var(--black); /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
   height: 0.5em; /* height of seeking square */
   width: 0.5em; /* width of seeking square */
   border-radius: var(--border-radius-level-2); /* change to 0.15em if you want a circle seeker */
   background: var(--yellow); /* color of seeker square */
   cursor: help;
   -webkit-appearance: none;
   margin-top: -0.25em; 
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track {
   width: 100%;
   height: 0.08em; /* thickness of seeking track */
   cursor: help;
   background: var(--black); /* color of seeking track */
}

input[type=range]::-moz-range-thumb {
   height: 0.5em; /* height of seeking square */
   width: 0.5em; /* width of seeking square */
   border-radius: var(--border-radius-level-2); /* change to 0.15em if you want a circle seeker */
   background: var(--yellow); /* color of seeker square */
   cursor: help;
   border:none;
}