html, body {
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Vertical gradient: red at top, blue at bottom */
  background: linear-gradient(180deg, #DA251C 0%, #00579C 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-container {
  background: white;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
  width: 360px;
  border-bottom: 3px solid #DA251C;
  border-top: 3px solid #00579C;
  opacity: 0;
  animation: fadeIn 1.2s forwards ease-in;
}
.login-container img {
        display: block;
        margin: 0 auto 10px auto;
        width: 275px;
}
.login-container span {
          text-align: center;
                margin-top: 20px;
                animation: fadeIn 0.8s forwards ease-in;
}

@keyframes fadeIn {
  to { opacity: 1; }
}



/*New Captcha*/
.captchaQuestion {
	background:#f2f2f2; 
	padding:8px; 
	border-radius:7px; 
	margin-bottom:8px; 
	font-weight:bold;
}

/*CPATCHA ANimation*/
.captcha-animate {
    animation: fadeCaptcha 0.4s ease;
}

@keyframes fadeCaptcha {
    0%   { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}


.login-container h3 {
  color: #00579C;
  margin-bottom: 0.5rem;
  text-align: center;
  opacity: 0;
  animation: fadeIn 1s forwards ease-in;
  animation-delay: 0.1s;
}
.mb-3 {
margin-bottom: 10px !important;
}
.form-label {
  color: #DA251C;
  font-weight: 500;
  opacity: 0;
  animation: fadeIn 0.8s forwards ease-in;
}
/* Add margin-top for password label to separate from generate button */
#otp-section label[for="password"] {
  margin-top: 0.5rem;
  display: block;
}
/* Captcha canvas styles */
#captchaCanvas {
  border-radius: 5px;
  cursor: pointer;
  height: 38px;
}
/* Uniform button styles with glow on hover/focus */
.btn-uniform {
  width: 100%;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  border: none;
  transition: background 0.3s, box-shadow 0.4s;
  user-select:none;
  opacity: 0;
  animation: fadeIn 0.8s forwards ease-in;
}
#generateOtpBtn {
  background-color: #00579C;
  color: #fff;
  animation-delay: 0.3s;
}
#generateOtpBtn:hover, #generateOtpBtn:focus {
  box-shadow: 0 0 12px #00579C;
}
#generateOtpBtn:active {
  background-color: #DA251C;
}
#resendOtpBtn {
  display: none;
  background-color: #28a745;
  color: #fff;
  animation-delay: 0.3s;
}
#resendOtpBtn:hover, #resendOtpBtn:focus {
  box-shadow: 0 0 12px #28a745;
}
#resendOtpBtn:active {
  background-color: #218838;
}
.btn-login {
  background-color: #DA251C;
  color: #fff;
  animation-delay: 0.4s;
}
.btn-login:hover, .btn-login:focus {
  box-shadow: 0 0 12px #DA251C;
}
.btn-login:active {
  background-color: #00579C;
}
.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #8b0000;
  box-shadow: none;
}
#otp-section {
  display: none;
  opacity: 0;
  animation: fadeIn 0.7s forwards ease-in;
}
#otp-section.show {
  display: block;
  opacity: 1;
  animation-delay: 0.5s;
  animation: fadeIn 0.7s forwards ease-in;
}
#timerContainer {
  font-weight: 500;
  color: #DA251C;
  margin-bottom: 10px;
  display: block;
  text-align: center;
  opacity: 0;
  animation: fadeIn 0.8s forwards ease-in;
  animation-delay: 0.6s;
}
label.form-label:nth-of-type(1) { animation-delay: 0.15s; }
label.form-label:nth-of-type(2) { animation-delay: 0.25s; }
.form-control {
  opacity: 0;
  animation: fadeIn 0.8s forwards ease-in;
}
.form-control:nth-of-type(1) { animation-delay: 0.2s; }
.form-control:nth-of-type(2) { animation-delay: 0.3s; }
.form-control:nth-of-type(3) { animation-delay: 0.4s; }

.quick-links {
                text-align: center;
                margin-top: 10px;
                animation: fadeIn 0.8s forwards ease-in;
}
.quick-links span{
                margin-bottom: 10px;
                color: #DA251C;
                font-size: 0.9em;
}
.quick-links a {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
        cursor: pointer;
}
/* Overlay */
.overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        display: none;
        justify-content: center;
        align-items: flex-end;
        z-index: 999;
}
/* Popup Menu */
.popup-menu {
        background: #fff;
        width: 100%;
        max-width: 400px;
        border-radius: 12px 12px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
}
.popup-menu.show {
        transform: translateY(0);
}
.popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
}
.popup-header h3 {
        margin: 0;
}
.close-btn {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
}
.popup-links a {
        display: block;
        padding: 5px 0;
        color: #007bff;
        text-decoration: none;
        border-bottom: 1px solid #eee;
}
@media (max-width: 480px) {
        .login-card {
                margin: 20px;
                padding: 15px;
        }
        .popup-menu {
                max-width: 95%;
        }
}

/*from siginin css*/

.ps_login_error {
text-align: center;
margin-bottom:14px;
}

#ptloginerrorcont, #login_error, #discovery_error {
display:none;
}

.ps_login_error_inner {
display: inline-block;
margin: 0;
}

#error_link {
/*width:5%;*/
display:none;
}

#login_error {
font-size: 1em;
font-weight:bold;
color: #000000;
display: inline-block;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.psloginerror {
font-family: Arial;
font-size: 9pt;
/*color: #000000;*/
color: #007bff;
margin:0;
}

.psloginerror span {
/*color: #000000;*/
color: #007bff;
}

#browsercheck_error div {
color: #000000;
font-weight:normal;
white-space: nowrap;
width:auto;
}

#browsercheck_error div > div {
display: inline-block;
padding-right: 2em;
text-align: right;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}