/*
* {
  
}*/

@font-face 
{
	font-family: 'Caveat';
	src: url('../fonts/Caveat.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}

html
{
	height: 100%;
	
}
body
{
	color:black;
	
	/*background:rgb(243, 255, 248);*/
	background:#f3f3f3;
	margin:0px;
	font-size: 14px;
	font-family:  Roboto, Helvetica, sans-serif;
	font-weight: 400;
	font-style: normal;
	/*color: #858585;*/
	height: 100%;
	
	display: flex;
	flex-direction: column;
	  
}

.normal {
	font-size: 14px;
	font-family: Roboto,sans-serif;
	font-weight: 400;
	font-style: normal;
}


hr
{		
	border-top: solid #14c10e;
	border-width: 1px 0 0;
	height: 0;

}


input
{

	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;
	/*
	background-color: #14c10e;*/
	background-color:white;
	color:black;	
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;



	
}


.botonesRadio{   
    vertical-align: baseline;
	border-radius: 0px;
	/*border: 1px  solid #14c10e;*/
	border: 0px ;
	padding: 0px;
	/*
	background-color: #14c10e;*/
	
 }



select
{

	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 2px;
	/*
	background-color: #14c10e;*/
	background-color:white;
	color:black;	
	text-align: left;
	vertical-align: middle;	
}

select:hover
{
	cursor:pointer;
}


.banner{
	border-radius: 20px;
	margin: auto;
	display:block;
}

.landing-page-img
{
	border-radius: 20px;
	margin: auto;
	width: 50%;
	
	opacity: 0.3;

}

.landing-page-img-banner
{
	
	margin: auto;

	
	opacity: 0.3;
	height:150px;
	width: 100%;
	object-fit: cover;

}

.landing-page-container
{
	position: relative;
	text-align: center;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
}

.landing-page-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.landing-page-left {
	/*position: absolute;*/
	position:relative;
	top: 8px;
	left: 16px;
}

.boton
{
	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;

	/*padding: 10px:*/
	/*
	background-color: #14c10e;*/
	background-color:white;
	color:black;
	
	
	text-align: center;
	vertical-align: middle;
	margin:5px;
	box-sizing: border-box;		  
}

.botonCerrar
{
	padding:1px 6px;
	margin:0px;
}

.botonMargen
{
	padding: 10px;
}

.noMostrar
{
	display:none;
}
.boton2
{
	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;
	/*
	background-color: #14c10e;*/
	background-color:#c7f5be;
	color:black;
	
	
	text-align: center;
	vertical-align: middle;
	margin:5px;
	box-sizing: border-box;
}

.botonRedondo {
	display:block;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 1px  solid  #468326;
	padding-top:8px;
  }


.botonGrandeInicio
{
	width:350px;
}

.bordeContundente
{
	border: 2px solid #468326;
}

.botonCentradoConInput /*solo en pantallas de login*/
{
	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 10px;
	/*
	background-color: #14c10e;*/
	background-color:white;
	color:black;
	
	
	text-align: center;
	vertical-align: middle;
	
	box-sizing: border-box;
	 			  
}

.botonPeq
{
	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 2px;
	/*
	background-color: #14c10e;*/
	background-color:white;
	color:black;
	
	
	text-align: center;
	vertical-align: middle;
	margin:5px;
	 			  
}

.boton:hover, .botonPeq:hover, .botonCentradoConInput:hover, .boton2:hover
{
	cursor:pointer;
	background-color: #468326;
	color: #fff;
	transition:0.4s;
	fill: red;
}


.formulario
{
	color:black;
	/*text-shadow: 2px 2px 4px white;*/
	margin: auto;
	background-color:white;
	border-radius: 15px;
	/*border: 2px solid #73AD21;*/
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	padding: 20px;
	width: 300px;
	/*height: auto;*/
	
}


.formulario-index
{
	color:black;
	/*text-shadow: 2px 2px 4px white;*/
	margin: auto;
	background-color:white;
	border-radius: 15px;
	/*border: 2px solid #73AD21;*/
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	padding: 20px;
	width: 250px;

	margin-top:90px;

	
	/*height: auto;*/
	
}

.banner-peq-index
{
	color:black;
	/*text-shadow: 2px 2px 4px white;*/
	margin: auto;
	background-color:white;
	border-radius: 15px;
	/*border: 2px solid #73AD21;*/
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	padding: 20px;
	width: 250px;

	margin-top:20px;
	box-sizing:content-box;

	

	
	/*height: auto;*/
	
}

.tablaCentrada{
	margin:auto;
}

.solo-un-div-en-pantalla
{
	border-radius: 15px;
	width:800px;

	margin: 10px auto 10px;
	text-align: center;
	display: block;
}

.imagen-borde-redondo-receta
{
	border-radius: 15px;
	width:400px;

	margin: 10px auto 10px;
	display: block;
	cursor:pointer;
}

.imagen-borde-redondo
{
	border-radius: 15px;
	width:400px;

	margin: 10px auto 10px;
	display: block;
	cursor:pointer;
}

.imagen-borde-foto-cliente
{
	border-radius: 5px;
	width:100px;

	
	display: block;
	cursor:pointer;
}




.div-imagen-borde-redondo-receta
{
	width:600px;

}


.eliminarDiv
{
	transition: 0.5s all linear;
	opacity: 0;
}



.div-cuadricula{
	border-radius: 5px;
	margin:10px;
	border: 1px solid rgb(0,0,0,0.3);
	
	
}

.div-de-tablas{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*overflow: scroll;*/
	align-content: space-between;
}

.div-de-tablas::after  /* va con tabla-en-div, hay que poner englobando 
a todas las tabla-en-div un div-de-tablas*/
{
  content: "";
  clear: both;
  display: table;
}

.tabla-en-div
{
	/*border-collapse: collapse;*/
	border-radius: 10px 10px 10px 10px;
	/*border: 2px solid #14c10e;*/
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	background-color: white;
	margin: 10px;
	padding: 10px;
	

}

.tabla-en-div th
{
	text-align:left;

}

.div-en-fila
{
	/*border-collapse: collapse;*/
	border-radius: 10px 10px 10px 10px;
	/*border: 2px solid #14c10e;*/
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	background-color: white;
	/*margin: 5px 5px 10px 5px;*/
	padding: 10px;
	margin:10px;
	min-width: 300px;
		
	
}

.div-ancho-minimo
{
	padding: 10px;
	margin:10px;
	min-width: 300px;
	
}

.manita:hover{
cursor:pointer;
}

textarea
{
	border-radius: 10px;
	/*border: 2px solid #73AD21;*/
	border-collapse: collapse;
	padding: 10px;
	font-size: 14px;
	font-family: Roboto,sans-serif;
	font-weight: 400;
	font-style: normal;
	
	margin:auto;
}
.tabla
{
	border-radius: 10px;
	/*border: 2px solid #73AD21;*/
	border-collapse: collapse;
	padding: 10px;
	
	margin:auto;
	
}

.tabla-cabecera
{
	border-radius: 10px 10px 0px 0px;
	padding:10px;
	background-color: #468326;
	color: #ffffff;
	
}



.tabla-no-seleccionable 
{
	margin:auto;
	padding: 10px;
	border-collapse: collapse;
	background:#f3f3f3;
	
	text-align: center;
    
    box-shadow: 0px 0px 10px rgba(114, 114, 113, 0.5);

    border-radius: 10px;
    	
}

.tabla-no-seleccionable tr, .tabla-no-seleccionable td
{
	padding:10px;	
}


.tabla-no-seleccionable th:first-child
{
	border-radius: 10px 0 0 0px;
}
.tabla-no-seleccionable th:last-child {
  border-radius: 0 10px 0px 0; 
}

.tabla-no-seleccionable th {
  
  background-color: #468326;
  color: #ffffff;
  padding:10px;
}


.tabla-seleccionable 
{
	margin:auto;
	padding: 10px;
	border-collapse: collapse;
	background:#f3f3f3;
	width:100%;
	text-align: center;
    
    box-shadow: 0px 0px 10px rgba(114, 114, 113, 0.5);

    border-radius: 10px;
    	
}

.tabla-seleccionable tr, .tabla-seleccionable td
{
	padding:10px;	
}



.tabla-seleccionable th:first-child
{
	border-radius: 10px 0 0 0px;
}
.tabla-seleccionable th:last-child {
  border-radius: 0 10px 0px 0; 
}

.tabla-seleccionable th {
  
  background-color: #468326;
  color: #ffffff;
  padding:10px;
}




.tabla-seleccionable th:hover
{
	cursor:auto;	
}

.tabla-seleccionable tr:nth-child(even){
	background-color: white;
}

.tabla-seleccionable tr:hover 
{
	background-color: #ddd;
	cursor:pointer;	
}


.tabla-seleccionable tr:last-child td:first-child {
  border-radius: 0px 0px 0px 10px;
}

.tabla-seleccionable tr:last-child td:last-child {
  border-radius: 0px 0px 10px 0px;
}






.tabla-seleccionable-altura-fija
{	
	
	max-height: 600px;
	overflow-y: auto;
	
	
}


.div-tabla-seleccionable
{
	overflow-x:auto;
}

.texto-rojo
{
	color:red;
}

.texto-verde
{
	color:green;
}


.centrarImagenesYTextoDiv
{
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

/* Hacer ventanas modales foto*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 97%;
  height: 97%;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius: 16px;

}

/* Add Animation */
.modal-content{  
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform: scale(0.1)} 
	to {transform: scale(1)}
  }

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  height: 35px;
}

.modal-body {
	padding: 2px 16px;
	border-radius: 15px;
	text-align: center;
}
.imagenModal{
	border-radius: 15px;
	width:75%;
	overflow: auto;

	margin: 10px auto 10px;
}
.modal-footer {
  padding: 2px 16px;
  /*background-color: #5cb85c;
  color: white;*/
}

/* Fin de modales */

.mapa{
	
	height: 800px;
	border-radius:15px;
	z-index:0;
}


/* Hacer ventanas modales eleccion farmacia*/
.modal-Farma {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 10px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content-Farma {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 97%;
	height: 97%;
	overflow: auto;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	border-radius: 15px;
  
  }
  
  /* The Close Button */
  .close-Farma {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close-Farma:hover,
  .close-Farma:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
  }
  
  .modal-header-Farma {
	padding: 2px 16px;
	background-color: #5cb85c;
	color: white;
  }
  
  .modal-body-Farma {
	  padding: 2px 16px;
	  border-radius: 15px;
	  text-align: center;
  }

  .modal-footer-Farma {
	padding: 2px 16px;
	/*background-color: #5cb85c;
	color: white;*/
  }

  .modal-Farma{  
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform: scale(0.1)} 
	to {transform: scale(1)}
  }


  
  /* Fin de modales eleccion farmacia*/




  .modal-hacer-foto {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	/*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	
  }
  
  .modal-video-foto
  {
	border-radius: 16px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 50%;
	margin: auto;

  }
  /* The Close Button */
  .close-foto {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
	position:absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	
  }
  
  .close-foto:hover,
  .close-foto:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
  }
  
  .modal-header-hacer-foto {
	padding: 2px 16px;
	background-color: #5cb85c;
	color: white;
  }
  
  .modal-body-hacer-foto {
	  border-radius: 15px;
	  text-align: center;

  }

  .modal-footer-hacer-foto {
	padding: 2px 16px;
	/*background-color: #5cb85c;
	color: white;*/
  }

  .modal-hacer-foto{  
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform: scale(0.1)} 
	to {transform: scale(1)}
  }
  
  /* Fin de modales foto*/



/* Página */

.cabecera {

  text-align: left;
  /*background: rgb(207, 230, 210);*/
  color: black;
}


.navbarSuperior {
  display: flex;
  background-color: #333;
}


.navbarSuperior a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

.navbarSuperior a:hover {
  background-color: #ddd;
  color: black;
}


.cuerpoPagina {  
	flex: 1 0 auto;
	display:block;
  /*width:1280px;
  margin:auto;*/ /*Centra la página a 1280px solo el cuerpo de la página*/
 /* display: flex;
  flex-flow: row wrap;*/
  
}

.lateral {
  /*flex: 200px;*/
  float:left;
  
  /*background-color: light-green;*/
  padding: 10px;
  transition: margin-left 0.5s;
  z-index: 2;

	

  
}

.overlay {
	position:fixed;
	width:100%;
	height: 100%;
	display:none;
	background-color: rgb(0,0,0,0.5);
	cursor: pointer;
	z-index: 1;
	
}


.principal {
  /*flex: 80%;*/
  /*float:left;*/
  
  /*background-color: light-green;*/
  padding: 10px;
  overflow:auto;
  max-width: 1300px;
  margin:auto;
  /*
  margin-left: auto;
  margin-right: auto;*/
  /* Divs centrados y con ancho maxi de 1200*/
}




.pie {
  clear:both;
  padding: 20px;
  text-align: center;
  background: rgb(207, 230, 210);
  flex-shrink: 0;
}


.lateral ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/*
.lateral li {
  padding: 8px;
  width:200px;
  margin-bottom: 7px;

  background-color: #468326;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius: 15px;
}*/

.lateral li:hover {
  

	color:black;
	cursor:pointer;
	background-color:white;
	transition:0.4s;
}


.lateral a:link {
  text-decoration: none;
}

.lateral a:visited {
  text-decoration: none;
}

.lateral a:hover {
  text-decoration: none;
}

.lateral a:active {
  text-decoration: none;
}



.texto-legal a:link {
	text-decoration: none;
	font-weight: bold;
	color:black;
  }
  
.texto-legal a:visited {
	text-decoration: none;
	font-weight: bold;
	color:black;
	
  }
  
.texto-legal a:hover {
	text-decoration: underline;
	font-weight: bold;
	color:#03971a;
  }


.ocultarMostrarMenuBotonMostrar, .ocultarMostrarMenuBotonCerrar
{
	
	display:none;
}


.camara video {
  width: auto;
  height: auto;

}

.botonCamaraUp {
	position: fixed;
	top: 10%;
	width:100%;
	margin:auto;
	/*transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);*/
	/*background-color: #555;*/

	text-align: center;
}


.botonCamaraDown {
	position: fixed;
	bottom: 10%;
	width:100%;
	margin:auto;
	/*transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);*/
	/*background-color: #555;*/

	text-align: center;
  }


.texto-grande
{
	font-size: 36px;
}



.mensaje-temporal-error
{
  	text-align: center;
	margin: auto;
	
	border-radius: 10px 10px 10px 10px;
	border: 2px solid #ff5e5e;
	background-color: #ffa6a6;
	/*margin: 5px 5px 10px 5px;*/
	padding: 10px;
	opacity: 1;
  	transition: opacity 0.6s; /* 600ms to fade out */
}

.mensaje-temporal
{
  	text-align: center;
	margin: auto;
	
	border-radius: 10px 10px 10px 10px;
	border: 2px solid #14c10e;
	background-color: #cae8ca;
	/*margin: 5px 5px 10px 5px;*/
	padding: 10px;
	opacity: 1;
  	transition: opacity 0.6s; /* 600ms to fade out */
}

.mensaje-temporal-boton-cerrar {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
  }
  
.mensaje-temporal-boton-cerrar:hover {
color: black;
}


.text-area-toda-pantalla
{
	width:80%;
}

.centrado
{
	text-align: center;
}

.pantalla-inicio-div
{
	text-decoration: none;
}

.pantalla-inicio-div li:hover {
  

	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;
	/*
	background-color: #14c10e;*/
	background-color: #468326;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	margin:5px;
	cursor: pointer;
	transition:0.4s;
}

.pantalla-inicio-div li {
  

	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;
	/*
	background-color: #14c10e;*/
	text-align: center;
	vertical-align: middle;
	margin:5px;
	transition:0.4s;
}

.pantalla-inicio-div ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
  }

.pantalla-inicio-div a:link {
  color:black;
  text-decoration: none;
}

.pantalla-inicio-div a:visited {
  color:black;
  text-decoration: none;
}

.pantalla-inicio-div a:hover {
  text-decoration: none;
}

.pantalla-inicio-div a:active {
  text-decoration: none;
}


/* Popup modal*/



/* The Modal (background) */
.modal-popup {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	-webkit-animation-name: fadeIn; /* Fade in the background */
	-webkit-animation-duration: 0.4s;
	animation-name: fadeIn;
	animation-duration: 0.4s
  }
  
  /* Modal Content */
  .modal-content-popup {
	
	background-color: #fefefe;
	width: 300px;
	border-radius: 15px;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	


  }

  .modal-popup-privacidad {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	-webkit-animation-name: fadeIn; /* Fade in the background */
	-webkit-animation-duration: 0.4s;
	animation-name: fadeIn;
	animation-duration: 0.4s;
	display:flex;
	justify-content: center;
	
	
  }

  .modal-content-popup-privacidad {
	
	background-color: #fefefe;
	
	border-radius: 15px;
	
	
	overflow: auto;
	


  }

  .modal-body-popup-privacidad {
	padding: 20px;
	
}
  
  /* The Close Button */
  .close-popup {
	position: absolute;
	top: 0px;
	right: 20px;
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
  }
  
  .close-popup:hover,
  .close-popup:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
  }
  
  .modal-header-popup {
	padding: 10px;
	background-color: #cae8ca;
	color:  #0e650b;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	
  }

 
  .modal-header-popup-error { /* también se usa con los popup que queremos que salgan en rojo, como dar de baja la farmacia */
	padding: 10px;
	
	/*border: 2px solid #ff5e5e;*/
	background-color: #ffa6a6;
	color:  #890000;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	
  }

  .modal-header-popup-pregunta {
	padding: 10px;
	
	/*border: 2px solid #ff5e5e;*/
	color:  #008fb3;
	background-color: #5edfff;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	
  }
  
  .modal-body-popup {
	  padding: 20px;
	  text-align: center;
}
  
  
  /* Add Animation */
  @-webkit-keyframes slideIn {
	from {bottom: -300px; opacity: 0} 
	to {bottom: 0; opacity: 1}
  }
  
  @keyframes slideIn {
	from {bottom: -300px; opacity: 0}
	to {bottom: 0; opacity: 1}
  }
  
  @-webkit-keyframes fadeIn {
	from {opacity: 0} 
	to {opacity: 1}
  }
  
  @keyframes fadeIn {
	from {opacity: 0} 
	to {opacity: 1}
  }


/* Fin de popup modal*/





.info-farma-imagen-principal
{
	border-radius: 15px;
	width:400px;

	margin: 10px auto 10px;
	display: block;
	
}

.info-farma-imagen-secundaria
{
	border-radius: 15px;
	width:200px;

	margin: 10px;
	
}




/*@media screen and (max-width: 4096px) {*/

	

.lateral {
	padding:0px;
	padding-top:40px;
	height: 100%;
	width: 0px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #f3f3f3;
	overflow-x: hidden;
	transition: 0.5s;

}


.lateral .ocultarMostrarMenuBotonCerrar {
	position: absolute;
	top: 10px;
	right: 25px;
	font-size:30px;
	
	margin-left: 50px;
}

.lateralChat{
	padding:0px;
	padding-top:60px;
	height: 100%;
	
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #f3f3f3;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: 0.5s;
	/*display:none;
	width: 500px;*/
	width:0px;

}


.lateralChat .ocultarMostrarMenuBotonCerrar {
	position: absolute;
	top: 10px;
	right: 25px;
	font-size:30px;
	
	margin-left: 50px;
	text-decoration: none;
}

.lateralChat .chatConversacionCon {
	position: absolute;
	top: 10px;
	
	margin-left: 10px;
	text-decoration: none;
	display:none;
}

.boton-peq-chat
{
	
	padding:5px 5px 5px 5px;

}


.posiblesDestinatariosChat{
	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;
	
	background-color: #ffffff;
	text-align: center;
	vertical-align: middle;
	margin:5px;
	transition:0.4s;
}
.posiblesDestinatariosChat:hover{

	border-radius: 6px;
	/*border: 1px  solid #14c10e;*/
	border: 1px  solid  #468326;
	padding: 5px;
	/*
	background-color: #14c10e;*/
	background-color: #468326;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	margin:5px;
	cursor: pointer;
	transition:0.4s;
	

}

.chat-con-mensajes-no-leidos
{
	
	animation-name: colorBoton;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease;
}

.notificaciones-con-mensajes-no-leidos
{
	
	animation-name: colorBoton;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease;
}



@keyframes colorBoton {
	to {
	  background-color: rgb(0, 255, 102);
	  }
  }

.enviarMensajeChat{
	position:sticky; /*El div será ubicado con relación a la pantalla*/
	
	
	text-align: right;
	bottom:50px; 
	overflow-y: none;
	display:none;

}
.mensajesChat{
	position:relative;
	left:0px; 
	right:0px; 
	height: calc(100% - 120px);
	overflow-y: auto;
	display:none;


}

.chatsDisponibles{
	position:relative;
	left:0px; 
	right:0px; 
	height: calc(100% - 60px);
	overflow-y: auto;
}

.bloqueChat{
	position:relative;
	left:0px; 
	right:0px; 
	height:100%;
	overflow-y: none;
}


.chat-centro
{

	margin: auto;
	padding: 10px;
	border-radius: 10px;
	
	width:fit-content;
	background-color: #dddddd;
	color: black;
	text-align: center;
	
}

.chat-izquierda
{
	border-radius: 10px;

	margin: 20px;
	margin-right: 80px;
	padding: 10px;
	
	
	background-color: #ffffff;
	color: black;
	text-align: left;
	animation-name: desdeIzq;
	animation-duration: 1s;
	
}

.chat-derecha
{
	border-radius: 10px;

	margin: 20px;
	margin-left: 80px;
	padding: 10px;
	
	background-color: #cae8ca;
	color:  black;
	text-align: right;
	animation-name: desdeDer;
	animation-duration: 1s;

}
.chat-derecha-peq
{
	text-align: right;
	font-size: x-small;
	color:  rgb(104, 104, 104);
}

.chat-izquierda-peq
{
	text-align: right;
	font-size: x-small;
	color:  rgb(104, 104, 104);
}

@keyframes desdeIzq {
	from {
		margin-left: 100%;
	  }
	
	  to {
		margin-left: 20px;
	  }
}

@keyframes desdeDer {
	from {
		margin-right: 100%;
	  }
	
	  to {
		margin-right: 20px;
	  }
}
	

.principal {
	transition: margin-left .5s;
	padding: 16px;
}

.ocultarMostrarMenuBotonMostrar, .ocultarMostrarMenuBotonCerrar
{
	font-size:30px;
	cursor:pointer;
	display:inline;
}

.lateral .textoMenuNoSeleccionable
{
	padding:8px;
	font-weight: bold;
	
}
.lateral li {
	
	width:240px;
	/*margin:8px;*/
	padding:8px;
	/*background-color: #33b5e5;*/
	
	color:black;
	/*color: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	border-radius: 15px;*/
}

.lateral li:hover {
	
	cursor: pointer;
	color: white;
	background-color: #468326;
}

/*}*/


.formulario-index-res-peq
{
	display:none;
}

.areaDeTexto
{
	vertical-align: middle;
	width: 415px;
}



@media screen and (max-width: 885px) {
	
	.lateralChat{
		padding:0px;
		padding-top:60px;
		height: 100%;
		
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #f3f3f3;
		overflow-x: hidden;
		transition: 0.5s;
		/*display:none;
		width: 400px;*/
		width:0px;
	  }
	
	.formulario-index
	{
		display:block;
		color:black;
		
		margin: auto;
		background-color:white;
		border-radius: 15px;
		/*border: 2px solid #73AD21;*/
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		padding: 20px;
		width: 250px;
		margin-top:90px;
		
		
	}
	.formulario-index-res-peq
	{
		display:block;
	}

	.mapa{
	
		height: 400px;
		border-radius:15px;
		z-index:0;
	}
	.formulario-index
	{
		display:block;
		color:black;
		
		margin: auto;
		background-color:white;
		border-radius: 15px;
		/*border: 2px solid #73AD21;*/
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		padding: 20px;
		width: 250px;
		margin-top:0px;
		
		
	}

}






@media screen and (max-width: 600px) {
	
	
	.lateralChat{
		padding:0px;
		padding-top:60px;
		height: 100%;
		
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #f3f3f3;
		overflow-x: hidden;
		transition: 0.5s;
		/*display:none;
		width: 400px;*/
		width:0px;
	  }
	
	
	.imagen-borde-redondo-receta
	{
		width:250px;
	}
	.principal {
	  transition: margin-left .5s;
	  padding: 4px;
  	}

  	.div-cuadricula{
		border-radius: 5px;
		margin:2px;
		padding: 0px;
		border: 1px solid rgb(0,0,0,0.3);
	
  	}
	.banner{
		width:400px;
		border-radius: 20px;
		margin: auto;
		display:block;

	}
	.formulario{
		color:black;
		margin: auto;
		display:block;
		
		background-color:white;
		border-radius: 15px;
		/*border: 2px solid #73AD21;*/
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		padding: 20px;
		
		/*height: auto;*/
	}

	
	.solo-un-div-en-pantalla
	{
		border-radius: 15px;
		width:400px;
		margin: 10px auto 10px;
		display: block;
	}
	.texto-grande
	{
		font-size: 24px;
	}

	.text-area-toda-pantalla
	{
		width:80%;
	}

	.mapa{
	
		height: 400px;
		border-radius:15px;
		z-index:0;
	}

	.info-farma-imagen-principal
	{
		border-radius: 15px;
		width: 325px;

		margin: 10px auto 10px;
		display: block;
		
	}


	.areaDeTexto
	{
		vertical-align: middle;
		width: 215px;
	}

	.formulario-index
	{
		display:block;
		color:black;
		
		margin: auto;
		background-color:white;
		border-radius: 15px;
		/*border: 2px solid #73AD21;*/
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		padding: 20px;
		width: 250px;
		margin-top:0px;
		
		
	}

	

	
}


@media screen and (max-width: 375px) {
	
	
	.lateralChat{
		padding:0px;
		padding-top:60px;
		height: 100%;
		
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #f3f3f3;
		overflow-x: hidden;
		transition: 0.5s;
		/*display:none;
		width: 350px;*/
		width:0px;
	  }
	
	
	.imagen-borde-redondo-receta
	{
		width:250px;
	}
	.principal {
	  transition: margin-left .5s;
	  padding: 4px;
  	}

  	.div-cuadricula{
		border-radius: 5px;
		margin:2px;
		padding: 0px;
		border: 1px solid rgb(0,0,0,0.3);
	
  	}
	.banner{
		width:375px;
		border-radius: 20px;
		margin: auto;
		display:block;

	}
	.formulario{
		color:black;
		margin: auto;
		display:block;
		
		background-color:white;
		border-radius: 15px;
		/*border: 2px solid #73AD21;*/
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		padding: 20px;
		
		/*height: auto;*/
	}

	.solo-un-div-en-pantalla
	{
		border-radius: 15px;
		width:375px;
		margin: 10px auto 10px;
		display: block;
	}
	.texto-grande
	{
		font-size: 24px;
	}

	.text-area-toda-pantalla
	{
		width:80%;
	}

	.mapa{
	
		height: 400px;
		border-radius:15px;
		z-index:0;
	}

	.info-farma-imagen-principal
	{
		border-radius: 15px;
		width: 300px;

		margin: 10px auto 10px;
		display: block;
		
	}

	.areaDeTexto
	{
		vertical-align: middle;
		width: 200px;
	}

	

	
}