/* v1.4.38 — Replace five role rows with one unified login form only. */

/* Keep the gradient phrase on one line on desktop/laptop. */
.ef-title-gradient{white-space:nowrap!important;}

/* Let the school photo read more clearly while keeping enough contrast for text and form. */
body.guardrail-landing{
  background-image:
    linear-gradient(90deg,
      rgba(3,15,35,.68) 0%,
      rgba(4,20,43,.57) 30%,
      rgba(5,26,53,.39) 50%,
      rgba(5,27,55,.38) 61%,
      rgba(4,20,45,.56) 77%,
      rgba(3,14,33,.70) 100%),
    linear-gradient(180deg,
      rgba(4,16,36,.34) 0%,
      rgba(4,20,43,.28) 46%,
      rgba(3,14,33,.60) 100%),
    url("../img/depan-smanda-v1432.jpg")!important;
  background-repeat:no-repeat!important;
  background-size:auto,auto,125% auto!important;
  background-position:center center,center center,100% 45%!important;
}

/* Only the former role area changes into a login form. */
.ef-login-access{
  width:390px!important;
  max-width:390px!important;
  transform:translateX(88px)!important;
  align-items:stretch!important;
}
.ef-login-head{
  width:100%!important;
  max-width:none!important;
  margin:0 0 16px!important;
  text-align:left!important;
}
.ef-login-head .ef-access-title{
  font-size:1.62rem!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  color:#f7fbff!important;
}
.ef-login-intro{
  margin:7px 0 0;
  color:#b9c9dc;
  font-size:.92rem;
  line-height:1.5;
}
.ef-login-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:22px;
  border:1px solid rgba(154,198,241,.24);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,34,67,.68),rgba(7,27,57,.58));
  box-shadow:0 18px 44px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(8px) saturate(1.04);
  -webkit-backdrop-filter:blur(8px) saturate(1.04);
}
.ef-login-field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.ef-login-field>label:not(.ef-login-check){
  color:#f4f8fd;
  font-size:.86rem;
  line-height:1.2;
  font-weight:650;
}
.ef-login-field small{
  color:#93a7be;
  font-size:.75rem;
  line-height:1.35;
}
.ef-login-field input[type="text"],
.ef-login-field input[type="password"],
.ef-login-field select{
  width:100%;
  height:50px;
  border:1px solid rgba(151,190,231,.28);
  border-radius:12px;
  padding:0 14px;
  background:rgba(5,23,50,.66);
  color:#f8fbff;
  font:inherit;
  font-size:1rem;
  outline:none;
  box-sizing:border-box;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.ef-login-field select{
  appearance:auto;
  cursor:pointer;
  color-scheme:dark;
}
.ef-login-field input::placeholder{color:#8194ab;opacity:1;}
.ef-login-field input:disabled{
  cursor:not-allowed;
  opacity:.64;
  background:rgba(6,21,45,.46);
}
.ef-login-field input:focus-visible,
.ef-login-field select:focus-visible{
  border-color:#43d2d2;
  box-shadow:0 0 0 3px rgba(67,210,210,.15);
}
.ef-login-check{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:9px;
  min-height:32px;
  margin-top:1px;
  color:#c7d5e5;
  font-size:.83rem;
  font-weight:500;
  cursor:pointer;
}
.ef-login-check input{
  width:18px;height:18px;margin:0;
  accent-color:#35cdbf;
}
.ef-login-check:has(input:disabled){opacity:.55;cursor:not-allowed;}
.ef-login-error{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,120,128,.32);
  background:rgba(135,32,43,.22);
  color:#ffd6d8;
  font-size:.82rem;
  line-height:1.4;
}
.ef-login-submit{
  width:100%;
  height:50px;
  border:0;
  border-radius:12px;
  background:linear-gradient(90deg,#2fcaa8,#37c8d4);
  color:#052a34;
  font:inherit;
  font-size:1rem;
  font-weight:750;
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease,opacity .16s ease;
}
.ef-login-submit:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px);}
.ef-login-submit:focus-visible{outline:3px solid rgba(91,205,232,.28);outline-offset:3px;}
.ef-login-submit:disabled{opacity:.50;cursor:not-allowed;transform:none;}

@media (min-width:1500px){
  .ef-login-access{transform:translateX(96px)!important;}
  body.guardrail-landing{background-position:center center,center center,100% 44%!important;}
}

@media (min-width:981px) and (max-height:760px){
  .ef-login-access{
    width:360px!important;
    max-width:360px!important;
    transform:translateX(74px)!important;
  }
  .ef-login-head{margin-bottom:10px!important;}
  .ef-login-head .ef-access-title{font-size:1.34rem!important;}
  .ef-login-intro{font-size:.80rem;margin-top:4px;}
  .ef-login-form{gap:8px;padding:14px 16px;border-radius:18px;}
  .ef-login-field{gap:4px;}
  .ef-login-field>label:not(.ef-login-check){font-size:.78rem;}
  .ef-login-field small{font-size:.68rem;}
  .ef-login-field input[type="text"],
  .ef-login-field input[type="password"],
  .ef-login-field select{height:42px;font-size:.92rem;border-radius:10px;}
  .ef-login-check{min-height:27px;font-size:.76rem;gap:7px;}
  .ef-login-check input{width:16px;height:16px;}
  .ef-login-submit{height:42px;font-size:.92rem;border-radius:10px;}
  body.guardrail-landing{background-position:center center,center center,100% 40%!important;}
}

@media (min-width:981px) and (max-height:680px){
  .ef-login-access{width:340px!important;max-width:340px!important;transform:translateX(64px)!important;}
  .ef-login-intro{display:none;}
  .ef-login-form{gap:6px;padding:11px 14px;}
  .ef-login-field small{display:none;}
  .ef-login-field input[type="text"],
  .ef-login-field input[type="password"],
  .ef-login-field select{height:38px;}
  .ef-login-submit{height:39px;}
}

@media (max-width:980px){
  .ef-title-gradient{white-space:normal!important;}
  .ef-login-access{
    width:min(430px,100%)!important;
    max-width:430px!important;
    transform:none!important;
    margin-inline:auto!important;
  }
  .ef-login-head{text-align:center!important;}
  .ef-login-form{padding:20px;}
  body.guardrail-landing{
    background-image:
      linear-gradient(180deg,rgba(3,14,34,.70),rgba(4,22,47,.52) 45%,rgba(3,14,34,.76)),
      url("../img/depan-smanda-v1432.jpg")!important;
    background-size:auto,cover!important;
    background-position:center center,60% 32%!important;
  }
}

@media (max-width:640px){
  .ef-login-form{padding:16px;border-radius:18px;gap:11px;}
  .ef-login-head .ef-access-title{font-size:1.35rem!important;}
  .ef-login-intro{font-size:.84rem;}
  .ef-login-field input[type="text"],
  .ef-login-field input[type="password"],
  .ef-login-field select{height:48px;font-size:16px;}
  .ef-login-submit{height:48px;}
}

/* Keep the requested second headline line intact even on very wide desktops. */
@media (min-width:981px){
  .ef-title{
    font-size:clamp(2.75rem,3.55vw,3.75rem)!important;
    max-width:660px!important;
  }
}