html, body{
      margin: 0px;
      height: 100%;
      background-color:#EBEDEF;
      /*background-color:#DB5217;*/
    }

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://fonts.googleapis.com/css?family=Merriweather+Sans:400,400italic");
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid;
  border-color: #f44336 transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}     
    
 .tabla-archivo td {
  border: 1px solid;
  }

 input, textarea {
  border: 2px solid gray;
  border-radius: 5px;
  font-size:16px;
  accent-color:rgb(246, 118, 19);
  
 }

/* Boton para cambiar compania*/



.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
.fa-plus:before {
    content: "\f040";
}
*/

.my-float{
	margin-top:22px;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

 .v-counter {
  border-radius: 32px;
  max-width: 130px;
  overflow: auto;
  padding: 0px 4px;
  border: 1px solid #323140;
  margin: 10px;
}

.v-counter .input:hover {
  color: rgb(244, 168, 6);
  font-weight: bold;
  background-color: transparent;
}

.v-counter span {
 
  font-size: 13px;
  color: black;
  font-family: 'Open Sans';
}
.v-counter input{
  display: inline-block;
  width: 20px;
  background-color: transparent;
  outline: none;
  border: none;
  text-align: center;
  cursor: pointer;
  padding: 0px;
  color: black;
  height: 33px;
  font-family: 'Open Sans';
}



 .MenuContext {
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
  color: #1f194c;
  width: 10em;
  padding: 0.8em 0.6em;
  font-size: 1.3rem;
  position: fixed;
  display: none;
  top: 50px;
  left: 30px;
  }
  
 .MenuContext H1{
  color: black;
  font-size: 1.5rem;
  }

  .MenuContext div {
  padding: 0.3em 1.2em;
  }
  
  
  .MenuContext div:hover {
  background-color: rgba(44, 141, 247, 0.2);
  cursor: pointer;
  }
  
  

.boton-rojo {
  background-color: #f44336; /* Green */
  border: none;
  color: white;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  width: 80px;
  border-radius: 20px;
}

.boton-gris {
  background-color: #e7e7e7; /* Green */
  border: none;
  color: black;
  padding: 10px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  width: 80px;
  border-radius: 20px;
}

.boton-aceptar {
  background-color: #f44336; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  width: 80px;
}

.boton-imprimir {
  background-color: #e7e7e7; /* Green */
  border: none;
  color: white;
  padding: 0px 0px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 22px;
  width: 80px;
}


.boton-cancel {
  background-color: #e7e7e7; /* Green */
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  width: 80px;
}

.boton-limpiar {
  background-color: #e7e7e7; /* Green */
  margin-right: 0;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 20px;
}


.boton-registrar {
    background-color: #f44336; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  width: 80px;
  border-radius: 20px;

  /*
  border: none;
  color: white;
  padding: 8px 10px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 20px;
  */
}



.boton-orden {
  background-color: #f44336; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 20px;

}

.boton-orden .notificacion{
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
  animation: rubberBand 2s;
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;

}

/*
.notificacion{
  animation: rubberBand 4s infinite;
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}
*/

.carrito{
  color: black;
  position: fixed;
  top: 0px;
  right: 10px;
  display: none;
  font-family:verdana;   
  z-index: 6;
  
  }

.carrito .notificacion {
  position: absolute;
  top: -2px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
  animation: rubberBand 2s;
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}

.categorias{
 float: left;
 width: 150px; /* Set a width if you like */
 border-radius: 25px;
 border: 2px solid #CCC;
 padding-top: 10px;
}

.categorias a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 10px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  font-size: 14;
}



.categorias a:link {
  color: black;
  background-color: transparent;
  text-decoration:none;
}

.categorias a:active{
  color: black;
  background-color: transparent;
  text-decoration:none;
}

.categorias a:hover {
  color: black;
  background-color: #ccc;
  text-decoration:none;
}

.categorias a:visited {
  color: black;
  background-color: transparent;
  text-decoration:none;
}



.categorias a.active {
  background-color: #DB5217; /* Add a green color to the "active/current" link #DB5217*/
  color: white
}


#botonera{
 /*position:absolute;*/

 /*left:140px;*/
 color: red;
}

/*
.pagina{
      position: absolute;
      width:100%;
      height:100%;
    }
    */

   .Encabezado{
      /*background-color: #464EB8;*/
      background-color:#DB5217;
      height: 10vh;
      width: 100%;
      /*position: -webkit-sticky; 
      position: sticky;*/
      
      position: sticky;      
      top:0;
      font-family:verdana;   
      overflow: hidden;
      /*box-shadow:inset 1px 0px 8px 3px #f7b593;*/

    }


    .Encabezado .icono {
      display: none;
    }

   .contenido{          
      background-color: white; /*#EBEDEF;*/
      width: 100% ;
      padding-top: 10vh;
      /*position: relative;*/
      /*top:100px; */
      font-family:verdana;  
    }
    


   #demo table{
	  /*font-family: Arial, Helvetica, sans-serif;*/
  	border-collapse: collapse;
  	width: 100%;
     font-size:18px;
      font-family:Arial; 
   }
   
   #demo tr:nth-child(2n+1){background-color: #f2f2f2;}

   #demo tr:nth-child(1){background-color:#DB5217; color:white;}

   #demo tr:hover {background-color: #ddd;}

 

   .pie_pagina{
      background-color: #464EB8;
      height: 10vh;
      width: 100%;
      position: absolute;
      top:100%;

    }

   #buscaitem{
    width: 300px;
   }

   #searchbar{
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
   }

    .botonera{
      position: static;
      /*left: 170px;*/
      /*width: 80%;*/
      /*width: 100%;*/
      /*height: 100%;*/
      margin-left: 1%;
      font-size:30;
      color:black;
      font-family:verdana;
      display: flex;
      /*align-items: stretch;*/
      flex-wrap: wrap;
      overflow: auto;

    }


   
    .articulos{
      position: absolute;
      width: 39%;
      height: 100%;
      /*margin-left: 1%;*/
      left: 60%;
      font-size:25;
      color:black;
      font-family:verdana;
      display: none;
    }

    .total{
      position: absolute;
      width: 39%;
      height: 100%;
      /*margin-right: 1%;*/
      left: 60%;
      text-align: right;
      font-size:80;
      color:red;
      font-family:verdana;
      display: none;

    }



    .modalContainer {
      display: none; 
      position: fixed; 
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
      font-family:verdana;  
      font-size:18px;
    }

    .modalContainer .modal-loader{
      z-index: 2;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .modalContainer .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid lightgray;
      border-top: 10px solid #DB5217;
      width: 60%;
      font-family:verdana;  

    }

  
    
    form, .form-fields{
	display:flex;
	flex-direction:column;
	}

    .modal-content textarea{ width: 400px; }

    .modalContainer .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

     .modal-content .devuelto {
      color: #aaaaaa;
      position: absolute;
      left:calc(50%);
      font-size: 20px;
      font-weight: bold;
    }

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

    .modalContainer .dividir {
      color: #aaaaaa;
      float: right;
      font-size: 16px;
      font-weight: bold;
    }

    .modalContainer .cerrar {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

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

    .modalBotones {
      display: none; 
      position: fixed; 
      z-index: 1;
      padding-top: 0px;
      background-color: white;
      left: 0;
      top: 70px;
      width: 100%;
      height: 100%; 
      overflow:auto; 
  
      /*background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);*/
      font-family:verdana;  
    }

    .botonesMesas{
      position: sticky;
      margin-left: 1%;
      font-size:30;
      color:black;
      font-family:verdana;
      display: flex;
      flex-wrap: wrap;
      

    }
    a:link {
    color: white;
    background-color: transparent;
    text-decoration: none;
    }

    a:visited {
      color: white;
      background-color: transparent;
      text-decoration: none;
    }

    a:hover {
      color: red;
      background-color: transparent;
      text-decoration: underline;
    }

    a:active {
      color: red;
      background-color: transparent;
      text-decoration: underline;
    }
    table {

      top:0;
      bottom: 0;
      left: 0;
      width: 100%;

    }

    .centrar{
      border-radius: 15px;
      position: relative;
      left: calc(50% - 200px);
      width: 400px;
      align-self:center;
      background-color: #ffefdf19;
      box-shadow: 4px 4px 4px #999;
      display: block;
      
      
      display: flex;
      flex-direction: column;
    }


    .placeholder{
      position: relative;
      padding-top: 15px;
      padding-left: 10px;
      width: 100%;
    
    }
    
    .placeholder input{
      display: inline-block;
      width: 95%;
    }

    .pl_label{
      position: absolute;
      pointer-events: none;
      left: 14px;

      top: 18px;
      color:#999;
      transition: 0.2s;

    }
    

    input:focus ~ .pl_label, input:valid ~.pl_label{
      color:#DB5217;
      top: 0px;
      font-size: small;
    }



.Menu .titulo{
  /*
  display: flex;
  flex-wrap: wrap;
  */
  position:fixed;
  font-family:verdana;  
  color: white;
  left: 100px;
  font-weight: bold;
  top: 2px;
  display: none;
}

.Menu a{
  float: left;
  display: inline-block;
/*  padding: 14px 0px;*/
  padding-top: 10px;
  padding-left: 20px;
  font-size: 12px;
}
.Menu a::after{
    content: "\A" attr(data-nombre);
    display: block;
  }

  .Menu a:hover, .Menu img:hover{
    /*cuando pasa el cursor*/
    filter: drop-shadow(1px 0.9px 1px black);
    /*transform: scale(1.3,1.3);*/
    transform: invert(100%);
    color: #0C9;
  }

.Menu img{height:35px; width:35px;}

.hamburger {
    float: left;
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 0.8em;
    margin-right: 0em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
}

.hamburger:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}

.detalle{
  height: 250px;
  overflow-y: auto;
}
.detalle_item{
  display: flex;
  flex-direction: row;
  font-size: 18px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #EDEBE8;
}

.detalle_cobrar{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #EDEBE8;
}

.detalle_contador{
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 30px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #EDEBE8;
}

@keyframes rubberBand {
	/************
     0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }

	*************/
  
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
	    background-color: #8ebf42;
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
            background-color: #1c87c9;
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
background-color: yellow;
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

}


@media screen and (max-width: 600px) {
  
    .modalContainer {
      display: none; 
      position: fixed; 
      z-index: 1;      
      left: 0;
      top: 50%;
      width: 100%;
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
      font-family:verdana;  
      font-size:18px;
      transform: translateY(-50%);
    }

    .modalContainer .modal-content {
      width: 95%;
      font-family:verdana;  
    }

  .Encabezado{
    top: 0px;
    height: 40px; 
    background-color: #DB5217;
    width: 100%;
    display: flex;
    flex-direction: column;
    /*overflow: visible;*/
    position: absolute;
  
  
      }  

  .botonera{position:static;
   }

   .modalBotones {
    position: absolute;
    
    }


  

  .articulos{ display: none; }
  .total{display: none;}
  .contenido{
    /*
    background-color: #EBEDEF;
    display: table;
    height: 0px;
    position: rel;
    */
    padding-top: 30px;
    font-family:verdana;  
    display: flex;
    flex-direction: column;
    overflow-y: clip;
  }

  .categorias{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .botonera button{
    
    display: flex;
    flex-direction: row;
  }
  



  table {
      top:1;
      bottom: 0;
      left: 0;
      /*width: 100%;*/

    }  

    .centrar{
      position: relative;
      left: 0px;
      width: 400px;
      align-self:center;
    
      box-shadow: 2px 2px 3px #999;
      display: flex;
      flex-direction: column;
    }

    

  .boton-registrar{
   position: static;
   }



/*
  #myMesas .modalBotones{
	position: static;
  }
*/

  .boton-orden{display: none;}
  .boton-limpiar{display: none;}

  .boton-orden .notificacion{
  display: none;
  }

  .carrito {
  display: block;
  }

  .Menu .titulo{display: flex;}
  .Menu a{display: none;}

  .Menu a.icono {
    float: left;
    display: block;
    
  }

  .contenido H2{display: none;}
  .modal-content textarea{cols:1; rows:2;}
  }

  .modal-content textarea{ width: 200px; }

@media screen and (max-width: 600px) {

  .Menu{
   z-index: 5;
  position: fixed;
  background-color: #DB5217;
  width: 100%;
  height: 40px; 
}

  .Menu.responsive {position:fixed;
    align-items: center;   
    width: 100%;
    
  }


  .Menu.responsive a {
    float: left;
  
    position: relative;
    display: block;
    text-align: left;
    background-color: grey;
    text-decoration: none;
    width: 100%;
    height: 20px;
  }
  
  .Menu.responsive a.icono {
    position: relative;
    left: 0;
    top: 0;
    
  }
  
    .Menu.resposive .titulo{
     display: flex;
     flex-wrap: wrap;
     font-family:verdana;  
     color: white;
     padding-left: 30%;
     font-weight: bold;
     top: 2px;
    display: block;
    
   }

   .Menu.responsive img{
    display: none;
    
  }
  
  .Menu.responsive a::after{
    content: attr(data-nombre);
  }
}