/* Section: Multired Virtual Login — root class .x-login
   All rules scoped under .x-login */

.x-login {
  /* page wrapper equivalents */
}

/* ---------- container & header ---------- */
.x-login .contenedor {
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: var(--container-width);
}

.x-login .cabecera {
  height: 90px;
  position: relative;
}
.x-login .cabecera .logo-multired {
  left: 0px;
  position: absolute;
  top: 10px;
}
.x-login .cabecera .logo-bn {
  right: 0px;
  position: absolute;
  top: 33px;
}

/* ---------- body ---------- */
.x-login .cuerpo {
  position: relative;
  margin: 0 auto;
  padding: 20px 0 0;
  width: var(--cuerpo-width);
}

.x-login .cuerpo h1 {
  color: var(--color-heading);
  margin: 0 0 20px 0;
  text-align: center;
  font: 24px var(--font-dax-medium);
}
.x-login .cuerpo h1 img {
  margin: 0 12px 0 0;
  vertical-align: -6px;
}
.x-login .cuerpo h1 span {
  color: var(--color-heading-red);
}

/* ---------- login card ---------- */
.x-login .login { }

.x-login .border-superior,
.x-login .border-inferior-img {
  text-align: center;
  line-height: 0;
}
.x-login .border-superior img,
.x-login .border-inferior-img img { display: inline-block; }

.x-login .login-contenido {
  background: url('../../assets/images/home/border-derecha.png') repeat-y right top var(--color-white);
  border-left: 1px solid var(--color-card-border);
  color: var(--color-card-text);
  font: 12px var(--font-sans);
  margin: 0 auto;
  position: relative;
  padding: 18px 54px 10px 52px;
  overflow: hidden;
  text-align: left;
  width: var(--login-card-width);
}

/* dashed divider positioned near the bottom like the original */
.x-login .login-contenido .border-inferior {
  border-bottom: 1px dashed var(--color-divider);
  bottom: 88px;
  height: 1px;
  position: absolute;
  left: 0;
  width: 99%;
}

.x-login .login-contenido form {
  padding: 0 0 0 60px;
  position: relative;
}

.x-login .login-contenido .fila {
  margin: 0 0 15px 0;
}

.x-login .login-contenido label {
  color: var(--color-label);
  font: 13px/23px var(--font-sans);
  float: left;
  text-align: right;
  padding: 0 4px 0 0;
  width: 130px;
}

/* ---------- custom select (Multired card type) ---------- */
.x-login .ui-select {
  position: relative;
  float: left;
  height: 23px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.x-login .ui-select .ui-select-display {
  height: 23px;
  line-height: 23px;
  background-repeat: no-repeat;
  color: #484848;
  font: 12px var(--font-sans);
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  position: relative;
}
.x-login .ui-select.tipo-documento {
  width: 250px;
}
.x-login .ui-select.tipo-documento .ui-select-display {
  background-image: url('../../assets/images/home/bg-select.jpg');
  width: 250px;
  padding: 0 0 0 12px;
  background-size: 250px 23px;
}
.x-login .ui-select.select-medio {
  width: 115px;
  margin: 0 10px 0 0;
}
.x-login .ui-select.select-medio .ui-select-display {
  background-image: url('../../assets/images/bn/select-chico4.jpg');
  width: 115px;
  padding: 0 0 0 10px;
  background-size: 115px 23px;
}

/* dropdown menu */
.x-login .ui-select-menu {
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 35;
  margin: 0;
  padding: 0 5px 5px 5px;
  list-style: none;
  background: var(--color-select-menu-bg);
  border-left: 1px solid var(--color-select-menu-border);
  border-right: 1px solid var(--color-select-menu-border);
  border-bottom: 1px solid var(--color-select-menu-border);
  font: 12px/18px var(--font-sans);
  display: none;
  max-height: 200px;
  overflow: auto;
  border-radius: 0 0 6px 6px;
}
.x-login .ui-select.open .ui-select-menu { display: block; }
.x-login .ui-select-menu li {
  padding: 1px 0 0 12px;
  margin: 0;
  display: block;
  border-top: 1px dotted transparent;
  border-bottom: 1px dotted transparent;
  font-weight: normal;
}
.x-login .ui-select-menu li a {
  line-height: 1.4em;
  display: block;
  outline: none;
  text-decoration: none;
  color: #484848;
  font: 12px var(--font-sans);
  cursor: pointer;
}
.x-login .ui-select-menu li a:hover { text-decoration: underline; }
.x-login .ui-select.tipo-documento .ui-select-menu { width: 243px; }
.x-login .ui-select.select-medio .ui-select-menu { width: 108px; }

/* ---------- text inputs ---------- */
.x-login input.grande {
  background: url('../../assets/images/home/bg-input.jpg') no-repeat;
  background-size: 250px 23px;
  border: none;
  float: left;
  color: var(--color-input-text);
  font: 12px/23px var(--font-sans);
  padding: 0 12px;
  border-radius: 8px;
  height: 23px;
  width: 226px;
  outline: none;
}

.x-login input.input-chico3 {
  background: url('../../assets/images/bn/input-small3.jpg') no-repeat;
  background-size: 130px 23px;
  border: none;
  font: 12px/23px var(--font-sans);
  height: 23px;
  float: left;
  padding: 0 10px;
  width: 119px;
  border-radius: 8px;
  color: var(--color-input-text);
  outline: none;
}

/* ---------- virtual keypad ---------- */
.x-login #botones-clave {
  float: left;
  padding: 0 0 0 6px;
  width: 92px;
  user-select: none;
  -webkit-user-select: none;
}
.x-login #botones-clave .boton-clave {
  background: url('../../assets/images/home/btn-boton.jpg') no-repeat;
  color: var(--color-keypad-text);
  display: block;
  font: 16px/25px var(--font-dax-bold);
  height: 25px;
  float: left;
  margin: 0 5px 5px 0;
  text-align: center;
  width: 25px;
  cursor: pointer;
}
.x-login #botones-clave .boton-clave:hover {
  background: url('../../assets/images/home/btn-boton-active.jpg') no-repeat;
  color: var(--color-white);
}
.x-login #botones-clave .boton-clave.limpiar {
  background: url('../../assets/images/home/btn-limpiar.jpg') no-repeat;
  color: var(--color-white);
  font: 12px/25px var(--font-dax-bold);
  width: 55px;
}

/* ---------- right column (clave field) ---------- */
.x-login #campo-clave {
  float: left;
  padding: 0 0 0 25px;
  width: 120px;
}
.x-login #campo-clave p {
  color: var(--color-label);
  font: 11px/13px var(--font-sans);
  text-align: center;
  padding: 0 0 10px;
}
.x-login #campo-clave .generar-clave {
  color: var(--color-link-red);
  text-decoration: underline;
  font: 12px var(--font-sans);
  display: block;
  text-align: left;
  margin-bottom: 6px;
}
.x-login #campo-clave .generar-clave img {
  float: left;
  margin: -3px 2px 0 0;
}
.x-login #campo-clave input {
  background: url('../../assets/images/home/bg-input-small.jpg') no-repeat;
  background-size: 110px 23px;
  border: none;
  height: 23px;
  padding: 0 20px;
  width: 70px;
  border-radius: 8px;
  color: var(--color-input-text);
  margin: 0 10px;
  font: 12px/23px var(--font-sans);
  outline: none;
}
.x-login #campo-clave .olvido-clave {
  padding: 20px 0 0 0;
  position: relative;
}
.x-login #campo-clave .olvide-clave {
  background: url('../../assets/images/home/olvide-clave.jpg') no-repeat;
  color: var(--color-link-red);
  display: block;
  height: 24px;
  font: 12px/24px var(--font-sans);
  text-align: left;
  text-decoration: underline;
  padding: 0 0 0 27px;
  cursor: pointer;
}

/* ---------- captcha row ---------- */
.x-login .capcha {
  float: left;
  padding: 0 18px 0 6px;
}
.x-login .capcha .src-captcha { padding: 0 0 8px 0; line-height: 0; }
.x-login .capcha .boton_captcha {
  background: url('../../assets/images/home/cambiar-capcha.jpg') no-repeat;
  color: var(--color-link-red);
  display: block;
  font: 12px var(--font-sans);
  text-decoration: underline;
  padding: 3px 0 2px 22px;
  cursor: pointer;
}
.x-login input.capcha {
  background: url('../../assets/images/home/bg-input-small.jpg') no-repeat scroll 0 0 transparent;
  background-size: 110px 23px;
  border: none;
  color: var(--color-input-text);
  float: left;
  font: 12px/23px var(--font-sans);
  height: 23px;
  padding: 0 25px;
  border-radius: 8px;
  width: 60px;
  text-transform: uppercase;
  outline: none;
}

/* ---------- submit button ---------- */
.x-login .login-contenido form input[type="button"],
.x-login .login-contenido form #btnLogin {
  background: url('../../assets/images/home/btn-submit.jpg') no-repeat;
  background-size: 100px 30px;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  height: 30px;
  font: bold 14px var(--font-sans);
  margin: 38px 0 0 160px;
  text-align: center;
  width: 100px;
  text-transform: uppercase;
  padding: 0;
}

/* ---------- links rows ---------- */
.x-login .fila-links { text-align: center; padding-right: 50px; }
.x-login .fila-links .recomendaciones {
  color: var(--color-link-blue);
  text-decoration: underline;
  font: 12px var(--font-sans);
}
.x-login .fila-guias { text-align: center; padding-right: 50px; margin: 0; }
.x-login .fila-guias img { width: 10px; height: 10px; }
.x-login .fila-guias a {
  color: var(--color-link-black);
  font: 12px var(--font-sans);
}

/* ---------- footer ---------- */
.x-login .pie-pagina {
  text-align: center;
  padding: 60px 0 65px 0;
  width: 100%;
}
.x-login .pie-pagina .titulo-pie-pagina {
  color: var(--color-footer-title);
  font: bold 12px var(--font-sans);
  padding: 0 0 8px 0;
}
.x-login .pie-pagina .oficinas {
  color: var(--color-footer-text);
  font: 11px var(--font-sans);
}