a.audio-file {
color: #DE7008
}
a.audio-file span,
a[src] span {
position: relative;
cursor: text;
}
a.audio-file:hover,
a[src]:hover {
color: #DE7008
}
a[src] {
cursor: pointer;
text-decoration: underline;
}
a.visited {
}
a.audio-file::before,
a[src]::before,
a.visited::before,
#playButton {
  font-size: 0.75rem;
  padding: 0 0.25rem 0.1rem 0.25rem;
  border: 0.5px solid #222;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;   /* Firefox 3.6 and earlier */
border-radius: 4px;
  background-color: #efefef;
cursor: pointer;
position: relative;
display: inline-block;
margin-right: 0.5rem;
color: black;
text-decoration: underline; /* Underline is placed and removed to work around problem in IE Explorer showing the underline */
}
a.audio-file::before,
a[src]::before,
a.visited::before,
#playButton.play::before {
content: "\25b6\FE0E";
cursor: pointer;
display: inline-block;
text-decoration: none; /* Underline is placed and removed to work around problem in IE Explorer showing the underline */
white-space: pre-wrap; /* can't see that pre-wrap helps fill the bottom space left after text-decoration is removed in IE Explorer */
}
a.audio-file:hover::before,
a[src]:hover::before,
#playButton.play:hover::before,
#playButton.pause:hover::before {
opacity: 1;
color: #aaa;
}
a.audio-file:active::before,
a.visited:active::before,
#playButton.play:active::before,
#playButton.pause:active::before {
color: #000000;
}
a.current {
font-weight: 500;
opacity: 1;
text-decoration: none;
pointer-events: none;
}
a.current:hover {
}
a.current::before {
display: none;
}
a.current.paused {
opacity: 0.6;
}
#audioPlayer {
margin: 0.35rem 0 0 1.8rem;
}
#audioPlayer.paused {
opacity: 0.6;
}
#playButton{
text-decoration: none;
white-space: pre-wrap; /* can't see that this helps fill the bottom space in IE Explorer */
}
#playButton.play::before {
opacity: 0.6;
}
#playButton.pause::before {
content: '\275a\275a';
letter-spacing: -0.01rem;
position: relative;
}
#filled-outline {
  width: 10rem;
height: 0.42rem;
  display: flex;
  align-items: center;
  background-color: #DDD0C3;
}
#progress {
display: flex;
flex: 10;
flex-basis: 100%;
transition: height 0.3s;
cursor: pointer;
background: transparent;
height: 0.42rem;
  padding: 0.5rem 0; /* easier to grab the handle. */
}
#progress::after {
  display: flex;
position: relative;
  content: '\258d';
font-size: 1.1rem;
  bottom: 0.185rem;
  align-self: center;
margin-left: -0.4rem;
}
.filled-progress {
  background: #DE7008;
  flex: 0;
  flex-basis: 0%;
width: 10.4rem;
}
#bottom-wrapper {
  display: flex;
  align-items: center;
    line-height: 1rem;
  margin: 0.5rem 0;
}
#song-timer,
#loopButton {
margin-right: 0.6rem;
}
#song-timer {
font-size: 0.8125rem;
}
#loopButton {
cursor: pointer;
position: relative;
font-size: 0.85rem;
}
#loopButton::before {
position: relative;
content: '\1f501\FE0E';
}
.isNotLooped:hover::after {
 /* content: "loop"; */
}
#loopButton.isLooped::before{
position: relative;
font-size: 95%;
border: 0.156rem inset #f0f0f0;  
margin-left: -0.17rem;
margin-right: -0.215rem;
padding: 0 1px;
}
.isLooped:hover::after {
/*  content: "unloop"; */
}
#volumeWrap {
cursor: pointer;
position: relative;
  display: flex;
  align-items: center;
margin-top:;  /* For IE. It's a compromise. IE can't flex or align-items. */
}
#volumeMute {
position: relative;
  font-size: 1.38rem;
width: 1.4rem; /* Width keeps the button from wiggling when the handle is dragged. */
margin-right: -0.7rem; /* distances the slider track */
    display: flex;
  align-items: center;
}
/*    🔊
------------------- */
.volFour::before {     
content: '\1F50A\FE0E';
}
/*    🔈
------------------- */
.volThree::before {  
content: '\1F508\FE0E';
position: relative;
left: 5%;
}
/*    🗧
-------------------- */
.volThree::after {   
/* content: '\1f5e7';
font-size: 0.75rem;
font-weight: bold;
position: absolute;
top: 0.26rem; */
  
/* right half black circle 
--------------------------- */
content: '\25d7';      
font-size: 0.62rem;
position: relative;
right: 9.5%;
  
/*  \|/ Converging Left 
-------------------------- */
/* content: '\269f';  
font-size: 0.6rem;
font-weight: bold;
position: absolute;
top: 0.33rem;
right: 10%; */
}
/*    🔉
------------------------ */
.volTwo::before {
content: '\1F509\FE0E';
position: relative;
right: 12%;
}
/*    🔈 
------------------------ */
.volZero::before {
content: '\1F508\FE0E';  
position: relative;
left: 5%;
}
/*    🔈 
 adjust for less width: 
 #volumePanel{left: 0;}
-------------------------- */
.volMuted::before {
/* content: '\1F508\FE0E'; 
position: relative;        
left: 0.075rem; */
  
/*    🔇 
 adjust for extra width:
 #volumePanel{left:0.3rem;}
---------------------------- */
content: '\1F507\FE0E';    
position: relative;       
right: 5.5%; 
}
/*    \🔈 
-------------------- */
.volMuted::after {
/* content: '\ff3c';          
position: absolute;
font-size: 1.1rem;
font-weight: bold;
right: 0.3rem;    
color: red;
top: 0.05rem; */
  
/*    \🔇
----------------- */
content: '\ff3c';
position: absolute;
font-size: 0.9rem;
font-weight: bold;
color: #DE7008;
}              
#volumePanel {
height: 0.8rem;
  position: relative;
  float: left;
  overflow: hidden;
  transition: width 0.15s;
  cursor: pointer;
  left: 0.3rem;
}
/* .volume-show */ #volumePanel { /* To make the track to stay open, omit volume-show  */
  width: 3.3125rem;
}
#volumeSlider {
  position: relative;
  height: 100%;
display: flex;
align-items: center;
  margin-left: 6px;
}
#volumeSlider-track {
  height: 0.25rem;
  width: 2.5rem;
  position: absolute; 
  background: #DDD0C3;
  right: 0;
}
#volumeProgress {
  height: 100%;
  background: #DE7008;
  position: relative;
}
#volumeSlider-handle {
width: 0.375rem;
height: 0.77rem;
  position: absolute;
  -webkit-transform: perspective(1px) translateY(-35%);
  -moz-transform: perspective(1px) translateY(-35%);
  -0-transform: perspective(1px) translateY(-35%);
  -ms-transform: perspective(1px) translateY(-35%);
  right: 0;
  background: black;
}
#progress:hover::after,
#loopButton:hover::before,
#volumeMute:hover::before {
color: #707070;
}
#volumeSlider-handle:hover {
background-color: #707070;
}
#progress:active::after,
#loopButton:active::before,
#volumeMute:active::before {
color: #000000;
}
#volumeSlider-handle:active {
background-color: #000000;
}
#volumeMute.isFull:hover::after,
#volumeMute.isLess:hover::after,
#volumeMute.isLittle:hover::after {
/* content: 'mute'; 
width: 1.7rem;
}
#volumeMute.isMuted:hover::after {
/* content: 'unmute';
width: 2.5rem;
}
#volumeMute:hover::after,
#loopButton:hover::after {
  position: absolute;
top: -1.1rem;
left: -0.3rem;
font-size: 0.85rem;
font-weight: normal;
color: black;
  z-index: 1;
  padding: 0 2px;
  background-color: white;
  border: 0.03em solid #666;
white-space: nowrap;
-moz-border-radius: 0.125em;
-webkit-border-radius: 0.125em;
-ms-border-radius: 0.125em;
-o-border-radius: 0.125em;
border-radius: 0.125em; */      
}