.w3RecContainer{
 position:fixed;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 margin:auto;
 z-index:99999;
 width:320px;
 height:230px;
 overflow:auto;
 text-align:center;
}

.w3PlayContainer{
 position:fixed;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 margin:auto;
 z-index:99999;
 width:400px;
 height:400px;
 overflow:auto;
 text-align:center;
}

#w3playlistAll > li{
padding:8px;
margin: 0 0 20px 0;
}

.w3checkStreamOut{
padding-top:15px;
}

.w3wrapRecChildsTab{
min-height:100%;
min-width:100%;
}

.w3wrapRecChildsTd{
vertical-align:middle;
}

audio{
  width:90%;
}

progress {
  -webkit-appearance: none;
  width:40%;
  height:6px;
  border:1px solid #999;
  border-radius:3px;
  background-color: transparent;
}
progress::-webkit-progress-bar {
 background-color: transparent;
}

/* Preloader while file saving */
.w3avpreloader{
 position:relative;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 margin:auto;
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  z-index:999999;
}

@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Recording round button pulse */
#w3RecOnbutton {
  width: 50px;
  height: 50px;
  font-size: 0;
  background-color: #FF0040;
  border: 0;
  border-radius: 35px;
  margin: 18px;
  outline: none;
}


.w3RecOn{
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes pulse{
  0%{
    box-shadow: 0px 0px 5px 0px rgba(173,0,0,.3);
  }
  65%{
    box-shadow: 0px 0px 5px 13px rgba(173,0,0,.3);
  }
  90%{
    box-shadow: 0px 0px 5px 13px rgba(173,0,0,0);
  }
}