#audio_player, .info, .error, input {
  display: block;
  width: 250px;
  margin: auto auto auto auto;
}

.info {
    background-color: aqua;     
}

.error {
    background-color: red;
    color: white;
}

body { 
  font-family: Verdana, Geneva, sans-serif; 
  background-color: lightgray;
  margin-top: 30px;
  text-align: center;
}


/*#audio_player { */
  /*float:left;*/
/*  padding:2px 2px 1px 2px;
  background-color: #7e7e7eb5;
  border: 0 px solid #7e7e7e;
  border-radius: 6px;
  margin-top: 30px;
} */

button {
  text-indent:-9999px;
  width:16px;
  height:18px;
  border:none;
  cursor:pointer;
  /* Este baase64 son todos los botones en 16x16 pixels Play Pause Stop + - Volumme + Volumme - Replay*/
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TSlUqInYQcchQnSyIinTUKhShQqgVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi5uak6CIl/q8ptIjx4Lgf7+497t4BQr3MNCswAWi6baYScTGTXRWDr/AjgB7EMCAzy5iTpCQ8x9c9fHy9i/Is73N/jj41ZzHAJxLPMsO0iTeIZzZtg/M+cZgVZZX4nHjcpAsSP3JdcfmNc6HJAs8Mm+nUPHGYWCx0sNLBrGhqxNPEEVXTKV/IuKxy3uKslausdU/+wlBOX1nmOs0RJLCIJUgQoaCKEsqwEaVVJ8VCivbjHv7hpl8il0KuEhg5FlCBBrnpB/+D391a+alJNykUB7peHOdjFAjuAo2a43wfO07jBPA/A1d621+pA7FP0mttLXIE9G8DF9dtTdkDLneAoSdDNuWm5Kcp5PPA+xl9UxYYvAV619zeWvs4fQDS1FXyBjg4BMYKlL3u8e7uzt7+PdPq7wdK33KXCSP4OAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAAAd0SU1FB+UDBAk7BHaR3bgAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABEUlEQVRIx8WUoU4DQRRFz23AULuSpBY+gD+Av6guBBQhJIvCoFAgmlBR1SD6ARgwJCXBNDja4KjBUF17EcyEZQMhdNvdo2Zu8t6c2X0ZAdi+APqSHimA7QaQhO1E0jTkCdAI+VTSJF849Ce90GRegY6/aGXyVibvZGtquR5N4Nn2ue06JVD7IasDx8Cr7V3bpQtEEuAKGNnerkIgsgnc2b61vVGFQGQHGNtuh6kuXSCyH+bjyPZaFQKxbh1YLSqwMkdNHziV9LKIX/AfgSFwKOmh7CF8A5ppmm4t+vC/vsAMOAMuJc2W9Q78JtAFTiS9L/spzgvcAweSRpREFBiHyb4p2O8aeArrQSYfAHth/e1yHxWhfDNOPupoAAAAAElFTkSuQmCC') no-repeat 0 0; /* url('buttons.png') */
}

.pause { background-position:-19px 0; }
.stop { background-position:-38px 0; }


progress {
  /*float: left;*/
  color: green;
  font-size: 12px;
  width: 120px;
  /*height: 12px;*/
  height: 5px;
  border: none;
  margin-right: 10px;
  background: #434343;
  border-radius: 9px;
  vertical-align: middle;
}
progress::-moz-progress-bar { 
  color:rgb(108, 208, 233);
  background:#a4b7f9; 
}

progress[value]::-webkit-progress-bar {
  background-color: #a4b7f9;
  border-radius: 2px;
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;*/
}

progress[value]::-webkit-progress-value {
  background-color: rgb(255, 255, 255);
  border-radius: 2px;
}