/* TODO
mixin flex
mixin selection

*/
#player {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: white; }

#slider-bar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 1.2em;
  border-bottom: 5px solid black;
  box-sizing: content-box; }

.sliders {
  border-top: 5px solid black;
  height: 100%;
  background-color: black; }
  .sliders div {
    height: 100%;
    width: 0%;
    background-color: springgreen;
    position: relative; }
  .sliders #track-loading {
    background-color: white; }
  .sliders #track-progress {
    margin-top: calc(-1.2em + 5px); }

.box-text {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  position: absolute;
  top: -1.8em;
  height: 1.8em;
  background-color: black;
  color: white;
  border-top: 5px solid black;
  border-top-right-radius: 2.5px; }
  .box-text .separator {
    margin: 0 0.25em; }

#time {
  padding: 0 0.6em; }

#track {
  width: 78%;
  margin-right: 2%;
  border-right: 5px solid black;
  border-top-right-radius: 2.5px; }

#mute {
  left: 80%;
  padding: 0 1em;
  cursor: pointer; }

#volume {
  width: 20%;
  border-left: 5px solid black; }

#volume-active {
  width: 100%; }

#controls {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 6em; }

.pan {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  .pan div {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center; }
  .pan .button {
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: 6em;
    cursor: pointer; }
  .pan .text {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
    .pan .text h3 {
      font-family: pixelpath;
      font-size: 2.2em; }

#play-pan {
  width: 40%;
  border-right: 5px solid black; }

#nextPrev-pan {
  width: 40%; }

#playlist-pan {
  width: 20%;
  border-left: 5px solid black; }

#next {
  box-sizing: content-box;
  border-left: 5px solid black;
  border-right: 5px solid black; }

#side-infos {
  margin-left: 1.5em; }

/*# sourceMappingURL=player.css.map */