* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	margin-bottom: 0px;
}

form {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 95%;
}

.errMsg {
	color: red;
	font-size: 14px;
	margin: 10px 0px;
	text-align: center;
}

.loginContainer {
	max-width: 320px;
}

.loginContainer img {
	display: block;
	margin: auto;
	max-width: 80px;
	max-height: 120px;
	margin-bottom: 20px;
	border: 1px solid maroon;
	border-radius: 5px;
}

.loginContainer h2 {
	color: maroon;
	text-align: center;
	margin-bottom: 40px;
}

.loginContainer input[type="text"],
.loginContainer input[type="password"] {
	width: 300px;
	margin: 0px 5px 20px;
	padding: 15px 2px 2px 2px;
	border: none;
	border-bottom: 1px solid maroon;
	font-size: 16px;
}

.loginContainer input[type="text"],
.loginContainer input[type="password"]:focus {
	outline: none;
}

.loginContainer input[type="submit"] {
	width: 300px;
	padding: 15px;
	margin: 10px 5px;
}

.userOption {
	display: flex;
	justify-content: space-between;
	margin: 5px;
}

.userOption a {
	cursor: pointer;
	text-decoration: none;
	color: blue;
}

.userOption a:hover {
	color: maroon;
}

.viewPassword input,
.viewPassword label {
	cursor: pointer;
}

.viewPassword input,
.viewPassword label:hover {
	color: maroon;
}

#nextButton {
	display: block;
}

footer {
	background-color: maroon;
	color: white;
	text-align: center;
	height: 5%;
	display: flex;
	align-items: center;
	width: 100%;
	/* margin-bottom: 10px; */
}

footer p {
	text-align: center;
	width: 100%;
}