*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}::-webkit-scrollbar{display:none}.App{display:flex;height:100vh;overflow:hidden;position:relative;width:100%}.background{background:url(/static/media/background.8b16878b58cd04fe945c.jpg) no-repeat 50%;background-size:cover;bottom:0;-webkit-filter:grayscale(100);filter:grayscale(100);left:0;position:absolute;right:0;top:0;z-index:-1}.leftMenu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(34,34,34,.6);height:100%;min-height:100vh;overflow:hidden;padding:20px 15px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:240px;z-index:1}.leftMenu .logoContainer{align-items:center;color:#f1f1f1;display:flex;justify-content:space-between}.leftMenu .logoContainer i{font-size:30px}.leftMenu .logoContainer i:nth-of-type(2){font-size:20px!important}.leftMenu .logoContainer h2{font-size:20px}.searchBox{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.4);color:#848484;height:45px;margin-top:20px;overflow:hidden;position:relative;width:100%}.searchBox input{background:rgba(0,0,0,.9);border:none;color:#f1f1f1;font-size:14px;font-weight:700;height:100%;outline:none;padding-left:45px;width:100%}.searchBox .searchIcon{color:#848484;font-size:20px;height:45px;left:0;line-height:45px;position:absolute;text-align:center;top:0;width:45px}.MenuContainer .title{color:#848484;font-size:12px;font-weight:700;margin-bottom:10px;text-transform:uppercase}.MenuContainer ul{padding:0;width:100%}.MenuContainer ul li{list-style:none;margin:5px 0;padding:5px 0;position:relative;width:100%}.MenuContainer ul li a{align-items:center;color:#848484;display:flex;font-size:16px;text-decoration:none}.MenuContainer ul li a i{font-size:18px;margin-right:15px}.MenuContainer ul li:before{background:#49e12e;border-radius:5px;content:"";height:100%;left:-15px;position:absolute;top:0;width:0}.MenuContainer ul li.active:before,.MenuContainer ul li:hover:before{transition:.3s;width:5px}.MenuContainer ul li.active a,.MenuContainer ul li:hover a{color:#f1f1f1;transition:.3s}.playListContainer{cursor:pointer}.playListContainer .nameContainer{align-items:center;color:#848484;display:flex;justify-content:space-between}.playListContainer .nameContainer p{font-size:12px;font-weight:700;text-transform:uppercase}.playListContainer .nameContainer i{color:#f1f1f1;cursor:pointer}.playListContainer .playListScroll{height:140px;overflow-x:hidden;overflow-y:scroll;position:relative}.playListContainer .playListScroll .playList{align-items:center;color:#848484;display:flex;margin:10px 0}.playListContainer .playListScroll .playList:hover{color:#f1f1f1;transition:.3}.playListContainer .playListScroll .playList i{font-size:18px}.playListContainer .playListScroll .playList .list{margin-right:15px}.playListContainer .playListScroll .playList .trash{margin-left:auto}.playListContainer .playListScroll .playList p{display:inline;font-size:16px;overflow:hidden;text-overflow:ellipsis}.trackList{border-top:1px solid hsla(0,0%,100%,.1)}.trackList .top{align-items:center;display:flex}.trackList .top img{width:50px!important}.trackList .top .trackName{color:#f1f1f1;font-style:14px;margin-left:10px}.trackList .top .trackName .trackSpan{color:#848484;display:block;font-size:12px}.trackList .bottom{align-items:center;color:#848484;display:flex;justify-content:space-between;margin-top:20px}.trackList .bottom i{font-size:18px}.trackList .bottom i:hover{color:#f1f1f1;cursor:pointer;transition:.3s}.trackList .bottom input{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border:none;border-radius:5px;height:5px;outline:none;position:relative}.trackList .bottom input:before{background:#49e12e;border-radius:10px;content:"";height:100%;left:0;position:absolute;top:0;transition:width .25s linear;width:50%;z-index:2}.trackList .bottom input::-webkit-slider-thumb{-webkit-appearance:none;background:#f1f1f1;border:2px solid #000;border-radius:10px;box-sizing:border-box;cursor:pointer;height:20px;margin:-2px 0 0;position:relative;-webkit-transition:all .25s linear;transition:all .25s linear;width:10px;z-index:3}.trackList .bottom input::-moz-progress-bar,.trackList .bottom input::-moz-range-thumb{background:#49e12e;border-radius:10px;height:100%;-moz-transition:width .25s linear;transition:width .25s linear;width:50%;z-index:2}@media screen and (max-width:550px){.leftMenu{min-width:64px;width:64px}.leftMenu .MenuContainer ul li a span,.leftMenu .playListContainer,.leftMenu .searchBox,.leftMenu .trackList{display:none}.leftMenu .MenuContainer ul li a i{font-size:26px}.leftMenu .MenuContainer ul li{margin:25px 0}.leftMenu .logoContainer h2{margin-left:20px}}.mainContainer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(34,34,34,.6);flex-grow:1;height:100vh;transition:all .3s cubic-bezier(.175,.885,.32,1.275);z-index:1}.banner{height:200px;position:relative}.banner .bannerImg{-webkit-filter:grayscale(100);filter:grayscale(100);height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.banner .bottomLayer{background-image:linear-gradient(transparent,rgba(0,0,0,.9));bottom:0;height:5rem;left:0;position:absolute;width:100%}.banner .content{bottom:0;display:flex;flex-direction:column;left:0;padding:20px 30px;position:absolute;right:0;top:0;z-index:3}.banner .content .breadCrump{align-items:center;display:flex;justify-content:space-between}.banner .content .breadCrump p{color:#848484;font-size:14px;font-weight:600;letter-spacing:1px}.banner .content .breadCrump p span{color:#f1f1f1}.banner .content .breadCrump i{color:#f1f1f1;cursor:pointer;font-size:18px}.banner .content .artist{color:#f1f1f1;justify-content:space-between;margin-top:auto}.banner .content .artist,.banner .content .artist .left .name{align-items:center;display:flex}.banner .content .artist .left .name h2{font-size:50px}.banner .content .artist .left .name img{margin-left:10px;width:30px}.banner .content .artist .left p{font-size:14px}.banner .content .artist .left p i{margin-right:6px}.banner .content .artist .left p span{color:#848484;margin-left:5px}.banner .content .artist .right{align-items:center;display:flex}.banner .content .artist .right a{align-items:center;border-radius:100vh;color:#f1f1f1;display:flex;font-size:16px;font-weight:700;margin:0 15px;padding:10px 30px;text-align:center;text-decoration:none}.banner .content .artist .right a i{font-size:12px;margin-right:10px}.banner .content .artist .right a:first-child{background:#39aa24;margin-left:0}.banner .content .artist .right a:nth-child(2){background:rgba(0,0,0,.3);border:1px solid hsla(0,0%,100%,.1);margin-right:0}.banner .content .artist .right a:hover{box-shadow:0 0 20px rgba(0,0,0,.4)}.menuList{background:#2c2c2c;justify-content:space-between;padding:15px 25px}.menuList,.menuList ul{align-items:center;display:flex}.menuList ul li{list-style:none;margin:0 20px;position:relative}.menuList ul li a{color:#848484;font-size:14px;font-weight:700;text-decoration:none}.menuList ul li:before{background-color:#f1f1f1;border-radius:5px;bottom:-20px;content:"";height:5px;left:10px;position:absolute;width:0}.menuList ul li.active:before,.menuList ul li:hover:before{transition:width .3s cubic-bezier(.175,.885,.32,1.275);width:20px}.menuList ul li.active a,.menuList ul li:hover a{color:#f1f1f1;transition:.3s}.menuList p{color:#f1f1f1;font-size:14px}.menuList p i{font-size:12px;margin-right:6px}.menuList p span{color:#848484;font-size:10px;margin-left:6px;text-align:center}.audioList{padding:10px 30px}.audioList .title{color:#f1f1f1;font-size:18px}.audioList .title span{color:#848484;font-size:12px}.songsContainer{height:220px;overflow-x:hidden;overflow-y:scroll}.songs{align-items:center;color:#848484;display:flex;font-size:14px;font-weight:600;margin:10px 0;padding:5px;width:100%}.songs.active,.songs:hover{color:#f1f1f1;transition:.3s}.count{margin-right:10px}.song{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.1);cursor:pointer;display:flex;padding-bottom:5px;width:100%}.song .imgBox{background:#555;border-radius:.5em;height:45px;margin-right:10px;min-width:45px;overflow-x:hidden;width:45px}.song .imgBox img{height:100%;object-fit:cover;width:100%}.song .section{width:100%}.song .section,.song .section .songName{align-items:center;display:flex;justify-content:space-between}.song .section .songName{width:50%}.song .section .hits{align-items:center;display:flex;justify-content:space-between}.song .section .hits .duration,.song .section .hits .hit{margin-right:15px}.song .section .hits .duration i,.song .section .hits .hit i{font-size:12px;margin-right:5px}.song .section .hits .favourite i{color:#49e12e;-webkit-filter:drop-shadow(0 0 4px #49e12e);filter:drop-shadow(0 0 4px #49e12e)}@media screen and (max-width:550px){.mainContainer{min-width:380px}.content{padding:10px 15px}.banner .content .artist .left .name h2{font-style:25px}.banner .content .artist .right a{font-size:12px;margin:0 10px;padding:5px 15px}.menuList{padding:5px 10px}.menuList ul li{margin:0 5px}.menuList p{font-size:12px}.menuList p i{font-size:10px}.audioList{padding:10px 5px}.audioList .songs .song .section{align-items:flex-start;flex-direction:column}.audioList .songs .song .section .songName{width:100%}.audioList .songs .song .section .hits{display:none;justify-content:space-between;margin-top:10px;width:100%}.songImage{min-width:80px;width:80px}}.musicPlayer{display:flex;padding:10px;width:100%}.songImage{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.4);height:80px;min-width:120px;overflow:hidden;width:120px}.songImage img{height:100%;object-fit:cover;width:100%}.songAttributes{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-left:20px;width:100%}.songAttributes .bottom,.songAttributes .top{align-items:center;display:flex;justify-content:space-between;width:100%}.songAttributes .top .left,.songAttributes .top .middle,.songAttributes .top .right{align-items:center;color:#595959;cursor:pointer;display:flex;font-size:16px}.songAttributes .top .left i,.songAttributes .top .middle i,.songAttributes .top .right i{font-size:18px;margin:0 15px}.songAttributes .top .left .loved i{color:#49e12e!important;-webkit-filter:drop-shadow(0 0 4px #49e12e);filter:drop-shadow(0 0 4px #49e12e)}.songAttributes .top .middle .back i:nth-child(2),.songAttributes .top .middle .forward i:first-child{color:#9a9a9a!important}.songAttributes .top .middle .playPause{align-items:center;background:#f1f1f1;border-radius:100%;color:#000;display:flex;height:30px;justify-content:center;min-width:30px;width:30px}.songAttributes .bottom{margin-top:20px;padding:0 15px}.songAttributes .bottom .progresBar{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border:none;border-radius:10px;cursor:pointer;height:5px;outline:none;overflow:hidden;position:relative;width:78%}.songAttributes .bottom .progresBar:before{background:#848484;border-radius:10px;content:"";height:100%;left:0;position:absolute;top:0;transition:all .3s ease;width:var(--player-player);z-index:2}.songAttributes .bottom .progresBar::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:50%;height:15px;outline:none;width:15px}.songAttributes .bottom .progresBar::-moz-range-track{appearance:none;background:hsla(0,0%,100%,.1);border:none;border-radius:10px;cursor:pointer;height:5px;outline:none;position:relative;width:78%}.songAttributes .bottom .progresBar::-moz-range-progress{background:#848484;border-radius:10px;height:100%;-moz-transition:all .3s ease;transition:all .3s ease;width:var(--player-player);z-index:2}.songAttributes .bottom .progresBar::-moz-range-thumb{border:none;border-radius:50%;height:15px;outline:none;width:15px}.songAttributes .bottom .currentTime,.songAttributes .bottom .duration{color:#f1f1f1;font-size:12px;font-weight:700}@media screen and (max-width:550px){.songImage{min-width:100px;width:100px}.songAttributes .top .left i,.songAttributes .top .middle i,.songAttributes .top .right i{margin:0 18px}.songAttributes .bottom{padding:initial}.songAttributes .bottom .progresBar{left:0;margin-left:0;margin-right:40px;width:55%}.songAttributes .top .left i{display:none}}.rightMenu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#639;background-color:rgba(34,34,34,.4);border-left:1px solid hsla(0,0%,100%,.1);height:100vh;justify-content:space-between;min-width:100px;padding:20px 0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:100px;z-index:1}.rightMenu,.rightMenu .goPro,.rightMenu .profile{align-items:center;display:flex;flex-direction:column}.rightMenu .goPro,.rightMenu .profile{cursor:pointer;justify-content:center}.rightMenu .goPro i,.rightMenu .profile i{color:#f1f1f1;font-size:20px;margin:20px 0;position:relative;text-align:center}.rightMenu .goPro i p{font-size:14px}.rightMenu .goPro i p span{color:#848484}.rightMenu .goPro i:nth-child(2):before{background:#45ab2e;border-radius:50%;content:"";height:8px;position:absolute;right:0;top:0;width:8px}.rightMenu .profile .profileIMage{background:#555;border-radius:100%;box-shadow:0 0 20px rgba(34,34,34,.4);height:40px;overflow:hidden;width:40px}.rightMenu .profile .profileIMage img{height:100%;object-fit:cover;width:100%}@media screen and (max-width:550px){.rightMenu{min-width:64px}}
/*# sourceMappingURL=main.7b587387.css.map*/