html, body{
    width: 99%;
    height: 97%;
}
html{
    box-sizing: border-box;
}

button{
    border: none;
    border-radius: 3%
}
.listado{
    height: 88%;
    display: flex;
    overflow: auto;
}

.flex-container{
   display:flex;
   flex-wrap: nowrap;
   width: 100%;
   height: 100%; 
   align-items: stretch;
}

/* ENTRY */
#logoBP{
    height: 40%;
    width: 100%;
}
img{
    width: 100%;
    height: 100%;
}
#botonCreditos{
    height: 20%;
    width: 100%;
}
#creditosAgustin{
    color:#41B0A5 ;
    font-size: 1.5vw;
    /* font-weight: bold; */
}
#creditosHelene{
    color: #D9007E;
    font-size: 1.5vw;
    /* font-weight: bold; */
}

.bottomRowEntry {
    display:flex;
   flex-wrap: nowrap;
   width: 100%;
   height: 40%; 
   align-items: stretch; 
}

#login {
  background-color: #41B0A5;
  height: 90%;
  width: 60%;
  margin: 10px auto;
  color: white;
  font-size: 4vw;
  border-radius: 50%; /* add this to make the button an ellipse */
  padding: 10px; /* add some padding to make the text centered */
  text-align: center; /* center the text horizontally */
  line-height: 1.5; /* adjust the line height to center the text vertically */
}

/* #login{
    background-color: #41B0A5; */
    /* height: 40%; */
    /* height: 100%; */
    /* width: 50%; */
    /* width: 80%;
    margin: 10px auto; added margin */
    /* color: white;
    font-size: 4vw;
} */
#login:hover{
    color: black;
}
/* #botonExit{
    background-color: #D9007E;
    height: 100%;
    width: 49.5%;
    color: white;
    font-size: 4vw;
}
#botonExit:hover{
    color: black;
} */
/* ACERCA DE */
.flex-containerACERCADE{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%; 
    align-items: stretch;
 }
#botonVersion{
    height: 12.5%;
    width: 100%;
    background-color: #B0E5FF;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonBaseDeDatos{
    height: 11%;
    width: 100%;
    background-color: #117585;
    color: white;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonMusicasElencos{
    background-color: #8DE68A;
    height: 12.5%;
    width: 100%;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonNuevasMusicas{
    background-color: #8DE68A;
    height: 12.5%;
    width: 100%;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonTotalMusicas{
    background-color: #8DE68A;
    height: 12.5%;
    width: 100%;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonEjerciciosElencos{
    background-color: #41B0A5;
    height: 12.5%;
    width: 100%;
    color: white;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonNuevosEjercicios{
    background-color: #41B0A5;
    height: 12.5%;
    width: 100%;
    color: white;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonTotalEjercicios{
    background-color: #41B0A5;
    height: 12.5%;
    width: 100%;
    color: white;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonAtrasAcercaDe{
    background-color: #D9007E;
    height: 12.5%;
    width: 100%;
    color: white;
    font-size: 2.5vw;
    font-weight: bold;
}
#botonAtrasAcercaDe:hover{
    color: black;
}
/*MAIN*/
.flex-containerMAIN{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%; 
    align-items: stretch;
 }
 
 #botonGrande{
     background-color: #8de68a;
     height: 50%;
     width: 100%;
     color: white;
     font-size: 4.5vw;
     border-color: black;
     border-style:solid;
     border-width:thin;
 }
 #botonGrande:hover{
     color: black;
 }
 #exportDB{
     background-color:deeppink;
     height: 100%;
     width: 17%;
     color: white;
     font-size: 2.5vw;
 }
 #exportDB:hover{
     color: black;
 }

 input[type="file"] {
    display: none;
} 
#fileInput:hover{
    color: red;
}
.custom-file-upload{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 5%; */
  }
.custom-file-upload label{
    cursor: pointer;
    width: 16%;
    height: 93%;
    padding: 0.8%;
    background-color:dodgerblue;
    color: white;
    font-family: sans-serif;
    /* font-size: 1.5rem; */
    font-size: 2.0vw;
    text-align: center;
    border-color: black;
    border-style:solid;
    border-width:thin;
} 
.custom-file-upload label:hover{
    color: black;
}
 #botonAnadirMusica{
    background-color: #b0e5ff;
    height: 100%;
    width: 16%;
    color: black;
    /* font-size: 1.5rem; */
    font-size: 2.5vw;
    border-color: black;
     border-style:solid;
     border-width:thin;
}
#botonAnadirMusica:hover{
    color: red;
}
 #botonAnadirEjercicio{
     background-color: #41B0A5;
     height: 100%;
     width: 16.5%;
     color: white;
     /* font-size: 1.5rem; */
     font-size: 2.5vw;
     border-color: black;
     border-style:solid;
     border-width:thin;
 }
 #botonAnadirEjercicio:hover{
     color: black;
 }
 #botonAcercaDe{
     background-color: #117585;
     height: 100%;
     width: 16%;
     color: white;
     /* font-size: 1.5rem; */
     font-size: 2.5vw;
     border-color: black;
     border-style:solid;
     border-width:thin;
 }
 #botonAcercaDe:hover{
     color: black;
 }
 #botonSalir{
     background-color: #D9007E;
     height: 100%;
     width: 17%;
     color: white;
     /* font-size: 1.5rem; */
     font-size: 2.5vw;
     border-color: black;
     border-style:solid;
     border-width:thin;
 }
 #botonSalir:hover{
     color: black;
 }
 
    /*BUSCADOR*/
.buscador{
    /* display: flex;
    flex-wrap: nowrap;
    justify-content: space-around; */
    width: 100%;
    height:9%; 
    background-color:#8de68a;
}
#textoBuscador{
    width: 35%;
    height: 80%;
    /* font-size: 1.5rem; */
    font-size: 2vw;
    margin-right: 5%;
    background-color: #eee;
    border: 0;
}
#textoLabel{
    font-family: sans-serif;
    font-size: 2.5vw;
    /* font-size: 1.8rem; */
}
#musica{
    width: 12%;
    height: 100%;
    /* background-image: url("../BPWRESOURCES/images/playAchatada1.png"); */
    /* background-size: 100%; */
    background-color:deeppink;
    color: white;
    font-size: 2.0vw;
    margin-right: 2%;
}
#musica:hover{
    color: black;
}
#ejercicio{
    width: 12%;
    height: 100%;
    /* background-image: url("../BPWRESOURCES/images/playAchatada1.png"); */
    background-color:darkorange;
    color: white;
    font-size: 2.0vw;
    margin-right: 1%;
 }
 #ejercicio:hover{
    color: black;
}
#gruposEjerc{
    width: 18%;
    height: 100%;
    /* background-image: url("../BPWRESOURCES/images/playAchatada.png"); */
    background-color: indigo;
    color: white;
    /* font-size: 1.2rem; */
    font-size: 1.8vw;
    /* flex-shrink: 3; */
}
#gruposEjerc:hover{
    color: red;
}

/*CENTRO LISTADO DE GRUPOS*/
.centroLISTADODEGRUPOS{
    height: 70%; 
    width: 100%;
}
.centroLISTADODEGRUPOS botones {
    height: 12%;
}
#creargrupo{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#creargrupo:hover{
    color: red;
}
#listadodegrupos{
    height: 100%;
    width: 52%;
    /* font-size: 1.8vw; */
    font-size: 2.2vw;
    /* font-size: 1.3rem; */
    font-weight: bold;
}
#cambiarnombregrupo{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#cambiarnombregrupo:hover{
    color: black;
}
#eliminargrupo{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#eliminargrupo:hover{
    color: black;
}
.centroLISTADODEGRUPOS .listado{
    height: 88%;
    background-color: #B0E5FF;
}
#listadegrupos li{
    display: flex;
    align-items:center;
    font-family: sans-serif;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.8vw;
    height: 12%;
    padding-top: 3%;
    /* list-style-type: none; Remove bullets */
}
.listado #listadegrupos li:hover{
    color: red;
}
.listado #listadegrupos li:nth-child(odd){
    background-color:#B0E5EE;
}

/*CENTRO LISTADO DE CLASES*/
.centroLISTADODECLASES{
    height: 70%; 
    width: 100%;
}
.centroLISTADODECLASES botones {
    height: 12%;
}

#crearclase{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#crearclase:hover{
    color: red;
}
#listadodeclases{
    height: 100%;
    width: 52%;
    /* font-size: 1.3rem; */
    font-size: 2.2vw;
    font-weight: bold;
}
#cambiarnombreclase{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#cambiarnombreclase:hover{
    color: black;
}
#eliminarclase{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#eliminarclase:hover{
    color: black;
}

.centroLISTADODECLASES .listado{
    height: 88%;
    background-color: #B0E5FF;
}
#listadeclases li{
    display: flex;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.8vw;
    height: 12%;
    padding-top: 3%;
}
.listado #listadeclases li:hover{
    color: red;
}
.listado #listadeclases li:nth-child(odd){
    background-color:#B0E5EE;
}

/* CENTRO GRUPOS DE EJERCICIOS */
.botonesGruposEjercicios{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction:column;
}  
 .botonesGruposEjercicios div{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 25%;
} 
.botonesGruposEjercicios button{
    width: 25%;
    height: 100%;
    /* font-size: 1.5rem; */
    font-size: 2.0vw;
    font-weight: bold;
} 
.botonesGruposEjercicios button:hover{
    color: red;
}
/*CENTRO LISTADO DE EJERCICIOS*/
.centroLISTADODEEJERCICIOS{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#listadodeejercicios{
    height: 100%;
    width: 73%;
    /* font-size: 1.3rem; */
    font-size: 2.2vw;
    font-weight: bold;
}
.centroLISTADODEEJERCICIOS .listado{
    height: 88%;
    background-color: #B0E5FF;
}
#listadeejercicios li{
    display: flex;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.8vw;
    height: 12%;
}
.listado #listadeejercicios li:hover{
    color: red;
}
.listado #listadeejercicios li:nth-child(odd){
    background-color:#B0E5EE;
}

/*CENTRO VER VIDEO*/
.centroVERVIDEO{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#videonombre{
    height: 100%;
    width: 73%;
    font-size: 1.7vw;
    /* font-size: 1.3rem; */
    font-weight: bold;
}
.centroVERVIDEO .listado{
    height: 88%;
    background-color: #B0E5FF;
}
.listado video{
    width: 100%;
    overflow: auto;
    list-style-type: none;
    padding-left:  10%;
    border: 1% solid #ddd;
}

/*CENTRO VER DESCRIPCION*/
.centroVERDESCRIPCION{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#descripcionnombre{
    height: 100%;
    width: 100%;
    /* font-size: 1.3rem; */
    font-size: 1.7vw;
    font-weight: bold;
}
.centroVERDESCRIPCION .listado{
    height: 88%;
    background-color: #B0E5FF;
}
.listado p{
    width: 100%;
    overflow: auto;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    font-family: sans-serif;
    list-style-type: none;
    padding-left:  10%;
    border: 1% solid #ddd;
}
/*CENTRO NUEVAS MUSICAS*/
.centroNUEVASMUSICAS{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%; 
    align-items: stretch;
    background-color: #B0E5FF;
}
  
  .container {
    /* max-width: 1280px; */
    width: 95%;
    /* min-height: calc(100vh - 90px); */
    /* min-height: calc(100vh - 10%); */
    height: 100%;
    margin: auto;
    /* padding: 20px 0; */
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    /* gap: 20px; */
    gap: 5%;
  }
  
  .music-player {
    /* width: 350px; */
    width: 40%;
    /* height: 350px; */
    height: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .coverplayer {
    /* width: 350px; */
    width: 40%;
    /* height: 350px; */
    height: 40%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  
  .metadata {
    width: 100%;
    height: 50%;
    margin: auto;
    display: flex;
    /* border-radius: 5px; */
    border-radius: 1%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* gap: 10px; */
    gap: 3%;
    /* padding: 5px; */
    padding: 2%;
    /* border: 1px solid lightgray; */
  }
  
  .controller {
    justify-content:right;
    width: 100%;
    height: 5%;
    /* height: auto; */
    /* margin-top: 10px;
    margin-bottom: 5px; */
    /* margin: 3%; */
    /* margin-top: 5%; */
  }
  #audio{
    height: 80%;
    width: 50%;
  }
  .upload{
    width: 100%;
    /* height: 70%; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
  }
  
  .upload label {
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    /* height: 80%; */
    /* padding: 10px;
    border: 1px solid lightgray; */
    padding: 2%;
    background-color:dodgerblue;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
  }
  
  /* .upload #upload {
    opacity: 0;
    position: absolute;
    z-index: -1;
  } */
  #title, #artist, #album, #genre{
    width: 100%;
    height: 35%;
    font-weight: bold;
    font-size: 1.5vw;
  }
  #titulolabel, #artistalabel, #albumlabel, #generolabel{
    /* width: 100%;
    height: 35%; */
    font-weight: bold;
    /* font-size: 1.5vw; */
  }
  #importarCancion {
    width: 30%;
    height: 80%;
    background-color: #41B0A5;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
    color: white;
    margin-left: 10%;
  }
  #siguienteCancion {
    width: 30%;
    height: 80%;
    background-color: brown;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
    color: white;
    margin-left: 10%;
  }
  #salirNuevasMusicas {
    width: 30%;
    height: 80%;
    background-color:#D9007E;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
    color: white;
    margin-left: 10%;
  }
  #cover {
    /* width: 300px; */
    width: 40%;
    /* height: 300px; */
    height: 70%;
    border-radius: 1%;
    background-size: cover;
    background-position: center;
    background-image: url('music.jpg');
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  }

/*CENTRO NUEVO EJERCICIO*/
.centroNUEVOEJERCICIO{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%; 
    align-items: stretch;
}

#nombreNuevoEjercicio {
    height: 12%;
    width: 67%;
    font-size: 1.8vw;
    font-weight: bold;
}
#guardarNuevoEjercicio {
    height: 12%;
    width: 15%;
    /* font-size: 1.4rem; */
    font-size: 1.8vw;
    font-weight: bold;
    background-color: #B0E5FF;
}
#guardarNuevoEjercicio:hover{
    color: red;
}
#salirNuevoEjercicio {
    height: 12%;
    width: 15%;
    /* font-size: 1.4rem; */
    font-size: 1.8vw;
    font-weight: bold;
    background-color: #D9007E;
    color: white;
}
#salirNuevoEjercicio:hover{
    color: black;
}
#descripcionNuevoEjercicio{
    height: 100%;
    width: 73%;
    /* font-size: 1.3rem; */
    font-size: 1.7vw;
    font-weight: bold;
}
.centroNUEVOEJERCICIO .listado{
    height: 80%;
    background-color: #B0E5FF;
}
.listado #descripcionNuevoEjercicio{
    background-color: #B0E5FF;
    width: 100%;
    overflow:scroll;
    /* font-size: 1.2rem; */
    font-size: 1.6vw;
    font-family: sans-serif;
    list-style-type: none;
    padding:  5%;
    padding-top: 1%;
    border: 1% solid #ddd;
}

/*CENTRO EXPORTAR*/
.centroEXPORTAR{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#exportarnombre{
    height: 100%;
    width: 100%;
    /* font-size: 1.3rem; */
    font-size: 1.7vw;
    font-weight: bold;
}
.centroEXPORTAR .listado{
    height: 88%;
    background-color: #B0E5FF;
}
.listado p{
    width: 100%;
    overflow: auto;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    font-family: sans-serif;
    /* list-style-type: none;
    padding-left:  10%; */
    border: 1% solid #ddd;
}
/*CENTRO CREAR NOTA*/
.centroCREARNOTA{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#crearnotanombre{
    height: 100%;
    width: 73%;
    /* font-size: 1.3rem; */
    font-size: 1.7vw;
    font-weight: bold;
}
#guardarnota{
    height: 100%;
    width: 25%;
    font-size: 1.7vw;
    /* font-size: 1.3rem; */
    font-weight: bold;
}
.centroCREARNOTA .listado{
    height: 88%;
    background-color: #B0E5FF;
}
.listado #note{
    background-color: #B0E5FF;
    width: 100%;
    overflow:scroll;
    /* font-size: 1.2rem; */
    font-size: 1.6vw;
    font-family: sans-serif;
    list-style-type: none;
    padding:  5%;
    padding-top: 1%;
    border: 1% solid #ddd;
}
#note :hover{
    color: black;
}
/*CENTRO LISTADO DE EJERCICIOSPORCLASE*/
.centroLISTADODEEJERCICIOSPORCLASE{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#listadodeejerciciosporclase{
    height: 100%;
    /* width: 73%; */
    /* width: 67%; */
    width: 50%;
    /* font-size: 1.3rem; */
    /* font-size: 2.2vw; */
    font-size: 2.0vw;
    font-weight: bold;
}
#duracionclase{
    width: 10%;
    height: 90%;
    color: black;
    /* font-size: 1.3rem; */
    font-size: 1.8vw;
    font-weight: bold;
}
#nota{
    width: 10%;
    height: 90%;
    color: black;
    /* font-size: 1.3rem; */
    font-size: 1.5vw;
    font-weight: bold;
}
#nota:hover{
    color: red;
}
#exportar{
    height: 90%;
    width: 10%;
    color:darkorange;
    font-size: 1.5vw;
    font-weight: bold;
    margin-right: 2%;
}
#exportar:hover{
    color: red;
}
#descargar{
    height: 90%;
    width: 10%;
    color: red;
    font-size: 1.5vw;
    font-weight: bold;
    font-style: italic;
}
#descargar:hover{
    color: black;
}
.centroLISTADODEEJERCICIOSPORCLASE .listado {
    /* display: flex; */
    /* align-items: stretch; */
    /* flex-direction:row; */
    height: 88%;
    background-color: #B0E5FF;
}
.uno, .dos, .tres, .cuatro{
    display: inline-block;
    /* width: 25%; */
    margin-left: 3px;
    /* overflow:hidden; */
}
.uno{
    width: 30%;
}
.dos{
    width: 40%;
}
.tres, .cuatro{
    width: 15%;
}
.centroLISTADODEEJERCICIOSPORCLASE .listado ul {
    list-style-type: none;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.3vw;
    height: 12%;
    padding-left: 10px;
    width: 100%;
  }
#listadeejerciciosporclase li{
    width: 100%;
}
#listademusicasporclase li{
    width: 100%;
}
#listademusicas2porclase li{
    width: 100%;
}
#listademusicas3porclase li{
    width: 100%;
}
.listado #listadeejerciciosporclase li:hover{
    color: red;
    cursor: pointer;
}

.listado #listademusicasporclase li:hover{
    color: red;
    cursor: pointer;
}
.listado #listademusicas2porclase li:hover{
    color: red;
    cursor: pointer;
}
.listado #listademusicas3porclase li:hover{
    color: red;
    cursor: pointer;
}
.listado #listadeejerciciosporclase li:nth-child(odd){
    background-color:#B0E5EE;
}

/*CENTRO DISPLAY EJERCICIO*/
.centroDISPLAYEJERCICIO{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction:column;
}  
#nombredelejercicio{
    height: 10%;
    width: 100%;
    font-size: 1.8vw;
    font-weight: bold;
    overflow: auto;
    display: inline-block;
    white-space: nowrap;
    transition-timing-function: linear;
}
 .centroDISPLAYEJERCICIO div{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 22.45%;
    background-color: lightcyan;
} 
.centroDISPLAYEJERCICIO button{
    /* width: 25%; */
    height: 100%;
    /* font-size: 1.5rem; */
    font-size: 1.8vw;
    font-weight: bold;
} 
.centroDISPLAYEJERCICIO button:hover{
   color: red;
} 
#verdescripcion{
    width: 50%;
}
#matices{
    width: 25%;
}
#vervideo{
    width: 25%;
}
#musicacimeb{
    width: 50%;
}
#musicalibre{
    width: 50%;
}
#musica1, #musica2, #musica3{
    width: 33%;
    overflow: auto;
}
#arriba{
    width: 25%;
    background-color: lightcyan;
}
#abajo{
    width: 25%;
}
#borrar{
    width: 25%;
    color: white;
}
#guardar{
    width: 25%;
    color: white;
}
/*CENTRO DISPLAY MUSICA*/
.centroDISPLAYMUSICA{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction:column;
}  
 .centroDISPLAYMUSICA div{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 16.5%;
    background-color:lightcyan;
} 
.centroDISPLAYMUSICA button{
    /* width: 25%; */
    height: 100%;
    font-size: 1.7vw;
    font-weight: bold;
    /* font-size: 1.5rem; */
    text-align: left;
    overflow: auto;
} 
.labels{
    width: 15%;
}
#texttitulo, #textalbum, #textgenero, #texttagpersonal{
    width: 70%;
}
#textfichero{
    width: 85%;
}
#vercambiartitulo, #vercambiaralbum, #vercambiargenero, #vercambiartagpersonal,
     #preplay, #erase{
    width: 15%;
    color: white;
    text-align: center;
}
#erase, #savemusic1, #savemusic2, #savemusic3, #preplay{
    width: 20%;
    text-align: center;
}
#savemusic1:hover, #savemusic2:hover, #savemusic3:hover{
    color: red;
}
/*CENTRO LISTADO DE MUSICA*/
.centroLISTADODEMUSICA{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#listadodemusica{
    height: 100%;
    width: 73%;
    /* font-size: 1.3rem; */
    font-size: 2.2vw;
    font-weight: bold;
}
#ordalfabetico{
    height: 100%;
    color: white;
    font-size: 1.5vw;
}
#ordalfabetico:hover{
    color: black;
}
.centroLISTADODEMUSICA .listado{
    height: 88%;
    background-color: #B0E5FF;
}
#listademusica li{
    display: flex;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.8vw;
    /* font-size: 1.1rem; */
    height: 12%;
}
.listado #listademusica li:hover{
    color: red;
}
.listado #listademusica li:nth-child(odd){
    background-color:#B0E5EE;
}
/*CENTRO LISTADO DE MUSICA CIMEB*/
.centroLISTADODEMUSICACIMEB{
    /* display: flex;
    flex-direction: column; */
    height: 70%; 
}
.botones {
    height: 12%;
}

#listadodemusicaCIMEB{
    height: 100%;
    width: 73%;
    font-size: 2.2vw;
    /* font-size: 1.3rem; */
    font-weight: bold;
}
#ordalfabeticoCIMEB{
    height: 100%;
    color: white;
}
#ordalfabeticoCIMEB:hover{
    color: black;
}
.centroLISTADODEMUSICACIMEB .listado{
    height: 88%;
    background-color: #B0E5FF;
}
#listademusicaCIMEB li{
    display: flex;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.8vw;
    height: 12%;
}
.listado #listademusicaCIMEB li:hover{
    color: red;
}
.listado #listademusicaCIMEB li:nth-child(odd){
    background-color:#B0E5EE;
}

/*REPRODUCTOR*/
.player{
    height: 25%;
    background-color:#8de68a ;
    border: solid lightgreen;
}
.upperPlayer{
    width: 100%;
    /* height: 30%; */
    height: 40%;
    
}
.lowerPlayer{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch; 
    width: 100%;
    height: 50%;
    margin-top: 1%;
}
#titleSong{
    height: 50%;
    width: 100%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.5vw;
    overflow: auto;
    background-color: #AAFFFF;
}
/* #wrapaudio{
    height: 100%;
    width: 100%;
} */
#reproductor{
    height: 60%;
    /* width: 45%; */
    width: 100%;
    font-family: sans-serif;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
} 
#playSong{
    /* background-image: url("../BPWRESOURCES/images/playAchatada1.png");
    background-repeat: no-repeat; */
    background-color:dodgerblue;
    color: white;
    width: 15%;
    height: 100%;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    margin-right: 0.25%;
}
#playEjercicio{
    /* background-image: url("../BPWRESOURCES/images/playAchatada1.png");
    background-repeat: no-repeat; */
    background-color:dodgerblue;
    color: white;
    width: 15%;
    height: 100%;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    margin-right: 0.25%;
}
#playClase{
    /* background-image: url("../BPWRESOURCES/images/playAchatada1.png");
    background-repeat: no-repeat; */
    background-color:dodgerblue;
    color: white;
    width: 15%;
    height: 100%;
    font-weight: bold;
    /* margin-right:2%; */
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    margin-right: 0.25%;
}
#playList{
    /* background-image: url("../BPWRESOURCES/images/playAchatada1.png");
    background-repeat: no-repeat; */
    background-color:dodgerblue;
    color: white;
    width: 15%;
    height: 100%;
    font-weight: bold;
    margin-right:1%;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    margin-right: 0.5%;
} 
#playEjercicio:hover, #playSong:hover, #playClase:hover, #playList:hover{
    color: black;
}
#repetir:hover, #stop:hover{
    color: white;
}
/* #pausa{
    background-image: url("../BPWRESOURCES/images/pause.png");
    background-repeat: no-repeat    ; 
    height: 100%;
    width: 10%;
    margin-top: 5%;
    visibility: hidden;
} */
#repetir{
    /* background-image: url("../BPWRESOURCES/images/repeat.png");
    background-repeat: no-repeat    ; */
    background-color:lightskyblue;
    color:darkblue;
    height: 100%;
    width: 10%;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
    margin-right: 0.25%;
}
#stop{
    /* background-image: url("../BPWRESOURCES/images/stop.png"); 
    background-repeat: no-repeat    ;*/
    background-color:lightskyblue;
    color: darkblue;
    height: 100%;
    width: 10%;
    margin-right: 0.5%;
    font-weight: bold;
    /* font-size: 1.1rem; */
    font-size: 1.5vw;
} 

.lowerPlayer #agrupos{
    width: 5%;
    height: 100%;
    font-size: 1.5vw;
    /* font-size: 1.5rem; */
    font-weight: bolder;
    background-color: #d9007f53;
    color: white;
    margin-right: 0.15%;
}
#agrupos:hover{
    color: black;
}
.lowerPlayer #aclases{
    width: 5%;
    height: 100%;
    font-size: 1.5vw;
    /* font-size: 1.5rem; */
    font-weight: bolder;
    background-color: #d9a600;
    color: white;
    margin-right: 0.15%;
}
#aclases:hover{
    color: black;
}
.lowerPlayer #atras{
    width: 7%;
    height: 100%;
    font-size: 1.5vw;
    /* font-size: 1.5rem; */
    font-weight: bolder;
    background-color: #D9007E;
    color: white;
}
#atras:hover{
    color: black;
}
#creditosAgustin a {
    color: #41B0A5;
    text-decoration: none;
}
#creditosAgustin a:hover {
    text-decoration: underline;
}
#creditosHelene a {
    color: #D9007E;
    text-decoration: none;
}
#creditosHelene a:hover {
    text-decoration: underline;
}

.split-login {
    display: flex;
    width: 60%;
    height: 90%;
    margin: 10px auto;
    border-radius: 50px;
    overflow: hidden;
}

.split-login-button {
    width: 50%;
    height: 100%;
    border-radius: 50px;
    background-color: #41B0A5;
    color: white;
    font-size: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    margin-right: 10px;
}

.split-login-button:first-child {
    border-right: 1px solid #308a82;
}

.split-login-button:hover {
    background-color: #308a82;
}

.flag-icon {
    width: 30px;
    height: 20px;
    margin-right: 10px;
}