.App{text-align:center;padding:50px;background-color:#181818;background-color:var(--main-color)}.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite;height:40vmin;pointer-events:none}.App-header{background-color:#181818;background-color:var(--main-color);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}:root{--main-color:#181818;--secondary-color:#1db954;--nav-color:#282828;--icon-color:#737373;--sidebar-width:120px;--bottomNav-height:44px}@media only screen and (min-width:320px) and (max-width:375px){.App{padding:25px}}@media only screen and (min-width:768px){.App{margin-left:120px;margin-left:var(--sidebar-width)}}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.Spotify-Button{border:2px solid var(--secondary-color);color:#fff;align-content:center;justify-content:center;font-size:15px;font-weight:700;text-align:center;outline:none;text-transform:uppercase;letter-spacing:1px;border-radius:25px;padding:5px 50px;cursor:pointer}.Spotify-Button,.Spotify-Button-Play{background-color:var(--secondary-color)}.Spotify-Button-Trans{background-color:initial;font-size:20px}.isFollowing{font-weight:400}.isFollowing:hover span{display:none}.isFollowing:hover:before{content:"Unfollow";font-weight:700;font-size:22px}.login-title{font-family:"Squada One",cursive;margin-bottom:24px!important;font-size:50px!important}.login-button{font-size:18px}.icon{font-weight:400;margin-right:8px}.track-list{list-style-type:none;margin-left:0;padding-left:0;overflow:hidden}.track-list li{position:relative;display:list-item;grid-template-columns:auto 1fr;margin-top:30px;overflow:auto;cursor:pointer}.track-list :first-child{margin-top:0}.track-list li:hover{background-color:var(--nav-color)}.Image-Container{position:relative;width:100%}.Overlay{transition:.3s ease;position:absolute;opacity:0;top:50%;left:50%;height:100%;width:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.track-list img{display:block;float:left;margin:0 15px 0 0}.track-list h4{font-size:20px;color:#fff!important;max-lines:1}.track-list h4,.track-list p{text-align:left;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.track-list p{font-size:14px;color:#9b9b9b;float:left;text-decoration:none!important}.trackInfo{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;vertical-align:middle;align-items:center;max-lines:1;overflow:hidden}.Name-Artist-Container{height:inherit;display:block;text-align:left;text-overflow:ellipsis;white-space:nowrap;padding-right:1px;overflow:hidden}.Track-Title{color:#fff;font-size:16px}.Track-Title:hover{-webkit-text-decoration:#fff underline;text-decoration:#fff underline}.Track-Artist{font-size:14px;color:#9b9b9b}.Runtime-Text{color:#9b9b9b;margin:0!important;overflow:hidden;white-space:nowrap}input[type=checkbox]{bottom:50%;height:20px;width:20px;cursor:pointer;margin-left:24px}@media only screen and (min-width:768px){.track-list{list-style-type:none;margin-left:0;padding-left:0;width:100%;overflow:hidden}.track-list li{display:list-item;grid-template-columns:auto 1fr;margin-top:30px;overflow:auto;cursor:pointer}.track-list :first-child{margin-top:0}.Image-Container{position:relative;width:100%}.Overlay{transition:.3s ease;position:absolute;opacity:0;top:50%;left:50%;height:100%;width:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.track-list img{display:block;float:left;margin:0 15px 0 0}.track-list p{color:#9b9b9b;float:left;margin:0;text-decoration:none!important}.Name-Artist-Container,.track-list p{text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.Name-Artist-Container{height:inherit;display:block;padding-right:1px}.trackInfo{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;vertical-align:middle;align-items:center;max-lines:1;overflow:hidden}a{color:#fff!important;text-decoration:none!important}a:hover img{-webkit-filter:brightness(50%);filter:brightness(50%)}}.container{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.Profile-img{border-radius:50%;width:150px;height:150px}h1{color:#fff;font-size:30px!important;margin:15px}.Profile-info div{display:inline-block;align-content:center;margin-bottom:10px}.Profile-info h3{color:var(--secondary-color);font-size:25px;margin:10px}.Profile-info p{font-size:12px;text-transform:uppercase;color:#9b9b9b;letter-spacing:1px}.User-Preview{display:grid;grid-template-columns:1fr;width:100%;margin-top:25px;grid-gap:50px;gap:50px}.User-Preview-Container{display:block;overflow:hidden}.TrackList-Heading{color:#fff;font-size:20px;text-align:center;margin-bottom:25px!important}.logout{font-size:16px}.logout:hover{border-color:grey}@media only screen and (min-width:320px) and (max-width:375px){h1{font-size:20px!important;margin-top:2px!important;margin-bottom:14px!important}.Profile-info h3{font-size:16px}.Profile-info p{font-size:8px}}@media only screen and (min-width:360px){h1{font-size:25px!important}}@media only screen and (min-width:768px){.Profile-img{border-radius:50%;width:150px;height:150px}h1{color:#fff;font-size:50px!important;margin:15px}.Profile-info div{display:inline-block;align-content:center;margin-bottom:10px}.Profile-info h3{color:var(--secondary-color);font-size:25px;margin:10px}.Profile-info p{font-size:12px;text-transform:uppercase;color:#9b9b9b;letter-spacing:1px}.User-Preview{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:50px;grid-gap:70px 70px;gap:70px 70px}.User-Preview-Container{display:block}}th{color:grey;text-align:start!important}td{vertical-align:middle!important;color:#fff;text-align:start;max-lines:1;cursor:pointer}.title:hover{text-decoration:underline}.length{color:grey}.th-select{-webkit-transform:translate(10%);transform:translate(10%)}tr:hover{background-color:var(--nav-color)}.Top-Tracks-Header{display:block;justify-content:space-between;margin-bottom:25px;color:#fff}.Top-Tracks-Header h2{font-size:25px;margin-bottom:25px!important}.tab{overflow:hidden}.tab button{font-size:16px;background-color:inherit;border:none;outline:none;cursor:pointer;padding:0 10px 10px;color:#fff}.tab button:hover{background-color:#ddd;color:#000}.tab button.active{border-bottom:5px solid #fff;outline:none}.tracklist{padding:0}@media only screen and (min-width:320px) and (max-width:340px){.tab button{font-size:14px}}@media only screen and (min-width:860px){.Top-Tracks-Header{display:flex;justify-content:space-between;margin-bottom:25px;color:#fff}.tab{overflow:hidden}.tab button{font-size:18px;background-color:inherit;border:none;outline:none;cursor:pointer;padding:0 20px 10px;color:#fff}.tab button:hover{background-color:#ddd;color:#000}.tab button.active{border-bottom:5px solid #fff;outline:none}.tracklist{padding-left:32px;padding-right:32px}}.Track-Header{display:block;color:#fff}.Track-Header img{margin-bottom:15px;width:250px;height:250px}.Track-Header h1{margin:0 0 8px}.Track-Header h5{color:grey}.Track-Grid-Container{display:grid;grid-template-columns:repeat(2,1fr);margin-top:50px;padding:10px}.Track-Grid-Item{display:block;border:1px solid var(--secondary-color);padding:20px;font-size:30px;text-align:center}.Track-Grid-Item h4{color:#fff;margin:0}.Track-Grid-Item p{color:grey;font-size:12px;margin:0}.Track-Graph-Container{display:block;max-width:1500px;margin-top:50px;align-content:center;align-items:center}@media only screen and (min-width:768px){.Track-Header{display:flex;text-align:left;color:#fff}.Track-Header img{width:300px;height:300px;margin-right:20px}.Track-Header h1{margin:0 0 8px}.Track-Header h5{color:grey}.Track-Grid-Container{display:grid;grid-template-columns:repeat(5,1fr);margin-top:50px;padding:10px}.Track-Grid-Item{display:block;border:1px solid var(--secondary-color);padding:20px;font-size:30px;text-align:center}.Track-Grid-Item h4{color:#fff;margin:0}.Track-Grid-Item p{color:grey;font-size:12px;margin:0}.Track-Graph-Container{display:block;max-width:1500px;margin-top:50px;align-content:center;align-items:center}}.Top-Artists-Header{display:block;justify-content:space-between;margin-bottom:25px;color:#fff}.Top-Artists-Header h2{font-size:25px;margin-bottom:25px!important}.Top-Artists-Grid{display:grid;grid-template-columns:repeat(2,1fr);grid-row-gap:25px;row-gap:25px;grid-column-gap:10px;-webkit-column-gap:10px;column-gap:10px}.Top-Artists-Grid img{width:150px;height:150px;border-radius:50%;object-fit:cover}.Top-Artists-Grid :hover img{-webkit-filter:brightness(50%);filter:brightness(50%)}.Top-Artists-Grid .Name-Label{color:#fff;margin-top:8px;text-align:center;font-weight:700}@media only screen and (min-width:320px) and (max-width:375px){.Top-Artists-Grid img{width:100px;height:100px}}@media only screen and (min-width:768px){.Top-Artists-Container{padding:0}.Top-Artists-Header{display:flex;justify-content:space-between;margin-bottom:25px;color:#fff}.Top-Artists-Grid{display:grid;grid-template-columns:repeat(3,1fr);grid-row-gap:25px;row-gap:25px}.Top-Artists-Grid img{width:200px;height:200px;border-radius:50%;object-fit:cover}.Top-Artists-Grid :hover img{-webkit-filter:brightness(50%);filter:brightness(50%)}}.Artist-Header{margin-bottom:15px}.Artist-Header img{width:250px;height:250px;border-radius:50%;object-fit:cover;margin-bottom:10px}.Artist-Header h1{font-size:55px}.Artist-Info{display:inline-grid;grid-template-columns:1fr 1fr;grid-column-gap:50px}.Artist-Info div{display:inline-block;align-content:center;margin-bottom:10px}.Artist-Info h3{color:var(--secondary-color);font-size:25px;margin:10px}.Artist-Info p{font-size:12px;text-transform:uppercase;color:#9b9b9b;letter-spacing:1px}.Artist-Genres h3{color:var(--secondary-color);font-size:25px;margin:5px}.Artist-Genres p{font-size:12px;text-transform:uppercase;color:#9b9b9b;letter-spacing:1px;margin-top:10px}@media only screen and (min-width:768px){.Artist-Container{padding:100px}.Artist-Header{margin-bottom:25px}.Artist-Header img{width:320px;height:320px;border-radius:50%;object-fit:cover;margin-bottom:5px}.Artist-Header h1{font-size:55px}.Artist-Info{display:inline-grid;grid-template-columns:1fr 1fr;grid-column-gap:50px}.Artist-Info div{display:inline-block;align-content:center;margin-bottom:10px}.Artist-Info h3{color:var(--secondary-color);font-size:25px;margin:10px}.Artist-Info p{font-size:12px;text-transform:uppercase;color:#9b9b9b;letter-spacing:1px}.Artist-Genres h3{color:var(--secondary-color);font-size:25px;margin:5px}.Artist-Genres p{font-size:12px;text-transform:uppercase;color:#9b9b9b;letter-spacing:1px;margin-top:10px}}.Playlists-Container h2{font-size:25px;color:#fff;display:flex;margin-bottom:25px!important}.Playlists-Grid{display:grid;grid-template-columns:repeat(2,1fr);grid-row-gap:25px;row-gap:25px}.Playlists-Grid img{width:125px;height:125px;object-fit:cover}.Playlists-Grid .Info-Container{display:block}.Playlists-Grid .Name-Label{color:#fff;margin-top:8px;text-align:center;font-weight:700}.Playlists-Grid .Owner-Label{font-size:14px;margin-top:8px;text-align:center;font-weight:700;color:grey}@media only screen and (min-width:320px) and (max-width:375px){.Playlists-Grid img{width:100px;height:100px}}@media only screen and (min-width:768px){.Playlists-Container{padding:0}.Playlists-Container h2{color:#fff;display:flex;margin-bottom:50px!important}.Playlists-Grid{display:grid;grid-template-columns:repeat(3,1fr);grid-row-gap:50px;row-gap:50px}.Playlists-Grid img{width:200px;height:200px;object-fit:cover}}.Playlist-Header{display:block;text-align:left;color:#fff;margin-bottom:25px}.Playlist-Header img{width:100%;height:auto;padding:5px;margin-bottom:20px;align-content:center}.Playlist-Header h1{margin:0 0 15px}.Playlist-Header h5{color:grey}.Playlist-Body-Container{padding:0}p{margin-top:5px!important;color:#fff}.tab{margin-bottom:20px!important}.Button-Container{justify-content:space-between!important}@media only screen and (min-width:768px){.Playlist-Header{display:flex;text-align:left;color:#fff;margin-bottom:25px}.Playlist-Header img{margin-right:20px;width:300px;height:300px}.Playlist-Header h1{margin:0 0 8px}.Playlist-Header h5{color:grey}.Playlist-Body-Container{padding:25px}p{margin-top:5px!important;color:#fff}}.Dropdown-Container{position:relative;display:inline-block;overflow:visible}.Dropdown{position:absolute;top:100%;right:25%;width:200px;z-index:2;background-color:var(--nav-color);border:1px solid grey;box-shadow:0 16px 24px 2px rgba(0,0,0,.14)}.large{left:50%;width:500px!important}.Dropdown::-webkit-scrollbar-track{background:transparent!important}.Dropdown ul{padding:0;width:100%;max-height:300px;list-style:none;margin:0;overflow-y:scroll}.Dropdown li{text-align:start;color:#fff;max-lines:1;margin:8px}.Dropdown li:first-child{border-bottom:1px solid grey}.Dropdown li:hover{background-color:grey;color:#000;cursor:pointer}.applied-filters-container{width:100%;height:auto;display:flex;flex-direction:row;justify-content:flex-start}.applied-filters-container label{color:#fff;font-size:24px}.tab-container{width:100%;height:auto;background-color:var(--nav-color);justify-content:space-evenly;margin-bottom:8px}.tab-button{color:grey!important;height:100%!important;background:transparent;border:none;outline:none!important}.tab-button:focus{color:#fff!important;font-weight:700}.tab-dropdown-container{display:block;padding:20px;text-align:start}.tab-dropdown-heading{color:#fff;margin-bottom:32px}.tab-input-container .input-range__track.input-range__track--active{background-color:grey}.tab-input-container .input-range .input-range__slider{background-color:#d3d3d3}.tab-dropdown-button-container{display:flex;flex-direction:row-reverse;margin-top:32px}.button-add{background-color:var(--secondary-color);border:2px solid var(--secondary-color);color:#fff;font-size:12px;font-weight:700;text-align:center;outline:none;text-transform:uppercase;letter-spacing:1px;border-radius:25px;padding:2.5px 25px;cursor:pointer}.tab-dropdown-audioFeatures{display:grid;grid-template-columns:repeat(3,1fr);grid-row-gap:25px;row-gap:25px;grid-column-gap:25px;-webkit-column-gap:25px;column-gap:25px}.radio{color:#fff}.tab-dropdown-container .radio .key-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-row-gap:8px;row-gap:8px;grid-column-gap:8px;-webkit-column-gap:8px;column-gap:8px}.modal-content{background-color:var(--main-color)!important}.modal-full{top:20%;min-width:100%;margin:0}.modal-body-content{display:grid;grid-template:1fr;grid-row-gap:8px;row-gap:8px}.Collapsible__contentInner{padding:10px;border:1px solid var(--nav-color);border-top:0}.Collapsible__contentInner p{margin-bottom:10px;font-size:14px;line-height:20px}.Collapsible__contentInner p:last-child{margin-bottom:0}.Collapsible__trigger{display:block;font-weight:700;text-decoration:none;color:#333;position:relative;padding:10px;background:var(--nav-color);color:#fff;text-align:start}.Collapsible__trigger:after{font-family:"Font Awesome\ 5 Free";content:"\f107";position:absolute;right:10px;top:10px;display:block;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.Collapsible__trigger.is-open:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Collapsible__trigger.is-disabled{opacity:.5;background-color:grey}.CustomTriggerCSS{background-color:#f08080;transition:background-color .2s ease}.CustomTriggerCSS--open{background-color:#483d8b}.Collapsible__custom-sibling{padding:5px;font-size:12px;background-color:#cbb700;color:#000}.Generator-Container{display:block}h2{color:#fff;font-size:25px!important;margin-bottom:25px;text-align:start}.Generator-Header{display:block;position:-webkit-sticky;position:sticky;top:0;z-index:1;background-color:#181818;padding:1px}.Header-Button-Container{display:flex;flex-direction:row-reverse;margin-top:24px;margin-bottom:24px}.Save{height:100%}.Clear,.Save{max-lines:1;font-size:10px;padding:2px 20px}.Clear{background:transparent;border:2px solid grey;margin-right:16px}.Icon-Button{background-color:initial;border-radius:50%;outline:none;border-color:grey;margin-right:16px}.fa-filter,.fa-sync{color:#fff;padding:10px 5px}.modal-content{background-color:#000!important;border:3px solid grey!important;color:#d3d3d3}.modal-content .modal-header .close{color:#d3d3d3!important}.modal-content .modal-footer .refresh{background-color:var(--secondary-color)!important}.phantom{display:block;padding:10px}.nav,.phantom{height:var(--bottomNav-height)!important;width:100%}.nav{position:fixed;left:0;bottom:0;background-color:var(--nav-color)}nav.bottom{background-color:var(--nav-color)!important;align-content:center!important;justify-content:space-evenly!important;font-size:12px;padding-top:0;padding-bottom:env(safe-area-inset-bottom)}nav.bottom a.nav-item.nav-link{border-top:2.5px solid transparent;color:var(--icon-color)}nav.bottom a.nav-item.nav-link.active.active{color:var(--secondary-color)!important;border-top:2.5px solid var(--secondary-color)}@media only screen and (min-width:768px){nav.navbar.bottom{display:none!important}}.sidenav{height:100%;width:var(--sidebar-width);position:fixed;z-index:1;top:0;left:0;background-color:var(--nav-color);overflow-x:hidden}.sidenav a{text-decoration:none;font-size:16px;color:var(--icon-color);display:block}.sidenav a:hover{color:#f1f1f1}.sidenav nav{background-color:var(--nav-color)}.sidenav a.nav-item.nav-link{color:var(--icon-color)!important;border-right:5px solid var(--nav-color)}.sidenav a.nav-item.nav-link.active.active,.sidenav a.nav-item.nav-link:hover{color:var(--secondary-color)!important;border-right:5px solid var(--secondary-color);border-bottom:none;background:var(--main-color)!important}.sidenav a.nav-item.nav-link.logo.active{border-right:5px solid transparent;color:#fff!important;background:var(--nav-color)!important}.brand-title{font-family:"Squada One",cursive;color:var(--secondary-color);font-size:24px}@media only screen and (max-width:768px){.sidenav{display:none!important}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#181818}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}
/*# sourceMappingURL=main.22bd6b39.chunk.css.map */