:root {
    --teal-log: #4ba2ac;
    --n-blue: #152235;
    --n-blue-hover: #324f7a;
    --text-gray: #585858;
    --light-gray: #f0f0f0;
    --white:#fff;
  }
  
  html, body { height: 100%; color: var(--text-gray); font-size: 16px; }

  a:focus { outline: none; }
  .mb-3 { margin-bottom: 1.6em;}
  .pb-2 { padding-bottom: 1.0em;}

  .auth-wrap { min-height: 100%; }

  /* Left side */
  .hero { position: relative; min-height: calc(100vh - 64px); margin: 32px 17px; border-radius: 22px; background:url('../images/login-banner.jpg') bottom/cover no-repeat; color: #fff; overflow: hidden; }
  
  /*.hero:before {  dark overlay 
    content: "";  position: absolute; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,.45);}*/
    
  .hero-inner { position: absolute; padding: 30px; bottom: 0;}
  .hero h2    { font-size: 26px; margin: 0 0 40px; font-weight: 600; text-shadow:0 0px 2px #000000}
  .news-list { max-height: 27vh; overflow-y: auto; padding-right: 10px; scrollbar-width: thin;}
  .news-item { margin-bottom: 18px; }
  .news-item h4 { margin: 0 0 5px; font-weight: 600; }
  .news-item p { margin: 0 0 0px; font-size: 14px; }
  .news-item a { color: var(--white); text-decoration: none; font-size: 12px; }
  .news-item a:hover { text-decoration: underline; }


  /* Right side – card */
  .login-col { padding: 25px 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: 100vh;}
  .login-card { width: 100%; width: 460px; margin: 0 auto;}

  .brand { margin-bottom: 10px; }

  .brand h3 { margin: 0; font-weight: 700; letter-spacing: .2px; }
  .tagline { margin-top: 40px;  }

  .login-field { position: relative;}
  .login-field .input-ico { position: absolute; left: 20px; top: 16px; z-index: 9;}
  .login-field .form-control { font-size: 16px; height: 55px; padding-left: 55px; border-radius: 8px; border: 0; box-shadow: none; background-color: var(--light-gray); }

  .remember-forgot   {  margin: 10px 0 40px; display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-pack: justify; justify-content: space-between;  -ms-flex-align: center; align-items: center; }
  .remember-forgot a { color: var(--teal-log);}
  .link-inline { display: flex;justify-content: space-between;gap: 20px;min-width: 150px; }
  .link-inline a { color: var(--n-blue); font-size: 14px}

  .btn-login { height: 55px; font-size: 18px; color: var(--white) !important; background-color: var(--n-blue); border-color:none; border-radius: 8px;}
  .btn-login:hover { background-color:var(--n-blue-hover); border-color:none; }

  .text-danger {
    color: #ff0500;
    font-size: 13px;
  }

  #captcha_image img {
      border-radius: 8px;
  }
  .catpcha {
      cursor: pointer;
      padding-left: 10px;
  }

  @media (max-width: 991px) {
    .mb-3 { margin-bottom: 1em;}
    .tagline { margin-bottom: 30px; }
    .remember-forgot { margin: 10px 0 30px; }
    .hero-inner { position: absolute; padding: 15px; }
  }
 /* @media (max-width: 1199px) {
  .hero:before {  content: "";  position: absolute; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,.15);}
 } */
  @media (max-width: 767px) {
    .hero { min-height: 340px; max-width: 460px; width: 100%; border-radius: 8px; }
    /* .hero:before {  content: "";  position: absolute; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,.25);} */
    .hero-flex-center-mob { display: flex; justify-content: center;}
    
    .news-list { max-height: 30vh; }
    
    .row-reverse-mob { display: flex; flex-direction: column-reverse;}
    .login-col { min-height: auto; }
  }