:root {
	--white: #FFFFFF;
	--background: #efefef;
	--appAccentColor: #2955D0;
	--darkText: #303030;
	--lightText: #8f8f8f;
	--secondaryButton: #bebebe;
}

login-screen,
two-factor-request-screen,
two-factor-login-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(100% - 50px);
}

.loginContainer {
	background-color: var(--white);
	border-radius: 15px;
	padding: 30px;
	margin: 30px;
	width: 500px;
	box-shadow: -3px 5px 7px #00000020;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.loginContainer h3 {
	text-align: center;
	color: var(--darkText);
	margin-bottom: 50px;
}

.loginContainer p {
	margin: 0px 0px 5px 0px;
	color: var(--lightText);
}

.loginContainer img {
	width: 230px;
	align-self: center;
}

.loginContainer #invalidCredentialsBanner.hidden {
	display: none;
}

.loginContainer #invalidCredentialsBanner {
	background-color: #d112452f;
	color: #d11245;
	padding: 3px 10px;
	border-radius: 10px;
	text-align: center;
	margin-bottom: 10px;
}

.loginContainer input:not(input[type="radio"]) {
	margin-bottom: 20px;
}

.loginContainer label {
	color: var(--lightText);
	display: flex;
	align-items: center;
	margin: 10px 0px;
	cursor: pointer;
}

.loginContainer .submitButton {
	margin-top: 30px;
}

.loginContainer #developedBy {
	margin-top: 30px;
	align-self: center;
	font-size: 12px;
}

.loginContainer #developedBy a {
	color: var(--darkText);
}