/*
 * Waveform requires custom styling as it is not built in to the library.
 */
 /**
 * Class hierarchy/structure
 * (copied from wavesurfer.builder.js)
 * 		View level		(Defined in view -> advanced -> CSS Class)
 *						mjp-wsaudio-setlist-ref	
 *						mjp-wsaudio-setlist-band
 *						others (each will require separate code)
 *		View Header		(All defined in Header template of view)
 *		View Header			mjp-wsaudio-hdr
 *			waveform		mjp-wsaudio-waveform
 *			buttons			mjp-wsaudio-btn
 *			label			mjp-wsaudio-label
 *		Playlist		Format: HTML List
 *						(Defined in row settings)
 *						Wrapper Class:	mjp-wsaudio-playlist-wrapper 
 *						List Class:		mjp-wsaudio-playlist
 *						Row Class:		mjp-wsaudio-playlist-track
 *		Track Item		(Defined in Row Rewrite)
 *						FilePath:		mjp-wsaudio-trackpath
 *						SongName:		mjp-wsaudio-tracktitle
 *		
 */ 

 /*
<div class="mjp-wsaudio-hdr" >
   <div class="mjp-wsaudio-label-wrapper>
      <div class="mjp-wsaudio-hdrsong"> 
         <div class="mjp-wsaudio-labelplaying">Playing:</div>
         <div class="mjp-wsaudio-songplaying">Song Title</div>
      </div>
      <div class="mjp-wsaudio-hdrtop">
         <div class="mjp-wsaudio-hdrtopleft">
            <div class="mjp-wsaudio-songlinks">Links</div>
            <div class="mjp-wsaudio-recordingnotes"></div>
         </div>
         <div class="mjp-wsaudio-hdrtopright">
            <div class="mjp-wsaudio-clock"></div>
            <div class="mjp-wsaudio-debugtext" ></div>
         </div>
      </div>
   </div> <!-- end - "mjp-wsaudio-label-wrapper" -->
   <div class="mjp-wsaudio-waveform-wrapper">
      <div class="mjp-wsaudio-waveform"  ></div>
      <div class="mjp-wsaudio-waveform-timeline" ></div>
   </div> <!-- end - "mjp-wsaudio-waveform-wrapper" -->
   <div class="mjp-wsaudio-input-wrapper">
      <div class="mjp-wsaudio-btn-wrapper">
         <div class="mjp-wsaudio-btn player-button previous">&lt;&lt;</div>
         <div class="mjp-wsaudio-btn player-button replay">|&lt;&lt;</div>
         <div class="mjp-wsaudio-btn player-button backb" data-val=30>30&lt;</div>
         <div class="mjp-wsaudio-btn player-button backa" data-val=10>10&lt;</div>
         <div class="mjp-wsaudio-btn player-button playpause play">Play</div>
         <div class="mjp-wsaudio-btn player-button next">&gt;&gt;</div>
      </div>
      <div class="mjp-wsaudio-group-wrapper">
         <div class="mjp-wsaudio-volgroup">
            <input type="range" class="volume" min="0" max="10" value="7">  
         </div>
         <!-- speedeq wrapper seems to be making the full box smaller -->
         <div class="mjp-wsaudio-speedeq-wrapper">
            <div class="mjp-wsaudio-speedgroup">
               <div class="mjp-wsaudio-input-label hdr">
                       <center>Speed</center></div>
               <div class="mjp-wsaudio-btn rate-button ">70%</div>
               <div class="mjp-wsaudio-btn rate-button ">85%</div>
               <div class="mjp-wsaudio-btn rate-button active">100%</div>
            </div>
            <div class="mjp-wsaudio-eqgroup">
               <div class="mjp-wsaudio-input-label hdr">
                       <center>EQ</center></div>
              <div class="mjp-wsaudio-equalizer-btn-wrapper">
                <div class="mjp-wsaudio-equalizer-btn"></div>
              </div>
            </div> <!-- end - "mjp-wsaudio-eqgroup" -->
         </div> <!-- end - "mjp-wsaudio-speedeq-wrapper" -->
      </div> <!-- end - "mjp-wsaudio-group-wrapper" -->
      <div class="mjp-wsaudio-equalizer-wrapper-outer">
         <div class="mjp-wsaudio-equalizer-wrapper-inner">
            <div class="mjp-wsaudio-equalizer-box">
               <div class="mjp-wsaudio-equalizer"></div>
            </div>
         </div>
      </div> <!-- end - "mjp-wsaudio-equalizer-wrapper-outer" -->
      <div class="mjp-wsaudio-options"></div>
   </div> <!-- end - "mjp-wsaudio-input-wrapper" -->
</div>
 */

 /*******************************************/
 /* Header  */ 
.mjp-wsaudio-setlist-ref {
	margin-bottom: 2em ;
}

.mjp-wsaudio-hdr { 
	box-sizing: border-box;
	border: 2px #337ab7 ;
	border-style: solid;
	padding: 4px ;
	/* 08-29A float: left ; */
}
.mjp-wsaudio-hdrsong {
	width: 100%;
    display: flex;
    background: #286090;
    color: white;
}
.mjp-wsaudio-labelplaying {
	/* color: blue ; 
	   float: left ; */
	margin-left: 5px ;
	padding-left: 10px ;
	flex-shrink: 1 ;
	}
.mjp-wsaudio-labelplaying.loading {
	color: #58f5cc ; /* green ;*/
}
.mjp-wsaudio-songplaying {
	/* color: blue ;
	   margin-left: 10px ;
	   float: left ; */
	font-weight: bold;
	padding-left: 10px ;
	flex-grow: 1 ;
}
.mjp-wsaudio-hdrtop {
	display: flex ;
}
.mjp-wsaudio-hdrtop .mjp-wsaudio-songimage {
	height: 5em ;
	width: 5em ;
}

.mjp-wsaudio-hdrtopleft {
	/* clear: left ;
	   float: left ; */
	flex-shrink: 0 ;
	background: #d7e6f4 ;
}
.mjp-wsaudio-hdrtopmid {
	/* clear: left ;
	   float: left ; */
	flex-grow: 1 ;
	background: #d7e6f4 ;
}
.mjp-wsaudio-songlinks {
	clear: left; 
	float: left;
	font-size: 80%;
	margin-left: 5px ;
	width: 100% ;
	max-height: 1.8em ;
	overflow: hidden ;
}
.mjp-wsaudio-songlink {
	float: left ;
	overflow: hidden ;
	width: 40% ;
}
.mjp-wsaudio-songlinks a {
	text-decoration: underline ;
	padding-left: 15px ;
}
.mjp-wsaudio-songlinks a:hover {
	font-weight: bold ;
}
.mjp-wsaudio-songlinks a:visited {
	font-weight: bold ;
}

a.mjp-wsaudio-songimage-wrapper {
	min-height: 3em ;
	min-width: 3em ;
}
.mjp-wsaudio-recordingnotes {
	clear: left ;
	float: left ;
	padding-left: 20px ;
	padding-right: 20px ;
	line-height: 1.2em ;
	width: 100% ;
	font-size: 75% ;
	font-style: italic ;
}
.mjp-wsaudio-hdrtopright {
	/* float: left ;
	   margin-top: auto ;
	   margin-bottom: auto ; */
	text-align: center;
    width: 11ch;
    background: #3177b4;
    flex-shrink: 0;
    color: white;
    padding-left: 1ch;
    padding-right: 1ch;
}
.mjp-wsaudio-clock {
	/* float: right ;
	   margin-left: 10px ; */
	font-weight: bold;
	flex-grow: 1;
	align-self: flex-end ;
	min-height: 1em ;
}
.mjp-wsaudio-debugtext {
	font-size: 75% ;
	color: pink ;
}
/*******************************************/
/* Waveform display */
.mjp-wsaudio-setlist-ref  .mjp-wsaudio-hdr .mjp-wsaudio-waveform-wrapper {
	/* margin: 5px; */
	clear: left ;
	position: relative;
	}
.mjp-wsaudio-setlist-ref  .mjp-wsaudio-hdr .mjp-wsaudio-waveform {
  background-color: #286090;
}
.mjp-wsaudio-inputs {
	clear: left ;
}
.mjp-wsaudio-hdr input { 
	float: left ;
}

 /*******************************************/
/* Buttons */
.mjp-wsaudio-input-wrapper {
	margin: 5px ;
	/* 08-29A clear: left ;
	          float: left; */
}
input.mjp-wsaudio-btn-wrapper {
	margin: 5px ;
	clear: left ;
}
 .mjp-wsaudio-btn  {
  color: #fff;
  background-color: #337ab7;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 75%;
  min-width: 7ch ;
}
.mjp-wsaudio-hdr.public .mjp-wsaudio-btn.backb {
  display: none ;
}
.mjp-wsaudio-hdr.public .mjp-wsaudio-btn.backa {
  display: none ;
}
.mjp-wsaudio-btn.player-button {
  width: 14% ;
}
.mjp-wsaudio-hdr.public .mjp-wsaudio-btn.player-button {
  width: 20% ;
}
.mjp-wsaudio-btn.playpause {
  /* width: 45px; */
  font-size: 65%;
  min-width: 7ch ;
}
.mjp-wsaudio-hdr.public .mjp-wsaudio-speedgroup {
  display: none ;
}
.mjp-wsaudio-btn.rate-button {
	width: 29% ;
	margin: 2px ;
}
.mjp-wsaudio-btn.rate-button.active {
	color: #58f5cc ; /* green ;*/
	font-weight: bold ;
}
.mjp-wsaudio-hdr.public .mjp-wsaudio-eqgroup {
  display: none ;
}
.mjp-wsaudio-btn.eq {
	/* display: flex ; */
	width: auto ;
}

.mjp-wsaudio-btn:hover {
  background-color: #286090;
}
.mjp-wsaudio-group-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	flex-wrap: wrap ;
	margin-bottom: .4em ;
}
.mjp-wsaudio-volgroup {
	/* 8-29A float: left ;
	         display: block ;
	         width: 42% ; */
	clear: left ;
	margin-left: 2em ;
	margin-right: 2em ;
	margin-bottom: .4em;
	flex-direction: column ;
	align-items: center ;
}
.mjp-wsaudio-speedeq-wrapper {
	display: flex ;
	flex-direction: column ;
}
.mjp-wsaudio-eqgroup {
	/* 08-29A float: left ;
	          width: 13% ;
	          display: block ; */
	margin-left: auto ;
	margin-right: auto ;
	flex-direction: row ;
}
.mjp-wsaudio-speedgroup {
	/* 08-29A  float: left ;
	           width: 45% ;
	           display: block ; */
	margin-left: auto ;
	margin-right: auto ;
	flex-direction: row ;
}
input.mjp-wsaudio-wavesurfer .volume {
  float: right;
}
.mjp-wsaudio-hdr.public .mjp-wsaudio-options {
	display: none ;
}
.mjp-wsaudio-options {
	display: flex ;
}
.mjp-wsaudio-input-label { 
	/* 08-29A float: left ; */
	margin-left: 3px ;
	font-size: 80% ;
}
.mjp-wsaudio-input-label.nl { 
	clear: left ;
}
.mjp-wsaudio-input-label.hdr {
	/* 08-29A width: 100% ; */
}
.mjp-wsaudio-input-autowait-wrapper {
	display: flex ;
}
input.mjp-wsaudio-input-num[type=number] {
	margin-left: 2px ;
	width: 7ch ;
	/* 08-29A float: left ; */
}

/*******************************************/
/* CheckBox */
input.mjp-wsaudio-cb { 
	background: #73a9d9 ;
}
label.mjp-wsaudio-cb {
	/* 08-29A float:left ; */
	margin-left: 10px ;
}
label.mjp-wsaudio-cb input {
  display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label.mjp-wsaudio-cb span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
  margin: 5px ;
}

/* Style its checked state...with a ticked icon */
label.mjp-wsaudio-cb input[type=checkbox]:checked + span:after {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
  /* margin-left: 5px;*/
}

/*******************************************/
/* Playlist & Track */
.mjp-wsaudio-playlist {
  margin-top: 2px;
}
.mjp-wsaudio-playlist-track {
  /* display: inline-block; */
  display: block; 
  clear: left;
  cursor: pointer;
  border-bottom: 1px solid black;
  padding: 2px 2px;
  line-height: 1em ;
  overflow: auto ;
}
.mjp-wsaudio-playlist-track.playing {
  color: #337ab7;
}
.mjp-wsaudio-playlist-track:hover {
  /* background-color: #337ab7; */
  background-color: gray;
  color: white;
  font-weight: bold;
}

.mjp-wsaudio-playlist-track a { 
	margin-left: 3px ;
}

.mjp-wsaudio-playlist-track.playing .mjp-wsaudio-tracktitle {
	font-weight: bold;
}
.mjp-wsaudio-tracktitle {
	clear: left ;
	margin-left: 5px ;
	/* Both items need float: left */
	float: left; 
}
.mjp-wsaudio-trackref {
	  float: left; 
	  margin-left: 5px ;
	  font-size: 70% ;
    }
.mjp-wsaudio-trackbody {
	  font-size: 70% ;
	  margin-left: 10px ;
	  clear: left ;
	  float: left ;
	  display: none ;
}

div.mjp-wsaudio-trackpath { 
	display: none;
}
div.mjp-wsaudio-playlist-trackitem a.mjp-wsaudio-track-songlink {
	display: none;
}
div.mjp-wsaudio-playlist-trackitem a.mjp-wsaudio-track-audiolink {
	display: none;
}
div.mjp-wsaudio-playlist-trackitem a.mjp-wsaudio-track-songimage {
	display: none;
}
/*******************************************/
/* Equalizer  */
.mjp-wsaudio-equalizer-box {
	/* clear: left ;
	   float: left ;
	   border: 2px ; */
	width: 100% ;
	margin: 0px ;
	margin-left: 10px;
	display: flex;
	flex-direction: row ;
	
}

.mjp-wsaudio-equalizer-btn-wrapper {
	/* display: flex ; */
}

.mjp-wsaudio-equalizer-btn {
	/* float: left ; */
	/* align-items: stretch;
	   width: 20% ; */
}
.mjp-wsaudio-equalizer-btn > div.mjp-wsaudio-btn {
	width: 100% ;
}

/*******************************************/
/*
https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly/47860039#47860039
 */
/* display: table is critical for setting height */
.mjp-wsaudio-hdr.public .mjp-wsaudio-equalizer-wrapper-outer {
	display: none ;
}
.mjp-wsaudio-equalizer-wrapper-outer {
	display: table ;
	clear: left ;
}
.mjp-wsaudio-equalizer-wrapper-inner {
	padding: 50% 0 ;
	height: 0 ;
	/*  clear: left ;
	    float: left ; */
}
	
/*******************************************/
/* Range - Sliders */
/* Below css comes from 
https://www.cssportal.com/style-input-range/
 */
	
.mjp-wsaudio-equalizer html, body {
  min-height: 1.75em;
  height: 100%;
}
.mjp-wsaudio-equalizer html {
  overflow: hidden;
}

.mjp-wsaudio-equalizer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* new code */
  transform-origin: top left ;
  transform: rotate(-90deg) translate(-100%) ;
  margin-top: -50% ;
  white-space: nowrap ;
  /*
  margin: 0;
  transform: rotate(-90deg);
   */
  border: solid 2px ;
  background:  #73a9d9 ;
  /* clear: left;
     float: left; */
}
.mjp-wsaudio-hdr input[type='range'] {
  align-self: center;
  margin: -0.75em 0;
  border: solid 1.5em transparent;
  padding: 0;
  width: 12em;
  height: 3.6em;
  background: repeating-linear-gradient(90deg, #9dc4e6, #9dc4e6 0.0625em, transparent 0.0625em, transparent 1.5em) no-repeat 50% 0.4375em border-box, repeating-linear-gradient(90deg, #9dc4e6, #9dc4e6 0.0625em, transparent 0.0625em, transparent 1.5em) no-repeat 50% 4.9375em border-box, linear-gradient(90deg, rgba(155, 194, 228, 0), #286090, rgba(155, 194, 228, 0)) no-repeat 50% 50% border-box;
  background-size: 6.0625em 0.625em, 6.0625em 0.625em, 100% 3em;
  font-size: 1em;
  cursor: pointer;
}
.mjp-wsaudio-hdr input[type='range'], .mjp-wsaudio-hdr input[type='range']::-webkit-slider-runnable-track, .mjp-wsaudio-hdr input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.mjp-wsaudio-hdr input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  width: 7em;
  height: 0.5em;
  border-radius: .1875em;
  background: rgba(158, 186, 212, 0.825);
}
.mjp-wsaudio-hdr input[type='range']::-moz-range-track {
  width: 7em;
  height: 0.5em;
  border-radius: .1875em;
  background: rgba(158, 186, 212, 0.825);
}
.mjp-wsaudio-hdr input[type='range']::-ms-track {
  border: none;
  width: 7em;
  height: 0.5em;
  border-radius: .1875em;
  background: rgba(158, 186, 212, 0.825);
  color: transparent;
}
.mjp-wsaudio-hdr input[type='range']::-ms-fill-lower {
  display: none;
}
.mjp-wsaudio-hdr input[type='range']::-webkit-slider-thumb {
  margin-top: -0.125em;
  border: none;
  width: 1.5em;
  height: 0.75em;
  border-radius: .5em;
  box-shadow: -.125em 0 .25em #163550, inset -1px 0 1px #fff;
  background: radial-gradient(#d7e6f4 10%, rgba(215, 230, 244, 0.2) 10%, rgba(215, 230, 244, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #d9e6f4, #d4e2f0 71%, transparent 71%) no-repeat 1.14em 50%, linear-gradient(90deg, #d7e6f4, #afcee9) no-repeat 100% 50%, radial-gradient(at 0 50%, #afcee9, #286090 71%, transparent 71%) no-repeat 0.18em 50%, linear-gradient(90deg, #d7e6f4, #afcee9) no-repeat 0 50%, linear-gradient(#286090, #ebf3fa, #ebf3fa, #286090);
  background-size: 0.198em 100%;
}
.mjp-wsaudio-hdr input[type='range']::-moz-range-thumb {
  border: none;
  width: 1.5em;
  height: 0.75em;
  border-radius: .5em;
  box-shadow: -.125em 0 .25em #163550, inset -1px 0 1px #fff;
  background: radial-gradient(#d7e6f4 10%, rgba(215, 230, 244, 0.2) 10%, rgba(215, 230, 244, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #d9e6f4, #d4e2f0 71%, transparent 71%) no-repeat 1.14em 50%, linear-gradient(90deg, #d7e6f4, #afcee9) no-repeat 100% 50%, radial-gradient(at 0 50%, #afcee9, #286090 71%, transparent 71%) no-repeat 0.18em 50%, linear-gradient(90deg, #d7e6f4, #afcee9) no-repeat 0 50%, linear-gradient(#286090, #ebf3fa, #ebf3fa, #286090);
  background-size: 0.198em 100%;
}
.mjp-wsaudio-hdr input[type='range']::-ms-thumb {
  border: none;
  width: 1.5em;
  height: 0.75em;
  border-radius: .5em;
  box-shadow: -.125em 0 .25em #163550, inset -1px 0 1px #fff;
  background: radial-gradient(#d7e6f4 10%, rgba(215, 230, 244, 0.2) 10%, rgba(215, 230, 244, 0) 72%) no-repeat 50% 50%, radial-gradient(at 100% 50%, #d9e6f4, #d4e2f0 71%, transparent 71%) no-repeat 1.14em 50%, linear-gradient(90deg, #d7e6f4, #afcee9) no-repeat 100% 50%, radial-gradient(at 0 50%, #afcee9, #286090 71%, transparent 71%) no-repeat 0.18em 50%, linear-gradient(90deg, #d7e6f4, #afcee9) no-repeat 0 50%, linear-gradient(#286090, #ebf3fa, #ebf3fa, #286090);
  background-size: 0.198em 100%;
}
.mjp-wsaudio-hdr input[type='range']::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']::-webkit-slider-runnable-track:after, .mjp-wsaudio-hdr input[type='range'] /deep/ #track:before, .mjp-wsaudio-hdr input[type='range'] /deep/ #track:after {
  position: absolute;
  font: 0.75em/6em trebuchet ms, arial, sans-serif;
}
.mjp-wsaudio-hdr input[type='range']::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range'] /deep/ #track:before {
  top: 50%;
  right: 100%;
  transform: translate(50%, -50%) rotate(90deg) translate(0, 32%);
}
.mjp-wsaudio-hdr input[type='range']::-webkit-slider-runnable-track:after, .mjp-wsaudio-hdr input[type='range'] /deep/ #track:after {
  left: 50%;
  width: 3em;
  word-spacing: 1em;
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']:nth-of-type(1) /deep/ #track:before {
  content: "320Hz";
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after, .mjp-wsaudio-hdr input[type='range']:nth-of-type(1) /deep/ #track:after {
  bottom: 100%;
  transform: translate(-50%, 50%) rotate(90deg) translate(-5.125em);
  text-align: right;
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(2)::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']:nth-of-type(2) /deep/ #track:before {
  content: "600Hz";
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(3)::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']:nth-of-type(3) /deep/ #track:before {
  content: "1KHz";
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(4)::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']:nth-of-type(4) /deep/ #track:before {
  content: "3KHz";
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(5)::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']:nth-of-type(5) /deep/ #track:before {
  content: "6KHz";
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:before, .mjp-wsaudio-hdr input[type='range']:nth-of-type(6) /deep/ #track:before {
  content: "12KHz";
}
.mjp-wsaudio-hdr input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after, .mjp-wsaudio-hdr input[type='range']:nth-of-type(6) /deep/ #track:after {
  top: 100%;
  /* transform: translate(-50%, -50%) rotate(90deg) translate(5.125em); */
  transform: translate(-50%, -50%) rotate(90deg) translate (50%, 50%) scale( 4, 1) ;
  }
.mjp-wsaudio-hdr input[type='range']:nth-of-type(1)::-webkit-slider-runnable-track:after, .mjp-wsaudio-hdr input[type='range']:nth-of-type(1) /deep/ #track:after, .mjp-wsaudio-hdr input[type='range']:nth-of-type(6)::-webkit-slider-runnable-track:after, .mjp-wsaudio-hdr input[type='range']:nth-of-type(6) /deep/ #track:after {
  content: '+18 0 -18';
}
.mjp-wsaudio-hdr input[type='range']:focus {
  outline: none;
}
.mjp-wsaudio-hdr input[type='range']:focus::-webkit-slider-runnable-track {
  background: #286090;
}
.mjp-wsaudio-hdr input[type='range']:focus::-moz-range-track {
  background: #286090;
}
.mjp-wsaudio-hdr input[type='range']:focus::-ms-track {
  background: #286090;
}