/*__filename__    : iniciar_sesion.css */
/*__author__      : DataHome S. de R.L. de C.V. */
/* __copyright__  : DataHome S. de R.L. de C.V. */
/*__description__ : Hoja de estilos de la vista iniciar sesión de la página comercial de DataWork */
/* __version__    : 1.1.0 */
/* __app__        : DW */
.header, .nav-menu, .footer, .footer-legales {
   display: none;
}

.bg-login {
   background: #2e3847 url("../../images/iniciar_sesion/bg-login.jpg") no-repeat center center;
}

.bg-register {
   background: #2e3847 url("../../images/registro/bg-register.jpg") no-repeat center center;
}

.bg-recuperar-contrasena {
   background: #2e3847 url("../../images/iniciar_sesion/bg-login.jpg") no-repeat center center;
}

.bg-sesion-activa {
   background: #2e3847;
}

.login-register-container {
   width: 100%;
   height: 100%;
   padding: 30px 0px;
   position: fixed;
   top: 0px;
   left: 0px;
   overflow: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
   background-size: cover;
}

@media (max-width: 768px) {
   .login-register-container {
      padding: 20px 0px;
   }
}

.login-register-container .info.login {
   width: 500px;
   height: auto;
}

.login-register-container .info.recuperar-contrasena {
   width: 500px;
   height: auto;
}

.login-register-container .info.register {
   width: 600px;
   height: auto;
}

.login-register-container .info.sesion-activa {
   width: 980px;
   height: auto;
}

@media (max-width: 992px) {
   .login-register-container .info.sesion-activa {
      width: 80%;
   }
}

@media (max-width: 768px) {
   .login-register-container .info.login,
   .login-register-container .info.register,
   .login-register-container .info.sesion-activa,
   .login-register-container .info.recuperar-password {
      width: 90%;
   }
}

.login-register-container .info.sesion-activa .img-user {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
}

.login-register-container .info .logo-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}

.login-register-container .info .logo-container .logo {
   width: 180px;
   height: auto;
}

@media (max-width: 576px) {
   .login-register-container .info .logo-container .logo {
      width: 140px;
   }
}

.login-register-container .info .card {
   border: none;
   border-radius: 3px;
   box-shadow: 0px 20px 20px -10px rgb(0, 0, 0,.5);
   transition: all .3s;
}

.login-register-container .google-login-container {
   width: 100%;
   height: auto;
   background-color: var(--color-light);
   border-top: 1px solid var(--color-black-30);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
}

.btn-google {
   background-color: var(--color-white);
   box-shadow: 0 0 0 0.25rem rgba(64, 134, 244, 0);
   transition: all .3s;
}

.btn-google:hover {
   box-shadow: 0 0 0 0.25rem rgba(64, 134, 244, 0.5);
}

/* ///// PASSWORD REQUIRED CONTAINER ///// */
.password-container {
   position: relative;
}

.info-password {
   background-color: var(--color-light);
   width: 220px;
   border-radius: 5px;
   padding: 20px;
   font-size: 12px;
   box-shadow: 0px 40px 35px -25px rgba(0,0,0,.4);
   margin-top: 5px;
   position: absolute;
   top: 0px;
   right: -240px;
   z-index: 10;
}

.info-password p {
   line-height: 16px;
}

.info-password .flecha {
   position: absolute;
   top: 18px;
   left: -12px;
   font-size: 40px;
   color: var(--color-light);
}

@media (max-width: 992px) {
   .info-password {
      position: relative;
      width: 100%;
      right: 0;
      top: 0;
      box-shadow: none;
   }

   .info-password .flecha {
      top: -23px;
      left: 20px;
      transform: rotate(90deg);
   }
}

.info-password ul {
   padding-left: 0px;
   margin-bottom: 0px;
   list-style: none;
   color: var(--color-gray);
}

.info-password ul li {
   margin-bottom: 5px;
}

.info-password ul li:last-child {
   margin-bottom: 0px;
}

.info-password ul li i {
   margin-right: 3px;
}