@font-face {
  font-family: "Cendiatra-Regular" ;
  src: url(../fuentes/Cendiatra-Regular.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cendiatra-Demi" ;
  src: url(../fuentes/Cendiatra-Demi.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}


/*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;

}

form {
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
  flex-direction: column!important;
  background-color: aliceblue!important;
  color: #514F4F!important;
  padding: 10px!important;
  margin-left: auto!important;
  margin-right: auto!important;
  border-radius: 20px!important;
  width: 100%!important;
}

label {
  font-weight: 600!important;
  margin-top: auto!important;
  margin-bottom: auto!important;
  font-size: 20px!important;
  text-align: center!important;
  border-radius: 100px!important;
}

input {
  border: solid!important;
  border-color: #025663!important;
  border-radius: 10px!important;
  padding: 5px!important;
  margin: auto 0px auto 20px!important;
  height: fit-content!important;
}

select {
  border: solid!important;
  border-color: #025663!important;
  border-radius: 10px!important;
  padding: 5px!important;
  margin-left: 20px!important;
  height: 40px!important;
}

/*Estilos del boton*/
.button {
  color: #000!important;
  padding: 10px!important;
  border-radius: 100px!important;
  width: 200px!important;
  height: auto!important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, filter 0.2s ease-in-out!important;
  cursor: pointer!important;
  /* Añade la propiedad cursor: pointer!important; */
}

/* Efecto de brillo al hacer hover */
button:hover {
  filter: brightness(1.2)!important;
}

/* Efecto de agrandamiento al hacer hover */
button:hover,
button:active {
  transform: scale(1.1)!important;
}

/* Efecto de desaparición de sombra al hacer click o hover */
button:active,
button:hover {
  box-shadow: none!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;
}

legend {
  color: #bfbfbf!important;
  padding: 0.3em 0.6em!important;
  border: 2px solid #d4d4d4!important;
  background: #fff!important;
  font-size: 1.3em!important;
}

legend.radio {
  border-radius: 50px!important;
}

.container ul {
  margin-top: 0!important;
  padding-left: 0em!important;
}

.container ul li {
  list-style-type: none!important;
}

.container ul+ul {
  margin-bottom: 0!important;
}

.container ul+ul>li+li label {
  margin-bottom: 0!important;
}

/*** Styling Radio & Checkbox Input Fields (start here) ***/
label {
  font-weight: 600!important;
  color: #777777!important;
  margin-bottom: 11px!important;
  width: 100%!important;
  display: flex!important;
  cursor: pointer!important;
  padding: 0 0.6em!important;
  box-sizing: border-box!important;
  background: #e4ebf2!important;
  transition: all 0.5s ease 0s!important;
}

input[type="radio"],
input[type="checkbox"] {
  display: none!important;
}

input[type="radio"]+label,
input[type="checkbox"]+label {
  line-height: 3em!important;
}

input[type="radio"]+label {
  border-radius: 50px!important;
}

input[type="radio"]:disabled+label,
input[type="checkbox"]:disabled+label {
  color: #ccc !important;
  cursor: not-allowed!important;
}

input[type="radio"]:checked:disabled+label:after,
input[type="checkbox"]:checked:disabled+label:after {
  border-color: #ccc!important;
}

input[type="radio"]+label:before,
input[type="checkbox"]+label:before {
  content: ""!important;
  width: 26px!important;
  height: 26px!important;
  display: flex!important;
  margin-right: 0.5em!important;
  border: 2px solid #ccc!important;
  background: #fff!important;
  margin-top: 0.7em!important;
  border-radius: 100px!important;
}

input[type="radio"]+label:before {
  border-radius: 100%!important;
}

input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
  background: #c1eec2!important;
}

input[type="radio"]:checked+label:after {
  content: ""!important;
  width: 0!important;
  height: 0!important;
  border: 7px solid #0fbf12!important;
  display: flex!important;
  margin-left: -1.85em!important;
  margin-top: 1em!important;
  border-radius: 100%!important;
}

input[type="checkbox"]:checked+label:after {
  content: ""!important;
  width: 12px!important;
  height: 6px!important;
  border: 4px solid #0fbf12!important;
  display: flex!important;
  position: absolute!important;
  margin-left: 7px!important;
  border-right: 0!important;
  border-top: 0!important;
  margin-top: 1.2em!important;
  margin-bottom: 0px!important;
  transform: rotate(-55deg)!important;
}

input[type="radio"]:checked+label:before,
input[type="checkbox"]:checked+label:before {
  border-color: #0fbf12!important;
}

input[type="radio"]:checked:disabled+label,
input[type="checkbox"]:checked:disabled+label {
  background: #ccc!important;
  color: #fff !important;
}

input[type="radio"]:checked:disabled+label:before,
input[type="checkbox"]:checked:disabled+label:before {
  border-color: #bdbdbd!important;
}

@media (max-width: 650px) {
  .content {
    width: 100%!important;
  }
}

/*Fin Estilos del Checkbox*/
/*Estilos del input*/
input[disabled] {
  display: none!important;
}

input {
  position: relative!important;
  top: -60px!important;
  left: 80%!important;
  width: 60px!important;
  margin-right: auto!important;
  margin-left: auto!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: #e3e3e3!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;
}