@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;outline:0;padding:0}#root,body,html{min-height:100%}body{-webkit-font-smoothing:antialiased!important;background:#000 url(/static/media/background.22793138fe9b01270bc6.jpg);background-size:cover}body,button,input{font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px}.grid-container{grid-gap:1rem;align-items:center;display:grid;gap:1rem;margin:0 auto}.grid-container-second{grid-gap:.15rem;align-items:center;display:grid;gap:.15rem;grid-template-columns:repeat(2,1fr)}.grid{border:1px solid #ccc;margin:0 auto;max-width:400px}.grid-template-columns{grid-template-columns:200px 200px}.container{flex-direction:column;margin:0}.app-header,.container{align-items:center;display:flex;width:100%}.app-header{background:#000000e6;box-shadow:0 4px 6px #0000001a;color:#fff;justify-content:space-between;margin-bottom:20px;padding:15px 30px}.header-left,.header-right{align-items:center;display:flex;gap:15px}.app-logo{height:40px;width:auto}.app-header h1{font-family:Helvetica Neue,sans-serif;font-size:2rem;font-weight:700;letter-spacing:1px;margin:0}.btn-logout-header{background-color:initial;border:1px solid #fff;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;padding:8px 16px;transition:all .2s ease-in-out}.btn-logout-header:hover{background-color:#fff;color:#000}.language-switcher select{background-color:#000;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;padding:10px}.option{background-color:#fff;color:#000;font-size:1rem;padding:10px}.language-switcher select:focus{outline:none}.content{background:#fff;border-radius:4px;margin-top:50px;padding:30px;width:90%}.content>p{font-size:22px;line-height:30px;margin-bottom:30px}p.number-question{align-items:center;font-size:14px}.content form,p.number-question{display:flex;flex-direction:column}.content form label{color:#444;font-size:14px;font-weight:700;margin-bottom:8px}.content form input{border:1px solid #ddd;border-radius:2px;font-size:16px;height:45px;margin-bottom:20px;padding:0 15px}.content button.btn{height:42px;margin-bottom:10px;width:100%}.btn-login,.content button.btn{background:#000;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;margin-top:15px;padding:0 20px}.btn-login{align-items:center;appearance:button;display:flex;height:45px;justify-content:center;width:45%}li{list-style-type:none}.content button.btn-selected{background:#fff;border:3px solid #000;border-radius:5px;color:#000;cursor:pointer;font-size:16px;font-weight:700;height:42px;margin-bottom:10px;width:100%}.content button.btn:hover{background:#323232;color:#fff}.text{font:Black Roboto;letter-spacing:1.6px;margin-top:20px}i{border:solid #000;border-width:0 3px 3px 0;display:inline-block;height:15px;padding:5px;width:15px}.container-arrow{margin-bottom:15px}@media (max-width:1100px) and (min-width:601px){ul.grid-container{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(2,1fr)!important;justify-items:center}.music-card{margin:0 auto 18px;max-width:340px;min-width:220px;width:90%!important}}@media (max-width:900px){.container{max-width:100vw;padding:10px}.sub-subtitle-page-home,.subtitle-page-home,.title-page{font-size:1.2rem;text-align:center}.grid-container,.grid-container-second{align-items:stretch;display:flex;flex-direction:column;gap:12px}.btn-goto-home-white,.btn-recommendation,.btn-recommendation-50,.card-recommendation{font-size:1rem;padding:12px 0;width:100%}ul.grid-container{grid-template-columns:1fr!important;padding:0}.music-card{margin:0 auto 16px;min-width:0;min-width:auto;width:100%!important}.feedback-container{align-items:center;flex-direction:column;gap:10px}}@media (max-width:600px){.container{padding:4px}.sub-subtitle-page-home,.subtitle-page-home,.title-page{font-size:1rem}.music-card{font-size:.95rem;padding:8px}.btn-goto-home-white,.btn-recommendation,.btn-recommendation-50{font-size:.95rem;padding:10px 0}}@media (min-width:200px){.grid-container{grid-template-columns:repeat(1,1fr)}.btn-login,.container-width-50{width:100%}.grid-container-second{grid-template-columns:repeat(1,1fr)}}@media (min-width:350){.grid-container{grid-template-columns:repeat(1,1fr)}.btn-login,.container-width-50{width:100%}.grid-container-second{grid-template-columns:repeat(1,1fr)}}@media (min-width:400px){.grid-container{grid-template-columns:repeat(2,1fr)}.btn-login,.container-width-50{width:100%}.grid-container-second{grid-template-columns:repeat(2,1fr)}}@media (min-width:900px){.grid-container{grid-template-columns:repeat(3,1fr)}.container-width-50{width:50%}.btn-login{width:45%}.grid-container-second{grid-template-columns:repeat(2,1fr)}}@media (min-width:1355px){.grid-container{grid-template-columns:repeat(3,1fr)}.container-width-50{width:50%}.btn-login{width:35%}.grid-container-second{grid-template-columns:repeat(2,1fr)}}@media (min-width:1900px){.grid-container{grid-template-columns:repeat(3,1fr)}.container-width-50{width:50%}.btn-login{width:25%}.grid-container-second{grid-template-columns:repeat(2,1fr)}}@media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}.sidenav{background-color:#111;height:100%;left:0;overflow-x:hidden;padding-top:60px;position:fixed;top:0;transition:.5s;width:250px;z-index:1}.sidenav a{color:#818181;display:block;font-size:25px;padding:8px 8px 8px 32px;text-decoration:none;transition:.3s}.sidenav a:hover{color:#f1f1f1}.title-page{font:Roboto;font-size:20px;font-weight:700}.subtitle-page-home,.title-page{color:#000;opacity:1;text-align:left}.subtitle-page-home{font:Roboto;font-size:15px;font-weight:700;margin-bottom:10px;margin-top:10px}.sub-subtitle-page-home{color:#000;font:Roboto;font-size:15px;font-weight:400;margin-bottom:10px;opacity:1;text-align:center}.subtitle-page-error{color:red}.subtitle-page,.subtitle-page-error{font:Roboto;font-size:15px;font-weight:700;margin-top:20px;opacity:1;text-align:left}.subtitle-page{color:#000}.text{color:#000;font:Roboto;font-size:15px;justify-content:center;margin-top:10px;opacity:1;text-align:left}.description-detail-type{color:#449ae2;font:Black 16px/22px Avenir;letter-spacing:1.6px;margin-top:5px;opacity:1;text-align:left}.login{margin-top:15px}.music{border-radius:12px;margin-top:5px}.spotify-icon{margin-right:10px}.btn-recommendation{width:100%}.btn-recommendation,.btn-recommendation-50{background:#000;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;height:42px;margin:7px;padding:0 20px}.card-recommendation{width:100%}.card-recommendation,.card-recommendation-pd{background:#000;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;height:200px;margin:7px;padding:20px}.card-recommendation-pd{float:left}.content button.btn-recommendation:hover{background:#323232;color:#fff}.spinner{color:#000;margin-top:15px}.name-photo-container{margin-top:10px}.feedback-container{align-items:center;display:flex;justify-content:left;margin-bottom:10px}.photo{display:inline-block;height:40px;width:40px}.icon-like{height:45px;width:45px}.icon-like-music{height:25px;width:25px}.icon-star{cursor:pointer}.btn-like:hover,button:hover{background-color:#00000024}button:hover{cursor:pointer}.btn-like{background-color:initial;background-repeat:no-repeat;border:none;outline:none;overflow:hidden}.btn-like,.btn-liked{cursor:pointer;margin-left:10px;margin-right:10px;padding:15px}.btn-liked{background-color:#00000024}.btn-like-music{background-color:initial;background-repeat:no-repeat;border:none;outline:none}.btn-like-music,.btn-liked-music{cursor:pointer;margin-left:5px;margin-right:5px;padding:5px}.btn-liked-music{background-color:#00000024}.element-music-card{display:inline-block;height:50px;margin:15px;width:50px}.music-card-container{align-items:center;display:flex;justify-content:center}.btn-goto{margin-bottom:20px;margin-top:15px}.btn-goto,.btn-goto-home-white{background:#fff;border-radius:4px solid #000;color:#000;cursor:pointer;font-size:16px;font-weight:700;height:42px;padding:0 20px;width:100%}.btn-goto-home-white{margin-top:10px}.btn-goto-home-black{background:#000;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;height:42px;margin-bottom:5px;margin-top:5px;padding:0 20px;width:100%}.container-width{width:100%}.icon-remove-music{height:30px;width:30px}.container-arrow{align-items:center;cursor:pointer;display:flex;justify-content:left;width:fit-content}.left{margin-right:5px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.left,.text-back{display:inline-block}.text-back{color:#000;letter-spacing:1.6px;opacity:1;text-align:center}.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{background-color:#000;border-radius:6px;bottom:150%;color:#fff;left:50%;margin-left:-60px;padding:5px 0;position:absolute;text-align:center;visibility:hidden;width:60px;z-index:1}.tooltip .tooltiptext:after{border:5px solid #0000;border-top-color:#000;content:"";left:50%;margin-left:-5px;position:absolute;top:100%}.tooltip:hover .tooltiptext{visibility:visible}.text-about-my-song{color:#000;display:inline-block;font-size:16px;margin-top:15px;opacity:1;text-align:left}.photo-caique{border-radius:50%;display:inline-block;height:150px;width:150px}.name-photo-container{align-items:center;display:flex;justify-content:left;margin-bottom:10px;margin-top:30px}.social{display:inline-block;height:50px;margin:10px;width:50px}.social-container{align-items:center;display:flex;justify-content:center}.user-name{color:#000;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:20px;font-weight:700;margin-bottom:10px;margin-left:15px;text-align:left}.text-login{margin-bottom:10px}.text-email,.text-login{color:#000;display:inline-block;font-size:16px;opacity:1;text-align:center}.text-email{font-family:cursive;font-weight:bolder;margin:10px}.container-text{display:flex;flex-direction:column}