/* eb_css/login_redesign.css */
:root{
  --lg-brand:#0a5cd6;
  --lg-brand-dark:#084bb0;
  --lg-ink:#0f1c3f;
  --lg-muted:#6b7a90;
  --lg-line:#e3e8ef;
  --lg-field:#f8fafc;
}

/* ---------- Page background + centered card ---------- */
body#singpassLogin{
  background:#d7dde6;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}
body#singpassLogin > .container-fluid{width:100%;max-width:1060px;padding:0;}
body#singpassLogin .row{margin:0;}
body#singpassLogin .login-wapper{
  padding:0;
  background:#fff;
  border-radius:16px;
  overflow:auto;
  box-shadow:0 30px 60px rgba(15,28,63,.18);
}

/* form on the LEFT, panel on the RIGHT (no HTML reordering needed) */
body#singpassLogin .card-group{
  flex-direction:row-reverse;
  flex-wrap:nowrap;
}
body#singpassLogin .card-group > *{border:0;border-radius:0;margin:0;}
body#singpassLogin .card-group > .login-right{
  flex:0 0 50%;
  max-width:50%;
  /* padding:48px 56px !important; */
}
body#singpassLogin .card-group > :first-child{
  flex:0 0 50%;
  max-width:50%;
}
body#singpassLogin .hero-content{min-height:0 !important;height:100%;justify-content:center;}
body#singpassLogin .card-body{padding:0;}
body#singpassLogin .container.theme_back{max-width:none;width:100%;padding:0;}

/* logo at top of the form side (was mobile-only) */
body#singpassLogin .hero-content .visible-xs{
  display:block !important;
  text-align:left !important;
  margin:0 0 28px !important;
}
body#singpassLogin .hero-content .visible-xs img{width:140px;}

/* ---------- Headings ---------- */
body#singpassLogin .theme_back h1,
body#singpassLogin .head_h1,
body#singpassLogin #checkmail{
  font-size:28px;
  font-weight:700;
  color:var(--lg-ink);
  margin:0 0 8px;
}
body#singpassLogin #verificatINfoMSG{color:var(--lg-muted);font-size:14px;}

/* ---------- Login method list (Email / Singpass / Microsoft / Google) ---------- */
body#singpassLogin .LoginDetails{
  display:flex;
  flex-direction:column;
  gap:12px;
  list-style:none;
  padding:0;
  margin:20px 0 0;
}
body#singpassLogin .LoginDetails li{display:block;width:100%;margin:0;}
body#singpassLogin .LoginDetails li.lasttab{display:none;}
body#singpassLogin .logindiff{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  padding:0 16px;
  background:#fff;
  border:1px solid var(--lg-line);
  border-radius:8px;
  color:var(--lg-ink);
  font-size:14px;
  text-decoration:none;
  transition:all .2s ease;
}
body#singpassLogin .logindiff:hover{
  border-color:var(--lg-brand);
  box-shadow:0 4px 12px rgba(10,92,214,.12);
  color:var(--lg-ink);
}
body#singpassLogin .logindiff img{width:20px;height:20px;object-fit:contain;}

/* Google button inside its link: shrink to a plain 20px icon */
body#singpassLogin .gsi-material-button{
  width:20px;height:20px;min-width:20px;padding:0;border:0;background:transparent;
}
body#singpassLogin .gsi-material-button-state{display:none;}
body#singpassLogin .gsi-material-button-content-wrapper{width:20px;height:20px;padding:0;}
body#singpassLogin .gsi-material-button-icon{width:20px;height:20px;margin:0;}

body#singpassLogin .otherlogin{color:var(--lg-brand);font-size:13px;font-weight:600;margin-top:14px;}

/* ---------- Inputs ---------- */
body#singpassLogin .form-signin .form-control{
  height:48px;
  background:var(--lg-field);
 border: 1px solid #0f1c3f;
  border-radius:8px;
  font-size:14px;
  box-shadow:none;
}
body#singpassLogin .form-signin .form-control:focus{
  background:#fff;
  border-color:var(--lg-brand);
  box-shadow:0 0 0 3px rgba(10,92,214,.12);
}
body#singpassLogin .forgot_pswd .btn-link{color:var(--lg-brand);font-size:13px;font-weight:600;}

/* ---------- Buttons ---------- */
body#singpassLogin .btn-submit{
  width:100%;
  height:48px;
  background:var(--lg-brand);
  border-color:var(--lg-brand);
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  box-shadow:none;
}
body#singpassLogin .btn-submit:hover,
body#singpassLogin .btn-submit:focus{background:var(--lg-brand-dark);border-color:var(--lg-brand-dark);}

/* ---------- Alerts / footer note ---------- */
body#singpassLogin .alert{border-radius:8px;font-size:13px;}
body#singpassLogin .recaptcha-notice p{
  margin:18px 0 0;
  font-size:11px;
  line-height:1.5;
  color:var(--lg-muted);
  text-align:center;
}

/* ---------- Right blue panel (used by new left_auth.php) ---------- */
.auth-panel{
  height:100%;
  /* min-height:660px; */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:56px 40px 40px;
  color:#fff;
  text-align:center;
}
.auth-panel__art{position:relative;width:100%;max-width:340px;height:300px;margin:auto;}
.auth-panel__art::before{
  content:"";position:absolute;left:50%;top:50%;width:280px;height:280px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.08);
}
.ap-window{
  position:absolute;right:0;top:70px;width:190px;padding:10px;
  background:#f1f4f9;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.ap-dots{display:flex;gap:4px;margin-bottom:8px;}
.ap-dots i{width:6px;height:6px;border-radius:50%;background:#ef5350;}
.ap-dots i:nth-child(2){background:#fbc02d;}
.ap-dots i:nth-child(3){background:#66bb6a;}
.ap-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:6px;padding:8px;margin-top:6px;}
.ap-avatar{width:20px;height:20px;border-radius:50%;background:#c9d4e6;flex:0 0 20px;}
.ap-lines{flex:1;}
.ap-lines b{display:block;height:5px;border-radius:3px;background:#cbd5e1;margin:3px 0;}
.ap-lines b:last-child{width:60%;background:#e2e8f0;}
.ap-badge{
  position:absolute;left:0;width:48px;height:48px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.ap-badge.b1{top:40px;left:30px;color:#4a154b;}
.ap-badge.b2{top:125px;left:0;color:var(--lg-brand);}
.ap-badge.b3{top:210px;left:30px;color:#ea4335;}
.auth-panel__text h3{font-size:22px;font-weight:700;color:#fff;margin:0 0 8px;}
.auth-panel__text p{font-size:13px;color:rgba(255,255,255,.75);margin:0;}
.auth-panel__dots{display:flex;gap:8px;margin-top:22px;justify-content:center;}
.auth-panel__dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);}
.auth-panel__dots span.active{background:#fff;}

/* ---------- Mobile ---------- */
@media (max-width:767.98px){
  body#singpassLogin{padding:0;align-items:flex-start;}
  body#singpassLogin .login-wapper{border-radius:0;}
  body#singpassLogin .card-group{flex-direction:column;}
  body#singpassLogin .card-group > :first-child{display:none;}
  body#singpassLogin .card-group > .login-right{flex:0 0 100%;max-width:100%;padding:32px 24px !important;}
}


body#singpassLogin .LoginDetails > li.list-inline-item{
    margin: 0px !important;
}
.LoginDetails li{
    padding: 5px 0px !important;
}

/* 02112026 - Swayam */

.card-group{
    height: 80vh !important;
}


.maintheme {
    margin: 0% !important;
}

.backbutton, .backbutton2 {
  top: 10px;
}
.container.px-4.theme_back{
  padding-top: 10px;
}
.recaptcha-notice p{
  margin: 0px !important;
}
@media only screen and (max-width: 600px) {
    .recaptcha-notice {
        bottom: 0px !important;
        position: relative;
    }
    .card-group{
    height: 100vh !important;
    }
}
@media (min-width: 992px) {
    .sidebar-mini .sidebar .logo a.logo-normal {
        opacity: 0;
        display: none;
        padding: 15px 5px 11px !important;
    }
}