.audio-player{height:50px;width:100%;background:#9B2776;font-family:arial;color:white;font-size:0.75em;overflow:hidden;display:grid;grid-template-rows:6px auto;.timeline{direction:ltr;background:#8B1E68;width:100%;position:relative;cursor:pointer;.progress{background:#fff;width:0;height:100%;transition:.25s}}.controls{direction:ltr;display:flex;justify-content:space-between;align-items:stretch;>*{display:flex;justify-content:center;align-items:center}.toggle-play{&.play{cursor:pointer;position:relative;left:0;height:0;width:0;border:7px solid #0000;border-left:13px solid white;&:hover{transform:scale(1.1)}}&.pause{height:15px;width:20px;cursor:pointer;position:relative;&:before{position:absolute;top:0;left:0;background:#fff;content:"";height:15px;width:3px}&:after{position:absolute;top:0;right:8px;background:#fff;content:"";height:15px;width:3px}&:hover{transform:scale(1.1)}}}.time{display:flex;>*{padding:2px}}.volume-container{cursor:pointer;.volume-button{height:26px;display:flex;align-items:center;.volume{transform:scale(.7)}}position:relative;z-index:2;.volume-slider{position:absolute;left:-3px;top:15px;z-index:-1;width:0;height:15px;background:white;box-shadow:0 0 20px #000a;transition:.25s;.volume-percentage{background:coral;height:100%;width:75%}}&:hover{.volume-slider{left:-123px;width:120px}}}}}.icons-podcast{width:100px;height:85px;justify-content:center;align-items:center;display:flex;border-radius:10px;background:var(--primary-400,#8b1e68);padding:15px}.podccast-swiper{border-radius:8px}.podccast-swiper .swiper-slide{height:auto !important}.khat-2:after{content:"";display:block;border-bottom:1px solid #8b1e68;margin-top:15px}