html {

     	background: #E1ECF2;
     }

     body {
     	font-family: Arial, Helvetica, sans-serif;
     	background: #E1ECF2;

     }

     body {
     	background: #E1ECF2;
     }

     body1 {
     	/* change body to body1 or vice versa for quick commenting-out. */
     	min-height: 100%;
     }

     body {
     	position: absolute;
     	top: 0;
     	bottom: 0;
     	left: 0;
     	right: 0;
     }

     html {
     	background: #E1ECF2;
     }

     body {
     	font-family: Arial, Helvetica, sans-serif;
     	background: #E1ECF2;
     	margin: 0;
     	padding: 0;
     	min-height: 100%;
     	display: flex;
     	align-items: center;
     	justify-content: center;
     	flex-direction: column;
     }

     .container {
     	border-radius: 0px;
     	background-color: #ffffff;
     	padding: 16px;
     	margin: auto;
     	max-width: 500px;
     	opacity: 0;
     	transform: translateY(-50px);
     	animation: fadeIn 2s forwards;
     }

     /* Full-width input fields */
     input[type=text],
     input[type=password] {
     	width: 100%;
     	padding: 15px;
     	margin: 10px 0;
     	border: 1px solid #ccc;
     	border-radius: 5px;
     	box-sizing: border-box;
     	font-size: 1em;
     	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
     	transition: all 0.3s ease;
     }

     input[type=text]:focus,
     input[type=password]:focus {
     	border-color: #2E4EAD;
     	box-shadow: 0 0 5px rgba(46, 78, 173, 0.5);
     	outline: none;
     }

     .login-error {
     	display: block;
     	background-color: red;
     	color: white;
     	text-align: center;
     }

     /* Set a style for all buttons */
     button {
     	background-color: #2E4EAD;
     	color: white;
     	padding: 14px 20px;
     	margin: 8px 0;
     	border: none;
     	border-radius: 4px;
     	cursor: pointer;
     	width: 100%;
     }

     button:hover {
     	opacity: 0.8;
     }

     /* Extra styles for the cancel button */
     .cancelbtn {
     	width: auto;
     	padding: 10px 18px;
     	background-color: #f44336;
     }

     /* Center the image and position the close button */
     .imgcontainer {
     	text-align: center;
     	margin: 24px 0 12px 0;
     	position: relative;
     }

     img.avatar {
     	width: 40%;
     	border-radius: 50%;
     }

     .container {
     	border-radius: 0px;
     	background-color: #ffffff;
     	padding: 16px;
     	margin: auto;
     	margin-top: 100px;
     	max-width: 400px;
     }

     .outer-container {
     	width: -webkit-fill-available;
     	height: -webkit-fill-available;
     	background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
     	display: flex;
     	justify-content: center;
     	align-items: center;
     }

     .container1 {

     	background-color: #ffffff;
     	padding: 16px;
     	margin: auto;

     	max-width: 500px;
     }

     .p-viewer {
     	position: relative;
     	margin: -35px 10px;
     	float: right;
     }

     .fa-eye {
     	color: #000;
     }

     .fa-eye-slash {
     	color: #000;
     }

     span.psw {
     	margin-left: 40%;
     	padding-top: 16px;
     }

     .psw {
     	text-align: right;
     	font-size: 0.9em;
     }

     .psw a {
     	color: #2E4EAD;
     	text-decoration: none;
     }

     .psw a:hover {
     	text-decoration: underline;
     }

     /* The Modal (background) */
     .modal {
     	display: none;
     	/* Hidden by default */
     	position: fixed;
     	/* Stay in place */
     	z-index: 1;
     	/* Sit on top */
     	left: 0;
     	top: 0;
     	width: 100%;
     	/* Full width */
     	height: 100%;
     	/* Full height */
     	overflow: auto;
     	/* Enable scroll if needed */
     	background-color: rgb(0, 0, 0);
     	/* Fallback color */
     	background-color: rgba(0, 0, 0, 0.4);
     	/* Black w/ opacity */
     	padding-top: 60px;
     }

     /* Modal Content/Box */
     .modal-content {
     	background-color: #fefefe;
     	margin: 5% auto 15% auto;
     	/* 5% from the top, 15% from the bottom and centered */
     	border: 1px solid #888;
     	width: 80%;
     	/* Could be more or less, depending on screen size */
     }

     /* The Close Button (x) */
     .close {
     	position: absolute;
     	right: 25px;
     	top: 0;
     	color: #000;
     	font-size: 35px;
     	font-weight: bold;
     }

     .close:hover,
     .close:focus {
     	color: red;
     	cursor: pointer;
     }

     /* Add Zoom Animation */
     .animate {
     	-webkit-animation: animatezoom 0.6s;
     	animation: animatezoom 0.6s
     }

     @keyframes fadeIn {
     	0% {
     		opacity: 0;
     		transform: translateY(-50px);
     	}

     	100% {
     		opacity: 1;
     		transform: translateY(0);
     	}
     }

     @-webkit-keyframes animatezoom {
     	from {
     		-webkit-transform: scale(0)
     	}

     	to {
     		-webkit-transform: scale(1)
     	}
     }

     @keyframes animatezoom {
     	from {
     		transform: scale(0)
     	}

     	to {
     		transform: scale(1)
     	}
     }

     /* Change styles for span and cancel button on extra small screens */
     @media screen and (max-width: 300px) {
     	span.psw {
     		display: block;
     		float: none;
     	}

     	.cancelbtn {
     		width: 100%;
     	}
     }

     .outer-container {
     	display: flex;
     	flex-direction: column;
     	min-height: 100vh;
     }

     .container {
     	padding: 10px;
     	margin: 0 auto;
     	width: 100%;
     	max-width: 500px;
     	/* Adjust as needed */
     }

     .header {
     	background-color: #2E4EAD;
     	padding: 15px 20px;
     	text-align: center;
     	border-top-left-radius: 10px;
     	border-top-right-radius: 10px;
     }

     .header h1 {
     	color: white;
     	margin: 0;
     }

     .form-container {
     	background-color: #f9f9f9;
     	padding: 20px;
     	border-radius: 0px;
     	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     	border-bottom-left-radius: 10px;
     	border-bottom-right-radius: 10px;
     }

     @media screen and (max-width: 768px) {
     	.container {
			border-radius: 0;
     		padding: 10px;
     		max-width: 90%;
			
     	}

     	
     	.form-container {
     		border-radius: 0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
     	}
		
		.header{
			border-radius: 0;
			border-top-left-radius: 10px;
			     	border-top-right-radius: 10px;
		}
     }

     @media screen and (max-width: 768px) {

     	input[type=text],
     	input[type=password] {
     		font-size: 0.9em;
     		padding: 12px;
     	}

     	button {
     		padding: 12px;
     	}
     }