:root{
  --color2: rgb(31, 60, 78);
  --color6: rgb(101, 141, 198);
}

/* ==========================================================
   PAGE
   ========================================================== */

html,
body,
.login-page{
  background:var(--color2);
}

.login-page{
  min-height:100vh;
  min-height:100svh;
}

.login-main{
  position:relative;
}

.login-card{
  width:100%;
  max-width:560px;
  color:#fff;
}

.login-card-confirm{
  max-width:500px;
}

/* ==========================================================
   LOGO
   ========================================================== */

.login-logo{
  width:min(90%,500px);
  max-width:500px;
}

/* ==========================================================
   TEXT
   ========================================================== */

.login-status-title{
  color:#fff;
  font-size:clamp(1.6rem,3vw,2rem);
  font-weight:700;
  margin-bottom:.75rem;
}

.login-subtitle{
  max-width:440px;
  margin:0 auto;
  color:rgba(255,255,255,.76);
  font-size:.95rem;
  line-height:1.6;
}

.login-card-confirm .login-subtitle{
  max-width:430px;
}

.login-claim{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem .5rem;
}

.login-claim span{
  opacity:1;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.login-actions{
  margin-top:1.55rem;
  flex-wrap:nowrap;
}

.login-card .btn{
  min-width:140px;
  min-height:42px;

  border-radius:.5rem;

  font-size:.875rem;
  font-weight:600;

  white-space:nowrap;
}

.login-card .btn-light{
  color:var(--color2);
  background:#fff;
  border-color:#fff;
}

.login-card .btn-light:hover{
  color:var(--color2);
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.92);
}

.login-card .btn-outline-light{
  color:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.03);
}

.login-card .btn-outline-light:hover{
  color:var(--color2);
  background:#fff;
  border-color:#fff;
}

.login-card .btn:focus,
.login-card .btn:active{
  box-shadow:0 0 0 .15rem rgba(255,255,255,.18);
}

/* ==========================================================
   FORMS
   ========================================================== */

.login-form-wrap{
  width:100%;
  max-width:420px;
  margin:2rem auto 0;
}

.form-control,
.form-select{
  background:#fff !important;
  border-radius:.75rem;
}

.form-control:focus,
.form-select:focus{
  border-color:var(--color6);
  box-shadow:0 0 0 .15rem rgba(101,141,198,.20);
}

.help-block{
  margin-top:.25rem;
  font-size:.75rem;
  color:#ffb4b4;
}

.login-password-help{
  color:rgba(255,255,255,.68);
  font-size:.75rem;
  line-height:1.45;
}

/* ==========================================================
   STATUS ICON
   ========================================================== */

.login-status-icon{
  width:42px;
  height:42px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:.75rem;

  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);

  font-size:1.2rem;
  font-weight:700;

  animation:checkPop .4s ease;
}

@keyframes checkPop{
  0%{
    transform:scale(.8);
    opacity:0;
  }
  70%{
    transform:scale(1.08);
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

/* ==========================================================
   ANIMATIONS
   ========================================================== */

.first-visit .login-logo{
  opacity:0;
  transform:translateY(10px);
  animation:loginFadeUp .9s ease forwards;
}

.first-visit .login-claim span{
  opacity:0;
  filter:blur(4px);
  transform:translateY(6px);
  animation:wordReveal .7s ease forwards;
}

.first-visit .login-claim span:nth-child(1){
  animation-delay:.45s;
}

.first-visit .login-claim span:nth-child(2){
  animation-delay:.85s;
}

.first-visit .login-claim span:nth-child(3){
  animation-delay:1.25s;
}

.first-visit .login-actions{
  opacity:0;
  transform:translateY(10px);
  animation:loginFadeUp .75s ease forwards;
  animation-delay:1.65s;
}

@keyframes loginFadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes wordReveal{
  from{
    opacity:0;
    filter:blur(4px);
    transform:translateY(6px);
  }
  to{
    opacity:1;
    filter:blur(0);
    transform:translateY(0);
  }
}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer-dashboard{
  background:transparent;
  color:rgba(255,255,255,.85);
}

.footer-dashboard-brand,
.footer-dashboard-link{
  color:rgba(255,255,255,.85);
}

.footer-dashboard-link:hover{
  color:#fff;
}

.footer-divider{
  color:rgba(255,255,255,.5);
}

.footer-heart{
  color:rgb(242,107,91);
}

@media (max-width:1200px){

  .footer-dashboard-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.45rem;
    text-align:center;
  }

  .footer-dashboard-spacer{
    display:none;
  }

  .footer-dashboard-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.25rem .65rem;
  }

  .footer-dashboard-apps{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.35rem;
  }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:575.98px){

  .login-card{
    margin-top:-8svh;
  }

  .login-logo{
    width:min(88%,350px);
  }

  .login-subtitle{
    font-size:.875rem;
  }

  .footer-dashboard{
    font-size:.75rem;
  }

  .footer-divider{
    display:none;
  }

}

@media (max-width:340px){

  .login-actions{
    flex-direction:column !important;
  }

  .login-actions .btn{
    width:100%;
  }

}