/**
 * Plugin Name: Midiwood - Audio Mixer Of Love
 * Description: Adds a custom audio mixer to your website.
 * Version: 6.0.6
 * Author: Richard Vossgatter
 * Author URI: Midiwood
 */

.audio-mixer-container {
 display: flex;
 flex-wrap: wrap;
  width: 100%;
  border: solid 0px;
  padding: 0px 20px;
  background-color: ;
  min-height: 100px;
  align-content: center;
}

/*---------------------*/
/*Play Button*/
.play-container {
    display: flex;
    width: 50px;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}
.preloader {
fill: #000!important;
display: none;
}

.play-button-container {
}

/*---------------------------------------------------*/
/*NEW SVG BUTTON*/

.play-button-container {
  display: flex!important;
  align-items: center!important;
  margin: 0 0 0 0px!important;
  border: none!important;
}

.play-button {
  width: 38px!important;
  height: 38px!important;
  border-radius: 50% !important;
  border: 1px solid #fff;
  background-color: transparent!important;
  padding: 0!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center;
  cursor: pointer!important;
  transition: all 0.3s ease;
}

.play-button:hover {
  width: 38px!important;
  height: 38px!important;
  border: 1px solid #ccc;
  background-color: transparent!important;
}

.play-button:hover svg {
  width: 60%;
  height: 60%;
}

.play-button .play-icon{
  display: none;
}

.play-button svg {
  width: 60%;
  height: 60%;
  fill: #fff;
  transition: all 0.3s ease;
}


.play-button .pause-path {
  display: none;
}

.play-button.active .play-path {
  display: none;
}

.play-button.active .pause-path {
  display: block;
}


/*---------------------*/
/*Waveform*/

.waveform-container-parent {
  position: relative;
  flex-grow: 1;
  height: 50px;
  border: solid 0px;
  margin: 0px 0;
  align-self: center;
}

.waveform-container-1{
  position: absolute;
  width: 100%;
  height: 60px;
  border: solid 0px;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
}

.waveform-container-2 {
 position: absolute;
  width: 100%;
  height: 100%;
  border: solid 0px;
   top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
}

.waveform-container-1.hide-display,
.waveform-container-2.hide-display {
 left: -10000px;
 
}

.waveform-container-1.full-display,
.waveform-container-2.full-display { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.waveform-container-1=progress,
.waveform-container-2=progress { 
   background-color: white;
 }


/*------------------------------------------------------------/*
/*INFO*/

.info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0px 0 0px;
  color: #fff!important;
  width: 110px;

}

/* Global Minify*/

.info.mini-global{
  display: none;
}

.composer{
    margin-bottom: 0;
    font-size: 10px;
    letter-spacing: 0.2px;
}

.song-title{
    font-size: 10px;
    font-weight: bold;
    padding: 0 0px;
    letter-spacing: 0.2px;
}


/*------------------------------------------------------------/*
/*Buttons*/

.buttons-container {
  /*min-width: 300px;*/
  display: flex;
  flex-direction: row;
  flex-basis: 100% !important; 
  padding: 5px 0 0 0;
  white-space: nowrap;
} 

.buttons-container button {
}

.alone-button{
  background-color: #4F4F4F!important;
  color: #fff!important;
  border: 0px solid #B6B6B6;
  border-radius: 4px!important;
  font-size: 9px!important;
  font-family: 'Montserrat'!important;
  font-style: normal!important;
  font-weight: 700!important;
  letter-spacing: 2px!important;
  text-align: left!important;
  padding: 5px 10px!important;
}

.alone-button:hover {
  background-color: #636363!important;
  border: 0px solid #fff;
  font-family: 'Montserrat'!important;
  font-style: normal!important;
}

.alone-button.active {
  color: #000!important;
  background-color: #fff!important;
  font-family: 'Montserrat'!important;
  font-style: normal!important;
  font-weight: 700!important;
  font-size: 9px!important;
}

/*------------------------*/
/*Resonsive*/


@media (max-width: 767px) {

  .alone-button, {
  font-size: 8px!important;
}

.waveform-container-parent {
flex-grow: 1;
flex-basis: 100%;
}

.waveform-container-parent.mini-mobile{
flex: auto;
}
.waveform-container-parent.mini-global{
  flex: auto;
}

.info.mini-mobile{
  display: none;
}

}