@import url("https://fonts.googleapis.com/css?family=Crushed");
@import url("https://fonts.googleapis.com/css?family=Oswald:400,500,600,700");
*{
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	font-family:"Arial", sans-serif;
}

body {
	 /* display: flex; */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* overflow: hidden; */
		/* width: 100vw; */
		/* height: 90vh; */
		color: #455A64;
}


.nav-link {
  color: black;
  font-family: "Oswald", sans-serif;
	font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 22px;
		align-items: center;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
		padding-top: 0.5rem;
    padding-right: 1rem;
    padding-bottom: 0;
    padding-left: 1rem;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
.nav-item,.nav-link a:hover {
	 color: #00864e !important;
 }
 .nav-item a:hover {
 	 color: #00864e !important;
  }

h1 {
color:black;
  }
.badge{
  font-size: 100%;
}

.Borde-inf  {
  border-bottom: 2px solid #e0e0e0;

}
header {
    position: fixed;
    width: 100%;
	  background: white;
    z-index: 9999;
    top: 0px;

  }

	.Principal-general{
      /* padding-top:2%; */
			/* padding-left: 1rem;
			padding-right: 1rem; */
			/* margin-left: 0.2rem;
			margin-right: 0.2rem; */
      /* margin-top:60px; */
  }
	
.nombreSucursal{
	float: right;
}
.numeroSucursal{
	visibility:hidden;
	float: right;
}

.dce-sel-camera{
	display:none;
}

/* .video-box{
	width:20rem;
padding: 2rem;
} */

.results{
	/* display: flex; */
	  position: absolute;
    /* justify-content: center;
    align-items: center; */
/*border: 1px solid #ced4da; */
background: #eee;
padding-left: 0.5rem;
padding-right: 0.5rem;
/* box-shadow: 0 0.5rem 3rem #fe8e14;*/
min-height: 50vh;
    /* height: 100vh; */

/* position: fixed;
	left:50%;
	transform: translateX(50%);
	width: 100%;

	background: white;
	z-index: 9999;


	position: absolute; /* Posiciona el div en relación al div más cercano con posición relativa */
     top: 200px; /* Posiciona el div en la parte superior del div padre */
     /* left: 330px; /* Posiciona el div en el lado izquierdo del div padre */ 
     z-index: 1;

margin-left: 0;
width: 100%;



}

.qr-reader, .qr-reader-results,   .qr-reader-precio, .qr-reader-otra{
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
	text-align: right;
}

.qr-reader-disponible{
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	text-align: right;

}

.qr-reader-detalle{
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
}

.areaTexto{
	width: 100%;
	box-sizing: border-box;
	background: #eee;
	/* background-color: #c6e3d766; */
	 box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
	border:none;
margin-bottom: 0.5rem;
margin-top: 0.5rem;

}

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

		.hidden {
    display: none;
}

/* Estilos para la tabla */
table {
		border-collapse: collapse;  /* Los bordes de las celdas se colapsan en un solo borde */
		width: 100%;  /* La tabla ocupa todo el ancho disponible */
}

/* Estilos para las celdas de la tabla */
th, td {
		border: 1px solid black;  /* Cada celda tiene un borde */
		text-align: center;  /* El texto está centrado dentro de la celda */
		padding: 8px;  /* Espacio alrededor del contenido de la celda */
}

/* Estilos para la primera fila de la tabla */
th {
		background-color: #198754;
		 /* #4CAF50;  /* Fondo verde */
		color: white;  /* Texto blanco */
}

/* Estilos para las filas intercaladas */
tr:nth-child(even) {
		background-color: #f2f2f2;  /* Fondo gris claro para las filas pares */
}


button {
		font-size: 1.5rem;
		margin-bottom: 2vh;
}


span {
		font-size: 0.8rem;
}

.latest-result {
		/* display: block; */
		margin: 0 0 0 0;
 padding: 0.4rem 0.8rem;
		padding-left:0.5rem;
		padding-right:0.5rem;
background: #eee;
		color: inherit;

		width: auto;
		border: none;
		font-size: 1rem;
		border-radius: 0.2rem;
		text-align: right;
}

.latest-result::placeholder {
		color: #B0BEC5;
}

.latest-result:focus {
		 outline: none;
		box-shadow: 0.1rem 0.4rem 0.8rem #fe8e14;
}

#results {
		border: 1px dashed grey;
		overflow: auto;
		width: 75vw;
		 padding: 2vmin;
		margin-bottom: 3vh;
		height: 15vh;
}

.resultText {
		color: #cE5E04
}

.bigger {
		font-size: large;
		margin-bottom: 2%;
}

#UIElement {
	position: relative;

		margin: 2vmin auto;
		text-align: left;
		font-size: medium;
		height: 70vh;
		width: 100vw;
		background: #eee;
}

#UIElement img {
		max-width: 100%;
		max-height: 100%;
		border: solid 1px gray;
}


@media (min-width: 721px) {
.topBar {
  height: 10px;
  background: black;
  color: white;
  text-align: center; }
  .topBar .text {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff;
    align-self: center;
    justify-content: center;
    padding: 5px ;
    }
    .topBar .text .envio-topbanner {
      color: #1DB058; }
    .topBar .text .elipsis {
      background: white;
      width: 6px;
      height: 6px;
      border-radius: 100%;
      align-self: center;
      margin: 0 12px 15px;
			padding-bottom: 6px;}
}

			@media only screen and (max-width: 768px) {
			header.header-container div.topBar div.text {
			    display: inline;
			}
			.topBar {
			  height: 12px;
			  background: black;
			  color: white;
			  text-align: center; }
			  .topBar .text {
			    font-family: Open Sans;
			    font-style: normal;
			    font-weight: bold;
			    font-size: 16px;
			    line-height: 18px;
			    display: flex;
			    align-items: center;
			    text-align: center;
			    color: #ffffff;
			    align-self: center;
			    justify-content: center;
			    padding: 5px ;
			    }
			    .topBar .text .envio-topbanner {
			      color: #1DB058; }
			    .topBar .text .elipsis {
			      background: white;
			      width: 6px;
			      height: 6px;
			      border-radius: 100%;
			      align-self: center;
			      margin: 0 12px; }
						.Principal{
					      padding-top:2%;
								margin-left: 5rem;
								margin-right: 4rem;
					      margin-top:150px;
					  }
		}
			@media only screen and (max-width: 768px){
			header.header-container div.topBar {
			    padding: 10px;
			    height: 60px;
			}
}

h1,h4{
  text-align: center;
	display: block;
}