.player{display:flex;gap:50px;margin:30px 0;background-color:var(--darkblue-1);padding:20px}
.player .h3{color:var(--lightblue-5);margin-bottom:10px}
.player p{color:#fff;margin-top:0}
.player-content{display:flex;flex-direction:column}
.player-track-time{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--lightblue-5)}
.player-track,.player-volume{background:linear-gradient(to right,var(--lightblue-5) 0%,var(--lightblue-5) 0%,#fff 0%,#fff 100%);border:2px solid var(--lightblue-5);border-radius:0;height:8px;width:100%;outline:none;transition:.3s;appearance:none;-webkit-appearance:none}
.player-volume{height:4px;border:1px solid var(--lightblue-5);background:linear-gradient(to right,var(--lightblue-5) 0%,var(--lightblue-5) 100%,#fff 0%,#fff 100%)}
.player-track::-webkit-slider-thumb,.player-volume::-webkit-slider-thumb{width:16px;height:16px;border-radius:50%;-webkit-appearance:none;cursor:ew-resize;background:#fff;border:2px solid var(--lightblue-5)}
.player-volume::-webkit-slider-thumb{width:9px;height:9px}
.player-volume-btn{background-color:transparent;border:0;padding:0;font-size:0}
.player-volume-btn img{cursor:pointer;width:25px}
.player-volume-wrap{display:flex;align-items:center;gap:5px}
.player-action{max-width:600px;margin-top:auto}
.player-left-image{align-self:flex-start}
.player-bottom{display:flex;justify-content:space-between;margin-top:15px;gap:20px}
.player-rate{margin-left:5px}
.player-main-btn{cursor:pointer;height:26px}
.player .dropdown-content{right:-10px;left:auto;border:0;max-width:60px;min-width:60px;top:25px;position:absolute}
.player .dropdown-container .dropdown-btn{border:0;padding:0;color:#fff;background:transparent}
.player .dropdown-container .dropdown-btn:after{margin-left:10px;filter:invert(1)}
.player-left-image-mob{display:none}
.player-main-btn-lock{padding:0;border:0;font-size:0;width:20px;background-color:transparent;background-image:url(/assets/images/article/podcast-locked.svg);background-repeat:no-repeat;background-size:contain;background-position:center;cursor:pointer}
@media (max-width: 1280px) {
.player{gap:20px}
.player-volume{display:none}
.player-volume-btn img{width:15px;margin-right:10px}
}
@media (max-width: 992px) {
.player-left-image{max-width:218px}
}
@media (max-width: 768px) {
.player{position:relative}
.player-main-btn{position:absolute;top:109px;left:109px;width:50px;height:50px;opacity:.8}
.player-volume-wrap{justify-content:space-between;width:100%}
.player p,.player-track-time{font-size:14px}
}
@media (max-width: 576px) {
.player{flex-direction:column}
}
@media (max-width: 480px) {
.player-left-image{display:none;width:100%;height:200px;object-fit:cover;object-position:left;max-width:unset}
.player-left-image-mob{display:block}
.player-main-btn{top:95px;left:50%;transform:translateX(-50%)}
.player .h3{margin-bottom:10px}
.player p{margin:0}
.player-volume-btn{position:absolute;top:30px;left:30px}
.player-rate{position:absolute;top:30px;right:30px}
.player-track-time{font-size:12px;position:absolute;top:170px;left:30px;width:calc(100% - 60px)}
.player-track{position:absolute;top:195px;left:30px;width:calc(100% - 60px)}
.player-bottom{margin:0}
}