/* LOGIN */
#loginMain {
  width: 100%;
  height: auto;
  background: #ffffff;
  background-color: #ffffff;
  padding: 150px 10% 50px 10%;
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}

#loginMain .formularioMain {
  width: 50%;
  height: auto;
  padding: 0 10% 50px 10%;
  position: relative;
  float: left;
  transition: all .3s ease;
}
#loginMain .formularioMain.mostrarFormulario,
#loginMain .formularioMain.ocultarFormulario {
  display: inline-block!important;
}
#loginMain .formularioMain:nth-child(1)::before {
  content: '';
  width: 1px;
  height: 90%;
  background: #d8d8d8;
  background-color: #d8d8d8;
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
}
#loginMain .formularioMain .formularioHeader {
  width: 100%;
  height: auto;
  padding: 0 0 25px 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
#loginMain .formularioMain .formularioHeader 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;
}

#loginMain .formularioMain 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;
}

#loginMain .formularioMain .contraseña-center {
  text-align: center;
}
#loginMain .formularioMain .contraseña-center a {
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #4f4b4b;
  text-decoration: underline;
  transition: all .3s ease;
}
#loginMain .formularioMain .contraseña-center a:hover,
#loginMain .formularioMain .contraseña-center a:active,
#loginMain .formularioMain .contraseña-center a:focus {
  color: #009639;
}
#loginMain .formularioMain .contraseña-center a.optionLogin {
  display: none;
}
#loginMain .btnEnviar:disabled {
  opacity: 0.5;
  cursor: none;
}
#loginMain .btnEnviar:disabled:hover,
#loginMain .btnEnviar:disabled:active,
#loginMain .btnEnviar:disabled:focus {
  opacity: 0.5;
  background: #009639;
  background-color: #009639;
  border: 1px solid #009639;
}
#loginMain .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;
}
#loginMain .btnEnviar:hover,
#loginMain .btnEnviar:active,
#loginMain .btnEnviar:focus {
  background: #feb207;
  background-color: #feb207;
  border: 1px solid #feb207;
}
/*  */

/* SPECIAL EDITION INPUT TEXTS */
#loginMain .formularioMain input:not([type]),
#loginMain .formularioMain input[type=text]:not(.browser-default),
#loginMain .formularioMain input[type=password]:not(.browser-default),
#loginMain .formularioMain input[type=email]:not(.browser-default),
#loginMain .formularioMain input[type=url]:not(.browser-default),
#loginMain .formularioMain input[type=time]:not(.browser-default),
#loginMain .formularioMain input[type=date]:not(.browser-default),
#loginMain .formularioMain input[type=datetime]:not(.browser-default),
#loginMain .formularioMain input[type=datetime-local]:not(.browser-default),
#loginMain .formularioMain input[type=tel]:not(.browser-default),
#loginMain .formularioMain input[type=number]:not(.browser-default),
#loginMain .formularioMain 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;
}

#loginMain .formularioMain 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;
}

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

/* OPCIONES LOGIN RESPONSIVO */
#loginMain .loginInner {
  width: 100%;
  height: auto;
  padding: 50px 0 45% 0;
  position: relative;
  background: #ffffff;
  background-color: #ffffff;
  display: none;
  transition: all .3s ease;
}
#loginMain .loginOptions {
  width: 100%;
  height: auto;
  padding: 0 0 0 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
#loginMain .loginOptions .optionLogin {
  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;
}
#loginMain .loginOptions .optionLogin:hover,
#loginMain .loginOptions .optionLogin:active,
#loginMain .loginOptions .optionLogin:focus {
  background: #feb207;
  background-color: #feb207;
  border: 1px solid #feb207;
}

#loginMain .loginCondicion {
  width: 100%;
  height: auto;
  padding: 50px 0 50px 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
#loginMain .loginCondicion::before {
  content: '';
  width: 40%;
  height: 1px;
  background: #979797;
  background-color: #979797;
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  margin: auto;
}
#loginMain .loginCondicion::after {
  content: '';
  width: 40%;
  height: 1px;
  background: #979797;
  background-color: #979797;
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  margin: auto;
}
#loginMain .loginCondicion h1 {
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  color: #979797;
  padding: 0 0 0 0!important;
  margin: 0 0 0 0!important;
  transition: all .3s ease;
}
/*  */

/* MODAL MENSAJE ENVIADO CON EXITO */
.modalUsuario {
  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;
}
/*  */

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

/* PAQUETE AGREGADO */
.modalUsuario .exitosoSection {
  width: 100%;
  height: 100%;
  padding: 50px 0 0 0;
  position: relative;
  z-index: 2;
}
.modalUsuario .exitosoSection .modalTitle {
  width: 100%;
  height: auto;
  padding: 0 0 50px 0;
  text-align: center;
  position: relative;
  transition: all .3s ease;
}
.modalUsuario .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;
}

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

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

/* CLOSE MODAL */
.modalUsuario .closeModal {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 5;
  transition: all .3s ease;
}
.modalUsuario .closeModal svg {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: all .3s ease;
}
.modalUsuario .closeModal svg path {
  transition: all .3s ease;
}
.modalUsuario .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;
}
/*  */