/*-------------------------------------------------------------------------------------------------------------------------------*/
/* ROOT */
/*-------------------------------------------------------------------------------------------------------------------------------*/
:root {
  --color-white: #fff;
  --color-black: #2d3436;
  --color-blue: #2980b9;
  --color-grey: #ccc;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* WAVE SURFER */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.wavesurfer-block {position: relative;display: block;width: 100%;border: 2px solid var(--color-black);border-radius: 5px;}
.wavesurfer-item {position: relative;display: block;width: 100%;cursor: pointer;padding: 20px;border-bottom: 2px solid var(--color-black);}
.wavesurfer-item:last-child {border-bottom: none;}
.wavesurfer-head {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;width: 100%;margin-bottom: 30px;}
.wavesurfer-head div,.wavesurfer-head span {position: relative;display: inline-block;font-size: 20px;font-weight: 500;color: var(--color-black);}
.wavesurfer-head span {font-size: 18px;font-weight: 400;}
.wavesurfer-wave {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;width: 100%;}
.wavesurfer-btn {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 40px;min-width: 40px;height: 40px;border-radius: 50%;border: 2px solid var(--color-black);-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.wavesurfer-btn.play .play-icon,.wavesurfer-btn.pause .pause-icon {opacity: 1;visibility: visible;}
.wavesurfer-btn i {position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;font-size: 20px;color: var(--color-black);opacity: 0;visibility: hidden;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.wavesurfer {position: relative;display: block;width: 100%;margin-left: 30px;}