@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);.album__button{display:flex;align-items:center}.album__button-wrap{width:40px;height:40px;position:absolute;display:flex;place-content:center;left:5%;bottom:5%;z-index:10;border-radius:50%;background-color:hsla(0,0%,94.1%,.9);display:none}.album__button-wrap svg{width:30px;height:30px}.album__button-wrap path{fill:#106bff!important}.album__img-wrap:hover{outline:2px solid #106bff}.album__img-wrap:hover .album__button-wrap{display:flex}.search-view{position:absolute;top:50px;min-height:10vh;max-height:50vh;width:25vw;right:2vh;background:#262626;padding:10px 20px;border:1px solid hsla(0,0%,59.2%,.5);border-radius:10px;overflow-y:scroll}.search-view__inner{margin-bottom:10px}.search-view__name{border-bottom:1px solid hsla(0,0%,59.2%,.5);display:block;margin-bottom:5px}.search-view__li{display:flex;align-items:center;margin-bottom:5px}.search-view .album__img-wrap{height:50px}.search-view .album__button-wrap{width:35px;height:35px;left:15%;bottom:15%}.search-view__cover{width:50px;height:50px;margin-right:10px;border-radius:5px;background-size:cover}.search-view__track-name{margin-bottom:5px}.search-view__list .album{display:flex;flex-direction:row}#track-volume:before{width:var(--range-value-track-volume);border-radius:4px}body::-webkit-scrollbar{width:5px}body::-webkit-scrollbar-track{background-color:#262626}body::-webkit-scrollbar-thumb{background-color:#979797;border-radius:5px}.playlist{background-color:#0f0f0f;display:grid;gap:30px;grid-template-columns:.5fr 1fr;padding:40px;width:100%;border-top:1px solid #323232;border-bottom:1px solid #323232;position:relative}.playlist__cover{width:400px;height:400px;background-size:cover;border-radius:20px;display:grid}.playlist__cover-btn{display:none;width:60px;height:60px;place-self:center;border-radius:50%;background-color:hsla(0,0%,94.1%,.9)!important}.playlist__cover-btn svg{width:50px;height:50px}.playlist__cover-btn path{fill:#106bff!important}.playlist__cover:hover .playlist__cover-btn{display:block}.playlist__album-name{text-transform:uppercase;margin-bottom:5px;display:inline-block;font-weight:700;line-height:1.1}.playlist__artist-name{text-transform:uppercase;margin-bottom:15px}.playlist__item{display:flex;align-items:center;border-bottom:1px solid #5b5b5b;min-height:40px}.playlist__item-inner{margin-right:20px;width:28px;height:28px;display:flex;align-items:center}.playlist__item:first-child{border-top:1px solid #5b5b5b}.playlist__item-btn-play{display:none}.playlist__item svg{width:25px;height:25px}.playlist__item path{fill:#106bff!important}.playlist__item:hover .playlist__item-index{display:none}.playlist__item:hover .playlist__item-btn-play{display:flex}.playlist__item:hover .playlist__item-btn-volume{display:none}.playlist__arrow{position:absolute;width:20px;height:20px;background-color:red;top:-20px}.btn-hide{display:none!important}.play-list-enter-active[data-v-36c9acff],.play-list-leave-active[data-v-36c9acff]{transition:all .5s ease;max-height:100vh;border-top:1px solid #323232;border-bottom:1px solid #323232}.play-list-enter-from[data-v-36c9acff],.play-list-leave-to[data-v-36c9acff]{max-height:0;padding:0 40px;border-top:1px solid #969696;border-bottom:1px solid #323232}.play-list-move[data-v-36c9acff]{transition:transform .5s ease}.artist-page{display:grid;grid-template-columns:300px 1fr;position:absolute;height:100%;width:100%}.artist-page__main{padding:10px 40px}.artist-page__main,.artist-page__sidebar{overflow-y:scroll;height:100%}.artist-page__main::-webkit-scrollbar,.artist-page__sidebar::-webkit-scrollbar{width:5px}.artist-page__main::-webkit-scrollbar-track,.artist-page__sidebar::-webkit-scrollbar-track{background-color:#262626}.artist-page__main::-webkit-scrollbar-thumb,.artist-page__sidebar::-webkit-scrollbar-thumb{background-color:#979797;border-radius:5px}.artist-page__item{display:flex;align-items:center;gap:15px;padding:0 10px}.artist-page__item-icon{width:40px;height:40px;border-radius:50%}.artist-page__item-name{border-bottom:1px solid #323232;padding:15px 10px;width:100%}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.h1{letter-spacing:.5px}@media(max-width:767px){.h1{font-size:calc(22.50505px + 1.71717vw)}}@media(min-width:767px){.h1{font-size:calc(28px + 1.0101vw)}}.h2{letter-spacing:.5px}@media(max-width:767px){.h2{font-size:34px}}@media(min-width:767px){.h2{font-size:34px}}.h3{letter-spacing:.5px}@media(max-width:767px){.h3{font-size:calc(16.90101px + .34343vw)}}@media(min-width:767px){.h3{font-size:calc(18px + .20202vw)}}.h4{letter-spacing:.5px}@media(max-width:767px){.h4{font-size:calc(15.45051px + .17172vw)}}@media(min-width:767px){.h4{font-size:calc(16px + .10101vw)}}.h5{letter-spacing:.5px}@media(max-width:767px){.h5{font-size:calc(13.45051px + .17172vw)}}@media(min-width:767px){.h5{font-size:calc(14px + .10101vw)}}.h6{letter-spacing:.5px}@media(max-width:767px){.h6{font-size:calc(11.45051px + .17172vw)}}@media(min-width:767px){.h6{font-size:calc(12px + .10101vw)}}.display-1{line-height:1.5}@media(max-width:767px){.display-1{font-size:18px}}@media(min-width:767px){.display-1{font-size:18px}}.display-2{line-height:1.5}@media(max-width:767px){.display-2{font-size:calc(13.45051px + .17172vw)}}@media(min-width:767px){.display-2{font-size:calc(14px + .10101vw)}}@media(max-width:767px){.display-3{font-size:calc(11.45051px + .17172vw)}}@media(min-width:767px){.display-3{font-size:calc(12px + .10101vw)}}@media(max-width:767px){.display-4{font-size:calc(9.45051px + .17172vw)}}@media(min-width:767px){.display-4{font-size:calc(10px + .10101vw)}}@media(max-width:767px){.display-5{font-size:calc(9.45051px + .17172vw)}}@media(min-width:767px){.display-5{font-size:calc(10px + .10101vw)}}.subtitle,.title{letter-spacing:.5px}.title{line-height:1.5}@media(max-width:767px){.title{font-size:calc(9.75758px + 2.57576vw)}}@media(min-width:767px){.title{font-size:calc(18px + 1.51515vw)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}:root{--range-value-track-volume:0%;--range-value-track-progress:0%}.color-background{color:#171717}.color-text{color:#dfdfdf}.color-primary{color:#106bff}.color-secondary{color:#262626}.color-alternate{color:#979797}.bg-background{background-color:#171717}.bg-text{background-color:#dfdfdf}.bg-primary{background-color:#106bff}.bg-secondary{background-color:#262626}.bg-alternate{background-color:#979797}a{text-decoration:none;color:#dfdfdf}.btn,button,input{outline:0;border:none;box-sizing:border-box;background:none;padding:0;cursor:pointer;border-radius:4px}.d-none{display:none}.search{cursor:auto;color:#dfdfdf;background-color:#5b5b5b}.search::-moz-placeholder{color:#979797}.search:-ms-input-placeholder{color:#979797}.search::placeholder{color:#979797}.visuallyHidden{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}.clip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input[type=range]{-webkit-appearance:none;background:none;margin:0!important;position:relative}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{position:relative;z-index:1}input[type=range]::-webkit-slider-runnable-track{height:5px;position:relative}input[type=range]:before{content:" ";position:absolute;left:0;top:0;height:100%;box-shadow:inset 0 1px 2px 0 rgba(34,60,80,.46);background-color:#bebebe;cursor:pointer;z-index:1}.input-volumes{align-self:center}.input-volumes::-moz-range-track{background:#000;height:3px}.input-volumes::-webkit-slider-runnable-track{border-radius:4px;background-color:#171717!important}.input-volumes::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;background-color:#dfdfdf;margin-top:-6px;border-radius:50%;cursor:pointer}.input-volumes::-moz-range-thumb{height:15px;width:15px;background-color:#dfdfdf;margin-top:-6px;border-radius:50%;cursor:pointer}.img-cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}*{box-sizing:border-box}body{height:100%;font-family:Source Sans Pro,sans-serif}#app{color:#dfdfdf;min-height:100vh;display:grid;grid-template-rows:auto 1fr;background-color:var(--data-color-primary)}.header{position:sticky;top:0;z-index:99;background-color:#414141;display:grid;grid-template-columns:1fr 1.3fr 1fr;padding:0 10px;grid-gap:10px;box-shadow:0 -65px 100px 55px rgba(34,60,80,.28)}.header__settings{display:flex;justify-content:space-around}.header__player{display:flex;justify-content:space-between;gap:10px}.header__track-slot{display:flex;place-content:center;height:100%;border-bottom:1px solid #414141}.header__track-track{display:flex;background-color:#252525;overflow:hidden;height:100%}.header__track-img{-o-object-fit:cover;object-fit:cover;width:50px;height:100%;background-position:50%;background-size:cover}.header__track-wrap{flex-grow:1}.header__track-container,.header__track-wrap{display:flex;flex-direction:column;justify-content:space-between}.header__track-container{padding:5px 10px 0;gap:2px}.header__track-time{color:#979797;font-size:12px}.header__track-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;justify-items:center}.header__track-inner path{fill:#979797}.header__track-btn{height:20px;width:26px;vertical-align:middle}.header__track-btn-active{background-color:#9d9d9d!important}.header__track-btn-active svg{border-radius:5px}.header__track-btn-active path{fill:#262626!important}.header__progress{height:5px;width:100%;background-color:#414141;cursor:pointer}.header__progress-bar{height:inherit;width:100%;top:-8px;position:relative;background-color:#bebebe}.header__progress-bar:before{content:"";position:absolute;width:var(--range-value-track-progress);background-color:#bebebe}.header__progress-bar::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:8px;border-radius:5px;border:1px solid #414141;background-color:#dfdfdf;cursor:pointer;transform:translateY(-5px);z-index:1}.header__helper{display:flex;justify-content:space-between;align-items:center;position:relative}.header__helper-list{width:40px;height:30px;background-color:#5b5b5b;border-radius:5px}.header__helper-list svg{display:block;margin:0 auto}.header__helper-list path{fill:#dfdfdf}.header__helper-search{background-color:#6c6c6c;width:200px;padding:4px}.main{display:grid;grid-template-columns:180px 7fr}.main,.main-view{position:relative;z-index:10}.main-view{gap:25px 10px}.main-view,.main-view__row{overflow:hidden}.main-view__album{height:100px;border-radius:5px;background-color:#414141}.main-view__album-wrapper{grid-template-columns:repeat(auto-fill,minmax(12vw,1fr));grid-template-rows:repeat(auto-fit,16vw);display:grid;gap:20px;padding:10px 40px}.album{display:flex;flex-direction:column;gap:8px}.album__wrapper-active{grid-column:1/-1;grid-row:1/3;display:grid;grid-template-columns:1fr 2fr;height:100%;position:relative;background-color:#171717}.album__wrapper-active .album{padding:20px}.album__info{display:flex;gap:8px;flex-direction:column}.album__img-wrap{border-radius:5px;overflow:hidden;position:relative}.sidebar{padding:1em 0 0 0;flex-grow:2;background-color:#262626}.sidebar__media-list{margin-bottom:20px}.sidebar__media-library{position:sticky;top:65px}.list-name{padding:5px 10px;display:inline-block;margin-bottom:5px}.list__item{gap:7px}.list__item:hover{background-color:#106bff}.list__link{display:flex;align-items:center;gap:5px;width:100%;padding:5px 10px 5px 20px}.player__btn{background:none;color:inherit}.player__btn path{fill:#979797}.player__btn svg{vertical-align:middle}