body,html{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}a{color:inherit;text-decoration:none}.progress-bar{background-color:#ddd;height:100%;width:100%;cursor:pointer}.progress-bar div{background-color:silver;height:100%}.progress-bar label{position:absolute;font-family:Arial,Helvetica,sans-serif;font-size:10px;padding:2px 4px;cursor:pointer;color:#333}#controls{position:absolute;z-index:2;left:0;top:0;width:450px;height:150px;transition:width .3s ease-in,left .3s ease-in}#controls.isCollapsed{left:153px;width:158px}.controls-container-panel-center-outer{position:absolute;background:linear-gradient(#ff0,#bb0);left:0;right:0;top:0;bottom:0;border-radius:75px;box-shadow:inset 0 0 10px 1px #aaa}.controls-container-panel-center-inner{z-index:4;position:absolute;background-color:#eee;left:78px;right:78px;top:30px;bottom:14px;box-shadow:inset 0 0 10px 1px #ccc;border:1px solid #999;border-radius:2px;transition:left .3s ease-in,right .3s ease-in,top .3s ease-in,bottom .3s ease-in,border-radius .3s ease-in}.isCollapsed .controls-container-panel-center-inner{z-index:5;left:55px;right:55px;top:51px;bottom:51px;border-radius:50%}.controls-container-panel-left-inner{z-index:4;position:absolute;left:15px;top:15px;background:linear-gradient(#444,#000);width:50px;bottom:15px;border-top-left-radius:55px 65px;border-bottom-left-radius:55px 65px;transition:width .3s ease-in}.isCollapsed .controls-container-panel-left-inner{width:65px}.controls-container-panel-right-inner{z-index:4;position:absolute;right:15px;top:15px;background:linear-gradient(#444,#000);width:50px;bottom:15px;border-top-right-radius:55px 65px;border-bottom-right-radius:55px 65px;transition:width .3s ease-in}.isCollapsed .controls-container-panel-right-inner{width:65px}.controls-button{position:absolute;z-index:5;color:#eee;font-size:16px;border:0;background-color:transparent;outline:none;cursor:pointer}.controls-button:hover{opacity:.75}.controls-button:active{opacity:.5}.controls-button-prevous{top:30px;left:33px;transition:left .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-prevous{top:25px;left:43px}.controls-button-play{top:51px;left:25px;transition:left .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-play{top:48px;left:25px}.controls-button-stop{top:77px;left:25px;transition:left .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-stop{top:80px;left:25px}.controls-button-next{top:100px;left:33px;transition:left .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-next{top:104px;left:43px}.controls-button-collapse{top:30px;right:33px;transition:right .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-collapse{top:25px;right:42px}.controls-button-repeat{top:54px;right:25px;font-size:14px;transition:right .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-repeat{top:50px;right:25px}.controls-button-shuffle{top:77px;right:25px;font-size:14px;transition:right .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-shuffle{top:80px;right:25px}.controls-button-install{top:100px;right:35px;font-size:14px;transition:right .3s ease-in,top .3s ease-in}.isCollapsed .controls-button-install{top:104px;right:45px}.controls-title-background{z-index:3;position:absolute;top:0;left:78px;width:294px;height:20px;background-color:#333;border-bottom-left-radius:2px;border-bottom-right-radius:2px;opacity:.5;transition:left .3s ease-in,width .3s ease-in,height .3s ease-in}.isCollapsed .controls-title-background{left:67px;width:26px;height:150px;border-radius:0}.controls-title{z-index:4;position:absolute;top:4px;left:78px;white-space:nowrap;overflow:hidden;width:294px;color:#eee;font-size:8pt;font-family:arial;text-align:center;transition:width .3s ease-in,top .3s ease-in,color .3s ease-in,top .3s ease-in,font-size .3s ease-in}.isCollapsed .controls-title{top:3px;left:73px;width:18px;color:#ddd;font-size:7pt}.controls-songtitle{white-space:nowrap;top:40px;width:278px;font-size:10pt;transition:width .3s ease-in,top .3s ease-in,opacity .3s ease-in}.controls-songtitle,.controls-time{z-index:5;position:absolute;left:88px;overflow:hidden;color:#777;font-family:arial}.controls-time{top:62px;width:200px;font-size:16pt;transition:width .3s ease-in,font-size .3s ease-in,left .3s ease-in,top .3s ease-in}.isCollapsed .controls-time{z-index:6;font-size:10pt;left:62px;width:95px;top:68px}.controls-volume{right:88px;width:100px}.controls-progress,.controls-volume{z-index:5;position:absolute;top:110px;background-color:#ddd;height:15px;transition:width .3s ease-in,top .3s ease-in,opacity .3s ease-in}.controls-progress{left:88px;width:150px}.isCollapsed .controls-progress,.isCollapsed .controls-songtitle,.isCollapsed .controls-volume{width:0;top:75px;opacity:0}body,html{height:100%}body{background:linear-gradient(#555,#444,#444,#555);padding:15px;overflow:hidden;display:flex;justify-content:center}#player{position:relative;width:450px;transition:width .3s ease-in,left .3s ease-in}#player.collapsed{left:153px;width:158px!important}*{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.playlist-container{z-index:0;position:absolute;top:166px;left:65px;background:linear-gradient(#ff0,#bb0);border-radius:6px;border-top:0;padding:8px;width:320px;height:300px;box-shadow:inset 0 0 10px 1px #aaa;overflow:hidden;transition:height .3s ease-in,left .3s ease-in,width .3s ease-in,top .3s ease-in;transition-delay:.35s}.isCollapsed .playlist-container{top:50px;height:25px;width:0;left:220px}.playlist-title{z-index:4;position:absolute;top:0;left:13px;right:13px;color:#eee;font-size:8pt;font-family:arial;background-color:#333;border-bottom-left-radius:2px;border-bottom-right-radius:2px;padding:4px;text-align:center;opacity:.5}.playlist-songs-container-outer{box-shadow:0 0 10px 1px #ccc}.playlist-songs-container-inner,.playlist-songs-container-outer{background-color:#eee;position:absolute;top:30px;left:13px;right:13px;bottom:13px;border:1px solid #999;border-radius:2px}.playlist-songs-container-inner{overflow-y:auto;overflow-x:hidden}.playlistitem{font-family:arial;font-size:10pt;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:2px 6px;color:#777;cursor:pointer}.playlistitem:hover{background-color:#ddd}.playlistitem.active{background-color:#ddd}.playlistitem:focus{background-color:green}