@charset "UTF-8";
/* ================================================= */
/*       Páginas: "Iniciar sesión" y "Registro"      */
/* ================================================= */
/* Login y registro */
.um-page-login, .um-page-register {
  /** Formulario de registro en 2 columnas (escritorio) **/
  /* El plugin ordena mal los campos para el responsive */
  /** Ambos formularios **/
  /*! Formulario login y registro */
  /* Botones login y registro */
}
.um-page-login .um-register form .um-col-1, .um-page-register .um-register form .um-col-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}
.um-page-login form, .um-page-register form {
  /* Cada input de los formularios */
  /*! Cada input */
  /* Rotar iconos "Contraseña" y "Confirmar contraseña" */
}
.um-page-login form .um-field, .um-page-register form .um-field {
  /* Label */
  /* Input */
}
.um-page-login form .um-field .um-field-label, .um-page-register form .um-field .um-field-label {
  display: none;
}
.um-page-login form .um-field .um-field-area, .um-page-register form .um-field .um-field-area {
  /* Icono */
}
.um-page-login form .um-field .um-field-area .um-field-icon, .um-page-register form .um-field .um-field-area .um-field-icon {
  background-color: var(--c1);
  height: 100%;
  top: 0px !important;
}
.um-page-login form .um-field .um-field-area .um-field-icon i, .um-page-register form .um-field .um-field-area .um-field-icon i {
  color: var(--white);
}
.um-page-login form .um-field .um-field-area input, .um-page-register form .um-field .um-field-area input {
  padding-left: 55px !important;
}
.um-page-login form div[data-key="user_password"], .um-page-login form div[data-key="confirm_user_password"], .um-page-register form div[data-key="user_password"], .um-page-register form div[data-key="confirm_user_password"] {
  /* Input area */
}
.um-page-login form div[data-key="user_password"] .um-field-area, .um-page-login form div[data-key="confirm_user_password"] .um-field-area, .um-page-register form div[data-key="user_password"] .um-field-area, .um-page-register form div[data-key="confirm_user_password"] .um-field-area {
  /* Icono llave */
  /* Input contraseña */
}
.um-page-login form div[data-key="user_password"] .um-field-area .um-field-icon, .um-page-login form div[data-key="confirm_user_password"] .um-field-area .um-field-icon, .um-page-register form div[data-key="user_password"] .um-field-area .um-field-icon, .um-page-register form div[data-key="confirm_user_password"] .um-field-area .um-field-icon {
  width: 39px;
  /* Esta invertido la anchura es la altura */
  height: 44px;
  top: -2px !important;
  left: 2px;
  transform: scaleX(-1) rotate(-90deg);
}
.um-page-login form div[data-key="user_password"] .um-field-area .um-field-icon i, .um-page-login form div[data-key="confirm_user_password"] .um-field-area .um-field-icon i, .um-page-register form div[data-key="user_password"] .um-field-area .um-field-icon i, .um-page-register form div[data-key="confirm_user_password"] .um-field-area .um-field-icon i {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.um-page-login form div[data-key="user_password"] .um-field-area .um-field-area-password .um-toggle-password:hover i, .um-page-login form div[data-key="confirm_user_password"] .um-field-area .um-field-area-password .um-toggle-password:hover i, .um-page-register form div[data-key="user_password"] .um-field-area .um-field-area-password .um-toggle-password:hover i, .um-page-register form div[data-key="confirm_user_password"] .um-field-area .um-field-area-password .um-toggle-password:hover i {
  color: var(--c1);
}
.um-page-login .um-col-alt, .um-page-register .um-col-alt {
  /* Los invertimos (más natural) */
}
.um-page-login .um-col-alt .um-left, .um-page-register .um-col-alt .um-left {
  max-width: 48%;
  float: right !important;
}
.um-page-login .um-col-alt .um-left a:hover, .um-page-register .um-col-alt .um-left a:hover {
  color: var(--white);
}
.um-page-login .um-col-alt .um-right, .um-page-register .um-col-alt .um-right {
  max-width: 48%;
  float: left !important;
}
.um-page-login .um-col-alt .um-right a:hover, .um-page-register .um-col-alt .um-right a:hover {
  color: var(--white);
}
/* =================================== */
/*            MEDIA QUERIES            */
/* =================================== */
@media (max-width: 548px) {
  /** Formulario de registro en 1 columna (móvil) **/
  /* El plugin ordena mal los campos para el responsive */
  .um-register form .um-col-1 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}