/* CONTRASEÑA */
#contrasena {
  width: 100%;
  height: auto;
  background: #ffffff;
  background-color: #ffffff;
  padding: 150px 20% 50px 20%;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}

#contrasena .contrasenaTitle {
  width: 100%;
  height: auto;
  padding: 0 0 25px 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
#contrasena .contrasenaTitle h1 {
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #4a90e2;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}

#contrasena .contrasenaPanel {
  width: 100%;
  height: auto;
  padding: 0 20% 0 35%;
  text-align: justify;
  position: relative;
  transition: all .3s ease;
}
#contrasena .contrasenaPanel h1 {
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #4f4b4b;
  padding: 0 0 0 0!important;
  margin: 0 0 10px 0!important;
  transition: all .3s ease;
}

#contrasena .btnEnviar:disabled {
  opacity: 0.5;
  cursor: none;
}
#contrasena .btnEnviar:disabled:hover,
#contrasena .btnEnviar:disabled:active,
#contrasena .btnEnviar:disabled:focus {
  opacity: 0.5;
  background: #009639;
  background-color: #009639;
  border: 1px solid #009639;
}
#contrasena .btnEnviar {
  font-size: 19px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  width: auto;
  height: 48px;
  padding: 13px 67px 12px 67px;
  border-radius: 24px;
  background: #009639;
  background-color: #009639;
  border: 1px solid #009639;
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
}
#contrasena .btnEnviar:hover,
#contrasena .btnEnviar:active,
#contrasena .btnEnviar:focus {
  background: #feb207;
  background-color: #feb207;
  border: 1px solid #feb207;
}
/*  */

/* SPECIAL EDITION INPUT TEXTS */
#contrasena .contrasenaPanel input:not([type]),
#contrasena .contrasenaPanel input[type=text]:not(.browser-default),
#contrasena .contrasenaPanel input[type=password]:not(.browser-default),
#contrasena .contrasenaPanel input[type=email]:not(.browser-default),
#contrasena .contrasenaPanel input[type=url]:not(.browser-default),
#contrasena .contrasenaPanel input[type=time]:not(.browser-default),
#contrasena .contrasenaPanel input[type=date]:not(.browser-default),
#contrasena .contrasenaPanel input[type=datetime]:not(.browser-default),
#contrasena .contrasenaPanel input[type=datetime-local]:not(.browser-default),
#contrasena .contrasenaPanel input[type=tel]:not(.browser-default),
#contrasena .contrasenaPanel input[type=number]:not(.browser-default),
#contrasena .contrasenaPanel input[type=search]:not(.browser-default) {
  font-size: 18px;
  font-weight: 100;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #8d8d8d;
  height: 48px;
  border-radius: 4px;
  border: solid 1px #8d8d8d;
  transition: all .3s ease;
}

#contrasena .contrasenaPanel textarea.materialize-textarea {
  font-size: 18px;
  font-weight: 100;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #8d8d8d;
  height: 130px;
  border-radius: 4px;
  border: solid 1px #8d8d8d;
  transition: all .3s ease;
}

#contrasena .contrasenaPanel input:not([type]):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=text]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=password]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=email]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=url]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=time]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=date]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=datetime]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=tel]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=number]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel input[type=search]:not(.browser-default):focus:not([readonly]),
#contrasena .contrasenaPanel textarea.materialize-textarea:focus:not([readonly]) {
  font-weight: 300;
  color: #4f4b4b;
  border: solid 1px #4f4b4b;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/* ----------------------------- */

/* MODAL CONTRASEÑA RESTABLECIDA CON EXITO */
.modalPassword {
  width: 40vw;
  height: 55vh;
  padding: 25px 5% 19px 5%;
  border-radius: 8px;
  background: #ffffff;
  background-color: #ffffff;
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1001;
  overflow: hidden;
  display: none;
}
/*  */

.modalPassword .successPaquete {
  width: 100%;
  height: 100%;
  background: #fcd249;
  background-color: #fcd249;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* PAQUETE AGREGADO */
.modalPassword .exitosoSection {
  width: 100%;
  height: 100%;
  padding: 50px 0 0 0;
  position: relative;
  z-index: 2;
}
.modalPassword .exitosoSection .modalTitle {
  width: 100%;
  height: auto;
  padding: 0 0 50px 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
.modalPassword .exitosoSection .modalTitle h1 {
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  text-transform: uppercase;
  transition: all .3s ease;
}

.modalPassword .exitosoSection .progresoBox {
  max-width: 290px;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: auto;
  transition: all .3s ease;
}

.modalPassword .exitosoSection .progresoInput {
  max-width: 150px;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 250px;
  margin: auto;
  z-index: 2;
  transition: all .3s ease;
}

.modalPassword .exitosoSection .progresoStars {
  max-width: 400px;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  margin: auto;
  z-index: 2;
  transition: all .3s ease;
}
/*  */

/* CLOSE MODAL */
.modalPassword .closeModal {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 5;
  transition: all .3s ease;
}
.modalPassword .closeModal svg {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: all .3s ease;
}
.modalPassword .closeModal svg path {
  transition: all .3s ease;
}
.modalPassword .closeModal:hover svg path {
  fill: #4a90e2;
}
/*  */

/* SEE PASSWORD BUTTON */
.seePassword {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
  transition: all .3s ease;
}
.seePassword svg {
  width: 30px;
  height: 30px;
  margin: 0 0 0 0;
  transition: all .3s ease;
}
.seePassword svg path {
  fill: #8d8d8d;
}

.seePassword:hover svg path ,
.seePassword:active svg path ,
.seePassword:focus svg path {
  fill: #feb207;
}
/*  */