/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

/* Estilos generales */


header, footer {
  color: #FFFFFF; /* Cambia el color de las letras a blanco */
  padding: 20px; /* Añade un poco de espacio alrededor del texto */
  text-align: center; /* Centra el texto */
}

#msform fieldset {
    background: #000093;
    border: 2px solid #c532b7;
    border-radius: 3px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 20px; /* Ajusta el relleno para pantallas más pequeñas */
    box-sizing: border-box;
    width: 100%; /* Hazlo más ancho en pantallas pequeñas */
    margin: 0 5%; /* Margen más pequeño para pantallas pequeñas */
    position: relative;
    margin: 0 auto; /* Centrar el fieldset */
    color: white; /* Cambiar el color del texto a blanco */
}



/* Oculta todos los fieldsets excepto el primero */
#msform fieldset:not(:first-of-type) {
    display: none;
}

/* Estilos para inputs y textarea */
#msform input, #msform textarea .select2-container  {
    padding: 12px; /* Reduzca el relleno para campos de entrada */
    font-size: 16px; /* Aumenta el tamaño de fuente para facilitar la lectura en pantallas pequeñas */
    margin-bottom: 15px; /* Aumenta el margen inferior para separar los campos */
}

/* Estilos para botones */
#msform .action-button {
    width: 120px; /* Haga que los botones sean más grandes */
    font-size: 16px; /* Aumenta el tamaño de fuente para botones */
    padding: 12px; /* Aumenta el relleno para botones */
    margin: 15px 5px; /* Aumenta el margen para separar los botones */
}

#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.button {
    width: 30%;
    padding: 10px;
    background-color: #000093;
    color: white;
    border: none;
    cursor: pointer;
}

/* Estilos para el bot¨®n de env¨ªo */
input[type="submit"] {
    width: 30%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  input[type="submit"]:hover {
    background-color: #45a049;
  }
  

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

/* Estilos para títulos y subtítulos */
.fs-title {
    font-size: 20px; /* Aumenta el tamaño de fuente para títulos */
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 16px; /* Aumenta el tamaño de fuente para subtítulos */
    color: #666;
    margin-bottom: 20px;
}

.letra-blanca {
  color: white;
}

/* Estilos para el contenedor de la tabla */
#msform table {
    margin: 0 auto; /* Esto centra la tabla horizontalmente */
  }
  
  /* Ajustes adicionales para la tabla si es necesario */
  #msform table {
    width: 30%; /* Puedes ajustar el ancho de la tabla según tus necesidades */
  }

  h1 {
    text-align: center;
  }
  
.confirmation, a {
  color: #FFFFFF; /* Cambia el color de las letras a blanco */
  background-color: #000093; /* Cambia el color de fondo a azul */
  border: 2px solid #c532b7; /* Agrega un borde */
  border-radius: 3px; /* Redondea las esquinas */
  padding: 20px 20px; /* Ajusta el relleno para pantallas más pequeñas */
  box-sizing: border-box;
  width: 100%; /* Hazlo más ancho en pantallas pequeñas */
  margin: 0 auto; /* Centrar el fieldset */
  text-align: center; /* Centra el texto */
  display: block; /* Convierte los elementos en bloques para que ocupen toda la línea */
}


a:hover {
  color: #FFFFFF; /* Mantiene el color de las letras en blanco al pasar el mouse */
  text-decoration: underline; /* Subraya el enlace al pasar el mouse */
}


/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    #msform fieldset {
        width: 100%; /* Hazlo ancho completo en dispositivos móviles */
        margin: 0; /* Elimina el margen en dispositivos móviles */
        padding: 10px; /* Ajusta el relleno en dispositivos móviles */
    }

    #msform input[type="checkbox"], #msform input[type="checkbox"] + label {
        width: auto; /* Deja que los checkboxes se ajusten automáticamente al contenido */
        display: inline-block; /* Coloca los checkboxes en línea */
        margin-right: 10px; /* Agrega un margen a la derecha para separar los checkboxes */
    }

    #msform input, #msform textarea {
        width: 100%; /* Haz los campos de texto a lo ancho de la pantalla en dispositivos móviles */
        padding: 12px; /* Aumenta el relleno para campos de entrada */
        font-size: 16px; /* Aumenta el tamaño de fuente para facilitar la lectura en pantallas pequeñas */
        margin-bottom: 15px; /* Aumenta el margen inferior para separar los campos */
    }
}