.btn.play-record{width:30px;height:20px;background: transparent url('../images/record-audio-btn-bg.jpg') no-repeat center center;position: relative;padding:0;margin: 4px 2px;display:inline-flex;vertical-align: middle;cursor: pointer;}
.btn.play-record .play-icon{
  color: #ffffff;font-size: 12px;font-family: 'arial',sans-serif;text-align: center;line-height: normal;text-transform: uppercase;font-weight: 600;width:14px;height: 14px;margin:auto;display: flex;justify-content: center;align-items: center;
}
.btn.play-record .play-icon.hide{display: none}

.player-layer{top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0);position: fixed;z-index:111111;display: none}
.player-layer.show{display: block}

.footer.for-audio{
  width: 100%;height: 50px;background-color: #f1f3f4;display: flex;position: fixed;top: auto;bottom: 0;left: 0;right: 0;box-shadow: 0 -3px 30px -7px #b4b4b4;border-top: 2px solid #fff;align-items: center;justify-content: space-between;padding: 10px 0 10px 10px;box-sizing: border-box;
    background-color: #f1f3f4;transition:all 0.26s;z-index:111111;
    /*opacity: 1;background-image: radial-gradient(circle at center center, #f1f1f1, #ffffff), repeating-radial-gradient(circle at center center, #ffffff, #dfdfdf, 50px, transparent 10px, transparent 10px);background-blend-mode: multiply;*/
}
.footer.for-audio .file-details{display: none}

.footer.for-audio .audio-player{width:calc(100% - 70px);max-width: calc(100% - 20px);height: 40px;}
.footer.for-audio .x-icon{
  width: 16px;height: auto;display: block;padding: 7px;box-sizing: content-box;cursor: pointer;box-shadow: 0 0 1px 1px #b4b4b4;margin-right: 12px;background-color: #fff;border-radius: 50%;
}
.footer.for-audio .file-details *{font-size:13px;font-family: 'arial',sans-serif;}
.footer.for-audio .file-details .audio-details-blk{display: flex;margin:4px 0}
.footer.for-audio .file-details .audio-details-blk:last-child{margin-bottom: 0}
.footer.for-audio .file-details .audio-details-blk .label{color: #333;font-size: 13px;font-weight: 600;padding-right:6px;padding-right: 6px;min-width: 65px;}

.footer.for-audio.hidden{height: 0;bottom: -125px;padding: 0;overflow: hidden;}

@keyframes audioAnim{ from{height:4px;} to{height:9px} }
.btn.play-record .wave-anim{
  width: 100%;height: 100%;position: absolute;top: auto;bottom: 0;padding: 2px;display: none;
  align-items: end;justify-content: center;box-sizing: border-box;z-index: 1;
}
.btn.play-record .wave-anim.show{display: flex;}
.btn.play-record .wave-anim .bar{width:4px;background-color: rgba(255, 255, 255, 0.5);border-radius: 2px 2px 0 0;margin: 0 1px}
.btn.play-record .wave-anim .bar.one{height:9px;animation:0.3s infinite alternate audioAnim}
.btn.play-record .wave-anim .bar.two{height:18px;animation:0.2s infinite alternate audioAnim;display: none;}
.btn.play-record .wave-anim .bar.three{height:8px;animation:0.4s infinite alternate audioAnim}
.btn.play-record .wave-anim .bar.four{height:11px;animation:0.25s infinite alternate audioAnim;display: none;}
.btn.play-record .wave-anim .bar.five{height:14px;animation:0.5s infinite alternate audioAnim}
.btn.play-record .wave-anim .bar.six{height:7px;animation:0.4s infinite alternate audioAnim;display: none;}