@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap);
.main-slider{height:300px;display:flex;align-items:center;padding:5%;color:white}.main-slider__subtitle{font-size:13px;display:block;font-weight:bold;text-transform:uppercase}.main-slider__title{display:block;font-size:40px}.main-slider__artist{display:block;font-size:20px}.main-slider__buttons{margin-top:50px}.main-slider__content{width:60%}@media (max-width: 900px){.main-slider__content{width:100%}}.btn{display:inline-block;padding:6px 20px;box-shadow:0px 1px 3px rgba(0,0,0,0.3);background-color:#fff;border-radius:3px;color:#005ba3;font-size:0.7rem;transition:.5s;cursor:pointer}.btn:hover{background-color:#cecece;transition:.5s}

.success{-webkit-animation:success 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:success 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;position:fixed;z-index:100;top:0%;left:calc(50% - 175px);background:rgba(0,0,0,0.75);color:white;width:350px;padding:25px;text-align:center}@-webkit-keyframes success{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(75px);transform:translateY(75px)}}@keyframes success{0%{-webkit-transform:translateY(0px);transform:translateY(0px)}100%{-webkit-transform:translateY(75px);transform:translateY(75px)}}

.music-item--rounded{display:inline-block;width:160px;padding-right:20px;width:160px;margin:0 10px;text-align:center}.music-item--rounded__image{width:160px;height:160px;border-radius:50%;box-shadow:0px 2px 3px rgba(0,0,0,0.5);transition:0.2s ease}:hover>.music-item--rounded__image{transition:0.2s ease;box-shadow:0px 5px 10px rgba(0,0,0,0.6);margin-top:-10px;filter:brightness(150%)}.music-item{display:inline-block;width:160px;padding-right:20px;width:160px;margin:0 10px;cursor:pointer;position:relative}.music-item__image{width:160px;height:160px;border-radius:5px;transition:0.2s ease}:hover>.music-item__image{transition:0.2s ease;box-shadow:0px 5px 10px rgba(0,0,0,0.6);margin-top:-10px;filter:brightness(150%)}.music-item__title{font-weight:500;font-size:17px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:10px;width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-item__subtitle{font-weight:400 !important;margin:10px;font-size:13px;font-weight:bold;color:grey}.music-item__btn-fav{position:abs;background:none;border:none;cursor:pointer;width:30px;height:30px;transition:all 0.3s ease;contain:'hola'}@media screen and (max-width: 700px){.music-item{display:inline-block;width:160px;padding-right:20px;margin:10px;cursor:pointer}.music-item__title{font-size:15px}}

.scroll-slider{padding:0 20px;box-sizing:border-box;margin-top:0;margin-bottom:20px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;width:100%;max-width:100%;height:300px;overflow:scroll;overflow-y:hidden;margin-bottom:110px}.scroll-slider__title{margin:0;width:500px;padding:20px 30px;display:block}@media screen and (max-width: 700px){.scroll-slider{box-shadow:1px #000;padding:20 0}}

table{width:100%}table th{text-align:left;padding:10px}table td{padding:10px}table tbody tr{font-size:14px;transition:0.2s;cursor:pointer}table tbody tr:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);border-radius:3px;transition:0.2s}.musictable{width:100%;height:100%;overflow:hidden;overflow-x:scroll;padding:20px}@media screen and (max-width: 700px){.musictable{padding:10px}.musictable{padding:20px}}.favoritesbutton{display:flex;justify-content:center;align-items:center;background-color:#737373;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer}.favoritesbutton img{width:20px}

.Modal{position:fixed;z-index:5;display:flex;width:100%;height:100vh;top:0;left:0;background:rgba(0,0,0,0.75);animation:show .2s ease;align-items:center;justify-content:center;color:white}.Modal__card{position:relative;min-width:400px;max-height:50vh;background:rgba(0,0,0,0.5);backdrop-filter:blur(5px);border-radius:4px;padding:25px}.Modal__card__content{overflow-y:auto;max-height:calc(50vh - 50px)}.Modal__card--image{position:absolute;width:15px;right:15px;top:15px;cursor:pointer}@keyframes show{0%{opacity:0}100%{opacity:1}}@media screen and (max-width: 700px){.Modal__card--image{right:20px}}

.container__header{border-bottom:1px solid #eee}.scroll{position:fixed;width:100%;top:0;left:0;height:70px;z-index:2;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.9);backdrop-filter:blur(5px);-webkit-box-shadow:0px 3px 6px -2px rgba(92,128,158,0.79);box-shadow:0px 3px 6px -2px rgba(92,128,158,0.79)}.logoscroll{padding-left:30px}.logoscroll img{width:70px}.navbar{height:70px;display:flex;justify-content:space-between;align-items:center;background:white}.navbar__search__inputsearch{display:flex;position:absolute;width:calc(100% - 190px);top:7px;left:190px;height:60px;width:calc(100% - 190px);background:#ebe7e3}@media screen and (max-width: 700px){.navbar__search__inputsearch{left:0;width:100%}}.navbar__search__inputsearch button{width:70px;height:100%}.navbar__search__inputsearch button img{width:30px}.navbar__search__inputsearch input{position:absolute;width:90%;background:none;height:100%;border:none;outline:none}.navbar__search__inputsearch input input[type='search' i]{box-sizing:border-box;padding:1px 2px}.navbar__search button{padding-left:10px;display:flex;justify-content:flex-start;align-items:center;background:none;border:none;color:#737373}.navbar__search button span{padding-left:10px}@media screen and (max-width: 700px){.navbar__search button span{display:none}}.navbar__mobile-button{display:none}.navbar__mobile-button button{background:none;border:none;padding-left:20px;cursor:pointer;outline:none}@media screen and (max-width: 700px){.navbar__mobile-button{display:block}}.profile{display:flex;align-items:center}.profile__container{display:flex;margin:0;padding-left:10px;margin-right:20px}.profile__container div{padding:1px 5px;border-radius:5px;cursor:pointer}.profile__container div a{color:white;font-size:16px;font-weight:400}.profile__container--fig{margin:0}.profile__container--image{width:50px;height:50px;border-radius:100px;border:solid 3px #0097db}.profile__menu{list-style:none;margin:0;padding:0}.profile__menu li{position:relative;float:left;margin:0;padding:0}.profile__menu li:hover{cursor:pointer}.profile__menu ul{display:none;position:absolute;background:rgba(0,0,0,0.75);color:white;top:100%;left:0;padding:0;font-size:20.8px;font-weight:400;z-index:1}.profile__menu ul li{float:none;width:90%}.profile__menu a{text-decoration:none;letter-spacing:1px;color:white}.profile__menu li:hover>ul{display:block;border-radius:5px}.profile__menu li:hover>ul li{padding:10px}.profile__menu li:hover>ul li:hover{background:rgba(255,255,255,0.2)}.active{display:flex}.inactive{display:none}.userinfo{position:fixed;top:80px;right:10px;flex-direction:column;align-items:center;justify-content:center;width:200px;height:150px;color:white;background:rgba(0,0,0,0.8);border-radius:7px;transition:1s}.userinfo__closeinfo{background:none;width:25px;height:25px;border:none;position:absolute;top:10px;right:10px;cursor:pointer;outline:none}@media screen and (max-width: 700px){.profile__container div a{font-size:14px}}.singbutton{margin-right:0}.singbutton a{color:white;font-size:10px;padding:5px 20px;background:#005ba3;border-radius:5px}.singbutton a:hover{border:1px solid #005ba3;color:#005ba3 !important;background:none;border-radius:5px;transition:0.5s}.loginbutton a{font-size:10px;border:1px solid #005ba3;padding:5px 20px;color:#005ba3 !important;background:none;border-radius:5px}.loginbutton a:hover{color:white !important;background:#005ba3;border-radius:5px;transition:5s}.activeEl{display:block}@media screen and (max-width: 700px){.activeEl{display:none}}.inactiveEl{display:none}

.container__menu{border-right:#eee;position:relative}.container__menu figure{margin-left:20px}.container__menu figure img{max-width:80px}.container__menu button{color:#737373;display:none}@media screen and (max-width: 700px){.container__menu button{display:block;position:absolute;width:25px;height:25px;right:15px;top:20px;background:none;border:none;outline:none;cursor:pointer}}a{text-decoration:none}.menu__list li{margin-bottom:10px}.menu__list li img{width:23px;height:23px;object-fit:contain}.menu__list li a{color:#737373}.menu__list li.active{border-left:3px solid #0097db;padding-left:18px}.menu__icon{margin-right:15px;margin-left:20px}.menu__subtitle{margin-left:20px}.new-playlist{cursor:pointer}.newPlaylist{display:flex;justify-content:space-between}form button{background-color:#005ba3;color:white;padding:12.5px 30px;border-radius:25px;text-transform:uppercase;font-weight:bold;font-size:13px;border:none;cursor:pointer}form .title{margin:0;margin-bottom:35px;text-align:center}form input{margin-bottom:20px;height:35px;padding-left:8px;font-size:16px;width:100%;color:black}form .content-wrap{margin:0px auto;max-width:250px;text-align:center}@media screen and (max-width: 700px){.container__menu button{right:20px}}

.layout{width:100%;height:100%;display:flex}.layout__menu{width:190px;border-right:1px solid #eee;z-index:1;background-color:white;left:-60%}@media screen and (max-width: 700px){.layout__menu{width:50%;height:100%;position:fixed;transition:0.5s}}.layout__mainsection{width:calc(100% - 190px);background:linear-gradient(180deg, rgba(244,249,255,0.0001) 0%, #f4f9ff 26.23%)}@media screen and (max-width: 700px){.layout__mainsection{width:100%}}@media screen and (max-width: 700px){.menuactive{left:0}}

.main{width:100%;height:100%;display:flex;justify-content:flex-start;flex-direction:column;background:linear-gradient(180deg, rgba(244,249,255,0.0001) 0%, #f4f9ff 26.23%)}.main__table{padding-left:30px;margin-bottom:12%}@media screen and (max-width: 700px){.main{width:100%;height:100%;display:flex;justify-content:flex-start;flex-direction:column;padding:10px}.main__table{padding-left:30px}}

.containers{overflow:hidden}.container-songs{overflow:auto;height:90vh;max-height:90vh;margin-right:-100px;padding-right:100px}.songs{background-color:white}

.center-item-full-screen{width:100%;height:calc(100vh - 70px);display:flex;justify-content:center;align-items:center;font-size:30px}.albums{background:linear-gradient(180deg, rgba(244,249,255,0.0001) 0%, #f4f9ff 26.23%)}.albums h2{padding-left:30px;margin-top:20px}.album{width:100%;display:flex;align-items:flex-start;justify-content:flex-start;padding:40px 20px;margin-bottom:12%}@media screen and (max-width: 700px){.album{flex-direction:column;padding:0px}}.album__image{margin-left:20px;position:relative}.album__image h2{position:absolute;bottom:10px;left:10px;color:white;font-weight:500;font-size:50px}.album__image__contentimg{overflow:hidden;height:600px;width:600px}.album__image__contentimg img{width:100%;height:100%;object-fit:cover}@media screen and (max-width: 700px){.album__image__contentimg{height:300px;width:100%}}.album__table{padding:0 30px;width:60%}.album__table p{width:100%}@media screen and (max-width: 700px){.album__table p{padding:0 20px}}.album__table h4{font-size:20px}@media screen and (max-width: 700px){.album__table h4{padding:0 20px}}.album__table h1{font-size:55px;line-height:60px}@media screen and (max-width: 700px){.album__table h1{padding:0 20px;font-size:30px}}@media screen and (max-width: 700px){.album__table{padding:0 0;width:100%}}

.artist-item{display:flex;overflow-x:scroll;margin:10px;padding:5px}.container{position:relative;width:900px;height:100vh;max-height:350px;margin-bottom:30px;border-radius:18px;margin-right:30px}.artist-item__imgen{background-color:rgba(6,12,21,0.9);filter:brightness(0.7);border-radius:18px}.artist-item__img{width:900px;max-height:350px;height:100vh;border-radius:18px}.artist-item__details{color:white;font-weight:bold;position:absolute;left:0;bottom:0;right:0;top:0;display:grid;grid-template-columns:15% 15% 15% 15% 40%;grid-template-rows:3fr 1fr 1fr;padding:20px}.artist-profile{display:grid;grid-column:1;grid-row:2 / span 3;justify-content:center;align-items:flex-end}.artist-profile__image{width:98px;border-radius:50px}.artist-name__album{display:grid;grid-column:2 / span 3;grid-row:2;justify-content:left;align-items:flex-end}.artist-name__album div{font-size:22px;padding:0}.artist-name__followers{display:grid;grid-column:2;grid-row:3;justify-content:left;align-items:center}.artist-name__songs{display:grid;grid-column:3;grid-row:3;justify-content:left;align-items:center}.container-artist-play__list{margin:0;padding:0;left:0;bottom:0;right:0;top:0;background-color:rgba(6,12,21,0.9);border-radius:10px;display:grid;grid-column:4 / span 5;grid-row:1 / span 3}.artist-play__list div{display:flex;color:white}@media screen and (max-width: 1200px){.artist-profile__image{grid-column:1 / span 2;grid-row:1;margin-top:5px;width:90px}.artist-item__details{padding:10px 40px}.container{width:700px}.artist-item__imgen{width:700px}.artist-item__img{width:700px}.artist-item__details{width:700px}}@media screen and (max-width: 700px){.artist-profile__image{grid-column:1 / span 2;grid-row:1;display:flex;align-items:flex-start;width:60px}.artist-item__details{grid-template-columns:30% 10% 10% 50%;grid-template-rows:3fr 1fr 1fr;padding:10px 20px}.artist-item__img{width:600px}.artist-name__album{grid-column:1 / span 2;grid-row:1}.artist-profile__image{grid-column:1 / span 2;grid-row:1;display:flex;align-items:flex-start}.artist-name__followers{grid-column:1 / span 2;grid-row:2}.artist-name__songs{grid-column:1 / span 2;grid-row:3}.artist-item__imgen{width:600px}.container-artist-play__list{margin-top:40px;grid-column:2 / span 4}.artist-item__details{width:620px}}@media screen and (max-width: 650px){.container{position:relative;width:900px;height:100vh;max-height:350px;margin-bottom:30px;border-radius:18px;margin-right:30px}.artist-profile__image{width:60px}.artist-name__album{grid-column:1 / span 2;grid-row:1}.artist-profile__image{grid-column:2 / span 3;grid-row:1;display:flex;align-items:flex-start}.artist-name__followers{grid-column:1 / span 2}.container-artist-play__list{grid-column:2 / span 4}table{padding:0}}

.hide-scroll{overflow:hidden}.viewport{overflow:scroll;max-height:300px;height:100%;width:100%}table{width:100%}table th{text-align:left;padding:10px}table td{padding:7px;font-size:14px}table tbody tr{font-size:14px}table tbody tr:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);border-radius:3px}@media screen and (max-width: 700px){table{padding:20px}table th{font-size:14px}table td{font-size:12px}table .viewport{padding:0}}@media screen and (max-width: 568px){table{padding:0px}table th{font-size:14px}table td{font-size:12px}table table td img{display:none;padding:0}table .viewport{padding:0}}@media screen and (min-width: 568px){.ArtistPlayList{padding:0}}

.filter-container__title{display:flex;justify-content:space-between;width:100%}.filter-container__title h1{font-size:20px;margin-top:1%;margin-bottom:1%}.filter-container__spacetime{display:flex;align-items:flex-end}.filter-container__spacetime div{font-size:16px;font-weight:bold;padding:1px 5px;margin:6px}.filter-container__spacetime div:hover{color:#005BA3}.filter-container__gender{display:flex;flex-wrap:wrap;width:100%}.filter-container__gender button{background-color:#f2f2f2;font-size:14px;font-weight:500;margin:1px 8px 5px;padding:2px 8px;border:1px solid #0091d5;border-radius:5px;color:#0091d5;cursor:pointer}.filter-container__gender button:hover{background-color:#005BA3;font-size:16px;color:white}

.container-Artist-hide-scroll{overflow:hidden;width:100%;margin-bottom:12%}.container-Artist-viewport{overflow:auto;height:100%;margin-right:-100px;padding-right:100px}.container-artist{height:100vh;display:flex;flex-direction:column}.ArtistPlayList{padding-left:30px;padding-top:20px}.FilterArtist{margin:30px;padding:30px;box-shadow:0px 0px 10px #0096db3d}@media screen and (max-width: 700px){.ArtistPlayList{width:95%}}

.loginpage{font-family:"Source Sans Pro",sans-serif;color:#f2f2f2;display:grid;grid-column:1 / 3;width:100%;min-height:100vh;background:linear-gradient(179.22deg, #0097db 10.23%, #102638 108.63%, rgba(0,91,163,0) 108.64%, #044d86 108.64%)}.loginpage__title{max-width:450px;font-size:35px;line-height:38px;padding-bottom:10px}.loginpage__secondary-title{max-width:450px;font-size:18px;font-weight:normal;padding-bottom:30px;line-height:20px}.loginpage__container{display:flex;align-items:center;justify-content:center}@media screen and (max-width: 700px){.loginpage__container{flex-direction:column;padding-left:30px}}.loginpage__form{color:#0f1e36;display:flex;justify-content:center;align-items:center;max-width:400px;flex-direction:column;background:#fff;border-radius:25px;padding:30px;box-shadow:0px 7px 5px -6px rgba(0,0,0,0.47)}.loginpage__form__titleform{color:#4a4a4a;font-size:19px;font-weight:600}.loginpage__form__secondary-titleform{color:#0097db;font-size:17px;font-weight:400;padding-bottom:20px}.loginpage__logo{padding-top:40px;margin:0}.loginpage__logo img{width:200px}.forminfo{position:relative;padding:10px 20px}.forminfo input{background:none;border:none;border-bottom:1px solid gray;padding-top:20px;padding-bottom:10px;width:100%;outline:none}.forminfo input::placeholder{font-size:18px;color:#545663}.forminfo input[type='date' i]{font-size:18px;font-family:"Source Sans Pro",sans-serif;color:#545663}.forminfo label{margin-top:20px;color:#545663}.forminfo button{background-color:#0097db;border:none;color:white;width:100%;padding:20px 30px;margin-top:10px;font-size:17px;letter-spacing:3px;border-radius:10px}.forminfo select{width:47%;padding:10px 0px;background-color:none;border:1px solid lightgrey;margin-top:10px;margin:3px}.forminfo__separator{padding-top:8px}.inscription{padding-top:20px;display:flex}.inscription button{display:flex;align-items:center;justify-content:center;padding:10px 20px;margin:10px;background-color:#fff;border-radius:5px;box-shadow:0px 4px 4px rgba(0,0,0,0.25);border:none;font-size:12px;width:165px;cursor:pointer}.user{position:relative;display:flex;align-items:flex-end}@media screen and (max-width: 700px){.user__image{display:none}}.cel img{width:100%}@media screen and (max-width: 700px){.cel{display:none}}.presentation{display:flex;justify-content:center;align-items:center;flex-direction:column}

.singup{font-family:"Source Sans Pro",sans-serif;color:#f2f2f2;display:grid;grid-column:1 / 3;width:100%;min-height:100vh;background:linear-gradient(179.22deg, #0097db 10.23%, #102638 108.63%, rgba(0,91,163,0) 108.64%, #044d86 108.64%)}.singup__title{max-width:450px;font-size:35px;line-height:38px;padding-bottom:10px}.singup__secondary-title{max-width:450px;font-size:18px;font-weight:normal;padding-bottom:30px;line-height:20px}.singup__container{display:flex;align-items:center;justify-content:center}@media screen and (max-width: 700px){.singup__container{flex-direction:column;justify-content:flex-start;padding-left:40px;padding-right:30px}}.singup__form{color:#0f1e36;display:flex;justify-content:center;align-items:center;max-width:400px;flex-direction:column;background:#fff;border-radius:25px;padding:30px;box-shadow:0px 7px 5px -6px rgba(0,0,0,0.47)}.singup__form__titleform{color:#4a4a4a;font-size:19px;font-weight:600}.singup__form__secondary-titleform{color:#0097db;font-size:17px;font-weight:400;padding-bottom:20px}.singup__logo{padding-top:40px;margin:0}.singup__logo img{width:200px}.forminfo{position:relative;padding:10px 20px}.forminfo input{background:none;border:none;border-bottom:1px solid gray;padding-top:20px;padding-bottom:10px;width:100%;outline:none}.forminfo input::placeholder{font-size:18px;color:#545663}.forminfo input[type='date' i]{font-size:18px;font-family:"Source Sans Pro",sans-serif;color:#545663}.forminfo label{margin-top:20px;color:#545663}.forminfo button,.forminfo .button{background-color:#0097db;border:none;color:white;width:100%;padding:20px 30px;margin-top:10px;font-size:17px;letter-spacing:3px;border-radius:10px}.forminfo select{width:47%;padding:10px 0px;background-color:none;border:1px solid lightgrey;margin-top:10px;margin:3px}.forminfo__separator{padding-top:8px}.inscription{padding-top:20px;display:flex}.inscription button{display:flex;align-items:center;justify-content:center;padding:10px 20px;margin:10px;background-color:#fff;border-radius:5px;box-shadow:0px 4px 4px rgba(0,0,0,0.25);border:none;font-size:12px;width:165px;cursor:pointer}.user{position:relative;display:flex;align-items:flex-end}@media screen and (max-width: 700px){.user__image{display:none}}.imagesingup img{width:100%}@media screen and (max-width: 700px){.imagesingup{display:none}}.presentationsingup{padding-right:20px;display:flex;justify-content:center;align-items:center;flex-direction:column}

.fullwidthbanner{display:flex;justify-content:center;width:100%;height:342px;background:linear-gradient(179.22deg, #0097db 10.23%, #102638 108.63%, rgba(0,91,163,0) 108.64%, #044d86 108.64%);overflow:hidden}.fullwidthbanner__container{flex-direction:column;display:flex;justify-content:center;align-items:center}.fullwidthbanner__container h1{color:white;font-size:30px}.fullwidthbanner__container img{width:200px}

.container-fluid{display:grid;grid-column:1 / 3;min-height:100vh}.container-flex{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.googlesingup{max-width:600px;padding-top:50px;padding-left:20px;padding-right:20px}.googlesingup__section h1{color:#4a4a4a;font-size:36px;line-height:40px}.googlesingup__register{display:flex}@media screen and (max-width: 700px){.googlesingup__register{flex-direction:column;align-items:center}}.googlesingup__photo{margin-top:10px;position:relative;width:90%;height:330px;border-radius:5px;box-shadow:0px 4px 4px rgba(0,0,0,0.25);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.googlesingup__photo__picture{margin-top:10px;border-radius:50%;background-color:#737373;width:133px;height:133px;display:flex;justify-content:center;align-items:center;border:4px solid white;box-shadow:0px 4px 4px rgba(0,0,0,0.25)}.googlesingup__photo__info{padding-top:30px;color:#4a4a4a}input[type='file']#uploadfile{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}label[for='uploadfile']{font-size:14px;font-weight:600;color:#fff;background-color:#0097db;display:inline-block;transition:all 0.5s;cursor:pointer;margin-top:10px;padding:10px 30px !important;text-transform:uppercase;width:fit-content;text-align:center}

.content_404{position:relative;text-align:center;color:black;display:flex;justify-content:center;flex-direction:column;height:90vh}.content_404-image h1{font-size:60px}.content_404-image{display:flex;justify-content:center;align-items:center;flex-direction:column;position:absolute;left:40%;right:40%;top:30%;bottom:40%}.content_404 h3{font-size:20px;margin-top:100px}

.App{height:100%;display:flex;flex-direction:column;background-color:#ebf1f5}.slider{margin:50px 50px 0}.header{display:flex;justify-content:center;align-items:center;border-bottom:2px solid lightgray}.charts{display:grid;grid-template-columns:275px 190px 180px 560px;grid-template-rows:200px 200px 410px;height:1000 px;background-color:white;margin:1% 3%;justify-content:space-around;border-radius:4px}.chart_1{display:grid;grid-column:1;grid-row:1}.chart_2{display:grid;grid-column:4;grid-row:1 / span 2}.chart_3{display:grid;grid-column:2 / span 2;grid-row:1 / span 2}.chart_4{display:grid;grid-column:1;grid-row:2}.chart_5{display:grid;grid-column:1 / span 3;grid-row:3}.chart_6{display:grid;grid-column:4 / span 1;grid-row:3}

.player{position:fixed;left:0;bottom:0px;width:100%;display:flex;z-index:2}@media (max-width: 700px){.player__song{flex-direction:column;width:160px}}.player__song{background:rgba(10,91,191,0.8);backdrop-filter:blur(5px);padding:20px 20px;display:flex;width:300px}.player__song__image{width:60px;height:60px;border-radius:5px;margin-right:20px}@media (max-width: 700px){.player__song__image{width:auto;margin-right:0px}}.player__song__container{width:50px;height:50px;overflow:hidden;display:flex;border-radius:5px;margin-right:40px}.player__song__content strong{color:white}.player__song__content p{margin:0px;color:white;line-height:16px}.player__song__content img{cursor:pointer}@media (max-width: 700px){.player__song__content{display:none}}@media (max-width: 700px){.player__song{justify-content:center;width:auto}}.player__controls{width:100%;align-items:center;justify-content:center;padding:10px 0;background:rgba(5,5,5,0.8);backdrop-filter:blur(5px)}.player__controls__buttons{display:flex;justify-content:center;align-items:center}.player__controls__buttons button{outline-style:none;text-align:center;display:flex;align-items:center;justify-content:center;padding:15px;background:none;border:none;border-radius:50%}.player__controls__buttons button img{width:20px}.player__controls__buttons button .play{display:flex;align-items:center;justify-content:center;border:solid 5px #0097db;background:#5aaed6;border-radius:50%;width:50px;height:50px}.player__controls__buttons button:hover{background-color:rgba(255,255,255,0.1);transition:0.4s}.player__controls__progress{display:flex;color:#737373;align-items:flex-end;justify-content:center}.player__controls__progress__bar:focus{outline:none}.player__controls__progress__bar{-webkit-appearance:none;width:70%;height:3px;border-radius:3px;margin:0 10px}.player__controls__progress__bar::-webkit-slider-runnable-track{height:3px;background:#f2f2f2;border:none;transition:0.2s}:hover>.player__controls__progress__bar::-webkit-slider-runnable-track{height:6px;transition:0.2s}:hover>.player__controls__progress__bar::-webkit-slider-thumb{margin-top:-5px}.player__controls__progress__bar::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:16px;width:16px;border-radius:50%;background:#f2f2f2;margin-top:-7px}.player__controls__progress__bar::-ms-fill-lower{background:#777;border-radius:10px}.player__volume{background:rgba(5,5,5,0.8);backdrop-filter:blur(5px);padding:20px 40px;display:flex;align-items:center;justify-content:space-between;height:100%}@media (max-width: 700px){.player__volume{display:none}}.player__container{display:flex;width:100%}@media screen and (max-width: 700px){.player__container{flex-direction:column}}

*{box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;font-size:16px}html,body{margin:0;padding:0;width:100%;background-color:transparent;font-family:"Source Sans Pro",sans-serif;line-height:1.5;color:#0f1e36;font-size:16px}h1,h2,h3,h4,h5,h6{margin:0;font-family:"Source Sans Pro",sans-serif;font-weight:bold;text-rendering:optimizelegibility}ul,ol{margin:0 0 1.5 0;padding:0 0 0 0;list-style-type:none}li ul,li ol{margin:0}a{text-decoration:none}@media screen and (max-width: 700px){h1,h2,h3,h4,h5,h6{padding-left:20px}}