.rhap_container{display:flex;position:relative;padding:12px 16px}.rhap_header{width:20%}@media (max-width:768px){.rhap_header{height:56px}}.rhap_main{width:80%}.rhap_progress-section{position:absolute;top:0;left:0;width:100%;height:8px;border-top-right-radius:8px;border-top-left-radius:8px;background-color:#3B3D51}.rhap_progress-bar,.rhap_progress-container{width:inherit;height:inherit}.rhap_progress-indicator{position:absolute;margin-left:-6px;top:-4px;width:16px;height:16px;border-radius:50%;background-color:#00bbf2;box-shadow:-1px 0 5px #00bbf275;transition:opacity .2s ease;cursor:pointer}.rhap_progress-filled{position:absolute;height:8px;border-radius:4px;z-index:300;background-color:#00bbf2}.rhap_controls-section{display:grid;grid-template-columns:1fr auto 1fr auto;grid-template-rows:auto;height:72px;-moz-column-gap:4px;column-gap:4px;align-items:center}@media (max-width:768px){.rhap_controls-section{height:56px}}.rhap_main-controls{display:flex;justify-self:center;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;grid-column-start:1;grid-column-end:4}.rhap_main-controls-button{height:38px}.rhap_play-pause-button{display:flex;justify-content:center;align-items:center;width:38px;height:38px;border-radius:50%;background-color:white;transition:background-color .2s ease}.rhap_current-time,.rhap_time{width:-moz-fit-content;width:fit-content;grid-row-start:2;color:white;font-size:14px}.rhap_current-time{justify-self:end}.divider{grid-row-start:2;color:white;font-size:14px}.close-button{grid-column-start:5;grid-row-start:1;grid-row-end:3}.rhap_volume-controls{grid-column-start:4;grid-row-start:1;grid-row-end:3;align-self:center;justify-self:end;color:white}.rhap_volume-container{display:flex;justify-content:center;align-items:center;gap:10px}@media (max-width:768px){.divider,.rhap_current-time,.rhap_time,.rhap_volume-controls{display:none}}.rhap_volume-bar-area{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;display:flex;align-items:center}.rhap_volume-bar{position:relative;height:6px;width:80px;border-radius:4px;background-color:#3B3D51}.rhap_volume-indicator{height:16px;width:16px;position:absolute;top:-80%;margin-left:-6px;background-color:#00bbf2;border-radius:50%;z-index:5}.rhap_volume-filled{height:6px;position:absolute;top:0;background-color:#00bbf2;border-radius:4px;box-shadow:-1px 0 5px #00bbf275;transition:opacity .2s ease;cursor:pointer}