body
{
    background:#475d62;
    background-color: cover;
    /* font-family: sans-seriff; */
    margin: 0;
			padding: 0;
			height: 100vh;
			background: linear-gradient(135deg, #0a2640, #144b8a);
			font-family: 'Segoe UI', sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
}
    .login-dark {
    /* max-width:320px;
    width:90%; */
    background-color: #1e2833;
    padding:40px;
    border-radius:4px;
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    color:#fff;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
    }
    .login-dark form {
    /* max-width:320px;
    width:90%; */
    background-color:#1e2833;
    padding:40px;
    border-radius:4px;
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
    color:#fff;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
    }
    .login-dark .illustration {
    text-align:center;
    /* padding:15px 0 20px;
    font-size:100px; */
    font-size:30px;
    color:#2980ef;
    }
    .login-dark form .form-control {
    background:none;
    border:none;
    border-bottom:1px solid #434a52;
    border-radius:0;
    box-shadow:none;
    outline:none;
    color:inherit;
    }
    .login-dark form .btn-primary {
    background:#214a80;
    border:none;
    border-radius:4px;
    padding:11px;
    box-shadow:none;
    margin-top:26px;
    text-shadow:none;
    outline:none;
    }
    .login-dark form .btn-primary:hover, .login-dark form .btn-primary:active {
    background:#214a80;
    outline:none;
    }
    .login-dark form .forgot {
    display:block;
    text-align:center;
    font-size:12px;
    color:#6f7a85;
    opacity:0.9;
    text-decoration:none;
    }
    .login-dark form .forgot:hover, .login-dark form .forgot:active {
    opacity:1;
    text-decoration:none;
    }
    .login-dark form .btn-primary:active {
    transform:translateY(1px);
    }
.forgot-password-hint
{
    color: #d70808;
    display: inline-block;
    text-align: justify;
    margin-top: 3px;
    font-size: 12px;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

.password-reset-dark {
    /* max-width:320px;
    width:90%; */
    max-width: 100%;
    width: 800px;
    background-color: #1e2833;
    padding:40px;
    border-radius:4px;
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    color:#fff;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
    }
    .password-reset-dark form {
    /* max-width:320px;
    width:90%; */
    background-color:#1e2833;
    padding:40px;
    border-radius:4px;
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
    color:#fff;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
    }
    .password-reset-dark .illustration {
    text-align:center;
    /* padding:15px 0 20px;
    font-size:100px; */
    font-size:30px;
    color:#2980ef;
    }
    .password-reset-dark form .form-control {
    background:none;
    border:none;
    border-bottom:1px solid #434a52;
    border-radius:0;
    box-shadow:none;
    outline:none;
    color:inherit;
    width: 100%;
    }
    .password-reset-dark form .btn-primary {
    background:#214a80;
    border:none;
    border-radius:4px;
    padding:11px;
    box-shadow:none;
    margin-top:26px;
    text-shadow:none;
    outline:none;
    }
    .password-reset-dark form .btn-primary:hover, .password-reset-dark form .btn-primary:active {
    background:#214a80;
    outline:none;
    }
    .password-reset-dark form .forgot {
    display:block;
    text-align:center;
    font-size:12px;
    color:#6f7a85;
    opacity:0.9;
    text-decoration:none;
    }
    .password-reset-dark form .forgot:hover, .password-reset-dark form .forgot:active {
    opacity:1;
    text-decoration:none;
    }
    .password-reset-dark form .btn-primary:active {
    transform:translateY(1px);
    }
    
    .alert-dismissible
{
    padding-right:10px !important;
    text-align:justify;
}


		/* .auth-container {
		width: 90%;
		max-width: 400px;
		padding: 30px 20px;
		} */

		.auth-container {
			width: 90%;
			max-width: 400px;
			padding: 30px 20px;
			margin-top: 20px;
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.18);
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border-radius: 20px;
			padding: 40px 30px;
			color: #fff;
			animation: fadeIn 0.8s ease;
		}

		.auth-container h3 {
			text-align: center;
			margin-bottom: 20px;
			font-weight: 600;
			color: #ffffff;
		}

		.form-control {
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid #5a9bd5;
			color: #fff;
		}

		.form-control::placeholder {
			color: #ddd;
		}

		.form-control:focus {
			background-color: rgba(255, 255, 255, 0.15);
			border-color: #00bfff;
			color: #fff;
		}

		.btn-primary {
			background: linear-gradient(90deg, #007bff, #00bfff);
			border: none;
			width: 100%;
			font-weight: bold;
			border-radius: 8px;
			margin-top: 10px;
		}

		.auth-logo {
			text-align: center;
			margin-bottom: 15px;
		}

		.auth-logo img {
			height: 50px;
		}

		.auth-icon {
			text-align: center;
			font-size: 3rem;
			color: #00bfff;
			margin-bottom: 10px;
		}

		.auth-link {
			display: block;
			text-align: center;
			margin-top: 12px;
			color: #ccc;
			font-size: 0.9rem;
		}

		.auth-messages {
			width: 100%;
			max-width: 400px;
			margin-bottom: 15px;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(20px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.password-hint {
			color: gray;
			display: inline-block;
			text-align: left;
			margin-top: 3px;
			font-size: 13px;
			margin-bottom: 10px;
		}

		.illustration {
			text-align: center;
			font-size: 50px;
			margin-bottom: 20px;
			color: #007bff;
		}