* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

.dieta {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

.porciones,.nutricion{
  display:flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
/******************************************************************************************

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('../css/828.gif')
                50% 50%
                no-repeat;
}
/*url('http://i.stack.imgur.com/FhHRx.gif')*/
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

.header_menu{
	background-color: #CAEBB2;
}

#fecha_inicial{
	text-align: center;
}

.td_per,.inp_per {
  padding : 0px;

}
.controles_lista {
	margin-top:10px;
	margin-bottom:10px;
	padding:7px;
	border: 1px solid #ccc;
	background-color: #CAEBB2;
}

.caja {
	margin-left:15px;
	margin-right:15px;
}

#comentarios_planeacion{
	display: grid;
	width: 100%;
	margin-bottom: 1.5rem;
	justify-content: center;
	border-color: #fffff0;
	background-color: #e9e9e9;

	grid-template-columns: repeat(7,1fr);
	grid-template-rows: repeat(7,40px);
	grid-gap: 0.5rem;
}

.plan{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
	width: 90%;
	height : 90%;
	background-color: white;
}
.plan_dias{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
	width: 90%;
	height: 90%;
	background-color: #fffec6;
}

#lm1,#lm2,#lm3 {
	margin-top: 10px;
}

.dp-highlight .ui-state-default {
    background: #484;
    color: #FFF;
}

.ui-datepicker.ui-datepicker-multi {
    width: 100%;
}

.ui-datepicker-multi .ui-datepicker-group {
    float: none;
}

.datepicker {
    height: 300px;
    overflow-x: scroll;
	display: none;
}

.ui-widget {
    font-size: 100%
}

.check_masivo {
  width  :7px;
  height :10px;
  color  :#caebb2;
}


#barra {
	background-color: red;
	font-size: 20px;
}

.titulo {
	text-align: center;
	margin: auto;
	padding: 0px;
}

.p_total_dias>p {
		margin: 0 auto; /* requerido para alineación horizontal */
}

.form-group{
	padding: 0px;
}

button{
	padding :0px;
}

.botones_rwd_fwd{
	float:left;
}

.calendario_proteina{
	float:left;
}

#btn_generar_patron{
	width : 100%;
}

#btn_planear {
	margin-right:15px;
}

#transito {
	display: none;
}



/**********************************************************************************************/
div.desc2 {
  padding: 1px;
  text-align: left;
  font-size:10px;
}

#subcategorias_modal{
	padding: 2px;
	margin: 2px;
	/*width: 980px;
	background-color: red;*/


}

#fotos_subcategorias{
	padding: 0px;
	margin: 0px;
	width: 900px;
}


#pre_row {
  padding: 0px;

}

#pre_panel_body,#imagen_ingrediente{
  padding: 0px;
}


.input_proteina{
	padding : 0px;
	border-style: none;
}
.input_proteina:click{
	padding : 0px;
	border-style: none;
}

.nombre_proteina{
	padding : 0px;
}


#modal_content_pre,#modal_dialog_pre,#modal_body_pre {
	width: 900px;
	padding: 0px;

}
#modal_body_pre {
	width: 898px;
	padding: 1px;

}

#pre_col8 {
	padding-left: 0px;
	padding-right: 0px;

}

#titulo_proteinas {
	margin-top: 0px;
}

.btn_dec,.btn_inc{
	padding :2px;
}

.p_total_dias,#barra{
	padding :2px;
}


div.desct {
	font-size: 20px;
	text-align: center;
	padding :4px;
	background-color : #caebb2;
	color : white;
	font-weight : bold;
}

div.desc3 {
	font-size: 14px;
	text-align: center;
	padding :2px;
}


div.row.well, div.col-md-12{
	padding :0px;
}

div.panel-body {
	padding-left  :5px;
	padding-right :5px;
}

div.marco_ppal {
	padding-left :0px;
	padding-right :0px;
}

div.panel-heading {
	padding-bottom :0px;
}

.canasta {
	/*width: 860px;*/
	position: absolute;
	/*top: 50%;  Buscamos el centro horizontal (relativo) del navegador */
	left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
	transform: translate(-50%, -0%);
}

.contenedor_centrador {
	display: flex;
 	justify-content: center;
}

.nowrap {
    white-space: nowrap;
}

.ic_b_drop {
    background-image: url(../img/b_drop.png);
}
.icon {
    margin: 0;
    margin-left: .3em;
    padding: 0 !important;
    width: 16px;
    height: 16px;
}

#ppal_canasta {
	padding-top: 20px;
	padding-left: 40px;
	padding-right: 40px;
}
#resumen_canasta {
	/*position: fixed;*/
	padding-top: 20px;
	min-height: 120px;
	padding: 20px;
}

.col_descripcion {
	width: 400px;
}

#parrafo_generar_patron{
	text-align: center;
}
.p_total_dias{
	text-align: center;
}

.img_centrada {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.cajas_menu {
	padding : 5px;
	border-style: solid;
	border-width: 1px;
	border-color : #e5e5e5;
	margin-left : 10px;
	display: inline;
}

.cajas_menu2 {
	padding : 5px;
	border-style: solid;
	border-width: 1px;
	border-color : #e5e5e5;
	margin-left : 10px;
	display: inline;
}

.btn_generar,#btn_regresar {
  width: 90%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  margin:10px;
}

#receta_encabezado{
	text-align: center;
	margin:0px;
}

#receta_preparacion{
	text-align: justify;
	margin:0px;
}

#receta_ingredientes{
	text-align: justify;
	margin:0px;

	cursor:pointer;
	border-radius: 5px;

	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-content: center;
	align-items: center;

}

.titulo_receta{
	padding-bottom:0px;
	padding-top:0px;

}

.separador_comidas{
	height:15px;
	padding:3px;
	background-color:#CAEBB2;
}

.encabezado_dia{
	height:35px;
}


/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #8cc63e;
  position: relative;
  /*display:flex;*/
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 6px 60px;
  text-decoration: none;
  font-size: 18px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #8cc63e;
  display: block;
  position: absolute;
  left: 8px;
  top: 5px;
}

.topnav a.icon {
  background: #8cc63e;
  display: block;
  position: absolute;
  right: 8px;
  top: 5px;
}

/* Add a grey background color on mouse-over
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
*/
/* Style the active link (or home/logo)
.active {
  background-color: #CAEBB2;
  color: white;
}
*/

#btn_planear,#btn_listamercado{
	background-color: #CAEBB2;
	color: black;
}

.barra_planeacion {
  margin-top: 5px;
  margin-bottom: 5px;
}

#listamer {
  padding: 0px;
}


.btnr-sm {
  padding: 2px;
  width : 15px;
  height : 15px;
}

.body_login{
  display:flex;
  flex-direction: column;
}

.loginform{
	margin: auto;
	width: 50%;
	max-width: 400px;
	padding: 20 px;
	border: 1px solid rgba(0,0,0,0,0.5);
}

.input_login{
	display:block;
	padding: 6px;
	width: 100%;
	margin-bottom: 10px;
	font-size: 16px;
	border-color : rgba(0,0,0,0.3);
	border-radius: 8px;
}

.titulo_login,.titulo_mercado{
	text-align :center;
	margin-top:0px;
	margin-bottom:10px;
	color : rgba(0,0,0,0.5);
}

.mensaje_login{
	text-align :center;
	margin-bottom:20px;
	color : rgba(0,0,0,0.5);
	font-size: 16px;
}

.btn-login{
	background: linear-gradient(#8cc63e,#8cc630);
	border: 0;
	color: white;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 20px;
	width: 100%;
}

.btn-login:hover{
	opacity: 1;
}

.btn-login:active{
	transform: scale(0.95);
}

.nombre_registro{
	font-weight: bold;
	font-size: 16px;
	margin: 0px;
}

.btn_registro {
	background: linear-gradient(#8cc63e,#8cc630);
	border: 0;
	color: white;
	opacity: 0.8;
	cursor: pointer;
	border-radius: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 20px;
	width: 100%;
}

.btn-registro:hover{
	opacity: 1;
}

.btn-registro:active{
	transform: scale(0.95);
}




/**********************************************************************************************/
div.galeria_proteinas {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 60px;
  height: auto;
  border-radius: 5px;
}

div.galeria_proteinas:hover {
  border: 1px solid #777;
}

div.galeria_proteinas img {
  width: 80%;
  height: auto;
  border-radius: 5px;
}

div.galeria_proteinas input {
  font-size: 22px;
  align-content: center;
}



/**********************************************************************************************/

/*style="width:55px;height:50px;padding:3px; border:none"*/
/**********************************************************************************************/
.galeria_productos {
  margin: 8px;
  border: 1px solid #ccc;
  float: left;
  width: 45%;
  border-radius: 8px;
}

.galeria_productos:hover {
  border: 1px solid #777;
}

.galeria_productos img {
  width: 150px;
  height: 145px;
  border: none;
  margin: auto;
}

.galeria_productos p {
  font-size: 12px;
  font-style: italic;
  height: 20px;
  text-align: center;
  font-weight: bold;
}


.menu_preferencias img {
	width: 100%;
	height: 100%;
}

/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************/
/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************/
/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************/


@media only screen and (min-device-width : 300px) and (max-device-width : 759px) {

.center {
	position: absolute;
	/*top: 50%;  Buscamos el centro horizontal (relativo) del navegador */
	left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
	/*transform: translate(-50%, -0%);*/

	/*determinamos una anchura*/
	width:380px;
	/*indicamos que el margen izquierdo, es la mitad de la anchura*/
	margin-left:-190px;
}

div .letrero_nutridelicias{
	background-color: #ffffff;
  display : flex;
}
div .letrero_nutridelicias img{
  margin : 5px;
}
.letrero_pasos{
  display: none;
}
.cont{
  display:grid;
  margin:0px;
	padding:0px;
}
.contenido_preferencias{
	margin:0px;
	padding:0px;
}

.users_content{
  width : 90vw;
}
#receta_1{
  display: flex;
  flex-direction: column;
}
/**********************************************************************************************/
#resumen_preferencias {
  padding: 0px;
  display : grid;
  grid-template-columns: 1% 1fr 1%;
}
#encabezado_proteina {
  grid-column: 1/4; grid-row: 1/2;
}
#cantidades_proteinas {
  grid-column: 2/3; grid-row: 2/3;
  padding: 0px;
  display : grid;
  grid-template-columns: repeat(4,1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 2px;
  font-size: 28px;
}
#generar_patron {
  grid-column: 1/4; grid-row: 3/4;
}
.img_proteina{
	padding:5px;
	width: 50px;
	height: 50px;
}
.img_flechas{
	padding:5px;
	width: 40px;
	height: 40px;
}
div.galeria_patron {
  margin: 0;
  border: 1px solid #ccc;
  float: left;
  width: 11vw;
  border-radius: 5px;
}
div.galeria_patron:hover {
  border: 1px solid #777;
}
div.galeria_patron img {
  width: 90%;
  height: 90%;
  border-radius: 5px;
}
/**********************************************************************************************/
.loginform{
	margin: auto;
	width: 90%;
	padding: 20 px;
	border: 1px solid rgba(0,0,0,0,0.5);
}

.cajas_menu,.cajas_menu2,.menu_logout{
	display: none;
}

.barra_planeacion_top {
	margin-bottom:0px;
}

div.panel-body {
	padding-top    :0;
}

.td_ing {
	padding    :4px;
}
.check_masivo {
  width  :10px;
  height :15px;
  color  :#caebb2;
}


#menu_preferencias_contenedor {
	display: grid;
	grid-template-columns: 1fr;
}

#menu_preferencias_global {
	grid-column: 2/3; grid-row: 1/-1;
	display: grid;

	justify-content: center;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 1rem;
}

/*             Recetas en preferencias               */

#menu_recetas{
  display: grid;
	justify-content: center;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: repeat(3,15vh);
  grid-gap: 1rem;
  margin-bottom: 25px;
}

.menu_recetas img{
  width : 95%;
  height: 95%;
}
.records_content,#opciones_receta_cambio{
  display:grid;
  grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(2,auto);
  grid-gap: 1rem;
}
#cat_clase_receta{
  grid-column: 1/3; grid-row: 1/2;
}
.contenido_receta{
  display:grid;
	grid-template-rows: repeat(2,fr);
  justify-content: center;
}
.descripcion_recetas{
  grid-column: 1/1; grid-row: 2/3;
}
.galeria_recetas {
  grid-column: 1/1; grid-row: 1/2;
  justify-content: center;
  margin: 8px;
  width: 100%;
  border-radius: 8px;
}

.galeria_recetas:hover {
  border: 1px solid #777;
}

.galeria_recetas img {
  width: 100%;
  height: 20vh;
  border: none;
  margin: auto;
}

.galeria_recetas p {
  font-size: 12px;
  font-style: italic;
  height: 20px;
  text-align: center;
  font-weight: bold;
}

/*******************************************************************************/
#patron_desayuno{
	display: grid;
	grid-template-columns:repeat(3,1fr);
  grid-gap : 0.5rem;
}
#encabezado_patron_desayuno{
  grid-column: 1/4; grid-row: 1/2;
}

.calendario_proteina{
	display: grid;
	grid-template-columns:repeat(7,1fr);
	grid-gap: 0.4rem;
}

#dieta {
	display: grid;
	width: 100%;
	margin-bottom: 0rem;
	justify-content: center;

	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-gap: 0rem;

}

.dieta1 {
	display: grid;
	margin-bottom: 1.5rem;
	justify-content: center;
	border-color: #fffff0;
	background-color: #e9e9e9;

	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 60vw 3vw 30vw;
	grid-gap: 0.5rem;

}
.dieta2 {
	display: grid;
	margin-bottom: 1.5rem;
	justify-content: center;
	border-color: #fffff0;
	background-color: #e9e9e9;

	grid-template-columns: repeat(3,1fr);
	grid-template-rows:  20vw 20vw 5vw 20vw 20vw;
	grid-row-gap: 0.5rem;
  grid-column-gap: 0.5rem;
}
.dieta3 {
	display: grid;
	margin-bottom: 1.5rem;
	justify-content: center;
	border-color: #fffff0;
	background-color: #e9e9e9;

	grid-template-columns: repeat(3,1fr);
	grid-template-rows:  20vw 20vw 5vw 20vw 20vw;
	grid-row-gap: 0.5rem;
  grid-column-gap: 0.5rem;

}

.paso_a {
  background-color: #edf7f7;
  height : 80vh;
  display : flex;
  flex-direction: column;
  padding: 10px;
}
.paso_b {
  background-color: skyblue;
  height : 80vh;
  display : flex;
  flex-direction: column;
  padding: 10px;
}
.paso_c {
  background-color: orange;
  height : 80vh;
  display : flex;
  flex-direction: column;
  padding: 10px;
}
.encabezado_preferencias{
  background-color: #edf7f7;
  display : flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  padding:10px;
  border-radius:0.4rem;
  margin-bottom: 0.2rem;
}
.bienvenidos{
  background-color: #edf7f7;
  display : flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  padding:10px;
  border-radius:0.4rem;
  height: 80vh;
}
.p0{
  text-align: center;
  width: 100%;
  font-size:28px;
  color : #8cbc4c;
  font-weight : bold;
}
.p1{
  text-align: center;
  width: 100%;
  font-size:36px;
  color : white;
}
.p2{
  text-align: center;
  width: 100%;
  font-size:20px;
  color : #8cbc4c;
  font-weight : bold;
}
.p3{
  text-align: justify;
  width: 100%;
  font-size:16px;
  color : #626262;
  font-weight : normal;
}

/**********************************************************************************************/
div.gallery {
  display:grid;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 62px;
  border-radius: 5px;
}

div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
div.desc {
	font-size: 12px;
	text-align: center;
	padding :0px;
  height: 2rem;
}

div.letrero1 {display: none;}
div.letrero2 {display: none;}
div.letrero3 {display: none;}
/**********************************************************************************************/
div.galeria1 {grid-column: 1/2; grid-row: 3/4;}
div.galeria1 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria1 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria2 {grid-column: 1/4;grid-row: 1/2;}
div.galeria2 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria2 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria3 {grid-column: 2/3;grid-row: 3/4;}
div.galeria3 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria3 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria4 {grid-column: 3/4;grid-row: 3/4;}
div.galeria4 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria4 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
/**********************************************************************************************/
div.galeria6 {grid-column: 3/4;grid-row: 1/2;}
div.galeria6 img {width: 100%;height: 80%;object-fit:cover; display:block;}
div.galeria6 p {display: none;}
/**********************************************************************************************/
div.galeria7 {grid-column: 1/3;grid-row: 1/3;}
div.galeria7 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria7 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria8 {grid-column: 2/4;grid-row: 4/6;}
div.galeria8 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria8 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria9 {grid-column: 3/4;grid-row: 2/3;}
div.galeria9 img {width: 100%;height: 80%;object-fit:cover; display:block;}
div.galeria9 p {display: none;}
/**********************************************************************************************/
div.galeria10 {grid-column: 1/2;grid-row: 4/5;}
div.galeria10 img {width: 100%;height: 80%;object-fit:cover; display:block;}
div.galeria10 p {display: none;}
/**********************************************************************************************/
div.galeria11 {grid-column: 1/2;grid-row: 5/6;object-fit:cover; display:block;}
div.galeria11 img {width: 100%;height: 80%;}
div.galeria11 p {display: none;}
/**********************************************************************************************/
/**********************************************************************************************/
div.galeria13 {grid-column: 3/4;grid-row: 1/2;}
div.galeria13 img {width: 100%;height: 80%;object-fit:cover; display:block;}
div.galeria13 p {display: none;}
/**********************************************************************************************/
div.galeria14 {grid-column: 1/3;grid-row: 1/3;}
div.galeria14 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria14 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria15 {grid-column: 2/4;grid-row: 4/6;}
div.galeria15 img {width: 100%;height: 100%;object-fit:cover; display:block;}
div.galeria15 p {text-align: center;font-size: 14px;}
/**********************************************************************************************/
div.galeria16 {grid-column: 3/4;grid-row: 2/3;}
div.galeria16 img {width: 100%;height: 80%;object-fit:cover; display:block;}
div.galeria16 p {display: none;}
/**********************************************************************************************/
div.galeria17 {grid-column: 1/2;grid-row: 4/5;}
div.galeria17 img {width: 100%;height: 80%;object-fit:cover; display:block;}
div.galeria17 p {display: none;}
/**********************************************************************************************/
div.galeria18 {grid-column: 1/2;grid-row: 5/6;object-fit:cover; display:block;}
div.galeria18 img {width: 100%;height: 80%;}
div.galeria18 p {display: none;}


/**********************************************************************************************/

div.gallery4 {
  margin: 0;
  border: 1px solid #ccc;
  float: left;
  width: 25vw;
  border-radius: 5px;
}

div.gallery4:hover {
  border: 1px solid #777;
}

div.gallery4 img {
  width: 90%;
  height: 90%;
  border: none;
}


#resumen,#resumen2 {
	position: sticky;
	min-height: 120px;
  width: 100%;
  text-align: justify;
  word-wrap: break-word;
	margin-left:0px;
	margin-right:0px;

}
.img_receta {
	width: 100%;
  cursor:pointer
}

#patron_proteina{
	display: grid;
	grid-template-rows:repeat(2,auto);
	grid-gap: 2rem;
}
.calendario_proteina{
  grid-column: 1/1;grid-row: 1/2;
	display: grid;
	grid-template-columns:repeat(7,1fr);
	grid-gap: 3px;
}
#controles_patron{
  grid-column: 1/1;grid-row: 2/3;
	display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 1rem;
}
#control_patron1 {grid-column: 1/2;grid-row: 1/2;}
#control_patron2 {grid-column: 2/3;grid-row: 1/2;}
#control_patron3 {grid-column: 3/4;grid-row: 1/2;}

.form_persona{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  /*grid-template-rows: repeat(3,1fr);*/
  margin-bottom:1rem;
  grid-gap:1rem;
  background-color: #D5F5E3;
  padding:10px;
}
.form_persona_reporte{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  /*grid-template-rows: repeat(3,1fr);*/
  margin-bottom:1rem;
  grid-gap:1rem;
  background-color: #D5F5E3;
  padding:10px;
}

.titulo_tbl_personas{
  font-size: 12px;
}
.th_tbl_personas{
  padding: 2px
}
.zscore{
  font-size: 12px;
  text-align: center;
}

div.btn_graph_peso.btn{
  width: 100%;height: 100%;object-fit:cover; display:block;
}
.grafico_peso {
  grid-column: 1/5;
  grid-row: 3/4;
}

.encabezado_persona{
  display:flex;
}
.encabezado_gral{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.encabezado_reporte{
  font-size: 12px;
  padding : 2px;
}
.col_cal,.col_lip,.col_carb,.col_prot,.col_costo {
  width: 15%;
  text-align : center;
  padding : 2px;
}
.col_t {
  width: 25%;
  text-align : center;
  padding : 2px;
}
.col_cal1,.col_lip1,.col_carb1,.col_prot1,.col_costo1 {
  width: 17%;
  text-align : center;
  padding : 2px;
}
.col_t1 {
  width: 15%;
  text-align : center;
  padding : 2px;
}
}

/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************/
/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************/
/**************************************************************************************************************
/**************************************************************************************************************
/**************************************************************************************************************/
@media only screen and (min-width:760px) {
  /* For mobile phones: */

.center {
	position: absolute;
	/*top: 50%;  Buscamos el centro horizontal (relativo) del navegador */
	left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
	/*transform: translate(-50%, -0%);*/

	/*determinamos una anchura*/
	width:900px;
	/*indicamos que el margen izquierdo, es la mitad de la anchura*/
	margin-left:-450px;
}

div .letrero_nutridelicias{
	background-color: #ffffff;
  display : flex;
  width: 100%;
  padding: 5px;
  align-items: center;
}
.logo{
  width: 54px;
  height: 50px;
  margin: 5px;
}
.logo_letrero{
  height: 40px;
  width: 195px;
}
.letrero_pasos{
  display: none;
}
.cont{
  display:grid;
  margin:0px;
	padding:0px;
}
.contenido_preferencias{
	margin:0px;
	padding:0px;
}

.users_content{
  width : 90vw;
}
#receta_1{
  display: flex;
  flex-direction: column;
}
/**********************************************************************************************/
#resumen_preferencias {
  padding: 0px;
  display : grid;
  grid-template-columns: 25% 1fr 25%;
}
#encabezado_proteina {
  grid-column: 1/4; grid-row: 1/2;
}
#cantidades_proteinas {
  grid-column: 2/3; grid-row: 2/3;
  padding: 0px;
  display : grid;
  grid-template-columns: repeat(4,1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 2px;
  font-size: 32px;
}
#generar_patron {
  grid-column: 1/4; grid-row: 3/4;
}
.img_proteina{
	padding:5px;
	width: 70px;
	height: 70px;
}
.img_flechas{
	padding:5px;
	width: 40px;
	height: 40px;
}
div.galeria_patron {
  margin: 0;
  border: 1px solid #ccc;
  float: center;
  width: 5vw;
  border-radius: 5px;
}
div.galeria_patron:hover {
  border: 1px solid #777;
}
div.galeria_patron img {
  margin: 3px;
  width: 90%;
  height: 90%;
  float: center;
  border-radius: 5px;
}
/**********************************************************************************************/

body {
	max-width  : 1000px;
}

/**********************************************************************************************/
.loginform{
	margin: auto;
	width: 90%;
	padding: 20 px;
	border: 1px solid rgba(0,0,0,0,0.5);
}

.cajas_menu,.cajas_menu2,.menu_logout{
	display: none;
}

.barra_planeacion_top {
	margin-bottom:0px;
}

div.panel-body {
	padding-top    :0;
}

.td_ing {
	padding    :4px;
}
.check_masivo {
  width  :10px;
  height :15px;
  color  :#caebb2;
}

/**********************************************************************************************/
#menu_preferencias_contenedor,#opciones_receta {
	display: grid;
	grid-template-columns: 1fr 700px 1fr;

}

#menu_preferencias_global {
	grid-column: 2/3; grid-row: 1/1;
	display: grid;
	padding: 3rem;

	justify-content: center;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,20vh);
	grid-gap: 3rem;
}

.contenido_preferencias{
	grid-column: 2/3; grid-row: 1/-1;
  width : 700px;
}
/*             Recetas en preferencias               */
#menu_recetas{
  display: grid;
	padding: 3rem;

	justify-content: center;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: repeat(4,16vh);
  grid-gap:1.5rem;
}

.menu_recetas img{
  width : 95%;
  height: 95%;
}
.records_content,#opciones_receta_cambio{
  grid-column: 2/3; grid-row: 1/1;
  display:grid;
  grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,auto);
  grid-gap: 2rem;
}
#cat_clase_receta{
  grid-column: 1/3; grid-row: 1/2;
}
.contenido_receta{
  display:grid;
	grid-template-rows: repeat(2,fr);
  justify-content: center;
}
.descripcion_recetas{
  grid-column: 1/1; grid-row: 2/3;
}
.galeria_recetas {
  /*grid-column: 1/1; grid-row: 1/2;*/
  justify-content: center;
  margin: 8px;
  width: 100%;
  border-radius: 1rem;
}

.galeria_recetas:hover {
  border: 1px solid #777;
}

.galeria_recetas img {
  width: 100%;
  height: 20vh;
  border: none;
  margin: auto;
  border-radius: 1rem;
}

.galeria_recetas p {
  font-size: 12px;
  font-style: italic;
  height: 20px;
  text-align: center;
  font-weight: bold;
}

/*******************************************************************************/
#patron_desayuno{
	display: grid;
	grid-template-columns:repeat(4,25vh);
}

#encabezado_patron_desayuno{
  grid-column: 1/4; grid-row: 1/2;
}

.calendario_proteina{
	display: grid;
	grid-template-columns:repeat(7,1fr);
	grid-gap: 0.4rem;
}

#dieta {
	display: grid;
	width: 100%;
	margin-bottom: 1.5rem;
	justify-content: center;

	grid-template-columns: 0.1fr 0.7fr 1fr 1fr 0.1fr;
	grid-template-rows: 1rem 1fr;
	grid-column-gap: 4rem;
	grid-row-gap: 2rem;
}

.dieta1,.dieta2,.dieta3 {
	display: grid;
	width: 100%;
	padding: 1rem;
	margin-bottom: 1.5rem;
	justify-content: center;
	border-color: #fffff0;
	background-color: #e9e9e9;

	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 6.5vw 6.5vw 1vw 6.5vw 6.5vw;
	grid-gap: 0.8rem;

}
div.atrasrow {grid-column: 1/2; grid-row: 1/3;}
div.letrero1 {justify-content: center;grid-column: 2/3; grid-row: 1/2;}
div.letrero2 {justify-content: center;grid-column: 3/4; grid-row: 1/2;}
div.letrero3 {justify-content: center;grid-column: 4/5; grid-row: 1/2;}
div.dieta1 {
	grid-column: 2/3; grid-row: 2/3;
}
div.dieta2 {
	grid-column: 3/4; grid-row: 2/3;
}
div.dieta3 {
	grid-column: 4/5; grid-row: 2/3;
}
div.adelanterow {grid-column: 5/6; grid-row: 1/3;}

div.letrero1 {display: flex;}
div.letrero2 {display: flex;}
div.letrero3 {display: flex;}
.adelanterow,.atrasrow {
	background-color: #e0e0e0;
}

.paso_a {
  background-color: #edf7f7;
  height : 80vh;
  display : flex;
  flex-direction: column;
  padding: 10px;
}
.paso_b {
  background-color: skyblue;
  height : 80vh;
  display : flex;
  flex-direction: column;
  padding: 10px;
}
.paso_c {
  background-color: orange;
  height : 80vh;
  display : flex;
  flex-direction: column;
  padding: 10px;
}
.encabezado_preferencias{
  background-color: #edf7f7;
  display : flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  padding:10px;
  border-radius:0.4rem;
  margin-bottom: 0.2rem;
}
.bienvenidos{
  background-color: #edf7f7;
  display : flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  padding:10px;
  border-radius:0.4rem;
  height: 80vh;
}
.p0{
  text-align: center;
  width: 100%;
  font-size:28px;
  color : #8cbc4c;
  font-weight : bold;
}
.p1{
  text-align: center;
  width: 100%;
  font-size:36px;
  color : white;
}
.p2{
  text-align: center;
  width: 100%;
  font-size:20px;
  color : #8cbc4c;
  font-weight : bold;
}
.p3{
  text-align: justify;
  width: 100%;
  font-size:16px;
  color : #626262;
  font-weight : normal;
}

/**********************************************************************************************/
/**********************************************************************************************/
div.gallery {
  display:grid;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 62px;
  border-radius: 5px;
}

div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
div.desc {
	font-size: 12px;
	text-align: center;
	padding :0px;
  height: 2rem;
}

/**********************************************************************************************/
div.galeria1 {grid-column: 1/3; grid-row: 4/6;}
div.galeria1 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria2 {grid-column: 1/4;grid-row: 1/3;}
div.galeria2 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria3 {grid-column: 3/4;grid-row: 4/5;}
div.galeria3 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria4 {grid-column: 3/4;grid-row: 5/6;}
div.galeria4 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
/**********************************************************************************************/
div.galeria6 {grid-column: 3/4;grid-row: 1/2;}
div.galeria6 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria7 {grid-column: 1/3;grid-row: 1/3;}
div.galeria7 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria8 {grid-column: 2/4;grid-row: 4/6;}
div.galeria8 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria9 {grid-column: 3/4;grid-row: 2/3;}
div.galeria9 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria10 {grid-column: 1/2;grid-row: 4/5;}
div.galeria10 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria11 {grid-column: 1/2;grid-row: 5/6;object-fit:cover; display:block;}
div.galeria11 img {width: 100%;height: 100%;}
/**********************************************************************************************/
/**********************************************************************************************/
div.galeria13 {grid-column: 3/4;grid-row: 1/2;}
div.galeria13 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria14 {grid-column: 1/3;grid-row: 1/3;}
div.galeria14 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria15 {grid-column: 2/4;grid-row: 4/6;}
div.galeria15 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria16 {grid-column: 3/4;grid-row: 2/3;}
div.galeria16 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria17 {grid-column: 1/2;grid-row: 4/5;}
div.galeria17 img {width: 100%;height: 100%;object-fit:cover; display:block;}
/**********************************************************************************************/
div.galeria18 {grid-column: 1/2;grid-row: 5/6;object-fit:cover; display:block;}
div.galeria18 img {width: 100%;height: 100%;}
/**********************************************************************************************/

#productos_predefinidos{
	display: grid;
	grid-template-columns: repeat(auto-fill,6vw);
	grid-gap: 1rem;
}

.galeria_productos {
  width: 12vh;
  height: 12vh;
}
.galeria_productos:hover {
  border: 1px solid #777;
}
.galeria_productos img {
  width: 100%;
  height: 100%;
  border: none;
  margin: auto;
}
.galeria_productos p {
  font-size: 12px;
  font-style: italic;
  height: 20px;
  text-align: center;
  font-weight: bold;
}
/**********************************************************************************************/
div.gallery4 {
  margin: 0;
  border: 1px solid #ccc;
  float: left;
  width: 20vh;
  height: 20vh;
  border-radius: 5px;
}

div.gallery4:hover {
  border: 1px solid #777;
}

div.gallery4 img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.botones_DAC {
	display: none;
}
.cajas_menu {
	display: none;
}
.letrero1,.letrero2,.letrero3 {
	display: none;
}


#resumen,#resumen2  {
	position: sticky;
	min-height: 120px;
    /*width: 380px;*/
    text-align: justify;
    word-wrap: break-word;
	margin-left:0px;
	margin-right:0px;

	display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 1rem;
}
img {
	cursor:pointer;
  width: 100%;
}
.img_receta {
	width: 100%;
  cursor:pointer
}
#resumen2 {
	position: sticky;
	min-height: 120px;
  text-align: justify;
  word-wrap: break-word;
	margin-left:0px;
	margin-right:0px;
  /*
  display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 1rem;*/
}
img {
	cursor:pointer;
  width: 100%;
}

#receta_encabezado {grid-column: 1/4;grid-row: 1/2;}
#foto_receta {grid-column: 1/2;grid-row: 2/3;}
#receta_ingredientes {grid-column: 2/3;grid-row: 2/3;}
#receta_preparacion{grid-column: 3/4;grid-row: 2/3;}
.img_receta {
  width: 100%;
  cursor:pointer
}


#patron_proteina{
	display: grid;
	grid-template-rows:repeat(2,auto);
	grid-gap: 2rem;
}
.calendario_proteina{
  grid-column: 1/1;grid-row: 1/2;
	display: grid;
	grid-template-columns:repeat(7,1fr);
	grid-gap: 2rem;
}
#controles_patron{
  grid-column: 1/1;grid-row: 2/3;
	display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 1rem;
}
#control_patron1 {grid-column: 1/2;grid-row: 1/2;}
#control_patron2 {grid-column: 2/3;grid-row: 1/2;}
#control_patron3 {grid-column: 3/4;grid-row: 1/2;}

.form_persona{
  display:grid;
  grid-template-columns: repeat(7,1fr) 40px;
  /*grid-template-rows: repeat(3,1fr);*/
  margin-bottom:1rem;
  grid-gap:1rem;
  background-color: #D5F5E3;
  padding:10px;
}
.form_persona_reporte{
  display:grid;
  grid-template-columns: repeat(8,1fr);
  /*grid-template-rows: repeat(3,1fr);*/
  margin-bottom:1rem;
  grid-gap:1rem;
  background-color: #D5F5E3;
  padding:10px;
}
.zscore{
  font-size: 12px;
  text-align: center;
}

div.btn_graph_peso{
  grid-column: 8/9;
  grid-row: 1/2;
};
div.btn_graph_peso.btn{
  width: 100%;height: 100%;object-fit:cover; display:block;
}
.grafico_peso {
  grid-column: 2/6;
  grid-row: 2/3;
}

.encabezado_persona{
  display:flex;
}
.encabezado_gral{
  display:grid;
  grid-template-columns: 70% 15% 15%;
}
.elemento {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.col_cal,.col_lip,.col_carb,.col_prot,.col_costo {
  width: 15%;
  text-align : center;
}
.col_t {
  width: 25%;
  text-align : center;
}


}