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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}@font-face{font-family:"Circular-Regular";src:url(/static/media/CircularStd-Book.ce173167.ttf) format("truetype")}@font-face{font-family:"Circular-Medium";src:url(/static/media/CircularStd-Medium.3fcb6535.ttf) format("truetype")}@font-face{font-family:"Circular-Bold";src:url(/static/media/CircularStd-Bold.70b1780a.ttf) format("truetype")}@font-face{font-family:"Circular-Black";src:url(/static/media/CircularStd-Black.c423aabf.ttf) format("truetype")}a{text-decoration:none}*{margin:0;padding:0}.container{padding:90px 50px;background-color:#191414;min-height:calc(100vh - 180px);display:block}@media screen and (max-width:600px){.container{padding:90px 30px}}@media screen and (max-width:485px){.container{padding:90px 20px}}@media screen and (max-width:375px){.container{padding:90px 7.5px}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;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}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.navbar{background-color:#191414;position:fixed;top:0;left:0;width:calc(100% - 100px);padding:10px 50px;z-index:1;display:flex;justify-content:space-between;align-items:center}.navbar-home{left:200px;width:calc(100% - 300px)}.navbar__logo,.navbar__side-menu{float:left;cursor:pointer}.navbar__side-menu{visibility:hidden}.navbar__profile{float:right;background-color:hsla(0,0%,100%,.1);padding:5px 15px;border-radius:20px;position:relative;cursor:pointer}.navbar__profile p{margin-bottom:0;font-family:"Circular-Medium";color:#fff;font-size:15px;margin-left:25px}@media screen and (max-width:950px){.navbar{left:0;width:calc(100% - 100px)}.navbar__side-menu{visibility:visible}}@media screen and (max-width:600px){.navbar{padding:10px 30px;width:calc(100% - 60px)}}@media screen and (max-width:485px){.navbar{padding:10px 20px;width:calc(100vw - 40px)}}.image{width:100%;height:100%;aspect-ratio:1/1}.playlist-card__album-image,.track-card__album-image{height:auto;width:100%;border-top-left-radius:10px;border-top-right-radius:10px}.image__display-none{display:none}.image__placeholder-container{background-color:#282828}.image__placeholder,.image__placeholder-container{border-top-left-radius:10px;border-top-right-radius:10px;width:100%;height:100%}.login-logo{width:50px;height:auto;margin-right:10px}.common__logo-img{width:25px;height:25px}.side-menu__logo{width:auto;height:20px}.play-button{width:14px;height:auto}.navbar__profile-img{height:135%;position:absolute;top:0;left:-5px;-webkit-clip-path:circle();clip-path:circle();margin-top:-5.5px}.no-network-modal__img,.success-modal__img{width:200px;height:auto;margin-bottom:20px}.playlist-info__img{width:200px;height:auto;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}p{font-family:"Circular-Regular";margin-bottom:5px;font-size:14px}.loading{font-family:"Circular-Bold";font-size:24px;color:#fff;margin-top:20px}.common__main-title{font-family:"Circular-Black";font-size:32px;color:#fff;margin-bottom:30px}.login-title{font-size:32px;color:#fff;margin:0}.card__title,.login-title{font-family:"Circular-Bold"}.card__title{font-size:16px}.card__album{margin:10px 0}.common__logo-text{font-family:"Circular-Bold";color:#fff;font-size:20px;line-height:30px;float:right;margin-left:10px;margin-bottom:0}.side-menu__text{font-family:"Circular-Medium";color:#fff;font-size:16px;line-height:20px;margin-left:13px;margin-bottom:0}.add-to-playlist__modal-title,.create-playlist-title{font-family:"Circular-Bold";color:#000;font-size:24px;margin-bottom:30px}.no-network-modal__title,.success-modal__title{font-family:"Circular-Bold";font-size:22px;margin-bottom:10px}.no-network-modal__description,.success-modal__description{font-family:"Circular-Regular";font-size:16px}.playlist-info__text-title{font-family:"Circular-Medium";font-size:14px;color:#fff;letter-spacing:5px}.playlist-info__text-name{font-family:"Circular-Bold";font-size:32px;color:#fff}.playlist-info__text-description{font-family:"Circular-Regular";font-size:16px;color:#fff;margin-top:14px}.track-row__song-title{font-family:"Circular-Medium";font-size:16px}.track-row__album{font-family:"Circular-Regular";font-size:16px}.have-no-track-info{font-size:16px;margin-top:15vh;text-align:center}.copyright-text,.have-no-track-info{font-family:"Circular-Medium";color:#fff}.copyright-text{font-size:12px}@media screen and (max-width:450px){.playlist-info__text-name{font-size:24px}.have-no-track-info{margin-top:10vh}}@media screen and (max-width:375px){.common__main-title{margin-left:12.5px;margin-right:12.5px;font-size:28px}}.button-primary{background-color:#1db954}.button-primary:hover{background-color:#15863d}.button-secondary{background-color:#f03700}.button-secondary:hover{background-color:#c92e00}.button-tertiary{color:#1db954!important;background-color:#fff!important}.button-tertiary:hover{color:#15863d!important;background-color:#ebebeb!important}.button-disable{background-color:#ccc;color:#fff}.login-container{text-align:center;width:100%;height:calc(100vh - 180px)}.login-container,.login-logo-container{display:flex;align-items:center;justify-content:center}.login-logo-container{margin-bottom:24px}.login-button-wrapper button{font-family:"Circular-Bold";color:#fff;font-size:16px;padding:5px 30px;border-radius:15px;border:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer}.track-card{width:auto;background-color:hsla(0,0%,50%,.1);padding:0;border-radius:10px;color:#fff;max-width:200px;display:flex;flex-direction:column;word-wrap:break-word;flex-basis:100%}.track-card:hover{background-color:hsla(0,0%,80%,.1)}.track-card__detail{padding:15px;flex-grow:1;display:flex;flex-direction:column}.track-card__text-wrapper{flex:auto;cursor:default}.track-card__image-wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;aspect-ratio:1/1;width:100%;position:relative}.track-card__button-wrapper{position:absolute;right:10px;bottom:10px;opacity:0;transition:opacity .3s}.track-card button{font-family:"Circular-Bold";color:#fff;font-size:14px;width:35px;height:35px;border-radius:50%;border:0;cursor:pointer;align-self:flex-end;flex:1 1;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;text-align:center}.track-card button:hover{transition:all .3s;width:36px;height:36px}.track-card:hover .track-card__button-wrapper{flex:auto;opacity:1}@media screen and (max-width:760px){.track-card{max-width:calc(32.6% - 12.5px)}}@media screen and (max-width:666px){.track-card{max-width:calc(32% - 12.5px)}}@media screen and (max-width:600px){.track-card{max-width:calc(50% - 12.5px)}}@media screen and (max-width:375px){.track-card{margin:12.5px;max-width:calc(50% - 25px)}.track-card__detail{padding:8px 15px}}.search-form__input{font-family:"Circular-Regular";font-size:16px;padding:7px 15px;border-radius:10px;margin-right:15px;width:80%;border:1px solid #ccc;box-sizing:border-box;-webkit-appearance:none}.search-form__input:focus{border:.5px solid #1db954;outline:none;box-shadow:0 0 5px 1px #1db954}@media screen and (max-width:450px){.search-form__input{min-width:0;width:55%}}.search-form{margin-bottom:30px;display:flex}.search-form input{border:1px solid #3e3e3e;box-sizing:border-box;background-color:#333;color:#fff;flex:3 1;max-width:925px}.search-form__button-container button{font-size:16px;height:100%;padding:5px 20px;color:#fff;font-family:"Circular-Bold";border:0;border-radius:10px;cursor:pointer;flex:1 1}@media screen and (max-width:450px){.search-form{width:100%}}@media screen and (max-width:375px){.search-form{margin-left:12.5px;margin-right:12.5px;width:calc(100% - 25px)}}.add-to-playlist__modal,.create-playlist__modal,.no-network-modal{position:fixed;z-index:5;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.8);display:flex;align-items:center}.add-to-playlist__modal-content,.create-playlist__modal-content,.no-network-modal__content{background-color:#fefefe;padding:24px;width:30%;margin:auto;border-radius:10px}@media screen and (max-width:870px){.add-to-playlist__modal-content,.create-playlist__modal-content,.no-network-modal__content{width:50%}}@media screen and (max-width:480px){.add-to-playlist__modal-content,.create-playlist__modal-content,.no-network-modal__content{width:70%}}@media screen and (max-width:380px){.add-to-playlist__modal-content,.create-playlist__modal-content,.no-network-modal__content{width:80%}}@media screen and (max-width:328px){.add-to-playlist__modal-content,.create-playlist__modal-content,.no-network-modal__content{padding:24px 15px}}.form__page{max-width:925px}.common__page-button-wrapper{display:flex;justify-content:flex-end;text-align:end}.common__page-button-wrapper button{margin-top:10px;font-family:"Circular-Bold";color:#fff;font-size:16px;padding:7px 30px;border-radius:15px;border:0;width:100%;max-width:120px;cursor:pointer}.add-to-playlist__form-button-wrapper,.common__modal-button-wrapper,.success-modal-button-wrapper{display:flex;justify-content:space-evenly;margin-top:30px}.left,.right{flex:1 1}.left{padding-right:10px}.right{padding-left:10px}.add-to-playlist__form-button-wrapper button,.common__modal-button-wrapper button,.success-modal-button-wrapper button{font-family:"Circular-Bold";color:#fff;font-size:16px;padding:5px 30px;border-radius:15px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;border:2px solid #1db954;box-sizing:border-box}.add-to-playlist__form-button-wrapper button,.common__modal-button-wrapper button{width:100%}.success-modal-button-wrapper button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.add-to-playlist__form-button-wrapper button:hover,.common__modal-button-wrapper button:hover,.success-modal-button-wrapper button:hover{border:2px solid #15863d}@media screen and (max-width:375px){.common__page-button-wrapper,.form__page{margin:0 12.5px}}.home{width:100%}.home__track-card__container{display:flex;flex-direction:row;flex-wrap:wrap;grid-gap:25px;gap:25px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.home__track-card{justify-content:center}@media screen and (max-width:375px){.home__track-card__container{grid-gap:0;gap:0}}.playlist-card__wrapper{width:auto;background-color:hsla(0,0%,50%,.1);padding:0;border-radius:10px;color:#fff;max-width:200px;display:flex;flex-direction:column;cursor:pointer;word-wrap:break-word}.playlist-card__wrapper:hover{background-color:hsla(0,0%,80%,.1)}.playlist-card__detail{padding:15px;flex-grow:1;display:flex;flex-direction:column}.playlist-card__image-wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:100%;position:relative;aspect-ratio:1/1}@media screen and (max-width:660px){.playlist-card__wrapper{max-width:none}}@media screen and (max-width:375px){.playlist-card__wrapper{margin:12.5px}}.my-playlist{width:100%}.my-playlist__track-card__container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,200px));grid-gap:25px}@media screen and (max-width:760px){.my-playlist__track-card__container{grid-template-columns:repeat(3,minmax(100px,1fr))}}@media screen and (max-width:600px){.my-playlist__track-card__container{grid-template-columns:repeat(2,minmax(100px,1fr))}}@media screen and (max-width:375px){.my-playlist__track-card__container{grid-gap:0}}.playlist-info{display:flex;align-items:center;margin-bottom:50px;flex-wrap:wrap;justify-content:flex-start}.playlist-info__text{margin-left:30px}@media screen and (max-width:792px){.playlist-info__text{flex:2 1}}@media screen and (max-width:575px){.playlist-info{flex-direction:column;margin-bottom:30px}.playlist-info__text{margin-top:40px;margin-left:0;width:100%}}@media screen and (max-width:375px){.playlist-info{padding-left:12.5px;padding-right:12.5px}}.playlist-tracks{border-collapse:collapse;width:100%;color:#fff}th{font-family:"Circular-Bold";letter-spacing:5px;font-size:14px;text-align:left}td,th{padding:10px 15px}td{font-family:"Circular-Regular";font-size:16px}tr{cursor:default}.track-row:hover{background-color:hsla(0,0%,80%,.1)}.track-row__title{display:flex;align-items:center}.track-row__text-wrapper{margin-left:20px}@media screen and (max-width:725px){.hide-in-mobile{display:none}}.add-to-playlist__form-input,.form-input__container{display:block;margin-bottom:15px}.add-to-playlist__form-input label,.form-input__container label{font-family:"Circular-Regular";font-size:16px}.add-to-playlist__form-input select,.form-input__container input,.form-input__container textarea{margin-top:5px;font-family:"Circular-Regular";font-size:16px;padding:5px 15px;border-radius:10px;margin-right:0;width:100%;border:1px solid #ccc;box-sizing:border-box;background-color:#fff}.add-to-playlist__form-input select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px 12px;-moz-appearance:none;appearance:none;-webkit-appearance:none}.add-to-playlist__form-input select:focus,.form-input__container input:focus,.form-input__container textarea:focus{border:1px solid #1db954;outline:none;box-shadow:0 0 5px 1px #1db954;-webkit-appearance:none}.form-input__container textarea{resize:none;height:100px}.form-input__page-container{display:block;margin-bottom:15px}.form-input__page-container label{font-family:"Circular-Medium";font-size:16px;color:#fff}.form-input__page-container input,.form-input__page-container select,.form-input__page-container textarea{margin-top:10px;font-family:"Circular-Regular";font-size:16px;padding:10px 15px;border-radius:10px;margin-right:0;width:100%;border:1px solid #3e3e3e;box-sizing:border-box;background-color:#333;color:#fff}.form-input__page-container input:focus,.form-input__page-container select:focus,.form-input__page-container textarea:focus{border:.5px solid #1db954;outline:none;box-shadow:0 0 5px 1px #1db954;-webkit-appearance:none}.form-input__page-container input{margin-bottom:6px}.form-input__page-container textarea{resize:none;height:100px;margin-bottom:3px}@media screen and (max-width:375px){.form-input__page-container{padding:0 12.5px}}.pages{width:calc(100% - 200px);margin-left:200px}@media screen and (max-width:950px){.pages{width:100%;margin-left:0}}.loader__container{position:fixed;z-index:5;background-color:#191414;opacity:.9;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;text-align:center;justify-content:center}.loader__roller{display:inline-block;position:relative;width:80px;height:80px}.loader__roller div{animation:loader__roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:40px 40px}.loader__roller div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;margin:-4px 0 0 -4px}.loader__roller div:first-child{animation-delay:-36ms}.loader__roller div:first-child:after{top:63px;left:63px}.loader__roller div:nth-child(2){animation-delay:-72ms}.loader__roller div:nth-child(2):after{top:68px;left:56px}.loader__roller div:nth-child(3){animation-delay:-.108s}.loader__roller div:nth-child(3):after{top:71px;left:48px}.loader__roller div:nth-child(4){animation-delay:-.144s}.loader__roller div:nth-child(4):after{top:72px;left:40px}.loader__roller div:nth-child(5){animation-delay:-.18s}.loader__roller div:nth-child(5):after{top:71px;left:32px}.loader__roller div:nth-child(6){animation-delay:-.216s}.loader__roller div:nth-child(6):after{top:68px;left:24px}.loader__roller div:nth-child(7){animation-delay:-.252s}.loader__roller div:nth-child(7):after{top:63px;left:17px}.loader__roller div:nth-child(8){animation-delay:-.288s}.loader__roller div:nth-child(8):after{top:56px;left:12px}@keyframes loader__roller{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.side-menu{display:flex;align-items:center;margin:10px;padding:15px 20px;border-radius:50px;cursor:pointer}.active,.side-menu:hover{background-color:#282828}.sidebar{position:fixed;top:0;left:0;height:100vh;width:200px;background-color:#000;z-index:3;transition:all .3s}.sidebar__logo{display:flex;align-items:center;cursor:pointer;padding:10px 25px}.sidebar__menu-wrapper{margin-top:50px;display:grid;grid-template-columns:auto}.sidebar__copyright{position:absolute;width:200px;left:0;bottom:15px;text-align:center}@media screen and (max-width:950px){.sidebar{left:-200px}.open{left:0}.sidebar__close{position:fixed;z-index:2;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.8);display:flex;align-items:center}}
/*# sourceMappingURL=main.641d053e.chunk.css.map */