:root{
  --login-ink:#2d211b;
  --login-coffee:#482719;
  --login-deep:#20140f;
  --login-caramel:#d5a16f;
  --login-cream:#fbf7f1;
  --login-muted:#82756c;
}

html,
body.login-screen{
  min-height:100%;
}

body.login-screen{
  align-items:center;
  background:
    radial-gradient(ellipse at 8% 8%,rgba(213,161,111,.2),transparent 30%),
    radial-gradient(ellipse at 92% 92%,rgba(72,39,25,.12),transparent 35%),
    linear-gradient(135deg,#f7f0e8 0%,#fffdfa 48%,#f1e6da 100%);
  color:var(--login-ink);
  display:flex;
  justify-content:center;
  min-height:100vh;
  padding:40px 24px;
}

.login-screen .wrapper-page{
  margin:0 auto;
  max-width:960px;
  width:100%;
}

.login-screen .auth-card{
  align-items:stretch;
  background:#fff;
  border:1px solid rgba(72,39,25,.09);
  border-radius:28px;
  box-shadow:0 34px 90px rgba(53,31,20,.18),0 5px 18px rgba(53,31,20,.06);
  display:grid;
  grid-template-columns:minmax(300px,.95fr) minmax(360px,1.05fr);
  margin:0 auto;
  max-width:900px;
  overflow:hidden;
}

.login-screen .auth-carousel{
  background:
    linear-gradient(180deg,rgba(27,16,11,.25) 0%,rgba(27,16,11,.04) 40%,rgba(27,16,11,.86) 100%),
    url("../../logo.jpg") center 48%/cover no-repeat,
    linear-gradient(145deg,#28140e,#603723 60%,#3b1d13);
  display:flex;
  min-height:530px;
}

.login-screen .brand-panel{
  align-items:flex-start;
  color:#fff;
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
  padding:42px 40px;
  position:relative;
  text-align:left;
}

.login-screen .brand-panel::before,
.login-screen .brand-panel::after{
  border:1px solid rgba(255,241,223,.24);
  border-radius:50%;
  content:"";
  height:290px;
  pointer-events:none;
  position:absolute;
  width:290px;
}

.login-screen .brand-panel::after{
  height:350px;
  width:350px;
}

.login-screen .brand-kicker{
  align-items:center;
  color:#f8e9d7;
  display:inline-flex;
  font-size:10px;
  font-weight:700;
  gap:9px;
  letter-spacing:.17em;
  margin:0;
  position:relative;
  z-index:1;
}

.login-screen .brand-kicker span{
  background:#e4b987;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(228,185,135,.18);
  height:6px;
  width:6px;
}

.login-screen .brand-copy{
  max-width:330px;
  position:relative;
  z-index:1;
}

.login-screen .brand-panel h1{
  color:#fff;
  font-size:clamp(32px,3.2vw,42px);
  font-weight:800;
  letter-spacing:.11em;
  margin:0 0 9px;
  position:relative;
  z-index:1;
}

.login-screen .brand-panel h1 span{
  color:#efc18f;
  font-weight:400;
}

.login-screen .brand-panel p{
  color:rgba(255,248,240,.86);
  font-family:Georgia,serif;
  font-size:17px;
  font-style:italic;
  line-height:1.5;
  margin:0;
  position:relative;
  z-index:1;
}

.login-screen .auth-form{
  align-items:center;
  display:flex;
  padding:58px clamp(32px,5vw,68px);
}

.login-screen .auth-form .portlet{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin:0;
  overflow:visible;
  width:100%;
}

.login-screen .auth-form .portlet-heading{
  background:transparent!important;
  color:var(--login-ink);
  padding:0 0 34px;
}

.login-screen .form-kicker{
  color:#97633d;
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  margin-bottom:12px;
}

.login-screen .auth-form .portlet-title{
  color:var(--login-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(32px,3vw,38px);
  font-weight:700;
  line-height:1.15;
  margin:0 0 11px;
}

.login-screen .auth-form .portlet-heading p{
  color:var(--login-muted);
  font-size:14px;
  line-height:1.55;
  margin:0;
}

.login-screen .auth-form .portlet-body{
  background:transparent;
  padding:0;
}

.login-screen #loginform .form-group{
  margin-bottom:19px;
}

.login-screen .login-field-label{
  color:#59463a;
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.025em;
  margin:0 0 7px 2px;
}

.login-screen #loginform .input-group{
  align-items:center;
  background:#fbf9f6;
  border:1px solid #e7ddd3;
  border-radius:13px;
  display:flex;
  min-height:58px;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.login-screen #loginform .input-group:focus-within{
  background:#fff;
  border-color:#bd8354;
  box-shadow:0 0 0 4px rgba(189,131,84,.14);
}

.login-screen #loginform .input-group-addon{
  align-items:center;
  background:transparent;
  border:0;
  color:#956442;
  display:flex;
  font-size:19px;
  justify-content:center;
  min-width:52px;
}

.login-screen #loginform .form-control{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--login-ink);
  font-size:15px;
  height:56px;
  padding:12px 14px 12px 0;
}

.login-screen #loginform .form-control::placeholder{
  color:#a2958b;
  opacity:1;
}

.login-screen #loginform .btn-signin{
  align-items:center;
  background:linear-gradient(110deg,#69412a,#3b2117)!important;
  border:0!important;
  border-radius:12px;
  box-shadow:0 11px 23px rgba(74,36,24,.24);
  display:flex;
  font-size:15px;
  font-weight:700;
  gap:10px;
  justify-content:center;
  letter-spacing:.01em;
  margin-top:25px;
  min-height:56px;
  padding:13px 20px;
  transition:box-shadow .18s ease,transform .18s ease,filter .18s ease;
}

.login-screen #loginform .btn-signin:hover,
.login-screen #loginform .btn-signin:focus{
  box-shadow:0 14px 28px rgba(74,36,24,.3);
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.login-screen #loginform .btn-signin:focus-visible,
.login-screen #loginform .btn-elegant-outline:focus-visible{
  outline:3px solid rgba(189,131,84,.52);
  outline-offset:3px;
}

.login-screen #loginform .btn-signin:disabled{
  cursor:wait;
  opacity:.82;
  transform:none;
}

.login-screen #loginform .btn-signin .mdi{
  font-size:19px;
}

.login-screen #loginform .btn-elegant-outline{
  background:#fff!important;
  border:1px solid #e8ddd3!important;
  border-radius:9px;
  color:#65432f!important;
  font-size:12px;
  margin:4px 5px 0;
  padding:8px 13px;
  transition:background .18s ease,border-color .18s ease;
}

.login-screen #loginform .btn-elegant-outline:hover{
  background:#faf3ec!important;
  border-color:#c59875!important;
  color:#4a2418!important;
}

.login-screen .login-security-note{
  align-items:center;
  color:#988b81;
  display:flex;
  font-size:11px;
  gap:7px;
  justify-content:center;
  margin:24px 0 0;
}

.login-screen .login-security-note .mdi{
  color:#a97855;
  font-size:15px;
}

.login-screen .alert{
  border-radius:10px;
  font-size:13px;
  margin:0 0 18px;
}

@media(max-width:760px){
  body.login-screen{
    align-items:flex-start;
    padding:22px 16px;
  }

  .login-screen .auth-card{
    grid-template-columns:1fr;
    max-width:480px;
  }

  .login-screen .auth-carousel{
    min-height:230px;
  }

  .login-screen .brand-panel{
    padding:25px 26px 22px;
  }

  .login-screen .brand-panel::before{
    height:210px;
    width:210px;
  }

  .login-screen .brand-panel::after{
    height:250px;
    width:250px;
  }

  .login-screen .brand-kicker{
    font-size:9px;
    letter-spacing:.13em;
  }

  .login-screen .brand-copy{
    max-width:100%;
  }

  .login-screen .brand-panel h1{
    font-size:25px;
    margin:0 0 4px;
  }

  .login-screen .brand-panel p{
    font-size:14px;
  }

  .login-screen .auth-form{
    padding:34px clamp(24px,7vw,38px) 30px;
  }

  .login-screen .auth-form .portlet-heading{
    padding-bottom:22px;
  }

  .login-screen .auth-form .portlet-title{
    font-size:29px;
  }
}

@media(max-width:380px){
  body.login-screen{
    padding:12px;
  }

  .login-screen .brand-panel{
    padding:22px 20px 20px;
  }

  .login-screen .brand-kicker{
    font-size:8px;
    letter-spacing:.1em;
  }

  .login-screen .auth-form{
    padding:28px 20px 24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .login-screen *,
  .login-screen *::before,
  .login-screen *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}