/*Estilos de la pagina*/
body {
  margin-top: 30px!important;
  display: flex!important;
  justify-items: center!important;
  justify-content: center!important;
  align-items: center!important;
  background-color: #0B1B1A!important;
  font-family: sans-serif!important;
}

.aplicativo {
  background-color: #007377!important;
  border-radius: 20px!important;
  padding: 30px!important;
  width: auto!important;

}

#titulodelaplicativo{
  text-align: center!important;
  color: white!important;
  background-color: #025663!important;
  padding: 20px!important;
  border-radius: 20px!important;

}

/*Fin estilos del boton*/
.fondo {
  z-index: 1!important;
}

#firmaTabla {
  position: relative!important;
  top: -176px!important;
  left: -1px!important;
  display: table-cell!important;
  vertical-align: middle!important;
  z-index: 2!important;
  border-collapse: collapse!important;
}

#firmaTabla td {
  padding: 8px 8px 8px 15px!important;
  text-align: left!important;
  border: none!important;
}

#formulario {
  display: flex!important;
  flex-direction: column!important;
  justify-content: center!important;
  align-items: stretch!important;
}

.Nombre {
  color: #007377!important;
  font-size: 23px!important;
  margin: 0px!important;
  padding: 0px!important;
  text-transform: capitalize!important;
  width: 299px!important;
}

.cargo {
  color: #007377!important;
  font-size: 12px!important;
  margin: 0px!important;
  padding: 0px!important;
  text-transform: uppercase!important;
  width: 299px!important;
}

.correo {
  color: #514F4F!important;
  font-size: 17px!important;
  letter-spacing: -0.6px!important;
  margin: 0px!important;
  padding: 3px 0px 3px 0px!important;
  text-transform: lowercase!important;
  width: 299px!important;
}

.datos {
  color: #514F4F!important;
  font-size: 12px!important;
  margin: 0px!important;
  padding: 0px!important;
  width: 299px!important;
}

.icono {
  margin: 0px 0px -2px 0px!important;

}

.logo {
  background-image: url('/LogoBlanco.png')!important;
  background-repeat: no-repeat!important;
  background-size: contain!important;
  width: 120px!important;
  height: 120px!important;
  margin-top: 0px!important;
  margin-bottom: 0px!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

.noflex {
  display: block!important;
  padding: 0px 60px 0px 60px!important;
  width: auto!important;
}

.siflex {
  display: flex!important;
  width: auto!important;
  justify-content: space-between!important;
}

.flexrelative {
  display: flex!important;
  flex-direction: column!important;
  justify-content: center!important;
  align-items: center!important;
}

.Pasos {
  background-color: white!important;
  margin: 5px!important;
  padding: 30px!important;
  border-radius: 20px!important;
  color: #025663!important;
  position: sticky!important;
  top: -17px!important;
  z-index: 1!important;
  box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
  -webkit-box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
  -moz-box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
}

.Pasos h3 {
  color: #ba0c2f!important;
}

/*Estilos de checkbox*/
/*** This page styles (unnecessary) ***/

h2 {
  font-weight: bold!important;
  text-align: center!important;
  color: #007377;
}

.content {
  width: 50%!important;
  padding: 1em!important;
  box-sizing: border-box!important;
  float: left!important;
}

fieldset {
  padding: 2em!important;
  border-color: #d4d4d4!important;
  border-style: solid!important;
  border-width: 2px!important;
  background: #fff!important;
}


.caja {
  border-style: solid!important;
  border-radius: 20px!important;
  border-color: #007377!important;
  border-width: 5px!important;
  padding: 10px!important;
  margin: 30px 0px!important;
  box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
  -webkit-box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
  -moz-box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
}

.numero {
  text-align: center!important;
  color: white!important;
  background-color: #025663!important;
  padding: 2px 10px!important;
  border-radius: 50%!important;
  font-size: 20px!important;
  width: fit-content!important;
  height: fit-content!important;
  margin-right: 10px!important;
}

.numero p {
  padding: 0px!important;
  margin: 0px 0px!important;
  border: 0!important;
}

/*Estilos Barra de Progreso*/
.progress {
  width: 100%!important;
  background-color: #f5f5f5!important;
  border-radius: 100px!important;
  overflow: hidden!important;
}

.barradeprogreso {
  width: 0%!important;
  height: 20px!important;
  background-color: #00c99a!important;
  color: white!important;
  text-align: center!important;
  line-height: 20px!important;
  transition: width 0.6s ease!important;
  display:none!important;
}

.Generacion {
  position: fixed!important;
  bottom: 0!important;
  background-color: #007377!important;
  border: solid 1px #0B1B1A!important;
  width: 30%!important;
  padding: 5px 50px 20px 50px!important;
  border-radius: 20px 20px 0px 0px!important;
  display: flex!important;
  justify-items: center!important;
  align-items: center!important;
  flex-direction: column!important;
  box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
  -webkit-box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
  -moz-box-shadow: 10px 10px 14px 0px rgba(0, 0, 0, 0.32)!important;
}

.form-control:valid {
    border-color: #28a745; /* Verde de Bootstrap */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}