/* =========================================
   OVERLAY
========================================= */

#overlayNewPassword{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.65);

  backdrop-filter:blur(6px);

  z-index:99998;

  display:none;
}

/* =========================================
   MODAL
========================================= */

#newPasswordBox{
  position:fixed;
  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:90%;
  max-width:420px;

  padding:35px 30px;

  border-radius:20px;

  background:rgba(255,255,255,0.12);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.25);

  box-shadow:0 25px 50px rgba(0,0,0,0.35);

  z-index:99999;

  display:none;
}

/* LOGO */
.new-password-logo{
  text-align:center;
  margin-bottom:20px;
}

.new-password-logo img{
  max-width:180px;
}

/* TITLE */
#newPasswordTitle{
  text-align:center;
  color:#fff;
  margin-bottom:35px;
  font-weight:600;
}

/* INPUT GROUP */
.new-password-group{
  position:relative;
  margin-bottom:30px;
}

/* INPUT */
.new-password-group input{
  width:100%;
  padding:18px 46px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,0.25);

  outline:none;

  background:rgba(255,255,255,0.18);

  color:#fff;

  font-size:15px;

  transition:
    border 0.25s ease,
    box-shadow 0.25s ease;
}

/* FOCUS */
.new-password-group input:focus{
  border:1px solid #4fc3ff;

  box-shadow:
    0 0 12px rgba(79,195,255,0.75);
}

/* LABEL */
.new-password-group label{
  position:absolute;

  top:50%;
  left:46px;

  transform:translateY(-50%);

  font-size:14px;

  color:rgba(255,255,255,0.75);

  pointer-events:none;

  transition:0.25s ease;
}

/* FLOAT LABEL */
.new-password-group input:focus + label,
.new-password-group input:not(:placeholder-shown) + label{

  top:-10px;

  font-size:12px;

  color:#4fc3ff;
}

/* LEFT ICON */
.new-password-group .left-icon{
  position:absolute;

  top:50%;
  left:16px;

  transform:translateY(-50%);

  color:rgba(255,255,255,0.85);
}

/* TOGGLE PASSWORD */
.new-password-group .toggle-password{
  position:absolute;

  top:50%;
  right:16px;

  transform:translateY(-50%);

  cursor:pointer;

  color:rgba(255,255,255,0.75);

  transition:0.2s ease;
}

.new-password-group .toggle-password:hover{
  color:#fff;
}

/* ERROR */
#newPasswordError{
  display:block;

  text-align:center;

  margin-bottom:15px;

  font-size:14px;

  color:#ff4d4d;
}

/* BUTTON */
#saveNewPasswordBtn{
  margin-top:10px;
}


/* =========================================
   PASSWORD RULES
========================================= */

#passwordRules{
  margin-top:-10px;
  margin-bottom:20px;
}

.password-rule{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:8px;

  font-size:13px;

  color:#ff6b6b;

  transition:0.25s ease;
}

.password-rule i{
  font-size:14px;
}

/* VALID */
.password-rule.valid{
  color:#4fc3ff;
}

.password-rule.valid i{
  color:#4fc3ff;
}


/* =========================================
   ENTRADAS MODAL NUEVA PASSWORD
========================================= */

#newPasswordBox{
  animation:
    new-password-card-enter 0.9s ease-out forwards;
}

@keyframes new-password-card-enter{
  from{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(0.92)
      translateY(25px);
  }

  to{
    opacity:1;
    transform:
      translate(-50%,-50%)
      scale(1)
      translateY(0);
  }
}

/* LOGO */
.new-password-logo{
  opacity:0;

  animation:
    new-password-logo-enter 1s ease-out forwards;
}

@keyframes new-password-logo-enter{

  from{
    opacity:0;
    transform:translateY(-60px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* TITLE */
#newPasswordTitle{
  opacity:0;

  animation:
    new-password-title-enter 1s ease-out forwards;

  animation-delay:0.15s;
}

@keyframes new-password-title-enter{

  from{
    opacity:0;
    transform:translateY(45px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* INPUTS */
.new-password-group{
  opacity:0;
}

/* INPUT 1 */
.new-password-group:nth-of-type(1){

  animation:
    new-password-right 0.8s ease-out forwards;

  animation-delay:0.35s;
}

/* INPUT 2 */
.new-password-group:nth-of-type(2){

  animation:
    new-password-left 0.8s ease-out forwards;

  animation-delay:0.55s;
}

@keyframes new-password-right{

  from{
    opacity:0;
    transform:translateX(80px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes new-password-left{

  from{
    opacity:0;
    transform:translateX(-80px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* PASSWORD RULES */
#passwordRules{
  opacity:0;

  animation:
    new-password-rules-enter 0.8s ease-out forwards;

  animation-delay:0.7s;
}

@keyframes new-password-rules-enter{

  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ERROR */
#newPasswordError{
  opacity:0;

  animation:
    new-password-error-enter 0.8s ease-out forwards;

  animation-delay:0.8s;
}

@keyframes new-password-error-enter{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

/* BOTON */
#saveNewPasswordBtn{
  opacity:0;

  animation:
    new-password-btn-enter 0.9s ease-out forwards;

  animation-delay:1s;
}

@keyframes new-password-btn-enter{

  from{
    opacity:0;
    transform:
      translateY(35px)
      scale(0.95);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}