*{margin:0;padding:0;box-sizing:border-box}body,html,input{font-family:circular-spotify-ui,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;height:100%}a{text-decoration:none;color:inherit}button{border:0;font-weight:700;padding:20px;border-radius:500px;text-transform:uppercase;letter-spacing:1px;line-height:1;cursor:pointer}button,input{font-size:14px}input{border:0;padding:10px}#root{height:100%}.container{padding:30px}.tracks{width:100%}.tracks .track{flex-direction:row;align-items:center}.tracks .track-image{height:3rem;width:3rem;background-position:50%;background-size:cover;margin-right:15px}.tracks .track{width:100%;display:flex;padding:15px;transition:.2s}.track-active,.track-active:hover{color:#1ed760}.play-icon,.tracks .track .note-icon{margin-right:15px}.tracks .track .play-icon{display:none}.tracks .track .track-info{flex:1 1}.tracks .track:hover{background-color:#282828}.tracks .track:hover .note-icon{display:none}.tracks .track:hover .play-icon{display:block}.tracks .track .track-info .track-artists{color:#888;font-size:13px;margin-top:5px}.tracks .track .track-info .track-artists span:hover{color:#fff;text-decoration:underline;text-underline-offset:5px;cursor:pointer}.tracks .track .track-info .track-artists a+a:before{content:", "}.tracks .track .track-duration{font-weight:700;font-size:15px;display:flex;align-items:center}.copyright{display:flex;flex-direction:column;margin-left:47px;margin-top:20px;font-size:12px;color:#c4c4c4}.cover{width:12rem;height:12rem;background-position:50%;background-repeat:no-repeat;background-size:cover}.grid-template{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:20px;gap:20px}.tracks-table{width:100%;margin-top:20px;border-collapse:collapse;color:#ccc}.tracks-table thead tr th{padding:15px 0;color:#fff}.tracks-table tbody tr td{padding:20px 0}.tracks-table tbody tr td:hover{color:#fff}.tracks-table tbody .track-active td:hover{color:inherit}.tracks-table .track-info{border-bottom:1px solid #282828}.tracks-table .track-info:last-child{border:0}.load-more button{background-color:transparent;border:3px solid #fff;color:#fff;text-transform:capitalize}table tbody tr td{padding:10px 30px 10px 0!important;white-space:nowrap}@media (max-width:490px){.cover{height:9rem!important;width:9rem!important}}@media (max-width:550px){.grid-template{display:grid;grid-template-columns:repeat(2,1fr)!important;grid-gap:20px;gap:20px}.cover{height:13rem;width:13rem}}@media (max-width:810px){.cover{height:10rem;width:10rem}}@media (max-width:900px){.grid-template{grid-template-columns:repeat(3,1fr)}.tracks .track-image{height:3rem!important;width:3rem!important}}#app{display:flex;flex-direction:row;align-items:flex-start;height:100%}#app main{margin-left:230px;width:100%;background-color:#121212;color:#fff;min-height:100%}#app main #header{padding:20px;margin-top:0}#app main>div{margin-top:55px;margin-bottom:50px}#app footer{position:fixed;bottom:0;width:100%}.loading{display:flex;align-items:center;justify-content:center;height:100vh}@media (max-width:810px){#app aside{position:absolute;transition:.2s;margin-top:54px}#app main{margin:0;transition:.2s}}@media (max-width:800px) and (max-height:450px){#app main{width:100%;position:absolute!important}}#sidebar{background-color:#040404;width:230px;color:#b3b3b3;font-size:14px;padding:0 12px;position:fixed;height:100%}#sidebar img{padding:22px 25px 15px;width:180px}#sidebar ul{list-style:none;margin-bottom:15px}#sidebar .menu-item{color:#b3b3b3;font-weight:700;font-size:13px;transition:.2s}#sidebar .menu-item .item-link{display:flex;flex-direction:row;align-items:center;padding:5px 12px}#sidebar .menu-item .active{color:#fff;background-color:#282828;padding:5px 12px;border-radius:3px}#sidebar .menu-item:hover{color:#fff}#sidebar .menu-item .item-text{margin-left:15px}#sidebar .user-playlists span{letter-spacing:.1em;font-weight:700;text-transform:uppercase;font-size:12px}#sidebar .user-playlists ul{list-style:none;font-weight:700;font-size:14px;margin:15px 0}#sidebar .user-playlists li:hover{color:#fff}@media (max-width:800px){#sidebar{overflow-x:auto}}#header{background-color:rgba(0,0,0,.9);color:#fff;display:flex;justify-content:flex-end;padding:20px;position:fixed;top:0;left:230px;right:0;height:54px;z-index:1000}#header .sidebar-toggle{display:none}#header .user-menu .user{text-align:right}#header .user-menu .user-content{display:none;background-color:#282828;color:#b3b3b3;font-size:14px;min-width:160px;text-align:left}#header .user-menu:hover .user-content{display:block}#header .user-menu .user-content ul{list-style:none}#header .user-menu .user-content ul li{padding:10px 20px}#header .user-menu .user-content ul li:hover{color:#fff;background-color:#333;cursor:pointer}#header .user-menu .user-content ul li+li{border-top:1px solid #ccc}#header .user{font-weight:700;font-size:14px}#header .user:hover{cursor:pointer}#header .logout{background:transparent;color:#fff;border:4px solid #fff;padding:10px 20px}@media (max-width:810px){#header{left:0;justify-content:space-between;background-color:#000}#header .sidebar-toggle{display:block}}#player{background-color:#282828;border-top:1px solid #000;flex-direction:row;color:#b3b3b3;justify-content:space-between}#player,#player .track-data{display:flex;align-items:center}#player .track-data .track-cover{width:3.5rem;height:3.5rem;margin:15px}#player .track-data .track-info{display:flex;flex-direction:column}#player .track-data .track-info .track-name{color:#fff;font-size:14px;margin-bottom:5px}#player .track-data .track-info .track-name:hover{text-decoration:underline;text-underline-offset:4px}#player .track-data .track-info .track-artist{color:#c3c3c3;font-size:13px}#player .track-data .track-info .track-artist+.track-artist{content:", "}#player .track-data .track-info .track-artist:hover{color:#fff}#player .player-control{display:flex;flex-direction:column;justify-items:center;width:30%}#player .player-control .player-controls{display:flex;justify-content:center;align-items:center;margin-bottom:20px}#player .player-control .progress-bar{background-color:#404040;border-radius:2px;display:flex;height:4px;width:100%}#player .player-control .player-controls .play-pause{margin:0 15px;transition:transform .1s}#player .player-control .player-controls .play-pause:hover{color:#fff;transform:scale(1.1)}#player .options{margin:15px;display:flex;align-items:center}#player .options .spotify{display:flex;align-items:center;background:transparent;color:#fff;border:2px solid #fff;transition:.2s;font-weight:700;padding:20px;border-radius:500px;text-transform:uppercase;letter-spacing:1px;font-size:14px;line-height:1;cursor:pointer}#player .options .spotify:hover{transform:scale(1.06);background-color:#1db954;border-color:#1db954;color:#000}#player .options .spotify svg{margin-right:5px}#player .track-slider{width:50%}#player .track-slider .rhap_container{background-color:transparent;box-shadow:none}#player .track-slider .rhap_time{color:inherit;font-size:14px}#player .track-slider .rhap_progress-indicator{background:#fff;display:none}#player .track-slider .rhap_progress-container:hover .rhap_progress-indicator{display:block}#player .track-slider .rhap_progress-container:hover .rhap_progress-filled{background-color:#1db954}#player .options .spotify-icon{color:#fff;display:none}#player .options .spotify-icon:hover{color:#1db954}#player .track-data .close-player{margin-left:15px}#player .track-data .close-player:hover{cursor:pointer}@media (max-width:810px){#player{flex-direction:column}#player .track-data .track-info .track-artist{display:none}#player .track-slider{width:100%!important;margin-bottom:0!important}#player .options,#player .track-data .track-cover{display:none}#player .track-data .track-info{margin:15px 45px;width:85%}#player .options .spotify{display:none}#player .track-data .close-player{position:absolute;left:0;margin-left:10px}#player .track-data .track-info .track-name{font-weight:700}.rhap_stacked-reverse{flex-direction:row!important}.rhap_additional-controls,.rhap_forward-button,.rhap_rewind-button,.rhap_volume-controls{display:none!important}.rhap_stacked-reverse .rhap_controls-section{margin-bottom:0!important;position:absolute!important;top:5px!important;right:0!important}.rhap_container{padding:0!important}.rhap_controls-section{flex:0 1!important}.rhap_progress-container{height:0!important;margin:0!important;width:100%!important;top:0!important;position:absolute!important}.rhap_progress-bar{border-radius:0!important}.rhap_time{display:none!important}}#login{height:100vh;display:flex;flex-direction:column;align-content:center;justify-content:center;background-color:#121212}#login .header{padding:25px 0 10px;margin-bottom:30px;text-align:center}#login .header .spotify-logo img{width:200px}#login .content{text-align:center}#login .content button{background-color:transparent;color:#fff;transition:.1s;border:4px solid #fff}#login .content button:hover{background-color:#1ed760;color:#000;border-color:#1ed760;transform:scale(1.06)}#login .content .login-info{margin:40px;font-size:14px;color:#c3c3c3}#home .user-top-lists{display:flex}@media (max-width:1000px){#home .user-top-lists{flex-direction:column}}.items{margin:15px 0 30px}.items .item-info{display:flex;flex-direction:column}.items .item-info .item-cover{width:100%;background-position:50%;margin-bottom:10px}.items .item-info .item-name{font-weight:700;font-size:14px;margin:8px 0}.items .item-info .artists-name{font-size:13px;margin-bottom:20px;color:#ccc}.items .item-info .artists-name a+a:before{content:", "}.items .item-info .artists-name a span:hover{color:#fff;text-decoration:underline}@media (max-width:810px){.items .item-info .item-cover{height:9rem!important;width:9rem!important}}#recently-played h2{margin-bottom:20px}#recently-played table{border-collapse:collapse;width:100%}#recently-played table tr td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 30px 10px 0;color:#ccc}#recently-played table tr td a:hover{color:#fff}#recently-played table tr td span:hover{color:#fff;cursor:pointer}#recently-played table tr td a+a:before{content:", "}#recently-played table tr{border-bottom:1px solid #282828}#recently-played table tr:last-child{border:none}#recently-played table .track-active td span:hover,.track-active span{color:#1ed760}@media (max-width:810px){#recently-played{width:100%;overflow-x:auto}}@media (max-width:1280px){#recently-played{width:100%;overflow-x:auto}}#top-artists{margin-left:30px;width:50%}#top-artists h2{margin-bottom:20px}#top-artists ul{list-style:none}#top-artists ul li{display:flex;align-items:center;margin-bottom:15px;border-bottom:1px solid #282828;padding-bottom:10px}#top-artists ul li:last-child{margin-bottom:none;border:none;padding:none}#top-artists ul li .artist-image{height:50px;width:50px;background-size:cover;border-radius:50px;margin-right:20px}#top-artists ul li span{font-weight:700;font-size:14px;color:#ccc}#top-artists ul li span:hover{font-weight:700;font-size:14px;color:#fff}@media (max-width:1000px){#top-artists{margin:20px 0;width:100%}}@media (max-width:1280px){#top-artists{width:auto}}@media (max-width:810px){#top-artists ul li .artist-image{height:60px;width:60px}}#search .icon{position:absolute;min-width:50px;margin-top:6px;color:#000}#search .search-input{text-overflow:ellipsis;border-radius:500px;width:32%;padding:10px 50px}#search .album-info,.artist-info{display:flex;flex-direction:column;align-items:center}#search .album-info a,.artist-info a{text-align:center}#search .album-info .album-name,.artist-info .artist-name{font-weight:700;margin-top:10px;margin-bottom:5px;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}#search .album-info .album-artist{color:#ccc;font-size:14px}#search .album-info .album-artist:hover{color:#fff;text-decoration:underline}#search .search-results h2{margin:15px 0}#search .search-results .artists .artist-info .artist-cover{border-radius:50%}#search .search-results .artists .artist-info .artist-cover,.album-info .album-cover{margin-bottom:10px}#search .search-results>div{margin-bottom:50px}@media (max-width:810px){#search .search-input{width:100%}#search .search-results .artists .artist-info .artist-cover,.album-info .album-cover{width:9rem;height:9rem}}#album .album-info .album-image{height:15rem;width:15rem}#album .album-info .album-year span+span:before{content:"-";margin:0 5px}#album .album-info .album-options svg{cursor:pointer}@media (max-width:810px){#album{display:flex;flex-direction:column;align-items:center}#album .album-info{width:100%!important}#album .album-tracks{margin-top:20px;margin-left:0!important}.copyright{margin-left:0;margin-top:10px}.copyright span+span{margin-top:5px}}.spotify-link{margin:15px 0}.spotify-link a{display:inline-flex;align-items:center;border:3px solid #fff;padding:15px;border-radius:50px;transition:.2s;font-weight:700;font-size:16px;color:#fff}.spotify-link a svg{margin-right:5px}.spotify-link a:hover{background-color:#1db954;border-color:#1db954;color:#000;transform:scale(1.06)}#album{display:flex;background-repeat:no-repeat;background-size:cover;background-position:50%}#album .album-info{display:flex;flex-direction:column;align-items:center;width:23%}#album .album-info .album-title{text-align:center}#album .album-info .album-image{background-position:50%;margin-bottom:10px}#album .album-info span{color:#c4c4c4;font-size:12px}#album .album-info .album-artists{margin-top:5px;text-align:center}#album .album-info .album-artists span:hover{color:#fff;text-decoration:underline;text-underline-offset:5px;cursor:pointer}#album .album-info .album-artists a+a:before{content:", "}#album .album-info .album-year{display:flex;justify-content:center}#album .album-info .album-year a+a:before{content:"-";margin:0 5px}#album .album-info .album-options{margin-bottom:15px}#album .album-info .album-options svg{margin:0 5px}#album .album-tracks{margin-left:30px;width:100%}#categories h1{margin-bottom:30px}#categories .page-header{display:flex;justify-content:space-between}#categories h1,.page-header h2{text-transform:capitalize}#categories .page-header .pagination button{background-color:rgba(0,0,0,.5);color:#fff;text-transform:capitalize;padding:12px;margin:0 2px}#categories .category{display:grid;grid-template-columns:repeat(5,195px);grid-gap:20px;gap:20px;margin:15px 0 30px}#categories .category-item{display:flex;flex-direction:column}#categories .category-item .category-image{background-position:50%;margin-bottom:10px}#categories .category-item .category-info{display:flex;flex-direction:column}#categories .category-item .category-info .category-name{font-weight:700;font-size:14px;margin:8px 0}#categories .category-item .category-info .category-description{font-size:13px;text-overflow:ellipsis;white-space:nowrap;color:#ccc;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width:810px){#categories .category{grid-template-columns:repeat(2,1fr)}#categories .category-item .category-image{width:9rem;height:9rem}}#artist header{padding:0;background-repeat:no-repeat;background-size:cover;background-position:0 20%}#artist .artist-info{padding:40px 0 0 30px;display:flex;flex-direction:row}#artist .artist-info .artist-bio{display:flex;flex-direction:column;justify-content:center;font-size:14px}#artist .artist-info .artist-bio .type{text-transform:capitalize}#artist .artist-info .artist-image{margin-right:10px}#artist .artist-info .artist-bio .artist-name{font-size:20px;font-weight:700;margin:8px 0}#artist .options{display:flex;align-items:center;margin-left:30px}#artist .options button{margin-left:10px;color:#fff;background-color:transparent;border:3px solid #fff;letter-spacing:1px;padding-top:10px;padding-bottom:10px;transition:.1s}#artist .options button:hover{transform:scale(1.06)}#artist .options .share{margin-left:10px}#artist .tracks-artists .top-tracks h2{margin-bottom:20px}#artist .tracks-artists .top-tracks .top-tracks-item{padding:5px 15px}#artist .tracks-artists{display:flex}#artist .albums{margin-top:40px}#artist .albums h2{margin-bottom:20px}#artist .albums .album-info{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:20px;gap:20px}#artist .albums .album-info a{text-align:center}#artist .albums .album-info .album-cover{transition:.2s;margin-bottom:10px}#artist .albums .album-info .album-cover:hover{-webkit-filter:brightness(.3);filter:brightness(.3)}#artist .albums .album-info span{font-size:14px;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}#artist .related-artists{width:40%;margin-left:50px}#artist .related-artists h2{margin-bottom:30px}#artist .related-artists .related-artist a{display:flex;align-items:center;font-size:14px;font-weight:700;color:#ccc;margin-bottom:25px}#artist .related-artists .related-artist a:hover{color:#fff}#artist .related-artists .related-artist .related-artist-cover{height:2rem;width:2rem;background-size:cover;border-radius:50%;margin-right:10px}@media (max-width:810px){#artist .tracks-artists{flex-direction:column}#artist .related-artists{width:100%;margin-left:0}#artist .tracks-artists .top-tracks{margin-bottom:30px}#artist .albums .album-info{grid-template-columns:repeat(2,1fr)}#artist .albums .album-info .album-cover{width:9rem!important;height:9rem!important}#artist .artist-info .artist-image{margin-right:0}#artist .artist-info{padding:15px 0 0;flex-direction:column}#artist .artist-info .artist-bio{align-items:center}#artist .options{flex-direction:column;margin-left:0}#artist .options button{margin-left:0}#artist .related-artists .related-artist .related-artist-cover{height:4rem;width:4rem}}#profile h2{margin-bottom:0!important}#profile .tracks .tracks-list .tracks-table span{cursor:pointer}#profile .tracks{margin-bottom:30px}#profile .artists-and-recently{display:flex}#profile .artists-and-recently .artists{display:flex;flex-direction:column}#profile .artists-and-recently .artists .artists-list .artist{display:flex;align-items:center;padding:15px 0;border-bottom:1px solid #282828}#profile .artists-and-recently .artists .artists-list .artist:last-child{border:0}#profile .artists-and-recently .artists .artists-list .artist .artist-cover{height:3rem;width:3em;border-radius:50%;margin-right:10px}#profile .artists-and-recently .artists .artists-list .artist span{font-weight:700;color:#ccc}#profile .artists-and-recently .artists .artists-list .artist span:hover{color:#fff}#profile .artists-and-recently .recently-played{margin-left:30px;width:30%}#profile .artists-and-recently .recently-played .recently-list .track{display:flex;align-items:center;margin-bottom:15px}#profile .artists-and-recently .recently-played .recently-list .track span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:50%}#profile .artists-and-recently .recently-played .recently-list .track .track-cover{width:4rem;height:4rem;margin-right:10px}@media (max-width:810px){#profile .tracks .tracks-list{overflow-x:auto}#profile .options-header{flex-direction:column!important;align-items:flex-start!important}#profile .options-header .options{margin-top:20px}#profile .options-header .options span{margin-left:0!important}#profile .options-header .options span+span{margin-left:10px!important}#profile .artists-and-recently{flex-direction:column}#profile .artists-and-recently .artists{margin-bottom:30px}#profile .artists-and-recently .recently-played{margin-left:0;width:100%}#profile .artists-and-recently .artists .artists-list .artist .artist-cover,#profile .artists-and-recently .recently-played .recently-list .track .track-cover{height:4rem!important;width:4rem!important}}#recently{display:flex;flex-direction:column}#recently h2{margin-bottom:20px}#recently .track{text-align:center}#recently .track .cover{margin-bottom:10px;transition:.2s;cursor:pointer}#recently .track .cover:hover{-webkit-filter:brightness(.3);filter:brightness(.3)}#recently .track .track-name{font-weight:700;font-size:14px;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}#recently .track .artist-and-album{margin-top:5px;display:flex;flex-direction:column}#recently .track .artist-and-album span{font-size:13px;margin-bottom:5px;color:#ccc;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}#recently .track .artist-and-album span:hover{text-decoration:underline;text-underline-offset:2px}@media (max-width:810px){#recently .track .cover{width:9rem;height:9rem}}@media (max-height:450px){#recently .track .cover{width:100%;height:13rem}}#liked-tracks .load-more{margin-top:50px;text-align:center}#liked-tracks .tracks-list .tracks-table .track-info{cursor:pointer}@media (max-width:810px){#liked-tracks .tracks-list{overflow-x:auto}}#playlists h2{margin-bottom:20px}#playlists .item{text-align:center}#playlists .item .name-and-description{display:flex;flex-direction:column;margin-top:10px}#playlists .item .name-and-description .name{font-weight:700;margin-bottom:10px}#playlists .item .name-and-description .description{color:#ccc}#artists .item .artist-cover{border-radius:50%}#artists h2{margin-bottom:20px}#artists .item{text-align:center}#artists .item .name-and-description{display:flex;flex-direction:column;margin-top:10px}#artists .item .name-and-description .name{font-weight:700;margin-bottom:10px}#artists .item .name-and-description .description{color:#ccc}#albums h2{margin-bottom:20px}#albums .item{text-align:center;display:flex;flex-direction:column;margin-top:10px}#albums .item .cover{margin-bottom:8px}#albums .item .name{font-weight:700}#albums .item .artist{color:#ccc;font-size:14px;margin-top:8px}#albums .item .artist:hover{text-decoration:underline}#profile .header{display:flex;align-items:center;flex-direction:column;margin-bottom:50px}#profile .header .user-picture{border-radius:50%;margin-bottom:10px}#profile .header .username{font-weight:700;text-transform:capitalize;font-size:30px;text-align:center}#profile .options-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:20px}#profile .options-header .options span{margin-left:10px;color:#ccc;font-weight:700}#profile .options-header .options span:hover{color:#fff;cursor:pointer}#profile h2{margin-bottom:20px}#profile .item{text-align:center}#profile .item .name-and-description{display:flex;flex-direction:column;margin-top:10px}#profile .item .name-and-description .name{font-weight:700;margin-bottom:10px}#profile .item .name-and-description .description{color:#ccc}.load-more{text-align:center;margin-top:50px}
/*# sourceMappingURL=main.2b67179f.chunk.css.map */