h2.snd { font-size: 1em; }
#list { color: white; background-color: rgba(10,14,49,1); border: 1px solid black; border-radius: .5em; height: 20em; overflow-y: scroll; }
#list ul { margin: 0; padding: 0; }
#list ul li { list-style-type: none; margin: 0; }
.m3u { text-align: right; margin: .5em 0 .75em 0; }
.genre { display: inline-block; float: right; color: #cacaca; }
.wrapper { background-color: rgba(30,23,71,1); min-width: 20em; margin: .25em 0 .25em 0; }
.control { display: flex; flex-wrap: wrap; border: 1px solid black; }
.control button { background-color: rgba(30,23,71,1); background-size: contain; background-origin: content-box; background-repeat: no-repeat; width: 2.5em; height: 2.5em; border-radius: 0; border: .1em solid black; margin: .2em; }
@media screen and (max-width: 63em){
.control button { width: 2.0em!important; height: 2.0em!important; border: 0!important; margin: 0!important; }
.control .control-pad { flex-grow: 0!important; }
}
@media screen and (max-width: 48em){
}
.control button#previous { background-image: url(../img/previous.svg); }
.control button#toggle-play { background-image: url(../img/icon-play.svg); }
.control button#next { background-image: url(../img/next.svg); }
.control button#toggle-mute { background-image: url(../img/icon-muted.svg); }
.control button#download { background-image: url(../img/download.svg); }
.control button#toggle-list { background-image: url(../img/list.svg); }
.control button:hover { background-color: rgba(45,38,86,1); }
.control form { display: inline-block; margin: 0; border: 0; padding: 0; }
.control .control-pad { display: inline-block; flex-grow: 1; }
.control input[type="range"].volume { position: relative; width: 4em; height: 1em; margin: .2em 0 0 0; padding: 0; }
.control output.volume { font-size: .6em; padding: .2em 0 0 .2em; }
.control output.volume:after { content: '%'; }
.control input[type="range"].seek { position: relative; flex-grow: 4; height: 1em; margin: .2em 0 0 0; padding: 0; }
.control .time { font-size: .6em; padding: .2em 0 0 .2em; }
.lower { background: #353566;
background: linear-gradient(180deg, rgba(53, 53, 102, 1) 0%, rgba(5, 16, 40, 1) 100%); border-radius: .5em; padding: .25em; border: 0; }
.metadata { display: block; padding: 0; border-radius: .1em; margin: 0 .5em 0 0; min-height: 5em; max-height: 5em; min-width: 14em; width: 100%; }
.metadata li { display: inline-block; list-style-type: none; font-family: monospace; font-size: .7em; color: #cacaca;  white-space: nowrap; }
.visualizer_wrapper { flex-grow: 4; display: block; width: 100%; height: 5em; }
#visualizer { height: 5em; margin-bottom: .5em; }
.player { display: none; }
.disclaimer { width: 100%; clear: both; margin-top: 0; }
.poweredby { max-width: 22em; float: right; font-size: .7em; color: #cacaca; font-style: italic; text-align: right; }
.poweredby img { margin: .25em 0 0 0; }