/* Estilo para el contenedor principal */
#miFormulario {
  display: block;
  max-width: 1000px; /* Puedes ajustar el ancho máximo según tus necesidades */
  margin: 0 auto; /* Centrar el contenedor */
  overflow: hidden; /* Limpiar el float de los elementos internos */
}

/* Estilo para el formulario y la imagen */
.form-right,
.form-left {
  float: left; /* Posicionar los elementos uno al lado del otro */
  width: 50%; /* Cada elemento ocupa el 50% del ancho del contenedor */
  box-sizing: border-box; /* Incluir el padding y el border en el ancho del elemento */
  padding: 20px; /* Espacio interno para separar los elementos del borde */
}

/* Estilo para el formulario */
.form-right {
  background-color: #ffffff;
  border-radius: 10px;
}

/* Estilo para la imagen */
.form-left img {
  width: 100%; /* Asegurarse de que la imagen ocupe todo el ancho disponible */
  height: auto; /* Mantener la proporción original de la imagen */
  /*border-radius: 10px; /* Agregar bordes redondeados a la imagen */
}

/* Estilos para el resto de elementos */
.input-text{
  display: flex;
  flex-direction: column;
  width: 100%; /* Hacer que los campos de entrada ocupen todo el ancho disponible */
  border: 0;
  height: 20px;
  border-bottom:1px solid black;
}

.input-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.input-container label {
  font-weight: bold;
  text-align: left;
}

.boton {
  color:#ffffff;
  background-color: #4292DC;
  border-radius: 5px;
  text-align: center;
  width: 50%;
  margin: 10px 0;
  padding: 5px;
  border: none; 
  display: block;
  margin: 0 auto;
}

/* Estilos para el elemento select */
.input-container select {
  width: 100%;
  height: 30px;
  border-radius: 5px;
  padding-left: 10px;
}

/* Media queries para hacer el diseño responsivo */
@media screen and (max-width: 600px) {
  /* Cuando el ancho de la pantalla sea menor o igual a 600px */
  .form-right,
  .form-left {
    width: 100%; /* Los elementos ocupan todo el ancho */
    float: none; /* Elimina el flotado para que se muestren uno debajo del otro */
    padding: 10px 0; /* Espacio interno para separar los elementos del borde */
  }
  
  .input {
    height: 50px; /* Ajusta la altura de los campos de entrada */
  }
}