body, html {
	width: 100%;
	height: 100%;
}

body {
	background: #f6f5f7;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
}

.form-container button {
	border-radius: 20px;
	border: 1px solid #137ed9;
	background-color: #137ed9;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
	width: 100%;
}

button:active {
	transform: scale(0.95);
}

.form {
	background-color: #FFFFFF;
	display: flex;
	align-items: start;
	justify-content: start;
	flex-direction: column;
	padding: 0 50px;
	width: 100%;
}

.container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: rgba(0, 104, 201, 0.1) 0px 4px 12px;
	z-index: 1;
}

.form-container {
	height: 100%;
}

.form-container a {
	color: #000;
	text-decoration: none;
	margin: 10px 0;
}

.sign-in-container {
	width: 100%;
}

.form-container #SignIn {
	margin-top: 20px;
}

.form-container #SignUp {
	margin-top: 20px;
}

.logo_img {
	margin: 20px 0;
	width: 240px;
	height: 140px;
}

.valid {
	color: green !important;
	border-color: green !important;
}

.invalid {
	color: red !important;
	border-color: red !important;

}

@media screen and (min-width: 360px) and (max-width: 480px) {}

@media screen and (max-width: 480px) and (min-width: 361px) {}

@media screen and (min-width: 481px) and (max-width: 767px) {}

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

@media screen and (min-width: 1024px) and (max-width: 1279px) {}

@media screen and (min-width: 1280px) and (max-width: 1439px) {}

@media screen and (min-width: 1440px) and (max-width: 1919px) {}

@media screen and (min-width: 1920px) {}