/**

 * WaveSurfer-WP Flat Icons Theme

 * Author: X-Raym

 * Author URI: https://www.extremraym.com

 * Date: 2016-12-21

 * Version: 2.6.4

 */



.wavesurfer-block {

  box-sizing: border-box;

  margin-bottom: 2em;

}



.wavesurfer-player wave {

  z-index: 0;

}



.wavesurfer-player canvas {

  max-width: none;

}



.wavesurfer-buttons_set {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-items: baseline;

}



.wavesurfer-buttons_set button {

  width: 50px;

}



.wavesurfer-block button:hover {

  cursor: pointer;

  opacity: 0.7;

}



.wavesurfer-block button, .wavesurfer-time, .wavesurfer-duration {

  font-family: Arial;

  font-size: 1em;

  margin: 0em 0em 0em;

  padding: 1em 1em 1em;

  border-width: 0;

  outline: none;

  background-color: #0000000;

  transition: .3s ease all;

  color: white;

  font-weight: bold;

  /*

	border-radius: 2px;

	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

	*/

}



.wavesurfer-time, .wavesurfer-duration {

  min-width: 5.5em;

}



.wavesurfer-download a {

  color: white;

  text-decoration: none;

}



.wavesurfer-time, .wavesurfer-duration {

  font-family: Arial;

  background-color: #0000000;

}



button.wavesurfer-active-button {

  background-color: #0000000;

}



button.wavesurfer-paused-button {

  background-color: #b5b5b552;

}



.wavesurfer-buttons_set button:before, .wavesurfer-buttons_set div:before {

  font-family: "wavesurfer", "FontAwesome";

  font-weight: normal;

  font-style: normal;

  width: 1em;

}



.wavesurfer-time:before, .wavesurfer-duration:before {

  padding-right: 0.3em;

}



button.wavesurfer-play:before {

  content: "\f04b";

}



button.wavesurfer-play.wavesurfer-active-button:before {

  content: "\f04c";

}



button.wavesurfer-paused-button:before {

  content: "\f04b";

  padding-right: 0em;

}



button.wavesurfer-stop:before {

  content: "\f04d";

}



div.wavesurfer-time:before {

  content: "\f041";

}



div.wavesurfer-duration:before {

  content: "\f017";

}



button.wavesurfer-download:before {

  content: "\f019";

}



button.wavesurfer-loop:before {

  content: "\f061";

}



button.wavesurfer-loop.wavesurfer-active-button:before {

  content: "\f01e";

}



button.wavesurfer-mute:before {

  content: "\f028";

  padding-right: 4.5px;

}



button.wavesurfer-mute.wavesurfer-active-button:before {

  content: "\f026\f00d";

  padding-right: 0px;

}



.wavesurfer-time {

  margin-left: Auto;

}



@media (max-width: 550px) {

  .wavesurfer-duration {

    display: none;

  }

  .wavesurfer-time {

    display: none;

  }

}



.wavesurfer-block button span, .wavesurfer-time span, .wavesurfer-duration span {

  padding-left: 0.3em;

  display: none;

}



.wavesurfer-block wave:hover {

  cursor: pointer;

}





/* Playlist */



.wavesurfer-list-group {

  counter-reset: section;

  list-style-type: none;

  padding: 0;

  margin-left: 1em;

  margin-right: 1em;

}



.wavesurfer-list-group li:hover {

  cursor: pointer;

}



.wavesurfer-active-track {

  background: rgba(0, 0, 0, 0.2);

}



#waveform {

  position: relative;

}



.wavesurfer-progress {

  position: relative;

  display: none;

  /* since 2.2 */

}



.wavesurfer-loading[value] {

  border: none;

  appearance: none;

  width: 100%;

  height: 20px;

  background-color: #eee;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;

  position: absolute;

  z-index: 10;

  margin-top: -80px;

}



.wavesurfer-marker:hover {

  cursor: pointer;

  text-decoration: underline;

}



.wavesurfer-marker-current {

  background: #FFFF66;

}



/* PLAYLIST - Tracks */

.wavesurfer-list-group .list-group-item {

  display: flex;

  align-items: center;

}



.wavesurfer-playlist-track-artist {

  margin-left: 0.5em;

  margin-right: 0.5em;

}



.wavesurfer-playlist-track-title {

  margin-left: 0.5em;

}



.wavesurfer-playlist-track-duration {

  margin-left: auto;

}



.wavesurfer-playlist-track-thumbnail {

  margin-right: 0.5em;

}



.wavesurfer-playlist-track-thumbnail img {

  max-height: 4em;

  width: auto;

}



.wavesurfer-block .wavesurfer-player wave {

  overflow: hidden!important;

}