.audiovertical-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.audiojsZ audio{position:absolute;left:1%}.audiojsZ{width:80%;max-width:300px;height:36px;background:#5c5151;overflow:hidden;font-family:monospace;font-size:12px;-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);-moz-box-shadow:1px 1px 8px rgba(0,0,0,0.3);-o-box-shadow:1px 1px 8px rgba(0,0,0,0.3);box-shadow:1px 1px 8px rgba(0,0,0,0.3);border-style:solid;border-width:1px;border-color:rgba(23,24,22,0.6);border-radius:16px}.audiojsZ .play-pauseZ{width:25px;max-width:25px;height:40px;padding:2px 6px;margin:0;float:left;overflow:hidden;border-right:1px solid #000}.audiojsZ p{display:none;width:25px;max-width:25px;height:36px;margin:0 3px 0 -8px;cursor:pointer}.audiojsZ .playZ{display:block}.audiojsZ .scrubberZ{position:relative;float:left;width:148px;max-width:180px;background:#fcc;height:14px;margin:10px;border-left:0;border-bottom:0;overflow:hidden}.audiojsZ .progressZ{position:absolute;top:0;left:0;height:14px;width:0;background:#b3a9a9;z-index:1}.audiojsZ .loadedZ{position:absolute;top:0;left:0;height:14px;width:0;background:#262222}.audiojsZ .timeZ{float:left;height:36px;line-height:36px;margin:0;padding:0 0 0 4px;border-left:1px solid #000;color:#fff;text-shadow:1px 1px 0 rgba(125,0,0,0.5)}.audiojsZ .timeZ em{padding:0 2px 0 0;color:#fcc;font-style:normal}.audiojsZ .timeZ strong{padding:0 0 0 2px;font-weight:400}.audiojsZ .error-messageZ{float:left;display:none;margin:0 10px;height:36px;width:86%;overflow:hidden;line-height:36px;white-space:nowrap;color:#fff;text-overflow:ellipsis;-o-text-overflow:ellipsis;-icab-text-overflow:ellipsis;-khtml-text-overflow:ellipsis;-moz-text-overflow:ellipsis;-webkit-text-overflow:ellipsis}.audiojsZ .error-messageZ a{color:#eee;text-decoration:none;padding-bottom:1px;border-bottom:1px solid #999;white-space:wrap}.audiojsZ .playZ{background:url(./play.svg) 2px -3px no-repeat}.audiojsZ .loadingZ{background:url(./loading.svg) 1px -4px no-repeat}.audiojsZ .errorZ{background:url(./error.svg) 1px -4px no-repeat}.audiojsZ .pauseZ{background:url(./pause.svg) 1px -4px no-repeat}.playingZ .playZ,.playingZ .loadingZ,.playingZ .errorZ{display:none}.playingZ .pauseZ{display:block}.loadingZ .playZ,.loadingZ .pauseZ,.loadingZ .errorZ{display:none}.loadingZ .loadingZ{display:block}.errorZ .timeZ,.errorZ .playZ,.errorZ .pauseZ,.errorZ .scrubberZ,.errorZ .loadingZ{display:none}.errorZ .errorZ{display:block}.errorZ .play-pauseZ p{cursor:auto}.errorZ .error-messageZ{display:block}.audiojsX audio{position:absolute;left:1%}.audiojsX{width:24px;max-width:24px;height:18px;overflow:hidden;font-family:monospace;font-size:12px;-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);-moz-box-shadow:1px 1px 8px rgba(0,0,0,0.3);-o-box-shadow:1px 1px 8px rgba(0,0,0,0.3);box-shadow:1px 1px 8px rgba(0,0,0,0.3)}.audiojsX .play-pauseX{width:24px;height:18px;padding:0;margin:0;float:left;overflow:hidden;border-right:1px solid #000}.audiojsX p{display:none;width:24px;height:18px;margin:0;cursor:pointer}.audiojsX .playX{display:block}.audiojsX .scrubberX{position:relative;float:left;width:148px;max-width:180px;background:#fcc;height:14px;margin:10px;border-left:0;border-bottom:0;overflow:hidden}.audiojsX .progressX{position:absolute;top:0;left:0;height:14px;width:0;background:#b3a9a9;z-index:1}.audiojsX .loadedX{position:absolute;top:0;left:0;height:14px;width:0;background:#262222}.audiojsX .timeX{float:left;height:36px;line-height:36px;margin:0;padding:0 0 0 4px;border-left:1px solid #000;color:#fff;text-shadow:1px 1px 0 rgba(125,0,0,0.5)}.audiojsX .timeX em{padding:0 2px 0 0;color:#fcc;font-style:normal}.audiojsX .timeX strong{padding:0 0 0 2px;font-weight:400}.audiojsX .error-messageX{float:left;display:none;margin:0 10px;height:36px;width:86%;overflow:hidden;line-height:36px;white-space:nowrap;color:#fff;text-overflow:ellipsis;-o-text-overflow:ellipsis;-icab-text-overflow:ellipsis;-khtml-text-overflow:ellipsis;-moz-text-overflow:ellipsis;-webkit-text-overflow:ellipsis}.audiojsX .error-messageX a{color:#eee;text-decoration:none;padding-bottom:1px;border-bottom:1px solid #999;white-space:wrap}.audiojsX .playX{background:url(./play.svg) -2px -10px no-repeat}.audiojsX .loadingX{background:url(./loading.svg) -2px -10px no-repeat}.audiojsX .errorX{background:url(./error.svg) -2px -10px no-repeat}.audiojsX .pauseX{background:url(./pause.svg) -2px -10px no-repeat}.playingX .playX,.playingX .loadingX,.playingX .errorX{display:none}.playingX .pauseX{display:block}.loadingX .playX,.loadingX .pauseX,.loadingX .errorX{display:none}.loadingX .loadingZ{display:block}.errorX .timeX,.errorX .playX,.errorX .pauseX,.errorX .scrubberX,.errorX .loadingX{display:none}.errorX .errorX{display:block}.errorX .play-pauseX p{cursor:auto}.errorX .error-messageX{display:block} .audio-player {display: flex; align-items: center; margin-bottom: 10px;} .audio-player button {width: 40px; height: 40px; margin-right: 10px;   background-color: #007BFF; border: none;  border-radius: 50%;  color: white; font-weight: bold; cursor: pointer;} .audio-player button:focus { outline: none;}