@charset "UTF-8";
/*** Variables ***/
/* 
 * ------------------------
 * Colors 
 * ------------------------
 */
/* 
 * ------------------------
 * Font Families
 * ------------------------
*/
/* 
 * ------------------------
 * Font Weights
 * ------------------------
 */
/* 
 * ------------------------
 * Media Queries
 * ------------------------
 */
/* 
 * ------------------------
 * Helpers
 * ------------------------
 */
.layout > .page-content {
  padding: 0; }

.accounts {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* De MD para arriba */
  /* De MD para abajo */
  /* De 470 para abajo */
  /* De 414 para abajo - iPhone XR */
  /* De 390 para abajo - iPhone 12 Pro */
  /* De 375 para abajo - iPhone SE */ }
  .accounts form {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #F5F5F5;
    background: linear-gradient(-135deg, white 0%, #e3e3e3 100%);
    position: relative;
    width: 100%; }
  .accounts .form-container {
    border-radius: 40px;
    background: #FFF;
    width: 420px;
    padding: 40px;
    box-shadow: 0 0 25px rgba(2, 2, 38, 0.05);
    margin: 40px;
    position: relative; }
    .accounts .form-container > .loading {
      border-radius: 40px; }
    .accounts .form-container .sso-back-link {
      margin-bottom: 16px; }
    .accounts .form-container h1 + p {
      margin-top: -15px;
      margin-bottom: 15px; }
    .accounts .form-container .row.checkbox label {
      padding: 0; }
    .accounts .form-container .passwordStrength {
      position: absolute;
      top: 17px;
      right: 12px; }
    .accounts .form-container input.password-input {
      padding-right: 100px; }
    .accounts .form-container .g-recaptcha {
      position: relative;
      height: 88px;
      margin-top: 7px; }
      .accounts .form-container .g-recaptcha > div {
        transform: scale(1.125) translateX(-50%);
        transform-origin: 0 0;
        position: absolute;
        left: 50%; }
    .accounts .form-container .buttons {
      padding-top: 15px; }
    .accounts .form-container .button {
      width: 100%; }
    .accounts .form-container p.has-error {
      padding-top: 20px;
      font-size: 16px; }
    .accounts .form-container hr {
      margin: 20px 0; }
  .accounts .form-tip {
    text-align: center;
    padding: 35px;
    font-size: 14px;
    color: #999; }
  .accounts #success-container {
    margin-top: -15px;
    padding-top: 20px;
    border-top: 1px solid #CCC; }
    .accounts #success-container h2 {
      color: #999; }
    .accounts #success-container .bottom {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #CCC; }
  .accounts .sso-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #999;
    text-decoration: none;
    transition: color 0.15s ease; }
    .accounts .sso-back-link .fa {
      font-size: 12px;
      line-height: 1;
      transition: transform 0.15s ease; }
    .accounts .sso-back-link:hover {
      color: #7739f5;
      text-decoration: none; }
      .accounts .sso-back-link:hover .fa {
        transform: translateX(-3px); }
  .accounts .idp-cards {
    display: grid;
    gap: 15px;
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding: 2px 10px 0 0; }
    .accounts .idp-cards::-webkit-scrollbar {
      width: 8px; }
    .accounts .idp-cards::-webkit-scrollbar-track {
      background: #CCC;
      border-radius: 4px; }
    .accounts .idp-cards::-webkit-scrollbar-thumb {
      background: #7739f5;
      border-radius: 4px; }
      .accounts .idp-cards::-webkit-scrollbar-thumb:hover {
        background: #570cef; }
    .accounts .idp-cards .idp-card {
      display: block;
      padding: 20px;
      background: #FFF;
      border: 1px solid #CCC;
      border-radius: 12px;
      text-decoration: none;
      color: #020226;
      transition: all 0.2s ease; }
      .accounts .idp-cards .idp-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(2, 2, 38, 0.1);
        border-color: #7739f5; }
  @media screen and (min-width: 992px) {
    .accounts {
      /* 
        * IMAGEN DE MARCA AL LADO DEL FORM
        * Modificación para tener un fondo al que se le puede aplicar la marca del cliente del lado izquierdo o derecho del form
        */ }
      .accounts .form-tip {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0; }
        .accounts .form-tip + .form-container {
          margin-bottom: 100px; }
      .accounts.img-left, .accounts.img-right {
        background: #F5F5F5;
        background: linear-gradient(-135deg, white 0%, #e3e3e3 100%);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position-y: center;
        /*
                
                .page-content > .accounts{background-color:#190E48;background-image:url(../images/vortex-brand/vortex-accounts-brand.jpg);}

                @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){
                    .page-content > .accounts{
                        background-image:url(../images/vortex-brand/vortex-accounts-brand@2x.jpg);
                    }
                }

            */
        /*
                
                $('.page-content > .accounts').addClass('img-left');
            
            */ }
        .accounts.img-left form, .accounts.img-right form {
          width: 50%; }
      .accounts.img-left {
        align-items: flex-end;
        background-position-x: calc(50% - 25vw); }
      .accounts.img-right {
        align-items: flex-start;
        background-position-x: calc(50% - 25vw); } }
  @media screen and (max-width: 992px) {
    .accounts form {
      flex-direction: column-reverse; }
    .accounts .form-container {
      margin: 25px; }
    .accounts .form-tip {
      padding: 0 25px 25px; } }
  @media screen and (max-width: 470px) {
    .accounts .form-container {
      width: calc(414px - 50px); }
      .accounts .form-container .row.checkbox.space-between {
        flex-direction: column;
        align-items: flex-start; }
        .accounts .form-container .row.checkbox.space-between label {
          margin-bottom: 10px; }
      .accounts .form-container .g-recaptcha {
        height: 74px; }
        .accounts .form-container .g-recaptcha > div {
          transform: scale(0.94) translateX(-50%); } }
  @media screen and (max-width: 413px) {
    .accounts .form-container {
      width: calc(390px - 30px);
      margin-left: 15px;
      margin-right: 15px;
      padding: 30px; }
      .accounts .form-container .g-recaptcha {
        height: 78px; }
        .accounts .form-container .g-recaptcha > div {
          transform: scale(1) translateX(-50%); } }
  @media screen and (max-width: 389px) {
    .accounts .form-container {
      width: calc(375px - 30px); }
      .accounts .form-container .g-recaptcha {
        height: 74px; }
        .accounts .form-container .g-recaptcha > div {
          transform: scale(0.94) translateX(-50%); }
    .accounts .form-tip {
      padding-left: 15px;
      padding-right: 15px; } }
  @media screen and (max-width: 374px) {
    .accounts .form-container {
      width: calc(320px - 20px);
      margin: 15px 10px;
      padding: 20px;
      border-radius: 25px; }
      .accounts .form-container .g-recaptcha {
        height: 68px; }
        .accounts .form-container .g-recaptcha > div {
          transform: scale(0.865) translateX(-50%); }
    .accounts .form-tip {
      padding-bottom: 20px; } }
.term-container {
  padding: 30px; }