header {
	background-color: #323a41;
	color: #FFF;
	padding: 20px;
}

nav {
	float: left;
	width: 200px;
	background-color: #EEE;
	padding: 20px;
	
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

nav ul li {
	margin: 0 0 10px 0;
}

nav ul li a {
	display: block;
	background-color: #DDD;
	padding: 10px;
	color: #333;
	text-decoration: none;
}

nav ul li a:hover {
	background-color: #323a41;
	color: #FFF;
}


main {
	margin-left: 220px;
	padding: 20px;
}

footer {
	background-color: #EEE;
	color: #333;
	padding: 20px;
	clear: both
}
.contenedor {
    display: flex;
    justify-content: space-between;
  }

  .container {
    display: grid;
    grid-template-columns: 3, 1fr;
    gap: 2%;
	margin-left: 40;
  }
  .bloque {
    margin: 0;
  }

  .margen {
	margin-left: 40px;
	margin-right: 2%;
}


  .personal-label {display: inline-block;
	width: 100px; /* ajusta el ancho según tus necesidades */
	text-align: right;
	margin-right: 10px; /* ajusta el margen según tus necesidades */
}

.personal-input {
	display: inline-block;
	width: 200px; /* ajusta el ancho según tus necesidades */
}

#contenido {
    margin-top: 20px; /* Ajusta el valor según sea necesario */
    height: calc(100vh - 200px); /* Ajusta la altura según sea necesario */
    overflow-y: auto; /* Agrega una barra de desplazamiento vertical si es necesario */
}

  



.custom-label {
  color: #155724; /* Color verde similar al de la clase "table-success" */
  font-weight: bold;
  font-size: 12px; /* Tamaño de fuente personalizado */;
}


  .form-flex-container {
    display: flex;
  }
  
  .form-half-width {
    flex-basis: 50%;
    padding: 10px;
    box-sizing: border-box;
  }





  .mi-tabla {
    margin-top: 20px; /* Ajusta el valor según sea necesario */
  }


  @media (min-width: 690px) {

	.container{
		height: 1000px;
	}

	
	.centered {
		height: 500px;
		width: 500px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	main{
		margin: 5px;
	}

  }