*{user-select:none}html,body,div,section,aside,main,footer,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;list-style:none}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}.player{z-index:9999}.icon{opacity:.5;width:12px;height:12px;padding:10px;background-repeat:no-repeat;background-position:center;margin:0px -3px;position:relative}.play,.pause{border-radius:50%;border:1px solid white;transition:transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1)}.icon:hover{opacity:1}.icon:active{opacity:.5}.play:hover,.pause:hover{transform:scale(1.1)}.play:active,.pause:active{transform:scale(1)}.play{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/play.png");background-size:11px 13px;background-position:55% 50%}.pause{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/pause.png");background-size:10px 12px}.next,.prev{background-size:11px 11px}.next{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/next.png")}.prev{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/prev.png")}.shuffle,.shuffle-selected{background-size:15px 11px}.shuffle{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/shuffle.png")}.shuffle-selected{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/shuffle-green.png")}.loop,.loop-selected,.loop-tracklist{background-size:14px 14px}.shuffle-selected,.loop-selected,.loop-tracklist{opacity:.8}.shuffle-selected:active,.loop-selected:active,.loop-tracklist:active{opacity:.8}.loop{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/loop.png")}.loop-selected{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/loop-selected.png")}.loop-tracklist{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/loop-playlist.png")}.shuffle-selected:after,.loop-selected:after,.loop-tracklist:after{content:'';position:absolute;width:4px;height:4px;left:calc(50% - 2px);bottom:0px;border-radius:50%;background-color:#2fd565}.footer-bar{font-size:10px;display:flex;height:100%}.footer-bar div[class*="col"]{box-sizing:border-box;height:100%}.footer-bar .col-3-11{flex:3;padding:15px}.footer-bar .col-5-11{flex:5;padding:5px}.footer-bar button{background:transparent;border:0;margin:0;padding:10px}.footer-bar button:focus{border:0;outline:0}.footer-bar i{color:#aaa;border-radius:80%;font-size:18px;transition:all .2s ease;transform:scale(1)}.footer-bar i:hover{color:#ccc;transform:scale(1.05)}.footer-bar .fa-play-circle,.footer-bar .fa-pause-circle{font-size:35px;width:35px;height:35px}.footer-bar .selected{color:#2bd968 !important}.footer-bar .song-info{display:flex;align-items:center;justify-content:flex-start}.footer-bar .song-info .song-info-album-cover{width:55px;height:55px;object-fit:cover}.footer-bar .song-info .song-info-links{display:flex;flex-direction:column;padding:5px}.footer-bar .song-info .song-info-links .album-link{font-size:14px}.footer-bar .song-info .song-info-links .artist-link{font-size:11.5px;color:#bbb}.footer-bar .song-info .song-info-links a{padding:4px;letter-spacing:.4px}.footer-bar .song-info .song-info-links a span{position:relative}.footer-bar .song-info .song-info-links a span:after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;border-bottom:1px solid transparent}.footer-bar .song-info .song-info-links a:hover span:after{border-bottom-color:#fff;color:#fff}.footer-bar .volume-bar{display:flex;align-items:center;justify-content:flex-end}.footer-bar .volume-bar .mute{text-align:left;width:25px}.album-cover-image{width:200px}.fade-up{animation:fadeup 1.5s ease forwards;opacity:0}.fu1{animation-delay:600ms}.fu2{animation-delay:750ms}.fu3{animation-delay:900ms}.fu4{animation-delay:1050ms}.fu5{animation-delay:1300ms}.fu6{animation-delay:1450ms}@keyframes fadeup{0%{transform:translateY(200px);opacity:0}100%{transform:translateY(0px);opacity:1}}.browse-wrapper{display:flex;justify-content:center;text-align:center}.browse-index-h1{text-align:center;font-size:45px;color:#eee;padding-top:30px}.music-index .music-index-wrapper{display:flex;justify-content:center;width:100%}.music-index .music-index-wrapper ul{display:grid;grid-template-columns:repeat(auto-fill, 170px);grid-gap:1rem;justify-content:center;list-style:none;padding:1rem;width:100%;margin:0 auto}.music-index .music-index-wrapper .followed-artists,.music-index .music-index-wrapper .followed-users{padding:30px;margin-right:-37px}.music-index .music-index-wrapper .followed-artists h1,.music-index .music-index-wrapper .followed-users h1{font-size:30px}.music-index .music-index-wrapper .followed-artists ul,.music-index .music-index-wrapper .followed-users ul{display:flex;width:80%;flex-wrap:wrap}.item-wrapper{display:flex;flex-direction:column;align-items:center}.media-wrapper{width:170px;position:relative;margin:8px}.media-wrapper .play-pause{position:absolute;vertical-align:center;text-align:center;background:transparent;border:0;margin:0;padding:0;z-index:4;outline:0;transition:0.2s ease;top:54px;left:57px;display:none}.show-info .media-wrapper .play-pause{top:109px;left:111px}.media-wrapper .play-pause.playing{display:block !important}.media-wrapper .play-pause .play,.media-wrapper .play-pause .pause{width:40px;height:40px;background-size:20px 20px;opacity:1;border-color:#aaa}.show-info .media-wrapper .play-pause .play,.show-info .media-wrapper .play-pause .pause{width:80px;height:80px;background-size:40px 40px}.media-wrapper .play-pause .play:hover,.media-wrapper .play-pause .pause:hover{transform:scale(1);border-color:#fff}.media-wrapper .play-pause .play:active,.media-wrapper .play-pause .pause:active{border-color:#fff;opacity:1}.media-wrapper .play-pause:active{transform:scale(0.95)}.media-wrapper .music-index-item{display:block}.media-wrapper .media{display:flex;width:170px;overflow:none;flex-wrap:wrap;position:relative;vertical-align:top;transition:0.2s ease}.media-wrapper .media .media__image{box-shadow:0px 0px 10px rgba(0,0,0,0.5);max-width:100%;display:block;transition:0.2s ease;transform:scale(1);object-fit:cover;width:170px;height:170px}.media-wrapper .media .media__image.collage{width:85px;height:85px}.media-wrapper p{padding:12px;font-size:14px;letter-spacing:0.6px;text-align:center;font-family:"HelveticaNeue-Light"}.index-item-wrapper{display:flex;flex-direction:column;align-items:center;padding-bottom:5px}.index-item-wrapper .user-link{color:#bbb;font-size:14px;margin-top:-10px;letter-spacing:1px}.index-item-wrapper .user-link:hover{text-decoration:underline;color:#fff}@media (max-width: 1200px){.media-wrapper{width:170px}.media-wrapper .media .media__image{width:170px;height:170px}}.media__body{backface-visibility:hidden;background:#000;opacity:0;top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;transition:0.2s ease;margin:0 auto;transform:scale(1);z-index:3}.media__body.playing,.media__body.hovering{opacity:0.7;transform:scale(1.01)}.music-index-item:hover .media__body{opacity:0.7;transform:scale(1.01)}.music-index-item:active .media{transform:scale(0.97)}.media-loaded{background:#000;top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;animation:disappear 0.5s linear forwards;margin:0 auto;z-index:2}@keyframes disappear{0%{opacity:0.8}100%{opacity:0;display:none}}body{color:#fff;font-family:"Helvetica", sans-serif;color:rgba(255,255,255,0.6)}.app-wrapper{display:flex;width:100%;height:calc(100vh)}.main-wrapper{background:linear-gradient(180deg, rgba(0,0,0,0), black);background-color:#222;width:100%;height:100%;overflow:hidden}.music-index{overflow-x:hidden;margin-left:-37px}.song-collection-index{margin-left:0}.search-container .music-index{margin-left:-37px}.search-songs{margin-left:37px}.sidebar{padding:20px;padding-bottom:105px;position:fixed;display:flex;flex-direction:column;justify-content:space-between;width:220px;box-sizing:border-box;height:100%;background:rgba(0,0,0,0.6)}.sidebar .logo{margin-left:3px;width:35px;margin-bottom:10px}.sidebar .sidebar-main .search a{display:flex;justify-content:space-between}.sidebar .sidebar-main .search:hover{cursor:pointer}.sidebar .sidebar-main a{color:#bbb;width:100%;display:block;transition:color 0.3s ease;letter-spacing:0.5px}.sidebar .sidebar-main a:hover{color:#fff}.sidebar li{padding:0 10px;margin:15px 0px;font-size:14px}.sidebar-main li{font-size:16px;font-weight:bold}.sidebar-main li .selected{color:#27bb5a}.sidebar-main li .selected:hover{color:#27bb5a}.sidebar .sidebar-divider{padding:0;height:1px;background-color:rgba(255,255,255,0.25);width:100%}.account-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.account-link p{font-size:14px}.account-link.selected{color:#27bb5a}.account-link.selected:hover{color:#27bb5a}.account-link-profile-picture{width:25px;height:25px;padding:0px 10px;border-radius:50%}.recently-played{text-transform:lowercase;font-variant:small-caps;letter-spacing:1px}.main{background:linear-gradient(180deg, rgba(0,0,0,0), black);width:calc(100% - 200px);height:calc(100% - 200px);background-color:#3c3f5b;padding-left:220px;padding-bottom:220px;overflow:scroll}.main .index-page-wrapper{padding:0px 10px}.player{position:fixed;bottom:0;background-color:#282828;width:100%;height:90px;border-top:1px solid #000}.new-playlist-page{position:absolute;z-index:10;width:100%;height:100%;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.8);background-attachment:scroll !important}.new-playlist-page .new-playlist-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.new-playlist-page .new-playlist-wrapper .close-modal-button{background-color:transparent;border:0;outline:0}.new-playlist-page .new-playlist-wrapper .close-modal-button .fa-times{font-size:70px;transform:scale(1);color:#bbb;transition:.1s ease}.new-playlist-page .new-playlist-wrapper .close-modal-button .fa-times:hover{transform:scale(1.1);color:#fff}.create-new-playlist-h1{font-size:45px;font-weight:600;color:#fff;letter-spacing:.8px}.new-playlist{transition:.05s ease;display:flex;justify-content:center}.new-playlist-button{border:0;outline:0;padding:11px 18px;background-color:#27bb5a;border-radius:20px;text-transform:uppercase;font-size:11px;color:#fff;letter-spacing:2px;transition:.05s ease;transform:scale(1);white-space:nowrap}.new-playlist-button:hover{cursor:default;transform:scale(1.05);background-color:#2bd968}.new-playlist-button:active{transform:scale(1)}.new-playlist-cancel{background:rgba(50,50,50,0.3);border:2px solid #bbb}.new-playlist-cancel:hover{border-color:#eee;background:rgba(50,50,50,0.3)}.new-playlist-form{width:100%;display:flex;flex-direction:column;align-items:center}.new-playlist-form-input{width:100%;background-color:#282828;display:flex;flex-direction:column;align-items:center;padding:35px}.new-playlist-form-input .new-playlist-label{color:#fff;font-size:14px;letter-spacing:.8px}.new-playlist-label,.new-playlist-input{width:58%}.new-playlist-input{background-color:transparent;font-size:50px;font-weight:bold;font-weight:600;color:#fff;border:0;caret-color:#27bb5a}.new-playlist-input::placeholder{color:#535353;font-weight:bold}.new-playlist-input{outline:0}.playlist-modal-button{padding:12px 40px}.new-playlist-form-buttons{display:flex}.close-modal-button{margin:20px}.create-new-playlist-h1{margin:10px}.new-playlist-form{margin:15px}.new-playlist-form-input{margin:15px}.new-playlist-form-buttons{margin:15px}.playlist-modal-button{margin:0px 15px}.add-song-to-playlist-modal{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.8);background-attachment:fixed;overflow:scroll;z-index:10;top:0;left:0}.add-song-to-playlist-modal .add-song-to-playlist-wrapper{padding:100px;display:flex;align-items:center;flex-direction:column}.add-song-to-playlist-modal .close-modal-button{background-color:transparent;border:0;outline:0}.add-song-to-playlist-modal .close-modal-button .fa-times{font-size:70px;transform:scale(1);color:#bbb;transition:.1s ease}.add-song-to-playlist-modal .close-modal-button .fa-times:hover{transform:scale(1.1);color:#fff}.add-song-to-playlist-modal .modal-index ul{justify-content:center;display:flex;flex-wrap:wrap}body{background-color:#fff;font-family:'HelveticaNeue-Light', sans-serif;margin:0;padding:0}a{text-decoration:none;color:white}.navbar{width:100%;transition:background-color 0.2s linear}.navbar .navbar-logo{display:flex;align-items:center;font-size:30px;font-weight:500;letter-spacing:-1.5px;flex:2}.navbar .navbar-logo a{padding:20px 17px}.navbar .navbar-collapse{width:90%;margin:0 auto;display:flex;color:white}.navbar .logo{height:50px}.navbar .navbar-links{display:flex;justify-content:center;align-items:center}.navbar .navbar-links a{font-size:16px;font-weight:600;letter-spacing:-0.5px;transition:color 0.08s linear;padding:28px 17px;display:block;white-space:nowrap}.navbar .navbar-links a:hover{cursor:pointer;color:#2d46b9}.navbar .navbar-links .divider{margin:0px 17px;height:22px;width:1px;background-color:white}.navbar .navbar-links .dropdown-menu{z-index:2}.navbar .navbar-links .dropdown a{display:flex;align-items:center;justify-content:space-between}.navbar-logged-out{background-color:#00000088}.navbar-logged-out a:hover{color:#2bd968 !important}#wrapper{background:linear-gradient(217deg, rgba(255,0,0,0.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,0.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,0.8), rgba(0,0,255,0) 70.71%),linear-gradient(white, white);min-height:100vh;overflow:hidden}.main-content-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding-top:50px}.main-content-wrapper .main-content-intro{color:#fff;display:flex;flex-direction:column;align-items:center;gap:50px}.main-content-wrapper .main-content-intro h1{font-size:80px;font-weight:bold;letter-spacing:-5px}.main-content-wrapper .main-content-intro h2{font-size:25px;letter-spacing:-.4px;font-weight:300}.main-content-wrapper .main-content-intro .login{margin:15px;align-self:center;display:inline-block;padding:20px 60px;background-color:#27bb5a;border-radius:30px;text-transform:uppercase;font-size:14px;color:#fff;font-weight:bold;letter-spacing:1px;transition:background-color 0.5s ease}.main-content-wrapper .main-content-intro .login:hover{background-color:#2bd968;cursor:pointer}.main-content-wrapper .image-links{display:flex;justify-content:center;align-items:center;gap:1rem;padding:20px 0}.main-content-wrapper .image-links div{width:225px !important}.main-content-wrapper .image-links div .media__image{width:225px !important;height:225px !important}.main-content-wrapper .image-links .music-index-item:hover .media__body.index-page{opacity:0.75;transform:scale(1.01)}.main-content-wrapper .image-links .music-index-item:active .media__body.index-page{transform:scale(1)}.main-content-wrapper .image-links .music-index-item:active .media .media__image.index-page{transform:scale(0.98)}.main-content-wrapper .image-links .index-page{transition:0.3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}.main-content-wrapper .image-links .index-page .item-span{padding:5px;color:#fff}.main-content-wrapper .image-links .index-page .owner-span{color:#bbb;padding:5px}.navbar .navbar-links .dropdown i{margin-left:15px}.navbar .navbar-links .dropdown i .dropdown-menu{z-index:2}.navbar .navbar-links .dropdown i .dropdown a{display:flex;align-items:center;justify-content:space-between}.dropdown{position:relative}.dropdown-menu{display:none;top:80px;width:150px;padding:15px;color:black;background-color:#f9f9f9;box-shadow:0px 0px 15px rgba(0,0,0,0.3)}.dropdown-menu.clicked{display:block;position:absolute;border-radius:3px}.dropdown-menu a,.dropdown-menu .log-out{color:#000;padding:10px !important;font-weight:600}.dropdown-menu.clicked{display:block;position:absolute;border-radius:3px}.progress-bar-wrapper{width:100%;display:flex column;align-items:center}.played{height:4px;background-color:#bbb;position:absolute;left:0px;top:0px;z-index:2;border-radius:5px;transition:background-color .1s ease}.overlay-wrapper:hover .played{background-color:#27bb5a;transition:.1-s ease}.player-underlay{height:4px;background-color:#444;position:absolute;left:0px;top:0px;border-radius:5px;width:100%}.progress-bar-with-duration{display:flex;align-items:center;justify-content:center}.seek-slider{width:100%;background:transparent;margin:0 !important;padding:0 !important;position:relative;z-index:3;-webkit-appearance:none;height:3px;outline:0}.overlay-wrapper{width:100%;position:relative;margin:0px 10px}.seek-slider-wrapper{display:flex;justify-content:flex-start}input[type="range"]::-webkit-slider-thumb{transform:scale(0);-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:#eee;margin-top:1px;cursor:pointer;box-shadow:0px 0px 1px #555;transition:.15s ease}input[type="range"]:hover::-webkit-slider-thumb,input[type="range"]:active::-webkit-slider-thumb{transform:scale(1)}.play-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.play-bar .play-button{display:flex;align-items:center}.play-bar .progress-bar{display:flex;flex-direction:row;align-items:center;width:100%}.play-bar .progress-bar input{width:100%;margin:0px 10px}.search-container{padding:0;margin-top:0 !important}.main-search-bar{padding:0;margin:0 !important}.search-heading{font-size:13px;font-weight:normal;color:#fff;letter-spacing:.8px;padding-bottom:3px}.search-form-input{padding:30px;width:100%;background-color:#282828;display:flex;flex-direction:column;box-sizing:border-box}.search-input{width:100%}.search-input{background-color:transparent;font-size:50px;font-weight:bold;color:#fff;border:0;outline:0;caret-color:#27bb5a}.search-input::placeholder{color:#535353;font-weight:bold}.session-form-nav{display:flex;justify-content:center;padding:30px;border-bottom:1px solid #ddd}.session-form-nav img{height:75px}.session-form-main{width:40%;margin:0 auto;padding:30px;display:flex;flex-direction:column;align-items:center;font-family:Helvetica, Arial, sans-serif}.session-form-main .session-errors{display:flex;flex-direction:column;align-items:center;width:100%;font-size:10px;text-transform:uppercase;color:#bf3103;font-weight:bold}.session-form-main .session-errors li{margin-bottom:10px}.session-form-main form{padding:10px;display:flex;flex-direction:column;width:100%}.session-form-main input{margin-bottom:10px;font-size:14px;box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid #d9dadc;transition:border-color 0.3s ease}.session-form-main input::placeholder{color:#bbb;transition:color 0.3s ease}.session-form-main input:focus{box-shadow:none;text-shadow:none;border-color:#919496;outline:0}.session-form-main input:focus::placeholder{color:#ddd}.session-form-main input[type="submit"],.session-form-main .demo-user{margin:10px;align-self:center;background-color:#27bb5a;border-radius:20px;width:200px;text-transform:uppercase;font-size:11px;color:#fff;font-weight:bold;letter-spacing:1.5px;transition:background-color 0.5s ease;outline:0}.session-form-main input[type="submit"]:hover,.session-form-main .demo-user:hover{background-color:#2bd968;cursor:pointer}.session-form-main .demo-user{border:0;width:100%;padding:10px;font-size:12px;background-color:#3d5a96;outline:0}.session-form-main .demo-user:hover{background-color:#3e65b0}.session-form-main .divider{width:100%;text-align:center;border-top:1px solid #d9dadc;display:block;line-height:1px;margin:15px 0px}.session-form-main .divider strong{color:#000;background:#fff;padding:0px 20px;letter-spacing:1px;text-transform:uppercase;font-size:11px}.session-form-main h2{font-weight:500;font-size:15px;line-height:1.5;color:#222}.session-form-main a{color:#27bb5a}.session-form-main a:hover{color:#2bd968}.show-page-main{padding-top:15px;display:flex;width:100%}.show-page-main .show-info{display:flex;flex-direction:column;align-items:flex-end;flex:1;padding-left:50px;margin-right:50px}.show-page-main .show-info .media-wrapper{padding-left:0px;margin-left:auto;width:320px}.show-page-main .show-info .media-wrapper .media{width:320px;display:flex;flex-wrap:wrap}.show-page-main .show-info .media-wrapper .media__image{width:320px;height:320px}.show-page-main .show-info .media-wrapper .media__image.collage{width:160px;height:160px}.show-page-main .show-info .media-wrapper .music-index-item:hover{cursor:default}.show-page-main .show-info .media-wrapper p{font-size:28px;line-height:36px;letter-spacing:-.005em;font-weight:600}.show-page-main .song-index-item-wrapper{position:relative}.show-page-main .single-click-handler{padding:15px;left:12px;top:7px;position:absolute;z-index:5}.show-page-main .show-songs{flex:2;margin-left:30px;padding-right:120px}.show-page-main .show-songs.song-container{margin-left:0px;margin-right:20px;padding:20px}.show-page-main .show-songs ol .song-index-item-wrapper{padding:15px 15px 15px 40px;transition:.3s ease}.show-page-main .show-songs ol .song-index-item{list-style:decimal outside;position:relative;width:100%;height:100%}.show-page-main .show-songs ol .song-index-item span{color:#fff;margin-left:10px}.show-page-main .show-songs ol .song-index-item-wrapper:hover .song-index-item,.show-page-main .show-songs ol .playing .song-index-item{list-style:none}.show-page-main .show-songs ol .song-index-item-wrapper:hover .song-index-item:before,.show-page-main .show-songs ol .playing .song-index-item:before{content:'';position:absolute;left:-20px;background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/utility/play_large.png");background-size:13px;background-position:auto;width:13px;height:15px}.show-page-main .show-songs ol .playing .song-index-item:before,.show-page-main .show-songs ol .playing:hover .song-index-item:before{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/utility/pause_large.png")}.show-page-main .show-songs ol .song-index-item-wrapper:hover,.show-page-main .show-songs ol .playing{background:rgba(0,0,0,0.3)}.song-index-item-wrapper{display:flex}.song-index-item-wrapper .song-index-item{flex:6}.song-index-item-wrapper .song-dropdown-wrapper{flex:1;position:relative;display:flex;align-items:center;justify-content:center}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-handler{letter-spacing:2px;font-size:25px;padding:0;margin:0;border:0;line-height:0px;transform:scale(1);transition:.05s ease;color:#fff}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-handler:active{transform:scale(0.92)}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu{position:absolute;width:190px;padding:0;top:20px;right:50px;background:linear-gradient(#181818, #383838);z-index:1}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu .song-dropdown{padding-top:3px;padding-bottom:3px;border-radius:10px;width:100%;height:100%}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu .song-dropdown .dropdown-li{color:#bbb;font-size:14px;font-weight:400;padding:15px;box-sizing:border-box;width:100%;height:100%;transition:.1s ease}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu .song-dropdown .dropdown-li:hover{background-color:rgba(50,50,50,0.8);color:#fff}.playlist-index-wrapper{display:flex;flex-direction:column;width:320px}.delete-button-wrapper{align-self:center;padding:15px}.delete-playlist-button{outline:0;padding:11px 18px;border-radius:20px;text-transform:uppercase;font-size:11px;color:#fff;letter-spacing:2px;transition:.05s ease;transform:scale(1);background:rgba(35,35,35,0.8);border:2px solid #bbb}.delete-playlist-button:hover{cursor:default;transform:scale(1.05);border-color:#eee}.top-nav-bar{width:100%;display:flex;justify-content:center;padding:30px 0px 15px 0px}.top-nav-bar .top-nav-link-wrapper{margin:20px;display:flex;flex-direction:column;align-items:center}.top-nav-bar .top-nav-link-wrapper a{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-family:'HelveticaNeue';color:#bbb;transition:.3s ease}.top-nav-bar .top-nav-link-wrapper a:hover{color:#fff}.top-nav-bar .top-nav-link-wrapper .nav-link-selected{color:#fff;position:relative}.top-nav-bar .top-nav-link-wrapper .nav-link-selected span:before{position:absolute;content:'';width:30px;height:1px;bottom:0;margin-bottom:-5px;left:calc(50% - 15px);border-bottom:2px solid #27bb5a}.nav-flex-wrapper{display:flex;justify-content:center;align-items:baseline}.nav-empty,.new-playlist{flex:1}.top-nav-bar{flex:2}.top-nav-link-wrapper span{white-space:nowrap}.sidebar{z-index:5}.content{background:linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 30%, black 90%);position:fixed;z-index:-1 !important;left:0;right:0;top:0;width:100vw;height:600px}.artwork{position:fixed;left:0;right:0;top:0;height:600px;width:100vw;object-fit:cover;object-position:top;z-index:-2 !important}.artist-show{background:linear-gradient(rgba(0,0,0,0.3) 0%, black 75%);background-repeat:no-repeat;background-position:top;background-size:cover;z-index:2;position:relative}.artist-artwork,.profile-picture{animation:fadein .3s linear}@keyframes fadein{0%{opacity:.2}100%{opacity:.7}}.profile-picture{animation:fadein-prof .3s linear}@keyframes fadein-prof{0%{opacity:.2}100%{opacity:1}}.user-artist-show-wrapper h1{color:#fff;text-align:center}.user-artist-show-wrapper .user-artist-intro{width:100%;padding-top:100px;text-align:center}.user-artist-show-wrapper .user-artist-intro.user-intro{padding-top:0}.user-artist-show-wrapper .user-artist-intro .artist-artwork{width:170px;height:170px;border-radius:50%;padding:5px;margin:5px;opacity:.7;object-fit:cover;border:2px solid #bbb}.user-artist-show-wrapper .user-artist-intro h1{font-size:60px}.user-artist-show-wrapper .user-artist-intro h2{padding-top:15px}.user-artist-show-wrapper .user-artist-intro .username{font-size:40px}.user-artist-show-wrapper .albums-singles-wrapper ul{margin-left:50px}.user-artist-show-wrapper .artist-songs-wrapper{background:rgba(0,0,0,0.3);padding:30px;margin-top:50px}.user-artist-show-wrapper .artist-songs-wrapper .artist-random-songs{width:75%;margin:0 auto}.user-artist-show-wrapper .artist-songs-wrapper .artist-random-songs h1{font-size:45px}.user-artist-show-wrapper .artist-albums,.user-artist-show-wrapper .artist-singles{display:flex column;justify-content:center;padding:30px 0px 30px 0px}.user-artist-show-wrapper .artist-albums h1,.user-artist-show-wrapper .artist-singles h1{font-size:35px;padding-bottom:30px}.user-artist-show-wrapper .artist-albums ul,.user-artist-show-wrapper .artist-singles ul{display:flex;flex-wrap:wrap}.user-show-wrapper{display:flex;flex-direction:column}.user-show-wrapper .user-show-music-index h1{font-size:25px;padding:15px}.user-show-wrapper .user-show-music-index .top-nav-bar{margin-top:-35px}.user-show-wrapper .user-intro{padding-bottom:0px}.user-show-wrapper .music-index-wrapper{display:flex;flex-direction:column;align-items:center}.user-show-wrapper .music-index-wrapper .username{font-size:30px}.profile-picture{width:225px;height:225px;border-radius:50%;padding:30px;object-fit:cover}.user-artist-intro button{margin:30px}.follow-button{border:0;outline:0;padding:11px 18px;background-color:#27bb5a;border-radius:20px;text-transform:uppercase;font-size:11px;color:#fff;letter-spacing:2px;transition:.05s ease;transform:scale(1)}.follow-button:hover{cursor:default;transform:scale(1.05);background-color:#2bd968}.follow-button:active{transform:scale(1)}*{user-select:none}html,body,div,section,aside,main,footer,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;list-style:none}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle}.player{z-index:9999}.icon{opacity:.5;width:12px;height:12px;padding:10px;background-repeat:no-repeat;background-position:center;margin:0px -3px;position:relative}.play,.pause{border-radius:50%;border:1px solid white;transition:transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1)}.icon:hover{opacity:1}.icon:active{opacity:.5}.play:hover,.pause:hover{transform:scale(1.1)}.play:active,.pause:active{transform:scale(1)}.play{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/play.png");background-size:11px 13px;background-position:55% 50%}.pause{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/pause.png");background-size:10px 12px}.next,.prev{background-size:11px 11px}.next{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/next.png")}.prev{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/prev.png")}.shuffle,.shuffle-selected{background-size:15px 11px}.shuffle{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/shuffle.png")}.shuffle-selected{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/shuffle-green.png")}.loop,.loop-selected,.loop-tracklist{background-size:14px 14px}.shuffle-selected,.loop-selected,.loop-tracklist{opacity:.8}.shuffle-selected:active,.loop-selected:active,.loop-tracklist:active{opacity:.8}.loop{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/loop.png")}.loop-selected{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/loop-selected.png")}.loop-tracklist{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/buttons/loop-playlist.png")}.shuffle-selected:after,.loop-selected:after,.loop-tracklist:after{content:'';position:absolute;width:4px;height:4px;left:calc(50% - 2px);bottom:0px;border-radius:50%;background-color:#2fd565}.footer-bar{font-size:10px;display:flex;height:100%}.footer-bar div[class*="col"]{box-sizing:border-box;height:100%}.footer-bar .col-3-11{flex:3;padding:15px}.footer-bar .col-5-11{flex:5;padding:5px}.footer-bar button{background:transparent;border:0;margin:0;padding:10px}.footer-bar button:focus{border:0;outline:0}.footer-bar i{color:#aaa;border-radius:80%;font-size:18px;transition:all .2s ease;transform:scale(1)}.footer-bar i:hover{color:#ccc;transform:scale(1.05)}.footer-bar .fa-play-circle,.footer-bar .fa-pause-circle{font-size:35px;width:35px;height:35px}.footer-bar .selected{color:#2bd968 !important}.footer-bar .song-info{display:flex;align-items:center;justify-content:flex-start}.footer-bar .song-info .song-info-album-cover{width:55px;height:55px;object-fit:cover}.footer-bar .song-info .song-info-links{display:flex;flex-direction:column;padding:5px}.footer-bar .song-info .song-info-links .album-link{font-size:14px}.footer-bar .song-info .song-info-links .artist-link{font-size:11.5px;color:#bbb}.footer-bar .song-info .song-info-links a{padding:4px;letter-spacing:.4px}.footer-bar .song-info .song-info-links a span{position:relative}.footer-bar .song-info .song-info-links a span:after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;border-bottom:1px solid transparent}.footer-bar .song-info .song-info-links a:hover span:after{border-bottom-color:#fff;color:#fff}.footer-bar .volume-bar{display:flex;align-items:center;justify-content:flex-end}.footer-bar .volume-bar .mute{text-align:left;width:25px}.album-cover-image{width:200px}.fade-up{animation:fadeup 1.5s ease forwards;opacity:0}.fu1{animation-delay:600ms}.fu2{animation-delay:750ms}.fu3{animation-delay:900ms}.fu4{animation-delay:1050ms}.fu5{animation-delay:1300ms}.fu6{animation-delay:1450ms}@keyframes fadeup{0%{transform:translateY(200px);opacity:0}100%{transform:translateY(0px);opacity:1}}.browse-wrapper{display:flex;justify-content:center;text-align:center}.browse-index-h1{text-align:center;font-size:45px;color:#eee;padding-top:30px}.music-index .music-index-wrapper{display:flex;justify-content:center;width:100%}.music-index .music-index-wrapper ul{display:grid;grid-template-columns:repeat(auto-fill, 170px);grid-gap:1rem;justify-content:center;list-style:none;padding:1rem;width:100%;margin:0 auto}.music-index .music-index-wrapper .followed-artists,.music-index .music-index-wrapper .followed-users{padding:30px;margin-right:-37px}.music-index .music-index-wrapper .followed-artists h1,.music-index .music-index-wrapper .followed-users h1{font-size:30px}.music-index .music-index-wrapper .followed-artists ul,.music-index .music-index-wrapper .followed-users ul{display:flex;width:80%;flex-wrap:wrap}.item-wrapper{display:flex;flex-direction:column;align-items:center}.media-wrapper{width:170px;position:relative;margin:8px}.media-wrapper .play-pause{position:absolute;vertical-align:center;text-align:center;background:transparent;border:0;margin:0;padding:0;z-index:4;outline:0;transition:0.2s ease;top:54px;left:57px;display:none}.show-info .media-wrapper .play-pause{top:109px;left:111px}.media-wrapper .play-pause.playing{display:block !important}.media-wrapper .play-pause .play,.media-wrapper .play-pause .pause{width:40px;height:40px;background-size:20px 20px;opacity:1;border-color:#aaa}.show-info .media-wrapper .play-pause .play,.show-info .media-wrapper .play-pause .pause{width:80px;height:80px;background-size:40px 40px}.media-wrapper .play-pause .play:hover,.media-wrapper .play-pause .pause:hover{transform:scale(1);border-color:#fff}.media-wrapper .play-pause .play:active,.media-wrapper .play-pause .pause:active{border-color:#fff;opacity:1}.media-wrapper .play-pause:active{transform:scale(0.95)}.media-wrapper .music-index-item{display:block}.media-wrapper .media{display:flex;width:170px;overflow:none;flex-wrap:wrap;position:relative;vertical-align:top;transition:0.2s ease}.media-wrapper .media .media__image{box-shadow:0px 0px 10px rgba(0,0,0,0.5);max-width:100%;display:block;transition:0.2s ease;transform:scale(1);object-fit:cover;width:170px;height:170px}.media-wrapper .media .media__image.collage{width:85px;height:85px}.media-wrapper p{padding:12px;font-size:14px;letter-spacing:0.6px;text-align:center;font-family:"HelveticaNeue-Light"}.index-item-wrapper{display:flex;flex-direction:column;align-items:center;padding-bottom:5px}.index-item-wrapper .user-link{color:#bbb;font-size:14px;margin-top:-10px;letter-spacing:1px}.index-item-wrapper .user-link:hover{text-decoration:underline;color:#fff}@media (max-width: 1200px){.media-wrapper{width:170px}.media-wrapper .media .media__image{width:170px;height:170px}}.media__body{backface-visibility:hidden;background:#000;opacity:0;top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;transition:0.2s ease;margin:0 auto;transform:scale(1);z-index:3}.media__body.playing,.media__body.hovering{opacity:0.7;transform:scale(1.01)}.music-index-item:hover .media__body{opacity:0.7;transform:scale(1.01)}.music-index-item:active .media{transform:scale(0.97)}.media-loaded{background:#000;top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;animation:disappear 0.5s linear forwards;margin:0 auto;z-index:2}@keyframes disappear{0%{opacity:0.8}100%{opacity:0;display:none}}body{color:#fff;font-family:"Helvetica", sans-serif;color:rgba(255,255,255,0.6)}.app-wrapper{display:flex;width:100%;height:calc(100vh)}.main-wrapper{background:linear-gradient(180deg, rgba(0,0,0,0), black);background-color:#222;width:100%;height:100%;overflow:hidden}.music-index{overflow-x:hidden;margin-left:-37px}.song-collection-index{margin-left:0}.search-container .music-index{margin-left:-37px}.search-songs{margin-left:37px}.sidebar{padding:20px;padding-bottom:105px;position:fixed;display:flex;flex-direction:column;justify-content:space-between;width:220px;box-sizing:border-box;height:100%;background:rgba(0,0,0,0.6)}.sidebar .logo{margin-left:3px;width:35px;margin-bottom:10px}.sidebar .sidebar-main .search a{display:flex;justify-content:space-between}.sidebar .sidebar-main .search:hover{cursor:pointer}.sidebar .sidebar-main a{color:#bbb;width:100%;display:block;transition:color 0.3s ease;letter-spacing:0.5px}.sidebar .sidebar-main a:hover{color:#fff}.sidebar li{padding:0 10px;margin:15px 0px;font-size:14px}.sidebar-main li{font-size:16px;font-weight:bold}.sidebar-main li .selected{color:#27bb5a}.sidebar-main li .selected:hover{color:#27bb5a}.sidebar .sidebar-divider{padding:0;height:1px;background-color:rgba(255,255,255,0.25);width:100%}.account-link{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.account-link p{font-size:14px}.account-link.selected{color:#27bb5a}.account-link.selected:hover{color:#27bb5a}.account-link-profile-picture{width:25px;height:25px;padding:0px 10px;border-radius:50%}.recently-played{text-transform:lowercase;font-variant:small-caps;letter-spacing:1px}.main{background:linear-gradient(180deg, rgba(0,0,0,0), black);width:calc(100% - 200px);height:calc(100% - 200px);background-color:#3c3f5b;padding-left:220px;padding-bottom:220px;overflow:scroll}.main .index-page-wrapper{padding:0px 10px}.player{position:fixed;bottom:0;background-color:#282828;width:100%;height:90px;border-top:1px solid #000}.new-playlist-page{position:absolute;z-index:10;width:100%;height:100%;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.8);background-attachment:scroll !important}.new-playlist-page .new-playlist-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.new-playlist-page .new-playlist-wrapper .close-modal-button{background-color:transparent;border:0;outline:0}.new-playlist-page .new-playlist-wrapper .close-modal-button .fa-times{font-size:70px;transform:scale(1);color:#bbb;transition:.1s ease}.new-playlist-page .new-playlist-wrapper .close-modal-button .fa-times:hover{transform:scale(1.1);color:#fff}.create-new-playlist-h1{font-size:45px;font-weight:600;color:#fff;letter-spacing:.8px}.new-playlist{transition:.05s ease;display:flex;justify-content:center}.new-playlist-button{border:0;outline:0;padding:11px 18px;background-color:#27bb5a;border-radius:20px;text-transform:uppercase;font-size:11px;color:#fff;letter-spacing:2px;transition:.05s ease;transform:scale(1);white-space:nowrap}.new-playlist-button:hover{cursor:default;transform:scale(1.05);background-color:#2bd968}.new-playlist-button:active{transform:scale(1)}.new-playlist-cancel{background:rgba(50,50,50,0.3);border:2px solid #bbb}.new-playlist-cancel:hover{border-color:#eee;background:rgba(50,50,50,0.3)}.new-playlist-form{width:100%;display:flex;flex-direction:column;align-items:center}.new-playlist-form-input{width:100%;background-color:#282828;display:flex;flex-direction:column;align-items:center;padding:35px}.new-playlist-form-input .new-playlist-label{color:#fff;font-size:14px;letter-spacing:.8px}.new-playlist-label,.new-playlist-input{width:58%}.new-playlist-input{background-color:transparent;font-size:50px;font-weight:bold;font-weight:600;color:#fff;border:0;caret-color:#27bb5a}.new-playlist-input::placeholder{color:#535353;font-weight:bold}.new-playlist-input{outline:0}.playlist-modal-button{padding:12px 40px}.new-playlist-form-buttons{display:flex}.close-modal-button{margin:20px}.create-new-playlist-h1{margin:10px}.new-playlist-form{margin:15px}.new-playlist-form-input{margin:15px}.new-playlist-form-buttons{margin:15px}.playlist-modal-button{margin:0px 15px}.add-song-to-playlist-modal{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.8);background-attachment:fixed;overflow:scroll;z-index:10;top:0;left:0}.add-song-to-playlist-modal .add-song-to-playlist-wrapper{padding:100px;display:flex;align-items:center;flex-direction:column}.add-song-to-playlist-modal .close-modal-button{background-color:transparent;border:0;outline:0}.add-song-to-playlist-modal .close-modal-button .fa-times{font-size:70px;transform:scale(1);color:#bbb;transition:.1s ease}.add-song-to-playlist-modal .close-modal-button .fa-times:hover{transform:scale(1.1);color:#fff}.add-song-to-playlist-modal .modal-index ul{justify-content:center;display:flex;flex-wrap:wrap}body{background-color:#fff;font-family:'HelveticaNeue-Light', sans-serif;margin:0;padding:0}a{text-decoration:none;color:white}.navbar{width:100%;transition:background-color 0.2s linear}.navbar .navbar-logo{display:flex;align-items:center;font-size:30px;font-weight:500;letter-spacing:-1.5px;flex:2}.navbar .navbar-logo a{padding:20px 17px}.navbar .navbar-collapse{width:90%;margin:0 auto;display:flex;color:white}.navbar .logo{height:50px}.navbar .navbar-links{display:flex;justify-content:center;align-items:center}.navbar .navbar-links a{font-size:16px;font-weight:600;letter-spacing:-0.5px;transition:color 0.08s linear;padding:28px 17px;display:block;white-space:nowrap}.navbar .navbar-links a:hover{cursor:pointer;color:#2d46b9}.navbar .navbar-links .divider{margin:0px 17px;height:22px;width:1px;background-color:white}.navbar .navbar-links .dropdown-menu{z-index:2}.navbar .navbar-links .dropdown a{display:flex;align-items:center;justify-content:space-between}.navbar-logged-out{background-color:#00000088}.navbar-logged-out a:hover{color:#2bd968 !important}#wrapper{background:linear-gradient(217deg, rgba(255,0,0,0.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,0.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,0.8), rgba(0,0,255,0) 70.71%),linear-gradient(white, white);min-height:100vh;overflow:hidden}.main-content-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding-top:50px}.main-content-wrapper .main-content-intro{color:#fff;display:flex;flex-direction:column;align-items:center;gap:50px}.main-content-wrapper .main-content-intro h1{font-size:80px;font-weight:bold;letter-spacing:-5px}.main-content-wrapper .main-content-intro h2{font-size:25px;letter-spacing:-.4px;font-weight:300}.main-content-wrapper .main-content-intro .login{margin:15px;align-self:center;display:inline-block;padding:20px 60px;background-color:#27bb5a;border-radius:30px;text-transform:uppercase;font-size:14px;color:#fff;font-weight:bold;letter-spacing:1px;transition:background-color 0.5s ease}.main-content-wrapper .main-content-intro .login:hover{background-color:#2bd968;cursor:pointer}.main-content-wrapper .image-links{display:flex;justify-content:center;align-items:center;gap:1rem;padding:20px 0}.main-content-wrapper .image-links div{width:225px !important}.main-content-wrapper .image-links div .media__image{width:225px !important;height:225px !important}.main-content-wrapper .image-links .music-index-item:hover .media__body.index-page{opacity:0.75;transform:scale(1.01)}.main-content-wrapper .image-links .music-index-item:active .media__body.index-page{transform:scale(1)}.main-content-wrapper .image-links .music-index-item:active .media .media__image.index-page{transform:scale(0.98)}.main-content-wrapper .image-links .index-page{transition:0.3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}.main-content-wrapper .image-links .index-page .item-span{padding:5px;color:#fff}.main-content-wrapper .image-links .index-page .owner-span{color:#bbb;padding:5px}.navbar .navbar-links .dropdown i{margin-left:15px}.navbar .navbar-links .dropdown i .dropdown-menu{z-index:2}.navbar .navbar-links .dropdown i .dropdown a{display:flex;align-items:center;justify-content:space-between}.dropdown{position:relative}.dropdown-menu{display:none;top:80px;width:150px;padding:15px;color:black;background-color:#f9f9f9;box-shadow:0px 0px 15px rgba(0,0,0,0.3)}.dropdown-menu.clicked{display:block;position:absolute;border-radius:3px}.dropdown-menu a,.dropdown-menu .log-out{color:#000;padding:10px !important;font-weight:600}.dropdown-menu.clicked{display:block;position:absolute;border-radius:3px}.progress-bar-wrapper{width:100%;display:flex column;align-items:center}.played{height:4px;background-color:#bbb;position:absolute;left:0px;top:0px;z-index:2;border-radius:5px;transition:background-color .1s ease}.overlay-wrapper:hover .played{background-color:#27bb5a;transition:.1-s ease}.player-underlay{height:4px;background-color:#444;position:absolute;left:0px;top:0px;border-radius:5px;width:100%}.progress-bar-with-duration{display:flex;align-items:center;justify-content:center}.seek-slider{width:100%;background:transparent;margin:0 !important;padding:0 !important;position:relative;z-index:3;-webkit-appearance:none;height:3px;outline:0}.overlay-wrapper{width:100%;position:relative;margin:0px 10px}.seek-slider-wrapper{display:flex;justify-content:flex-start}input[type="range"]::-webkit-slider-thumb{transform:scale(0);-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:#eee;margin-top:1px;cursor:pointer;box-shadow:0px 0px 1px #555;transition:.15s ease}input[type="range"]:hover::-webkit-slider-thumb,input[type="range"]:active::-webkit-slider-thumb{transform:scale(1)}.play-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.play-bar .play-button{display:flex;align-items:center}.play-bar .progress-bar{display:flex;flex-direction:row;align-items:center;width:100%}.play-bar .progress-bar input{width:100%;margin:0px 10px}.search-container{padding:0;margin-top:0 !important}.main-search-bar{padding:0;margin:0 !important}.search-heading{font-size:13px;font-weight:normal;color:#fff;letter-spacing:.8px;padding-bottom:3px}.search-form-input{padding:30px;width:100%;background-color:#282828;display:flex;flex-direction:column;box-sizing:border-box}.search-input{width:100%}.search-input{background-color:transparent;font-size:50px;font-weight:bold;color:#fff;border:0;outline:0;caret-color:#27bb5a}.search-input::placeholder{color:#535353;font-weight:bold}.session-form-nav{display:flex;justify-content:center;padding:30px;border-bottom:1px solid #ddd}.session-form-nav img{height:75px}.session-form-main{width:40%;margin:0 auto;padding:30px;display:flex;flex-direction:column;align-items:center;font-family:Helvetica, Arial, sans-serif}.session-form-main .session-errors{display:flex;flex-direction:column;align-items:center;width:100%;font-size:10px;text-transform:uppercase;color:#bf3103;font-weight:bold}.session-form-main .session-errors li{margin-bottom:10px}.session-form-main form{padding:10px;display:flex;flex-direction:column;width:100%}.session-form-main input{margin-bottom:10px;font-size:14px;box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid #d9dadc;transition:border-color 0.3s ease}.session-form-main input::placeholder{color:#bbb;transition:color 0.3s ease}.session-form-main input:focus{box-shadow:none;text-shadow:none;border-color:#919496;outline:0}.session-form-main input:focus::placeholder{color:#ddd}.session-form-main input[type="submit"],.session-form-main .demo-user{margin:10px;align-self:center;background-color:#27bb5a;border-radius:20px;width:200px;text-transform:uppercase;font-size:11px;color:#fff;font-weight:bold;letter-spacing:1.5px;transition:background-color 0.5s ease;outline:0}.session-form-main input[type="submit"]:hover,.session-form-main .demo-user:hover{background-color:#2bd968;cursor:pointer}.session-form-main .demo-user{border:0;width:100%;padding:10px;font-size:12px;background-color:#3d5a96;outline:0}.session-form-main .demo-user:hover{background-color:#3e65b0}.session-form-main .divider{width:100%;text-align:center;border-top:1px solid #d9dadc;display:block;line-height:1px;margin:15px 0px}.session-form-main .divider strong{color:#000;background:#fff;padding:0px 20px;letter-spacing:1px;text-transform:uppercase;font-size:11px}.session-form-main h2{font-weight:500;font-size:15px;line-height:1.5;color:#222}.session-form-main a{color:#27bb5a}.session-form-main a:hover{color:#2bd968}.show-page-main{padding-top:15px;display:flex;width:100%}.show-page-main .show-info{display:flex;flex-direction:column;align-items:flex-end;flex:1;padding-left:50px;margin-right:50px}.show-page-main .show-info .media-wrapper{padding-left:0px;margin-left:auto;width:320px}.show-page-main .show-info .media-wrapper .media{width:320px;display:flex;flex-wrap:wrap}.show-page-main .show-info .media-wrapper .media__image{width:320px;height:320px}.show-page-main .show-info .media-wrapper .media__image.collage{width:160px;height:160px}.show-page-main .show-info .media-wrapper .music-index-item:hover{cursor:default}.show-page-main .show-info .media-wrapper p{font-size:28px;line-height:36px;letter-spacing:-.005em;font-weight:600}.show-page-main .song-index-item-wrapper{position:relative}.show-page-main .single-click-handler{padding:15px;left:12px;top:7px;position:absolute;z-index:5}.show-page-main .show-songs{flex:2;margin-left:30px;padding-right:120px}.show-page-main .show-songs.song-container{margin-left:0px;margin-right:20px;padding:20px}.show-page-main .show-songs ol .song-index-item-wrapper{padding:15px 15px 15px 40px;transition:.3s ease}.show-page-main .show-songs ol .song-index-item{list-style:decimal outside;position:relative;width:100%;height:100%}.show-page-main .show-songs ol .song-index-item span{color:#fff;margin-left:10px}.show-page-main .show-songs ol .song-index-item-wrapper:hover .song-index-item,.show-page-main .show-songs ol .playing .song-index-item{list-style:none}.show-page-main .show-songs ol .song-index-item-wrapper:hover .song-index-item:before,.show-page-main .show-songs ol .playing .song-index-item:before{content:'';position:absolute;left:-20px;background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/utility/play_large.png");background-size:13px;background-position:auto;width:13px;height:15px}.show-page-main .show-songs ol .playing .song-index-item:before,.show-page-main .show-songs ol .playing:hover .song-index-item:before{background-image:url("https://s3.us-east-2.amazonaws.com/bop-images/utility/pause_large.png")}.show-page-main .show-songs ol .song-index-item-wrapper:hover,.show-page-main .show-songs ol .playing{background:rgba(0,0,0,0.3)}.song-index-item-wrapper{display:flex}.song-index-item-wrapper .song-index-item{flex:6}.song-index-item-wrapper .song-dropdown-wrapper{flex:1;position:relative;display:flex;align-items:center;justify-content:center}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-handler{letter-spacing:2px;font-size:25px;padding:0;margin:0;border:0;line-height:0px;transform:scale(1);transition:.05s ease;color:#fff}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-handler:active{transform:scale(0.92)}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu{position:absolute;width:190px;padding:0;top:20px;right:50px;background:linear-gradient(#181818, #383838);z-index:1}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu .song-dropdown{padding-top:3px;padding-bottom:3px;border-radius:10px;width:100%;height:100%}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu .song-dropdown .dropdown-li{color:#bbb;font-size:14px;font-weight:400;padding:15px;box-sizing:border-box;width:100%;height:100%;transition:.1s ease}.song-index-item-wrapper .song-dropdown-wrapper .dropdown-menu .song-dropdown .dropdown-li:hover{background-color:rgba(50,50,50,0.8);color:#fff}.playlist-index-wrapper{display:flex;flex-direction:column;width:320px}.delete-button-wrapper{align-self:center;padding:15px}.delete-playlist-button{outline:0;padding:11px 18px;border-radius:20px;text-transform:uppercase;font-size:11px;color:#fff;letter-spacing:2px;transition:.05s ease;transform:scale(1);background:rgba(35,35,35,0.8);border:2px solid #bbb}.delete-playlist-button:hover{cursor:default;transform:scale(1.05);border-color:#eee}.top-nav-bar{width:100%;display:flex;justify-content:center;padding:30px 0px 15px 0px}.top-nav-bar .top-nav-link-wrapper{margin:20px;display:flex;flex-direction:column;align-items:center}.top-nav-bar .top-nav-link-wrapper a{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-family:'HelveticaNeue';color:#bbb;transition:.3s ease}.top-nav-bar .top-nav-link-wrapper a:hover{color:#fff}.top-nav-bar .top-nav-link-wrapper .nav-link-selected{color:#fff;position:relative}.top-nav-bar .top-nav-link-wrapper .nav-link-selected span:before{position:absolute;content:'';width:30px;height:1px;bottom:0;margin-bottom:-5px;left:calc(50% - 15px);border-bottom:2px solid #27bb5a}.nav-flex-wrapper{display:flex;justify-content:center;align-items:baseline}.nav-empty,.new-playlist{flex:1}.top-nav-bar{flex:2}.top-nav-link-wrapper span{white-space:nowrap}.sidebar{z-index:5}.content{background:linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 30%, black 90%);position:fixed;z-index:-1 !important;left:0;right:0;top:0;width:100vw;height:600px}.artwork{position:fixed;left:0;right:0;top:0;height:600px;width:100vw;object-fit:cover;object-position:top;z-index:-2 !important}.artist-show{background:linear-gradient(rgba(0,0,0,0.3) 0%, black 75%);background-repeat:no-repeat;background-position:top;background-size:cover;z-index:2;position:relative}.artist-artwork,.profile-picture{animation:fadein .3s linear}@keyframes fadein{0%{opacity:.2}100%{opacity:.7}}.profile-picture{animation:fadein-prof .3s linear}@keyframes fadein-prof{0%{opacity:.2}100%{opacity:1}}.user-artist-show-wrapper h1{color:#fff;text-align:center}.user-artist-show-wrapper .user-artist-intro{width:100%;padding-top:100px;text-align:center}.user-artist-show-wrapper .user-artist-intro.user-intro{padding-top:0}.user-artist-show-wrapper .user-artist-intro .artist-artwork{width:170px;height:170px;border-radius:50%;padding:5px;margin:5px;opacity:.7;object-fit:cover;border:2px solid #bbb}.user-artist-show-wrapper .user-artist-intro h1{font-size:60px}.user-artist-show-wrapper .user-artist-intro h2{padding-top:15px}.user-artist-show-wrapper .user-artist-intro .username{font-size:40px}.user-artist-show-wrapper .albums-singles-wrapper ul{margin-left:50px}.user-artist-show-wrapper .artist-songs-wrapper{background:rgba(0,0,0,0.3);padding:30px;margin-top:50px}.user-artist-show-wrapper .artist-songs-wrapper .artist-random-songs{width:75%;margin:0 auto}.user-artist-show-wrapper .artist-songs-wrapper .artist-random-songs h1{font-size:45px}.user-artist-show-wrapper .artist-albums,.user-artist-show-wrapper .artist-singles{display:flex column;justify-content:center;padding:30px 0px 30px 0px}.user-artist-show-wrapper .artist-albums h1,.user-artist-show-wrapper .artist-singles h1{font-size:35px;padding-bottom:30px}.user-artist-show-wrapper .artist-albums ul,.user-artist-show-wrapper .artist-singles ul{display:flex;flex-wrap:wrap}.user-show-wrapper{display:flex;flex-direction:column}.user-show-wrapper .user-show-music-index h1{font-size:25px;padding:15px}.user-show-wrapper .user-show-music-index .top-nav-bar{margin-top:-35px}.user-show-wrapper .user-intro{padding-bottom:0px}.user-show-wrapper .music-index-wrapper{display:flex;flex-direction:column;align-items:center}.user-show-wrapper .music-index-wrapper .username{font-size:30px}.profile-picture{width:225px;height:225px;border-radius:50%;padding:30px;object-fit:cover}.user-artist-intro button{margin:30px}.follow-button{border:0;outline:0;padding:11px 18px;background-color:#27bb5a;border-radius:20px;text-transform:uppercase;font-size:11px;color:#fff;letter-spacing:2px;transition:.05s ease;transform:scale(1)}.follow-button:hover{cursor:default;transform:scale(1.05);background-color:#2bd968}.follow-button:active{transform:scale(1)}