html {
  height: 100%;
}
body {
  font-family: helvetica, arial, sans-serif;
  margin: 0;
  background-color: #222;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
body,
button {
  color: #ddd;
  text-shadow: 1px 1px 1px #000;
}
button {
  transition: all 300ms;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  outline: none;
  font-family: FontAwesome;
}
button:disabled {
  opacity: 0.3;
}
button:not(:disabled) {
  cursor: pointer;
}
button:not(:disabled):hover {
  color: #fff;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
#info {
  position: relative;
  flex: 0 0 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#info .waveform {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
#info .current {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
}
#info .time-played,
#info .time-remaining {
  position: relative;
  font-size: 20px;
}
#info .time-played {
  padding: 0 10px;
}
#info .time-remaining {
  padding: 0 10px;
}
#info .metadata {
  text-align: center;
  position: relative;
  flex: 1;
  min-width: 0;
}
#info .metadata h1,
#info .metadata h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#info .metadata h1 {
  margin: 5px 0;
}
#info .metadata h2 {
  font-size: 100%;
  margin-top: 10px;
}
#controls {
  text-align: center;
  flex: 0 0 80px;
  display: flex;
  flex-direction: row;
}
#controls section {
  flex-basis: 80px;
}
@media (max-width: 380px) {
  #controls section:not(#main) {
    display: none;
  }
}
#controls #albumart {
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
#controls #main {
  flex: 1;
}
#controls #main button {
  line-height: 80px;
  font-size: 40px;
  width: 1.5em;
  vertical-align: middle;
}
#controls #main [data-command='player:play'],
#controls #main [data-command='player:pause'] {
  font-size: 50px;
}
#controls #main [data-command='player:play']:disabled,
#controls #main [data-command='player:pause']:disabled {
  display: none;
}
#controls #misc button {
  float: right;
  clear: right;
  margin-right: 4px;
  margin-top: 3px;
  font-size: 18px;
}
#controls #misc button::after {
  content: "•";
  margin-left: 0.2em;
  color: #888;
}
#controls #misc button.on::after {
  color: #5af;
  text-shadow: 0 0 3px #fff;
}
#controls #misc button sub {
  font-size: 60%;
  font-family: helvetica, arial, sans-serif;
  /* FontAwesome has weird 1ch */
  display: inline-block;
}
#controls #misc button sub:not(:empty) {
  width: 1ch;
}
#playlist {
  position: relative;
  flex: 1;
}
#playlist ol {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: playlist;
}
#playlist li {
  position: relative;
  /* anchor for button */
  counter-increment: playlist;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 16px 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#playlist li::before {
  content: counter(playlist, decimal-leading-zero) ". ";
}
#playlist li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
#playlist li.current {
  font-weight: bold;
}
#playlist li button {
  position: absolute;
  right: 4px;
  top: 3px;
  display: none;
  font-weight: normal;
}
#playlist li button::before {
  font-family: FontAwesome;
  content: "\f00d";
}
#playlist li:hover:not(.current) button {
  display: initial;
}
#playlist .analyser {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.3;
}
#playlist .analyser canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#playlist [data-command='playlist:randomize'] {
  position: absolute;
  font-size: 18px;
  right: 8px;
  bottom: 8px;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=4.5.0');
  src: url('font/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('font/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('font/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
