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

.mainPage{	
	width: 100%;
	height: 100%;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media only screen and (max-width: 400px) {
	.loginContainer{
		width: 60%;
	}
}

.loginContainer{
	width: 30%;
}

.logoContainer{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	
	width: 100%;
	height: auto;
}

.logoContainer .logo{
	width: 200px;
	height: auto;
}

.loginForm{
	background: white;
	border-radius: 10px;
	overflow: hidden;
}

.loginForm .field{
	margin-bottom: 30px;
}

.loginForm .header{
	margin-bottom: 30px;
}

.loginForm .error.message{
	display: none;
}

.loginForm .formButton{
	background: #0d8ccf;
	color: white;
}

.loadingAnimation{
	display: none;
}

.loadingAnimation div {
	width: 10px;
	height: 10px;
	position: absolute;
	left: -20px;
	top: 50px;
	background-color: #002b80;
	border-radius: 50%;
	animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
}

.loadingAnimation div:nth-child(2) {
	animation-delay: 100ms;
}

.loadingAnimation div:nth-child(3) {
	animation-delay: 250ms;
}

.loadingAnimation div:nth-child(4) {
	animation-delay: 400ms;
}

@keyframes move {
	0% {left: 0%;}
	75% {left:100%;}
	100% {left:100%;}
}

.ui.dividing.header {
	border-bottom: 2px solid #002b80;
}

#usericon{
	color: #0d8ccf;
}

#lockicon{
	color: #0d8ccf;
}