.inst
		{
		  border:1px solid black;
		}
		input:focus{
			outline: none;
		}

	 
		/* Estilos para el fondo de la ventana modal */
 /* Estilos para la tabla */
      #productsTable {
        width: 100%;
        max-width: 800px;
        border-collapse: collapse;
        margin-top: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden; /* Para que los bordes redondeados se apliquen correctamente */
      }

      #productsTable th,
      #productsTable td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
      }

      #productsTable th {
        background-color: #007bff;
        color: white;
        text-transform: uppercase;
      }

      #productsTable tr:nth-child(even) {
        background-color: #f2f2f2;
      }

      #productsTable tr:hover {
        background-color: #e0e0e0;
      }

      /* Estilos para las imágenes de los productos en la tabla */
      .product-image-thumbnail {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
      }

      .product-image-thumbnail:hover {
        transform: scale(1.05);
      }

      /* --- Estilos para la ventana modal --- */
     

      .modal-content {
        margin: auto;
        display: block;
        max-width: 90%; /* Limita el tamaño de la imagen dentro del modal */
        max-height: 90%;
        border-radius: 8px; /* Bordes redondeados para la imagen */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
      }

      /* El botón de cerrar */
      .close-button {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #fff; /* Color blanco para el botón */
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .close-button:hover,
      .close-button:focus {
        color: #bbb;
        background-color: rgba(0, 0, 0, 0.7);
        text-decoration: none;
        outline: none; /* Elimina el contorno de enfoque */
      }

      /* Animación para el modal */
      @keyframes zoomIn {
        from {
          transform: scale(0.8);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      .modal-content {
        animation-name: zoomIn;
        animation-duration: 0.3s;
      }
			
	
	
	.datepicker{
		z-index:1151 !important;
		}

	
	/*temas de las tablas*/
			.contenedor{margin:20px auto;width:100% ; font-weight:500;}
					 
					table {width:100%;box-shadow:0 0 10px #ddd;  border-collapse: collapse;}
						
						
					tr {color:#000; border-radius:0px 0px 0px 0px; margin: 2em;
						font-size:12px;width:30px;height:20px;margin:25px ;
				background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(left, #ffffff 0%, #fcfcfc 100%, #ededed 100%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #ffffff 0%,#fcfcfc 100%,#ededed 100%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ffffff 0%,#fcfcfc 100%,#ededed 100%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
						
						}
					 
							
					
	th { background:#fff;color:#ffffff; border-radius:0px 1px 1px 1px; margin: 2em; 
						
	font-size:12px;width:30px;height:20px;margin:25px;border-radius:0px 0px 0px 0px; text-align:center;
						
		background: -moz-linear-gradient(left, #258dc8 0%, #258dc8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #258dc8 0%,#258dc8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #258dc8 0%,#258dc8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	
						
						}
					 
					 
	td {border:solid #feffff; border-width:10 0 10px; border-radius:1px;font-size:16px; border: gray 0.05px solid;padding:2px;
					 
					 }
					  .editable span{display:block;}
					  
					  .editableL span{display:block;}
					  .editableL span:hover {background:url(../img/edit.png) 90% 50% no-repeat;cursor:pointer}
					  
	td input{height:44px;width:70px;border:1px solid #ddd;padding:0 5px;margin:0;border-radius:0px;vertical-align:middle}
				
					
						
				.table_ajust>tbody>tr>td, .table_ajust>tbody>tr>th, .table_ajust>tfoot>tr>td, .table_ajust>tfoot>tr>th, .table_ajust>thead>tr>td, .table_ajust>thead>tr>th 
						{
							padding: 0px; 
						}
	  
	  
	  
	  
	  
	.btn {
		display: inline-block;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.42857143;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		user-select: none;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
	}


	.btn-app {
		color: white;
		box-shadow: none;
		border-radius: 3px;
		position: relative;
		padding: 10px 15px;
		margin: 0;
		min-width: 60px;
		max-width: 80px;
		text-align: center;
		border: 1px solid #ddd;
		background-color: #ffffff;
		font-size: 12px;
		transition: all .2s;
		background-color: steelblue !important;
	}
	
	.btn-app > .fa, .btn-app > .glyphicon, .btn-app > .ion {
		font-size: 30px;
		display: block;
	}

	.btn-app:hover {
		border-color: #aaa;
		transform: scale(1.1);
	}
		
	/* btn verder*/

	.btn-appverde {
		color: white;
		box-shadow: none;
		border-radius: 3px;
		position: relative;
		padding: 10px 15px;
		margin: 0;
		min-width: 60px;
		max-width: 80px;
		text-align: center;
		border: 1px solid #ddd;
		background-color: #ffffff;
		font-size: 14px;
		transition: all .2s;
		background-color: green !important;
	}
	
	.btn-appverde > .fa, .btn-appverde > .glyphicon, .btn-app > .ion {
		font-size: 20px;
		display: block;
	}

	.btn-appverde:hover {
		border-color: #aaa;
		transform: scale(1.1);
	}	
		

	.pdf {
	  background-color: #dc2f2f !important;
	}

	.excel {
		background-color: #3ca23c !important;
	}

	.csv {
		background-color: #e86c3a !important;
	}

	.imprimir {
		background-color: #8766b1 !important;
	}

	/*
	Esto es opcional pero sirve para que todos los botones de exportacion se distribuyan de manera equitativa usando flexbox

	.flexcontent {
		display: flex;
		justify-content: space-around;
	}
	*/

	.selectTable{
	  height:40px;
	  float:right;
	}

	div.dataTables_wrapper div.dataTables_filter {
		text-align: left;
		margin-top: 1px;
	}

	.btn-secondary {
		color: #fff;
		background-color: #4682b4;
		border-color: #4682b4;
	}
	.btn-secondary:hover {
		color: #fff;
		background-color: #315f86;
		border-color: #545b62;
	}


	.inline{
	  display:inline-block;
	  padding:0;
	}

	
					.ui-autocomplete { 
							   height: 200px;
							   overflow-y: scroll;
							   overflow-x: hidden;
							 }

						/* .pac-container {
							z-index: 100000;
						}*/

						  /* autocomplete de bootrap estilo*/
						.ui-autocomplete {
							position: absolute;
							z-index: 100000;
							cursor: default;
							padding: 0;
							margin-top: 2px;
							list-style: none;
							background-color: #ffffff;
							border: 1px solid #ccc;
							-webkit-border-radius: 5px;
							   -moz-border-radius: 5px;
									border-radius: 5px;
							-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
							   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
									box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
						}
						.ui-autocomplete > li {
						  padding: 3px 20px;
						}
						.ui-autocomplete > li.ui-state-focus {
						  color: #ffffff;
						  background-color: #0088cc;
						}
						.ui-helper-hidden-accessible {
						  display: none;
						}