html, body{
   font-family: helvética, arial, courier;
   /*background-color: white;*/
   background-color: #033E2E;
   margin: 0 auto;
   width: auto;
   height: 100%;
   padding: 0;
   margin: 0;
   color: #044456;
   font-size: 0.45vw;
   box-sizing:border-box;
}

#barraTitulos {
   margin: 0 auto;
   padding: 0;
   margin: auto;
   width: 100%;
   height: 2.5%;
   background-color: #054456;
   color: white;
   font-size: 2.5rem;
   text-indent: 2rem;
}

.contenedorPruebas{
   background-color: white;
   /*   para centrar el div      */
   width: 100%;
   margin: 0 auto;
   padding: 0;
   /* -------------------------  */
   height: 85%;
   box-sizing:border-box;
}

.contenedor{
   position: relative;
   background-color: white;
   width: 100%;
   margin: 0 auto;
   padding: 0;
   margin: auto;
   height: 82.5%;
   font-size: 1.7rem;
   box-sizing:border-box;
}

.contenedor3{
   background-color: white;
   /*   para centrar el div      */
   width: 100%;
   margin: 0 auto;
   padding: 0;
   margin: auto;
   /* -------------------------  */
   height: 82.5%;
   font-size: 1.7rem;
   box-sizing:border-box;
}

.contenedor4{
   background-color: white;
   /*   para centrar el div      */
   width: 100%;
   margin: 0 auto;
   padding: 0;
   margin: auto;
   overflow: scroll;
   /* -------------------------  */
   height: 82.5%;
   font-size: 1.7rem;
   box-sizing:border-box;
}

button, input, select, textarea {
   font-family: inherit;
   font-size: 100%;
   border-radius: 0;
   outline      : none;
}

.contenedorMenu{
   position: relative;
   background-color: white;
   /*   para centrar el div      */
   width: 100%;
   margin: 0 auto;
   /* -------------------------  */
   height: 15%;
   box-sizing:border-box;
}

/* Menu principal*/
#tituloPagMenu {
   width: 15%;
   margin-top: 0.4em;
   padding-left: 1em;
   float: left;
   font-size: 5em;
   display: inline;
}

#usuarioEnMenu {
   font-size: 2rem;
}

#divMenuPrincipal {
   margin-top: 4%;
   float: right;
   position: relative;
   width: 80%;
   height: 15%;
}

#menu {
   position: relative;
   display: block;
   align-items: center;
}


.floatLeft {
   float: left;
}

.tituloTabla {
   background-color: #04563F;
   color: white;
   text-align: center;
   border-width:0.1rem;
   cursor: pointer;
}

.tituloTablaEnComidas {
   background-color: #04563F;
   color: white;
   text-align: center;
   border-width:0.1rem;
}


.menu ul {
   float: right;
   margin: 3em;
}

.menu ul li{
   background-color: #054456;
   color: white;
   float: left;
   width: auto;
   height: 3.5rem;
   display: inline-block;
   text-indent: 0.8rem;
   text-align: left;
   /*line-height: 30px;*/
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
}

.menu ul li:hover{
   background-color: #33C8F3;
   color: #03313E;
}

/*Fin menu principal*/


/* Menu configuracion*/

#menuConfiguracion {
   width:100%;
   height: 15%;
   display: block;
   float: right;
   align-items: center;
   /*   
      border-style: solid;
      border-bottom-color: #872508;*/
}

.menuConfiguracion ul {
   float: right;
   margin: 3em;
}

.menuConfiguracion ul li{
   background-color: #56041B;
   color: white;
   float: left;
   width: auto;
   height: 3.5rem;
   display: inline-block;
   text-indent: 0.8rem;
   text-align: left;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
}

.menuConfiguracion ul li:hover{
   background-color: #F78260;
   color: #03313E;
}


#jornada{
   float: right;
   background-color:  white;
   width: 100%;
   height: 100%;
   box-sizing:border-box;
}

.derecha{
   width: 50%;
   height: 100%;
   overflow: scroll;
   box-sizing:border-box;
}

.izquierda{
   float: left;
   width: 49%;
   height: 100%;
   overflow: scroll;
   box-sizing:border-box;
}

.centro {
   float: left;
   width: 100%;
   height: 100%;
   padding: 2rem;
   overflow: scroll;
   box-sizing:border-box;
}

.izquierdaNombres{
   float: left;
   width: 57%;
   height: 100%;
   padding: 2rem;
   padding-left: 10rem;
   overflow: scroll;
   box-sizing:border-box;
}

.derechaNombres{
   float: right;
   width: 43%;
   height: 90%;
   margin-top: 3%;
   box-sizing:border-box;
}

#tablaAlimentosComida {
   width: 100%;
   padding-right: 2.5rem;
   height: 95%;
   margin: 0 auto;
   margin-top: 12%;
   overflow: scroll;
   box-sizing:border-box;
}

.tablaAlimentosGrupoReceta {
   float: right;
   width: 100%;
   padding-right: 2.5rem;
   height: 95%;
   margin-top: 2%;
   overflow: scroll;
   box-sizing:border-box;
}

.tablaAlimentosUsuario {
   float: right;
   width: 100%;
   padding-right: 2.5rem;
   height: 95%;
   margin-top: 2%;
   overflow: scroll;
   box-sizing:border-box;
}

.derechaComida{
   float: right;
   width: 43%;
   height: 88%;
   margin-top: 3%;
   box-sizing:border-box;
}

.izquierdaProyecto{
   float: left;
   width: 32%;
   height: 30rem;
   padding: 3rem;
   box-sizing:border-box;
}

.centroProyecto{
   float: left;
   width: 32%;
   height: 30rem;
   margin-right: 15px;
   padding: 3rem;
   box-sizing:border-box;
}

.derechaProyecto{
   float: left;
   width: 32%;
   height: 30rem;
   padding: 3rem;
   box-sizing:border-box;
}

.textAreaProyecto {
   width: 100%;
   height: 18rem;
   rows: 10;
   resize  : none;
}

.scrollTablaProyecto {
   width: 100%;
   height: auto;
   overflow: auto;
}

#enviarCancelarProyecto {
   float: left;
   width: 50%;
   margin-left: 25%;
   margin-right: 25%;
   margin-top: 2%;
   height: auto;
}

.inputKilos {
   width: 7rem;
}

.formProyecto {
   float: left;
   margin-left: 5%;
   margin-right: 5%;
   margin-top: 3%;
   width: 90%;
   height: auto;
   border-style: solid;
   border-width:0.4rem;
   border-color:  #04563F;
   box-sizing:border-box;
}

.tablaProyectos {
   width: 98%;
   height: auto;
   margin: 1.5%;
   border-style: solid;
   border-width:0.3rem;
   border-color:  #04563F;
   border-width:0.1rem;
   box-sizing:border-box;
}

.tablaProyectos th, td {
   border-style: inset;
   border-width:0.3rem;
   border-color:  #056E50;
   border-width:0.1rem;
   text-align: center;
}


#divFechaJornada {
   width: auto;
   margin-left: 25%;
   padding-top: 3%;
   padding-bottom: 3%;
}

#jornadaFecha {
   font-size: 3.5rem;
   width: 20rem;
   text-align: center;
}

.fechasElegirEnGrafico {
   font-size: 1.9rem;
   width: 12rem;
   text-align: center;
}

.imageFlechasFecha {
   width: 2.5rem;
   height: 4.4rem;
   padding-right: 0.4rem;
   padding-left: 0.4rem;
   margin-bottom: 0.2rem;
   max-width: 100%;
}

#divTotalesJornada {
   width: 100%;
   height: 8%;
   position: relative;
   display: block;
}

/*Total kcal de la jornada*/
.kcaloriasJornada {
   width: 70%;
   height: 10rem;
   float: left;
   font-size: 8rem;
   text-align: right;
}

#divPorcentajeKcal {
   float: left;
   width: 100%;
   height: 5rem;
   font-size: 3.5rem;
   display: flex;
}

.imageVistoBuenoJornada {
   width: 7rem;
   height: 7rem;
   margin-bottom: 2rem;
   margin-left: 3rem;
   max-width: 100%;
}

.imagePlusPlusJornada {
   width: 7.5rem;
   height: 7.5rem;
   margin-bottom: 2rem;
   margin-left: 1rem;
   max-width: 100%;
}

#botonAComidas {
   width: 100%;
   height: 30px;
   float: left;
   color: white;
   text-align: center;
   font-size: 20px; 
   border: none;
   background-color: #054456;
   transition-duration: 0.2s;
   margin-bottom: 3%;

}

#botonAComidas:hover {
   background-color: #95E2F8;
   color: #03313E;
}

#jornadaPeso {
   width: 100px;
}

#divFormJornada {
   width: 99%;
   float: left;
   border-style: solid;
   border-color: #EDEDED;
   background-color: #EDEDED;
}

#divPeso {
   float: left;
   width: 42%;
   height: 4%;
   padding: 1%;
}

#entrenamiento {
   float: right;
   width: 52%;
   height: 4%;
   padding: 1%;
}

#divTextarea {
   width: 95%;
   padding: 2.5%;
}

.textArea {
   width: 100%;
   height: 100px;
   rows: 5;
   resize  : none;
}

.formJornada {
   padding: 0%;
}

.boton01 {
   display: inline;
   width: auto;
   height: 3.5rem;
   float: left;
   color: white;
   text-align: center;
   font-size: 1.7rem; 
   border: none;
   background-color: #054456;
   transition-duration: 0.2s;
   margin-left: 20rem;
   margin-bottom: 3%;
}

.boton01:hover {
   background-color: #95E2F8;
   color: #03313E;
}

.boton02 {
   width: auto;
   height: 2.5rem;
   float: right;
   color: white;
   text-align: center;
   font-size: 1.7rem; 
   border: none;
   background-color: #054456;
   transition-duration: 0.2s;
   margin-left: 20rem;
   margin-bottom: 3%;
}

.boton02:hover {
   background-color: #95E2F8;
   color: #03313E;
}

.boton03 {
   width: auto;
   height: 2.5rem;
   float: left;
   color: white;
   text-align: center;
   font-size: 1.7rem; 
   border: none;
   background-color: #054456;
   transition-duration: 0.2s;
   margin-left: 13rem;
   margin-bottom: 2%;
   margin-top: 6%;
}

.boton03:hover {
   background-color: #95E2F8;
   color: #03313E;
}

.boton04 {
   display: inline;
   width: auto;
   height: 3.5rem;
   float: right;
   color: white;
   text-align: center;
   font-size: 1.7rem; 
   border: none;
   background-color: #054456;
   transition-duration: 0.2s;
   margin-right: 10rem;
   margin-bottom: 3%;
}

.boton04:hover {
   background-color: #95E2F8;
   color: #03313E;
}

.numero{
   text-align: right;
}

th, td {
   height: auto;
   width: auto;
   padding-left: 0.4rem;
   padding-right: 0.4rem;
}

.centrar {
   text-align: center;
}

.caja_scroll {
   overflow: scroll;
   background-color: #ffffff;
}

#buscarAlimento {
   float: left;
}

.menuComidas {
   float: right;
   padding-right: 65px;
   width: 85%;
   height: 60px;
   display: block;
}

.menuComidas ul li {
   background-color: #054456;
   color: white;
   float: left;
   width: auto;
   height: 3.5rem;
   display: inline-block;
   text-indent: 0.8rem;
   text-align: left;
   /*line-height: 30px;*/
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
}

.menuComidas ul {
   float: right;
}

.menuComidas ul li:hover{
   background-color: #33C8F3;
   color: #03313E;
}

.flotante {
   border: 0.3rem solid darkgrey;
   background: white;
   padding: 2rem;
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 3;
   font-size: 1.7rem;
   transform: translate(-50%, -50%);
}

.equis {
   width: 1.3rem;
   height: 1.5rem;
}

.subirBajar {
   width: 1.5rem;
   height: 1.5rem;
}

.imageSubBaj {
   padding-bottom: 0.05rem;
   margin-bottom: 0.1rem;
   max-width: 90%;
}

.imageVistoBueno {
   width: 1.3rem;
   height: 1.3rem;
   padding-bottom: 0.1rem;
   margin-bottom: 0.1rem;
   border-spacing: 0.1rem;
   max-width: 100%;
}

.imagePlusPlus {
   width: 1.5rem;
   height: 1.5rem;
   padding-bottom: 0.1rem;
   margin-bottom: 0.1rem;
   border-spacing: 0.1rem;
   max-width: 100%;
}

.imagePlusPlusG {
   width: 5rem;
   height: 5rem;
   padding: 2rem;
   margin-left: 30%;
   border-spacing: 0.1rem;
   max-width: 100%;
}

.divFechaFlechas {
   display: flex;
   align-items: center;
}

#divElegirEnComidas {
   float: right;
}

#cabeceraGrafico {
   width: 95%;
   height: 10%;
   margin:0px auto;
   box-sizing:border-box;
}

.menuGrafico {
   float: right;
   width: 30%;
   height: 5rem;
   display: block;
}

/*Con esto y otras propiedades del gráfico se consigue que éste sea responsive*/
#grafico1 {
   width: 100%;
   height: 100%;
}

.opcionesFechasGraficos {
   width: 37%;
   float: left;
   padding: 1%;
}

#divGrafico0 {
   width: 99%;
   margin: auto;
   height: 90%;
   overflow-x: scroll;
}

#divGrafico1 {
   width: 97%;
   margin: auto;
   height: 50%;
}

#divGrafico2 {
   width: 97%;
   margin: auto;
   height: 50%;
}

.subGrafico {
   width: 4000px;
   height: 100%;
}

.menuGrafico ul li {
   background-color: #054456;
   color: white;
   float: left;
   width: auto;
   height: 3.5rem;
   display: inline-block;
   text-indent: 0.8rem;
   text-align: left;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
}

.menuGrafico ul {
   float: right;
}

.menuGrafico ul li:hover{
   background-color: #33C8F3;
   color: #03313E;
}

/*Para poner un color de fondo alterno en la tabla*/
table tr:nth-child(even) {
   background-color: #eee;
}
table tr:nth-child(odd) {
   background-color: #fff;
}

table {
   border-collapse: collapse;
   font-size: 1.7rem;
}

p {
   font-size: 1.7rem;
}

th {
   background-color: #068662;
   color: white;
   border-style: solid;
   border-width:0.3rem;
   border-color:  #04563F;
   border-width:0.1rem;
}

table tr{
   width: auto;
   height: auto;
}

table td{
   border-width:0.1rem;
}

.totales {
   background-color: #F2FEFB;
   text-align: right;
}

div.ui-datepicker{
 font-size: 1.7rem;
}

.borderTable {
   border-style: solid;
   border-width:0.1rem;
   border-color:  #04563F;
   border-width: 0.1rem;
   margin: 0 auto;
   margin-top: 3rem;
   text-align: left;
   border-width:0.1rem;
}

/*formato de los input number*/
input[type=number] {
   width: 75px;
   border: none;
}

input[type=time] {
   width: 11rem;
   border-radius: 0;
}

.inputSinBorde {
   border: none;
}

.fecha {
   width: 100px;
   text-align: center;
}

button {
   width: 100%;
   border: none;
   background-color: #054456;
   color: white;
   text-align: center;
   transition-duration: 0.2s;
}

button:hover {
   background-color: #95E2F8;
   color: #03313E;
}

.nombreAlimentoEnTabla {
   width: 45rem;
   text-align: left;
}

div.centerTable table {
   margin: 0 auto;
   margin-top: 3rem;
   text-align: left;
   border-width:0.1rem;
}

.textoRight {
   text-align: right;
}

.textoLeft {
   text-align: left;
   border-width:0.1rem;
}

.textoCenter {
   text-align: center;
}

.enLinea {
   display: inline;
}

.enLinea2 {
   display: inline;
   padding-top: 10rem;
}

.textoVertical {
   writing-mode: vertical-lr;
   transform: rotate(180deg);
   text-align: center;
}

#acercade {
   float: left;
   width: auto;
   height: auto;
   padding-top: 3%;
   padding-bottom: 5%;
   padding-left: 10%;
   padding-right: 10%;
   overflow: scroll;
}

#ayuda {
   float: left;
   width: auto;
   height: auto;
   padding-top: 3%;
   padding-bottom: 5%;
   padding-left: 15%;
   padding-right: 15%;
   overflow: scroll;
}

#login {
   font-size: 1.7rem;
}

.centrarEnDiv {
   width: 80%;
   margin: 10%;
   height: 80%;
}

.celdaNombre {
   width: 30rem;
}

.celdaNombre2 {
   width: 30rem;
   border: none;
}

#botonNuevoProyecto {
   background-color: #054456;
   color: white;
   float: right;
   width: auto;
   height: 3.5rem;
   display: inline-block;
   text-align: left;
   align-items: center;
   justify-content: center;
   font-size: 1.7rem;
   margin-top: 5rem;
   margin-right: 6rem;
}

#botonNuevoProyectoi:hover{
   background-color: #33C8F3;
   color: #03313E;
}

.fuente15 {
   font-size: 1.5rem;
}

.formAlimento {
   width: 500px;
   text-align: right;
}

.inputformAlimento {
   width: 400px;
   text-align: right;
}

.inputformAlimento {
  text-align: left;
}

.botonCentrado {
  text-align: center;
  margin: 20px 0;
}

.mensajeExito {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.textoPequenoBlanco {
    font-size: 0.8em;
    color: #fff;
}

.textoPequenoAzul {
    font-size: 0.8em;
    color: #044456;
}

.imagenDesactivada {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.thColumnasPrincNutr {
    min-width: 60px;
    white-space: nowrap;
}

.filaEncabezadoAlimento {
    background-color: #d4f4d2; /* fondo verde */
}

.contenedorNombreAlimento {
    word-break: break-word;
    white-space: normal;
    line-height: 1;
    font-weight: bold;
    font-size: 1em;
}

.celdaIcono {
    text-align: center;
    vertical-align: middle;
    width: 40px;
}