/*--------------------Perzonalizado-------------------------- */

.Contenedor-login{ /*contenedor de login */
    text-align: center;
}

.Contenedor-login img{ /* tamaño de la imagen dentro del contenedor*/
    height: 150px;
}
.textWhite{
  color: #FFFFFF;
}

/* Login nombre de la aplicacion app*/
.nom-app{
  background: rgb(242,75,39);
  color: white;
  font-size: 28pt;
  font-weight: bold;
  padding: 20px;
  margin-top: 50px;
}

#titulo h1{ /* Tamaño y color de la letra titulo */
  text-align: center;
    color: #000000;
    font-size: 20pt;
    font-weight: bold;
}

/* Inicio diseño dashboard*/
.bg-color-navBar{ /* Color del menu, navBar */
background: rgb(242,75,39);
}

.txt-color-navBar{
color: white;
}

nav .iconoBusqueda{
background: #3A3A3F;
color: white;
}

nav #nombreTitulo{
color: white;
}


nav ul li a{
color: white;
}

nav ul li a:hover{
color: #FF927D;
}

nav ul li a .colorNotificacion{
background: #3A3A3F;
color: white;
}


.bg-color-encabezado-tablaUno{
  background: #212529;
  color: white;
}

.cajaBotones ul li{
  list-style: none;
  display: inline-block;
  float: right;
}

.cajaBotones ul li{
  margin-left: 10px; 
}

/* Modal */
.modal-header{
  background: rgb(242,75,39);
  color: white;
}

.modal-content{
width: 100%;
}

.modal-body{
margin: 0 auto;
width: 100%;
}

.modal-content #formCantidad input[type="text"], input[type="email"], input[type="numbre"], input[type="password"]{
width: 100%;
height: 50px;
border:1px solid #D7D7D7;
margin: 5px auto;
}

.modal-content #formCantidad textarea{
width: 100%;
height: 80px;
border:1px solid #D7D7D7;
margin: 5px auto;
}

.modal-content form{
margin: 10px;
}

/* Fin Modal */
.btn100{
  width: 100%;
  height: 50px;
}


@media only screen and (max-width: 480px) {
  /* Tamaño de la imagen del producto*/
  .btn100{
  width: 100%;
  height: 50px;
}

}

@media only screen and (min-width: 799px) {
  /* Tamaño de la imagen del producto*/
  .btn100{
  width: 25%;
  height: 50px;
}

}

.btn-100{
  width: 100px;
}

.btn-150{
  width: 150px;
}

.btn-200{
  width: 200px;
}

.btn-250{
  width: 250px;
}


.btn-login{  /* Boton login */
  background: rgb(242,75,39);
  color: white;
}

.btn-positivo{  
  background: #058413;
  color: white;
}

.btn-positivo:hover{  
  background: #099919;
  color: white;
}

.btn-negativo{  
  background: #ba4343;
  color: white;
}

.btn-negativo:hover{  
  background: #c95858;
  color: white;
}

.btn-precaucion{  
  background: #F26E03;
  color: white;
}

.btn-precaucion:hover{  
  background: #F78224;
  color: white;
}



/* Tabla paginacion */
div.pager {
    text-align: center;
    margin: 1em 0;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #000;
    color: #fff;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #c00;
}


/* Padding */
.padding-top-10{
  padding-top: 10px;
}

.padding-top-20{
  padding-top: 20px;
}

.padding-top-30{
  padding-top: 30px;
}


.padding-bottom-10{
  padding-bottom: 10px;
}

.padding-bottom-20{
  padding-bottom: 20px;
}

.padding-bottom-30{
  padding-bottom: 30px;
}


/* Carta inicio */
.carta-img{
  position: relative;
  text-align: center;
  width: 100%;
}

.mascara{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(55,52,53,0);  
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);  
}

.mascara:hover{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(245,139,10,0.5);  
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.carta-img img{
  width: 100%;
}

.titulo-ensaladas{
  position: absolute;
  width: 100%;
  height: 50px;
  background: rgb(55,52,53,0.8);  
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);  
}

.titulo-ensaladas .texto{
  color: #FFFFFF;
  text-align: left;
  vertical-align: middle;
  padding:5px;
  font-size: 20pt;

}


/* Productos Diseño*/
.contenedor-producto{
text-align: center;
border-bottom: 1px solid #DCDCDC;
}

.contenedor-producto div{
vertical-align: middle;
margin:auto;
}

.producto{
  width: 100%;
}

/* Tamaño de la imagen del producto*/
.producto img{
    width: 100%;
    height: 100%;
  }

/* Producto Diseño Movil*/

@media only screen and (max-width: 480px) {
  /* Tamaño de la imagen del producto*/
  .detallesNotifica{
    /*display: none;*/
  }

  #nombreTitulo{
    display: none;
  }

}


@media only screen and (max-width: 799px) {
  /* Tamaño de la imagen del producto*/
  .producto img{
    width: 100%;
    height: 100%;
  }

  .contenedor-producto div{
  padding: 10px;  
}

}


/* Producto Diseño Movil*/
@media only screen and (min-width: 800px) and (max-width: 1100px) {
  /* Tamaño de la imagen del producto*/
  .producto img{
    width: 100%;
    height: 100%;
  }
}

@media only screen and (min-width: 1100px){
  /* Tamaño de la imagen del producto*/
  .producto img{
    width: 40%;
    height: 40%;
  }
}



/* Producto boton hover*/
.contenedor-producto:hover{
  background: #F6F6F6;
}

/* Boton Barra de cantidades productos*/
.barraCantidad{
  background: #FFAB08;
  color: #FFFFFF;
  border:none;
  cursor: pointer;
  text-align: center;
}

#formCantidad{
text-align: center;
vertical-align: middle;
margin: 0px auto;
padding:0px;
}


#formCantidad button{
width: 10%;
height: 50px;
border:1px solid #D7D7D7;
}

#formCantidad input{
width: 20%;
height: 50px;
text-align: left;
border:1px solid #D7D7D7;
}


/* Caja contenedor del producto titulo y descripcion*/
.tituloProducto{
  width: 100%;
  text-align: left;
}

.descripcionProducto{
  width: 100%;
  color: black;
  text-align: left;
}

/* Estatus o estado barra progresiva */

.status{
  text-align: center;
}


.barraProgresss {
  width: 100%;
} 


.barraProgresss .contenedor{
  width: 100%;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
} 

.barraProgresss .contenedor .progress-bar{
  border-radius: 5px;
  font-size: 10pt;
  width: 150px;
} 



.reloj{

}


.total{
  font-size: 14pt;
  color: #1A66AD;
  font-weight: bold;
}