/* Utility: clearfix */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

/* General classes */
.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.disabled {
  color: #666;
  cursor: default;
}
.show {
  display: inline-block !important;
}

body .container {
  font-family: 'np';
  font-size: 20px;
  margin: 0 auto;
  max-height: 235px;
  overflow: auto;
  padding: 0 10px;
}


/* Player */
body .container .player {
  height: 60px;
  margin: 0 auto auto 0;
  position: relative;
  width: 500px;
}


/* Large toggle button */
body .container .player .large-toggle-btn {
  background-color: #80df90;
  border: 2px solid #44864f;
  border-radius: 15px;
  float: left;
  height: 50px;
  margin: 10px 10px 0 0;
  overflow: hidden;
  padding: 4px 0 0 0;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  width: 54px;
  color:#3a7243;
}
body .container .player .large-toggle-btn .large-play-btn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: -14%;
}
body .container .player .large-toggle-btn .large-play-btn:before {
  content: "\f04b";
  font: 1.5em/1.75 "FontAwesome";
}
body .container .player .large-toggle-btn .large-pause-btn {
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: -13%;
}
body .container .player .large-toggle-btn .large-pause-btn:before {
  content: "\f04c";
  font: 1.5em/1.75 "FontAwesome";
}

/* Info box */
body .container .player .info-box {
  bottom: 10px;
  left: 65px;
  position: absolute;
  top: 15px;
}
body .container .player .info-box .track-info-box {
  float: left;
  font-size: 20px;
  margin: 0 0 6px 0;
  visibility: hidden;
  width: 400px;
}
body .container .player .info-box .track-info-box .track-title-text {
  text-shadow: 1px 1px 0 #e7919f;
  display: inline-block;
}
body .container .player .info-box .track-info-box .audio-time {
  display: inline-block;
  width: 80px;
}

/* Progress box */
body .container .player .progress-box {
  float: left;
  min-width: 270px;
  position: relative;
}
body .container .player .progress-box .progress-cell {
  height: 12px;
  position: relative;
}
body .container .player .progress-box .progress-cell .progress {
  background: #f8e6ac;
  border: 1px solid #ffffffdc;
  height: 8px;
  position: relative;
  width: auto;
}
body .container .player .progress-box .progress-cell .progress .progress-buffer {
  background: #f8bf69;
  height: 100%;
  width: 0;
}
body .container .player .progress-box .progress-cell .progress .progress-indicator {
  background: #e7b8c2;
  border: 1px solid #ecd9bb;
  border-radius: 3px;
  cursor: pointer;
  height: 10px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: -2px;
  width: 22px;
}

/* Controls box */
body .container .player .controls-box {
  bottom: 10px;
  left: 350px;
  position: absolute;
}
body .container .player .controls-box .previous-track-btn {
  cursor: pointer;
  display: inline-block;
}
body .container .player .controls-box .previous-track-btn:before {
  content: "\f049";
  color: #eb91a0;
  filter: drop-shadow(0 0 1px #682637);
  font: 1em "FontAwesome";
}
body .container .player .controls-box .next-track-btn {
  cursor: pointer;
  display: inline-block;
}
body .container .player .controls-box .next-track-btn:before {
  content: "\f050";
  color: #eb91a0;
  filter: drop-shadow(0 0 1px #682637);
  font: 1em "FontAwesome";
}

/* Playlist */
body .container .play-list {
  display: block;
  margin: 0 auto 20px auto;
  width: 100%;
}
body .container .play-list .play-list-row {
  display: block;
  margin: 4px 0;
  width: 100%;
}
body .container .play-list .play-list-row .track-title .playlist-track {
  color: #000;
  text-decoration: none;
  background-color: #fff;
}
body .container .play-list .play-list-row .track-title .playlist-track:hover {
  text-decoration: underline;
}
body .container .play-list .play-list-row .small-toggle-btn {
  border-radius: 2px;
  border: 1px solid #e7da66;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  margin: 0 3px auto auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 20px;
  font-size: 15px;
  color: #446085;
  background-color:#f1eca6;

}
body .container .play-list .play-list-row .small-toggle-btn .small-play-btn {
  display: inline-block;
}
body .container .play-list .play-list-row .small-toggle-btn .small-play-btn:before {
  content: "\f04b";
  font: 0.85em "FontAwesome";
}
body .container .play-list .play-list-row .small-toggle-btn .small-pause-btn {
  display: inline-block;
}
body .container .play-list .play-list-row .small-toggle-btn .small-pause-btn:before {
  content: "\f04c";
  font: 0.85em "FontAwesome";
}
body .container .play-list .play-list-row .track-number {
  display: inline-block;
}
body .container .play-list .play-list-row .track-title {
  display: inline-block;
}
body .container .play-list .play-list-row .track-title .playlist-track {
  text-decoration: none;
}
body .container .play-list .play-list-row .track-title .playlist-track:hover {
  text-decoration: underline;
}
body .container .play-list .play-list-row .track-title.active-track {
  font-weight: bold;
}